Tiptap in iframes seem to cause problems when `document` is referenced by plugins

[bdbch]

Discussed in #7419

^{Originally posted by BoussonKarel January 16, 2026}

Description

I wish there was broader support for editors that were mounted in a different document than the global document (e.g. in an iframe).

I currently tried the following setup in my app.

    iframe.addEventListener('load', (): void => {
      // Add a <style> tag to the head
      const iframeDocument = iframe.contentDocument!;
      const style = iframeDocument.createElement('style')!;
      style.innerHTML = iframeStyling;
      iframeDocument.head.append(style);

      // Mount the editor to the body of the iframe
      this.editor.mount(iframeDocument.body);
    });

Most of the editor works fine. The commands I send are correctly applied (formatting, focussing all works fine).

I did encounter some issues with mouse events when using resize in the Image extension, ResizableNodeView adds a mousemove listener to document, which is the main document, not the iframe document.

(Mouse) events stop at document. This is for security reasons. This means mouse events inside of the iframe stop at the iframe's contentDocument. So you cannot resize the image inside of the iframe

Screencast.from.2026-01-16.10-47-31.webm

TinyMCE uses iframes by default, and you can access the current document with a document property on their editor.

So the solution would be to find the nearest document for the editor and add events to that, or to be able to pass your own document.

Use Case

I want to use this feature because I don't want app state to leak into the editor, which is happening right now.

Type

Other