Node ID

Automatically assign unique IDs to nodes in the document.

Features

  • Plugin that automatically assigns and manages unique IDs for nodes in the editor.
  • Configurable ID generation and storage
  • Handles node operations (insert, split) with ID preservation
  • Optional ID reuse for undo/redo and copy/paste operations

Installation

npm install @udecode/plate-node-id

Usage

import { NodeIdPlugin } from '@udecode/plate-node-id';
const plugins = [
  // ...otherPlugins,
  NodeIdPlugin.configure({
    options: {
      idKey: 'id',
      filterInline: true,
      filterText: true,
      idCreator: () => nanoid(10),
    },
  }),
];

Plugins

NodeIdPlugin

Plugin that automatically assigns and manages unique IDs for nodes in the editor.

Options

Collapse all

    Disable using existing IDs when inserting nodes.

    • When false: Keeps existing IDs if they don't exist in the document
    • When true: Always generates new IDs
    • Default: false

    Filter inline Element nodes from receiving IDs.

    • Default: true

    Filter Text nodes from receiving IDs.

    • Default: true

    Function to generate unique IDs.

    • Default: () => nanoid(10)

    Property key used to store the ID on nodes.

    • Default: 'id'

    Whether to normalize all nodes in the initial value.

    • When false: Only checks first and last nodes
    • When true: Normalizes all nodes
    • Default: false

    Reuse IDs on undo/redo and copy/paste operations.

    • When true: Keeps IDs if they don't exist in document
    • When false: Always generates new IDs (safer across documents)
    • Default: false

    List of node types that should receive IDs.

    List of node types that should not receive IDs.

    Custom filter function for nodes that should receive IDs.

    • Default: () => true

Behavior

The plugin handles several scenarios:

  1. Node Insertion:
<editor>
  <hp id="10">test</hp>
</editor>
 
// Insert node with existing ID (e.g. copy/paste)
editor.insertNode(<hp id="10">inserted</hp>);
// Results in:
<editor>
  <hp id="10">test</hp>
  <hp id="1">inserted</hp>  {/* Gets new ID */}
</editor>
 
// Insert multiple nodes
editor.insertNodes([
  <hp>inserted</hp>,
  <hp>test</hp>,
]);
// Results in:
<editor>
  <hp id="10">test</hp>
  <hp id="1">inserted</hp>  
  <hp id="2">test</hp>      
</editor>
  1. Node Splitting:
// Before split
<hp id="1">te|st</hp>
// After split:
<hp id="1">te</hp>
<hp id="2">st</hp>
  1. Filtering:
// With filterText=false
<hp id="1">
  <htext id="2">text</htext>
</hp>
 
// With allow=['p'] exclude=['blockquote']
<hp id="1">text</hp>
<hblockquote>quote</hblockquote>
  1. Undo/Redo:
// With reuseId=true
editor.insertNode(<hp id="1">text</hp>);
editor.undo();
editor.redo();
// Node keeps id="1" if not in use
 
// With reuseId=false
editor.insertNode(<hp id="1">text</hp>);
editor.undo();
editor.redo();
// Node gets new id="2"
Multi SelectReset Node