Feature Request: New Implementation for Unique-ID Pro Plugin

[jan-schweiger]

Description

Hi Tiptap Team,

I’ve been testing the Unique-ID Pro Plugin in my React app in a production environment. Unfortunately, I’ve encountered several issues that make it error-prone and unsuitable for production use:

• [Bug]: Dragging Only A Part Creates Duplicate Unique-ID #5578 (solved)
• [PRO]: UniqueId & List Extensions create duplicate Ids #5778
• The plugin fails to maintain unique IDs for custom block node extensions (e.g., when copying an image, IDs are duplicated).

Additionally, I suspect more issues might arise with extended use in production. It appears there’s no rigorous mechanism to ensure IDs remain unique across all scenarios. As you can imagine, non-unique IDs pose a significant risk in business-critical applications.

My biggest concern, however, is performance. When applied to large documents (e.g., paragraphs), the plugin causes severe browser tab freezes, which makes it impractical for real-world usage.

Given these limitations, I believe the plugin is not yet production-ready. I’d like to raise awareness of these shortcomings and request a reimplementation that prioritizes both stability and performance.

In the meantime, I’ve developed a custom implementation that is significantly more performant on large documents, handles custom block nodes reliably, and maintains stability. I’d be happy to share insights from this experience if it would help improve the plugin.

Custom Implementation:

// CustomUniqueId.ts

import { Extension } from '@tiptap/core'
import { Plugin, PluginKey } from 'prosemirror-state'
import { v4 as uuidv4 } from 'uuid';
import { Node } from '@tiptap/core';

interface Options {
  nodeTypes: string[]
}

const CustomUniqueId = Extension.create<Options>({
  name: 'custom-unique-id',

  addOptions() {
    return {
      nodeTypes: [],
    }
  },

  addProseMirrorPlugins() {
    const { nodeTypes } = this.options;
    return [
      ...(this.parent?.() || []),
      new Plugin({
        appendTransaction: (transactions, oldState, newState) => {
          let tr = newState.tr;
          if (!transactions.some((t=>t.docChanged)))
            return tr;

          const ids = new Set();
          newState.doc.descendants((node, pos) => {
            if (nodeTypes.includes(node.type.name)) {
              const nodeId = node.attrs.id;

              // If the node doesn't have an id or it's a duplicate
              if (!nodeId || ids.has(nodeId)) {
                const newId = uuidv4();
                tr = tr.setNodeMarkup(pos, undefined, {
                  ...node.attrs,
                  id: newId,
                });
                ids.add(newId);
              } else {
                ids.add(nodeId);
              }
            }
          });

          return tr;
        },
      }),
    ];
  },
})

export default CustomUniqueId;

export const addUniqueIdAttribute = (extension: Node): Node => extension.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      id: {
        isRequired: true,
        parseHTML: element => element.getAttribute('data-id'),
        renderHTML: attributes => ({ 'data-id': attributes.id }),
      },
    }
  },
})

Example Use Case:

  useEditor({
      extensions: [
        StarterKit.configure({
          paragraph: false,
          document: false,
          bulletList: false,
          orderedList: false,
          listItem: false,
          heading: false,
          horizontalRule: false,
        }),

        CustomUniqueId.configure({
          nodeTypes: ['paragraph', 'orderedList', 'bulletList', 'listItem', 'taskItem', 'taskList', 'table', 'tableRow', 'tableHeader', 'tableCell', 'image',
        }),

        addUniqueIdAttribute(Paragraph),
        addUniqueIdAttribute(BulletList.configure({
          keepMarks: true,
          keepAttributes: false,
        })),
        addUniqueIdAttribute(OrderedList.configure({
          keepMarks: true,
          keepAttributes: false,
        })),
        addUniqueIdAttribute(ListItem),
        addUniqueIdAttribute(TaskList),
        addUniqueIdAttribute(TaskItem.configure({
          nested: true,
        })),
        addUniqueIdAttribute(Image),
        addUniqueIdAttribute(Table),
        addUniqueIdAttribute(TableRow),
        addUniqueIdAttribute(TableHeader),
        addUniqueIdAttribute(TableCell),
      })

Despite running on every content change, this code is performant and doesn’t cause any lag, even with large documents. Additionally, it is very reliable and consistently ensures unique IDs.

I’d love to hear your thoughts on it!

PS: Thank you for your efforts, I have become a sponsor this week.

Use Case

A more reliable and more performant approach for adding unique-ids to every element of the Tiptap content.

Type

Other