feat(rich-text-editor): tiny-tiptap and some extension #1764
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Base branches to auto review (1)
Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe recent updates to the TinyTiptap package introduce a comprehensive rich text editor with enhanced documentation, new extensions for text formatting, and improved functionalities such as customizable menus and syntax highlighting. These changes streamline integration with Vue.js, allowing developers to leverage various editing features efficiently. The overall structure promotes modularity, enabling easy customization and extension of the editor's capabilities. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Editor
participant SlashMenu
User->>Editor: Type command '/'
Editor-->>SlashMenu: Show available options
User->>SlashMenu: Select an option
SlashMenu->>Editor: Execute command
Editor-->>User: Update content
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 as PR comments)
Additionally, you can add 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: 2
Outside diff range, codebase verification and nitpick comments (8)
packages/tiny-tiptap/src/extension/history/index.ts (1)
5-11: Extension definition looks good. Consider adding comments.The
Historyextension is correctly defined and follows best practices. Adding comments explaining the purpose of the extension and the options being added would improve readability.packages/tiny-tiptap/src/extension/underline/index.ts (1)
5-11: Extension definition looks good. Consider adding comments.The
Underlineextension is correctly defined and follows best practices. Adding comments explaining the purpose of the extension and the options being added would improve readability.packages/tiny-tiptap/src/extension/text-align/index.ts (1)
5-11: Extension definition looks good. Consider adding comments.The
TextAlignextension is correctly defined and follows best practices. Adding comments explaining the purpose of the extension and the options being added would improve readability.packages/tiny-tiptap/src/extension/code-block/lowlight.ts (2)
1-5: Consider adding a comment to explain the purpose of these imports.Adding a brief comment explaining why these specific languages are imported can improve code readability and maintainability.
+ // Import language definitions for syntax highlighting import css from 'highlight.js/lib/languages/css' import js from 'highlight.js/lib/languages/javascript' import ts from 'highlight.js/lib/languages/typescript' import html from 'highlight.js/lib/languages/xml' import { lowlight } from 'lowlight'
7-10: Consider adding a comment to explain the purpose of these registrations.Adding a brief comment explaining why these specific languages are registered can improve code readability and maintainability.
+ // Register languages with lowlight for syntax highlighting lowlight.registerLanguage('html', html) lowlight.registerLanguage('css', css) lowlight.registerLanguage('js', js) lowlight.registerLanguage('ts', ts)packages/tiny-tiptap/src/extension/color/index.ts (1)
1-4: Consider adding a comment to explain the purpose of these imports.Adding a brief comment explaining why these specific types and extensions are imported can improve code readability and maintainability.
+ // Import necessary types and extensions for the color extension import type { ExtensionOptions } from '@/types' import type { ColorOptions } from '@tiptap/extension-color' import TiptapColor from '@tiptap/extension-color' import TiptapTextStyle from '@tiptap/extension-text-style'packages/tiny-tiptap/src/extension/highlight/index.ts (1)
1-3: Consider adding a comment to explain the purpose of these imports.Adding a brief comment explaining why these specific types and extensions are imported can improve code readability and maintainability.
+ // Import necessary types and extensions for the highlight extension import type { ExtensionOptions } from '@/types' import type { HighlightOptions } from '@tiptap/extension-highlight' import TiptapHighlight from '@tiptap/extension-highlight'packages/tiny-tiptap/src/TiptapEditor.ts (1)
55-73: Remove commented-out code.The commented-out console.log statement should be removed to clean up the code.
- // console.log(extension, key, view)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (32)
- packages/tiny-tiptap/README.md (1 hunks)
- packages/tiny-tiptap/package.json (1 hunks)
- packages/tiny-tiptap/src/TiptapEditor.ts (1 hunks)
- packages/tiny-tiptap/src/components/slash/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/blockquote/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/bold/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/bullet-list/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/code-block/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/code-block/lowlight.ts (1 hunks)
- packages/tiny-tiptap/src/extension/code/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/color/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/heading/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/highlight/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/history/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/image/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/italic/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/link/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/ordered-list/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/paragraph/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/placeholder/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/strike/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/subscript/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/supscript/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/table/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/task-list/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/text-align/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/text/index.ts (1 hunks)
- packages/tiny-tiptap/src/extension/underline/index.ts (1 hunks)
- packages/tiny-tiptap/src/index.ts (1 hunks)
- packages/tiny-tiptap/tsconfig.json (1 hunks)
- packages/tiny-tiptap/types/index.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- packages/tiny-tiptap/src/index.ts
- packages/tiny-tiptap/tsconfig.json
Additional context used
Biome
packages/tiny-tiptap/src/components/slash/index.ts
[error] 92-92: Avoid the use of spread (
...) syntax on accumulators.Spread syntax should be avoided on accumulators (like those in
.reduce) because it causes a time complexity ofO(n^2).
Consider methods such as .splice or .push instead.(lint/performance/noAccumulatingSpread)
Additional comments not posted (85)
packages/tiny-tiptap/src/extension/text/index.ts (3)
4-10: LGTM! Ensure correct extension options.The extension correctly extends
TiptapTextwith additional options. Ensure that the parent options are correctly inherited and merged.
12-12: LGTM! Export statement.The export statement is correct and ensures the customized text extension is available for use.
1-2: Ensure correct import paths.Verify that the import paths for
ExtensionOptionsandTiptapTextare correct and accessible within the project.packages/tiny-tiptap/src/extension/bold/index.ts (3)
5-10: LGTM! Ensure correct extension options.The extension correctly extends
TiptapBoldwith additional options. Ensure that the parent options are correctly inherited and merged.
13-13: LGTM! Export statement.The export statement is correct and ensures the customized bold extension is available for use.
1-3: Ensure correct import paths.Verify that the import paths for
ExtensionOptions,BoldOptions, andTiptapBoldare correct and accessible within the project.Verification successful
Import paths are correct.
The import paths for
ExtensionOptions,BoldOptions, andTiptapBoldare correct and accessible within the project.
ExtensionOptionsis defined inpackages/tiny-tiptap/types/index.tsand correctly imported from@/types.BoldOptionsandTiptapBoldare correctly imported from@tiptap/extension-bold.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the import paths for ExtensionOptions, BoldOptions, and TiptapBold. # Test: Check if the files exist. Expect: Files should exist. fd 'types.ts' --exec echo "Found: {}" fd 'extension-bold' --exec echo "Found: {}"Length of output: 1194
Script:
#!/bin/bash # Description: Verify the existence and correct paths of `ExtensionOptions`, `BoldOptions`, and `TiptapBold`. # Search for the definition or export of `ExtensionOptions` rg 'ExtensionOptions' -A 5 # Search for the definition or export of `BoldOptions` rg 'BoldOptions' -A 5 # Search for the definition or export of `TiptapBold` rg 'TiptapBold' -A 5Length of output: 23450
packages/tiny-tiptap/src/extension/code/index.ts (3)
5-10: LGTM! Ensure correct extension options.The extension correctly extends
TiptapCodewith additional options. Ensure that the parent options are correctly inherited and merged.
13-13: LGTM! Export statement.The export statement is correct and ensures the customized code extension is available for use.
1-3: Ensure correct import paths.Verify that the import paths for
ExtensionOptions,CodeOptions, andTiptapCodeare correct and accessible within the project.Verification successful
Import paths are correct.
The import paths for
ExtensionOptions,CodeOptions, andTiptapCodehave been verified and are correctly defined within the project.
ExtensionOptionsis located inpackages/tiny-tiptap/types/index.ts.CodeOptionsis correctly imported from@tiptap/extension-code.TiptapCodeis correctly imported from@tiptap/extension-code.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the import paths for ExtensionOptions, CodeOptions, and TiptapCode. # Test: Check if the files exist. Expect: Files should exist. fd 'types.ts' --exec echo "Found: {}" fd 'extension-code' --exec echo "Found: {}"Length of output: 1194
Script:
#!/bin/bash # Description: Verify the definitions or exports of ExtensionOptions, CodeOptions, and TiptapCode. # Search for the definition or export of ExtensionOptions ast-grep --lang typescript --pattern 'type ExtensionOptions $_' # Search for the definition or export of CodeOptions ast-grep --lang typescript --pattern 'type CodeOptions $_' # Search for the definition or export of TiptapCode ast-grep --lang typescript --pattern 'const TiptapCode = $_' || ast-grep --lang typescript --pattern 'export default $_'Length of output: 879
Script:
#!/bin/bash # Description: Verify the definitions or exports of ExtensionOptions, CodeOptions, and TiptapCode. # Search for the definition or export of ExtensionOptions rg 'type ExtensionOptions' -A 3 # Search for the definition or export of CodeOptions rg 'type CodeOptions' -A 3 # Search for the definition or export of TiptapCode rg 'TiptapCode' -A 3Length of output: 1206
Script:
#!/bin/bash # Description: Verify the definitions or exports of ExtensionOptions and CodeOptions. # Search for the definition or export of ExtensionOptions rg 'ExtensionOptions' -A 3 # Search for the definition or export of CodeOptions rg 'CodeOptions' -A 3Length of output: 17939
packages/tiny-tiptap/src/extension/link/index.ts (3)
1-3: Imports look good.The import statements are correct and necessary for the functionality of the file.
5-11: Class extension looks good.The
TiptapLinkextension is correctly extended, and the options are inherited from the parent class.
13-13: Export statement looks good.The export statement is correct and necessary for the functionality of the file.
packages/tiny-tiptap/src/extension/italic/index.ts (3)
1-3: Imports look good.The import statements are correct and necessary for the functionality of the file.
5-11: Class extension looks good.The
TiptapItalicextension is correctly extended, and the options are inherited from the parent class.
13-13: Export statement looks good.The export statement is correct and necessary for the functionality of the file.
packages/tiny-tiptap/src/extension/strike/index.ts (3)
1-3: Imports look good.The import statements are correct and necessary for the functionality of the file.
5-11: Class extension looks good.The
TiptapStrikeextension is correctly extended, and the options are inherited from the parent class.
13-13: Export statement looks good.The export statement is correct and necessary for the functionality of the file.
packages/tiny-tiptap/src/extension/history/index.ts (2)
1-4: Imports look good.The import statements correctly bring in the necessary types and the
TiptapHistoryextension.
13-13: Export statement looks good.The export statement correctly exports the
Historyextension as the default export.packages/tiny-tiptap/src/extension/underline/index.ts (2)
1-4: Imports look good.The import statements correctly bring in the necessary types and the
TiptapUnderlineextension.
13-13: Export statement looks good.The export statement correctly exports the
Underlineextension as the default export.packages/tiny-tiptap/src/extension/text-align/index.ts (2)
1-4: Imports look good.The import statements correctly bring in the necessary types and the
TiptapTextAlignextension.
13-13: Export statement looks good.The export statement correctly exports the
TextAlignextension as the default export.packages/tiny-tiptap/src/extension/placeholder/index.ts (3)
1-3: Imports look good.The imports are correctly typed and necessary for extending the placeholder functionality.
13-13: LGTM!The export statement is correct.
5-11: Ensure the parent options are correctly merged.The
addOptionsmethod merges the parent options with the new options. Verify that the parent options are correctly handled and no unintended side effects occur.Verification successful
The parent options are correctly merged.
The
addOptionsmethod consistently uses the spread operator to merge the parent options, ensuring they are correctly handled.
packages/tiny-tiptap/src/extension/placeholder/index.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correct handling of parent options in the addOptions method. # Test: Search for the addOptions method usage. Expect: Correct merging of parent options. rg --type typescript -A 5 $'addOptions'Length of output: 73
Script:
#!/bin/bash # Description: Verify the correct handling of parent options in the addOptions method. # Test: Search for the addOptions method usage in TypeScript files. Expect: Correct merging of parent options. rg 'addOptions' --glob '*.ts' -A 5Length of output: 9356
packages/tiny-tiptap/src/extension/subscript/index.ts (3)
1-3: Imports look good.The imports are correctly typed and necessary for extending the subscript functionality.
13-13: LGTM!The export statement is correct.
5-11: Ensure the parent options are correctly merged.The
addOptionsmethod merges the parent options with the new options. Verify that the parent options are correctly handled and no unintended side effects occur.packages/tiny-tiptap/src/extension/supscript/index.ts (3)
1-3: Imports look good.The imports are correctly typed and necessary for extending the superscript functionality.
13-13: LGTM!The export statement is correct.
5-11: Ensure the parent options are correctly merged.The
addOptionsmethod merges the parent options with the new options. Verify that the parent options are correctly handled and no unintended side effects occur.Verification successful
Ensure the parent options are correctly merged.
The
addOptionsmethod inpackages/tiny-tiptap/src/extension/supscript/index.tscorrectly merges the parent options using the spread operator (...this.parent?.()). This pattern is consistent across various extensions, indicating a standard approach to merging options.
packages/tiny-tiptap/src/extension/supscript/index.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the correct handling of parent options in the addOptions method. # Test: Search for the addOptions method usage. Expect: Correct merging of parent options. rg --type typescript -A 5 $'addOptions'Length of output: 73
Script:
#!/bin/bash # Description: Verify the correct handling of parent options in the addOptions method. # Test: Search for the addOptions method usage. Expect: Correct merging of parent options. rg -A 5 'addOptions'Length of output: 9342
packages/tiny-tiptap/src/extension/code-block/lowlight.ts (1)
12-12: LGTM!The code correctly exports the
lowlightinstance.packages/tiny-tiptap/src/extension/color/index.ts (2)
6-15: LGTM!The code correctly extends
TiptapColorwith additional options and extensions.
17-17: LGTM!The code correctly exports the extended
Colorextension.packages/tiny-tiptap/src/extension/highlight/index.ts (3)
5-20: LGTM!The code correctly extends
TiptapHighlightwith additional attributes.
21-30: LGTM!The code correctly extends
TiptapHighlightwith additional commands.
34-34: LGTM!The code correctly exports the extended
Highlightextension.packages/tiny-tiptap/src/extension/blockquote/index.ts (3)
1-5: LGTM! Imports are necessary and correctly used.The imports are well-structured and necessary for the functionality of the Blockquote extension.
7-26: LGTM! Blockquote extension is correctly implemented.The Blockquote extension correctly extends
TiptapBlockquoteand adds necessary options for slash menus.
28-28: LGTM! Export statement is correctly used.The Blockquote extension is correctly exported as the default export.
packages/tiny-tiptap/src/extension/code-block/index.ts (3)
1-5: LGTM! Imports are necessary and correctly used.The imports are well-structured and necessary for the functionality of the CodeBlock extension.
7-26: LGTM! CodeBlock extension is correctly implemented.The CodeBlock extension correctly extends
TiptapCodeBlockand adds necessary options for slash menus.
28-28: LGTM! Export statement is correctly used.The CodeBlock extension is correctly exported as the default export.
packages/tiny-tiptap/src/extension/task-list/index.ts (3)
1-6: LGTM! Imports are necessary and correctly used.The imports are well-structured and necessary for the functionality of the TaskList extension.
8-30: LGTM! TaskList extension is correctly implemented.The TaskList extension correctly extends
TiptapTaskListand adds necessary options for slash menus and extensions.
32-32: LGTM! Export statement is correctly used.The TaskList extension is correctly exported as the default export.
packages/tiny-tiptap/src/extension/bullet-list/index.ts (3)
1-6: LGTM!The import statements are correct and necessary for the functionality of the BulletList extension.
8-29: Well-implemented BulletList extension.The implementation correctly extends
TiptapBulletListand adds necessary options and extensions. ThegetSlashMenusmethod provides a custom menu for the BulletList extension.
32-32: LGTM!The export statement is correct and necessary for using the BulletList extension in other parts of the application.
packages/tiny-tiptap/src/extension/ordered-list/index.ts (3)
1-6: LGTM!The import statements are correct and necessary for the functionality of the OrderedList extension.
8-30: Well-implemented OrderedList extension.The implementation correctly extends
TiptapOrderedListand adds necessary options and extensions. ThegetSlashMenusmethod provides a custom menu for the OrderedList extension.
32-32: LGTM!The export statement is correct and necessary for using the OrderedList extension in other parts of the application.
packages/tiny-tiptap/types/index.ts (2)
1-2: LGTM!The import statements are correct and necessary for the functionality of the types file.
4-40: Well-defined type interfaces.The type definitions are correct and necessary for the functionality of the rich text editor. They provide a clear structure for menu items and extension options.
packages/tiny-tiptap/src/extension/table/index.ts (3)
1-8: LGTM!The import statements are correct and necessary for the functionality of the table extension.
10-32: LGTM!The
Tableextension is correctly defined and includes necessary extensions and options for table functionality.
34-34: LGTM!The export statement is correct and necessary for the functionality of the table extension.
packages/tiny-tiptap/README.md (4)
1-7: LGTM!The introduction and import instructions are clear and correct.
9-13: LGTM!The instance initialization instructions are clear and correct.
15-25: LGTM!The parameter configuration instructions are clear and correct.
37-59: LGTM!The usage example is clear and correct.
packages/tiny-tiptap/src/extension/image/index.ts (2)
1-4: LGTM!The import statements are correct and necessary for the functionality of the image extension.
6-61: LGTM!The
Imageextension is correctly defined and includes necessary attributes and rendering logic for image functionality.packages/tiny-tiptap/src/extension/index.ts (2)
1-25: Imports look good!The import statements are correctly importing various extensions for the rich text editor.
27-60: Ensure placeholder text is localized.The placeholder text in the
ExtensionPlaceholderconfiguration is in Chinese. Ensure that this text is localized if the application supports multiple languages.packages/tiny-tiptap/package.json (3)
2-8: Metadata looks good!The metadata section is correctly defined.
9-47: Dependencies look good!The dependencies are correctly defined with appropriate versions.
49-51: Scripts look good!The build scripts are correctly defined.
packages/tiny-tiptap/src/extension/paragraph/index.ts (3)
1-6: Imports look good!The import statements are correctly importing necessary types and utilities.
8-11: Type definition looks good!The custom options for the paragraph extension are correctly defined.
13-66: Ensure localization for slash menu titles and keywords.The titles and keywords in the
getSlashMenusfunction are in Chinese. Ensure that these are localized if the application supports multiple languages.packages/tiny-tiptap/src/TiptapEditor.ts (6)
39-41: LGTM!The
createEditormethod is straightforward and correctly implemented.
43-45: LGTM!The
getContentmethod is straightforward and correctly implemented.
47-49: LGTM!The
setContentmethod is straightforward and correctly implemented.
51-53: LGTM!The
destroymethod is straightforward and correctly implemented.
76-81: LGTM!The
initMenuViewsmethod is correctly implemented.
83-92: LGTM!The
initOtherOptionsmethod is correctly implemented.packages/tiny-tiptap/src/extension/heading/index.ts (3)
1-12: LGTM!The import statements are correctly implemented and necessary for the functionality.
14-77: LGTM!The Heading extension implementation is correctly done, providing necessary options and commands for each heading level.
80-80: LGTM!The export statement is correctly implemented.
packages/tiny-tiptap/src/components/slash/index.ts (3)
1-5: LGTM!The import statements are correctly implemented and necessary for the functionality.
82-95: LGTM! But address the spread syntax issue.The
getSlashMenuItemsFromExtensionsfunction is correctly implemented, but it is affected by the issue with the spread syntax in the reduce method.Tools
Biome
[error] 92-92: Avoid the use of spread (
...) syntax on accumulators.Spread syntax should be avoided on accumulators (like those in
.reduce) because it causes a time complexity ofO(n^2).
Consider methods such as .splice or .push instead.(lint/performance/noAccumulatingSpread)
80-80: LGTM!The export statement is correctly implemented.
| constructor(editorClass, options = {}, viewOptions, otherOptions) { | ||
| this.extensions = extensions | ||
| const { viewMap, menuMap } = viewOptions | ||
|
|
||
| this.initExtensionViews(viewMap) | ||
|
|
||
| this.initMenuViews(menuMap) | ||
|
|
||
| this.initOtherOptions(otherOptions) | ||
|
|
||
| // TODO 合并用户传入的 options | ||
| this.options = { | ||
| ...options, | ||
| ...{ | ||
| extensions: this.extensions | ||
| } | ||
| } | ||
|
|
||
| this.editor = this.createEditor(editorClass, this.options) |
There was a problem hiding this comment.
Reminder: Merge user options.
The TODO comment indicates that user options need to be merged with default options.
Do you want me to generate the code to merge user options or open a GitHub issue to track this task?
| export const generateSlashMenuExtension = (Renderer, view) => { | ||
| return Extension.create({ | ||
| name: 'slashMenu', | ||
|
|
||
| addProseMirrorPlugins() { | ||
| const slashMenuItems = getSlashMenuItemsFromExtensions(this.editor) | ||
|
|
||
| return [ | ||
| Suggestion({ | ||
| editor: this.editor, | ||
| char: '/', | ||
| command: ({ editor, range, props }: { editor: Editor; range: Range; props: SlashMenuItem }) => { | ||
| props.command({ editor, range }) | ||
| }, | ||
| items: ({ query }: { query: string }) => { | ||
| return slashMenuItems.filter((item) => | ||
| [...item.keywords, item.title].some((keyword) => keyword.includes(query.toLocaleLowerCase())) | ||
| ) | ||
| }, | ||
| render: () => { | ||
| let popup: Instance[] | ||
| let viewComponent | ||
|
|
||
| return { | ||
| onStart: (props: Record<string, any>) => { | ||
| viewComponent = new Renderer(view, { | ||
| props, | ||
| editor: props.editor | ||
| }) | ||
|
|
||
| if (!props.clientRect) return | ||
|
|
||
| popup = tippy('body', { | ||
| getReferenceClientRect: props.clientRect, | ||
| appendTo: () => document.body, | ||
| content: viewComponent.element, | ||
| showOnCreate: true, | ||
| interactive: true, | ||
| trigger: 'manual', | ||
| placement: 'bottom-start' | ||
| }) | ||
| }, | ||
|
|
||
| onUpdate: (props: Record<string, any>) => { | ||
| viewComponent.updateProps(props) | ||
|
|
||
| if (!props.clientRect) return | ||
|
|
||
| popup[0].setProps({ | ||
| getReferenceClientRect: props.clientRect | ||
| }) | ||
| }, | ||
|
|
||
| onKeyDown: (props: Record<string, any>) => { | ||
| if (props.event.key === 'Escape') { | ||
| popup[0].hide() | ||
|
|
||
| return true | ||
| } | ||
|
|
||
| return viewComponent.ref?.onKeyDown(props) | ||
| }, | ||
|
|
||
| onExit() { | ||
| popup[0].destroy() | ||
| viewComponent.destroy() | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| ] | ||
| } | ||
| }) |
There was a problem hiding this comment.
Avoid using spread syntax on accumulators.
The use of spread syntax in the reduce method should be avoided as it causes a time complexity of O(n^2). Consider using methods such as .push instead.
- .reduce((prev: SlashMenuItem[], curr: AnyExtension) => {
- const { getSlashMenus } = curr.options
-
- if (!getSlashMenus) return prev
-
- const menus = getSlashMenus()
-
- return [...prev, ...menus]
- }, [])
+ .reduce((prev: SlashMenuItem[], curr: AnyExtension) => {
+ const { getSlashMenus } = curr.options
+
+ if (!getSlashMenus) return prev
+
+ const menus = getSlashMenus()
+
+ prev.push(...menus)
+ return prev
+ }, [])Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const generateSlashMenuExtension = (Renderer, view) => { | |
| return Extension.create({ | |
| name: 'slashMenu', | |
| addProseMirrorPlugins() { | |
| const slashMenuItems = getSlashMenuItemsFromExtensions(this.editor) | |
| return [ | |
| Suggestion({ | |
| editor: this.editor, | |
| char: '/', | |
| command: ({ editor, range, props }: { editor: Editor; range: Range; props: SlashMenuItem }) => { | |
| props.command({ editor, range }) | |
| }, | |
| items: ({ query }: { query: string }) => { | |
| return slashMenuItems.filter((item) => | |
| [...item.keywords, item.title].some((keyword) => keyword.includes(query.toLocaleLowerCase())) | |
| ) | |
| }, | |
| render: () => { | |
| let popup: Instance[] | |
| let viewComponent | |
| return { | |
| onStart: (props: Record<string, any>) => { | |
| viewComponent = new Renderer(view, { | |
| props, | |
| editor: props.editor | |
| }) | |
| if (!props.clientRect) return | |
| popup = tippy('body', { | |
| getReferenceClientRect: props.clientRect, | |
| appendTo: () => document.body, | |
| content: viewComponent.element, | |
| showOnCreate: true, | |
| interactive: true, | |
| trigger: 'manual', | |
| placement: 'bottom-start' | |
| }) | |
| }, | |
| onUpdate: (props: Record<string, any>) => { | |
| viewComponent.updateProps(props) | |
| if (!props.clientRect) return | |
| popup[0].setProps({ | |
| getReferenceClientRect: props.clientRect | |
| }) | |
| }, | |
| onKeyDown: (props: Record<string, any>) => { | |
| if (props.event.key === 'Escape') { | |
| popup[0].hide() | |
| return true | |
| } | |
| return viewComponent.ref?.onKeyDown(props) | |
| }, | |
| onExit() { | |
| popup[0].destroy() | |
| viewComponent.destroy() | |
| } | |
| } | |
| } | |
| }) | |
| ] | |
| } | |
| }) | |
| export const generateSlashMenuExtension = (Renderer, view) => { | |
| return Extension.create({ | |
| name: 'slashMenu', | |
| addProseMirrorPlugins() { | |
| const slashMenuItems = getSlashMenuItemsFromExtensions(this.editor) | |
| return [ | |
| Suggestion({ | |
| editor: this.editor, | |
| char: '/', | |
| command: ({ editor, range, props }: { editor: Editor; range: Range; props: SlashMenuItem }) => { | |
| props.command({ editor, range }) | |
| }, | |
| items: ({ query }: { query: string }) => { | |
| return slashMenuItems.filter((item) => | |
| [...item.keywords, item.title].some((keyword) => keyword.includes(query.toLocaleLowerCase())) | |
| ) | |
| }, | |
| render: () => { | |
| let popup: Instance[] | |
| let viewComponent | |
| return { | |
| onStart: (props: Record<string, any>) => { | |
| viewComponent = new Renderer(view, { | |
| props, | |
| editor: props.editor | |
| }) | |
| if (!props.clientRect) return | |
| popup = tippy('body', { | |
| getReferenceClientRect: props.clientRect, | |
| appendTo: () => document.body, | |
| content: viewComponent.element, | |
| showOnCreate: true, | |
| interactive: true, | |
| trigger: 'manual', | |
| placement: 'bottom-start' | |
| }) | |
| }, | |
| onUpdate: (props: Record<string, any>) => { | |
| viewComponent.updateProps(props) | |
| if (!props.clientRect) return | |
| popup[0].setProps({ | |
| getReferenceClientRect: props.clientRect | |
| }) | |
| }, | |
| onKeyDown: (props: Record<string, any>) => { | |
| if (props.event.key === 'Escape') { | |
| popup[0].hide() | |
| return true | |
| } | |
| return viewComponent.ref?.onKeyDown(props) | |
| }, | |
| onExit() { | |
| popup[0].destroy() | |
| viewComponent.destroy() | |
| } | |
| } | |
| } | |
| }) | |
| ] | |
| } | |
| }) | |
| } |
zzzp9527
changed the base branch from
dev
to
ospp-2024/003-rich-text-editor-enhancement
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: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
Bug Fixes
Documentation