From 956b381f8d46bff4b857a429c5157d3ad94e23a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Wed, 25 Aug 2021 23:10:20 +0200 Subject: [PATCH] replace demo component with custom element --- docs/src/TiptapDemo.js | 36 +++++++++++++++++++ .../docPages/api/extensions/bubble-menu.md | 5 +-- .../api/extensions/character-count.md | 2 +- .../api/extensions/collaboration-cursor.md | 5 ++- .../docPages/api/extensions/collaboration.md | 4 +-- docs/src/docPages/api/extensions/color.md | 2 +- .../src/docPages/api/extensions/dropcursor.md | 2 +- .../docPages/api/extensions/floating-menu.md | 5 +-- docs/src/docPages/api/extensions/focus.md | 2 +- .../docPages/api/extensions/font-family.md | 2 +- docs/src/docPages/api/extensions/gapcursor.md | 2 +- docs/src/docPages/api/extensions/history.md | 2 +- .../docPages/api/extensions/placeholder.md | 2 +- .../src/docPages/api/extensions/text-align.md | 2 +- .../src/docPages/api/extensions/typography.md | 2 +- docs/src/docPages/api/marks/bold.md | 2 +- docs/src/docPages/api/marks/code.md | 2 +- docs/src/docPages/api/marks/highlight.md | 2 +- docs/src/docPages/api/marks/italic.md | 2 +- docs/src/docPages/api/marks/link.md | 2 +- docs/src/docPages/api/marks/strike.md | 2 +- docs/src/docPages/api/marks/subscript.md | 2 +- docs/src/docPages/api/marks/superscript.md | 2 +- docs/src/docPages/api/marks/text-style.md | 2 +- docs/src/docPages/api/marks/underline.md | 2 +- docs/src/docPages/api/nodes/blockquote.md | 2 +- docs/src/docPages/api/nodes/bullet-list.md | 2 +- .../docPages/api/nodes/code-block-lowlight.md | 2 +- docs/src/docPages/api/nodes/code-block.md | 2 +- docs/src/docPages/api/nodes/document.md | 2 +- docs/src/docPages/api/nodes/emoji.md | 2 +- docs/src/docPages/api/nodes/hard-break.md | 2 +- docs/src/docPages/api/nodes/heading.md | 2 +- .../src/docPages/api/nodes/horizontal-rule.md | 2 +- docs/src/docPages/api/nodes/image.md | 2 +- docs/src/docPages/api/nodes/list-item.md | 2 +- docs/src/docPages/api/nodes/mention.md | 2 +- docs/src/docPages/api/nodes/ordered-list.md | 2 +- docs/src/docPages/api/nodes/paragraph.md | 2 +- docs/src/docPages/api/nodes/table-cell.md | 2 +- docs/src/docPages/api/nodes/table-header.md | 2 +- docs/src/docPages/api/nodes/table-row.md | 2 +- docs/src/docPages/api/nodes/table.md | 2 +- docs/src/docPages/api/nodes/task-item.md | 2 +- docs/src/docPages/api/nodes/task-list.md | 2 +- docs/src/docPages/api/nodes/text.md | 2 +- docs/src/docPages/api/utilities/html.md | 4 +-- docs/src/docPages/examples/book.md | 5 +-- .../examples/collaborative-editing.md | 2 +- docs/src/docPages/examples/default.md | 5 +-- docs/src/docPages/examples/drawing.md | 2 +- docs/src/docPages/examples/formatting.md | 5 +-- docs/src/docPages/examples/images.md | 5 +-- docs/src/docPages/examples/interactivity.md | 10 ++---- .../docPages/examples/markdown-shortcuts.md | 5 +-- docs/src/docPages/examples/menus.md | 5 +-- docs/src/docPages/examples/minimal.md | 5 +-- docs/src/docPages/examples/savvy.md | 2 +- docs/src/docPages/examples/suggestions.md | 5 +-- .../docPages/examples/syntax-highlighting.md | 5 +-- docs/src/docPages/examples/tables.md | 5 +-- docs/src/docPages/examples/tasks.md | 5 +-- .../experiments/collaboration-annotation.md | 2 +- docs/src/docPages/experiments/commands.md | 2 +- docs/src/docPages/experiments/details.md | 2 +- docs/src/docPages/experiments/embeds.md | 2 +- docs/src/docPages/experiments/figure.md | 2 +- .../docPages/experiments/generic-figure.md | 2 +- .../experiments/global-drag-handle.md | 2 +- docs/src/docPages/experiments/linter.md | 2 +- .../docPages/experiments/multiple-editors.md | 2 +- .../src/docPages/experiments/trailing-node.md | 2 +- docs/src/docPages/guide/menus.md | 16 ++------- .../src/docPages/guide/node-views/examples.md | 6 ++-- docs/src/docPages/guide/node-views/js.md | 4 +-- docs/src/docPages/guide/node-views/react.md | 6 ++-- docs/src/docPages/guide/node-views/vue.md | 6 ++-- docs/src/docPages/guide/output.md | 10 +++--- docs/src/docPages/installation/nuxt.md | 2 +- docs/src/docPages/installation/react.md | 2 +- docs/src/docPages/installation/vue2.md | 2 +- docs/src/main.js | 1 + docs/src/pages/index.vue | 4 ++- 83 files changed, 136 insertions(+), 155 deletions(-) create mode 100644 docs/src/TiptapDemo.js diff --git a/docs/src/TiptapDemo.js b/docs/src/TiptapDemo.js new file mode 100644 index 00000000..d2865b7d --- /dev/null +++ b/docs/src/TiptapDemo.js @@ -0,0 +1,36 @@ +import iframeResize from 'iframe-resizer/js/iframeResizer' + +class TiptapDemo extends HTMLElement { + url = 'https://embed.tiptap.dev' + + connectedCallback() { + const wrapper = document.createElement('div') + const iframe = document.createElement('iframe') + const shadow = this.attachShadow({ mode: 'open' }) + const name = this.getAttribute('name') + const inline = this.getAttribute('inline') === '' + const hideSource = this.getAttribute('hideSource') === '' + + iframe.src = `${this.url}/preview/${name}?inline=${inline}&hideSource=${hideSource}` + iframe.width = '100%' + iframe.height = '0' + iframe.frameBorder = '0' + + shadow.appendChild(wrapper) + + iframe.addEventListener('load', () => { + iframeResize({}, iframe) + }, { once: true }) + + const observer = new IntersectionObserver(([entry]) => { + if (entry.isIntersecting) { + observer.unobserve(wrapper) + wrapper.appendChild(iframe) + } + }) + + observer.observe(wrapper) + } +} + +window.customElements.define('tiptap-demo', TiptapDemo) diff --git a/docs/src/docPages/api/extensions/bubble-menu.md b/docs/src/docPages/api/extensions/bubble-menu.md index 6b54d5b5..cf898a8c 100644 --- a/docs/src/docPages/api/extensions/bubble-menu.md +++ b/docs/src/docPages/api/extensions/bubble-menu.md @@ -42,10 +42,7 @@ new Editor({ ``` ### Frameworks - + ### Custom logic Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop. diff --git a/docs/src/docPages/api/extensions/character-count.md b/docs/src/docPages/api/extensions/character-count.md index 259b4dd7..8bce21d4 100644 --- a/docs/src/docPages/api/extensions/character-count.md +++ b/docs/src/docPages/api/extensions/character-count.md @@ -22,7 +22,7 @@ yarn add @tiptap/extension-character-count [packages/extension-character-count/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-character-count/) ## Usage - + ## Count words, emojis, letters … Want to count words instead? Or emojis? Or the letter *a*? Sure, no problem. You can access the `textContent` directly and count whatever you’re into. diff --git a/docs/src/docPages/api/extensions/collaboration-cursor.md b/docs/src/docPages/api/extensions/collaboration-cursor.md index 7e6f8a74..62f7e865 100644 --- a/docs/src/docPages/api/extensions/collaboration-cursor.md +++ b/docs/src/docPages/api/extensions/collaboration-cursor.md @@ -40,6 +40,5 @@ This extension requires the [`Collaboration`](/api/extensions/collaboration) ext :::warning Public The content of this editor is shared with other users. ::: - - - + + diff --git a/docs/src/docPages/api/extensions/collaboration.md b/docs/src/docPages/api/extensions/collaboration.md index 1e299d45..4dadf2ea 100644 --- a/docs/src/docPages/api/extensions/collaboration.md +++ b/docs/src/docPages/api/extensions/collaboration.md @@ -48,5 +48,5 @@ yarn add @tiptap/extension-collaboration yjs y-websocket :::warning Public The content of this editor is shared with other users. ::: - - + + diff --git a/docs/src/docPages/api/extensions/color.md b/docs/src/docPages/api/extensions/color.md index c2d4eb36..249a8114 100644 --- a/docs/src/docPages/api/extensions/color.md +++ b/docs/src/docPages/api/extensions/color.md @@ -29,4 +29,4 @@ This extension requires the [`TextStyle`](/api/marks/text-style) mark. [packages/extension-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/dropcursor.md b/docs/src/docPages/api/extensions/dropcursor.md index dd8d6356..9bcd68b3 100644 --- a/docs/src/docPages/api/extensions/dropcursor.md +++ b/docs/src/docPages/api/extensions/dropcursor.md @@ -26,4 +26,4 @@ yarn add @tiptap/extension-dropcursor [packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/floating-menu.md b/docs/src/docPages/api/extensions/floating-menu.md index cdc6dec5..ac4daed2 100644 --- a/docs/src/docPages/api/extensions/floating-menu.md +++ b/docs/src/docPages/api/extensions/floating-menu.md @@ -38,10 +38,7 @@ new Editor({ ``` ## Using a framework - + ### Custom logic Customize the logic for showing the menu with the `shouldShow` option. For components, `shouldShow` can be passed as a prop. diff --git a/docs/src/docPages/api/extensions/focus.md b/docs/src/docPages/api/extensions/focus.md index adae9bed..677a99ad 100644 --- a/docs/src/docPages/api/extensions/focus.md +++ b/docs/src/docPages/api/extensions/focus.md @@ -25,4 +25,4 @@ yarn add @tiptap/extension-focus [packages/extension-focus/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-focus/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/font-family.md b/docs/src/docPages/api/extensions/font-family.md index d7db0682..8c3ce88f 100644 --- a/docs/src/docPages/api/extensions/font-family.md +++ b/docs/src/docPages/api/extensions/font-family.md @@ -29,4 +29,4 @@ This extension requires the [`TextStyle`](/api/marks/text-style) mark. [packages/extension-font-family/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/gapcursor.md b/docs/src/docPages/api/extensions/gapcursor.md index d71c65cb..75f6d279 100644 --- a/docs/src/docPages/api/extensions/gapcursor.md +++ b/docs/src/docPages/api/extensions/gapcursor.md @@ -19,4 +19,4 @@ yarn add @tiptap/extension-gapcursor [packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-gapcursor/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/history.md b/docs/src/docPages/api/extensions/history.md index 171ab68b..fbd4de6b 100644 --- a/docs/src/docPages/api/extensions/history.md +++ b/docs/src/docPages/api/extensions/history.md @@ -44,4 +44,4 @@ yarn add @tiptap/extension-history [packages/extension-history/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-history/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/placeholder.md b/docs/src/docPages/api/extensions/placeholder.md index dc6be061..588c4379 100644 --- a/docs/src/docPages/api/extensions/placeholder.md +++ b/docs/src/docPages/api/extensions/placeholder.md @@ -26,4 +26,4 @@ yarn add @tiptap/extension-placeholder [packages/extension-placeholder/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/text-align.md b/docs/src/docPages/api/extensions/text-align.md index 455bbe95..f9298c02 100644 --- a/docs/src/docPages/api/extensions/text-align.md +++ b/docs/src/docPages/api/extensions/text-align.md @@ -46,4 +46,4 @@ yarn add @tiptap/extension-text-align [packages/extension-text-align/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-align/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/typography.md b/docs/src/docPages/api/extensions/typography.md index b843e27b..ee8eb4dd 100644 --- a/docs/src/docPages/api/extensions/typography.md +++ b/docs/src/docPages/api/extensions/typography.md @@ -45,4 +45,4 @@ yarn add @tiptap/extension-typography [packages/extension-typography/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/) ## Usage - + diff --git a/docs/src/docPages/api/marks/bold.md b/docs/src/docPages/api/marks/bold.md index 9e6b12da..1a3030b4 100644 --- a/docs/src/docPages/api/marks/bold.md +++ b/docs/src/docPages/api/marks/bold.md @@ -39,4 +39,4 @@ yarn add @tiptap/extension-bold [packages/extension-bold/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bold/) ## Usage - + diff --git a/docs/src/docPages/api/marks/code.md b/docs/src/docPages/api/marks/code.md index f27cabbd..4a3b3434 100644 --- a/docs/src/docPages/api/marks/code.md +++ b/docs/src/docPages/api/marks/code.md @@ -35,4 +35,4 @@ yarn add @tiptap/extension-code [packages/extension-code/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code/) ## Usage - + diff --git a/docs/src/docPages/api/marks/highlight.md b/docs/src/docPages/api/marks/highlight.md index 44c08b0b..662f6e8f 100644 --- a/docs/src/docPages/api/marks/highlight.md +++ b/docs/src/docPages/api/marks/highlight.md @@ -36,4 +36,4 @@ yarn add @tiptap/extension-highlight [packages/extension-highlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-highlight/) ## Usage - + diff --git a/docs/src/docPages/api/marks/italic.md b/docs/src/docPages/api/marks/italic.md index 12e82be7..d2ea667a 100644 --- a/docs/src/docPages/api/marks/italic.md +++ b/docs/src/docPages/api/marks/italic.md @@ -40,4 +40,4 @@ yarn add @tiptap/extension-italic [packages/extension-italic/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-italic/) ## Usage - + diff --git a/docs/src/docPages/api/marks/link.md b/docs/src/docPages/api/marks/link.md index c938b82b..bd3639f3 100644 --- a/docs/src/docPages/api/marks/link.md +++ b/docs/src/docPages/api/marks/link.md @@ -40,4 +40,4 @@ This extension doesn’t bind a specific keyboard shortcut. You would probably o [packages/extension-link/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/) ## Usage - + diff --git a/docs/src/docPages/api/marks/strike.md b/docs/src/docPages/api/marks/strike.md index 7d81647a..2feba2e5 100644 --- a/docs/src/docPages/api/marks/strike.md +++ b/docs/src/docPages/api/marks/strike.md @@ -39,4 +39,4 @@ yarn add @tiptap/extension-strike [packages/extension-strike/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-strike/) ## Usage - + diff --git a/docs/src/docPages/api/marks/subscript.md b/docs/src/docPages/api/marks/subscript.md index 6f459baa..7a8a076c 100644 --- a/docs/src/docPages/api/marks/subscript.md +++ b/docs/src/docPages/api/marks/subscript.md @@ -33,4 +33,4 @@ yarn add @tiptap/extension-subscript [packages/extension-subscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-subscript/) ## Usage - + diff --git a/docs/src/docPages/api/marks/superscript.md b/docs/src/docPages/api/marks/superscript.md index 2d46b60f..9f471d4b 100644 --- a/docs/src/docPages/api/marks/superscript.md +++ b/docs/src/docPages/api/marks/superscript.md @@ -33,4 +33,4 @@ yarn add @tiptap/extension-superscript [packages/extension-superscript/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-superscript/) ## Usage - + diff --git a/docs/src/docPages/api/marks/text-style.md b/docs/src/docPages/api/marks/text-style.md index 841284ae..95dc7303 100644 --- a/docs/src/docPages/api/marks/text-style.md +++ b/docs/src/docPages/api/marks/text-style.md @@ -22,4 +22,4 @@ yarn add @tiptap/extension-text-style [packages/extension-text-style/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/) ## Usage - + diff --git a/docs/src/docPages/api/marks/underline.md b/docs/src/docPages/api/marks/underline.md index 8fc5db65..c3658785 100644 --- a/docs/src/docPages/api/marks/underline.md +++ b/docs/src/docPages/api/marks/underline.md @@ -39,4 +39,4 @@ yarn add @tiptap/extension-underline [packages/extension-underline/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-underline/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/blockquote.md b/docs/src/docPages/api/nodes/blockquote.md index 162f0b2e..31cd9dd9 100644 --- a/docs/src/docPages/api/nodes/blockquote.md +++ b/docs/src/docPages/api/nodes/blockquote.md @@ -33,4 +33,4 @@ yarn add @tiptap/extension-blockquote [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-blockquote/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/bullet-list.md b/docs/src/docPages/api/nodes/bullet-list.md index 65f38056..d9cd0a4b 100644 --- a/docs/src/docPages/api/nodes/bullet-list.md +++ b/docs/src/docPages/api/nodes/bullet-list.md @@ -35,4 +35,4 @@ This extension requires the [`ListItem`](/api/nodes/list-item) node. [packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-bullet-list/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/code-block-lowlight.md b/docs/src/docPages/api/nodes/code-block-lowlight.md index 67c423f1..304b5aef 100644 --- a/docs/src/docPages/api/nodes/code-block-lowlight.md +++ b/docs/src/docPages/api/nodes/code-block-lowlight.md @@ -34,4 +34,4 @@ yarn add @tiptap/extension-code-block-lowlight [packages/extension-code-block-lowlight/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block-lowlight/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/code-block.md b/docs/src/docPages/api/nodes/code-block.md index f33e3d2f..570fe83f 100644 --- a/docs/src/docPages/api/nodes/code-block.md +++ b/docs/src/docPages/api/nodes/code-block.md @@ -38,4 +38,4 @@ yarn add @tiptap/extension-code-block [packages/extension-code-block/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-code-block/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/document.md b/docs/src/docPages/api/nodes/document.md index d1e0ac27..351ef64c 100644 --- a/docs/src/docPages/api/nodes/document.md +++ b/docs/src/docPages/api/nodes/document.md @@ -23,4 +23,4 @@ yarn add @tiptap/extension-document [packages/extension-document/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-document/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/emoji.md b/docs/src/docPages/api/nodes/emoji.md index 60d84fee..498a7047 100644 --- a/docs/src/docPages/api/nodes/emoji.md +++ b/docs/src/docPages/api/nodes/emoji.md @@ -16,4 +16,4 @@ You can use any emoji picker, or build your own. Just use [commands](/api/comman this.editor.chain().focus().insertContent('✨').run() ``` - + diff --git a/docs/src/docPages/api/nodes/hard-break.md b/docs/src/docPages/api/nodes/hard-break.md index da0f10bd..7c9cceb9 100644 --- a/docs/src/docPages/api/nodes/hard-break.md +++ b/docs/src/docPages/api/nodes/hard-break.md @@ -27,4 +27,4 @@ yarn add @tiptap/extension-hard-break [packages/extension-hard-break/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-hard-break/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/heading.md b/docs/src/docPages/api/nodes/heading.md index efd9ecb9..a7d3b171 100644 --- a/docs/src/docPages/api/nodes/heading.md +++ b/docs/src/docPages/api/nodes/heading.md @@ -34,4 +34,4 @@ yarn add @tiptap/extension-heading [packages/extension-heading/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-heading/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/horizontal-rule.md b/docs/src/docPages/api/nodes/horizontal-rule.md index 97a36bd6..b83c0acc 100644 --- a/docs/src/docPages/api/nodes/horizontal-rule.md +++ b/docs/src/docPages/api/nodes/horizontal-rule.md @@ -32,4 +32,4 @@ yarn add @tiptap/extension-horizontal-rule [packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-horizontal-rule/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/image.md b/docs/src/docPages/api/nodes/image.md index 85fe6d2b..aceb01be 100644 --- a/docs/src/docPages/api/nodes/image.md +++ b/docs/src/docPages/api/nodes/image.md @@ -27,4 +27,4 @@ yarn add @tiptap/extension-image [packages/extension-image/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/list-item.md b/docs/src/docPages/api/nodes/list-item.md index a6bfd6b0..fc2a86cb 100644 --- a/docs/src/docPages/api/nodes/list-item.md +++ b/docs/src/docPages/api/nodes/list-item.md @@ -29,4 +29,4 @@ This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedL [packages/extension-list-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list-item/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/mention.md b/docs/src/docPages/api/nodes/mention.md index c4895ec6..22c03fe6 100644 --- a/docs/src/docPages/api/nodes/mention.md +++ b/docs/src/docPages/api/nodes/mention.md @@ -67,4 +67,4 @@ It’s also possible to use Vanilla JavaScript, but that is probably a lot more [packages/extension-mention/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-mention/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/ordered-list.md b/docs/src/docPages/api/nodes/ordered-list.md index a997cd99..14f1e25d 100644 --- a/docs/src/docPages/api/nodes/ordered-list.md +++ b/docs/src/docPages/api/nodes/ordered-list.md @@ -35,4 +35,4 @@ This extension requires the [`ListItem`](/api/nodes/list-item) node. [packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-ordered-list/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/paragraph.md b/docs/src/docPages/api/nodes/paragraph.md index 17deed51..cc0a14ad 100644 --- a/docs/src/docPages/api/nodes/paragraph.md +++ b/docs/src/docPages/api/nodes/paragraph.md @@ -35,4 +35,4 @@ yarn add @tiptap/extension-paragraph [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-paragraph/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/table-cell.md b/docs/src/docPages/api/nodes/table-cell.md index 614b5cfb..55883da0 100644 --- a/docs/src/docPages/api/nodes/table-cell.md +++ b/docs/src/docPages/api/nodes/table-cell.md @@ -19,4 +19,4 @@ This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes [packages/extension-table-cell/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-cell/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/table-header.md b/docs/src/docPages/api/nodes/table-header.md index db3a50cb..bc4d800b 100644 --- a/docs/src/docPages/api/nodes/table-header.md +++ b/docs/src/docPages/api/nodes/table-header.md @@ -35,4 +35,4 @@ This extension requires the [`Table`](/api/nodes/table), [`TableRow`](/api/nodes [packages/extension-table-header/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-header/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/table-row.md b/docs/src/docPages/api/nodes/table-row.md index ab69b2eb..afc4c60c 100644 --- a/docs/src/docPages/api/nodes/table-row.md +++ b/docs/src/docPages/api/nodes/table-row.md @@ -19,4 +19,4 @@ This extension requires the [`Table`](/api/nodes/table), [`TableHeader`](/api/no [packages/extension-table-row/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table-row/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/table.md b/docs/src/docPages/api/nodes/table.md index ec0917a5..97594c4f 100644 --- a/docs/src/docPages/api/nodes/table.md +++ b/docs/src/docPages/api/nodes/table.md @@ -55,4 +55,4 @@ This extension requires the [`TableRow`](/api/nodes/table-row), [`TableHeader`]( [packages/extension-table/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/task-item.md b/docs/src/docPages/api/nodes/task-item.md index 2eb82e65..2076ec2e 100644 --- a/docs/src/docPages/api/nodes/task-item.md +++ b/docs/src/docPages/api/nodes/task-item.md @@ -29,4 +29,4 @@ This extension requires the [`TaskList`](/api/nodes/task-list) node. [packages/extension-task-item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-item/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/task-list.md b/docs/src/docPages/api/nodes/task-list.md index bfa8ed7a..5d4ccdc0 100644 --- a/docs/src/docPages/api/nodes/task-list.md +++ b/docs/src/docPages/api/nodes/task-list.md @@ -35,4 +35,4 @@ This extension requires the [`TaskItem`](/api/nodes/task-item) extension. [packages/extension-task-list/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-task-list/) ## Usage - + diff --git a/docs/src/docPages/api/nodes/text.md b/docs/src/docPages/api/nodes/text.md index 149aa225..66d067d3 100644 --- a/docs/src/docPages/api/nodes/text.md +++ b/docs/src/docPages/api/nodes/text.md @@ -21,4 +21,4 @@ yarn add @tiptap/extension-text [packages/extension-text/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text/) ## Usage - + diff --git a/docs/src/docPages/api/utilities/html.md b/docs/src/docPages/api/utilities/html.md index 1b1d76fd..7b66db0a 100644 --- a/docs/src/docPages/api/utilities/html.md +++ b/docs/src/docPages/api/utilities/html.md @@ -10,7 +10,7 @@ All it needs is JSON or a HTML string, and a list of extensions. [packages/html/](https://github.com/ueberdosis/tiptap/blob/main/packages/html/) ## Generate HTML from JSON - + ## Generate JSON from HTML - + diff --git a/docs/src/docPages/examples/book.md b/docs/src/docPages/examples/book.md index efb72861..b434eb6d 100644 --- a/docs/src/docPages/examples/book.md +++ b/docs/src/docPages/examples/book.md @@ -4,7 +4,4 @@ This demo has 250 paragraphs and more than 22,000 words, check the performance y Most of the processing is needed to check the active state of the buttons for the selection. If you’d like to optimize for really long texts, try to limit these checks in your toolbar. But honestly, we think it’s great already, isn’t it? - + diff --git a/docs/src/docPages/examples/collaborative-editing.md b/docs/src/docPages/examples/collaborative-editing.md index 2e55ad29..4851c476 100644 --- a/docs/src/docPages/examples/collaborative-editing.md +++ b/docs/src/docPages/examples/collaborative-editing.md @@ -20,7 +20,7 @@ It connects all clients to a WebSocket server and merges changes to the document Be nice! The content of this editor is shared with other users from the Internet. ::: - + ## Backend In case you’re wondering what kind of sorcery you need on the server to achieve this, here is the whole backend code for the demo: diff --git a/docs/src/docPages/examples/default.md b/docs/src/docPages/examples/default.md index fdd2c76c..a6ce1415 100644 --- a/docs/src/docPages/examples/default.md +++ b/docs/src/docPages/examples/default.md @@ -1,7 +1,4 @@ # Default text editor Did we mention that you have full control over the rendering of the editor? Here is a barebones example without any styling, but packed with a whole set of common extensions. - + diff --git a/docs/src/docPages/examples/drawing.md b/docs/src/docPages/examples/drawing.md index d49d2aaf..6ad82db6 100644 --- a/docs/src/docPages/examples/drawing.md +++ b/docs/src/docPages/examples/drawing.md @@ -1,4 +1,4 @@ # Drawing Did you ever wanted to draw in a text editor? Me neither. Anyway, here is an example how that could work with tiptap. If you want to build something like that, [learn more about node views](/guide/node-views). - + diff --git a/docs/src/docPages/examples/formatting.md b/docs/src/docPages/examples/formatting.md index 48f58d99..70febaa9 100644 --- a/docs/src/docPages/examples/formatting.md +++ b/docs/src/docPages/examples/formatting.md @@ -1,6 +1,3 @@ # Formatting - + diff --git a/docs/src/docPages/examples/images.md b/docs/src/docPages/examples/images.md index a88117b5..4346e91c 100644 --- a/docs/src/docPages/examples/images.md +++ b/docs/src/docPages/examples/images.md @@ -8,7 +8,4 @@ Though thousands of developers use tiptap every day, it’s still not our full-t [Become a sponsor on GitHub →](https://github.com/sponsors/ueberdosis) ::: - + diff --git a/docs/src/docPages/examples/interactivity.md b/docs/src/docPages/examples/interactivity.md index 20f4c15d..eceea800 100644 --- a/docs/src/docPages/examples/interactivity.md +++ b/docs/src/docPages/examples/interactivity.md @@ -2,12 +2,6 @@ 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/examples/markdown-shortcuts.md b/docs/src/docPages/examples/markdown-shortcuts.md index bf60678b..b67e5479 100644 --- a/docs/src/docPages/examples/markdown-shortcuts.md +++ b/docs/src/docPages/examples/markdown-shortcuts.md @@ -1,6 +1,3 @@ # Markdown shortcuts - + diff --git a/docs/src/docPages/examples/menus.md b/docs/src/docPages/examples/menus.md index 0ab41952..75ff9a3c 100644 --- a/docs/src/docPages/examples/menus.md +++ b/docs/src/docPages/examples/menus.md @@ -1,6 +1,3 @@ # Menus - + diff --git a/docs/src/docPages/examples/minimal.md b/docs/src/docPages/examples/minimal.md index f7578e57..80e73298 100644 --- a/docs/src/docPages/examples/minimal.md +++ b/docs/src/docPages/examples/minimal.md @@ -1,6 +1,3 @@ # Minimal setup - + diff --git a/docs/src/docPages/examples/savvy.md b/docs/src/docPages/examples/savvy.md index 71784533..98011cb6 100644 --- a/docs/src/docPages/examples/savvy.md +++ b/docs/src/docPages/examples/savvy.md @@ -1,3 +1,3 @@ # A clever editor - + diff --git a/docs/src/docPages/examples/suggestions.md b/docs/src/docPages/examples/suggestions.md index 65c29880..7fd97a90 100644 --- a/docs/src/docPages/examples/suggestions.md +++ b/docs/src/docPages/examples/suggestions.md @@ -1,6 +1,3 @@ # Mentions - + diff --git a/docs/src/docPages/examples/syntax-highlighting.md b/docs/src/docPages/examples/syntax-highlighting.md index 54d9eef1..8060c55a 100644 --- a/docs/src/docPages/examples/syntax-highlighting.md +++ b/docs/src/docPages/examples/syntax-highlighting.md @@ -1,6 +1,3 @@ # Syntax highlighting - + diff --git a/docs/src/docPages/examples/tables.md b/docs/src/docPages/examples/tables.md index b597d564..ee4c33b0 100644 --- a/docs/src/docPages/examples/tables.md +++ b/docs/src/docPages/examples/tables.md @@ -4,7 +4,4 @@ Using this extension in a commercial project? [Become a sponsor](/sponsor) to fund its development! ::: - + diff --git a/docs/src/docPages/examples/tasks.md b/docs/src/docPages/examples/tasks.md index 7ded27a4..fb89f31f 100644 --- a/docs/src/docPages/examples/tasks.md +++ b/docs/src/docPages/examples/tasks.md @@ -1,6 +1,3 @@ # Tasks - + diff --git a/docs/src/docPages/experiments/collaboration-annotation.md b/docs/src/docPages/experiments/collaboration-annotation.md index e87074e5..51b1ef85 100644 --- a/docs/src/docPages/experiments/collaboration-annotation.md +++ b/docs/src/docPages/experiments/collaboration-annotation.md @@ -43,4 +43,4 @@ This extension requires the [`Collaboration`](/api/extensions/collaboration) ext [packages/extension-collaboration-annotation/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-annotation/) --> ## Usage - + diff --git a/docs/src/docPages/experiments/commands.md b/docs/src/docPages/experiments/commands.md index 1fd071db..e4da4794 100644 --- a/docs/src/docPages/experiments/commands.md +++ b/docs/src/docPages/experiments/commands.md @@ -5,4 +5,4 @@ ## Issues * It’s fine to use, just don’t send bug reports, PRs or anything else. We’ll just need some time to publish that as an official extension. - + diff --git a/docs/src/docPages/experiments/details.md b/docs/src/docPages/experiments/details.md index 510f9219..cbe43def 100644 --- a/docs/src/docPages/experiments/details.md +++ b/docs/src/docPages/experiments/details.md @@ -5,4 +5,4 @@ ## Issues * Nested lists cause trouble - + diff --git a/docs/src/docPages/experiments/embeds.md b/docs/src/docPages/experiments/embeds.md index ae00da76..df5f0f59 100644 --- a/docs/src/docPages/experiments/embeds.md +++ b/docs/src/docPages/experiments/embeds.md @@ -5,4 +5,4 @@ ## Issues * Oh man, building a really good iframe/embed extension will take some time. The best thing to speed up the development is to [sponsor our work](/sponsor) on GitHub. - + diff --git a/docs/src/docPages/experiments/figure.md b/docs/src/docPages/experiments/figure.md index ef1309c5..85ae6813 100644 --- a/docs/src/docPages/experiments/figure.md +++ b/docs/src/docPages/experiments/figure.md @@ -9,4 +9,4 @@ ## Issues * The current implementation works with images only. - + diff --git a/docs/src/docPages/experiments/generic-figure.md b/docs/src/docPages/experiments/generic-figure.md index ae9c4c5f..e2f536af 100644 --- a/docs/src/docPages/experiments/generic-figure.md +++ b/docs/src/docPages/experiments/generic-figure.md @@ -2,4 +2,4 @@ ⚠️ Experiment - + diff --git a/docs/src/docPages/experiments/global-drag-handle.md b/docs/src/docPages/experiments/global-drag-handle.md index 7fe24668..ce152ea6 100644 --- a/docs/src/docPages/experiments/global-drag-handle.md +++ b/docs/src/docPages/experiments/global-drag-handle.md @@ -5,4 +5,4 @@ ## Issues * We’re working on a better, more solid implementation. :) Give us some more time, and please, don’t ask when it’s ready. The best thing to speed up the development is to [sponsor our work](/sponsor) on GitHub. - + diff --git a/docs/src/docPages/experiments/linter.md b/docs/src/docPages/experiments/linter.md index f66f9502..682ee385 100644 --- a/docs/src/docPages/experiments/linter.md +++ b/docs/src/docPages/experiments/linter.md @@ -7,4 +7,4 @@ Linter can be used to check the content as per your wish and highlight it to the ## Issues * There is no decoration API in tiptap, that’s why this is a lot of ProseMirror work. Before we’ll publish that example, we’d need to find a few ways to make it more tiptap-like. For example, it would be great to use Vue/React components for the widget. - + diff --git a/docs/src/docPages/experiments/multiple-editors.md b/docs/src/docPages/experiments/multiple-editors.md index 025396c4..63222d8e 100644 --- a/docs/src/docPages/experiments/multiple-editors.md +++ b/docs/src/docPages/experiments/multiple-editors.md @@ -2,4 +2,4 @@ The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced in real-time with other users. - + diff --git a/docs/src/docPages/experiments/trailing-node.md b/docs/src/docPages/experiments/trailing-node.md index 06970b5c..b7db290a 100644 --- a/docs/src/docPages/experiments/trailing-node.md +++ b/docs/src/docPages/experiments/trailing-node.md @@ -5,4 +5,4 @@ ## Issues * This implementation adds an actual node. It’d be great to use a decoration for that use case, so the document isn’t modified. - + diff --git a/docs/src/docPages/guide/menus.md b/docs/src/docPages/guide/menus.md index f1f7d053..3e3cb73e 100644 --- a/docs/src/docPages/guide/menus.md +++ b/docs/src/docPages/guide/menus.md @@ -18,24 +18,12 @@ A fixed menu, for example on top of the editor, can be anything. We don’t prov ### Bubble menu The [bubble menu](/api/extensions/bubble-menu) appears when selecting text. Markup and styling is totally up to you. - + ### Floating menu The [floating menu](/api/extensions/floating-menu) appears in empty lines. Markup and styling is totally up to you. - + ### Slash commands (work in progress) It’s not an official extension yet, but [there’s an experiment you can use to add what we call slash commands](/experiments/commands). It’ll allow you to start a new line with `/` and will bring up a popup to select which node should be added. diff --git a/docs/src/docPages/guide/node-views/examples.md b/docs/src/docPages/guide/node-views/examples.md index 8bce6ece..97951c2c 100644 --- a/docs/src/docPages/guide/node-views/examples.md +++ b/docs/src/docPages/guide/node-views/examples.md @@ -14,16 +14,16 @@ Keep in mind that those are just examples to get you started, not officially sup ## Drag handles Drag handles aren’t that easy to add. We are still on the lookout what’s the best way to add them. Official support will come at some point, but there’s no timeline yet. - + ## Table of contents This one loops through the editor content, gives all headings an ID and renders a Table of Contents with Vue. - + ## Drawing in the editor The drawing example shows a SVG that enables you to draw inside the editor. - + It’s not working very well with the Collaboration extension. It’s sending all data on every change, which can get pretty huge with Y.js. If you plan to use those two in combination, you need to improve it or your WebSocket backend will melt. diff --git a/docs/src/docPages/guide/node-views/js.md b/docs/src/docPages/guide/node-views/js.md index aaffe426..555b92e5 100644 --- a/docs/src/docPages/guide/node-views/js.md +++ b/docs/src/docPages/guide/node-views/js.md @@ -42,7 +42,7 @@ export default Node.create({ Got it? Let’s see it in action. Feel free to copy the below example to get started. - + That node view even interacts with the editor. Time to see how that is wired up. @@ -120,6 +120,6 @@ return { Got it? You’re free to do anything you like, as long as you return a container for the node view and another one for the content. Here is the above example in action: - + 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). diff --git a/docs/src/docPages/guide/node-views/react.md b/docs/src/docPages/guide/node-views/react.md index 71942180..0e6f9772 100644 --- a/docs/src/docPages/guide/node-views/react.md +++ b/docs/src/docPages/guide/node-views/react.md @@ -44,7 +44,7 @@ There is a little bit of magic required to make this work. But don’t worry, we Got it? Let’s see it in action. Feel free to copy the below example to get started. - + That component doesn’t interact with the editor, though. Time to wire it up. @@ -92,7 +92,7 @@ export default () => { You don’t need to add those `className` attributes, feel free to remove them or pass other class names. Try it out in the following example: - + 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). @@ -115,4 +115,4 @@ Here is the full list of what props you can expect: ## Dragging To make your node views draggable, set `draggable: true` in the extension and add `data-drag-handle` to the DOM element that should function as the drag handle. - + diff --git a/docs/src/docPages/guide/node-views/vue.md b/docs/src/docPages/guide/node-views/vue.md index d47ba748..04f155f3 100644 --- a/docs/src/docPages/guide/node-views/vue.md +++ b/docs/src/docPages/guide/node-views/vue.md @@ -46,7 +46,7 @@ There is a little bit of magic required to make this work. But don’t worry, we Got it? Let’s see it in action. Feel free to copy the below example to get started. - + That component doesn’t interact with the editor, though. Time to wire it up. @@ -114,7 +114,7 @@ export default { 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: - + 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). @@ -202,4 +202,4 @@ export default Vue.extend({ ## Dragging To make your node views draggable, set `draggable: true` in the extension and add `data-drag-handle` to the DOM element that should function as the drag handle. - + diff --git a/docs/src/docPages/guide/output.md b/docs/src/docPages/guide/output.md index 817d1e6f..936709f1 100644 --- a/docs/src/docPages/guide/output.md +++ b/docs/src/docPages/guide/output.md @@ -44,7 +44,7 @@ editor.commands.setContent({ Here is an interactive example where you can see that in action: - + ### Option 2: HTML HTML can be easily rendered in other places, for example in emails and it’s wildly used, so it’s probably easier to switch the editor at some point. Anyway, every editor instance provides a method to get HTML from the current document: @@ -68,7 +68,7 @@ editor.commands.setContent(`

Example Text

`) Use this interactive example to fiddle around: - + ### Option 3: Y.js Our editor has top notch support for Y.js, which is amazing to add features like [realtime collaboration, offline editing, or syncing between devices](/guide/collaborative-editing). @@ -114,18 +114,18 @@ const editor = new Editor({ ### Option 1: Read-only instance of tiptap To render the saved content, set the editor to read-only. That’s how you can achieve the exact same rendering as it’s in the editor, without duplicating your CSS and other code. - + ### Option 2: Generate HTML from ProseMirror JSON If you need to render the content on the server side, for example to generate the HTML for a blog post which has been written in tiptap, you’ll probably want to do just that without an actual editor instance. That’s what the `generateHTML()` is for. It’s a helper function which renders HTML without an actual editor instance. - + By the way, the other way is possible, too. The below examples shows how to generate JSON from HTML. - + ## Migration If you’re migrating existing content to tiptap we would recommend to get your existing output to HTML. That’s probably the best format to get your initial content into tiptap, because ProseMirror ensures there is nothing wrong with it. Even if there are some tags or attributes that aren’t allowed (based on your configuration), tiptap just throws them away quietly. diff --git a/docs/src/docPages/installation/nuxt.md b/docs/src/docPages/installation/nuxt.md index 0dbf5e38..258cf0b5 100644 --- a/docs/src/docPages/installation/nuxt.md +++ b/docs/src/docPages/installation/nuxt.md @@ -101,4 +101,4 @@ You should now see tiptap in your browser. Time to give yourself a pat on the ba ## 5. Use v-model (optional) You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project: - + diff --git a/docs/src/docPages/installation/react.md b/docs/src/docPages/installation/react.md index d1121c7b..814b8e16 100644 --- a/docs/src/docPages/installation/react.md +++ b/docs/src/docPages/installation/react.md @@ -87,4 +87,4 @@ You should now see tiptap in your browser. Time to give yourself a pat on the ba ## 5. The complete setup (optional) Ready to add more? Below is a demo that shows how you could set up what we call the default editor. Feel free to take this and start customizing it then: - + diff --git a/docs/src/docPages/installation/vue2.md b/docs/src/docPages/installation/vue2.md index 0f2199f1..822719cf 100644 --- a/docs/src/docPages/installation/vue2.md +++ b/docs/src/docPages/installation/vue2.md @@ -109,4 +109,4 @@ You should now see tiptap in your browser. Time to give yourself a pat on the ba ## 5. Use v-model (optional) You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project: - + diff --git a/docs/src/main.js b/docs/src/main.js index c0a70428..8381f727 100644 --- a/docs/src/main.js +++ b/docs/src/main.js @@ -5,6 +5,7 @@ import 'prismjs/components/prism-scss.js' import PortalVue from 'portal-vue' import iframeResize from 'iframe-resizer/js/iframeResizer' import App from '~/layouts/App' +import './TiptapDemo' Prism.manual = true diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue index def6bc0f..2e83eb1a 100644 --- a/docs/src/pages/index.vue +++ b/docs/src/pages/index.vue @@ -25,7 +25,9 @@ - +
+ +