Editing an entity's decorated text

Question

We have a Figure decorator which allows us to insert a link which you can hover over to get a preview of an image. We insert this image along with some metadata (caption, etc.) using a modal form. This all works great. However we also want the ability to click the link and pop up the modal to edit it.

Entity.replaceData() works great for updating the metadata, the only problem that remains is the decorated text which comes from the modal too. It appears the Entity knows little to nothing about the content it's decorating.

How can we find and replace the text? Is there a way around this?

(I've tried setting the content in Draft to an arbitrary single character and making the decorator show the content/title (which would be fine), however when trying to delete the figure, Draft seems to jump over the content and delete something before it. I guess it's due to different text lengths. I thought setting it as 'IMMUTABLE' would solve this but that didn't help.)

EDIT:

Here's my decorator:

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

As you can see, I'm testing out Entity.mergeData which will eventually be the callback of my LinkedImage component (which would open a modal onClick.) So the metadata is easy to update, I just need to be able to update the decorated text which is passed in as props.children.

Answer 1

So I finally solved this with the help of Jiang YD and tobiasandersen. Here goes...

First I inject my decorator with a reference to my editor (which keeps track of EditorState):

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

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

From there I can do this in my 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');

Not sure if this is the cleanest way of doing this but it seems to work well!