mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

docs: update content

Browse Source
This commit is contained in:
Hans Pagel 2021-03-18 21:58:23 +01:00
parent 4a9cc6752e
commit 080ccf0131
2 changed files with 32 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@ Node views are the best thing since sliced bread, at least if you are a fan of c
Depending on what you would like to build, node views work a little bit different and can have their verify specific capabilities, but also pitfalls. The main question is: How should your custom node look like?
### Editable text
Yes, node views can have editable text, just like regular node. That’s simple. The cursor will exactly behave like you would expect it from a regular node. Existing commands work very well with those nodes.
Yes, node views can have editable text, just like a regular node. That’s simple. The cursor will exactly behave like you would expect it from a regular node. Existing commands work very well with those nodes.
```html
<div class="Prosemirror" contenteditable="true">
@ -24,7 +24,7 @@ That’s how the [`TaskItem`](/api/nodes/task-item) node works.
### Non-editable text
Nodes can also have text, which is not edtiable. The cursor can’t jump into those, but you don’t want that anyway.
Those just get a `contenteditable="false"` from tiptap by default.
tiptap adds a `contenteditable="false"` to those by default.
```html
<div class="Prosemirror" contenteditable="true">
@ -39,33 +39,18 @@ That’s how you could render mentions, which shouldn’t be editable. Users can
Statamic uses those for their Bard editor, which renders complex modules inside tiptap, which can have their own text inputs.
### Mixed content
You can even mix non-editable and editable text. That’s great because you can build complex things, and even use marks like bold and italic inside the editable 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>
```
You can even mix non-editable and editable text. That’s great to build complex things, and even use marks like bold and italic inside the editable content.
**BUT**, if there are other elements with non-editable text in your node view, the cursor can jump there. You can improve that with manually adding `contenteditable` attributes to the specific parts of your node view.
```html
<div class="Prosemirror" contenteditable="true">
<p>text</p>
<node-view contenteditable="false">
<div>
<node-view>
<div contenteditable="false">
non-editable text
</div>
<div contenteditable="true">
<div>
editable text
</div>
</node-view>
@ -75,18 +60,20 @@ 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.
## Rendered content
## Render as HTML
```js
renderHTML({ HTMLAttributes }) {
return ['vue-component', mergeAttributes(HTMLAttributes)]
},
```
## Restore from HTML
```js
parseHTML() {
return [{
tag: 'vue-component',
}]
},
renderHTML({ HTMLAttributes }) {
return ['vue-component', mergeAttributes(HTMLAttributes)]
},
```
## Reference

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

@ -116,7 +116,7 @@ Keep in mind that this content is rendered by tiptap. That means you need to tel
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:
For advanced use cases, we pass a few more props to the component. Here is the full list of what props you can expect:
```html
<template>
@ -170,3 +170,21 @@ export default {
}
</script>
```
If you just want to have all (and to have TypeScript support) you can import all props like that:
```js
// Vue 3
import { defineComponent } from 'vue'
import { nodeViewProps } from '@tiptap/vue-3'
export default defineComponent({
props: nodeViewProps,
})
// Vue 2
import Vue from 'vue'
import { nodeViewProps } from '@tiptap/vue-2'
export default Vue.extend({
props: nodeViewProps,
})
```