tiptap icon indicating copy to clipboard operation
tiptap copied to clipboard

[Mention extension] Get reference to `window` from editor view element to support cross-window instantiation

Open nermolov opened this issue 1 year ago • 1 comments

Please describe your changes

When instantiating tiptap in a parent window context but attaching the editor to an element within a same-origin iframe, the mention extension attempts to access the window selection from the incorrect window (using the parent window context instead of the iframe window context), throwing an error. This PR makes a one line change to get a reference to the correct window context from the editor.view.dom element, which allows the mention extension to use the right window instance in all scenarios.

Attaching tiptap to an element within an iframe was necessary due to a dependency on a third party library (specifically, GrapesJS).

The error that gets thrown is Uncaught DOMException: Failed to execute 'collapseToEnd' on 'Selection': there is no selection.

How did you accomplish your changes

You can access the window context that an element belongs to via the editor DOM element's ownerDocument and that document's defaultView.

How have you tested your changes

I've created a reproduction of the issue below:

  1. Open https://stackblitz.com/edit/vue2-vite-starter-mvtses
  2. Select the editor instance inside the frame.
  3. Bring up the mention suggestion tooltip by typing @, then select an entry with your keyboard by hitting Enter
  4. Note the Uncaught DOMException: Failed to execute 'collapseToEnd' on 'Selection': there is no selection. thrown in the console, and the incorrect insertion of a newline in the editor.

I've made a version of the above reproduction, but using the modified version of the mention package https://stackblitz.com/edit/vue2-vite-starter-by4jup - none of the above incorrect behavior occurs in this reproduction example.

Additionally, the default mention demo (accessible via npm run start) still behaves as expected (without an iframe).

How can we verify your changes

Here is a version of the above reproduction, but using the modified version of the mention package https://stackblitz.com/edit/vue2-vite-starter-by4jup

Checklist

  • [x] The changes are not breaking the editor
  • [x] Added tests where possible
  • [x] Followed the guidelines
  • [x] Fixed linting issues

nermolov avatar Jan 12 '24 21:01 nermolov