mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-11-28 07:40:13 +08:00
update content
This commit is contained in:
Hans Pagel
parent
8c3a2b7d1c
commit
3518943e62
@ -11,13 +11,19 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Editor } from '@tiptap/core'
|
||||
import { Editor, mergeAttributes } from '@tiptap/core'
|
||||
import { EditorContent } from '@tiptap/vue'
|
||||
import Document from '@tiptap/extension-document'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import Text from '@tiptap/extension-text'
|
||||
import Link from '@tiptap/extension-link'
|
||||
|
||||
const CustomLink = Link.extend({
|
||||
renderHTML({ attributes }) {
|
||||
return ['strong', mergeAttributes(attributes, { rel: this.options.rel }), 0]
|
||||
},
|
||||
})
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EditorContent,
|
||||
@ -35,7 +41,7 @@ export default {
|
||||
Document(),
|
||||
Paragraph(),
|
||||
Text(),
|
||||
Link(),
|
||||
CustomLink(),
|
||||
],
|
||||
content: `
|
||||
<p>
|
||||
|
||||
@ -3,77 +3,49 @@
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
Keyboard shortcuts may be strings like `'Shift-Control-Enter'`. Keys are based on the strings that can appear in `event.key`, concatenated with a `-`. There is a little tool called [keycode.info](https://keycode.info/), which shows the `event.key` interactively.
|
||||
|
||||
Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use `Space` as an alias for the <code> </code>.
|
||||
|
||||
Modifiers can be given in any order. `Shift`, `Alt`, `Control` and `Cmd` are recognized. For characters that are created by holding shift, the `Shift` prefix is implied, and should not be added explicitly.
|
||||
|
||||
You can use `Mod` as a shorthand for `Cmd` on Mac and `Control` on other platforms.
|
||||
|
||||
## Overwrite keyboard shortcuts
|
||||
|
||||
```js
|
||||
// 1. Import the extension
|
||||
import BulletList from '@tiptap/extension-bullet-list'
|
||||
|
||||
// 2. Overwrite the keyboard shortcuts
|
||||
const CustomBulletList = BulletList()
|
||||
.keys(({ editor }) => ({
|
||||
// ↓ your new keyboard shortcut
|
||||
'Mod-l': () => editor.bulletList(),
|
||||
}))
|
||||
.create() // Don’t forget that!
|
||||
|
||||
// 3. Add the custom extension to your editor
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomBulletList(),
|
||||
// …
|
||||
]
|
||||
})
|
||||
```
|
||||
Tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!
|
||||
|
||||
## Predefined keyboard shortcuts
|
||||
Most of the core extensions register their own keyboard shortcuts. Depending on what set of extension you use, not all of the below listed keyboard shortcuts work for your editor.
|
||||
|
||||
### Essentials
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------ | --------------------- | ----------------- |
|
||||
| Copy | `Control` `C` | `Cmd` `C` |
|
||||
| Cut | `Control` `X` | `Cmd` `X` |
|
||||
| Paste | `Control` `V` | `Cmd` `V` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------ | ------------------------------- | --------------------------- |
|
||||
| Copy | `Control` `C` | `Cmd` `C` |
|
||||
| Cut | `Control` `X` | `Cmd` `X` |
|
||||
| Paste | `Control` `V` | `Cmd` `V` |
|
||||
| Paste without formatting | `Control` `Shift` `V` | `Cmd` `Shift` `V` |
|
||||
| Undo | `Control` `Z` | `Cmd` `Z` |
|
||||
| Undo | `Control` `Z` | `Cmd` `Z` |
|
||||
| Redo | `Control` `Shift` `Z` | `Cmd` `Shift` `Z` |
|
||||
| Insert or edit link | `Control` `K` | `Cmd` `K` |
|
||||
| Open link | `Alt` `Enter` | `Alt` `Enter` |
|
||||
| Find | `Control` `F` | `Cmd` `F` |
|
||||
| Find and replace | `Control` `H` | `Cmd` `Shift` `H` |
|
||||
| Find again | `Control` `G` | `Cmd` `G` |
|
||||
| Insert or edit link | `Control` `K` | `Cmd` `K` |
|
||||
| Open link | `Alt` `Enter` | `Alt` `Enter` |
|
||||
| Find | `Control` `F` | `Cmd` `F` |
|
||||
| Find and replace | `Control` `H` | `Cmd` `Shift` `H` |
|
||||
| Find again | `Control` `G` | `Cmd` `G` |
|
||||
| Find previous | `Control` `Shift` `G` | `Cmd` `Shift` `G` |
|
||||
| Repeat last action | `Control` `Y` | `Cmd` `Y` |
|
||||
| Add a line break | `Shift` `Enter` | `Shift` `Enter` |
|
||||
| Repeat last action | `Control` `Y` | `Cmd` `Y` |
|
||||
| Add a line break | `Shift` `Enter` | `Shift` `Enter` |
|
||||
|
||||
### Text Formatting
|
||||
| Action | Windows/Linux | macOS |
|
||||
| --------------------- | --------------------------------------------- | ----------------- |
|
||||
| Bold | `Control` `B` | `Cmd` `B` |
|
||||
| Italicize | `Control` `I` | `Cmd` `I` |
|
||||
| Underline | `Control` `U` | `Cmd` `U` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| --------------------- | ------------------------------------------------------- | --------------------------- |
|
||||
| Bold | `Control` `B` | `Cmd` `B` |
|
||||
| Italicize | `Control` `I` | `Cmd` `I` |
|
||||
| Underline | `Control` `U` | `Cmd` `U` |
|
||||
| Strikethrough | `Alt` `Shift` `5` | `Cmd` `Shift` `X` |
|
||||
| Superscript | `Control` `.` | `Cmd` `.` |
|
||||
| Subscript | `Control` `,` | `Cmd` `,` |
|
||||
| Superscript | `Control` `.` | `Cmd` `.` |
|
||||
| Subscript | `Control` `,` | `Cmd` `,` |
|
||||
| Copy text formatting | `Control` `Alt` `C` | `Cmd` `Alt` `C` |
|
||||
| Paste text formatting | `Control` `Alt` `V` | `Cmd` `Alt` `V` |
|
||||
| Clear text formatting | `Control` <code>\</code><br>`Control` `Space` | `Cmd` `\` |
|
||||
| Clear text formatting | `Control` <code>\</code><br>`Control` `Space` | `Cmd` `\` |
|
||||
| Increase font size | `Control` `Shift` `>` | `Cmd` `Shift` `>` |
|
||||
| Decrease font size | `Control` `Shift` `<` | `Cmd` `Shift` `<` |
|
||||
|
||||
### Paragraph Formatting
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------ | --------------------- | --------------------- |
|
||||
| Increase paragraph indentation | `Control` `]` | `Cmd` `]` |
|
||||
| Decrease paragraph indentation | `Control` `[` | `Cmd` `[` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------ | ------------------------------- | ------------------------------- |
|
||||
| Increase paragraph indentation | `Control` `]` | `Cmd` `]` |
|
||||
| Decrease paragraph indentation | `Control` `[` | `Cmd` `[` |
|
||||
| Apply normal text style | `Control` `Alt` `0` | `Cmd` `Alt` `0` |
|
||||
| Apply heading style 1 | `Control` `Alt` `1` | `Cmd` `Alt` `1` |
|
||||
| Apply heading style 2 | `Control` `Alt` `2` | `Cmd` `Alt` `2` |
|
||||
@ -91,14 +63,48 @@ new Editor({
|
||||
| Move paragraph down | `Control` `Shift` `↓` | `Control` `Shift` `↓` |
|
||||
|
||||
### Text Selection
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------------------------- | --------------------- | ----------------- |
|
||||
| Select all | `Control` `A` | `Cmd` `A` |
|
||||
| Extend selection one character to left | `Shift` `←` | `Shift` `←` |
|
||||
| Extend selection one character to right | `Shift` `→` | `Shift` `→` |
|
||||
| Extend selection one line up | `Shift` `↑` | `Shift` `↑` |
|
||||
| Extend selection one line down | `Shift` `↓` | `Shift` `↓` |
|
||||
| Action | Windows/Linux | macOS |
|
||||
| ------------------------------------------------- | ------------------------------- | --------------------------- |
|
||||
| Select all | `Control` `A` | `Cmd` `A` |
|
||||
| Extend selection one character to left | `Shift` `←` | `Shift` `←` |
|
||||
| Extend selection one character to right | `Shift` `→` | `Shift` `→` |
|
||||
| Extend selection one line up | `Shift` `↑` | `Shift` `↑` |
|
||||
| Extend selection one line down | `Shift` `↓` | `Shift` `↓` |
|
||||
| Extend selection one paragraph up | `Alt` `Shift` `↑` | `Alt` `Shift` `↑` |
|
||||
| Extend selection one paragraph down | `Alt` `Shift` `↓` | `Alt` `Shift` `↓` |
|
||||
| Extend selection to the beginning of the document | `Control` `Shift` `↑` | `Cmd` `Shift` `↑` |
|
||||
| Extend selection to the end of the document | `Control` `Shift` `↓` | `Cmd` `Shift` `↓` |
|
||||
|
||||
## Overwrite keyboard shortcuts
|
||||
Keyboard shortcuts may be strings like `'Shift-Control-Enter'`. Keys are based on the strings that can appear in `event.key`, concatenated with a `-`. There is a little tool called [keycode.info](https://keycode.info/), which shows the `event.key` interactively.
|
||||
|
||||
Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use `Space` as an alias for the <code> </code>.
|
||||
|
||||
Modifiers can be given in any order. `Shift`, `Alt`, `Control` and `Cmd` are recognized. For characters that are created by holding shift, the `Shift` prefix is implied, and should not be added explicitly.
|
||||
|
||||
You can use `Mod` as a shorthand for `Cmd` on Mac and `Control` on other platforms.
|
||||
|
||||
Here is an example how you can overwrite the keyboard shortcuts for an existing extension:
|
||||
|
||||
```js
|
||||
// 1. Import the extension
|
||||
import BulletList from '@tiptap/extension-bullet-list'
|
||||
|
||||
// 2. Overwrite the keyboard shortcuts
|
||||
const CustomBulletList = BulletList.extend({
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
// ↓ your new keyboard shortcut
|
||||
'Mod-l': () => this.editor.bulletList(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 3. Add the custom extension to your editor
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomBulletList(),
|
||||
// …
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
161
docs/src/docPages/guide/build-custom-extensions.md
Normal file
161
docs/src/docPages/guide/build-custom-extensions.md
Normal file
@ -0,0 +1,161 @@
|
||||
# Build custom extensions
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or starting from scratch.
|
||||
|
||||
## Option 1: Extend existing extensions
|
||||
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 part you would like to change. In that case, the keyboard shortcut, and just that.
|
||||
|
||||
Every extension has an `extend()` method, which takes an object with everything you want to change or add to it. For the bespoken example, your code could like that:
|
||||
|
||||
```js
|
||||
// 1. Import the extension
|
||||
import BulletList from '@tiptap/extension-bullet-list'
|
||||
|
||||
// 2. Overwrite the keyboard shortcuts
|
||||
const CustomBulletList = BulletList.extend({
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-l': () => this.editor.bulletList(),
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// 3. Add the custom extension to your editor
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomBulletList(),
|
||||
// …
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
The same applies to every aspect of an existing extension, except to the name. Let’s look at all the things that you can change through the extend method. We focus on one aspect in every example, but you can combine all those examples and change multiple aspects in one `extend()` call too.
|
||||
|
||||
### Name
|
||||
The extension name is used in a whole lot of places and changing it isn’t too easy. If you want to change the name of an extension, it’s recommended to copy the whole extension and change the name in all occurrences.
|
||||
|
||||
The extension name is also part of the JSON. If you [store your content as JSON](http://localhost:3000/guide/store-content#option-1-json), you need to change the name in there too.
|
||||
|
||||
### Settings
|
||||
|
||||
All settings can be overwritten through the extension anyway, but if you want to change the defaults, for example to provide a library on top of tiptap for other developers, you can do it like that:
|
||||
|
||||
```js
|
||||
import Heading from '@tiptap/extension-heading'
|
||||
|
||||
const CustomHeading = Heading.extend({
|
||||
defaultOptions: {
|
||||
levels: [1, 2, 3],
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Schema
|
||||
|
||||
Tiptap works with a [strict schema](/api/schema), which configures how the content can be structured, nested, how it behaves and many more things. You can change all aspects of the schema for existing extensions. Let’s walk through a few common use cases.
|
||||
|
||||
The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it:
|
||||
|
||||
```js
|
||||
// blockquotes include paragraphs only
|
||||
import Blockquote from '@tiptap/extension-blockquote'
|
||||
|
||||
const CustomBlockquote = Blockquote.extend({
|
||||
content: 'paragraph block*',
|
||||
})
|
||||
```
|
||||
|
||||
The schema even allows to make your nodes draggable, that’s what the `draggable` option is for, which defaults to `false`. Here is an example for draggable paragraphs:
|
||||
|
||||
```js
|
||||
// draggable paragraphs
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
|
||||
const CustomParagraph = Paragraph.extend({
|
||||
draggable: true,
|
||||
})
|
||||
```
|
||||
|
||||
### Commands
|
||||
|
||||
```js
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
|
||||
const CustomParagraph = Paragraph.extend({
|
||||
addCommands() {
|
||||
return {
|
||||
paragraph: () => ({ commands }) => {
|
||||
return commands.toggleBlockType('paragraph', 'paragraph')
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Keyboard shortcuts
|
||||
Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:
|
||||
|
||||
```js
|
||||
// change the bullet list keyboard shortcut
|
||||
import BulletList from '@tiptap/extension-bullet-list'
|
||||
|
||||
const CustomBulletList = BulletList.extend({
|
||||
addKeyboardShortcuts() {
|
||||
return {
|
||||
'Mod-l': () => this.editor.bulletList(),
|
||||
}
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Input rules
|
||||
|
||||
```js
|
||||
// use the ~single tilde~ markdown shortcut
|
||||
import Strike from '@tiptap/extension-strike'
|
||||
import { markInputRule } from '@tiptap/core'
|
||||
|
||||
const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
|
||||
|
||||
const CustomStrike = Strike.extend({
|
||||
addInputRules() {
|
||||
return [
|
||||
markInputRule(inputRegex, this.type),
|
||||
]
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
### Paste rules
|
||||
|
||||
```js
|
||||
// overwrite the underline regex for pasted text
|
||||
import Underline from '@tiptap/extension-underline'
|
||||
import { markPasteRule } from '@tiptap/core'
|
||||
|
||||
const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
|
||||
|
||||
const CustomUnderline = Underline.extend({
|
||||
addPasteRules() {
|
||||
return [
|
||||
markPasteRule(inputRegex, this.type),
|
||||
]
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Option 2: Start from scratch
|
||||
|
||||
### Read the documentation
|
||||
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
|
||||
|
||||
### Have a look at existing extensions
|
||||
|
||||
### Get started
|
||||
|
||||
### Ask questions
|
||||
|
||||
### Share your extension
|
||||
@ -1,142 +0,0 @@
|
||||
# Custom extensions
|
||||
|
||||
## toc
|
||||
|
||||
## Introduction
|
||||
One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or on top of that.
|
||||
|
||||
## 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 `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 = BulletList()
|
||||
.keys(({ editor }) => ({
|
||||
'Mod-l': () => editor.bulletList(),
|
||||
}))
|
||||
.create() // Don’t forget that!
|
||||
|
||||
// 3. Add the custom extension to your editor
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomBulletList(),
|
||||
// …
|
||||
]
|
||||
})
|
||||
```
|
||||
|
||||
You can overwrite every aspect of an existing extension:
|
||||
|
||||
### 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.toggleBlockType(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()
|
||||
```
|
||||
|
||||
## Option 2: Extend existing extensions
|
||||
|
||||
## Option 3: Start from scratch
|
||||
|
||||
### 1. Read the documentation
|
||||
Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
|
||||
|
||||
### 2. Have a look at existing extensions
|
||||
|
||||
### 3. Get started
|
||||
|
||||
### 4. Ask questions
|
||||
|
||||
### 5. Publish a community extension
|
||||
@ -28,15 +28,21 @@ p {
|
||||
## Option 2: Add custom classes
|
||||
Most extensions have a `class` option, which you can use to add a custom CSS class to the HTML tag.
|
||||
|
||||
Most extensions allow you to add attributes to the rendered HTML through the `attributes` configuration. You can use that to add a custom class (or any other attribute):
|
||||
|
||||
```js
|
||||
new Editor({
|
||||
extensions: [
|
||||
Document(),
|
||||
Paragraph({
|
||||
class: 'my-custom-paragraph',
|
||||
attributes: {
|
||||
class: 'my-custom-paragraph',
|
||||
},
|
||||
}),
|
||||
Heading({
|
||||
class: 'my-custom-heading',
|
||||
attributes: {
|
||||
class: 'my-custom-heading',
|
||||
},
|
||||
}),
|
||||
Text(),
|
||||
]
|
||||
@ -50,17 +56,21 @@ The rendered HTML will look like that:
|
||||
<p class="my-custom-paragraph">Wow, that’s really custom.</p>
|
||||
```
|
||||
|
||||
If there are already classes defined by the extensions, your classes will be added.
|
||||
|
||||
## Option 3: Customize the HTML
|
||||
You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag:
|
||||
|
||||
```js
|
||||
import Bold from '@tiptap/extension-bold'
|
||||
|
||||
const CustomBold = Bold
|
||||
.schema(() => ({
|
||||
toDOM: () => ['b', 0],
|
||||
}))
|
||||
.create()
|
||||
const CustomBold = Bold.extend({
|
||||
renderHTML({ attributes }) {
|
||||
// Original:
|
||||
// return ['strong', attributes, 0]
|
||||
return ['b', attributes, 0]
|
||||
},
|
||||
})
|
||||
|
||||
new Editor({
|
||||
extensions: [
|
||||
@ -70,4 +80,4 @@ new Editor({
|
||||
})
|
||||
```
|
||||
|
||||
You should put your custom extensions in separate files though, but I think you’ve got the idea.
|
||||
You should put your custom extensions in separate files though, but I think you got the idea.
|
||||
|
||||
@ -36,48 +36,39 @@ new Editor({
|
||||
```
|
||||
|
||||
### New document type
|
||||
**We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
|
||||
|
||||
```js
|
||||
import Document from '@tiptap/extension-document'
|
||||
|
||||
const CustomDocument = Document.name('doc').create()
|
||||
|
||||
new Editor({
|
||||
extensions: [
|
||||
CustomDocument(),
|
||||
// …
|
||||
]
|
||||
})
|
||||
```
|
||||
~~**We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.~~
|
||||
|
||||
### New extension API
|
||||
In case you’ve built some custom extensions for your project, you’re required to rewrite them to fit the new API. No worries, you can keep a lot of your work though. The `schema`, `commands`, `keys`, `inputRules` and `pasteRules` all work like they did before. It’s just different how you register them.
|
||||
|
||||
```js
|
||||
import { Node } from '@tiptap/core'
|
||||
import { createNode } from '@tiptap/core'
|
||||
|
||||
const CustomExtension = new Node()
|
||||
.name('custom_extension')
|
||||
.defaults({
|
||||
// …
|
||||
})
|
||||
.schema(() => ({
|
||||
// …
|
||||
}))
|
||||
.commands(({ editor, name }) => ({
|
||||
// …
|
||||
}))
|
||||
.keys(({ editor }) => ({
|
||||
// …
|
||||
}))
|
||||
.inputRules(({ type }) => [
|
||||
// …
|
||||
])
|
||||
.pasteRules(({ type }) => [
|
||||
// …
|
||||
])
|
||||
.create()
|
||||
const CustomExtension = createNode({
|
||||
name: 'custom_extension'
|
||||
defaultOptions: {
|
||||
…
|
||||
},
|
||||
addAttributes() {
|
||||
…
|
||||
},
|
||||
parseHTML() {
|
||||
…
|
||||
},
|
||||
renderHTML({ node, attributes }) {
|
||||
…
|
||||
},
|
||||
addCommands() {
|
||||
…
|
||||
},
|
||||
addKeyboardShortcuts() {
|
||||
…
|
||||
},
|
||||
addInputRules() {
|
||||
…
|
||||
},
|
||||
// and more …
|
||||
})
|
||||
```
|
||||
|
||||
Don’t forget to call `create()` in the end! Read more about [all the nifty details building custom extensions](/guide/custom-extensions) in our guide.
|
||||
@ -87,8 +78,7 @@ Don’t forget to call `create()` in the end! Read more about [all the nifty det
|
||||
|
||||
| Old method name | New method name |
|
||||
| --------------- | --------------- |
|
||||
| ~~`getHTML`~~ | `html` |
|
||||
| ~~`getJSON`~~ | `json` |
|
||||
| ~~`…`~~ | `…` |
|
||||
|
||||
### Commands can be chained now
|
||||
|
||||
|
||||
@ -78,15 +78,15 @@
|
||||
link: /guide/getting-started
|
||||
- title: Configuration
|
||||
link: /guide/configuration
|
||||
- title: Build your editor
|
||||
link: /guide/build-your-editor
|
||||
- title: Create your editor
|
||||
link: /guide/create-your-editor
|
||||
draft: true
|
||||
- title: Custom styling
|
||||
link: /guide/custom-styling
|
||||
- title: Store content
|
||||
link: /guide/store-content
|
||||
- title: Custom extensions
|
||||
link: /guide/custom-extensions
|
||||
- title: Build custom extensions
|
||||
link: /guide/build-custom-extensions
|
||||
# - title: Use Vue Components
|
||||
# link: /guide/use-vue-components
|
||||
# draft: true
|
||||
|
||||
@ -6,7 +6,7 @@ export const inputRegex = /^\s*>\s$/gm
|
||||
const Blockquote = createNode({
|
||||
name: 'blockquote',
|
||||
|
||||
content: 'block*',
|
||||
content: 'paragraph block*',
|
||||
|
||||
group: 'block',
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user