TipTap doesn't work properly in Safari inside a ShadowRoot

[andersgranberg]

What’s the bug you are facing?

The editor doesn't work properly in Safari if placed inside a ShadowRoot. The editor repeatedly moves the focus point to the end of the document on every input/keypress. It's also not possible to create a new paragraph between two already existing paragraphs since the focus point is moved. There's also a problem with selecting text which is making it impossible to use BubbleMenu etc.

How can we reproduce the bug on our side?

Create a custom element like the example below:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

customElements.define(
    'custom-tiptap',
    class extends HTMLElement {
      constructor() {
        super();  
        this.attachShadow({ mode: 'open', delegatesFocus: false });
        this.shadowRoot.innerHTML = this.render();
      }
      connectedCallback() {        
        new Editor({
            element: this.shadowRoot.querySelector('.element'),
            extensions: [
              StarterKit,
            ],
            content: '<p>This example will NOT work in Safari</p>',
          });          
      }
      render() {
        return `
        <div>TipTap
        <div class="element" style="width:500px;"></div>
        </div>
        `;
    }    
  },
);

If the shadow root is not used the editor works accordingly. See below for a working example.

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'

customElements.define(
    'custom-tiptap',
    class extends HTMLElement {
      constructor() {
        super();  
        this.innerHTML = this.render();
      }
      connectedCallback() {        
        new Editor({
            element: this.querySelector('.element'),
            extensions: [
              StarterKit,
            ],
            content: '<p>This example will work in Safari</p>',
          });          
      }
      render() {
        return `
        <div>TipTap
        <div class="element" style="width:500px;"></div>
        </div>
        `;
    }    
  },
);

Can you provide a CodeSandbox?

No response

What did you expect to happen?

Expected the editor to work even if placed inside a shadow root in Safari.

Anything to add? (optional)

Could this be related to similar issues in ProseMirror? Tried these suggested solutions but with no success.

https://discuss.prosemirror.net/t/prosemirror-inside-a-shadowroot/2387
/~https://github.com/jsturgill/shadow-root-get-selection-polyfill

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[philippkuehn]

Hmm, seems like a browser bug :( ProseMirror/prosemirror#476