/prosemirror-inside-shadow-dom

Prosemirror basic example breaks inside the shadow dom in all browsers

Primary LanguageJavaScript

Relevant Github issue

Prosemirror issues inside a shadow dom

To reproduce locally:

npm it

and then open http://localhost:8080

or

visit https://tehshrike.github.io/prosemirror-inside-shadow-dom/

Where did the code come from?

You can read my original code in index.html, it's just a few dozen lines. It attempts to replicate the basic example from the documentation.

The prosemirror-modules.js file was generated by running a bundler on this code:

import { exampleSetup } from "prosemirror-example-setup";
import { Schema } from "prosemirror-model";
import { schema } from "prosemirror-schema-basic";
import { addListNodes } from "prosemirror-schema-list";
import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";

export { exampleSetup, Schema, schema, addListNodes, EditorState, EditorView };

These are the versions used:

  • prosemirror-example-setup: 1.2.2
  • prosemirror-model: 1.19.3
  • prosemirror-schema-basic: 1.2.2
  • prosemirror-schema-list: 1.3.0
  • prosemirror-state: 1.4.3
  • prosemirror-view: 1.31.7

Expected behavior

The editor inside the shadow dom should behave the way that the one outside the shadow dom does.

Observed behavior in the shadow dom version

In Firefox and Chrome and Safari, the icons in the buttons in the menu bar are not visible.

In Chrome and Safari, the editor container box is really large.

In Firefox, attempting to select text with Cmd+shift+left/right does not do anything.