How to generate automatic IDs for headings

[rusign]

Hey guys!

I'm trying to figure out how to generate automatic IDs for Heading in order to do Anchor links.
I already did the function to create a slugify version from the Heading node children.
I'm trying to find a way to do it at the plugin level, because the component renders can be overrides and I don't want to have to re-implement it on each overrides.

Here is an example of an override

  [ELEMENT_H2]: ({ attributes, children, element }) => {
          return (
            <h2 className={classes.h2style} {...attributes} {...element}>
              {children}
            </h2>
          )
        }

So one way for example will be to add a the generated id in the attributes as it get deconstruct in the html heading tag.
Until know I was trying in the plugin to find a way to get the node children, slugify it and put the slug in the attributes but couldn't figure out yet

Any advice is appreciated!

Thank you!

[zbeyens]

What about the provided createNodeIdPlugin?

[linonetwo]

I learnt this from plate's code

export const getIdFactory = (tiddlerTitle: string): (() => string) => {
  let id = 1;
  return () => `${tiddlerTitle}-${id++}`;
};


  const idCreator = useMemo(() => {
    return getIdFactory(props.currentTiddler);
  }, [props.currentTiddler]);


export function deserialize(input: string, options?: { idCreator?: () => string }): TNode[] {
  return wikiAstToSlateAst(wikiAstFromWikiText(input), options);
}


export function wikiAstToSlateAst(node: IParseTreeNode | IParseTreeNode[], options?: { idCreator?: () => string }): TNode[] {
  return convertNodes({ ...initialContext, ...options }, Array.isArray(node) ? node : [node]);
}


  const withId = (nodeToAddId: TNode): TNode => (id === undefined ? nodeToAddId : { ...nodeToAddId, id });
  if (node.type in context.builders) {
    const builder = context.builders[node.type as keyof IContext['builders']];
    if (typeof builder === 'function') {
      // basic elements
      const builtSlateNodeOrNodes = builder(context, node as never);
      return Array.isArray(builtSlateNodeOrNodes)
        ? builtSlateNodeOrNodes.map((child) => withId({ ...getWikiASTAdditionalProperties(node), ...child }))
        : ([withId({ ...getWikiASTAdditionalProperties(node), ...builtSlateNodeOrNodes })] as TNode[]);
    }
  } else {
    // widget
    // I guess this rule is enough for judge the current node is a widget? see `test/constants/wikiAst/widget.ts` for example.
    if (typeof node.type === 'string' && 'tag' in node && typeof node.tag === 'string') {
      const widgetNode = withId({ ...getWikiASTAdditionalProperties, ...context.builders.widget(context, node as ICustomParseTreeNode) } as TNode);
      return [widgetNode];
    }
  }

[rusign]

Thank you for your help,
I checked the createNodeIdPlugin but it was fitting my needs,
I found another way to do what I wanted to do, on my Headings Plugins I'm overriding the props to implement the generated ID inside the element
example :

export const createH2Plugin = createPluginFactory<HotkeyPlugin>({
  key: RichTextKey.ELEMENT_H2,
  isElement: true,
  handlers: {
    onKeyDown: onKeyDownToggleElement,
  },
  options: {
    hotkey: ['mod+opt+2', 'mod+shift+2'],
  },
  deserializeHtml: {
    rules: [
      {
        validNodeName: 'H2',
      },
    ],
  },
  props: (props) => {
    return {
      ...props,
      element: {
        ...props.element,
        id: generateIdFromNodeChildren(props.element?.children),
      },
    };
  },
});