javascript - 如何在 DraftJS 的 Anchor 标签中显示子组件？

Question

在 CodeSandbox 中更新了一个工作示例

我们正在使用 DraftJS 插入 <a>在编辑器中围绕一些选定的文本。

原始状态

目前它的工作原理是将 anchor 标记包裹在突出显示的文本周围。

例如，对于这段文字: Foo bar foo .
如果用户突出显示“bar”，我们的编辑器将呈现 <a href='http://...'>bar</a>

改变内容状态的当前代码:

this.applyLink = () => {
  const { editorState } = this.state;
  const selectionState = editorState.getSelection();

  const entity = Entity.create("LINK", "MUTABLE", {
    url: "http://foo.com"
  });

  const update = RichUtils.toggleLink(editorState, selectionState, entity);

  this.onChange(update);
};

正在呈现的实际链接:

const Link = props => {
  const { url } = props.contentState.getEntity(props.entityKey).getData();
  return (
    <a href={url} style={styles.link}>
      {props.children}
    </a>
  );
};

创建链接的自定义装饰器:

function findLinkEntities(contentBlock: ContentBlock, callback, contentState) {
  contentBlock.findEntityRanges(character => {
    const entityKey = character.getEntity();

    return (
      entityKey !== null &&
      contentState.getEntity(entityKey).getType() === "LINK"
    );
  }, callback);
}

期望的状态

我们的产品负责人要求链接保留任何其他可以选择的元素。

例如，对于带有自定义实体的文本: Foo bar <custom-entity .../> foo .

如果用户突出显示“bar”和自定义实体，我们希望在它们周围呈现 anchor 标记。 IE。 <a href='http://...'>bar <custom-entity .../> </a> .

但是，我们的代码正在剥离任何非文本的内容——<custom-entity>消失。

使用 CodeSandbox 更新

我创建了一个在 CodeSandbox 中重现此内容的示例，available here

CodeSandbox 页面详细介绍了重现的步骤。简而言之，如果您添加文本和自定义实体(使用按钮)，然后像这样突出显示内容:

然后在该突出显示仍处于事件状态的情况下，单击“应用链接”，编辑器呈现:

^ 请注意，自定义实体在应用链接后消失了。

谁能帮忙弄清楚如何将该自定义实体保留在 anchor 标记内？

Answer 1

Draft.js 不支持 nested entities , 但有一些选项可以 nest decorators如果您可以改用它们。

特别是看这个jsfiddle .