Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -82,7 +82,7 @@ export default {
 
     this.editor = new Editor({
       extensions: [
-        ...defaultExtensions(),
+        ...defaultExtensions().filter(extension => extension.config.name !== 'history'),
         Collaboration.configure({
           provider,
         }),

docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue

@@ -63,7 +63,9 @@ export default {
     margin-top: 0.75em;
   }
 }
+</style>
 
+<style lang="scss" scoped>
 .toc {
   opacity: 0.75;
   border-radius: 0.5rem;

docs/src/demos/Guide/NodeViews/TableOfContents/index.vue

@@ -27,15 +27,15 @@ export default {
       ],
       content: `
         <toc></toc>
-        <h2>heading</h2>
+        <h2>1 heading</h2>
         <p>paragraph</p>
-        <h3>heading</h3>
+        <h3>1.1 heading</h3>
         <p>paragraph</p>
-        <h3>heading</h3>
+        <h3>1.2 heading</h3>
         <p>paragraph</p>
-        <h2>heading</h2>
+        <h2>2 heading</h2>
         <p>paragraph</p>
-        <h3>heading</h3>
+        <h3>2.1 heading</h3>
         <p>paragraph</p>
       `,
     })

packages/core/src/CommandManager.ts

@@ -53,7 +53,9 @@ export default class CommandManager {
         const method = (...args: any) => {
           const callback = command(...args)(props)
 
-          view.dispatch(tr)
+          if (tr.steps.length) {
+            view.dispatch(tr)
+          }
 
           return callback
         }
@@ -68,12 +70,11 @@ export default class CommandManager {
     const callbacks: boolean[] = []
     const hasStartTransaction = !!startTr
     const tr = startTr || state.tr
-    const props = this.buildProps(tr, shouldDispatch)
 
     return new Proxy({}, {
       get: (_, name: string, proxy) => {
         if (name === 'run') {
-          if (!hasStartTransaction && shouldDispatch) {
+          if (!hasStartTransaction && shouldDispatch && tr.steps.length) {
             view.dispatch(tr)
           }
 
@@ -87,7 +88,9 @@ export default class CommandManager {
         }
 
         return (...args: any) => {
+          const props = this.buildProps(tr, shouldDispatch)
           const callback = command(...args)(props)
+
           callbacks.push(callback)
 
           return proxy
@@ -118,6 +121,10 @@ export default class CommandManager {
     const { editor, commands } = this
     const { state, view } = editor
 
+    if (state.storedMarks) {
+      tr.setStoredMarks(state.storedMarks)
+    }
+
     const props = {
       tr,
       editor,
@@ -141,6 +148,10 @@ export default class CommandManager {
   }
 
   public chainableState(tr: Transaction, state: EditorState): EditorState {
+    let { selection } = tr
+    let { doc } = tr
+    let { storedMarks } = tr
+
     return {
       ...state,
       schema: state.schema,
@@ -150,15 +161,19 @@ export default class CommandManager {
       reconfigure: state.reconfigure.bind(state),
       toJSON: state.toJSON.bind(state),
       get storedMarks() {
-        return tr.storedMarks
+        return storedMarks
       },
       get selection() {
-        return tr.selection
+        return selection
       },
       get doc() {
-        return tr.doc
+        return doc
       },
       get tr() {
+        selection = tr.selection
+        doc = tr.doc
+        storedMarks = tr.storedMarks
+
         return tr
       },
     }

packages/core/src/Extension.ts

@@ -7,7 +7,7 @@ export interface ExtensionConfig<Options = any, Commands = {}> {
   /**
    * Name
    */
-  name?: string,
+  name: string,
 
   /**
    * Default options

packages/core/src/extensions/commands.ts

@@ -32,6 +32,8 @@ import * as wrapIn from '../commands/wrapIn'
 import * as wrapInList from '../commands/wrapInList'
 
 export const Commands = Extension.create({
+  name: 'commands',
+
   addCommands() {
     return {
       ...blur,

packages/core/src/extensions/editable.ts

@@ -2,6 +2,8 @@ import { Plugin, PluginKey } from 'prosemirror-state'
 import { Extension } from '../Extension'
 
 export const Editable = Extension.create({
+  name: 'editable',
+
   addProseMirrorPlugins() {
     return [
       new Plugin({

packages/core/src/extensions/focusEvents.ts

@@ -2,6 +2,8 @@ import { Plugin, PluginKey } from 'prosemirror-state'
 import { Extension } from '../Extension'
 
 export const FocusEvents = Extension.create({
+  name: 'focusEvents',
+
   addProseMirrorPlugins() {
     const { editor } = this
 
@@ -16,7 +18,10 @@ export const FocusEvents = Extension.create({
             focus: (view, event) => {
               editor.isFocused = true
 
-              const transaction = editor.state.tr.setMeta('focus', { event })
+              const transaction = editor.state.tr
+                .setMeta('focus', { event })
+                .setMeta('addToHistory', false)
+
               view.dispatch(transaction)
 
               return true
@@ -24,7 +29,10 @@ export const FocusEvents = Extension.create({
             blur: (view, event) => {
               editor.isFocused = false
 
-              const transaction = editor.state.tr.setMeta('blur', { event })
+              const transaction = editor.state.tr
+                .setMeta('blur', { event })
+                .setMeta('addToHistory', false)
+
               view.dispatch(transaction)
 
               return true

packages/core/src/extensions/keymap.ts

@@ -13,6 +13,8 @@ import { undoInputRule } from 'prosemirror-inputrules'
 import { Extension } from '../Extension'
 
 export const Keymap = Extension.create({
+  name: 'keymap',
+
   addKeyboardShortcuts() {
     const handleBackspace = () => this.editor.commands.first(({ state, dispatch }) => [
       () => undoInputRule(state, dispatch),

packages/core/src/helpers/isMarkActive.ts

@@ -65,5 +65,5 @@ export default function isMarkActive(
       return sum + size
     }, 0)
 
-  return selectionRange === range
+  return range >= selectionRange
 }

packages/core/src/helpers/isNodeActive.ts

@@ -63,5 +63,5 @@ export default function isNodeActive(
       return sum + size
     }, 0)
 
-  return selectionRange === range
+  return range >= selectionRange
 }

packages/extension-collaboration-cursor/src/index.ts

@@ -18,6 +18,8 @@ const awarenessStatesToArray = (states: Map<number, { [key: string]: any }>) =>
 }
 
 const CollaborationCursor = Extension.create({
+  name: 'collaborationCursor',
+
   defaultOptions: <CollaborationCursorOptions>{
     provider: null,
     user: {

packages/extension-collaboration/src/index.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/core'
+import { Extension, Command } from '@tiptap/core'
 import {
   redo,
   undo,
@@ -11,10 +11,37 @@ export interface CollaborationOptions {
 }
 
 const Collaboration = Extension.create({
+  name: 'collaboration',
+
   defaultOptions: <CollaborationOptions>{
     provider: null,
   },
 
+  addCommands() {
+    return {
+      /**
+       * Undo recent changes
+       */
+      undo: (): Command => ({ state }) => {
+        return undo(state)
+      },
+      /**
+       * Reapply reverted changes
+       */
+      redo: (): Command => ({ state }) => {
+        return redo(state)
+      },
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      'Mod-z': () => this.editor.commands.undo(),
+      'Mod-y': () => this.editor.commands.redo(),
+      'Shift-Mod-z': () => this.editor.commands.redo(),
+    }
+  },
+
   addProseMirrorPlugins() {
     return [
       ySyncPlugin(
@@ -24,14 +51,6 @@ const Collaboration = Extension.create({
     ]
   },
 
-  addKeyboardShortcuts() {
-    return {
-      'Mod-z': undo,
-      'Mod-y': redo,
-      'Mod-Shift-z': redo,
-    }
-  },
-
   onDestroy() {
     this.options.provider?.destroy()
   },

packages/extension-dropcursor/src/index.ts

@@ -8,6 +8,8 @@ export interface DropcursorOptions {
 }
 
 const Dropcursor = Extension.create({
+  name: 'dropCursor',
+
   defaultOptions: <DropcursorOptions>{
     color: 'black',
     width: 1,

packages/extension-focus/src/index.ts

@@ -8,6 +8,8 @@ export interface FocusOptions {
 }
 
 const FocusClasses = Extension.create({
+  name: 'focus',
+
   defaultOptions: <FocusOptions>{
     className: 'has-focus',
     nested: false,

packages/extension-font-family/src/index.ts

@@ -6,6 +6,8 @@ type FontFamilyOptions = {
 }
 
 const FontFamily = Extension.create({
+  name: 'fontFamily',
+
   defaultOptions: <FontFamilyOptions>{
     types: ['textStyle'],
   },

packages/extension-gapcursor/src/index.ts

@@ -2,6 +2,8 @@ import { Extension } from '@tiptap/core'
 import { gapCursor } from 'prosemirror-gapcursor'
 
 const Gapcursor = Extension.create({
+  name: 'gapCursor',
+
   addProseMirrorPlugins() {
     return [
       gapCursor(),

packages/extension-history/src/index.ts

@@ -7,6 +7,8 @@ export interface HistoryOptions {
 }
 
 const History = Extension.create({
+  name: 'history',
+
   defaultOptions: <HistoryOptions>{
     depth: 100,
     newGroupDelay: 500,

packages/extension-text-align/src/index.ts

@@ -7,6 +7,8 @@ type TextAlignOptions = {
 }
 
 const TextAlign = Extension.create({
+  name: 'textAlign',
+
   defaultOptions: <TextAlignOptions>{
     types: ['heading', 'paragraph'],
     alignments: ['left', 'center', 'right', 'justify'],

packages/extension-typography/src/index.ts

@@ -21,6 +21,8 @@ export const raquo = new InputRule(/>>$/, '»')
 export const multiplication = new InputRule(/\d+\s?([*x])\s?\d+$/, '×')
 
 const Typography = Extension.create({
+  name: 'typography',
+
   addInputRules() {
     return [
       emDash,