diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md index f4d864a6..130cd64d 100644 --- a/docs/src/docPages/guide/node-views.md +++ b/docs/src/docPages/guide/node-views.md @@ -6,6 +6,26 @@ TODO +```js +import { Node } from '@tiptap/core' +import { VueRenderer } from '@tiptap/vue' +import Component from './Component.vue' + +export default Node.create({ + addNodeView() { + return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => { + const dom = document.createElement('div') + + dom.innerHTML = 'I’m a node view' + + return { + dom, + } + }) + }, +}) +``` + ## Different types of node views ### Simple @@ -53,3 +73,60 @@ TODO ## Render Vue components +### Node + +```js +import { Node } from '@tiptap/core' +import { VueRenderer } from '@tiptap/vue' +import Component from './Component.vue' + +export default Node.create({ + addNodeView() { + return VueRenderer(Component) + }, +}) +``` + +### Component + +```html + + + +```