[WEB-1974] fix: images getting replaced on resize#5233
[WEB-1974] fix: images getting replaced on resize#5233SatishGandham merged 4 commits intopreviewfrom
Conversation
WalkthroughThe recent updates enhance various editor components by introducing a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DocumentEditor
participant PageRenderer
participant EditorContainer
participant RichTextEditor
User->>DocumentEditor: Open Document
DocumentEditor->>PageRenderer: Render Page with id
PageRenderer->>EditorContainer: Load Editor Content
EditorContainer->>RichTextEditor: Initialize Editor with id
RichTextEditor-->>User: Display 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: 0
Outside diff range, codebase verification and nitpick comments (1)
packages/editor/src/core/components/editors/document/read-only-editor.tsx (1)
34-34: Ensureidprop is provided.The
idprop is now required. The instance inweb/core/components/pages/editor/editor-body.tsxdoes not provide theidprop. Please update this instance to include theidprop.
web/core/components/pages/editor/editor-body.tsx: Ensureidprop is provided toDocumentReadOnlyEditorWithRef.Analysis chain
Ensure
idprop is provided.The
idprop is now required. Verify that all instances ofDocumentReadOnlyEditorprovide this prop.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all instances of `DocumentReadOnlyEditor` provide the `id` prop. # Test: Search for the usage of `DocumentReadOnlyEditor`. Expect: All instances should provide the `id` prop. rg --type js --type ts -A 5 $'<DocumentReadOnlyEditor'Length of output: 1323
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (21)
- packages/editor/src/core/components/editors/document/editor.tsx (1 hunks)
- packages/editor/src/core/components/editors/document/page-renderer.tsx (2 hunks)
- packages/editor/src/core/components/editors/document/read-only-editor.tsx (3 hunks)
- packages/editor/src/core/components/editors/editor-container.tsx (2 hunks)
- packages/editor/src/core/components/editors/editor-content.tsx (1 hunks)
- packages/editor/src/core/components/editors/editor-wrapper.tsx (2 hunks)
- packages/editor/src/core/components/editors/read-only-editor-wrapper.tsx (2 hunks)
- packages/editor/src/core/extensions/image/image-resize.tsx (1 hunks)
- packages/editor/src/core/extensions/mentions/extension.tsx (1 hunks)
- packages/editor/src/core/extensions/slash-commands.tsx (1 hunks)
- packages/editor/src/core/types/editor.ts (2 hunks)
- space/core/components/issues/peek-overview/comment/add-comment.tsx (1 hunks)
- space/core/components/issues/peek-overview/comment/comment-detail-card.tsx (2 hunks)
- space/core/components/issues/peek-overview/issue-details.tsx (1 hunks)
- web/core/components/core/modals/gpt-assistant-popover.tsx (1 hunks)
- web/core/components/inbox/modals/create-edit-modal/issue-description.tsx (1 hunks)
- web/core/components/issues/description-input.tsx (1 hunks)
- web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx (2 hunks)
- web/core/components/issues/issue-modal/form.tsx (1 hunks)
- web/core/components/profile/activity/activity-list.tsx (1 hunks)
- web/core/components/profile/activity/profile-activity-list.tsx (1 hunks)
Files skipped from review due to trivial changes (4)
- space/core/components/issues/peek-overview/comment/add-comment.tsx
- web/core/components/core/modals/gpt-assistant-popover.tsx
- web/core/components/inbox/modals/create-edit-modal/issue-description.tsx
- web/core/components/issues/issue-modal/form.tsx
Additional comments not posted (31)
packages/editor/src/core/components/editors/editor-content.tsx (2)
8-9: Addition ofidproperty toEditorContentPropsis correct.The
idproperty enhances the component's flexibility by enabling unique identification of editor instances.
14-19: Usage ofidproperty inEditorContentWrapperis correct.The
idproperty is correctly destructured from props and passed to theImageResizercomponent, ensuring unique identification of editor instances.packages/editor/src/core/components/editors/read-only-editor-wrapper.tsx (1)
Line range hint
11-29:
Addition and usage ofidproperty inReadOnlyEditorWrapperis correct.The
idproperty is correctly added to thepropsobject and passed to theEditorContainerandEditorContentWrappercomponents, ensuring unique identification of editor instances.space/core/components/issues/peek-overview/issue-details.tsx (1)
29-29: Addition ofidproperty toRichTextReadOnlyEditoris correct.The
idproperty is correctly added to theRichTextReadOnlyEditorcomponent, ensuring unique identification of issue details.packages/editor/src/core/components/editors/editor-wrapper.tsx (3)
62-63: Ensureidprop is correctly used inEditorContainer.The
idprop is passed toEditorContainer. Verify thatEditorContainercorrectly uses this prop.Verification successful
The
idprop is correctly used in theEditorContainercomponent.The
idprop is destructured frompropsand assigned to theidattribute of an HTML element within theEditorContainercomponent, ensuring it is utilized appropriately.
packages/editor/src/core/components/editors/editor-container.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `id` prop in `EditorContainer`. # Test: Search for the `EditorContainer` component and check the usage of `id` prop. Expect: `id` prop should be used correctly. rg --type js --type ts -A 5 $'<EditorContainer'Length of output: 2532
Script:
#!/bin/bash # Description: Verify the usage of `id` prop within the EditorContainer component. # Test: Search for the usage of `id` prop within the EditorContainer component. rg --type js --type ts -A 5 'id' packages/editor/src/core/components/editors/editor-container.tsxLength of output: 664
67-67: Ensureidprop is correctly used inEditorContentWrapper.The
idprop is passed toEditorContentWrapper. Verify thatEditorContentWrappercorrectly uses this prop.Verification successful
The
idprop is correctly used in theEditorContentWrappercomponent.The
idprop is destructured frompropsand used within theEditorContentWrappercomponent, specifically passed to theImageResizercomponent.
packages/editor/src/core/components/editors/editor-content.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `id` prop in `EditorContentWrapper`. # Test: Search for the `EditorContentWrapper` component and check the usage of `id` prop. Expect: `id` prop should be used correctly. rg --type js --type ts -A 5 $'<EditorContentWrapper'Length of output: 1643
Script:
#!/bin/bash # Description: Locate the definition of `EditorContentWrapper` and verify the usage of the `id` prop. # Locate the definition of `EditorContentWrapper` rg --type js --type ts 'function EditorContentWrapper' -A 10 # Locate the definition of `EditorContentWrapper` if it is a class component rg --type js --type ts 'class EditorContentWrapper' -A 10Length of output: 122
Script:
#!/bin/bash # Description: Locate the import statements for `EditorContentWrapper` to find its source file. # Search for import statements of `EditorContentWrapper` rg --type js --type ts 'import EditorContentWrapper' -A 1Length of output: 59
Script:
#!/bin/bash # Description: Locate any occurrences of `EditorContentWrapper` to find its definition or source file. # Search for any occurrences of `EditorContentWrapper` rg --type js --type ts 'EditorContentWrapper'Length of output: 1021
Script:
#!/bin/bash # Description: Verify the usage of `id` prop in `EditorContentWrapper` component. # Search for the definition and usage of `id` prop in `EditorContentWrapper` rg --type js --type ts 'EditorContentWrapper' -A 20 packages/editor/src/core/components/editors/editor-content.tsxLength of output: 539
24-24: Ensureidprop is provided.The
idprop is now required. Verify that all instances ofEditorWrapperprovide this prop.packages/editor/src/core/components/editors/document/read-only-editor.tsx (2)
16-16: Ensureidprop is provided in implementations ofIDocumentReadOnlyEditor.The
idprop is now required inIDocumentReadOnlyEditor. Verify that all implementations of this interface provide theidprop.Verification successful
Ensure
idprop is provided in implementations ofIDocumentReadOnlyEditor.The
idprop is now required inIDocumentReadOnlyEditor. The verification confirms that theidprop is correctly included in the primary places where this interface is utilized.
packages/editor/src/core/components/editors/document/read-only-editor.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all implementations of `IDocumentReadOnlyEditor` provide the `id` prop. # Test: Search for the implementations of `IDocumentReadOnlyEditor`. Expect: All implementations should provide the `id` prop. rg --type js --type ts -A 5 $'IDocumentReadOnlyEditor'Length of output: 2013
Script:
#!/bin/bash # Description: Verify all instances of `IDocumentReadOnlyEditor` provide the `id` prop. # Test: Search for instances where `IDocumentReadOnlyEditor` is used. Expect: All instances should provide the `id` prop. rg --type js --type ts -A 5 'IDocumentReadOnlyEditor' | grep -E 'IDocumentReadOnlyEditor|id'Length of output: 703
64-64: Ensureidprop is correctly used inPageRenderer.The
idprop is passed toPageRenderer. Verify thatPageRenderercorrectly uses this prop.Verification successful
The
idprop is correctly used in thePageRenderercomponent.The
idprop is passed to theEditorContentWrapperandEditorContainercomponents withinPageRenderer, confirming its appropriate usage.
packages/editor/src/core/components/editors/document/page-renderer.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `id` prop in `PageRenderer`. # Test: Search for the `PageRenderer` component and check the usage of `id` prop. Expect: `id` prop should be used correctly. rg --type js --type ts -A 5 $'<PageRenderer'Length of output: 1413
Script:
#!/bin/bash # Locate the definition of the `PageRenderer` component and inspect the usage of the `id` prop. # Find the definition of the `PageRenderer` component. rg --type js --type ts 'function PageRenderer' -A 20 # Additionally, search for the `id` prop within the `PageRenderer` component to confirm its usage. rg --type js --type ts 'PageRenderer' -A 20 | rg 'id'Length of output: 1494
Script:
#!/bin/bash # Verify the usage of the `id` prop within the `PageRenderer` component in `page-renderer.tsx`. # Search for the `id` prop within the `page-renderer.tsx` file to confirm its usage. rg --type js --type ts 'id' packages/editor/src/core/components/editors/document/page-renderer.tsx -A 10Length of output: 2345
packages/editor/src/core/types/editor.ts (2)
32-32: Ensureidprop is provided in implementations ofIEditorProps.The
idprop is now required inIEditorProps. Verify that all implementations of this interface provide theidprop.
55-55: Ensureidprop is provided in implementations ofIReadOnlyEditorProps.The
idprop is now required inIReadOnlyEditorProps. Verify that all implementations of this interface provide theidprop.Verification successful
Ensure
idprop is provided in all implementations ofIReadOnlyEditorProps.The
idprop is now required inIReadOnlyEditorProps. Verify that all instances where this interface is used or implemented provide theidprop.
Ensure
idprop is provided in implementations ofIReadOnlyEditorProps.The
idprop is now required inIReadOnlyEditorProps. The verification shows that all instances of this interface correctly provide theidprop.
ReadOnlyEditorWrappercomponent correctly destructures and uses theidprop fromIReadOnlyEditorProps.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all implementations of `IReadOnlyEditorProps` provide the `id` prop. # Test: Search for the implementations of `IReadOnlyEditorProps`. Expect: All implementations should provide the `id` prop. rg --type js --type ts -A 5 $'IReadOnlyEditorProps'Length of output: 1671
Script:
#!/bin/bash # Description: Verify all instances where `IReadOnlyEditorProps` is used or implemented provide the `id` prop. # Test: Search for all instances of `IReadOnlyEditorProps` usage. Expect: All instances should provide the `id` prop. rg --type js --type ts 'IReadOnlyEditorProps' -A 10Length of output: 2444
packages/editor/src/core/components/editors/editor-container.tsx (3)
11-11: Addition ofidproperty looks good.The
idproperty ensures unique identification of eachEditorContainerinstance, which is essential for the fix.
15-15: Inclusion ofidin destructured props looks good.This is necessary for using the
idproperty within the component.
58-58: Usage ofidin thedivelement looks good.This ensures unique identification of each
EditorContainerinstance in the DOM.packages/editor/src/core/components/editors/document/editor.tsx (1)
84-84: Addition ofidprop toPageRendererlooks good.This ensures that the unique identifier is passed down and can be utilized within the
PageRenderer.packages/editor/src/core/extensions/image/image-resize.tsx (5)
5-8: Addition ofPropstype looks good.This improves type safety and clarity by explicitly defining the expected properties.
10-11: Introduction ofgetImageElementfunction looks good.This centralizes the logic for retrieving the active image element, improving maintainability and readability.
14-14: Inclusion ofidin destructured props looks good.This is necessary for using the
idproperty within the component.
19-21: Usage ofgetImageElementinupdateMediaSizelooks good.This ensures that the correct image element is targeted for size updates.
42-43: Usage ofgetImageElementinMoveablecomponent looks good.This ensures that the correct image element is targeted for resizing.
packages/editor/src/core/extensions/mentions/extension.tsx (1)
94-95: Verify the new selector logic.The updated selector logic uses
[id^="editor-container"]to match any element whose ID starts with"editor-container". Ensure this selector correctly targets the intended elements and does not unintentionally match other elements.web/core/components/issues/description-input.tsx (1)
121-123: LGTM! Verify the correct usage of theidprop.The
idprop has been correctly added to theRichTextReadOnlyEditorcomponent. Ensure that theidprop is used correctly and does not conflict with other elements.packages/editor/src/core/components/editors/document/page-renderer.tsx (2)
24-24: Ensure theidproperty is correctly added to theIPageRenderertype.The
idproperty has been correctly added to theIPageRenderertype. Ensure that this change is consistently applied across all usages of theIPageRenderertype.
29-29: LGTM! Verify the correct usage of theidproperty inPageRenderer.The
idproperty has been correctly added to thePageRendererfunction. Ensure that theidproperty is used correctly and does not conflict with other elements.web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx (2)
146-146: Ensure theidprop is unique and correctly assigned.The addition of the
idprop toLiteTextEditoris a good practice for unique identification. Ensure thatcomment.idis always unique and correctly assigned.
194-194: Ensure theidprop is unique and correctly assigned.The addition of the
idprop toLiteTextReadOnlyEditoris a good practice for unique identification. Ensure thatcomment.idis always unique and correctly assigned.web/core/components/profile/activity/activity-list.tsx (1)
71-71: Ensure theidprop is unique and correctly assigned.The addition of the
idprop toRichTextReadOnlyEditoris a good practice for unique identification. Ensure thatactivityItem.idis always unique and correctly assigned.space/core/components/issues/peek-overview/comment/comment-detail-card.tsx (2)
108-108: Ensure theidprop is unique and correctly assigned.The addition of the
idprop toLiteTextEditoris a good practice for unique identification. Ensure thatcomment.idis always unique and correctly assigned.
136-136: Ensure theidprop is unique and correctly assigned.The addition of the
idprop toLiteTextReadOnlyEditoris a good practice for unique identification. Ensure thatcomment.idis always unique and correctly assigned.web/core/components/profile/activity/profile-activity-list.tsx (1)
100-102: LGTM! Verify the uniqueness ofactivityItem.id.The addition of the
idattribute to theRichTextReadOnlyEditorcomponent is correct and follows the logic described in the PR summary. Ensure thatactivityItem.idis unique to prevent any conflicts or unexpected behavior.packages/editor/src/core/extensions/slash-commands.tsx (1)
377-378: LGTM! Verify the impact of the new selector.The update to the selector for
tippyContainerto use an attribute selector[id^="editor-container"]is correct and enhances the flexibility of the code. Ensure that this change does not introduce any unintended side effects, such as selecting multiple elements or causing conflicts with other elements.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- web/core/components/pages/editor/editor-body.tsx (1 hunks)
Additional comments not posted (1)
web/core/components/pages/editor/editor-body.tsx (1)
156-158: Ensure theidproperty is correctly assigned and utilized.The addition of the
idproperty to theDocumentReadOnlyEditorWithRefcomponent looks good. Ensure that thepageIdis always defined and correctly assigned to avoid potential issues.Verification successful
The
idproperty is correctly assigned and utilized.The addition of the
idproperty to theDocumentReadOnlyEditorWithRefcomponent is correctly implemented. ThepageIdis derived frompage?.idand there is a conditional check to ensure thatpageIdis defined before it is used.
pageIdis derived frompage?.id.- There is a conditional check to ensure
pageIdis defined.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that `pageId` is always defined and correctly assigned. # Test: Search for the definition and assignment of `pageId`. Expect: `pageId` is derived from `page?.id`. rg --type tsx -A 5 $'const pageId = page?.id'Length of output: 74
Script:
#!/bin/bash # Description: Verify that `pageId` is always defined and correctly assigned. # Test: Search for the definition and assignment of `pageId`. Expect: `pageId` is derived from `page?.id`. rg -A 5 'const pageId = page?.id'Length of output: 546
Script:
#!/bin/bash # Description: Verify the usage of `pageId` within `web/core/components/pages/editor/editor-body.tsx`. # Test: Search for the usage of `pageId` within the `PageEditorBody` component. rg 'pageId' web/core/components/pages/editor/editor-body.tsx -A 5 -B 5Length of output: 1885
2 participants
Problem:
When the user tries to resize an image when multiple instances of an editor are rendered on the page, the image being resized gets replaced with the image present in the other editor instance.
Solution:
Provided each editor instance with an unique id of its own to render the image resize handle properly.
Media:
Screen.Recording.2024-07-25.at.18.23.59.mov
Screen.Recording.2024-07-25.at.18.22.10.mov
Plane issue: WEB-1974
Summary by CodeRabbit
New Features
idproperty to various editor components, enhancing accessibility and identification for better DOM manipulation.idattributes across multiple components.idsupport in theDocumentReadOnlyEditorWithRefcomponent for enhanced context-awareness.Bug Fixes
ImageResizercomponent by refining the method for image element retrieval.Documentation
Chores