add some more commands

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

@@ -1,58 +1,58 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.focus().removeMarks()">
+      <button @click="editor.chain().focus().removeMarks().run()">
         clear format
       </button>
-      <button @click="editor.focus().bold()" :class="{ 'is-active': editor.isActive('bold') }">
+      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
       </button>
-      <button @click="editor.focus().italic()" :class="{ 'is-active': editor.isActive('italic') }">
+      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
         italic
       </button>
-      <button @click="editor.focus().underline()" :class="{ 'is-active': editor.isActive('underline') }">
+      <button @click="editor.chain().focus().underline().run()" :class="{ 'is-active': editor.isActive('underline') }">
         underline
       </button>
-      <button @click="editor.focus().strike()" :class="{ 'is-active': editor.isActive('strike') }">
+      <button @click="editor.chain().focus().strike().run()" :class="{ 'is-active': editor.isActive('strike') }">
         strike
       </button>
-      <button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
+      <button @click="editor.chain().focus().code().run()" :class="{ 'is-active': editor.isActive('code') }">
         code
       </button>
-      <button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('codeBlock') }">
+      <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
         code block
       </button>
-      <button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+      <button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         h1
       </button>
-      <button @click="editor.focus().heading({ level: 2 })" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+      <button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
         h2
       </button>
-      <button @click="editor.focus().heading({ level: 3 })" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+      <button @click="editor.chain().focus().heading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
         h3
       </button>
-      <button @click="editor.focus().heading({ level: 4 })" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
+      <button @click="editor.chain().focus().heading({ level: 4 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 4 }) }">
         h4
       </button>
-      <button @click="editor.focus().heading({ level: 5 })" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
+      <button @click="editor.chain().focus().heading({ level: 5 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 5 }) }">
         h5
       </button>
-      <button @click="editor.focus().heading({ level: 6 })" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
+      <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
-      <button @click="editor.focus().blockquote()" :class="{ 'is-active': editor.isActive('blockquote') }">
+      <button @click="editor.chain().focus().blockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">
         blockquote
       </button>
-      <button @click="editor.focus().horizontalRule()">
+      <button @click="editor.chain().focus().horizontalRule().run()">
         horizontal rule
       </button>
-      <button @click="editor.focus().hardBreak()">
+      <button @click="editor.chain().focus().hardBreak().run()">
         hard break
       </button>
-      <button @click="editor.focus().undo()">
+      <button @click="editor.chain().focus().undo().run()">
         undo
       </button>
-      <button @click="editor.focus().redo()">
+      <button @click="editor.chain().focus().redo().run()">
         redo
       </button>
     </div>

packages/core/index.ts

@@ -1,7 +1,7 @@
-import { Editor, CommandSpec } from './src/Editor'
+import { Editor, Command, CommandSpec } from './src/Editor'
 
 export default Editor
-export { Editor, CommandSpec }
+export { Editor, Command, CommandSpec }
 export { default as ComponentRenderer } from './src/ComponentRenderer'
 export { default as Extension } from './src/Extension'
 export { default as Node } from './src/Node'

packages/core/src/Editor.ts

@@ -21,19 +21,18 @@ import defaultPlugins from './plugins'
 import * as commands from './commands'
 import { deleteSelection } from 'prosemirror-commands'
 
-// export type Command = (next: Function, editor: Editor) => (...args: any) => any
-
-// export type Command = (...args: any) => ({ editor: Editor }) => boolean
 export type Command = (props: {
   editor: Editor
   tr: Transaction
   // TODO: find correct type
   commands: any
-  state: EditorState
+  state: EditorState,
+  view: EditorView,
+  dispatch: () => any
 }) => boolean
 
 export interface CommandSpec {
-  [key: string]: Command
+  [key: string]: (...args: any[]) => Command
 }
 
 export interface Commands {}
