add basic new chaining

docs/gridsome.server.js

@@ -71,7 +71,7 @@ module.exports = function (api) {
         .test(/\.tsx?$/)
         .use()
           .loader('ts-loader')
-          .options({ appendTsSuffixTo: [/\.vue$/] })
+          .options({ transpileOnly: true, appendTsSuffixTo: [/\.vue$/] })
 
     config.module
       .rule('jsx')

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

@@ -1,5 +1,11 @@
 <template>
-  <editor-content :editor="editor" />
+  <div>
+    <button @click="() => console.log(editor.focus())">focus</button>
+    <button @click="() => console.log(editor.insertText('hello'))">insert</button>
+    <button @click="editor.chain().focus().insertText('wat').insertHTML('<p>2</p>').run()">chain</button>
+    <button @click="editor.chain().insertText('1').focus().run()">chain</button>
+    <editor-content :editor="editor" />
+  </div>
 </template>
 
 <script>
@@ -16,6 +22,7 @@ export default {
   data() {
     return {
       editor: null,
+      console: console,
     }
   },
 

packages/core/src/Editor.ts

@@ -20,7 +20,13 @@ import ComponentRenderer from './ComponentRenderer'
 import defaultPlugins from './plugins'
 import * as commands from './commands'
 
-export type Command = (next: Function, editor: Editor) => (...args: any) => any
+// 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
+}) => boolean
 
 export interface CommandSpec {
   [key: string]: Command
@@ -108,7 +114,42 @@ export class Editor extends EventEmitter {
       return
     }
 
-    return (...args: any) => command(...args)
+    return (...args: any) => {
+      const { tr } = this.state
+      const callback = command(...args)({ editor: this.proxy, tr })
+      this.view.dispatch(tr)
+
+      return callback
+    }
+  }
+
+  public chain() {
+    // const { tr } = this.state
+    const tr = this.state.tr
+    const callbacks = []
+
+    return new Proxy({}, {
+      get: (target, name: string, proxy) => {
+        if (name === 'run') {
+          this.view.dispatch(tr)
+
+          return () => callbacks.every(callback => callback === true)
+        }
+
+        const command = this.commands[name]
+
+        if (!command) {
+          throw new Error(`tiptap: command '${name}' not found.`)
+        }
+
+        return (...args: any) => {
+          const callback = command(...args)({ editor: this.proxy, tr })
+          callbacks.push(callback)
+
+          return proxy
+        }
+      }
+    })
   }
 
   /**
@@ -155,7 +196,7 @@ export class Editor extends EventEmitter {
    * @param name The name of your command
    * @param callback The method of your command
    */
-  public registerCommand(name: string, callback: Command): Editor {
+  public registerCommand(name: string, callback: (bla?: any) => Command): Editor {
     if (this.commands[name]) {
       throw new Error(`tiptap: command '${name}' is already defined.`)
     }
@@ -164,16 +205,32 @@ export class Editor extends EventEmitter {
       throw new Error(`tiptap: '${name}' is a protected name.`)
     }
 
-    this.commands[name] = this.chainCommand((...args: any) => {
-      // console.log('command', this.lastCommandValue)
-      const commandValue = callback(() => {}, this.proxy)(...args)
+    // this.commands[name] = this.chainCommand((...args: any) => {
+    //   // console.log('command', this.lastCommandValue)
+    //   const commandValue = callback(() => {}, this.proxy)(...args)
 
-      // if (commandValue !== undefined) {
-        this.lastCommandValue = commandValue
-      // }
+    //   // if (commandValue !== undefined) {
+    //     this.lastCommandValue = commandValue
+    //   // }
 
-      return this.proxy
-    })
+    //   return this.proxy
+    // })
+
+    
+    // this.commands[name] = (...args: any) => {
+    //   const tr = this.state.tr
+    //   callback(...args)({ editor: this.proxy, tr })
+    //   this.view.dispatch(tr)
+    // }
+
+    this.commands[name] = callback
+
+    //   // if (commandValue !== undefined) {
+    //     this.lastCommandValue = commandValue
+    //   // }
+
+    //   return this.proxy
+    // })
 
     return this.proxy
   }

packages/core/src/commands/focus.ts

@@ -1,8 +1,8 @@
-import { Editor } from '../Editor'
+import { Editor, Command } from '../Editor'
 import { TextSelection } from 'prosemirror-state'
 import minMax from '../utils/minMax'
 
-type FocusCommand = (position?: Position) => Editor
+type FocusCommand = (position?: Position) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -44,25 +44,45 @@ function resolveSelection(editor: Editor, position: Position = null): ResolvedSe
   }
 }
 
