reactjs - 使用 Lexical 将图像节点导出到降价

我创建了一个新节点:'ImageNode',类似于:https://lexical.dev/docs/concepts/nodes#extending-decoratornode

这是可行的,但我需要导出降价内容,为此,我正在使用 $convertToMarkdownString.

我的问题是在编辑器中插入的图像,没有被导出为降价。我的控制台日志仅显示基本转换。

如何将图像节点导出到 Markdown?我需要创建一个新的降价转换吗?

谢谢!

回答1

(从 https://github.com/facebook/lexical/discussions/2212 复制粘贴)ImagePlugin(就像工具栏一样)只是 Playground 的一部分,因此转换器不会暴露给 NPM。我们希望在未来将 ImagePlugin 作为单独的 @lexical/image 包的一部分,但只有当我们足够通用以适应大多数用例并保证在不久的将来不会出现重大问题时。

现在,您可能想要https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/MarkdownTransformers.ts#L67

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