[WIKI-484] chore: update editor packages #7265
Conversation
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
WalkthroughThis update refactors type annotations and prop handling for several custom node views in the editor, removes unnecessary TypeScript error suppression comments, updates TipTap and related package versions, and adjusts package resolutions. It also modifies the slash command activation logic and improves type safety and code clarity in various extensions and plugins. Changes
Sequence Diagram(s)sequenceDiagram
participant Editor
participant NodeViewRenderer
participant CustomNodeView
Editor->>NodeViewRenderer: addNodeView(props)
NodeViewRenderer->>CustomNodeView: Render with props (node explicitly typed)
CustomNodeView-->>NodeViewRenderer: Rendered output
NodeViewRenderer-->>Editor: Node view attached
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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: 0
🧹 Nitpick comments (6)
packages/editor/src/core/extensions/mentions/extension.tsx (1)
23-25: Type safety improvement with potential performance consideration.The inline function approach correctly addresses type safety by explicitly casting the
nodeprop toMentionNodeViewProps["node"]. However, consider the performance impact of creating a new function component on every render.For better performance, consider extracting this to a separate component:
+const MentionNodeViewWrapper = (props: any) => ( + <MentionNodeView {...props} node={props.node as MentionNodeViewProps["node"]} /> +); addNodeView() { - return ReactNodeViewRenderer((props) => ( - <MentionNodeView {...props} node={props.node as MentionNodeViewProps["node"]} /> - )); + return ReactNodeViewRenderer(MentionNodeViewWrapper); },packages/editor/src/core/extensions/image/extension.tsx (1)
50-52: Consistent implementation with performance consideration.This follows the same pattern as other extensions, which is good for consistency. The explicit type casting for the
nodeprop improves type safety. However, the same performance consideration about inline function creation applies here as well.packages/editor/src/core/extensions/callout/extension.tsx (1)
66-68: Consistent type-safe implementation.This follows the same pattern as other extensions, ensuring consistency across the codebase. The explicit node prop casting improves type safety. The same performance consideration about inline function creation applies here.
packages/editor/src/core/extensions/callout/read-only-extension.tsx (1)
12-14: Consistent implementation across extensions.This follows the same type-safe pattern as other extensions, which is excellent for codebase consistency. The explicit node prop casting addresses type compatibility issues. The same performance consideration about inline function creation applies here as well.
packages/editor/src/core/extensions/mentions/mention-node-view.tsx (2)
7-11: Preferinterface … extendsover property-override intersection for clarityDeclaring
MentionNodeViewPropsas an intersection that re-defines the already-presentnodekey works, but using aninterface … extends NodeViewPropsis clearer and avoids the double declaration ofnode:-export type MentionNodeViewProps = NodeViewProps & { - node: NodeViewProps["node"] & { - attrs: TMentionComponentAttributes; - }; -}; +export interface MentionNodeViewProps extends NodeViewProps { + node: NodeViewProps["node"] & { + attrs: TMentionComponentAttributes; + }; +}This conveys “all NodeViewProps plus a refined
node” more explicitly and avoids the mental overhead of understanding property intersection semantics.
13-18: Minor:React.FCadds implicitchildren; consider plain arrow function
React.FCintroduces an implicitchildrenprop that this node view will never use. A plain arrow function typed withMentionNodeViewPropsavoids the extra prop and tightens types slightly:-export const MentionNodeView: React.FC<MentionNodeViewProps> = (props) => { +export const MentionNodeView = (props: MentionNodeViewProps) => {Not critical, but helpful for stricter type surfaces across node views.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (16)
live/package.json(1 hunks)package.json(1 hunks)packages/editor/package.json(1 hunks)packages/editor/src/core/extensions/callout/block.tsx(1 hunks)packages/editor/src/core/extensions/callout/extension.tsx(2 hunks)packages/editor/src/core/extensions/callout/read-only-extension.tsx(2 hunks)packages/editor/src/core/extensions/custom-image/extension.tsx(2 hunks)packages/editor/src/core/extensions/extensions.ts(0 hunks)packages/editor/src/core/extensions/image/extension.tsx(2 hunks)packages/editor/src/core/extensions/mentions/extension.tsx(2 hunks)packages/editor/src/core/extensions/mentions/mention-node-view.tsx(1 hunks)packages/editor/src/core/extensions/read-only-extensions.ts(0 hunks)packages/editor/src/core/extensions/slash-commands/root.tsx(0 hunks)packages/editor/src/core/helpers/editor-commands.ts(0 hunks)packages/editor/src/core/helpers/yjs-utils.ts(0 hunks)packages/editor/src/core/plugins/drag-handle.ts(3 hunks)
💤 Files with no reviewable changes (5)
- packages/editor/src/core/extensions/read-only-extensions.ts
- packages/editor/src/core/helpers/yjs-utils.ts
- packages/editor/src/core/extensions/slash-commands/root.tsx
- packages/editor/src/core/extensions/extensions.ts
- packages/editor/src/core/helpers/editor-commands.ts
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (javascript)
- GitHub Check: Analyze (python)
🔇 Additional comments (14)
packages/editor/src/core/plugins/drag-handle.ts (3)
68-70: Improved null safety for scroll parent handling.The addition of the null check and updated type signature enhances robustness by preventing potential runtime errors when a null node is passed to the function.
142-142: Enhanced type safety with explicit type annotation.Adding the explicit type annotation improves code clarity and TypeScript's ability to catch potential type-related issues.
179-204: Better code organization by moving event handlers.Moving the event handler declarations after the
dragHandleElementdeclaration improves code readability and ensures proper variable access order.package.json (1)
37-37: Verify prosemirror-view version compatibility and security.The addition of the prosemirror-view resolution to version 1.40.0 should be verified for compatibility with the updated TipTap packages and checked for any known security vulnerabilities.
#!/bin/bash # Description: Check prosemirror-view version 1.40.0 for security advisories and compatibility # Check for security advisories gh api graphql -f query=' { securityVulnerabilities(first: 5, ecosystem: NPM, package: "prosemirror-view") { nodes { advisory { summary severity publishedAt } vulnerableVersionRange firstPatchedVersion { identifier } } } }' # Check latest version curl -s https://registry.npmjs.org/prosemirror-view/latest | jq '.version'live/package.json (1)
26-27: Good upgrade to latest TipTap packages with flexible versioning.The update from fixed versions to caret ranges (^2.22.3) allows automatic minor and patch updates while maintaining compatibility. This ensures the live editor benefits from bug fixes and improvements in TipTap.
packages/editor/package.json (1)
42-59: ```bash
#!/bin/bashVerify that v2.22.x versions are published on npm for core and react packages
echo "📦 @tiptap/core versions (v2.22.x):"
curl -s https://registry.npmjs.org/@tiptap/core
| jq -r '.versions | keys[]'
| grep '^2.22'
| sort -Vecho -e "\n📦 @tiptap/react versions (v2.22.x):"
curl -s https://registry.npmjs.org/@tiptap/react
| jq -r '.versions | keys[]'
| grep '^2.22'
| sort -V</details> <details> <summary>packages/editor/src/core/extensions/custom-image/extension.tsx (2)</summary> `11-11`: **Enhanced type safety with imported prop types.** The addition of `CustomImageNodeViewProps` to the import improves type safety and supports the explicit type casting in the node view renderer. --- `118-120`: **Improved type safety with explicit node prop casting.** The change from direct `ReactNodeViewRenderer(CustomImageNodeView)` to an inline function with explicit type casting ensures proper type safety. This approach is particularly beneficial after the TipTap version upgrade where type inference may have changed. </details> <details> <summary>packages/editor/src/core/extensions/mentions/extension.tsx (1)</summary> `7-7`: **Good addition of explicit prop types.** The import of `MentionNodeViewProps` improves type safety and makes the component interface more explicit. </details> <details> <summary>packages/editor/src/core/extensions/image/extension.tsx (1)</summary> `7-7`: **Consistent type safety improvement.** The addition of `CustomImageNodeViewProps` import maintains consistency with the type safety pattern applied across all node view extensions. </details> <details> <summary>packages/editor/src/core/extensions/callout/block.tsx (2)</summary> `13-18`: **Excellent type definition improvement.** Renaming from the generic `Props` to `CustomCalloutNodeViewProps` and exporting it provides better clarity and enables reuse in other files. This properly supports the type safety improvements in the extension files. --- `20-20`: **Good explicit component typing.** The explicit `React.FC<CustomCalloutNodeViewProps>` typing improves code clarity and ensures proper TypeScript checking. </details> <details> <summary>packages/editor/src/core/extensions/callout/extension.tsx (1)</summary> `3-3`: **Consistent type import pattern.** The import of `CustomCalloutNodeViewProps` maintains the consistent pattern applied across all node view extensions. </details> <details> <summary>packages/editor/src/core/extensions/callout/read-only-extension.tsx (1)</summary> `3-3`: **Consistent type safety pattern.** The import of `CustomCalloutNodeViewProps` maintains consistency with the type safety improvements applied across all node view extensions. </details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Description
This PR updates all the Tiptap package versions to latest and remove all unused error directives.
Other improvements-
Type of Change
Summary by CodeRabbit