@@ -126,13 +125,26 @@ export class Editor extends EventEmitter {
 
     return (...args: any) => {
       const { tr } = this.state
-      const callback = command(...args)({
+
+      const props = {
         editor: this.proxy,
         state: this.chainableEditorState(tr, this.state),
         view: this.view,
         dispatch: () => false,
         tr,
-      })
+      }
+
+      Object.defineProperty(props, 'commands', {
+        get: function() {
+          return Object.fromEntries(Object
+            .entries(this.commands)
+            .map(([name, command]) => {
+              return [name, (...args) => command(...args)(props)]
+            }))
+        }.bind(this)
+      });
+
+      const callback = command(...args)(props)
 
       this.view.dispatch(tr)
 

packages/core/src/commands/index.ts

@@ -4,15 +4,15 @@ export { deleteSelection } from './deleteSelection'
 export { focus } from './focus'
 export { insertHTML } from './insertHTML'
 export { insertText } from './insertText'
-// export { default as liftListItem } from './liftListItem'
-// export { default as removeMark } from './removeMark'
-// export { default as removeMarks } from './removeMarks'
-// export { default as replaceWithNode } from './replaceWithNode'
-// export { default as selectAll } from './selectAll'
-// export { default as selectParentNode } from './selectParentNode'
+export { liftListItem } from './liftListItem'
+export { removeMark } from './removeMark'
+export { removeMarks } from './removeMarks'
+export { replaceWithNode } from './replaceWithNode'
+export { selectAll } from './selectAll'
+export { selectParentNode } from './selectParentNode'
 export { setContent } from './setContent'
-// export { default as sinkListItem } from './sinkListItem'
-// export { default as splitListItem } from './splitListItem'
-// export { default as toggleMark } from './toggleMark'
-// export { default as toggleNode } from './toggleNode'
-// export { default as updateMark } from './updateMark'
+export { sinkListItem } from './sinkListItem'
+export { splitListItem } from './splitListItem'
+export { toggleMark } from './toggleMark'
+export { toggleNode } from './toggleNode'
+export { updateMark } from './updateMark'

packages/core/src/commands/liftListItem.ts

@@ -1,9 +1,9 @@
-import { Editor } from '../Editor'
-import { liftListItem } from 'prosemirror-schema-list'
+import { Command } from '../Editor'
+import { liftListItem as originalLiftListItem } from 'prosemirror-schema-list'
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../utils/getNodeType'
 
-type LiftListItem = (typeOrName: string | NodeType) => Editor
+type LiftListItem = (typeOrName: string | NodeType) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -11,10 +11,8 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: string | NodeType) => {
-  const { view, state, schema } = editor
-  const type = getNodeType(typeOrName, schema)
+export const liftListItem: LiftListItem = (typeOrName) => ({ state, dispatch }) => {
+  const type = getNodeType(typeOrName, state.schema)
 
-  liftListItem(type)(state, view.dispatch)
-  next()
+  return originalLiftListItem(type)(state, dispatch)
 }

packages/core/src/commands/removeMark.ts

@@ -1,9 +1,9 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 import { MarkType } from 'prosemirror-model'
 import getMarkType from '../utils/getMarkType'
 import getMarkRange from '../utils/getMarkRange'
 
-type RemoveMarkCommand = (typeOrName: string | MarkType) => Editor
+type RemoveMarkCommand = (typeOrName: string | MarkType) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -11,10 +11,9 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: string | MarkType) => {
-  const { view, state, schema } = editor
-  const { tr, selection } = state
-  const type = getMarkType(typeOrName, schema)
+export const removeMark: RemoveMarkCommand = (typeOrName) => ({ tr, state }) => {
+  const { selection } = tr
+  const type = getMarkType(typeOrName, state.schema)
   let { from, to, $from, empty } = selection
 
   if (empty) {
@@ -27,6 +26,6 @@ export default (next: Function, editor: Editor) => (typeOrName: string | MarkTyp
   }
 
   tr.removeMark(from, to, type)
-  view.dispatch(tr)
-  next()
+
+  return true
 }

packages/core/src/commands/removeMarks.ts

@@ -1,6 +1,6 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 
-type RemoveMarksCommand = () => Editor
+type RemoveMarksCommand = () => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -8,23 +8,19 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => () => {
-  const { state, view, schema } = editor
-  const { selection, tr } = state
+export const removeMarks: RemoveMarksCommand = () => ({ tr, state }) => {
+  const { selection } = tr
   const { from, to, empty } = selection
-  let transaction = tr
 
   if (empty) {
-    next()
-    return
+    return true
   }
 
   Object
-    .entries(schema.marks)
+    .entries(state.schema.marks)
     .forEach(([name, mark]) => {
-      transaction.removeMark(from, to, mark)
+      tr.removeMark(from, to, mark)
     })
 
-  view.dispatch(transaction)
-  next()
+  return true
 }

packages/core/src/commands/replaceWithNode.ts

@@ -1,4 +1,4 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../utils/getNodeType'
 
@@ -11,7 +11,7 @@ type ReplaceWithNodeCommand = (
   typeOrName: NodeType,
   attrs: {},
   range?: Range,
-) => Editor
+) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -19,17 +19,18 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: NodeType, attrs: {}, range?: Range) => {
-  const { view, state, schema } = editor
-  const { $from, $to } = state.selection
-  const type = getNodeType(typeOrName, schema)
+export const replaceWithNode: ReplaceWithNodeCommand = (typeOrName, attrs = {}, range) => ({ view, tr, state }) => {
+  const { $from, $to } = tr.selection
+  const type = getNodeType(typeOrName, state.schema)
   const index = $from.index()
   const from = range ? range.from : $from.pos
   const to = range ? range.to : $to.pos
 
-  if ($from.parent.canReplaceWith(index, index, type)) {
-    view.dispatch(state.tr.replaceWith(from, to, type.create(attrs)))
+  if (!$from.parent.canReplaceWith(index, index, type)) {
+    return false
   }
+  
+  view.dispatch(tr.replaceWith(from, to, type.create(attrs)))
 
-  next()
+  return true
 }

packages/core/src/commands/selectAll.ts

@@ -1,7 +1,7 @@
-import { Editor } from '../Editor'
-import { selectAll } from 'prosemirror-commands'
+import { Command } from '../Editor'
+import { selectAll as originalSelectAll } from 'prosemirror-commands'
 
-type SelectAllCommand = () => Editor
+type SelectAllCommand = () => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -9,7 +9,6 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, { state, view }: Editor) => () => {
-  selectAll(state, view.dispatch)
-  next()
+export const selectAll: SelectAllCommand = () => ({ state, dispatch }) => {
+  return originalSelectAll(state, dispatch)
 }

packages/core/src/commands/selectParentNode.ts

@@ -1,7 +1,7 @@
-import { Editor } from '../Editor'
-import { selectParentNode } from 'prosemirror-commands'
+import { Command } from '../Editor'
+import { selectParentNode as originalSelectParentNode } from 'prosemirror-commands'
 
-type SelectParentNodeCommand = () => Editor
+type SelectParentNodeCommand = () => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -9,7 +9,6 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, { state, view }: Editor) => () => {
-  selectParentNode(state, view.dispatch)
-  next()
+export const selectParentNode: SelectParentNodeCommand = () => ({ state, dispatch }) => {
+  return originalSelectParentNode(state, dispatch)
 }

packages/core/src/commands/sinkListItem.ts

@@ -1,9 +1,9 @@
-import { Editor } from '../Editor'
-import { sinkListItem } from 'prosemirror-schema-list'
+import { Command } from '../Editor'
+import { sinkListItem as originalSinkListItem } from 'prosemirror-schema-list'
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../utils/getNodeType'
 
-type SinkListItem = (typeOrName: string | NodeType) => Editor
+type SinkListItem = (typeOrName: string | NodeType) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -11,10 +11,8 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: string | NodeType) => {
-  const { view, state, schema } = editor
-  const type = getNodeType(typeOrName, schema)
+export const sinkListItem: SinkListItem = (typeOrName) => ({ state, dispatch }) => {
+  const type = getNodeType(typeOrName, state.schema)
 
-  sinkListItem(type)(state, view.dispatch)
-  next()
+  return originalSinkListItem(type)(state, dispatch)
 }

packages/core/src/commands/splitListItem.ts

@@ -1,9 +1,9 @@
-import { Editor } from '../Editor'
-import { splitListItem } from 'prosemirror-schema-list'
+import { Command } from '../Editor'
+import { splitListItem as originalSplitListItem } from 'prosemirror-schema-list'
 import { NodeType } from 'prosemirror-model'
 import getNodeType from '../utils/getNodeType'
 
-type SplitListItem = (typeOrName: string | NodeType) => Editor
+type SplitListItem = (typeOrName: string | NodeType) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -11,10 +11,8 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: string | NodeType) => {
-  const { view, state, schema } = editor
-  const type = getNodeType(typeOrName, schema)
+export const splitListItem: SplitListItem = (typeOrName) => ({ state, dispatch }) => {
+  const type = getNodeType(typeOrName, state.schema)
 
-  return splitListItem(type)(state, view.dispatch)
-  // next()
+  return originalSplitListItem(type)(state, dispatch)
 }

packages/core/src/commands/toggleMark.ts

@@ -1,9 +1,9 @@
-import { Editor } from '../Editor'
-import { toggleMark } from 'prosemirror-commands'
+import { Command } from '../Editor'
+import { toggleMark as originalToggleMark } from 'prosemirror-commands'
 import { MarkType } from 'prosemirror-model'
 import getMarkType from '../utils/getMarkType'
 
-type ToggleMarkCommand = (typeOrName: string | MarkType) => Editor
+type ToggleMarkCommand = (typeOrName: string | MarkType) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -11,10 +11,8 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: string | MarkType) => {
-  const { view, state, schema } = editor
-  const type = getMarkType(typeOrName, schema)
+export const toggleMark: ToggleMarkCommand = (typeOrName) => ({ state, dispatch }) => {
+  const type = getMarkType(typeOrName, state.schema)
 
-  toggleMark(type)(state, view.dispatch)
-  next()
+  return originalToggleMark(type)(state, dispatch)
 }

packages/core/src/commands/toggleNode.ts

@@ -1,6 +1,6 @@
 import { NodeType } from 'prosemirror-model'
 import { setBlockType } from 'prosemirror-commands'
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 import nodeIsActive from '../utils/nodeIsActive'
 import getNodeType from '../utils/getNodeType'
 
@@ -8,7 +8,7 @@ type ToggleNodeCommand = (
   typeOrName: string | NodeType,
   toggleType: string | NodeType,
   attrs?: {}
-) => Editor
+) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -16,17 +16,14 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: string | NodeType, toggleTypeOrName: string | NodeType, attrs = {}) => {
-  const { view, state, schema } = editor
-  const type = getNodeType(typeOrName, schema)
-  const toggleType = getNodeType(toggleTypeOrName, schema)
+export const toggleNode: ToggleNodeCommand = (typeOrName, toggleTypeOrName, attrs = {}) => ({ state, dispatch }) => {
+  const type = getNodeType(typeOrName, state.schema)
+  const toggleType = getNodeType(toggleTypeOrName, state.schema)
   const isActive = nodeIsActive(state, type, attrs)
 
   if (isActive) {
-    setBlockType(toggleType)(view.state, view.dispatch)
+    return setBlockType(toggleType)(state, dispatch)
   } else {
-    setBlockType(type, attrs)(view.state, view.dispatch)
+    return setBlockType(type, attrs)(state, dispatch)
   }
-
-  next()
 }

packages/core/src/commands/updateMark.ts

@@ -1,4 +1,4 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 import { MarkType } from 'prosemirror-model'
 import getMarkType from '../utils/getMarkType'
 import getMarkRange from '../utils/getMarkRange'
@@ -6,7 +6,7 @@ import getMarkRange from '../utils/getMarkRange'
 type UpdateMarkCommand = (
   typeOrName: string | MarkType,
   attrs: {},
-) => Editor
+) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -14,11 +14,10 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (typeOrName: string | MarkType, attrs = {}) => {
-  const { view, state, schema } = editor
-  const { tr, selection, doc } = state
+export const updateMark: UpdateMarkCommand = (typeOrName, attrs = {}) => ({ tr, state }) => {
+  const { selection, doc } = tr
   let { from, to, $from, empty } = selection
-  const type = getMarkType(typeOrName, schema)
+  const type = getMarkType(typeOrName, state.schema)
 
   if (empty) {
     const range = getMarkRange($from, type)
@@ -36,6 +35,6 @@ export default (next: Function, editor: Editor) => (typeOrName: string | MarkTyp
   }
 
   tr.addMark(from, to, type.create(attrs))
-  view.dispatch(tr)
-  next()
+
+  return true
 }

packages/extension-blockquote/index.ts

@@ -21,12 +21,12 @@ export default new Node()
     ],
     toDOM: () => ['blockquote', 0],
   }))
