prosemirror/prosemirror-menu

Fork 0

Icons are invisible if Prosemirror is inside Shadow DOM #30

New issue

Open

opened 2021-03-12 20:49:01 +01:00 by ghost · 3 comments

ghost commented

2021-03-12 20:49:01 +01:00

(Migrated from github.com)

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

### Issue details Following [this example](https://prosemirror.net/examples/basic/) 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: ![20210312_14h25m49s_grim](https://user-images.githubusercontent.com/16864184/110988693-e0f07c80-833e-11eb-807c-85c182e89b2a.png) ### ProseMirror version I installed them from NPM, which got the following versions: ```json "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 - [x] Firefox

marijnh commented

2021-03-13 14:31:43 +01:00

(Migrated from github.com)

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.

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 commented

2023-07-27 06:14:28 +02:00

(Migrated from github.com)

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

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 commented

2024-05-24 23:14:50 +02:00

(Migrated from github.com)

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

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

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

prosemirror/prosemirror-menu#30

No description provided.

Rows
Columns