feat(core): editor.storage strong typing and separate instances

[nperez0111]

Changes Overview

• feat(core): separate storage instances
• feat: strong typing for storage instances

Previously, storage was a singleton per extension, this caused strange bugs when using multiple editor instances on a single page.

Now, storage instances are per editor instance, so changing the value on one editor.storage instance will not affect another editor's value.

This also introduces strong typing for Storage instances, using a similar pattern as commands, where you can define the type of the storage value using namespaces like:

declare module '@tiptap/core' {
  interface Storage {
    extensionName: StorageValue
  }
}

Node, Mark and Extension config options now are strongly typed and do not allow arbitrary keys on the options object.

To add keys, like when using extendNodeSchema or extendMarkSchema, you can do this:

declare module '@tiptap/core' {
  interface NodeConfig {
    /**
     * This key will be added to all NodeConfig objects in your project
     */
    newKey?: string
  }
  interface MarkConfig {
    /**
     * This key will be added to all MarkConfig objects in your project
     */
    newKey?: string
  }
  interface ExtensionConfig {
    /**
     * This key will be added to all ExtensionConfig objects in your project
     */
    newKey?: string
  }
}

Implementation Approach

Testing Done

Verification Steps

Additional Notes

Checklist

• I have created a changeset for this PR if necessary.
• My changes do not break the library.
• I have added tests where applicable.
• I have followed the project guidelines.
• I have fixed any lint issues.

Related Issues

#4317
#4664
#2694

[changeset-bot]

🦋 Changeset detected

Latest commit: 3977e4f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 57 packages

Name	Type
@tiptap/core	Major
@tiptap/extension-blockquote	Major
@tiptap/extension-bold	Major
@tiptap/extension-bubble-menu	Major
@tiptap/extension-bullet-list	Major
@tiptap/extension-character-count	Major
@tiptap/extension-code-block-lowlight	Major
@tiptap/extension-code-block	Major
@tiptap/extension-code	Major
@tiptap/extension-collaboration-cursor	Major
@tiptap/extension-collaboration	Major
@tiptap/extension-color	Major
@tiptap/extension-document	Major
@tiptap/extension-dropcursor	Major
@tiptap/extension-floating-menu	Major
@tiptap/extension-focus	Major
@tiptap/extension-font-family	Major
@tiptap/extension-gapcursor	Major
@tiptap/extension-hard-break	Major
@tiptap/extension-heading	Major
@tiptap/extension-highlight	Major
@tiptap/extension-history	Major
@tiptap/extension-horizontal-rule	Major
@tiptap/extension-image	Major
@tiptap/extension-italic	Major
@tiptap/extension-link	Major
@tiptap/extension-list-item	Major
@tiptap/extension-list-keymap	Major
@tiptap/extension-list	Major
@tiptap/extension-mention	Major
@tiptap/extension-ordered-list	Major
@tiptap/extension-paragraph	Major
@tiptap/extension-placeholder	Major
@tiptap/extension-strike	Major
@tiptap/extension-subscript	Major
@tiptap/extension-superscript	Major
@tiptap/extension-table-cell	Major
@tiptap/extension-table-header	Major
@tiptap/extension-table-row	Major
@tiptap/extension-table	Major
@tiptap/extension-task-item	Major
@tiptap/extension-task-list	Major
@tiptap/extension-text-align	Major
@tiptap/extension-text-style	Major
@tiptap/extension-text	Major
@tiptap/extension-typography	Major
@tiptap/extension-underline	Major
@tiptap/extension-youtube	Major
@tiptap/extensions	Major
@tiptap/html	Major
@tiptap/pm	Major
@tiptap/react	Major
@tiptap/starter-kit	Major
@tiptap/static-renderer	Major
@tiptap/suggestion	Major
@tiptap/vue-2	Major
@tiptap/vue-3	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	3977e4f
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/6798d49164eda200080d25f4
😎 Deploy Preview	https://deploy-preview-6060--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

@tiptap/core

npm i https://pkg.pr.new/@tiptap/core@6060

@tiptap/extension-blockquote

npm i https://pkg.pr.new/@tiptap/extension-blockquote@6060

@tiptap/extension-bubble-menu

npm i https://pkg.pr.new/@tiptap/extension-bubble-menu@6060

@tiptap/extension-bullet-list

npm i https://pkg.pr.new/@tiptap/extension-bullet-list@6060

@tiptap/extension-bold

npm i https://pkg.pr.new/@tiptap/extension-bold@6060

@tiptap/extension-character-count

npm i https://pkg.pr.new/@tiptap/extension-character-count@6060

@tiptap/extension-code

npm i https://pkg.pr.new/@tiptap/extension-code@6060

@tiptap/extension-code-block

npm i https://pkg.pr.new/@tiptap/extension-code-block@6060

@tiptap/extension-code-block-lowlight

npm i https://pkg.pr.new/@tiptap/extension-code-block-lowlight@6060

@tiptap/extension-collaboration

npm i https://pkg.pr.new/@tiptap/extension-collaboration@6060