-  .commands(({ editor, name }) => ({
-    [name]: next => attrs => {
-      editor.toggleNode(name, 'paragraph', attrs)
-      next()
-    },
-  }))
+  // .commands(({ editor, name }) => ({
+  //   [name]: next => attrs => {
+  //     editor.toggleNode(name, 'paragraph', attrs)
+  //     next()
+  //   },
+  // }))
   .keys(({ editor }) => ({
     'Shift-Mod-9': () => editor.blockquote(),
   }))

packages/extension-bold/index.ts

@@ -1,8 +1,10 @@
-import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
+import { Command, Mark, markInputRule, markPasteRule } from '@tiptap/core'
+
+export type BoldCommand = () => Command
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
-    bold(): Editor,
+    bold: BoldCommand,
   }
 }
 
@@ -29,10 +31,9 @@ export default new Mark()
     ],
     toDOM: () => ['strong', 0],
   }))
-  .commands(({ editor, name }) => ({
-    bold: next => () => {
-      editor.toggleMark(name)
-      next()
+  .commands(({ name }) => ({
+    bold: () => ({ commands }) => {
+      return commands.toggleMark(name)
     },
   }))
   .keys(({ editor }) => ({

packages/extension-bullet-list/index.ts

@@ -17,12 +17,12 @@ export default new Node()
     ],
     toDOM: () => ['ul', 0],
   }))
-  .commands(({ editor, type }) => ({
-    [name]: next => attrs => {
-      // editor.toggleList(type, editor.schema.nodes.list_item)
-      next()
-    },
-  }))
+  // .commands(({ editor, type }) => ({
+  //   [name]: next => attrs => {
+  //     // editor.toggleList(type, editor.schema.nodes.list_item)
+  //     next()
+  //   },
+  // }))
   .keys(({ editor }) => ({
     'Shift-Ctrl-8': () => editor.bulletList(),
   }))

packages/extension-code-block/index.ts

@@ -21,12 +21,12 @@ export default new Node()
     ],
     toDOM: () => ['pre', ['code', 0]],
   }))
