WIP: Decorations API

[bdbch]

Will fill this up later when I have a final idea how to integrate this.

[changeset-bot]

🦋 Changeset detected

Latest commit: eb0e379

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

This PR includes changesets to release 54 packages

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

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 failed. Why did it fail? →

Name	Link
🔨 Latest commit	eb0e379
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/67052ec31aea870008979b66

[nperez0111]

Some ideas for how we might wanna structure this:

const editor = new Editor()

editor.on('transaction', () => {

  const removeDecoration = editor.addDecorationWidget({ ...options })

  removeDecoration()

  editor.getDecorationSet('myDecoration').forEach(({ from, to }) => {
    editor.removeDecoration(from, to, 'myDecoration')
  })

})

DecorationSet.create({
  onTransaction,
  shouldShow,
  onCreate,
  onRemove,
  onUpdate,
  name: 'myDecoration',
  onEvent: (eventName, meta)=>{
    if (eventName === 'eventName') {
      // I want this decoration active
      editor.addDecorationSet('myDecoration', decorationSet)
      return;
    }
  }
  onTransaction: tr => {
    if (!tr.isOneIWant) {
      editor.clearDecorationSet('myDecoration')
      return
    }

    this.editor.addDecorationWidget()
  },
})

class DecorationManager {

  allDecorationSets: Record<string, DecorationSet> = {}

  addDecorationSet(key: string, decorationSet: DecorationSet) {
    this.allDecorationSets[key] = decorationSet
  }

  removeDecorationSet(key: string) {
    this.allDecorationSets[key].destroy()
    this.allDecorationSets[key] = undefined
  }

  listDecorationSets() {
    return ['myDecoration', 'anotherDecorationSet']
  }

  getDecorationSet(key: string) {

  }

  triggerEvent(eventName: string) {
    // re-run decoration sets
  }

  getProsemirrorPlugin() {
    return new Plugin({
      key: new PluginKey('decorationManager'),
      state: {
        init: () => this,
        apply: (tr, plugin) => {
          const decorationManager = plugin.getState(tr)

          // map through transactions for all decorations that still exist

          decorationManager.allDecorationSets.forEach(decorationSet => {
            decorationSet.onTransaction(tr)
          })
        },
      },
    })
  }
}

editor.triggerDecoration('eventName', meta)
editor.addDecorationSet('myDecoration', decorationSet)
editor.removeDecorationSet('myDecoration')