Make inserted inserted images subsequently editable

[johncarter-]

I want to edit an image that has already been inserted into the editor.

It looks like we need to make a custom node view. There is an existing custom node view being used in Details.js but I couldn't get a basic alert() onclick in Image.js.

Specifically these lines from Details.js:

  addNodeView() {
    return ({ editor, getPos, node, HTMLAttributes }) => {
      const dom = document.createElement("div");
      const content = document.createElement("div");

      const attributes = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
        "data-type": this.name,
      });
      Object.entries(attributes).forEach(([key, value]) => dom.setAttribute(key, value));

      return {
        dom,
        contentDOM: dom,
        ignoreMutation(mutation) {
          if (mutation.type === "selection") {
            return false;
          }
          return !dom.contains(mutation.target) || dom === mutation.target;
        },
        update: (updatedNode) => {
          if (updatedNode.type !== this.type) {
            return false;
          }
          return true;
        },
      };
    };
  },

Also for future me, there was this blog post, but this is a React context so not sure of its relevance.

[awcodes]

Out of curiosity, what would you be updating by being able to reopen curator from the image?

[johncarter-]

Initially the alt/caption but potentially this would open the door to other possibilities such as focal point etc.

[awcodes]

That's what I was thinking. Just wanted to be sure.

[awcodes]

This has been added in v2.2.8.

Doesn't work with Curator yet. But i'll get to it soon.

[johncarter-]

Incredible, thank you good Sir.

[awcodes]

This now works in Curator v2.4.0. Cheers.