-
Notifications
You must be signed in to change notification settings - Fork 5
/
VuePluginView.tsx
52 lines (45 loc) · 1.53 KB
/
VuePluginView.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* Copyright 2021, Prosemirror Adapter by Mirone. */
import { CorePluginView } from '@prosemirror-adapter/core'
import { nanoid } from 'nanoid'
import { Teleport, defineComponent, markRaw, provide, shallowRef } from 'vue'
import type { VueRenderer, VueRendererComponent } from '../VueRenderer'
import type { PluginViewContext } from './pluginViewContext'
import { pluginViewContext } from './pluginViewContext'
import type { VuePluginViewComponent } from './VuePluginViewOptions'
export class VuePluginView extends CorePluginView<VuePluginViewComponent> implements VueRenderer<PluginViewContext> {
key: string = nanoid()
context: PluginViewContext = {
view: shallowRef(this.view),
prevState: shallowRef(this.prevState),
}
updateContext = () => {
Object.entries({
view: this.view,
prevState: this.prevState,
}).forEach(([key, value]) => {
const prev = this.context[key as 'view' | 'prevState']
if (key === 'view') {
const clone = Object.assign(Object.create(Object.getPrototypeOf(value)), value)
prev.value = clone
return
}
prev.value = value
})
}
render = () => {
const UserComponent = this.component
return markRaw(
defineComponent({
name: 'ProsemirrorNodeView',
setup: () => {
provide(pluginViewContext, this.context)
return () => (
<Teleport key={this.key} to={this.root}>
<UserComponent />
</Teleport>
)
},
}),
) as VueRendererComponent
}
}