The Problem for insertHTML .

[chenweigh]

Environment

System:
    OS: macOS 11.3.1
    CPU: (8) x64 Apple M1
    Memory: 24.03 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.11.0 - /var/folders/f6/qc85ty992z1_6p0tpm8wwzvr0000gn/T/yarn--1635302341370-0.8493586927356396/node
    Yarn: 1.22.15 - /var/folders/f6/qc85ty992z1_6p0tpm8wwzvr0000gn/T/yarn--1635302341370-0.8493586927356396/yarn
    npm: 8.0.0 - /usr/local/bin/npm
    Watchman: Not Found
  npmPackages:
    react: 17.0.2
    react-native: 0.66.0 
   react-native-pell-rich-editor: 1.8.6

Code

let imgHtml = `<img src="https://123.png" onclick="_.sendEvent('ImgClick')" contenteditable="false" height="170px"/>`;
this.richText.current.insertHTML(initHTML);

Problem

The insertHtml function seems to eat up the attributes of the tag, and the onChange Callback as follow:

<div><img src="https://123.png" height="170px"></div>

Expect Result

<div><img src="https://123.png" onclick="_.sendEvent('ImgClick')" contenteditable="false" height="170px"/></div>

How can I do to solve it ?

please help me. thank u.

[xkguq007]

any solution?

[eduardo-santos-tribia]

I'm having the same issue... is there any solution?

[caturadjiprasetyo]

any solution?

[eduardo-santos-tribia]

I'm using a workaround, it's not the ideal way, but it works...

In the insertHtml function I'm adding a style="font-size: 0px;" that will be replaced later. I'm also setting a temp attribute to inform that I'm inserting a new HTML:

// outside the functional component
let isInsertingHtml = false

// inside the functional component
const insertHtml = () => {
   isInsertingHtml = true
   const htmlMessage = `<span style="font-size: 0px;">${myHtmlContent}</span>`
   editorRef?.current?.insertHTML(htmlMessage)
}

This will trigger the <RichEditor /> onChange callback function. Then on the onChange function I'm replacing the <span style="font-size: 0px;"> with the content I want and setting the isInsertingHtml to false to prevent an infinite recursive call:

const onEditorChange = (newHtmlText: string) => {
   if (isInsertingHtml) {
      isInsertingHtml = false

      newHtmlText = functionToReplaceYourSpanStyle(newHtmlText)

      editorRef?.current?.setContentHTML(newHtmlText) // updates the input HTML with the correct replaced html
      return onEditorChange(newHtmlText) // recursive call
   }
}

This will work, but the editorRef?.current?.setContentHTML function will reset your input cursor to the 0 position (the start of the input). If you want the cursor to be after the new inserted HTML, you'll need to write a script to search for the new inserted HTML and run this script with inputRef?.current?.commandDOM(moveCursorScript).

I don't like this workaround at all, but looks like this repository is abandoned and no one will solve the issues...

Also, be aware of using contenteditable=false in your elements, because there are a lot of issues with this prop on Android and looks like the're not related to this library but to webview and HTML:

• https://stackoverflow.com/questions/21314550/chrome-for-android-contenteditable-bug
• https://bugs.chromium.org/p/chromium/issues/detail?id=612446
• https://discuss.prosemirror.net/t/contenteditable-on-android-is-the-absolute-worst/3810
• https://github.com/ProseMirror/prosemirror/issues/565
• https://forum.ionicframework.com/t/cant-focus-into-contenteditable-on-android-when-setting-html-content/8704