fix buttons display #19

Closed

serkosal wants to merge 1 commit from master into master

serkosal commented

2026-03-10 16:43:02 +01:00

(Migrated from github.com)

I have a problems following the guide from here with styles imported from prosemirror-example-setup.
Full code below:

import '../node_modules/prosemirror-example-setup/style/style.css'

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";

import type { EditorStateConfig } from 'prosemirror-state';

// 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
});


// editor config
let editorStateConfig: EditorStateConfig = {
  plugins: exampleSetup({ schema: mySchema })
};

const initialContent = document.querySelector("#content");
if (initialContent) {
  editorStateConfig.doc = DOMParser.fromSchema(mySchema).parse(initialContent);
}

// editor state
let editorState = EditorState.create(editorStateConfig);


// editor view
new EditorView(document.querySelector<HTMLDivElement>('#editor'), {
  state: editorState
});

That is resulted to me as shown on screenshot below:
proseMirror-example-setup

After my fix buttons are displayed okay:

I have a problems following the guide from [here](https://prosemirror.net/examples/basic/) with styles imported from `prosemirror-example-setup`. Full code below: ```typescript import '../node_modules/prosemirror-example-setup/style/style.css' 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"; import type { EditorStateConfig } from 'prosemirror-state'; // 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 }); // editor config let editorStateConfig: EditorStateConfig = { plugins: exampleSetup({ schema: mySchema }) }; const initialContent = document.querySelector("#content"); if (initialContent) { editorStateConfig.doc = DOMParser.fromSchema(mySchema).parse(initialContent); } // editor state let editorState = EditorState.create(editorStateConfig); // editor view new EditorView(document.querySelector<HTMLDivElement>('#editor'), { state: editorState }); ``` That is resulted to me as shown on screenshot below: <img width="283" height="417" alt="proseMirror-example-setup" src="https://github.com/user-attachments/assets/7b4d5fb2-4429-4047-b708-3f85284d3495" /> After my fix buttons are displayed okay: <img width="398" height="117" alt="image" src="https://github.com/user-attachments/assets/fe591eef-871e-43b6-a28c-d07e72ab12d7" />

marijnh commented

2026-03-10 16:51:09 +01:00

(Migrated from github.com)

Both of these rules occur precisely like this already in the CSS for prosemirror-menu. So I'm not sure what you're doing, but adding duplicate rules is certainly not the solution.

Pull request closed

This pull request cannot be reopened because the branch was deleted.

No reviewers

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-example-setup!19

No description provided.

Rows
Columns