feat: Add extension storage (#2069)

This commit is contained in:
Philipp Kühn
2021-10-22 08:52:54 +02:00
committed by GitHub
parent 6987505fda
commit 7ffabf251c
26 changed files with 555 additions and 105 deletions

View File

@@ -78,6 +78,39 @@ const CustomHeading = Heading.extend({
})
```
### Storage
At some point you probably want to save some data within your extension instance. This data is mutable. You can access it within the extension under `this.storage`.
```js
import { Extension } from '@tiptap/core'
const CustomExtension = Extension.create({
name: 'customExtension',
addStorage() {
return {
awesomeness: 100,
}
},
onUpdate() {
this.storage.awesomeness += 1
},
})
```
Outside the extension you have access via `editor.storage`. Make sure that each extension has a unique name.
```js
const editor = new Editor({
extensions: [
CustomExtension,
],
})
const awesomeness = editor.storage.customExtension.awesomeness
```
### Schema
tiptap works with a strict 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](/api/schema) for existing extensions. Lets walk through a few common use cases.

View File

@@ -32,6 +32,25 @@ const CustomExtension = Extension.create<CustomExtensionOptions>({
})
```
### Storage types
To add types for your extension storage, youll have to pass that as a second type parameter.
```ts
import { Extension } from '@tiptap/core'
export interface CustomExtensionStorage {
awesomeness: number,
}
const CustomExtension = Extension.create<{}, CustomExtensionStorage>({
addStorage() {
return {
awesomeness: 100,
}
},
})
```
### Command type
The core package also exports a `Command` type, which needs to be added to all commands that you specify in your code. Here is an example: