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

In a Vue project using ‘prosemirror-schema-basic’, there seems to be an issue when I directly use the exported schema. Everything works fine in that case. However, when I try to re-instantiate a new schema based on the exported schema, problems arise. Specifically, when I toggle bold and italic formatting, it unexpectedly modifies the content I previously entered. I need help!!!

<template>
    <div>
        <div class="tool-bar">
            <div @click="handleBold">Bold</div>
            <div @click="handleQx">Italic</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>

See my response to the other thread you created about this.