Inserting img tag nodes inside the editor

[mooyg]

export const insertImage = (editor: SPEditor | undefined, shortName: string) => {
  const imageId = getImagePath(shortName.toLowerCase())
  const image = {
    type: getPlatePluginType(editor, ELEMENT_IMAGE),
    src: `http://localhost:8080/emoji/${imageId}`,
    children: [{ text: '' }],
  }
  editor && insertNodes<TElement>(editor, image)
}

returning my own element from the renderElement

The element looks something like this

export const Emoticon = (props: TRenderElementProps<AnyObject>) => {
  return (
    <div {...props.attributes}>
      <Image
        loading="lazy"
        p="2px"
        height="8"
        draggable="false"
        src={`${props.element.src}`}
        {...props.attributes}
      />
      {props.children}
    </div>
  )
}

but I can backspace but it's somewhat (like press backspace two times and sometimes it just doesn't work) weird can't Ctrl+X

and cursor placement is weird too

I can't use keyboard arrow keys to focus to correct places
facing similar sort of issue when using getRenderElement(ELEMENT_IMAGE)

video showing what's happening

when the caret disappears thats when I am using keyboard buttons

sometimes all of a sudden Error: Cannot resolve a Slate node from DOM node: [object HTMLImageElement this error gets thrown too and sometime it doesn't

[zbeyens]

Can you remove {...props.attributes} from the image? Also pass contentEditable: false

[mooyg]

Here is a simple reproduction https://codesandbox.io/s/plate-editor-image-issue-simple-repro-cd4h9?file=/src/App.js as you can see it adds one image element automatically ? and then the behaviour as I described
(sorry for the delay in response)

[zbeyens]

Fixed in https://codesandbox.io/s/plate-editor-image-issue-simple-repro-forked-rggnq?file=/src/lib.js

• the plugin should be inline and getRenderElement should be used
• the div above the image should be inline block

[mooyg]

That fixed how it renders but I still can't backspace even though the backspace plugin is used

[zbeyens]

This is not a feature, you need to code custom logic in void nodes

[mooyg]

Ohk thanks for the help