How to load a simple markdown with headings

[vnugent]

I'm following the markdown documentation (https://lexical.dev/docs/packages/lexical-markdown) to load a simple .md document.
Basic marks such as bold, italic are loaded fine, but # Heading failed. Any ideas? Many thanks in advance.

Error: Create node: Attempted to create node HeadingNode that was not configured to be used on the editor.
    at errorOnTypeKlassMismatch (/Users/vnguyen/git/openbeta/open-tacos/node_modules/lexical/Lexical.dev.js:7407:13)
    at new LexicalNode (/Users/vnguyen/git/openbeta/open-tacos/node_modules/lexical/Lexical.dev.js:6697:9)
    at new ElementNode (/Users/vnguyen/git/openbeta/open-tacos/node_modules/lexical/Lexical.dev.js:7479:5)
    at new HeadingNode (/Users/vnguyen/git/openbeta/open-tacos/node_modules/@lexical/rich-text/LexicalRichText.dev.js:165:5)
    at Object.$createHeadingNode (/Users/vnguyen/git/openbeta/open-tacos/node_modules/@lexical/rich-text/LexicalRichText.dev.js:320:40)error - Error: Create node: Attempted to create node HeadingNode that was not configured to be used on the editor.

[vnugent]

Found the solution. It's not obvious but you'll need to explicitly tell the editor how to handle all the default "nodes".

import { HeadingNode, QuoteNode } from '@lexical/rich-text'
import { LinkNode } from '@lexical/link'
import { ListItemNode, ListNode } from '@lexical/list'
import { MarkNode } from '@lexical/mark'

import ExampleTheme from './themes/ExampleTheme'

const editorConfig = (initialValue: string): InitialConfigType => {
  return {
    editorState: () => $convertFromMarkdownString(initialValue, TRANSFORMERS),
    namespace: 'editor',
    theme: ExampleTheme,
    onError (error) {
      throw error
    },
    nodes: [MarkNode, HeadingNode, QuoteNode, LinkNode, ListNode, ListItemNode]
  }
}

[yes-oo]

Do you have any idea how to achieve the same functionality, but instead of triggering it on load, trigger it on paste? For example, if one of my users copies raw markdown text from another editor and pastes it into the Lexical editor, it should be automatically formatted and displayed correctly, as if it were in preview mode.

i will be very grateful if you can help me <3

[yes-oo]

Okay, I just figured out how to solve my problem. Here’s my solution in case it helps someone else (this is for React JS):

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown';
import { PASTE_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
import { useEffect } from 'react';

const PasteMarkdownPlugin = () => {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    // Register the paste command
    const removeListener = editor.registerCommand(
      PASTE_COMMAND,
      (event) => {
        const clipboardData = event.clipboardData;
        const text = clipboardData.getData('text/plain');

        if (text) {
          editor.update(() => {
            $convertFromMarkdownString(text, TRANSFORMERS);
          });
          event.preventDefault();
          return true;
        }
        return false;
      },
      COMMAND_PRIORITY_NORMAL,
    );

    // Clean up the listener when the component unmounts
    return () => {
      removeListener();
    };
  }, [editor]);

  return null;
};

export default PasteMarkdownPlugin;