Export image node to markdown with Lexical

Question

I create a new node: 'ImageNode', similar to this: https://lexical.dev/docs/concepts/nodes#extending-decoratornode

This is working, but I need to export markdown content, for this, I'm using $convertToMarkdownString.

My problem is images inserted in the editor, aren't being exported as markdown. My console log show just basic transforms.

How can I export the image node to markdown? I need to create a new transform to markdown?

Thanks!

score 2 · Answer 1 · answered May 19 '22 at 07:55

(Copy-pasting from discussions) ImagePlugin (just like the toolbar) is part of the playground only, so the transformer is not exposed to NPM. We expect to make ImagePlugin as part an individual @lexical/image package in the future but only once we it's generic enough to cater most use cases and guarantee no major breaking cases in the immediate future.

For now, you may want to copy-paste this bit from the playground:

export const IMAGE: TextMatchTransformer = {
  export: (node, exportChildren, exportFormat) => {
    if (!$isImageNode(node)) {
      return null;
    }

    return `![${node.getAltText()}](${node.getSrc()})`;
  },
  importRegExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))/,
  regExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))$/,
  replace: (textNode, match) => {
    const [, altText, src] = match;
    const imageNode = $createImageNode(src, altText, 800);
    textNode.replace(imageNode);
  },
  trigger: ')',
  type: 'text-match',
};

Export image node to markdown with Lexical

1 Answers1