plane icon indicating copy to clipboard operation
plane copied to clipboard
Published 12 hours ago • verified publisher icon makeplane

[WIKI-575] fix: add unique keys to add nodeview wrappers

Open Palanikannan1437 opened this issue 4 weeks ago • 2 comments

Description

Fixes issues where multiple node views of the same type rendered incorrectly by introducing stable, unique keys for all node-view wrappers. This ensures proper React reconciliation and prevents duplicated or misplaced updates.

Type of Change

  • [x] Bug fix
  • [ ] Feature
  • [x] Improvement
  • [ ] Code refactoring
  • [ ] Performance improvements
  • [ ] Documentation update

Screenshots and Media (if applicable)

Add if needed.

Test Scenarios

  • Verified consistent rendering when multiple node views of the same type are present.
  • Tested edits, deletes, and moves across all affected node types.

References

Add related issues if any.

[!NOTE] Add stable React keys to editor node views and extend the unique-id system (including inline mentions), with type updates and mention handling tweaks.

  • Editor node views:
    • Add stable key props derived from node.attrs.id for callout, codeBlock, imageComponent, mention, and issue-embed-component wrappers.
  • Unique ID system:
    • Introduce INLINE_NODE_TYPES and include them in unique-id handling.
    • Add TBlockNodeBaseAttributes and extend callout, codeBlock, imageComponent, and work-item-embed attribute types with it.
  • Mentions:
    • Make TMentionSuggestion.id optional; stop generating/passing transient IDs; remove id in user suggestions.
    • Add stable key to mention node-view wrapper.
  • Typing/infra:
    • Refine code-block node-view typing and renderer to pass typed node.

Written by Cursor Bugbot for commit 202336dd9c4a3a49e426bc3d1766f12e1892226e. This will update automatically on new commits. Configure here.

Summary by CodeRabbit

  • New Features

    • Added support for inline node types in the editor.

  • Improvements

    • Enhanced editor stability with improved React component reconciliation for blocks and mentions.
    • Standardized mention identification system for better consistency.
    • Strengthened type safety across code blocks, callouts, images, and embedded items.

✏️ Tip: You can customize this high-level summary in your review settings.

Palanikannan1437 avatar Dec 01 '25 10:12 Palanikannan1437

Linked to Plane Work Item(s)

This comment was auto-generated by Plane

makeplane[bot] avatar Dec 01 '25 10:12 makeplane[bot]

Walkthrough

A systematic refactoring introduces a unified ID management system across the editor by establishing TBlockNodeBaseAttributes as a base type for all block nodes, extending multiple editor extensions (code blocks, callouts, images, work-item embeds) to use this standardized interface, and adding stable React keys to component wrappers. Related changes make mention IDs optional and extend inline node type support.

Changes

Cohort / File(s) Summary
Base Type Definitions
packages/editor/src/core/extensions/unique-id/types.ts, packages/editor/src/core/types/mention.ts		 New TBlockNodeBaseAttributes interface with optional id field; TMentionSuggestion.id changed to optional
Constants & Extension Setup
packages/editor/src/core/constants/extension.ts, packages/editor/src/core/extensions/unique-id/extension.ts		 Added INLINE_NODE_TYPES constant containing mention extension; updated unique-id extension to process inline nodes alongside block nodes
Code Block Extension
packages/editor/src/core/extensions/code/types.ts, packages/editor/src/core/extensions/code/code-block-node-view.tsx, packages/editor/src/core/extensions/code/index.tsx		 New TCodeBlockAttributes type extending base attributes; added typed CodeBlockNodeViewProps; introduced React key to NodeViewWrapper
Callout Extension
packages/editor/src/core/extensions/callout/types.ts, packages/editor/src/core/extensions/callout/block.tsx		 Type signature updated to intersect with TBlockNodeBaseAttributes; added dynamic key attribute to wrapper
Custom Image Extension
packages/editor/src/core/extensions/custom-image/types.ts, packages/editor/src/core/extensions/custom-image/components/node-view.tsx		 Type refactored to extend base attributes and added new source/alignment/status properties; added keyed wrapper for stable identity
Work Item Embed Extension
packages/editor/src/core/extensions/work-item-embed/types.ts, packages/editor/src/core/extensions/work-item-embed/extension.tsx		 New TWorkItemEmbedAttributes type extending base attributes; added type casting and stable key to node view
Mention Extension
packages/editor/src/core/extensions/mentions/mention-node-view.tsx, packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx		 Added unique key to wrapper; removed transactionId generation from mention selection flow
Application Layer
apps/web/core/hooks/editor/use-editor-mention.tsx		 Removed id field from user mention suggestions; now relies on entity_identifier

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas requiring attention:

  • Type system consistency: verify all block/inline nodes properly extend TBlockNodeBaseAttributes and that the id field is correctly propagated
  • React key stability: ensure generated keys (e.g., code-block-${node.attrs.id}, image-block-${node.attrs.id}) will remain stable across renders and correctly identify nodes
  • Mention refactoring: confirm that removing id and relying on entity_identifier doesn't break existing mention workflows or downstream consumers
  • Unique ID extension: validate that adding INLINE_NODE_TYPES to COMBINED_BLOCK_NODE_TYPES doesn't cause unintended side effects for mention nodes

Poem

🐰 With IDs now aligned through every block,
Each node receives its key to unlock,
From callouts to code, the system's tight,
A unified foundation, stable and right!
✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: adding unique keys to nodeview wrappers for proper React reconciliation, which directly addresses the rendering issues fixed in this PR.
Description check ✅ Passed The description covers all required template sections: a clear explanation of the problem and solution, type of change selection, test scenarios, and includes a detailed summary of changes.
✨ Finishing touches
  • [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch fix/node-view-rendering

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot] avatar Dec 01 '25 10:12 coderabbitai[bot]