Creating a custom plugin with WYSIWYG behavior.

[jonathangaldino]

Hi everyone ✋

Goal

I've been trying to build custom plugins with WYSIWYG behavior. My goal is to write a plugin that I can embed the youtube iframe into the editor.

That means, when I paste or write a the following text: https://www.youtube.com/watch?v=gA6r7iVzP6M, it will transform it to a react component in the editor, but in the background, this is simply a text.

My attempt

I cloned the editor rep and tried to build my own plugin and render it in laddle. it wasn't changing the text node to a youtube custom node.

Question

What am I missing? Do I need to write a command to insert the youtube node?

Achieve the wanted behavior using lexical directly - without mdx-editor

With Lexical (+react) I was able to achieve the following behavior:

Screen.Recording.2025-07-16.at.15.23.45.mov

After pasting a Youtube link, it renders to a react component. This is exactly the same behavior I am trying to build, buth with mdx-editor.

This is my YoutubePlugin component, that I add to the LexicalComposer:

export function YouTubePlugin() {
  const [editor] = useLexicalComposerContext()

  useEffect(() => {
    return editor.registerNodeTransform(TextNode, (textNode) => {
      const text = textNode.getTextContent()
      const match = text.match(YOUTUBE_URL_REGEX)

      if (match) {
        const videoId = extractYouTubeVideoId(text)
        if (videoId) {
          const youtubeNode = $createYouTubeNode(videoId)
          textNode.replace(youtubeNode)
        }
      }
    })
  }, [editor])

  return null
}

And here is the YoutubeNode:

export class YouTubeNode extends DecoratorNode<ReactNode> {
  __videoId: string
  constructor(videoId: string, key?: string) {
    super(key)
    this.__videoId = videoId
  }

  static getType() {
    return "youtube"
  }

  static clone(node) {
    return new YouTubeNode(node.__videoId, node.__key)
  }

  static importJSON(serializedNode) {
    const { videoId } = serializedNode
    return new YouTubeNode(videoId)
  }

  exportJSON() {
    return {
      type: "youtube",
      videoId: this.__videoId,
      version: 1
    }
  }

  createDOM(_config: EditorConfig) {
    const div = document.createElement("div")
    div.className = "youtube-embed-container"
    div.style.margin = "16px 0"
    return div
  }

  updateDOM() {
    return false
  }

  getVideoId() {
    return this.__videoId
  }

  setVideoId(videoId: string) {
    const writable = this.getWritable()
    writable.__videoId = videoId
  }

  decorate(): ReactNode {
    return <YouTubeEmbed videoId={this.__videoId} />
  }

  isInline() {
    return false
  }

  isKeyboardSelectable() {
    return true
  }
}

export function $createYouTubeNode(id) {
  return new YouTubeNode(id)
}