[WEB-2050] dev: added new information panels to a page #5409
Conversation
WalkthroughThe changes involve the integration of character counting, paragraph counting, and reading time estimation features into the editor. New helper functions and hooks have been introduced to facilitate these capabilities, along with modifications to existing components to display relevant document metrics. Additionally, a new popover component has been created to provide editing information, enhancing user interaction and experience. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Editor
participant Metrics
participant Popover
User->>Editor: Type text
Editor->>Metrics: Update character and paragraph count
Metrics-->>Editor: Return updated counts
Editor->>Popover: Update document info with counts
Popover->>User: Display character, paragraph, and reading time
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
Outside diff range, codebase verification and nitpick comments (1)
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx (1)
13-13: Correct the import path forPageEditInformationPopover.The component
PageEditInformationPopoveris defined inweb/core/components/pages/dropdowns/edit-information-popover.tsx. Update the import statement to reflect the correct path:
- Change the import path to
@/core/components/pages/dropdowns/edit-information-popover.Analysis chain
Verify the import path for
PageEditInformationPopover.Ensure that the import path is correct and that the component is available at the specified location.
Run the following script to verify the existence of the
PageEditInformationPopovercomponent:Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the `PageEditInformationPopover` component. # Test: Search for the component definition. Expect: The component should be defined in the specified path. ast-grep --lang typescript --pattern $'export const PageEditInformationPopover = $_' -- 'src/components/pages'Length of output: 177
Script:
#!/bin/bash # Description: Search for the `PageEditInformationPopover` component definition across the entire repository. # Test: Search for the component definition. Expect: The component should be defined somewhere in the repository. ast-grep --lang typescript --pattern $'export const PageEditInformationPopover = $_'Length of output: 85
Script:
#!/bin/bash # Description: Search for any mention of `PageEditInformationPopover` in the codebase to identify its definition or usage. # Test: Search for the component name. Expect: The component should be mentioned somewhere in the codebase. rg 'PageEditInformationPopover'Length of output: 473
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 (12)
- packages/editor/package.json (1 hunks)
- packages/editor/src/core/extensions/extensions.tsx (2 hunks)
- packages/editor/src/core/helpers/common.ts (2 hunks)
- packages/editor/src/core/hooks/use-editor.ts (2 hunks)
- packages/editor/src/core/hooks/use-read-only-editor.ts (2 hunks)
- packages/editor/src/core/types/editor.ts (1 hunks)
- web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx (3 hunks)
- web/core/components/pages/dropdowns/edit-information-popover.tsx (1 hunks)
- web/core/components/pages/dropdowns/index.ts (1 hunks)
- web/core/components/pages/editor/header/extra-options.tsx (1 hunks)
- web/core/components/pages/editor/header/info-popover.tsx (1 hunks)
- web/helpers/date-time.helper.ts (1 hunks)
Additional comments not posted (13)
web/core/components/pages/dropdowns/index.ts (1)
1-1: Export addition approved.The addition of the export statement for
edit-information-popoverenhances modularity and encapsulation.packages/editor/src/core/helpers/common.ts (1)
63-70: FunctiongetParagraphCountimplementation approved.The function is well-implemented, efficiently counting non-empty paragraph nodes in the
EditorState.packages/editor/package.json (1)
35-35: Dependency addition approved.The addition of
@tiptap/extension-character-countenhances the editor's functionality by incorporating character count capabilities.packages/editor/src/core/types/editor.ts (1)
12-16: Verify the usage of the newdocumentInfoproperty.The addition of the
documentInfoproperty changes the API contract. Ensure that all consumers of theEditorReadOnlyRefApitype are updated to accommodate this new structure.Run the following script to verify the usage of the
documentInfoproperty:web/core/components/pages/editor/header/info-popover.tsx (1)
10-10: Verify the usage of theeditorRefprop.The
editorRefprop replaces the previouspageprop. Ensure that all instances ofPageInfoPopoverare updated to pass the correcteditorRef.Run the following script to verify the usage of the
editorRefprop:Verification successful
The
editorRefprop is correctly used inPageInfoPopover. The component is updated to use theeditorRefprop, with conditional logic to determine the appropriate reference. No further changes are needed.
- The
editorRefprop is passed as expected in thePageInfoPopovercomponent.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all usages of the `PageInfoPopover` component with the new `editorRef` prop. # Test: Search for the usage of `PageInfoPopover`. Expect: Occurrences where the new prop is passed. rg --type tsx -A 5 $'<PageInfoPopover'Length of output: 67
Script:
#!/bin/bash # Find all .tsx files and search for the usage of `PageInfoPopover` with the `editorRef` prop. fd --extension tsx --exec rg '<PageInfoPopover' -A 5Length of output: 395
web/core/components/pages/dropdowns/edit-information-popover.tsx (1)
17-70: Verify the usage of thePageEditInformationPopovercomponent.Ensure that the
PageEditInformationPopovercomponent is integrated correctly within the application.Run the following script to verify the usage of the
PageEditInformationPopovercomponent:Verification successful
Component Usage Verified: The
PageEditInformationPopovercomponent is used in the application, specifically in the file:
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsxThis confirms its integration within the application.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify all usages of the `PageEditInformationPopover` component in the codebase. # Test: Search for the usage of `PageEditInformationPopover`. Expect: Occurrences where the component is used. rg --type tsx -A 5 $'<PageEditInformationPopover'Length of output: 78
Script:
#!/bin/bash # Description: Verify all usages of the `PageEditInformationPopover` component in the codebase. # Test: Search for the usage of `PageEditInformationPopover`. Expect: Occurrences where the component is used. rg '<PageEditInformationPopover' --glob '*.tsx' -A 5Length of output: 783
packages/editor/src/core/hooks/use-read-only-editor.ts (1)
85-89: LGTM! VerifygetParagraphCountimplementation.The addition of
documentInfoenhances the hook's functionality by providing useful document metrics. The use of optional chaining is appropriate here.Ensure that the
getParagraphCountfunction is correctly implemented and tested.Run the following script to locate the
getParagraphCountfunction implementation:Verification successful
getParagraphCountis correctly implemented and integrated.The function is defined in
packages/editor/src/core/helpers/common.tsand correctly calculates paragraph counts by iterating over the document's nodes. Its usage inuse-read-only-editor.tsis appropriate.
- File:
packages/editor/src/core/helpers/common.ts- Function:
getParagraphCountScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Locate the implementation of `getParagraphCount`. # Test: Search for the function definition. Expect: Definition of `getParagraphCount`. ast-grep --lang typescript --pattern 'function getParagraphCount($_) { $$$ }'Length of output: 79
Script:
#!/bin/bash # Use ripgrep to search for `getParagraphCount` across the codebase to locate its definition or usage. rg 'getParagraphCount' -A 5Length of output: 2717
web/core/components/pages/editor/header/extra-options.tsx (1)
75-75: LGTM!The modification to pass the correct
editorRefbased on content editability is a logical enhancement. This ensures proper interaction with the editor.packages/editor/src/core/extensions/extensions.tsx (1)
1-1: LGTM!The addition of the
CharacterCountextension is a straightforward enhancement that provides useful functionality for character counting.Also applies to: 161-161
web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx (1)
161-161: LGTM! Verify thepageprop inPageEditInformationPopover.The integration of
PageEditInformationPopoverlooks good.Ensure that the
pageprop is correctly passed and utilized within the component.Run the following script to verify the usage of the
pageprop inPageEditInformationPopover:Verification successful
The
pageprop inPageEditInformationPopoveris correctly utilized.The
pageprop is destructured and used to access properties likeupdated_byandcreated_bywithin the component, confirming its correct usage.
- Location:
web/core/components/pages/dropdowns/edit-information-popover.tsxScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of the `page` prop in `PageEditInformationPopover`. # Test: Search for the usage of the `page` prop. Expect: The prop should be used within the component. rg --type tsx -A 5 $'PageEditInformationPopover' -- 'src/components/pages'Length of output: 99
Script:
#!/bin/bash # Locate the file containing the `PageEditInformationPopover` component and verify the usage of the `page` prop. # Find the file containing the `PageEditInformationPopover` component. fd 'PageEditInformationPopover.tsx' src/ # Search for the usage of the `page` prop in the located file. rg 'page' $(fd 'PageEditInformationPopover.tsx' src/)Length of output: 321133
Script:
#!/bin/bash # Locate the `PageEditInformationPopover` component and verify the usage of the `page` prop. # Search for the `PageEditInformationPopover` component definition. ast-grep --lang typescript --pattern 'export const PageEditInformationPopover = ($_): $_ => { $$$ }' # Once located, check for the usage of the `page` prop within the component. ast-grep --lang typescript --pattern 'PageEditInformationPopover({ page: $_ })'Length of output: 184
Script:
#!/bin/bash # Search for the import and definition of the `PageEditInformationPopover` component. # Search for import statements of `PageEditInformationPopover`. rg 'import { PageEditInformationPopover' --type tsx # Search for the definition of `PageEditInformationPopover`. rg 'PageEditInformationPopover' --type tsx -A 10Length of output: 257
Script:
#!/bin/bash # Search for the `PageEditInformationPopover` component in the codebase. # Search for occurrences of `PageEditInformationPopover`. rg 'PageEditInformationPopover' -A 10Length of output: 3971
packages/editor/src/core/hooks/use-editor.ts (2)
11-11: Verify the import path forgetParagraphCount.Ensure that the import path is correct and that the function is available at the specified location.
Run the following script to verify the existence of the
getParagraphCountfunction:Verification successful
Import Path for
getParagraphCountis CorrectThe
getParagraphCountfunction is correctly defined and exported inpackages/editor/src/core/helpers/common.ts. The import path@/helpers/commonis valid and resolves to the correct file.
packages/editor/src/core/helpers/common.ts: Contains the definition ofgetParagraphCount.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of the `getParagraphCount` function. # Test: Search for the function definition. Expect: The function should be defined in the specified path. ast-grep --lang typescript --pattern $'export function getParagraphCount($_) { $$$ }' -- 'src/helpers/common'Length of output: 174
Script:
#!/bin/bash # Description: Search for the `getParagraphCount` function in the entire codebase. # Test: Search for the function definition in the entire repository. ast-grep --lang typescript --pattern $'export function getParagraphCount($_) { $$$ }'Length of output: 86
Script:
#!/bin/bash # Description: Search for any occurrences of `getParagraphCount` in the codebase. # Test: Search for any mention of `getParagraphCount` to find its definition or usage. rg 'getParagraphCount'Length of output: 578
253-257: LGTM! Verify the logic fordocumentInfometrics.The addition of
documentInfolooks good.Ensure that the logic for calculating characters, paragraphs, and words is correct.
Run the following script to verify the logic for
documentInfometrics:web/helpers/date-time.helper.ts (1)
348-359: LGTM! Verify the logic and documentation forgetReadTimeFromWordsCount.The function
getReadTimeFromWordsCountlooks good.Ensure that the logic and the JSDoc comment are correct and consistent.
Run the following script to verify the logic and documentation:
Verification successful
Function Logic and Documentation Verified
The function
getReadTimeFromWordsCountinweb/helpers/date-time.helper.tsis correctly implemented and documented. The logic aligns with the JSDoc description, accurately calculating reading time based on a reading speed of 200 words per minute. No issues found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the logic and documentation for `getReadTimeFromWordsCount`. # Test: Search for the function usage and documentation. Expect: The function should be correctly implemented and documented. rg --type ts -A 5 $'getReadTimeFromWordsCount' -- 'src/helpers/date-time.helper.ts'Length of output: 152
Script:
#!/bin/bash # Search for the function `getReadTimeFromWordsCount` in the codebase to locate its definition. ast-grep --lang typescript --pattern 'export const getReadTimeFromWordsCount = ($_): $_ => $_;'Length of output: 455
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/header/info-popover.tsx (1 hunks)
Additional comments not posted (5)
web/core/components/pages/editor/header/info-popover.tsx (5)
3-7: LGTM!The imports are correctly added and necessary for the new functionality.
The code changes are approved.
10-11: LGTM!The type definition change aligns with the new functionality.
The code changes are approved.
14-14: LGTM!The component now accepts
editorRefinstead ofpage, aligning with the new functionality.The code changes are approved.
31-52: Improve readability of document information cards.The readability of the document information cards can be improved by destructuring the
documentInfoCardsarray and using more descriptive variable names.Apply this diff to improve readability:
const documentInfoCards = [ { key: "words-count", title: "Words", info: editorRef?.documentInfo.words, }, { key: "characters-count", title: "Characters", info: editorRef?.documentInfo.characters, }, { key: "paragraphs-count", title: "Paragraphs", info: editorRef?.documentInfo.paragraphs, }, { key: "read-time", title: "Read time", info: secondsToReadableTime(), }, ]; return ( <div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}> <button type="button" ref={setReferenceElement} className="block"> <Info className="size-3.5" /> </button> {isPopoverOpen && ( <div className="z-10 w-64 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg grid grid-cols-2 gap-1.5" ref={setPopperElement} style={infoPopoverStyles.popper} {...infoPopoverAttributes.popper} > {documentInfoCards.map(({ key, title, info }) => ( <div key={key} className="p-2 bg-custom-background-90 rounded"> <h6 className="text-base font-semibold">{info}</h6> <p className="mt-1.5 text-sm text-custom-text-300">{title}</p> </div> ))} </div> )} </div> );Likely invalid or redundant comment.
25-29: Improve thesecondsToReadableTimefunction logic.The
secondsToReadableTimefunction can be simplified to handle edge cases more gracefully.Apply this diff to improve the function:
const secondsToReadableTime = () => { const wordsCount = editorRef?.documentInfo.words || 0; const readTimeInSeconds = Number(getReadTimeFromWordsCount(wordsCount).toFixed(0)); return readTimeInSeconds < 60 ? `${readTimeInSeconds}s` : `${Math.ceil(readTimeInSeconds / 60)}m`; };Likely invalid or redundant comment.
What's new?
Added two new info panels-
Media:
Screen.Recording.2024-08-22.at.16.12.31.mov
Plane issue: WEB-2050
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Style