diff --git a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue index d4e08f1e1..e5a4f1d7e 100644 --- a/docs/src/demos/Examples/ExportHtmlOrJson/index.vue +++ b/docs/src/demos/Examples/ExportHtmlOrJson/index.vue @@ -49,9 +49,11 @@ export default { extensions: defaultExtensions(), }) + // Get the initial content … this.json = this.editor.json() this.html = this.editor.html() + // … and get the content after every change. this.editor.on('update', () => { this.json = this.editor.json() this.html = this.editor.html() @@ -65,7 +67,7 @@ export default { }, setContent() { - // you can pass a json document + // You can pass a JSON document … this.editor.setContent({ type: 'document', content: [{ @@ -78,8 +80,11 @@ export default { ], }], }, true) - // HTML string is also supported + + // … but HTML strings are also supported. // this.editor.setContent('

This is some inserted text. 👋

') + + // It’s likely that you’d like to focus the Editor after most commands. this.editor.focus() }, }, diff --git a/docs/src/docPages/examples/export-html-or-json.md b/docs/src/docPages/examples/export-html-or-json.md index edc8b374d..6a32ec1b1 100644 --- a/docs/src/docPages/examples/export-html-or-json.md +++ b/docs/src/docPages/examples/export-html-or-json.md @@ -1,3 +1,3 @@ # Export HTML or JSON - \ No newline at end of file + diff --git a/docs/src/docPages/guide/custom-extensions.md b/docs/src/docPages/guide/custom-extensions.md index 4450e61ce..74c1ba705 100644 --- a/docs/src/docPages/guide/custom-extensions.md +++ b/docs/src/docPages/guide/custom-extensions.md @@ -2,14 +2,15 @@ Let’s extend tiptap with a custom extension! ## Option 1: Change defaults -Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `Bold` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/index.ts) and find the default you’d like to change. In that case, the keyboard shortcut. + +Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the default you’d like to change. In that case, the keyboard shortcut, and just that. ```js // 1. Import the extension import BulletList from '@tiptap/extension-bullet-list' // 2. Overwrite the keyboard shortcuts -const CustomBulletList = new Node() +const CustomBulletList = BulletList() .keys(({ editor }) => ({ 'Mod-l': () => editor.bulletList(), })) @@ -24,6 +25,8 @@ new Editor({ }) ``` +You can overwrite every aspect of an existing extension. [Read more about that here.](/guide/custom-extensions/overwrite-defaults) + ## Option 2: Extend existing extensions ## Option 3: Start from scratch diff --git a/docs/src/docPages/guide/custom-extensions/change-defaults.md b/docs/src/docPages/guide/custom-extensions/change-defaults.md new file mode 100644 index 000000000..03073cdad --- /dev/null +++ b/docs/src/docPages/guide/custom-extensions/change-defaults.md @@ -0,0 +1,96 @@ +# Change defaults + +## Name + +```js +import Document from '@tiptap/extension-document' + +const CustomDocument = Document() + .name('doc') + .create() +``` + +## Settings + +```js +import Heading from '@tiptap/extension-heading' + +const CustomHeading = Heading() + .defaults({ + levels: [1, 2, 3], + class: 'my-custom-heading', + }) + .create() +``` + +## Schema + +```js +import Code from '@tiptap/extension-code' + +const CustomCode = Code() + .schema(() => ({ + excludes: '_', + parseDOM: [ + { tag: 'code' }, + ], + toDOM: () => ['code', { 'data-attribute': 'foobar' }, 0], + })) + .create() +``` + +## Commands + +```js +import Paragraph from '@tiptap/extension-paragraph' + +const CustomParagraph = Paragraph() + .commands(() => ({ + paragraph: () => ({ commands }) => { + return commands.toggleNode(name, 'paragraph') + }, + })) + .create() +``` + +## Keyboard shortcuts + +```js +import BulletList from '@tiptap/extension-bullet-list' + +const CustomBulletList = BulletList() + .keys(({ editor }) => ({ + 'Mod-l': () => editor.bulletList(), + })) + .create() +``` + +## Input rules + +```js +import Strike from '@tiptap/extension-strike' +import { markInputRule } from '@tiptap/core' + +const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm + +const CustomStrike = Strike() + .inputRules(({ type }) => [ + markInputRule(inputRegex, type), + ]) + .create() +``` + +## Paste rules + +```js +import Underline from '@tiptap/extension-underline' +import { markPasteRule } from '@tiptap/core' + +const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm + +const CustomUnderline = Underline() + .pasteRules(({ type }) => [ + markPasteRule(pasteRegex, type), + ]) + .create() +``` diff --git a/docs/src/docPages/guide/custom-extensions/extend-extensions.md b/docs/src/docPages/guide/custom-extensions/extend-extensions.md new file mode 100644 index 000000000..97f3f6f75 --- /dev/null +++ b/docs/src/docPages/guide/custom-extensions/extend-extensions.md @@ -0,0 +1 @@ +# Extend existing extensions diff --git a/docs/src/docPages/guide/custom-extensions/start-from-scratch.md b/docs/src/docPages/guide/custom-extensions/start-from-scratch.md new file mode 100644 index 000000000..3b4a8e256 --- /dev/null +++ b/docs/src/docPages/guide/custom-extensions/start-from-scratch.md @@ -0,0 +1,7 @@ +# Start from scratch + +## 1. Read the documentation + +## 2. Have a look at existing extensions + +## 3. Get started diff --git a/docs/src/links.yaml b/docs/src/links.yaml index b9a34bce8..87ffd649e 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -25,6 +25,16 @@ - title: Custom extensions link: /guide/custom-extensions draft: true + items: + - title: Change defaults + link: /guide/custom-extensions/change-defaults + draft: true + - title: Extend extensions + link: /guide/custom-extensions/extend-extensions + draft: true + - title: Start from scratch + link: /guide/custom-extensions/start-from-scratch + draft: true - title: Use Vue Components link: /guide/use-vue-components draft: true