diff --git a/docs/src/demos/Examples/InteractiveNodeViews/Component.vue b/docs/src/demos/Examples/InteractiveNodeViews/Component.vue deleted file mode 100644 index 8ececb89..00000000 --- a/docs/src/demos/Examples/InteractiveNodeViews/Component.vue +++ /dev/null @@ -1,60 +0,0 @@ - - - - - diff --git a/docs/src/demos/Examples/InteractiveNodeViews/Extension.js b/docs/src/demos/Examples/InteractiveNodeViews/Extension.js deleted file mode 100644 index 6dac246e..00000000 --- a/docs/src/demos/Examples/InteractiveNodeViews/Extension.js +++ /dev/null @@ -1,35 +0,0 @@ -import { Node, mergeAttributes } from '@tiptap/core' -import { VueNodeViewRenderer } from '@tiptap/vue-2' -import Component from './Component.vue' - -export default Node.create({ - name: 'vueComponent', - - group: 'block', - - atom: true, - - addAttributes() { - return { - count: { - default: 0, - }, - } - }, - - parseHTML() { - return [ - { - tag: 'vue-component', - }, - ] - }, - - renderHTML({ HTMLAttributes }) { - return ['vue-component', mergeAttributes(HTMLAttributes)] - }, - - addNodeView() { - return VueNodeViewRenderer(Component) - }, -}) diff --git a/docs/src/demos/Examples/InteractiveNodeViews/index.spec.js b/docs/src/demos/Examples/InteractiveNodeViews/index.spec.js deleted file mode 100644 index 7bb4cdb2..00000000 --- a/docs/src/demos/Examples/InteractiveNodeViews/index.spec.js +++ /dev/null @@ -1,7 +0,0 @@ -context('/demos/Examples/InteractiveNodeViews', () => { - before(() => { - cy.visit('/demos/Examples/InteractiveNodeViews') - }) - - // TODO: Write tests -}) diff --git a/docs/src/demos/Examples/InteractiveNodeViews/index.vue b/docs/src/demos/Examples/InteractiveNodeViews/index.vue deleted file mode 100644 index 5f8f3c8b..00000000 --- a/docs/src/demos/Examples/InteractiveNodeViews/index.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - - - diff --git a/docs/src/docPages/api/nodes/emoji.md b/docs/src/docPages/api/nodes/emoji.md index 15103a97..c6168c3c 100644 --- a/docs/src/docPages/api/nodes/emoji.md +++ b/docs/src/docPages/api/nodes/emoji.md @@ -6,7 +6,7 @@ There is no extension or example yet, but it’s definitely on our list to build If you want to give it a shot yourself, you could start altering the [`Mention`](/api/nodes/mention) node. This uses the [`Suggestion`](/utilities/suggestion) utility, which should help with an autocomplete and such things. :::pro Fund the development ♥ -We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open-source](/sponsor). +We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor). ::: ## Bring your own emoji picker diff --git a/docs/src/docPages/api/nodes/hashtag.md b/docs/src/docPages/api/nodes/hashtag.md index 00188637..6099f060 100644 --- a/docs/src/docPages/api/nodes/hashtag.md +++ b/docs/src/docPages/api/nodes/hashtag.md @@ -1,7 +1,7 @@ # Hashtag :::pro Fund the development ♥ -We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund open-source](/sponsor). +We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for this extension, [become a sponsor and fund our work](/sponsor). ::: TODO diff --git a/docs/src/docPages/examples/book.md b/docs/src/docPages/examples/book.md index beafa3ec..9883d36f 100644 --- a/docs/src/docPages/examples/book.md +++ b/docs/src/docPages/examples/book.md @@ -1,4 +1,4 @@ -# Write a book +# Long texts This demo has 250 paragraphs and more than 22,000 words, check the performance yourself. diff --git a/docs/src/docPages/examples/images.md b/docs/src/docPages/examples/images.md index 28b75739..a3eda52f 100644 --- a/docs/src/docPages/examples/images.md +++ b/docs/src/docPages/examples/images.md @@ -1,3 +1,7 @@ # Images +:::pro Fund the development ♥ +We need your support to maintain, update, support and develop tiptap 2. If you’re hoping for more features related to images, [become a sponsor and fund our work](/sponsor). +::: + diff --git a/docs/src/docPages/examples/interactive.md b/docs/src/docPages/examples/interactive.md index ca0650e4..da30aa67 100644 --- a/docs/src/docPages/examples/interactive.md +++ b/docs/src/docPages/examples/interactive.md @@ -1,3 +1,8 @@ # Interactive node views - +Thanks to [node views](/guide/node-views) you can add interactivity to your nodes. If you can write it in JavaScript, you can add it to the editor. + + diff --git a/docs/src/docPages/guide/accessibility.md b/docs/src/docPages/guide/accessibility.md index c53a0666..7c2cb15c 100644 --- a/docs/src/docPages/guide/accessibility.md +++ b/docs/src/docPages/guide/accessibility.md @@ -1,7 +1,7 @@ # Accessibility :::pro Fund the development ♥ -We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for progress here, [become a sponsor and fund open-source](/sponsor). +We need your support to maintain, update, support and develop tiptap 2. If you’re waiting for progress here, [become a sponsor and fund our work](/sponsor). ::: ## toc diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md index b80f1fb2..a31e834c 100644 --- a/docs/src/docPages/guide/node-views.md +++ b/docs/src/docPages/guide/node-views.md @@ -61,24 +61,50 @@ You can even mix non-editable and editable text. That’s great to build complex **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. ## Markup +But what happens if you [access the editor content](/guide/content)? If you’re working with HTML, you’ll need to tell tiptap how your node should be serialized. + +The editor **does not** export the rendered JavaScript node, and for a lot of use cases you wouldn’t want that anyway. + +Let’s say you have a node view which lets users add a video player and configure the appearance (autoplay, controls …). You want the interface to do that in the editor, not in the output of the editor. The output of the editor should probably only have the video player. + +I know, I know, it’s not that easy. Just keep in mind, that you‘re in full control of the rendering inside the editor and of the output. + +:::warning What if you store JSON? +That doesn’t apply to JSON. For the JSON, everything is stored as an object. There is no need to configure the “translation” to and from HTML. +::: ### Render HTML +Okay, you’ve set up your node with an interactive node view and now you want to control the output. Even if you’re node view is pretty complex, the rendered HTML can be simple: + ```js renderHTML({ HTMLAttributes }) { - return ['vue-component', mergeAttributes(HTMLAttributes)] + return ['my-custom-node', mergeAttributes(HTMLAttributes)] }, + +// Output: ``` +Make sure it’s something distinguishable, so it’s easier to restore the content from the HTML. If you just need something generic markup like a `
` consider to add a `data-type="my-custom-node"`. + ### Parse HTML +The same applies to restoring the content. You can configure what markup you expect, that can be something completely unrelated to the node view markup. It just needs to contain all the information you want to restore. + +Attributes are automagically restored, if you registered them through [`addAttributes`](/guide/extend-extensions#attributes). + ```js +// Input: + parseHTML() { return [{ - tag: 'vue-component', + tag: 'my-custom-node', }] }, ``` -## Reference +### Render JavaScript/Vue/React +But what if you want to render your actual JavaScript/Vue/React code? Consider using tiptap to render your output. Just set the editor to `editable: false` and no one will notice you’re using an editor to render the content. :-) + + diff --git a/docs/src/docPages/overview/contributing.md b/docs/src/docPages/overview/contributing.md index bd35b8f1..b38c0c8a 100644 --- a/docs/src/docPages/overview/contributing.md +++ b/docs/src/docPages/overview/contributing.md @@ -5,6 +5,10 @@ ## Introduction tiptap would be nothing without its lively community. Contributions have always been and will always be welcome. Here is a little bit you should know, before you send your contribution: +:::warning Private repository +Currently, the repository is private. That means PRs are disabled, too. We’ll release a public version of tiptap 2 soonish, please wait with your PRs until the repository is public. +::: + ## Welcome examples * Failing regression tests as bug reports * Documentation improvements, e. g. fix a typo, add a section diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 4e99ffb7..49aeda59 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -60,19 +60,19 @@ link: /examples/images - title: Formatting link: /examples/formatting - - title: Task lists + - title: Tasks link: /examples/todo-app - - title: Lengthy texts + - title: Long texts link: /examples/book - - title: Draw on a canvas + - title: Drawing link: /examples/drawing - - title: Suggestions + - title: Mentions link: /examples/community - title: Minimal setup link: /examples/minimal - - title: Savvy editor + - title: A clever editor link: /examples/savvy - - title: Interactive node views + - title: Interactivity link: /examples/interactive - title: Guide @@ -96,6 +96,7 @@ link: /guide/build-extensions - title: Interactive node views link: /guide/node-views + type: new items: - title: With JavaScript link: /guide/node-views/js @@ -105,9 +106,8 @@ type: draft - title: With Vue link: /guide/node-views/vue - - title: Examples + - title: A few examples link: /guide/node-views/examples - type: draft - title: Working with TypeScript link: /guide/typescript