docs: update content
This commit is contained in:
Hans Pagel
@@ -75,201 +75,6 @@ You can even mix non-editable and editable text. That’s great because you can
|
||||
|
||||
**BUT**, that also means the cursor can’t just move from outside of the node view to the inside. Users have to manually place their cursor to edit the content inside the node view. Just so you know.
|
||||
|
||||
## Node views with JavaScript
|
||||
TODO
|
||||
|
||||
```js
|
||||
import { Node } from '@tiptap/core'
|
||||
import { VueNodeViewRenderer } from '@tiptap/vue-2'
|
||||
import Component from './Component.vue'
|
||||
|
||||
export default Node.create({
|
||||
addNodeView() {
|
||||
return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => {
|
||||
const dom = document.createElement('div')
|
||||
|
||||
dom.innerHTML = 'Hello, I’m a node view!'
|
||||
|
||||
return {
|
||||
dom,
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Node views with Vue
|
||||
Using Vanilla JavaScript can feel complex if you are used to work in Vue. Good news: You can use regular Vue components in your node views, too. There is just a little bit you need to know, but let’s go through this one by one.
|
||||
|
||||
### Render a Vue component
|
||||
Here is what you need to do to render Vue components inside your text editor:
|
||||
|
||||
1. [Create a node extension](/guide/build-extensions)
|
||||
2. Create a Vue component
|
||||
3. Pass that component to the provided `VueNodeViewRenderer`
|
||||
4. Register it with `addNodeView()`
|
||||
5. [Configure tiptap to use your new node extension](/guide/configuration)
|
||||
|
||||
This is how your node extension could look like:
|
||||
|
||||
```js
|
||||
import { Node } from '@tiptap/core'
|
||||
import { VueNodeViewRenderer } from '@tiptap/vue-2'
|
||||
import Component from './Component.vue'
|
||||
|
||||
export default Node.create({
|
||||
// configuration …
|
||||
|
||||
addNodeView() {
|
||||
return VueNodeViewRenderer(Component)
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
There is a little bit of magic required to make this work. But don’t worry, we provide a wrapper component you can use to get started easily. Don’t forget to add it to your custom Vue component, like shown below:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<node-view-wrapper>
|
||||
Vue Component
|
||||
</node-view-wrapper>
|
||||
</template>
|
||||
```
|
||||
|
||||
Got it? Let’s see it in action. Feel free to copy the below example to get started.
|
||||
|
||||
<demo name="Guide/NodeViews/VueComponent" />
|
||||
|
||||
That component doesn’t interactive with the editor, though. Time to connect it to the editor output.
|
||||
|
||||
### Access node attributes
|
||||
The `VueNodeViewRenderer` which you use in your node extension, passes a few very helpful props to your custom view component. One of them is the `node` prop. Add this snippet to your Vue component to directly access the node:
|
||||
|
||||
```js
|
||||
props: {
|
||||
node: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
That makes it super easy to access node attributes in your Vue component. Let’s say you have [added an attribute](/guide/extend-extensions#attributes) named `count` to your node extension (like we did in the above example) you could access it like this:
|
||||
|
||||
```js
|
||||
this.node.attrs.count
|
||||
```
|
||||
|
||||
### Update node attributes
|
||||
You can even update node attributes from your node, with the help of the `updateAttributes` prop passed to your component. Just add this snippet to your component:
|
||||
|
||||
```js
|
||||
props: {
|
||||
updateAttributes: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
Pass an object with updated attributes to the function:
|
||||
|
||||
```js
|
||||
this.updateAttributes({
|
||||
count: this.node.attrs.count + 1,
|
||||
})
|
||||
```
|
||||
|
||||
And yes, all of that is reactive, too. A pretty seemless communication, isn’t it?
|
||||
|
||||
### Adding a content editable
|
||||
There is another component called `NodeViewContent` which helps you adding editable content to your node view. Here is an example:
|
||||
|
||||
```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,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
You don’t need to add those `class` attributes, feel free to remove them or pass other class names. Try it out in the following example:
|
||||
|
||||
<demo name="Guide/NodeViews/VueComponentContent" />
|
||||
|
||||
Keep in mind that this content is rendered by tiptap. That means you need to tell what kind of content is allowed, for example with `content: 'inline*'` in your node extension (that’s what we use in the above example).
|
||||
|
||||
The `NodeViewWrapper` and `NodeViewContent` components render a `<div>` HTML tag (`<span>` for inline nodes), but you can change that. For example `<node-view-content as="p">` should render a paragraph. One limitation though: That tag must not change during runtime.
|
||||
|
||||
### All available props
|
||||
For advanced use cases, we pass a few more props to the component. Here is the full list of what you can expect:
|
||||
|
||||
```html
|
||||
<template>
|
||||
<node-view-wrapper />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { NodeViewWrapper } from '@tiptap/vue-2'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NodeViewWrapper,
|
||||
},
|
||||
|
||||
props: {
|
||||
// the editor instance
|
||||
editor: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
// the current node
|
||||
node: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
// an array of decorations
|
||||
decorations: {
|
||||
type: Array,
|
||||
},
|
||||
|
||||
// true when the cursor is inside the node view
|
||||
selected: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
// access to the node extension, for example to get options
|
||||
extension: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
// get the document position of the current node
|
||||
getPos: {
|
||||
type: Function,
|
||||
},
|
||||
|
||||
// update attributes of the current node
|
||||
updateAttributes: {
|
||||
type: Function,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Node views with React
|
||||
TODO
|
||||
|
||||
## Rendered content
|
||||
|
||||
```js
|
||||
@@ -284,9 +89,6 @@ renderHTML({ HTMLAttributes }) {
|
||||
},
|
||||
```
|
||||
|
||||
## Examples
|
||||
We’ve put together [a list of interactive examples](/guide/node-views/examples). :-)
|
||||
|
||||
## Reference
|
||||
|
||||
### dom: ?dom.Node
|
||||
|
||||
Reference in New Issue
Block a user