customHTMLRenderer not called when "addImage" command executed

[Odrin]

Describe the bug

customHTMLRenderer not called when adding image via .exec('addImage', ...)

To Reproduce

Steps to reproduce the behavior:

1. Add customHTMLRenderer for image
2. Go to WYSIWYG tab
3. Click on "Inset image" tool
4. Select any image and click on "OK" button
5. customHTMLRenderer not called. If switch to Markdown tab and back to WYSIWYG everything works as expected.

Expected behavior

customHTMLRenderer called for the added image.

Desktop (please complete the following information):

• Version 3.0.1

Additional context

Here is my editor config:

new Editor({
  el: this.host,
  height: '400px',
  initialEditType: 'wysiwyg',
  previewStyle: 'tab',
  customHTMLRenderer: {
    image(node, context) {
      let src = node.destination;

      if (src.startsWith('hash:')) {
        const hash = src.replace('hash:', '');
        src = `${FILE_STORAGE_URL}/image/${hash}`;
      }

      context.skipChildren();

      return { type: 'openTag', tagName: 'img', selfClose: true, attributes: { src } };
    },
  },
});

[js87zz]

@Odrin WYSIWYG is different from Markdown and cannot be executed exactly the same. It can only apply attributes and class names of the customHTMLRenderer. I'll consider improving the compatibility between the WYSIWYG editor and customHTMLRenderer option.

[joseluratm]

Good morning, I am having the same problem! I would like to know if there has been any progress with this or if there is any hacky.

Thank you very much for your work, it's the best editor I've ever seen.

[upkey1010]

+1. Do we have any progress on this?

[musiccow]

same problem

[musiccow]

Workaround: use setMarkdown to rerender editor

React

triger useEffect by change the state imageUrl

const [imageUrl,setImageUrl]=useState("")

useEffect(() => {
      const editor = new Editor({
            ...
            hooks: {
                addImageBlobHook: async (fileOrBlob, callback, source) => {
                    const filePath=openedRunlogDirectory+'/assets/images/'+fileOrBlob.name
                    const {imageUrl} = await uploadImageAPi(fileOrBlob,filePath);
                    callback(imageUrl, fileOrBlob.name);
                    editor.setMarkdown(editor.getMarkdown(),false) 
                }
            }
   })
},    [imageUrl])