feat: add figure and caption support to editor #7875
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Introduces a new figure extension with caption support for images, audio, and video blocks. Updates image, audio, and video extensions to use figure containers, refactors alignment logic, and improves resizing and caption editing UI. Also updates input styling and localization for figure captions and image load errors.
f2c-ci-robot
bot
added
kind/feature
@halo-dev/api-client
@halo-dev/components
@halo-dev/richtext-editor
@halo-dev/ui-shared
@halo-dev/ui-plugin-bundler-kit
commit: |
Introduces a `visible` prop and logic to various editor components and bubble items, ensuring UI elements only appear when relevant (e.g., when media src is present). Refactors image, audio, and video extensions to use this visibility logic, improves media size handling, and adds ProseMirror plugins for figure auto-deletion and legacy video format migration. Updates styles and localization for enhanced media editing experience.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7875 +/- ##
============================================
+ Coverage 59.55% 61.15% +1.59%
- Complexity 3812 3933 +121
============================================
Files 677 689 +12
Lines 23248 23507 +259
Branches 1500 1522 +22
============================================
+ Hits 13846 14376 +530
+ Misses 8764 8403 -361
- Partials 638 728 +90 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Replaces InlineBlockBox with node-view-wrapper for audio, image, and video node views, simplifying component structure. Adds keyboard shortcuts and improved placeholder handling for figure captions, and refines figure node validation logic. Updates image and video resizing logic, removes default width/height attributes, and improves resize event handling for better UX.
f2c-ci-robot
bot
added
the
needs-rebase
Increased priority values for code block and figure caption extensions to ensure correct shortcut handling. Updated the figure extension to use fakeSelection and revised the backspace shortcut logic to utilize RangeSelection for improved selection behavior.
Lowered the priority of the code block extension from 1100 to 900 and removed the priority from the figure caption extension to improve shortcut key handling and extension ordering.
Adjusted extension priorities for code-block, figure, gap-cursor, indent, and paragraph to improve Backspace and selection handling. Moved use-extension composable to a shared location and updated imports. Added a randomUUID utility. Refactored App.vue to use filterDuplicateExtensions for extension management.
Changed the 'content' property of the figure node from 'block+' to 'block+?' to allow the block content to be optional. This provides more flexibility in figure node usage.
Added a check using lodash-es isEmpty to avoid setting align-items style when alignItems attribute is empty. Also removed alignItems from the figure node's style attribute to prevent unintended styling.
f2c-ci-robot
bot
removed
the
needs-rebase
LIlGG
changed the title
f2c-ci-robot
bot
removed
the
do-not-merge/work-in-progress
Member
|
进入新建页面会卡死，进入编辑页面不会。 |
Member
Author
|
/hold |
f2c-ci-robot
bot
added
the
do-not-merge/hold
Moved filterDuplicateExtensions from use-extension composable to a standalone utility in utils. Removed use-extension.ts and updated imports across the codebase to use the new utility. Also adjusted Figure extension content definition and cleaned up unused imports.
Updated figure node content model to allow image, video, or audio before captions. Changed figureCaption node to accept only text content. Removed unnecessary paragraph creation in image extension and improved delete/backspace handling in paragraph extension. Also added ExtensionParagraph to presetExtensions in DefaultEditor.vue and removed a debug console.log from App.vue.
Updated audio, image, and video editor components to consistently support percentage-based width and height attributes. Simplified size input logic in bubble menus, removed pixel conversion code, and unified the approach for setting and rendering media sizes. This improves flexibility and consistency for responsive layouts.
Replaced the usage of utils.id.uuid with uuidv7 from the 'uuid' package in filter-duplicate-extensions.ts. Added 'uuid' as a dependency in package.json.
Member
Author
|
/unhold |
f2c-ci-robot
bot
added
needs-rebase
f2c-ci-robot
bot
removed
the
needs-rebase
Replaces previous 'alignItems' and 'textAlign' logic with a unified 'position' attribute for figures, images, videos, and audio. Updates Vue components and command handlers to use 'position' for alignment, simplifies related code, and improves consistency across media types. Also introduces a Vue node view for figure captions and updates related styles.
f2c-ci-robot
bot
added
the
needs-rebase
f2c-ci-robot
bot
removed
the
needs-rebase
Adds logic to set the width attribute in newly created figure captions for both image and video extensions, ensuring the caption inherits the width from the corresponding media node. Also imports findChildren utility for node traversal.
|
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: ruibaby The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
f2c-ci-robot
bot
added
the
approved
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What type of PR is this?
/kind feature
/area editor
What this PR does / why we need it:
添加 figure 功能至 editor 中。
当前会将
figure应用至image、video、audio等。由于 figure 的引入，image 等结构会有一定的变化，将由原先的行内元素转变为块级元素。
How to test it?
测试原有的
image、video、audio等功能是否正常可用。测试
figure-caption是否正常可用。测试历史数据是否正常渲染。
Which issue(s) this PR fixes:
Fixes #5388
Does this PR introduce a user-facing change?