-  .commands(({ editor, name }) => ({
-    [name]: next => attrs => {
-      editor.toggleNode(name, 'paragraph', attrs)
-      next()
-    },
-  }))
+  // .commands(({ editor, name }) => ({
+  //   [name]: next => attrs => {
+  //     editor.toggleNode(name, 'paragraph', attrs)
+  //     next()
+  //   },
+  // }))
   .keys(({ editor }) => ({
     'Shift-Ctrl-\\': () => editor.codeBlock()
   }))

packages/extension-code/index.ts

@@ -18,12 +18,12 @@ export default new Mark()
     ],
     toDOM: () => ['code', 0],
   }))
-  .commands(({ editor, name }) => ({
-    code: next => () => {
-      editor.toggleMark(name)
-      next()
-    },
-  }))
+  // .commands(({ editor, name }) => ({
+  //   code: next => () => {
+  //     editor.toggleMark(name)
+  //     next()
+  //   },
+  // }))
   .keys(({ editor }) => ({
     'Mod-`': () => editor.code()
   }))

packages/extension-hard-break/index.ts

@@ -18,19 +18,19 @@ export default new Node()
     ],
     toDOM: () => ['br'],
   }))
-  .commands(({ editor, type }) => ({
-    hardBreak: next => () => {
-      const { state, view } = editor
-      const { dispatch } = view
+  // .commands(({ editor, type }) => ({
+  //   hardBreak: next => () => {
+  //     const { state, view } = editor
+  //     const { dispatch } = view
 
-      chainCommands(exitCode, () => {
-        dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView())
-        return true
-      })(state, dispatch, view)
+  //     chainCommands(exitCode, () => {
+  //       dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView())
+  //       return true
+  //     })(state, dispatch, view)
 
-      next()
-    },
-  }))
+  //     next()
+  //   },
+  // }))
   .keys(({ editor }) => ({
     'Mod-Enter': () => editor.hardBreak(),
     'Shift-Enter': () => editor.hardBreak(),

packages/extension-heading/index.ts

@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/core'
+import { Command, Node } from '@tiptap/core'
 import { textblockTypeInputRule } from 'prosemirror-inputrules'
 
 type Level = 1 | 2 | 3 | 4 | 5 | 6
@@ -7,9 +7,11 @@ export interface HeadingOptions {
   levels: Level[],
 }
 
+export type HeadingCommand = (level: Level) => Command
+
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
-    heading(level: Level): Editor,
+    heading: HeadingCommand,
   }
 }
 
@@ -35,10 +37,9 @@ export default new Node<HeadingOptions>()
       })),
     toDOM: node => [`h${node.attrs.level}`, 0],
   }))