@tiptap/extension-collaboration-cursor

npm i https://pkg.pr.new/@tiptap/extension-collaboration-cursor@6060

@tiptap/extension-color

npm i https://pkg.pr.new/@tiptap/extension-color@6060

@tiptap/extension-document

npm i https://pkg.pr.new/@tiptap/extension-document@6060

@tiptap/extension-dropcursor

npm i https://pkg.pr.new/@tiptap/extension-dropcursor@6060

@tiptap/extension-floating-menu

npm i https://pkg.pr.new/@tiptap/extension-floating-menu@6060

@tiptap/extension-focus

npm i https://pkg.pr.new/@tiptap/extension-focus@6060

@tiptap/extension-font-family

npm i https://pkg.pr.new/@tiptap/extension-font-family@6060

@tiptap/extension-gapcursor

npm i https://pkg.pr.new/@tiptap/extension-gapcursor@6060

@tiptap/extension-hard-break

npm i https://pkg.pr.new/@tiptap/extension-hard-break@6060

@tiptap/extension-heading

npm i https://pkg.pr.new/@tiptap/extension-heading@6060

@tiptap/extension-highlight

npm i https://pkg.pr.new/@tiptap/extension-highlight@6060

@tiptap/extension-history

npm i https://pkg.pr.new/@tiptap/extension-history@6060

@tiptap/extension-horizontal-rule

npm i https://pkg.pr.new/@tiptap/extension-horizontal-rule@6060

@tiptap/extension-image

npm i https://pkg.pr.new/@tiptap/extension-image@6060

@tiptap/extension-italic

npm i https://pkg.pr.new/@tiptap/extension-italic@6060

@tiptap/extension-link

npm i https://pkg.pr.new/@tiptap/extension-link@6060

@tiptap/extension-list

npm i https://pkg.pr.new/@tiptap/extension-list@6060

@tiptap/extension-list-item

npm i https://pkg.pr.new/@tiptap/extension-list-item@6060

@tiptap/extension-list-keymap

npm i https://pkg.pr.new/@tiptap/extension-list-keymap@6060

@tiptap/extension-mention

npm i https://pkg.pr.new/@tiptap/extension-mention@6060

@tiptap/extension-ordered-list

npm i https://pkg.pr.new/@tiptap/extension-ordered-list@6060

@tiptap/extension-paragraph

npm i https://pkg.pr.new/@tiptap/extension-paragraph@6060

@tiptap/extension-placeholder

npm i https://pkg.pr.new/@tiptap/extension-placeholder@6060

@tiptap/extension-strike

npm i https://pkg.pr.new/@tiptap/extension-strike@6060

@tiptap/extension-subscript

npm i https://pkg.pr.new/@tiptap/extension-subscript@6060

@tiptap/extension-superscript

npm i https://pkg.pr.new/@tiptap/extension-superscript@6060

@tiptap/extension-table

npm i https://pkg.pr.new/@tiptap/extension-table@6060

@tiptap/extension-table-cell

npm i https://pkg.pr.new/@tiptap/extension-table-cell@6060

@tiptap/extension-table-header

npm i https://pkg.pr.new/@tiptap/extension-table-header@6060

@tiptap/extension-table-row

npm i https://pkg.pr.new/@tiptap/extension-table-row@6060

@tiptap/extension-task-item

npm i https://pkg.pr.new/@tiptap/extension-task-item@6060

@tiptap/extension-task-list

npm i https://pkg.pr.new/@tiptap/extension-task-list@6060

@tiptap/extension-text

npm i https://pkg.pr.new/@tiptap/extension-text@6060

@tiptap/extension-text-align

npm i https://pkg.pr.new/@tiptap/extension-text-align@6060

@tiptap/extension-text-style

npm i https://pkg.pr.new/@tiptap/extension-text-style@6060

@tiptap/extension-typography

npm i https://pkg.pr.new/@tiptap/extension-typography@6060

@tiptap/extension-underline

npm i https://pkg.pr.new/@tiptap/extension-underline@6060

@tiptap/extension-youtube

npm i https://pkg.pr.new/@tiptap/extension-youtube@6060

@tiptap/extensions

npm i https://pkg.pr.new/@tiptap/extensions@6060

@tiptap/html

npm i https://pkg.pr.new/@tiptap/html@6060

@tiptap/react

npm i https://pkg.pr.new/@tiptap/react@6060

@tiptap/pm

npm i https://pkg.pr.new/@tiptap/pm@6060

@tiptap/starter-kit

npm i https://pkg.pr.new/@tiptap/starter-kit@6060

@tiptap/static-renderer

npm i https://pkg.pr.new/@tiptap/static-renderer@6060

@tiptap/suggestion

npm i https://pkg.pr.new/@tiptap/suggestion@6060

@tiptap/vue-2

npm i https://pkg.pr.new/@tiptap/vue-2@6060

@tiptap/vue-3

npm i https://pkg.pr.new/@tiptap/vue-3@6060

commit: 3977e4f