tiptap
tiptap copied to clipboard
[Mention extension] Get reference to `window` from editor view element to support cross-window instantiation
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:
- Open https://stackblitz.com/edit/vue2-vite-starter-mvtses
- Select the editor instance inside the frame.
- Bring up the mention suggestion tooltip by typing
@
, then select an entry with your keyboard by hitting Enter - 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