Has some problem, use ‘prosemirror-schema-basic’ and ‘prosemirror-commands’, and custom schema

1 

import {EditorState, Plugin} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {Schema} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"
import {toggleMark} from "prosemirror-commands"
import "prosemirror-view/style/prosemirror.css"

const boldMark = schema.marks.strong;
const italicMark = schema.marks.em;

const commands = {
  toggleBold: toggleMark(boldMark),
  toggleItalic: toggleMark(italicMark),
};

export const mySchema = new Schema({
  nodes: schema.spec.nodes,
  marks: schema.spec.marks,
});

export function setupEditor(element) {
  const myEditorPlugins = [
    new Plugin({
      props: {
        attributes: {class: "xygpt-editor-content"}
      }
    })
  ]

  let myEditorState = EditorState.create({
    schema: mySchema,
    plugins: myEditorPlugins
  })

  let myEditorView = new EditorView(element, {
    state: myEditorState
  })

  document.querySelector('#bold').addEventListener('click', function() {
    myEditorView.focus()
    commands.toggleBold(myEditorView.state, myEditorView.dispatch)
  })

  document.querySelector('#qx').addEventListener('click', function() {
    myEditorView.focus()
    commands.toggleItalic(myEditorView.state, myEditorView.dispatch)
  })
}

When I use both libraries ‘prosemirror-schema-basic’ and ‘prosemirror-commands’ together and customize the schema, I encounter confusion when calling toggleMark. I believe this is a bug.

i need your help

2

  1. Stop creating new threads. Reply to your earlier threads instead.

  2. If you don’t properly describe the problem you are having, you won’t get a useful reply.

3

This time I didn’t use modern frameworks like Vue, and only used plain JavaScript.

4

Yes, but “I encounter confusion” tells me nothing about what is going wrong.

5

test-Google-Chrome-2023-09-02-09-01-20 The main logic is the code above me, and the bug phenomenon is reflected in this gif

6

Strangest thing is that if I replace ‘mySchema’ directly with ‘schema’ in the code ‘let myEditorState = EditorState.create({ schema: mySchema, plugins: myEditorPlugins })’, it works perfectly fine. I’ve even tried copying the source code of ‘prosemirror-schema-basic’ locally and exporting it, and then using ‘schema’, but it still doesn’t work. It’s really baffling.

7 
const commands = {
  toggleBold: toggleMark(mySchmea.marks.em),
  toggleItalic: toggleMark(mySchmea.marks.bold),
};

Will probably fix your code. Schema is an instance of class, schema.marks.strong !== mySchema.marks.strong.

8

Brother, you are really amazing. Following your method, you have indeed solved my problem. It was my large code that had problems, not the library. Thank you very much！！！

1 Like