Adding a custom paragraph text node to the lexical editor

[DJ1TJOO]

For context: this is my first time using Payload CMS and the Lexical editor. Please let me know if I made a mistake in usage or explanation!

What am I trying to accomplish?

In the richtext editor I want to add a new type of paragraph, a styled-paragraph under the text dropdown. Which is when rendered is a

<p class="test-class">{some text nodes}<p>

It is practically identitcal to the Paragraph node except for the class.

Any help that either suggest a better way of accomplishing this or improving what I tried is welcome!

What I have

I have pages collection, where blocks can be added.
And a block called Content. These are similar to the pages and content block from the Website Template

I also have the RichText component from there.

What I tried

Block feature

I first tried to add a (inline) block feature. This worked, but it didn't have the desired functionality. The text was not inline and opened a new dialog. It also doesn't seem to support text markup like bold and italic.

Custom node / feature

What I did next is something I wasn't fully prepared for. I tried to create a custom paragraph node and added it using the server and client feature.

When two Styled pagraphs are added with child text nodes it renders this

styled-paragraph.server.ts

  export const StyledParagraphFeature = createServerFeature({
    key: "styled-paragraph",
    feature: {
      ClientFeature:
        "~/lexical/features/styled-paragraph.client#StyledParagraphFeature",
      i18n: {
        en: {
          label: "Styled Paragraph",
          description: "A paragraph with custom styling",
        },
      },
      nodes: [
        createNode({
          converters: {
            html: {
              converter: ({ node }) => {
                if (node.type === "styled-paragraph") {
                  return '<p class="test-class"></p>';
                }
                return "";
              },
              nodeTypes: [StyledParagraphNode.getType()],
            },
          },
          node: StyledParagraphNode,
        }),
      ],
    },
  });
  

styled-paragraph.client.ts

export const StyledParagraphFeature = createClientFeature({
    nodes: [StyledParagraphNode],
    plugins: [StyledParagraphPlugin],
toolbarFixed: {
  groups: [
    toolbarTextDropdownGroupWithItems([
      {
        key: "styled-paragraph",
        label: "Styled Paragraph",
        onSelect: ({ editor }: { editor: LexicalEditor }) => {
          editor.dispatchCommand(INSERT_STYLED_PARAGRAPH_COMMAND, undefined);
        },
      },
    ]),
  ],
},

});

StyledParagraphPlugin.tsx

export const INSERT_STYLED_PARAGRAPH_COMMAND = createCommand(
    "INSERT_STYLED_PARAGRAPH_COMMAND",
  );
export const StyledParagraphPlugin = {

Component: () => {

const [editor] = useLexicalComposerContext();
  useEffect(() => {
    return editor.registerCommand(
      INSERT_STYLED_PARAGRAPH_COMMAND,
      () => {
        const selection = $getSelection();

        if (!$isRangeSelection(selection)) {
          return false;
        }
        const newStyledParagraphNode = $createStyledParagraphNode();
        selection.insertNodes([newStyledParagraphNode]);
        return true;
      },
      COMMAND_PRIORITY_EDITOR,
    );
  }, [editor]);

  return null;
},
position: "normal" as const,

};

StyledParagraphNode.ts

    export type SerializedStyledParagraphNode = SerializedParagraphNode & {
    type: "styled-paragraph";
    version: 1;
    };

    export class StyledParagraphNode extends ParagraphNode {
    static getType(): string {
        return "styled-paragraph";
    }

    static clone(node: StyledParagraphNode): StyledParagraphNode {
        return new StyledParagraphNode(node.__key);
    }

    createDOM(config: EditorConfig): HTMLElement {
        const element = super.createDOM(config);
        element.classList.add("test-class");
        return element;
    }

    updateDOM(
        _prevNode: unknown,
        _dom: HTMLElement,
        _config: EditorConfig,
    ): boolean {
        return false;
    }

    static importJSON(
        serializedNode: SerializedStyledParagraphNode,
    ): StyledParagraphNode {
        return $createStyledParagraphNode().updateFromJSON(serializedNode);
    }

    exportJSON(): SerializedStyledParagraphNode {
        return {
        ...super.exportJSON(),
        type: "styled-paragraph",
        version: 1,
        };
    }

    static importDOM(): DOMConversionMap | null {
        return {
        p: (node: Node) => {
            const element = node as HTMLElement;
            if (element.classList.contains("test-class")) {
            return {
                conversion: () => {
                return {
                    node: $createStyledParagraphNode(),
                };
                },
                priority: 1,
            };
            }
            return null;
        },
        };
    }
    }

    export function $createStyledParagraphNode(): StyledParagraphNode {
    return $applyNodeReplacement(new StyledParagraphNode());
    }

    export function $isStyledParagraphNode(
    node: LexicalNode | null | undefined,
    ): node is StyledParagraphNode {
    return node instanceof StyledParagraphNode;
    }

payload.config.ts

    export default buildConfig({
        ...
        editor: lexicalEditor({
            features: ({ defaultFeatures, rootFeatures }) => [
            ...defaultFeatures,
            ...rootFeatures,
            StyledParagraphFeature(),
            ],
        }),
        ...
    });