restructure the content, improve a lot

This commit is contained in:
Hans Pagel
2020-09-25 22:22:44 +02:00
parent 4a508fbf2b
commit a8c6c686d8
12 changed files with 218 additions and 230 deletions

View File

@@ -25,8 +25,114 @@ new Editor({
})
```
You can overwrite every aspect of an existing extension. [Read more about that here.](/guide/custom-extensions/overwrite-defaults)
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, its built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. Youll 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