Feature: Hide image in editor

[miag676]

Is it possible to display the uploaded image as a link in the editor, instead of displaying the image in the editor.
(Similar to StackOverflow and Github, where upon uploading the image, only the link is shown in the editor).

In this example I would like to display the link of the photo instead of the photo.

[acywatson]

Yea, you can render anything you want - you can just insert a LinkNode instead of an ImageNode.

Here's some pseudocode:

editor.registerCommand('INSERT_IMAGE_COMMAND',(payload) => {
  const link = $createLinkNode(payload.href);
  const text = $createTextNode('My Image');
  link.append(text);
  selection.insertNodes([link]);
})

[miag676]

Thank you very much for the answer. It inserts the image as link, however when I write anything else in the editor, I get the error: Expected node {number} to have a top parent element. Could you please help me figure out what I did wrong?

This is my command:

editor.registerCommand(
        INSERT_IMAGE_COMMAND,
        (payload) => {
        const selection = $getSelection();
        if ($isRangeSelection(selection)) {
        if ($isRootNode(selection.anchor.getNode())) {
        selection.insertParagraph();
        }
        const link = $createLinkNode(payload.src);
        const text = $createTextNode('[Image]');
        link.append(text);
        selection.insertNodes([link]);
        }
        return true;
        },
        COMMAND_PRIORITY_EDITOR,
        )