TypeError: initialVNode is null
componentUpdateFn runtime-core.esm-bundler.js:5158
run reactivity.esm-bundler.js:181
update runtime-core.esm-bundler.js:5270
setupRenderEffect runtime-core.esm-bundler.js:5280
mountComponent runtime-core.esm-bundler.js:5048
processComponent runtime-core.esm-bundler.js:5002
patch runtime-core.esm-bundler.js:4471
componentUpdateFn runtime-core.esm-bundler.js:5146
run reactivity.esm-bundler.js:181
update runtime-core.esm-bundler.js:5270
setupRenderEffect runtime-core.esm-bundler.js:5280
mountComponent runtime-core.esm-bundler.js:5048
processComponent runtime-core.esm-bundler.js:5002
patch runtime-core.esm-bundler.js:4471
componentUpdateFn runtime-core.esm-bundler.js:5146
run reactivity.esm-bundler.js:181
update runtime-core.esm-bundler.js:5270
setupRenderEffect runtime-core.esm-bundler.js:5280
mountComponent runtime-core.esm-bundler.js:5048
processComponent runtime-core.esm-bundler.js:5002
patch runtime-core.esm-bundler.js:4471
componentUpdateFn runtime-core.esm-bundler.js:5146
run reactivity.esm-bundler.js:181
update runtime-core.esm-bundler.js:5270
setupRenderEffect runtime-core.esm-bundler.js:5280
mountComponent runtime-core.esm-bundler.js:5048
processComponent runtime-core.esm-bundler.js:5002
patch runtime-core.esm-bundler.js:4471
componentUpdateFn runtime-core.esm-bundler.js:5146
run reactivity.esm-bundler.js:181
update runtime-core.esm-bundler.js:5270
setupRenderEffect runtime-core.esm-bundler.js:5280
mountComponent runtime-core.esm-bundler.js:5048
processComponent runtime-core.esm-bundler.js:5002
patch runtime-core.esm-bundler.js:4471
render2 runtime-core.esm-bundler.js:5796
mount runtime-core.esm-bundler.js:3063
mount runtime-dom.esm-bundler.js:1527
renderToCanvas chunk-ERN3BQXJ.mjs:5
renderToCanvas runtime.js:8247
mount chunk-ERN3BQXJ.mjs:5
mount runtime.js:8260
runPhase runtime.js:8185
mount runtime.js:8259
render runtime.js:8285
renderToElement runtime.js:8207
renderSelection runtime.js:9097
selectSpecifiedStory runtime.js:8976
initializeWithStoryIndex runtime.js:8950
initializeWithProjectAnnotations runtime.js:8433
initialize runtime.js:8406
gi runtime.js:8934
ts runtime.js:9365
<anonymous> vite-app.js:22
<script setup lang="ts">
import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'
import BlockEditor from '@/Components/BlockEditor.vue'
</script>
<template>
<ProsemirrorAdapterProvider>
<BlockEditor/>
</ProsemirrorAdapterProvider>
</template>
<script setup lang="ts">
import type { VNodeRef } from 'vue'
import { useNodeViewFactory } from '@prosemirror-adapter/vue'
import Paragraph from './Blocks/Paragraph.vue'
import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view';
import { Schema } from 'prosemirror-model'
const nodeViewFactory = useNodeViewFactory()
const schema = new Schema({
nodes: {
doc: {
content: "block+"
},
paragraph: {
group: "block",
},
text: {
group: "inline"
}
},
marks: {}
})
let state = EditorState.create({
schema: schema,
})
const editorRef: VNodeRef = (element) => {
const el = element as HTMLElement
if (!el || el.firstChild)
return
const editorView = new EditorView(el, {
state: state,
nodeViews: {
paragraph: nodeViewFactory({
component: Paragraph,
as: 'div', // Ensure this matches the expected tag of the component
contentAs: 'p', // Ensure this matches the expected tag in the Paragraph component
}),
}
})
}
</script>
<template>
<div :ref="editorRef" class="editor" />
</template>
<script setup lang="ts">
import { useNodeViewContext } from '@prosemirror-adapter/vue'
const { contentRef, selected } = useNodeViewContext()
</script>
<template>
<div :ref="contentRef" role="presentation" />
</template>
<style scoped>
.selected {
outline: blue solid 1px;
}
</style>