# "prosemirror-schema-basic" has some problem

**URL:** https://discuss.prosemirror.net/t/prosemirror-schema-basic-has-some-problem/5801
**Category:** Uncategorized
**Created:** [August 31, 2023, 4:34am UTC](https://discuss.prosemirror.net/t/prosemirror-schema-basic-has-some-problem/5801 "2023-08-31T04:34:25Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![lovepk](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/lovepk/32/3591_2.png) [@lovepk](https://discuss.prosemirror.net/u/lovepk)
#### Post date: [August 31, 2023, 4:34am UTC](https://discuss.prosemirror.net/t/prosemirror-schema-basic-has-some-problem/5801/1 "2023-08-31T04:34:25Z")

</div>

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.

```auto
<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>
  

```

---

<div class="post-metadata">

### Author: ![marijn](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/marijn/32/15_2.png) [@marijn](https://discuss.prosemirror.net/u/marijn)
#### Post date: [August 31, 2023, 9:16am UTC](https://discuss.prosemirror.net/t/prosemirror-schema-basic-has-some-problem/5801/3 "2023-08-31T09:16:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![lovepk](https://discuss.prosemirror.net/user_avatar/discuss.prosemirror.net/lovepk/32/3591_2.png) [@lovepk](https://discuss.prosemirror.net/u/lovepk)
#### Post date: [September 1, 2023, 12:55am UTC](https://discuss.prosemirror.net/t/prosemirror-schema-basic-has-some-problem/5801/5 "2023-09-01T00:55:12Z")

</div>

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