Add extension storage

[philippkuehn]

At some point you probably want to save some data within your extension instance or want to provide some methods that are accessible outside of the extension. With this PR it’s possible now.

The stored data is mutable. You can access it within the extension under this.storage.

import { Extension } from '@tiptap/core'

const CustomExtension = Extension.create({
  name: 'customExtension',

  addStorage() {
    return {
      awesomeness: 100,
    }
  },

  onUpdate() {
    this.storage.awesomeness += 1
  },
})

When using Vue or React, this storage is reactive within your templates.

Outside the extension you have access via editor.storage. Make sure that each extension has a unique name.

const editor = new Editor({
  extensions: [
    CustomExtension,
  ],
})

const awesomeness = editor.storage.customExtension.awesomeness

When using TypeScript you can define a type for your storage.

import { Extension } from '@tiptap/core'

export interface CustomExtensionStorage {
  awesomeness: number,
}

const CustomExtension = Extension.create<{}, CustomExtensionStorage>({
  addStorage() {
    return {
      awesomeness: 100,
    }
  },
})

Global storage types can’t be inferred so you have to give a hint:

const storage = editor.storage.customExtension as CustomExtensionStorage

[cusxio]

@philippkuehn is there a reason why we need to call requestAnimationFrame within a requestAnimationFrame ? Why is 1 requestAnimationFrame not sufficient?

[philippkuehn]

I always do a double RAF because of this. Maybe it’s not needed here. Is there any issue with that?