fix: word paste missing formats #67
Conversation
WalkthroughThe changes introduced in this pull request focus on enhancing the functionality of the Fluent Editor by adding new attributors for text styling, such as font size, font style, line height, and text indent. Additionally, the management of inner HTML in the editor is improved through the introduction of a reactive reference and an update function. Some deprecated configurations related to font settings are removed, indicating a shift towards a more modular and dynamic approach to styling. Changes
Possibly related PRs
Suggested labels
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (1)
packages/fluent-editor/src/fluent-editor.ts (1)
Line range hint
1-161: Reminder: Add tests and update documentation.The PR checklist indicates that tests for the changes have not been added, and documentation has not been updated in relation to the bug fix. Please ensure that appropriate tests are added to cover the changes and update the relevant documentation to reflect the improvements in the handling of pasted content formatting.
Do you want me to generate the test cases or open a GitHub issue to track these tasks?
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (10)
- packages/docs/fluent-editor/demos/get-html.vue (3 hunks)
- packages/fluent-editor/src/attributors/font-size.ts (1 hunks)
- packages/fluent-editor/src/attributors/font-style.ts (1 hunks)
- packages/fluent-editor/src/attributors/index.ts (1 hunks)
- packages/fluent-editor/src/attributors/line-height.ts (1 hunks)
- packages/fluent-editor/src/attributors/text-indent.ts (1 hunks)
- packages/fluent-editor/src/config.ts (0 hunks)
- packages/fluent-editor/src/fluent-editor.ts (3 hunks)
- packages/fluent-editor/src/lineheight.ts (0 hunks)
- packages/fluent-editor/src/table/table-config.ts (1 hunks)
Files not reviewed due to no reviewable changes (2)
- packages/fluent-editor/src/config.ts
- packages/fluent-editor/src/lineheight.ts
Files skipped from review due to trivial changes (1)
- packages/fluent-editor/src/attributors/index.ts
Additional comments not posted (11)
packages/fluent-editor/src/attributors/font-size.ts (1)
1-6: LGTM!The code segment correctly defines a new
SizeStyleattributor for the Quill editor, which allows for the manipulation of font size within the editor's content. The attributor is properly associated with the 'font-size' CSS property and configured to operate within the inline scope.This addition enhances the editor's capabilities by enabling users to adjust font sizes directly through the editor interface, thereby improving the overall text formatting options available to users. The code segment aligns with the PR objective and does not introduce any breaking changes.
packages/fluent-editor/src/attributors/font-style.ts (1)
1-6: LGTM!The
FontStyleattributor is correctly defined using the Parchment library. It maps thefont-familyCSS property to thefontattribute, which is a valid mapping. The scope of the attributor is correctly set toParchment.Scope.INLINE, which means it will apply to inline elements within the document.This attributor will allow for more granular control over font styling in the editor, enabling users to specify different font families for selected text.
The code is well-structured and should not introduce any issues.
packages/fluent-editor/src/attributors/line-height.ts (1)
1-6: LGTM!The
LineHeightStyleattributor is correctly defined using theParchment.StyleAttributorclass and is appropriately configured to apply to inline scopes. This addition enhances the styling capabilities of the Quill editor by enabling developers to set and manipulate line-height properties through the editor's API.The import statements are correct and necessary for the code to function. This change does not introduce any breaking changes to the existing functionality of the editor and improves its flexibility by allowing for more granular control over text styling.
packages/fluent-editor/src/attributors/text-indent.ts (1)
1-6: LGTM!The
TextIndentStyleattributor is correctly implemented and configured:
- It targets the
text-indentCSS property, which is appropriate for controlling text indentation.- The scope is set to
Parchment.Scope.BLOCK, which is the correct scope for applying text indentation to block-level elements.- The attributor is properly exported, making it available for use in other parts of the codebase.
This addition enhances the styling capabilities of the Quill editor by enabling more precise control over text indentation in rich text documents.
packages/fluent-editor/src/table/table-config.ts (1)
24-24: Verify the usage of the new'list'attribute in the codebase.The addition of the
'list'attribute to theCELL_ATTRIBUTESconstant aligns with the PR objective of fixing formatting issues when pasting content into the editor. This change enhances the flexibility of the table component by allowing list-related properties for table cells.Please ensure that the new
'list'attribute is properly handled in other parts of the codebase, such as:
- Parsing and rendering of table cells with the
'list'attribute.- Updating any relevant documentation or examples to reflect the new attribute.
Run the following script to verify the usage of the
'list'attribute:Verification successful
The 'list' attribute is properly integrated and used throughout the codebase.
The addition of the 'list' attribute to the
CELL_ATTRIBUTESconstant is consistent with its usage in various parts of the codebase. It is being used for list-related operations in table cells, including formatting, handling, and clipboard operations. The implementation supports different types of lists (bullet, ordered, check) and their interactions with other formatting options.However, it's recommended to update the documentation to include information about the new 'list' attribute for table cells, as no occurrences were found in markdown files.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the 'list' attribute in the codebase. # Test 1: Search for the 'list' attribute usage in TypeScript files. # Expect: Occurrences of the 'list' attribute being used or referenced. rg --type ts -A 5 $'\'list\'' # Test 2: Search for the 'list' attribute in the documentation files. # Expect: Occurrences of the 'list' attribute in the documentation. fd -e md -x rg -A 5 $'\'list\''Length of output: 10071
packages/docs/fluent-editor/demos/get-html.vue (4)
38-38: LGTM!The introduction of
articleRefusingref<HTMLElement>()is a good way to manage the DOM element reactively. It can be used to update the content of the element more effectively.
39-43: LGTM!The
updateHTMLfunction is a good addition that encapsulates the logic for updating the inner HTML of the referenced element. It enhances code maintainability and readability by providing a centralized update logic.The check for
articleRef.valueensures that the update is performed only when the element is available, avoiding potential errors.
82-82: LGTM!Utilizing
updateHTMLinside theonMountedlifecycle hook is a good practice. It ensures that the initial content of the editor is displayed correctly and maintains consistency with the rest of the code that usesupdateHTMLfor updates.
85-85: LGTM!Utilizing
updateHTMLinside thetext-changeevent listener is a good practice. It ensures that the displayed content remains in sync with the editor's state whenever the content changes. This maintains consistency with the rest of the code that usesupdateHTMLfor updates.packages/fluent-editor/src/fluent-editor.ts (2)
24-24: Imports align with the PR objectives.The newly added imports for
LineHeightStyle,SizeStyle,FontStyle, andTextIndentStylefrom./attributorssuggest a restructuring of how styles are managed within the editor. These attributors are likely related to handling text styles and attributes, which aligns with the PR objectives of ensuring that the pasted content retains the correct formats for various text properties.
148-156: Format registrations align with the PR objectives.The registration of various formats, including the newly added
font,size,line-height, andtext-indent, indicates a reorganization of how these formats are registered within the Quill editor. These newly registered formats are likely related to the newly imported attributors, which suggests a refinement in the handling of text styles and attributes. The changes align with the PR objectives of improving the user experience by ensuring that pasted text maintains its intended formatting.
|
@zzxming |
text-indent 设置的是首行缩进，文本前后缩进是另外的格式，quill本身也没有实现文本前后的缩进，需要吗？ |
了解，我觉得不着急，Word 粘贴本身就比较复杂，后续根据业务需求再逐渐完善吧 |
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: #61
What is the new behavior?
paste correct format about
line-height/text-indent/font-size/font-style/list.Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores