Icons are invisible if Prosemirror is inside Shadow DOM

[ghost]

Issue details

Following this example I can get ProseMirror to work fine in Light DOM, but not in Shadow DOM. Here is my code (my HTML file does nothing but embed a test-element):

import {LitElement, html, css} from 'lit-element';

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

customElements.define('test-element', class extends LitElement {
	static get styles() {
		return [css`
			@import 'https://prosemirror.net/css/editor.css';
		`];
	}
	render() {
		return html`
			<div id="editor"></div>
		`;
	}
	firstUpdated() {
		// Mix the nodes from prosemirror-schema-list into the basic schema to
		// create a schema with list support.
		const mySchema = new Schema({
		  nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
		  marks: schema.spec.marks
		})

		window.view = new EditorView(this.shadowRoot.querySelector("#editor"), {
		  state: EditorState.create({
		    doc: DOMParser.fromSchema(mySchema).parse(this.shadowRoot.querySelector("#editor")),
		    plugins: exampleSetup({schema: mySchema})
		  })
		})
	}
});

This is an example of how it looks:

ProseMirror version

I installed them from NPM, which got the following versions:

    "prosemirror-example-setup": "^1.1.2",
    "prosemirror-model": "^1.13.3",
    "prosemirror-schema-basic": "^1.1.2",
    "prosemirror-schema-list": "^1.1.4",
    "prosemirror-state": "^1.3.4",
    "prosemirror-view": "^1.18.0"

Affected platforms

• Firefox

[marijnh]

The prosemirror-menu package (which for some reason isn't mentioned in the code but is visible in the screenshot) is defining the icons in the top document, which apparently doesn't allow them to be linked inside a shadow DOM. That package isn't really maintained, and it might be a better approach to build your own custom menu.

[raalarcon9705]

I had the same error. Try with this

@customElement("my-editor")
export class MyEditor extends LitElement {
  editor!: EditorView;
  @query("#editor") editorRoot!: HTMLElement;

  render() {
    return html`
      <div>
        <div id="editor"></div>
      </div>
    `;
  }

  firstUpdated() {
    this.editor = setupEditor(this.editorRoot);
    this.editorRoot.parentElement!.prepend(
      document.getElementById("ProseMirror-icon-collection")!
    );
  }

  static get styles() {
    return [PROSEMIRROR_EDITOR_STYLES];
  }
}

The icons the you are missing are inside the element with id ProseMirror-icon-collection, So, you just need move that element to inside of the shadow dom.

Do not forget wrap you editor in one aditional element

[axelerator]

I ended up going to the live example and grabbing the svgs from the element with the id #ProseMirror-icon-collection and add them to my webcomponent