Set unique id for each node

[alirezahmz]

I am stuck in using your package, please help me
How can I set a unique ID for each of the nodes in Milkdown ? The link below is an example of this work in Tiptop
https://tiptap.dev/api/extensions/unique-id

[alirezahmz]

@Saul-Mirone
I don't want to pass and receive value as HTML, I want to pass and receive Json as follows:
please help me :(

{
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        attrs: {
          id: "I'm unique id"
        },
        content: [
          {
            type: 'text',
            text: "it's for test"
          }
        ]
      }
    ]
  };

[Saul-Mirone]

@Saul-Mirone I don't want to pass and receive value as HTML, I want to pass and receive Json as follows: please help me :(

{
    type: 'doc',
    content: [
      {
        type: 'paragraph',
        attrs: {
          id: "I'm unique id"
        },
        content: [
          {
            type: 'text',
            text: "it's for test"
          }
        ]
      }
    ]
  };

The document has introduced how to do it.

[Saul-Mirone]

Currently there's no convenient way to do it. The only choice is to extend nodes one by one and add attribute for them. But I do have a plan about it.

[alirezahmz]

Thanks @Saul-Mirone
I can't find it in the documentation?! How can I do this? Please put an example in codesandbox.

[Saul-Mirone]

import { defaultValueCtx, Editor } from "@milkdown/core";
import { nord } from "@milkdown/theme-nord";
import { commonmark, heading } from "@milkdown/preset-commonmark";
import { emoji } from "@milkdown/plugin-emoji";
import { v4 } from "uuid";

const headingWithId = heading.extend((original) => {
  return {
    ...original,
    schema: (ctx) => {
      const oschema = original.schema(ctx);
      return {
        ...oschema,
        attrs: {
          ...oschema.attrs,
          uniqueId: {
            default: ""
          }
        },
        toDOM: (node) => {
          const domS = oschema.toDOM!(node);
          (domS as any)[1]["data-uid"] = v4();
          console.log(domS);
          return domS;
        },
        parseDOM: [1, 2, 3, 4, 5, 6].map((x) => ({
          tag: `h${x}`,
          getAttrs: (n) => {
            const node = n as HTMLElement;
            return { level: x, id: node.id, uniqueId: node.dataset.uid };
          }
        }))
      };
    }
  };
});

Editor.make()
  .config((ctx) => {
    ctx.set(defaultValueCtx, "# Milkdown :heartpulse: Vanilla");
  })
  .use(nord)
  .use(commonmark.replace(heading, headingWithId()))
  .use(emoji)
  .create();

[alirezahmz]

many thanks.