[WEB-2127] dev: editor extensions configuration #5279
Conversation
WalkthroughThe recent changes enhance the type safety and functionality of the document and rich text editors. New optional properties for disabling extensions were introduced, improving control over editor behavior. Functions were streamlined, unnecessary code removed, and a new hook was added for managing disabled states across different editors. Overall, these updates promote a more flexible and user-friendly editing experience while ensuring clarity and efficiency in the codebase. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PageEditorBody
participant useEditorFlagging
participant DocumentEditor
User->>PageEditorBody: Interact with editor
PageEditorBody->>useEditorFlagging: Fetch disabled extensions
useEditorFlagging-->>PageEditorBody: Return disabled extensions
PageEditorBody->>DocumentEditor: Render editor with disabled extensions
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: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (10)
- packages/editor/src/ce/extensions/document-extensions.tsx (1 hunks)
- packages/editor/src/core/components/editors/document/editor.tsx (3 hunks)
- packages/editor/src/core/components/editors/rich-text/editor.tsx (1 hunks)
- packages/editor/src/core/hooks/use-document-editor.ts (4 hunks)
- packages/editor/src/core/types/extensions.ts (1 hunks)
- packages/editor/src/core/types/index.ts (1 hunks)
- packages/editor/src/core/types/slash-commands-suggestion.ts (1 hunks)
- web/ce/hooks/use-editor-flagging.ts (1 hunks)
- web/ce/hooks/use-issue-embed.tsx (2 hunks)
- web/core/components/pages/editor/editor-body.tsx (4 hunks)
Files skipped from review due to trivial changes (3)
- packages/editor/src/core/components/editors/rich-text/editor.tsx
- packages/editor/src/core/types/extensions.ts
- web/ce/hooks/use-issue-embed.tsx
Additional comments not posted (15)
packages/editor/src/core/types/index.ts (1)
3-3: LGTM! The new export statement enhances module accessibility.The addition of
export * from "./extensions";is straightforward and ensures that functionalities from theextensionsmodule are accessible.packages/editor/src/ce/extensions/document-extensions.tsx (2)
1-1: LGTM! The type safety improvements are beneficial.The addition of the optional
disabledExtensionsproperty and the explicit type declaration forextensionsenhance type safety and control over active extensions.
11-11: Verify the usage of the newdisabledExtensionsproperty.Ensure that the new
disabledExtensionsproperty is correctly utilized throughout the codebase.Verification successful
The
disabledExtensionsproperty is correctly utilized throughout the codebase.The property is integrated into the document editor's configuration and functionality, appearing in type definitions, component props, and hooks.
DocumentEditorcomponentuseDocumentEditorhook- Type definitions for
DocumentEditorPropsandIDocumentEditorScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the new `disabledExtensions` property. # Test: Search for the usage of the `disabledExtensions` property. Expect: Occurrences of the property being used. rg --type tsx --type ts 'disabledExtensions'Length of output: 72
Script:
#!/bin/bash # Description: Verify the usage of the new `disabledExtensions` property. # Find all .tsx and .ts files and search for the usage of the `disabledExtensions` property within those files. fd -e tsx -e ts -x rg 'disabledExtensions' {}Length of output: 311
Script:
#!/bin/bash # Description: Extract context around the usage of the `disabledExtensions` property. # Find all .tsx and .ts files and search for the usage of the `disabledExtensions` property within those files, including 5 lines of context before and after each match. fd -e tsx -e ts -x rg 'disabledExtensions' -C 5 {}Length of output: 2480
packages/editor/src/core/types/slash-commands-suggestion.ts (1)
23-24: New command added to editor commands.The new command
"issue-embed"has been correctly added to theTEditorCommandstype definition. This enhances the functionality by providing additional command options.packages/editor/src/core/components/editors/document/editor.tsx (3)
16-16: New property added toIDocumentEditorinterface.The new optional property
disabledExtensionsof typeTExtensions[]has been added to theIDocumentEditorinterface. This enhances the configurability of theDocumentEditorcomponent.
36-36: New property destructured inDocumentEditorcomponent.The
disabledExtensionsproperty has been correctly destructured from thepropsobject in theDocumentEditorcomponent. This ensures that the new property is utilized within the component.
59-59: New property passed touseDocumentEditorhook.The
disabledExtensionsproperty is correctly passed to theuseDocumentEditorhook, ensuring that the hook can manage the disabled extensions as intended.packages/editor/src/core/hooks/use-document-editor.ts (4)
19-19: New property added toDocumentEditorPropstype.The new optional property
disabledExtensionsof typeTExtensions[]has been added to theDocumentEditorPropstype. This enhances the configurability of theuseDocumentEditorhook.
40-40: New property destructured inuseDocumentEditorfunction.The
disabledExtensionsproperty has been correctly destructured from thepropsobject in theuseDocumentEditorfunction. This ensures that the new property is utilized within the hook.
107-107: New property passed toDocumentEditorAdditionalExtensionsfunction.The
disabledExtensionsproperty is correctly passed to theDocumentEditorAdditionalExtensionsfunction, ensuring that the disabled extensions are managed as intended.
117-120: Enhanced return statement inuseDocumentEditorfunction.The return statement of the
useDocumentEditorfunction has been updated to include botheditorandisIndexedDbSynced. This improves the clarity of the return values without altering existing functionality.web/core/components/pages/editor/editor-body.tsx (4)
22-23: New imports for editor flagging and issue embed.The new hooks
useEditorFlagginganduseIssueEmbedare imported. Ensure these hooks are necessary and used effectively within the file.
83-84: Integration ofuseEditorFlagginghook.The
useEditorFlagginghook is used to obtaindocumentEditor, which is then used to manage disabled extensions within the editor. This integration appears correct and enhances control over the editor's behavior.
151-151: PassingdocumentEditortoDocumentEditorWithRef.The
documentEditorobject is correctly passed asdisabledExtensionsto theDocumentEditorWithRefcomponent, ensuring that extensions can be dynamically disabled based on the flagging state.
165-167: Refactoring ofissueEmbedProps.The
issueEmbedPropsare now used directly in theDocumentReadOnlyEditorWithRefcomponent, simplifying the code and potentially enhancing performance.
| // editor | ||
| import { TExtensions } from "@plane/editor"; | ||
|
|
||
| /** | ||
| * @description extensions disabled in various editors | ||
| * @returns | ||
| * ```ts | ||
| * { | ||
| * documentEditor: TExtensions[] | ||
| * richTextEditor: TExtensions[] | ||
| * } | ||
| * ``` | ||
| */ | ||
| export const useEditorFlagging = (): { | ||
| documentEditor: TExtensions[]; | ||
| richTextEditor: TExtensions[]; | ||
| } => ({ | ||
| documentEditor: [], | ||
| richTextEditor: [], | ||
| }); |
There was a problem hiding this comment.
LGTM! Consider adding customization options.
The new hook useEditorFlagging is well-documented and straightforward. However, consider adding customization options to allow dynamic configuration of disabled extensions.
export const useEditorFlagging = (initialFlags = { documentEditor: [], richTextEditor: [] }): {
documentEditor: TExtensions[];
richTextEditor: TExtensions[];
} => ({
documentEditor: initialFlags.documentEditor,
richTextEditor: initialFlags.richTextEditor,
});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.
| // editor | |
| import { TExtensions } from "@plane/editor"; | |
| /** | |
| * @description extensions disabled in various editors | |
| * @returns | |
| * ```ts | |
| * { | |
| * documentEditor: TExtensions[] | |
| * richTextEditor: TExtensions[] | |
| * } | |
| * ``` | |
| */ | |
| export const useEditorFlagging = (): { | |
| documentEditor: TExtensions[]; | |
| richTextEditor: TExtensions[]; | |
| } => ({ | |
| documentEditor: [], | |
| richTextEditor: [], | |
| }); | |
| // editor | |
| import { TExtensions } from "@plane/editor"; | |
| /** | |
| * @description extensions disabled in various editors | |
| * @returns | |
| * ```ts | |
| * { | |
| * documentEditor: TExtensions[] | |
| * richTextEditor: TExtensions[] | |
| * } | |
| * ``` | |
| */ | |
| export const useEditorFlagging = (initialFlags = { documentEditor: [], richTextEditor: [] }): { | |
| documentEditor: TExtensions[]; | |
| richTextEditor: TExtensions[]; | |
| } => ({ | |
| documentEditor: initialFlags.documentEditor, | |
| richTextEditor: initialFlags.richTextEditor, | |
| }); |
Plane issue: WEB-2127
Summary by CodeRabbit
New Features
useEditorFlagging, to manage the state of disabled extensions across different editors."issue-embed".Bug Fixes
Documentation