-  .commands(({ editor, name }) => ({
-    [name]: next => attrs => {
-      editor.toggleNode(name, 'paragraph', attrs)
-      next()
+  .commands(({ name }) => ({
+    [name]: attrs => ({ commands }) => {
+      return commands.toggleNode(name, 'paragraph', attrs)
     },
   }))
   // TODO: Keyboard Shortcuts

packages/extension-history/index.ts

@@ -1,4 +1,4 @@
-import { Extension } from '@tiptap/core'
+import { Command, Extension } from '@tiptap/core'
 import {
   history,
   undo,
@@ -9,8 +9,8 @@ import {
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
-    undo(): Editor,
-    redo(): Editor,
+    undo: () => Command,
+    redo: () => Command,
   }
 }
 
@@ -24,13 +24,11 @@ export default new Extension<HistoryOptions>()
     historyPluginOptions: {},
   })
   .commands(() => ({
-    undo: (next, { view }) => () => {
-      undo(view.state, view.dispatch)
-      next()
+    undo: () => ({ state, dispatch }) => {
+      return undo(state, dispatch)
     },
-    redo: (next, { view }) => () => {
-      redo(view.state, view.dispatch)
-      next()
+    redo: () => ({ state, dispatch }) => {
+      return redo(state, dispatch)
     },
   }))
   .keys(({ editor }) => ({

packages/extension-horizontal-rule/index.ts

@@ -13,15 +13,15 @@ export default new Node()
     parseDOM: [{ tag: 'hr' }],
     toDOM: () => ['hr'],
   }))
-  .commands(({ editor, type }) => ({
-    horizontalRule: next => () => {
-      const { state, view } = editor
-      const { dispatch } = view
+  // .commands(({ editor, type }) => ({
+  //   horizontalRule: next => () => {
+  //     const { state, view } = editor
+  //     const { dispatch } = view
 
-      dispatch(state.tr.replaceSelectionWith(type.create()))
-      next()
-    },
-  }))
+  //     dispatch(state.tr.replaceSelectionWith(type.create()))
+  //     next()
+  //   },
+  // }))
   .inputRules(({ type }) => [
     nodeInputRule(/^(?:---|___\s|\*\*\*\s)$/, type),
   ])

packages/extension-italic/index.ts

@@ -1,8 +1,10 @@
-import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
+import { Command, Mark, markInputRule, markPasteRule } from '@tiptap/core'
+
+export type ItalicCommand = () => Command
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
-    italic(): Editor,
+    italic: ItalicCommand,
   }
 }
 
@@ -21,10 +23,9 @@ export default new Mark()
     ],
     toDOM: () => ['em', 0],
   }))
