Firefox contenteditable backspace issue

andrewstaker · August 2, 2022, 4:58am

I’ve been looking into a bug where Firefox users can’t backspace at the end of a paragraph when there is a decoration widget at the end.

I found this existing Chromium bug report which seems to be the underlying cause:

I’m wondering if it would make sense to include Firefox to the existing “addTextblockHacks” logic to make contenteditable behave more predictably? This is the code I’m talking about (I hard coded it to include Firefox and it worked in my case):

github.com

ProseMirror/prosemirror-view/blob/master/src/viewdesc.ts#L1278


      
            let lastChild = this.top.children[this.index - 1], parent = this.top
            while (lastChild instanceof MarkViewDesc) {
              parent = lastChild
              lastChild = parent.children[parent.children.length - 1]
            }
          
          
  if (!lastChild || // Empty textblock
                !(lastChild instanceof TextViewDesc) ||
                /\n$/.test(lastChild.node.text!)) {
              // Avoid bugs in Safari's cursor drawing (#1165) and Chrome's mouse selection (#1152)
              if ((browser.safari || browser.chrome) && lastChild && (lastChild.dom as HTMLElement).contentEditable == "false")
                this.addHackNode("IMG", parent)
              this.addHackNode("BR", this.top)
            }
          }
          
          
addHackNode(nodeName: string, parent: ViewDesc) {
            if (parent == this.top && this.index < parent.children.length && parent.children[this.index].matchesHack(nodeName)) {
              this.index++
            } else {
              let dom = document.createElement(nodeName)

marijn · August 4, 2022, 8:16am

I can’t reproduce this on https://prosemirror.net/examples/dino/. Do you have an example of how to trigger it?