-export default (next: Function, editor: Editor) => (position = null) => {
-  const { view, state } = editor
+// export default (next: Function, editor: Editor) => (position = null) => {
+//   const { view, state } = editor
+
+//   if ((view.hasFocus() && position === null) || position === false) {
+//     next()
+//     return
+//   }
+
+//   const { from, to } = resolveSelection(editor, position)
+//   const { doc, tr } = state
+//   const resolvedFrom = minMax(from, 0, doc.content.size)
+//   const resolvedEnd = minMax(to, 0, doc.content.size)
+//   const selection = TextSelection.create(doc, resolvedFrom, resolvedEnd)
+//   const transaction = tr.setSelection(selection)
+
+//   view.dispatch(transaction)
+//   view.focus()
+//   //@ts-ignore
+//   // console.log(bla)
+//   // return 'FOCUS'
+//   next()
+// }
+
+
+export const focus: FocusCommand = (position = null) => ({ editor, tr }) => {
+  const { view } = editor
 
   if ((view.hasFocus() && position === null) || position === false) {
-    next()
-    return
+    return true
   }
 
   const { from, to } = resolveSelection(editor, position)
-  const { doc, tr } = state
+  const { doc } = tr
   const resolvedFrom = minMax(from, 0, doc.content.size)
   const resolvedEnd = minMax(to, 0, doc.content.size)
   const selection = TextSelection.create(doc, resolvedFrom, resolvedEnd)
-  const transaction = tr.setSelection(selection)
-
-  view.dispatch(transaction)
+  
+  tr.setSelection(selection)
   view.focus()
-  //@ts-ignore
-  // console.log(bla)
-  // return 'FOCUS'
-  next()
+
+  return true
 }

packages/core/src/commands/index.ts

@@ -1,18 +1,18 @@
-export { default as blur } from './blur'
-export { default as clearContent } from './clearContent'
-export { default as deleteSelection } from './deleteSelection'
-export { default as focus } from './focus'
-export { default as insertHTML } from './insertHTML'
-export { default as 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 { default as 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 { default as blur } from './blur'
+// export { default as clearContent } from './clearContent'
+// export { default as 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 { default as 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'

packages/core/src/commands/insertHTML.ts

@@ -1,8 +1,10 @@
 import { DOMParser } from 'prosemirror-model'
-import { Editor } from '../Editor'
+import { Selection } from 'prosemirror-state'
+import { Command } from '../Editor'
 import elementFromString from '../utils/elementFromString'
+import {ReplaceStep, ReplaceAroundStep} from "prosemirror-transform"
 
-type InsertHTMLCommand = (value: string) => Editor
+type InsertHTMLCommand = (value: string) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -10,13 +12,28 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (value: string) => {
-  const { view, state } = editor
-  const { selection } = state
+// TODO: move to utils
+// https://github.com/ProseMirror/prosemirror-state/blob/master/src/selection.js#L466
+function selectionToInsertionEnd(tr, startLen, bias) {
+  let last = tr.steps.length - 1
+  if (last < startLen) return
+  let step = tr.steps[last]
+  if (!(step instanceof ReplaceStep || step instanceof ReplaceAroundStep)) return
+  let map = tr.mapping.maps[last], end
+  map.forEach((_from, _to, _newFrom, newTo) => { if (end == null) end = newTo })
+  tr.setSelection(Selection.near(tr.doc.resolve(end), bias))
+}
+
+export const insertHTML: InsertHTMLCommand = value => ({ tr, editor }) => {
+  console.log({tr })
+  const { state } = editor
+  const { selection } = tr
   const element = elementFromString(value)
   const slice = DOMParser.fromSchema(state.schema).parseSlice(element)
-  const transaction = state.tr.insert(selection.anchor, slice.content)
 
-  view.dispatch(transaction)
-  next()
+  tr.insert(selection.anchor, slice.content)
+  // TODO: set correct bias by content
+  selectionToInsertionEnd(tr, tr.steps.length - 1, -1)
+
+  return true
 }

packages/core/src/commands/insertText.ts

@@ -1,6 +1,6 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 
-type InsertTextCommand = (value: string) => Editor
+type InsertTextCommand = (value: string) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -8,10 +8,8 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (value: string) => {
-  const { view, state } = editor
-  const transaction = state.tr.insertText(value)
+export const insertText: InsertTextCommand = value => ({ tr }) => {
+  tr.insertText(value)
 
-  view.dispatch(transaction)
-  next()
+  return true
 }