-  .commands(({ editor, name }) => ({
-    italic: next => () => {
-      editor.toggleMark(name)
-      next()
+  .commands(({ name }) => ({
+    italic: () => ({ commands }) => {
+      return commands.toggleMark(name)
     },
   }))
   .keys(({ editor }) => ({

packages/extension-strike/index.ts

@@ -1,8 +1,10 @@
-import { Mark, markInputRule, markPasteRule } from '@tiptap/core'
+import { Command, Mark, markInputRule, markPasteRule } from '@tiptap/core'
+
+type StrikeCommand = () => Command
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
-    strike(): Editor,
+    strike: StrikeCommand,
   }
 }
 
@@ -29,10 +31,9 @@ export default new Mark()
     ],
     toDOM: () => ['s', 0],
   }))
-  .commands(({ editor, name }) => ({
-    strike: next => () => {
-      editor.toggleMark(name)
-      next()
+  .commands(({ name }) => ({
+    strike: () => ({ commands }) => {
+      return commands.toggleMark(name)
     },
   }))
   .keys(({ editor }) => ({

packages/extension-underline/index.ts

@@ -1,8 +1,10 @@
-import { Mark } from '@tiptap/core'
+import { Command, Mark } from '@tiptap/core'
+
+export type UnderlineCommand = () => Command
 
 declare module '@tiptap/core/src/Editor' {
   interface Editor {
-    underline(): Editor,
+    underline: UnderlineCommand,
   }
 }
 
@@ -21,9 +23,8 @@ export default new Mark()
     toDOM: () => ['u', 0],
   }))
   .commands(({ editor, name }) => ({
-    underline: next => () => {
-      editor.toggleMark(name)
-      next()
+    underline: () => ({ commands }) => {
+      return commands.toggleMark(name)
     },
   }))
   .keys(({ editor }) => ({