编辑实体的修饰文字

Question

我们有一个Figure装饰器，允许我们插入一个链接，您可以将鼠标悬停在该链接上以获得图像的预览。我们使用模态形式将此图像以及一些元数据（标题等）插入。这一切都很好。但是，我们还希望能够单击链接并弹出模式进行编辑。

Entity.replaceData()对于更新元数据非常有用，剩下的唯一问题就是来自模式的修饰文字。看来，实体对其装饰的内容一无所知。

我们如何查找和替换文本？有没有解决的办法？

（我尝试将“草稿”中的内容设置为任意单个字符，并让装饰器显示内容/标题（这很好），但是，当尝试删除图形时，“草稿”似乎跳过了内容并删除了之前的内容我猜这是由于文字长度不同所致。我认为将其设置为“ IMMUTABLE”可以解决此问题，但这无济于事。）

编辑：

这是我的装饰工：

function LinkedImageDecorator(props: Props) {
  Entity.mergeData(props.entityKey, { caption: "hello world" });

  const entity = Entity.get(props.entityKey);
  const data = entity.getData();
  return <LinkedImage data={data} text={props.children} offsetKey={props.offsetKey} />
}

function findLinkedImageEntities(contentBlock: ContentBlock, callback: EntityRangeCallback) {
  contentBlock.findEntityRanges((character) => {
    const entityKey = character.getEntity();
    return (
      entityKey != null &&
      Entity.get(entityKey).getType() === ENTITY_TYPE.IMAGE
    );
  }, callback);
}

export default {
  strategy: findLinkedImageEntities,
  component: LinkedImageDecorator,
  editable: false,
};

如您所见，我正在测试Entity.mergeData哪个最终将是我LinkedImage组件的回调（它将打开一个模式onClick。）因此，元数据很容易更新，我只需要能够更新传递的修饰文字即可。作为props.children。

Answer 1

所以，我最后的帮助下解决了这个江YD和tobiasandersen。开始...

首先，我向装饰器注入对编辑器的引用（跟踪EditorState）：

const decorators = new CompositeDecorator([{
  strategy: findLinkedImageEntities,
  component: LinkedImageDecorator,
  props: { editor: this }
}];

this.editorState = EditorState.set(this.editorState, { decorator });

从那里，我可以在我的LinkedImageDecorator：

const { decoratedText, children, offsetKey, entityKey, editor } = this.props;

// This looks messy but seems to work fine
const { startOffset, blockKey } = children['0'].props;

const selectionState = SelectionState.createEmpty(blockKey).merge({
  anchorOffset: startOffset,
  focusOffset: startOffset + decoratedText.length,
});

const editorState = editor.getEditorState();

let newState = Modifier.replaceText(
  editorState.getCurrentContent(),
  selectionState,
  "my new text",
  null,
  entityKey,
);

editor.editorState = EditorState.push(editorState, newState, 'insert-fragment');

不知道这是否是最干净的方法，但似乎效果很好！