Export image node to markdown

[erbsutil]

Hi! 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!

[zurfyx]

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',
};

[erbsutil]

Thank you so much!

[Kseniia-Koshkina]

In my case, it happened so that the applied Link transformer overwrote the Image transformer, so you should place them in a specific order like [Image transformer, ...TRANSFORMERS], since they are applied sequentially.