-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WEB-2494] feat: text color and highlight options for all editors #5653
base: preview
Are you sure you want to change the base?
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 0 minutes and 33 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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
editor
andrange
props are not being used in the component. If they are not needed, consider removing them to simplify the component's interface.
23-29
: TheuseCallback
hook is not necessary for theselectItem
function.Since the
selectItem
function is not being passed as a prop to a child component, theuseCallback
hook is not needed. Consider removing it to simplify the code.Apply this diff to remove the
useCallback
hook:- 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 theuseEffect
hooks.The
useEffect
hook for initializing the selected index could be combined with the one for handling keyboard navigation to reduce the number ofuseEffect
calls.Apply this diff to combine the
useEffect
hooks: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! TheColorDropdown
component is well-implemented.The component is well-structured, modular, and effectively uses the
Popover
component 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
Props
interface 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.lock
is 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-selector
available 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-dropdown
module 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
SlashCommand
toSlashCommands
aligns 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-commands
export 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"
toTEditorCommands
aligns with the PR objectives of adding text color and highlight options to the editor.
28-29
: LGTM!The introduction of
TColorEditorCommands
andTNonColorEditorCommands
types 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
key
tocommandKey
may improve clarity regarding the purpose of the key, and the addition of a newkey
property of typestring
could be used for a different purpose, such as a unique identifier for the command item.
42-42
: LGTM!The explicit typing of
icon
asReact.ReactNode
improves type safety and clarity.
43-43
: LGTM!The addition of
iconContainerStyle
allows for more flexible styling of the command icons, and the use ofCSSProperties
type 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/common
module, 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_LIST
constant is well-structured and provides a good range of color configurations. The use of hexadecimal color codes forbackgroundColor
andtextColor
is appropriate, and thelabel
property 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
getExtensions
function 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
SlashCommand
toSlashCommands
aligns 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
SlashCommand
toSlashCommands
appears consistent and non-breaking.After analyzing the codebase, the change from
SlashCommand
toSlashCommands
is implemented consistently across multiple files. TheSlashCommands
function 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
SlashCommands
function to explain the purpose of theadditionalOptions
parameter 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
id
prop is a good practice for accessibility and testing purposes. The conditionalclassName
prop 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
className
prop is a good practice for setting the size and layout of the icon. Thestyle
prop is a good practice for allowing customization of the icon container style. Theitem.icon
prop 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
className
prop is a good practice for setting the layout and truncation behavior of the title. Theitem.title
prop 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
TNonColorEditorCommands
from the@plane/editor
module looks good. It does not introduce any issues or side effects.
59-61
: LGTM!The update to the
executeMenuItemCommand
method call, wrapping thekey
parameter in an object and explicitly casting it to theTNonColorEditorCommands
type, 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-color
dependency with version^2.7.1
aligns 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-highlight
dependency with version^2.7.1
aligns 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-style
has been updated from^2.1.13
to^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
Color
extension is imported correctly.
88-91
: LGTM!The
Color
andHighlight
extensions are added to theCoreEditorExtensionsWithoutProps
array correctly. TheHighlight
extension 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
Color
andHighlight
extensions 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
Color
andHighlight
extensions are correctly added to theCoreReadOnlyEditorExtensions
array, which will enable color formatting and text highlighting in the read-only editor. Themulticolor: true
configuration for theHighlight
extension 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
EditorMenuItem
instead ofBubbleMenuItem
, indicating a potential reorganization or enhancement of the menu item structure.
29-30
: LGTM!Destructuring props from a single
props
object 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
BubbleMenuItem
toEditorMenuItem
, indicating a potential reorganization or enhancement of the menu item structure.
47-49
: Verify the change in theisActive
method's argument.The logic for determining the active item has been modified to include an empty string as an argument in the
isActive
method. It's unclear how this change affects the behavior of theisActive
method.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
ChevronDown
icon'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
Link
icon fromlucide-react
library 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
props
object 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
Link
icon 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
Command
extension is correctly defined and configured with appropriate options for the slash command. Theallow
function properly handles the conditions under which the command can be invoked, and theSuggestion
plugin is correctly registered with the editor.
53-106
: LGTM!The
renderItems
function correctly handles the lifecycle of the command menu, including rendering theSlashCommandsMenu
component using theReactRenderer
class 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
SlashCommands
function correctly configures theCommand
extension with thesuggestion
options. The use of thegetSlashCommandFilteredSections
function to set theitems
property is appropriate, as it allows for filtering the available slash command options based on theadditionalOptions
parameter. Setting therender
property to therenderItems
function 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
TColorEditorCommands
is a relevant addition for supporting color-specific editor commands.
14-14
: LGTM!The new type
TNonColorEditorCommands
is a good addition for distinguishing non-color editor commands from color-specific ones.
33-52
: LGTM!The changes to the
executeMenuItemCommand
method introduce a more structured approach to handling editor commands. The differentiation between non-color commands and color-specific commands, along with the additionalcolor
property 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
isMenuItemActive
method 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 additionalcolor
property 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
TNonColorEditorCommands
when checking the active state of menu items.packages/editor/src/core/extensions/extensions.tsx (3)
2-2
: LGTM!The
Color
extension is correctly imported from the@tiptap/extension-color
package. This import is necessary to enable color customization features in the editor.
3-3
: LGTM!The
Highlight
extension is correctly imported from the@tiptap/extension-highlight
package. This import is necessary to enable text highlighting features in the editor.
171-174
: LGTM!The
Color
andHighlight
extensions are correctly added to theCoreEditorExtensions
array. TheHighlight
extension 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
TEditorCommands
toTNonColorEditorCommands
aligns with the refactoring effort to separate color-related functionality.
9-10
: LGTM!The import of the
ColorDropdown
component indicates the introduction of color selection capabilities to the toolbar.
23-23
: LGTM!The modification of the
executeCommand
property type to useEditorRefApi["executeMenuItemCommand"]
aligns with the refactoring effort to use the new command structure.
41-45
: LGTM!The modification of the
onClick
handler 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
updateActiveStates
function 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
activeTypography
constant aligns with the new command structure and ensures type safety by usingitemKey: item.key as TNonColorEditorCommands
.
110-114
: LGTM!The modification of the
onClick
handler for theCustomMenu.MenuItem
to 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
ColorDropdown
component aligns with the goal of adding color selection capabilities to the toolbar. ThehandleColorSelect
andisColorActive
props of theColorDropdown
component utilize the new command structure correctly, including the color parameter.packages/editor/src/core/extensions/slash-commands/command-menu.tsx (1)
1-130
: TheSlashCommandsMenu
component 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
useLayoutEffect
hook.- 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 theBubbleMenuColorSelector
component!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
BubbleMenuColorSelector
component is syntactically correct.
10-10
: LGTM!The renaming of the
BubbleMenuItem
interface toEditorMenuItem
is 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
items
array based on the editor's active state ensures that the appropriate menu items are displayed in the bubble menu.
56-56
: LGTM!Updating the
onHidden
callback to setisColorSelectorOpen
tofalse
is 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
EditorBubbleMenu
component 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
isMenuItemActive
enhances type safety by ensuring that theitem.key
is explicitly cast toTNonColorEditorCommands
. This aligns with the updated type definitions imported from the@plane/editor
module 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
Palette
from "lucide-react" is correct and necessary for using the icon in the newly added menu items.
29-29
: LGTM!The import statements for
toggleBackgroundColor
andtoggleTextColor
from "@/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
TColorEditorCommands
andTNonColorEditorCommands
from "@/types" is correct and necessary for using these types in the modifiedEditorMenuItem
type.
50-63
: LGTM!The changes to the
EditorMenuItem
type 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,
TextColorItem
andBackgroundColorItem
, are correctly implemented and provide the necessary functionality for selecting text and background colors. TheisActive
methods enhance user interaction by providing visual feedback on the active color settings, and thecommand
methods 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
getEditorMenuItems
function 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
toggleTextColor
function 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
toggleBackgroundColor
function 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 thesetHighlight
method 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 toexecuteMenuItemCommand
improve flexibility and functionality.The modifications to the
executeMenuItemCommand
function 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
itemKey
property.- The additional logic for handling "text-color" and "background-color" item keys enables passing the
color
property directly to thecommand
function, enhancing the command execution for specific menu items.These changes improve the overall functionality and extensibility of the
executeMenuItemCommand
function.
153-165
: LGTM! The changes toisMenuItemActive
improve flexibility and functionality.The modifications to the
isMenuItemActive
function 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
itemKey
property.- The additional logic for handling "text-color" and "background-color" item keys enables passing the
color
property directly to theisActive
function, enhancing the active state checking for specific menu items.These changes improve the overall functionality and extensibility of the
isMenuItemActive
function.
157-158
: LGTM! ExtractinggetEditorMenuItem
improves code readability and reusability.The extraction of the
getEditorMenuItem
function from theisMenuItemActive
function 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
TSlashCommandSection
provides 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.
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
BubbleMenuColorSelector
for selecting text and background colors.ColorDropdown
component for enhanced color selection in the toolbar.Enhancements
Bug Fixes