[WEB-2494] feat: text color and highlight options for all editors#5653
[WEB-2494] feat: text color and highlight options for all editors#5653
Conversation
|
Warning Rate limit exceeded@aaryan610 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 30 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe changes in this pull request introduce enhancements to the Tiptap editor by adding new functionalities for text and background color manipulation, as well as highlighting features. Key updates include the addition of new components for color selection, modifications to command handling, and the integration of new extensions to support these features. The codebase has been organized to facilitate better command execution and state management, improving the overall structure and usability of the editor. Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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: 2
Outside diff range and nitpick comments (4)
packages/editor/src/core/extensions/slash-commands/command-menu.tsx (3)
7-10: Consider removing unused props.The
editorandrangeprops are not being used in the component. If they are not needed, consider removing them to simplify the component's interface.
23-29: TheuseCallbackhook is not necessary for theselectItemfunction.Since the
selectItemfunction is not being passed as a prop to a child component, theuseCallbackhook is not needed. Consider removing it to simplify the code.Apply this diff to remove the
useCallbackhook:- const selectItem = useCallback( - (sectionIndex: number, itemIndex: number) => { + const selectItem = (sectionIndex: number, itemIndex: number) => { const item = sections[sectionIndex].items[itemIndex]; if (item) command(item); - }, - [command, sections] - ); + };
72-77: Consider combining theuseEffecthooks.The
useEffecthook for initializing the selected index could be combined with the one for handling keyboard navigation to reduce the number ofuseEffectcalls.Apply this diff to combine the
useEffecthooks:useEffect(() => { + setSelectedIndex({ + section: 0, + item: 0, + }); + const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"]; const onKeyDown = (e: KeyboardEvent) => { // ... }; document.addEventListener("keydown", onKeyDown); return () => { document.removeEventListener("keydown", onKeyDown); }; }, [sections, selectedIndex, setSelectedIndex, selectItem]); - // initialize the select index to 0 by default - useEffect(() => { - setSelectedIndex({ - section: 0, - item: 0, - }); - }, [sections]);web/core/components/pages/editor/header/color-dropdown.tsx (1)
1-127: LGTM! TheColorDropdowncomponent is well-implemented.The component is well-structured, modular, and effectively uses the
Popovercomponent to create a dropdown menu for color selection. The props provide a clear interface for color selection and active state management, and the dropdown button displays the selected colors visually, enhancing the user experience. Memoization is used appropriately to optimize performance.Suggestions for further improvement:
- Consider extracting the color section rendering logic into separate components for better readability and maintainability.
- Add prop types or TypeScript types for the
Propsinterface to improve type safety.- Consider adding accessibility attributes (e.g.,
aria-label) to the buttons for better accessibility.Overall, great work on implementing this component!
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
Files selected for processing (32)
- packages/editor/package.json (1 hunks)
- packages/editor/src/ce/extensions/document-extensions.tsx (2 hunks)
- packages/editor/src/core/components/editors/rich-text/editor.tsx (1 hunks)
- packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx (1 hunks)
- packages/editor/src/core/components/menus/bubble-menu/index.ts (1 hunks)
- packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx (3 hunks)
- packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx (4 hunks)
- packages/editor/src/core/components/menus/bubble-menu/root.tsx (4 hunks)
- packages/editor/src/core/components/menus/menu-items.ts (4 hunks)
- packages/editor/src/core/constants/common.ts (1 hunks)
- packages/editor/src/core/extensions/core-without-props.ts (2 hunks)
- packages/editor/src/core/extensions/extensions.tsx (2 hunks)
- packages/editor/src/core/extensions/index.ts (1 hunks)
- packages/editor/src/core/extensions/read-only-extensions.tsx (2 hunks)
- packages/editor/src/core/extensions/slash-commands.tsx (0 hunks)
- packages/editor/src/core/extensions/slash-commands/command-items-list.tsx (1 hunks)
- packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx (1 hunks)
- packages/editor/src/core/extensions/slash-commands/command-menu.tsx (1 hunks)
- packages/editor/src/core/extensions/slash-commands/index.ts (1 hunks)
- packages/editor/src/core/extensions/slash-commands/root.tsx (1 hunks)
- packages/editor/src/core/helpers/editor-commands.ts (1 hunks)
- packages/editor/src/core/hooks/use-editor.ts (2 hunks)
- packages/editor/src/core/types/editor.ts (2 hunks)
- packages/editor/src/core/types/slash-commands-suggestion.ts (2 hunks)
- packages/editor/src/index.ts (1 hunks)
- space/core/components/editor/lite-text-editor.tsx (2 hunks)
- space/core/components/editor/toolbar.tsx (2 hunks)
- web/core/components/editor/lite-text-editor/lite-text-editor.tsx (2 hunks)
- web/core/components/editor/lite-text-editor/toolbar.tsx (2 hunks)
- web/core/components/pages/editor/header/color-dropdown.tsx (1 hunks)
- web/core/components/pages/editor/header/index.ts (1 hunks)
- web/core/components/pages/editor/header/toolbar.tsx (7 hunks)
Files not reviewed due to no reviewable changes (1)
- packages/editor/src/core/extensions/slash-commands.tsx
Files skipped from review due to trivial changes (1)
- packages/editor/src/core/extensions/slash-commands/index.ts
Additional context used
Biome
packages/editor/src/core/extensions/slash-commands/root.tsx
[error] 84-87: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (82)
packages/editor/src/core/components/menus/bubble-menu/index.ts (1)
1-1: LGTM!The new export statement enhances the module's interface by making the functionalities defined in
color-selectoravailable for import in other parts of the application. This change expands the capabilities of the bubble menu component by integrating color selection features, which may improve user interaction and functionality within the editor.web/core/components/pages/editor/header/index.ts (1)
1-1: LGTM!The addition of the export statement for the
color-dropdownmodule is consistent with the existing export statements in the file. This change enhances the module's interface by providing access to the color dropdown functionality, which can be utilized by other components or modules that import from this index file.packages/editor/src/ce/extensions/document-extensions.tsx (2)
3-3: LGTM!The import name change from
SlashCommandtoSlashCommandsaligns with the PR objective of enhancing the slash commands' functionality to render sections instead of just individual items.
17-17: LGTM!The usage of the imported extension has been updated to match the new import name
SlashCommands, which is necessary for the code to compile and function correctly. This change is consistent with the import name change and aligns with the PR objective of enhancing the slash commands' functionality.packages/editor/src/core/extensions/index.ts (1)
9-9: LGTM!The reorganization of the export order is a minor change that does not affect the functionality. Moving the
slash-commandsexport to the beginning might improve its accessibility or clarity.packages/editor/src/core/types/slash-commands-suggestion.ts (5)
24-26: LGTM!The addition of
"text-color"and"background-color"toTEditorCommandsaligns with the PR objectives of adding text color and highlight options to the editor.
28-29: LGTM!The introduction of
TColorEditorCommandsandTNonColorEditorCommandstypes categorizes the commands into color-related and non-color-related commands, which could facilitate better handling of commands based on their functionality.
37-38: LGTM!The renaming of
keytocommandKeymay improve clarity regarding the purpose of the key, and the addition of a newkeyproperty of typestringcould be used for a different purpose, such as a unique identifier for the command item.
42-42: LGTM!The explicit typing of
iconasReact.ReactNodeimproves type safety and clarity.
43-43: LGTM!The addition of
iconContainerStyleallows for more flexible styling of the command icons, and the use ofCSSPropertiestype ensures that only valid CSS properties can be passed.packages/editor/src/index.ts (1)
21-22: LGTM!The export statement re-exports all constants from the
@/constants/commonmodule, making them available for import in other parts of the application. This change aligns with the PR objective of centralizing commonly used values, improving maintainability and consistency across the codebase.packages/editor/src/core/constants/common.ts (1)
1-51: LGTM!The
COLORS_LISTconstant is well-structured and provides a good range of color configurations. The use of hexadecimal color codes forbackgroundColorandtextColoris appropriate, and thelabelproperty accurately describes each color.Exporting this constant will promote consistency in color theming across the application and make it easy to access and apply these color configurations as needed.
The structure also allows for easy extension if more color configurations need to be added in the future.
packages/editor/src/core/components/editors/rich-text/editor.tsx (2)
14-14: LGTM!The change in the
getExtensionsfunction to useSlashCommands()is consistent with the updated import statement and aligns with the PR objective.
6-6: Verify if this is an intentional breaking change.The change from
SlashCommandtoSlashCommandsaligns with the PR objective of modifying slash commands to render sections. However, this change likely introduces a breaking change in the API.Please verify if this is an intentional breaking change and ensure it's properly documented and communicated to the users of this API.
To verify the usage of
SlashCommands, run:Verification successful
Change from
SlashCommandtoSlashCommandsappears consistent and non-breaking.After analyzing the codebase, the change from
SlashCommandtoSlashCommandsis implemented consistently across multiple files. TheSlashCommandsfunction maintains backwards compatibility by accepting optional parameters, suggesting this is not a breaking change in terms of its API.However, to ensure clarity for users of this API:
- Update the documentation to reflect the new functionality of rendering sections instead of individual items.
- Consider adding a comment in the
SlashCommandsfunction to explain the purpose of theadditionalOptionsparameter and how it relates to the new sectioned structure.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all usages of `SlashCommands` are updated and follow the new API. # Test: Search for the usage of `SlashCommands`. Expect: Only occurrences following the new API. rg --type typescript -A 5 $'SlashCommands'Length of output: 76
Script:
#!/bin/bash # Description: Find TypeScript files and search for "SlashCommands" usage # Find TypeScript files and search for "SlashCommands" with context fd -e ts -e tsx | xargs rg -A 5 -B 2 'SlashCommands'Length of output: 6123
packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx (5)
1-13: LGTM!The imports and types are properly used and there are no apparent issues.
15-16: LGTM!The component declaration and props destructuring follow the best practices and there are no apparent issues.
18-30: LGTM!The button and its props are properly used and there are no apparent issues. The dynamic
idprop is a good practice for accessibility and testing purposes. The conditionalclassNameprop is a good practice for styling the button based on its state. The event handlers are properly passed and there are no apparent issues.
31-33: LGTM!The icon span and its props are properly used and there are no apparent issues. The
classNameprop is a good practice for setting the size and layout of the icon. Thestyleprop is a good practice for allowing customization of the icon container style. Theitem.iconprop is properly rendered and there are no apparent issues.
34-34: LGTM!The title paragraph and its props are properly used and there are no apparent issues. The
classNameprop is a good practice for setting the layout and truncation behavior of the title. Theitem.titleprop is properly rendered and there are no apparent issues.space/core/components/editor/lite-text-editor.tsx (2)
3-3: LGTM!The import of the new type
TNonColorEditorCommandsfrom the@plane/editormodule looks good. It does not introduce any issues or side effects.
59-61: LGTM!The update to the
executeMenuItemCommandmethod call, wrapping thekeyparameter in an object and explicitly casting it to theTNonColorEditorCommandstype, looks good. This change enhances type safety and robustness of the command execution logic without introducing any issues or side effects.packages/editor/package.json (3)
44-44: LGTM!The addition of the
@tiptap/extension-colordependency with version^2.7.1aligns with the PR objective of introducing text color options to the editor. The version constraint is appropriate for allowing minor and patch updates while keeping the major version fixed.
45-45: LGTM!The addition of the
@tiptap/extension-highlightdependency with version^2.7.1aligns with the PR objective of introducing text highlight options to the editor. The version constraint is appropriate for allowing minor and patch updates while keeping the major version fixed.
52-52: Verify the changes introduced by the version update.The version of
@tiptap/extension-text-stylehas been updated from^2.1.13to^2.7.1. This update might introduce new features, improvements, or bug fixes related to text styling.Please ensure that the changes introduced by the new version are thoroughly tested and do not break any existing functionality or cause compatibility issues. Review the changelog or release notes of the package to understand the scope of the changes.
packages/editor/src/core/extensions/core-without-props.ts (2)
1-1: LGTM!The
Colorextension is imported correctly.
88-91: LGTM!The
ColorandHighlightextensions are added to theCoreEditorExtensionsWithoutPropsarray correctly. TheHighlightextension is configured withmulticolor: true, which will allow users to apply multiple colors for highlighting.These additions will enhance the text editing capabilities of the editor and improve the user experience.
packages/editor/src/core/extensions/read-only-extensions.tsx (2)
2-3: LGTM!The
ColorandHighlightextensions are correctly imported from the Tiptap library to enhance the text editing capabilities of the read-only editor.
113-116: Excellent additions to enhance the text editing capabilities!The
ColorandHighlightextensions are correctly added to theCoreReadOnlyEditorExtensionsarray, which will enable color formatting and text highlighting in the read-only editor. Themulticolor: trueconfiguration for theHighlightextension provides flexibility in using multiple colors for highlighting.These additions align perfectly with the PR objectives of introducing new features to the text editing capabilities, enhancing the user experience and visual presentation of content within the read-only editor.
packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx (5)
18-18: LGTM!The import statement has been updated to import
EditorMenuIteminstead ofBubbleMenuItem, indicating a potential reorganization or enhancement of the menu item structure.
29-30: LGTM!Destructuring props from a single
propsobject simplifies the function signature and makes the code more readable.
Line range hint
32-44: LGTM!The type of items used within the bubble menu has changed from
BubbleMenuItemtoEditorMenuItem, indicating a potential reorganization or enhancement of the menu item structure.
47-49: Verify the change in theisActivemethod's argument.The logic for determining the active item has been modified to include an empty string as an argument in the
isActivemethod. It's unclear how this change affects the behavior of theisActivemethod.Please ensure that the empty string argument is the intended behavior and does not introduce any unintended side effects.
59-62: LGTM!The button's class names have been updated for improved styling, and the
ChevronDownicon's class has been adjusted, likely for better alignment, sizing, or visual presentation.packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx (5)
3-3: LGTM!The import statement for the
Linkicon fromlucide-reactlibrary is valid and follows the correct syntax.
14-15: LGTM!The component definition and prop destructuring follow the correct syntax and best practices. Using a single
propsobject improves readability.
33-41: LGTM!The button's structure and styling follow the correct syntax and best practices. The conditional class names and color changes enhance the user interface and improve the user experience by providing visual feedback based on the state.
48-49: LGTM!Changing the button's text to "Link" improves clarity and readability. Adding the
Linkicon enhances the visual representation of the button's purpose. The icon is properly styled using the appropriate classes.
1-2: LGTM!The remaining code segments maintain the component's functionality while improving code clarity. There are no apparent issues or concerns with these segments.
Also applies to: 4-13, 16-32, 42-47, 50-100
web/core/components/editor/lite-text-editor/lite-text-editor.tsx (1)
90-92: LGTM!The change improves type safety by ensuring that the command being executed conforms to the expected command types defined by
TNonColorEditorCommands. This is a good practice to catch potential type-related issues at compile time.packages/editor/src/core/extensions/slash-commands/root.tsx (4)
1-10: LGTM!The imports are correctly specified and relevant to the functionality of the slash command extension.
11-51: LGTM!The
Commandextension is correctly defined and configured with appropriate options for the slash command. Theallowfunction properly handles the conditions under which the command can be invoked, and theSuggestionplugin is correctly registered with the editor.
53-106: LGTM!The
renderItemsfunction correctly handles the lifecycle of the command menu, including rendering theSlashCommandsMenucomponent using theReactRendererclass from the Tiptap library and integrating with Tippy.js to manage the display of the command menu popup. The handling of keyboard events to allow users to navigate the command options and dismiss the menu with the Escape key is properly implemented.Tools
Biome
[error] 84-87: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
108-114: LGTM!The
SlashCommandsfunction correctly configures theCommandextension with thesuggestionoptions. The use of thegetSlashCommandFilteredSectionsfunction to set theitemsproperty is appropriate, as it allows for filtering the available slash command options based on theadditionalOptionsparameter. Setting therenderproperty to therenderItemsfunction ensures that the command menu is rendered using the appropriate React component and integrated with Tippy.js.packages/editor/src/core/types/editor.ts (4)
8-8: LGTM!The new type
TColorEditorCommandsis a relevant addition for supporting color-specific editor commands.
14-14: LGTM!The new type
TNonColorEditorCommandsis a good addition for distinguishing non-color editor commands from color-specific ones.
33-52: LGTM!The changes to the
executeMenuItemCommandmethod introduce a more structured approach to handling editor commands. The differentiation between non-color commands and color-specific commands, along with the additionalcolorproperty for color-specific commands, enhances the flexibility of the command execution mechanism and aligns with the PR objective of adding color options to the editor.
43-52: LGTM!The changes to the
isMenuItemActivemethod introduce a more structured approach to checking the state of editor commands. The differentiation between non-color commands and color-specific commands, along with the additionalcolorproperty for color-specific commands, enhances the flexibility of the command state checking mechanism and aligns with the PR objective of adding color options to the editor.space/core/components/editor/toolbar.tsx (2)
5-5: LGTM!The import statement change is consistent with the AI-generated summary and enables the component to handle a broader range of editor commands.
37-39: LGTM!The code change is consistent with the AI-generated summary and improves type safety and clarity by explicitly casting the key to
TNonColorEditorCommandswhen checking the active state of menu items.packages/editor/src/core/extensions/extensions.tsx (3)
2-2: LGTM!The
Colorextension is correctly imported from the@tiptap/extension-colorpackage. This import is necessary to enable color customization features in the editor.
3-3: LGTM!The
Highlightextension is correctly imported from the@tiptap/extension-highlightpackage. This import is necessary to enable text highlighting features in the editor.
171-174: LGTM!The
ColorandHighlightextensions are correctly added to theCoreEditorExtensionsarray. TheHighlightextension is configured withmulticolor: true, which will enable multicolor highlighting features in the editor. These additions are consistent with the information provided in the PR summary and will enhance the text editing capabilities of the editor.web/core/components/pages/editor/header/toolbar.tsx (8)
6-6: LGTM!The import change from
TEditorCommandstoTNonColorEditorCommandsaligns with the refactoring effort to separate color-related functionality.
9-10: LGTM!The import of the
ColorDropdowncomponent indicates the introduction of color selection capabilities to the toolbar.
23-23: LGTM!The modification of the
executeCommandproperty type to useEditorRefApi["executeMenuItemCommand"]aligns with the refactoring effort to use the new command structure.
41-45: LGTM!The modification of the
onClickhandler to wrap the command key in an object aligns with the new command structure and ensures type safety by usingitemKey: item.key as TNonColorEditorCommands.
73-75: LGTM!The update to the active state logic in the
updateActiveStatesfunction aligns with the new command structure and ensures type safety by usingitemKey: item.key as TNonColorEditorCommands.
86-90: LGTM!The update to the active typography logic in the
activeTypographyconstant aligns with the new command structure and ensures type safety by usingitemKey: item.key as TNonColorEditorCommands.
110-114: LGTM!The modification of the
onClickhandler for theCustomMenu.MenuItemto execute commands using the new command structure aligns with the refactoring effort and ensures type safety by usingitemKey: item.key as TNonColorEditorCommands.
124-137: LGTM!The introduction of the
ColorDropdowncomponent aligns with the goal of adding color selection capabilities to the toolbar. ThehandleColorSelectandisColorActiveprops of theColorDropdowncomponent utilize the new command structure correctly, including the color parameter.packages/editor/src/core/extensions/slash-commands/command-menu.tsx (1)
1-130: TheSlashCommandsMenucomponent is implemented correctly and provides a good user experience for navigating and selecting slash commands.The component correctly handles the following aspects:
- Grouping command items by sections and rendering them with appropriate styling.
- Handling keyboard navigation using arrow keys and wrapping around at the beginning and end of the list.
- Scrolling the selected item into view using the
useLayoutEffecthook.- Handling the case when there are no available commands by returning null.
packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx (1)
1-118: Excellent work on theBubbleMenuColorSelectorcomponent!The component is well-structured, modular, and provides a user-friendly interface for selecting text and background colors within the text editor. Here are some key strengths:
- Effective utilization of the Tiptap editor's API to determine active colors and apply color changes.
- Consistent use of a predefined color list (
COLORS_LIST) ensures a cohesive visual design.- Intuitive and interactive UI with clear labels and icons for each action.
- Proper typing with TypeScript enhances code quality and maintainability.
- Styling with utility classes promotes consistency and reusability.
- Responsive and smooth user experience.
The component successfully introduces a valuable feature that enhances the text editing capabilities of the application while maintaining a high standard of code quality and user experience.
packages/editor/src/core/components/menus/bubble-menu/root.tsx (6)
6-6: LGTM!The import statement for the
BubbleMenuColorSelectorcomponent is syntactically correct.
10-10: LGTM!The renaming of the
BubbleMenuIteminterface toEditorMenuItemis consistent and should not affect the functionality.
23-27: LGTM!The new state variables for controlling the visibility of selectors are clearly named and initialized appropriately.
29-31: LGTM!The conditional population of the
itemsarray based on the editor's active state ensures that the appropriate menu items are displayed in the bubble menu.
56-56: LGTM!Updating the
onHiddencallback to setisColorSelectorOpentofalseis consistent with the existing logic and ensures the color selector is closed when the bubble menu is hidden.
Line range hint
91-155: LGTM!The updates to the rendering logic of the
EditorBubbleMenucomponent improve the structure, conditionally render selectors based on the editor's active state, ensure only one selector is open at a time, and accurately determine the active state of menu item buttons. These changes enhance the user experience and maintain a clean and consistent rendering approach.web/core/components/editor/lite-text-editor/toolbar.tsx (1)
72-74: LGTM!The change in the method signature of
isMenuItemActiveenhances type safety by ensuring that theitem.keyis explicitly cast toTNonColorEditorCommands. This aligns with the updated type definitions imported from the@plane/editormodule and provides better type checking and clarity in the code.packages/editor/src/core/components/menus/menu-items.ts (6)
23-23: LGTM!The import statement for
Palettefrom "lucide-react" is correct and necessary for using the icon in the newly added menu items.
29-29: LGTM!The import statements for
toggleBackgroundColorandtoggleTextColorfrom "@/helpers/editor-commands" are correct and necessary for using these functions in the newly added menu items.Also applies to: 44-44
48-48: LGTM!The import statement for
TColorEditorCommandsandTNonColorEditorCommandsfrom "@/types" is correct and necessary for using these types in the modifiedEditorMenuItemtype.
50-63: LGTM!The changes to the
EditorMenuItemtype are correct and necessary to accommodate the new color-related menu items. The union type allows for a more flexible command structure, enabling commands to either require no color parameters or to accept a color argument for specific functionalities.
211-217: LGTM!The new menu items,
TextColorItemandBackgroundColorItem, are correctly implemented and provide the necessary functionality for selecting text and background colors. TheisActivemethods enhance user interaction by providing visual feedback on the active color settings, and thecommandmethods correctly invoke the respective toggle functions with the required arguments.Also applies to: 219-225
Line range hint
227-252: LGTM!The changes to the
getEditorMenuItemsfunction are correct and necessary to include the new color-related menu items in the editor's menu options. The addition of these items enriches the editor's capabilities, allowing users to easily change text and background colors, thus improving the overall user experience.packages/editor/src/core/helpers/editor-commands.ts (2)
160-168: LGTM!The
toggleTextColorfunction is well-structured and correctly handles the cases when a color and/or range is provided or not. It uses the editor's chain API to perform the operations, which is the recommended way.
170-197: LGTM!The
toggleBackgroundColorfunction is well-structured and correctly handles the cases when a color and/or range is provided or not. It uses the editor's chain API to perform the operations, which is the recommended way. It also uses thesetHighlightmethod to apply the background color, which is the correct way.packages/editor/src/core/hooks/use-editor.ts (3)
Line range hint
134-151: LGTM! The changes toexecuteMenuItemCommandimprove flexibility and functionality.The modifications to the
executeMenuItemCommandfunction signature and logic are well-implemented and provide the following benefits:
- The change from a single parameter to an object allows for more flexibility in passing additional properties to the function.
- The object destructuring ensures backward compatibility by extracting the
itemKeyproperty.- The additional logic for handling "text-color" and "background-color" item keys enables passing the
colorproperty directly to thecommandfunction, enhancing the command execution for specific menu items.These changes improve the overall functionality and extensibility of the
executeMenuItemCommandfunction.
153-165: LGTM! The changes toisMenuItemActiveimprove flexibility and functionality.The modifications to the
isMenuItemActivefunction signature and logic are well-implemented and provide the following benefits:
- The change from a single parameter to an object allows for more flexibility in passing additional properties to the function.
- The object destructuring ensures backward compatibility by extracting the
itemKeyproperty.- The additional logic for handling "text-color" and "background-color" item keys enables passing the
colorproperty directly to theisActivefunction, enhancing the active state checking for specific menu items.These changes improve the overall functionality and extensibility of the
isMenuItemActivefunction.
157-158: LGTM! ExtractinggetEditorMenuItemimproves code readability and reusability.The extraction of the
getEditorMenuItemfunction from theisMenuItemActivefunction is a good refactoring decision. It provides the following benefits:
- Improves code readability by encapsulating the logic for finding the editor menu item based on the
itemKey.- Promotes code modularity and reduces duplication by allowing the function to be reused in other parts of the code if needed.
This change enhances the overall code quality and maintainability.
packages/editor/src/core/extensions/slash-commands/command-items-list.tsx (2)
1-38: LGTM!The imports are well-organized and follow a consistent structure. The icons are imported from a reliable external library, while the constants, helpers, and types are imported from local files, promoting code reusability and maintainability.
40-44: LGTM!The exported type
TSlashCommandSectionprovides a clear and structured representation of a slash command section. The properties are well-defined, with a unique key for identification, an optional title for display purposes, and an array of command items to hold the actual commands.
packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
Outdated
Show resolved
Hide resolved
aaryan610
changed the title
aaryan610
changed the title
rahulramesha
left a comment
rahulramesha
left a comment
There was a problem hiding this comment.
@aaryan610 most code changes look fine, please resolve conflicts
| const parentNode = selection.$from.node(selection.$from.depth); | ||
| const blockType = parentNode.type.name; | ||
|
|
||
| if (blockType === "codeBlock") { |
There was a problem hiding this comment.
please consider using enums
|
Currently colors don't work inside Code blocks, until then could you please disable the menu option in Bubble menu and Toolbar, when the user is inside a |
5 participants
What's new?
Editors now support text color and highlights!!
Users can now use toolbar, and slash commands to add text colors and background colors in the rich text editor and document editor, that is, issue descriptions and pages.
Improvements:
Refactoring:
Media:
Screen.Recording.2024-09-19.at.13.56.02.mov
GitHub issue: #5136
Plane issue: WEB-2494
Summary by CodeRabbit
Release Notes
New Features
BubbleMenuColorSelectorfor selecting text and background colors.ColorDropdowncomponent for enhanced color selection in the toolbar.Enhancements
Bug Fixes