ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

update content

Browse Source
This commit is contained in:
Hans Pagel
2021-03-09 21:54:16 +01:00
parent d79b2c3acc
commit 35053c3ecc
1 changed files with 89 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
docs/src/docPages/guide/node-views.md
View File

@@ -5,7 +5,46 @@
## Introduction ## Introduction
Node views are the best thing since sliced bread, at least if you are a fan of customization (and bread). With node views you can add interactive nodes to your editor content. That can literally be everything. If you can write it in JavaScript, you can use it in your editor. Node views are the best thing since sliced bread, at least if you are a fan of customization (and bread). With node views you can add interactive nodes to your editor content. That can literally be everything. If you can write it in JavaScript, you can use it in your editor.
<!-- ```js ## Different types of node views
### Editable content
```html
<div class="Prosemirror" contenteditable="true">
<p>text</p>
<node-view>text</node-view>
<p>text</p>
</div>
```
### Non-editable content
```html
<div class="Prosemirror" contenteditable="true">
<p>text</p>
<node-view contenteditable="false">text</node-view>
<p>text</p>
</div>
```
### Mixed content
```html
<div class="Prosemirror" contenteditable="true">
<p>text</p>
<node-view>
<div>
non-editable text
</div>
<div>
editable text
</div>
</node-view>
<p>text</p>
</div>
```
## Node views with JavaScript
TODO
```js
import { Node } from '@tiptap/core' import { Node } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-2' import { VueNodeViewRenderer } from '@tiptap/vue-2'
import Component from './Component.vue' import Component from './Component.vue'
@@ -23,68 +62,16 @@ export default Node.create({
}) })
}, },
}) })
``` -->
<!--
## Different types of node views
### Simple
```html
<div class="Prosemirror" contenteditable="true">
<p>text</p>
<node-view>text</node-view>
<p>text</p>
</div>
``` ```
#### Example: Task item ## Node views with Vue
Using Vanilla JavaScript can feel complex, if you are used to work in Vue. Good news: You can even use regular Vue components in your node views. There is just a little bit you need to know, but let’s go through this one by one.
https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/src/task-item.ts#L74
### Without content
```html
<div class="Prosemirror" contenteditable="true">
<p>text</p>
<node-view contenteditable="false">text</node-view>
<p>text</p>
</div>
```
#### Example: Table of contents
<demo name="Guide/NodeViews/TableOfContents" />
#### Example: Drawing in the editor
<demo name="Examples/Drawing" />
### Advanced node views with content
```html
<div class="Prosemirror" contenteditable="true">
<p>text</p>
<node-view>
<div>
non-editable text
</div>
<div>
editable text
</div>
</node-view>
<p>text</p>
</div>
``` -->
<!-- #### Example: Drag handles
<demo name="Guide/NodeViews/DragHandle" /> -->
## Node views with Vue.js
Using Vanilla JavaScript can feel complex, if you are used to work in Vue. Good news: You can even use regular Vue components in your node views. There is just a little bit you need to know, before starting.
### Render a Vue component ### Render a Vue component
Let’s start rendering your first Vue component. Here is what you need to do: Here is what you need to do to render Vue components inside your text editor:
1. [Create a new node](/guide/build-extensions) 1. [Create a node extension](/guide/build-extensions)
2. Create a new Vue component 2. Create a Vue component
3. Pass that component to the provided `VueNodeViewRenderer` 3. Pass that component to the provided `VueNodeViewRenderer`
4. Register it with `addNodeView()` 4. Register it with `addNodeView()`
5. [Configure tiptap to use your new node](/guide/configuration) 5. [Configure tiptap to use your new node](/guide/configuration)
@@ -153,27 +140,29 @@ this.updateAttributes({
### Adding a content editable ### Adding a content editable
```html
<template>
<node-view-wrapper class="dom">
<node-view-content class="content-dom" />
</node-view-wrapper>
</template>
<script>
import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
export default {
components: {
NodeViewWrapper,
NodeViewContent,
},
}
```
<demo name="Guide/NodeViews/VueComponentContent" /> <demo name="Guide/NodeViews/VueComponentContent" />
`content: 'block+'` `content: 'block+'`
`atom: true` ### All available props
<!-- ### Node
```js
import { Node } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-2'
import Component from './Component.vue'
export default Node.create({
addNodeView() {
return VueNodeViewRenderer(Component)
},
})
```
### Component
```html ```html
<template> <template>
@@ -221,25 +210,34 @@ export default {
</script> </script>
``` ```
### Component with Content ## Node views with React
TODO
```html ## Rendered content
<template>
<node-view-wrapper class="dom">
<node-view-content class="content-dom" />
</node-view-wrapper>
</template>
<script> ```js
import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2' parseHTML() {
return [{
export default { tag: 'vue-component',
components: { }]
NodeViewWrapper,
NodeViewContent,
}, },
}
``` --> renderHTML({ HTMLAttributes }) {
return ['vue-component', mergeAttributes(HTMLAttributes)]
},
```
## Examples
TODO
### Drag handles
<demo name="Guide/NodeViews/DragHandle" />
### Table of contents
<demo name="Guide/NodeViews/TableOfContents" />
### Drawing in the editor
<demo name="Examples/Drawing" />
## Reference ## Reference