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>