"prosemirror-schema-basic" has some problem

1

It seems like you’re encountering an issue when using “prosemirror-schema-basic” in a Vue project. When you directly use the exported schema, there are no problems. However, when you create a new instance of the schema based on the exported one, you’re facing an issue where toggling bold or italic unexpectedly modifies your previously entered content. This is a significant problem, and you’re struggling to find a solution.

<template>
    <div>
        <div class="tool-bar">
            <div @click="handleBold">加粗</div>
            <div @click="handleQx">倾斜</div>
        </div>
        <div id="editor"></div>
    </div>

  </template>
  
  <script>
import {EditorState, Plugin} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {schema} from "prosemirror-schema-basic"
import {Schema as SS} from "prosemirror-model"
import {toggleMark} from "prosemirror-commands"
  export default {
    name: 'Editor',
    mounted() {
        let xygptEditorSchema = new SS({
            nodes: schema.spec.nodes,
            marks: schema.spec.marks
        })
        console.log(xygptEditorSchema);
        const xygptEditorPlugins = [
            new Plugin({
                props: {
                    attributes: {class: "xygpt-editor-content"}
                }
            }),
        ]
        let xygptEditorState = EditorState.create({
            schema: xygptEditorSchema,
            plugins: xygptEditorPlugins,
        })
        this.xygptEditorView = new EditorView(document.getElementById('editor'), {
            state: xygptEditorState
        })
        this.boldCmd = toggleMark(schema.marks.strong)
        this.qxCmd = toggleMark(schema.marks.em)
    },
    methods: {
        handleBold() {
            this.xygptEditorView.focus()
            this.boldCmd(this.xygptEditorView.state, this.xygptEditorView.dispatch, this.xygptEditorView)

        },
        handleQx() {
            this.xygptEditorView.focus()
            this.qxCmd(this.xygptEditorView.state, this.xygptEditorView.dispatch, this.xygptEditorView)
        }
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  #editor {
    width: 800px;
    margin: 0 auto;
    border: 1px solid #ddd;
    padding: 5px;
  }
    .tool-bar {
        position: fixed;
        height: 50px;
        left: 0;
        top: 0;
    }

  </style>
  <style>
    .xygpt-editor-content {
        width: 100%;
        min-height: 400px;
        outline: none;
        font-size: 14px;
        border: 1px solid #ddd;
    }
    </style>
3

I am confused why this was written in 3rd person. Are you having this issue, or am I? (I’m not)

In any case, whoever is having the issue is probably putting some ProseMirror objects in their Vue state, which causes Vue to mangle them in weird ways, which breaks a lot of things.

5

:rofl: i am an chinese, my english is not good, i translate my qa by chatgpt, i am sorry. 是不是不能使用vue啊