add more commands

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

@@ -2,8 +2,9 @@
   <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().focus().insertText('wat').insertHTML('<p>2</p>').run()">chain 1</button>
-    <button @click="editor.chain().insertText('1').focus().run()">chain</button>
+    <button @click="editor.chain().insertText('1').focus().run()">chain 2</button>
+    <button @click="editor.chain().setContent('reset').insertText('1').clearContent().run()">setContent</button>
     <editor-content :editor="editor" />
   </div>
 </template>

packages/core/src/commands/blur.ts

@@ -1,6 +1,6 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 
-type BlurCommand = () => Editor
+type BlurCommand = () => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -8,9 +8,10 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, { view }: Editor) => () => {
+export const blur: BlurCommand = () => ({ editor }) => {
-  const element = view.dom as HTMLElement
+  const element = editor.view.dom as HTMLElement
 
   element.blur()
-  next()
+
+  return true
 }

packages/core/src/commands/clearContent.ts

@@ -1,6 +1,6 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 
-type ClearContentCommand = (emitUpdate?: Boolean) => Editor
+type ClearContentCommand = (emitUpdate?: Boolean) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -8,7 +8,9 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (emitUpdate = false) => {
+export const clearContent: ClearContentCommand = (emitUpdate = false) => ({ editor }) => {
+  // TODO: doesn’t work, we have to re-use `tr`
   editor.setContent('', emitUpdate)
-  next()
+
+  return true
 }

packages/core/src/commands/index.ts

@@ -1,5 +1,5 @@
-// export { default as blur } from './blur'
+export { blur } from './blur'
-// export { default as clearContent } from './clearContent'
+export { clearContent } from './clearContent'
 // export { default as deleteSelection } from './deleteSelection'
 export { focus } from './focus'
 export { insertHTML } from './insertHTML'
@@ -10,7 +10,7 @@ export { insertText } from './insertText'
 // 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 { setContent } from './setContent'
 // export { default as sinkListItem } from './sinkListItem'
 // export { default as splitListItem } from './splitListItem'
 // export { default as toggleMark } from './toggleMark'

packages/core/src/commands/insertHTML.ts

@@ -25,14 +25,12 @@ function selectionToInsertionEnd(tr, startLen, 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)
 
   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/setContent.ts

@@ -1,11 +1,11 @@
-import { Editor } from '../Editor'
+import { Command } from '../Editor'
 import { TextSelection } from 'prosemirror-state'
 
 type SetContentCommand = (
   content: string,
   emitUpdate?: Boolean,
   parseOptions?: any,
-) => Editor
+) => Command
 
 declare module '../Editor' {
   interface Editor {
@@ -13,21 +13,19 @@ declare module '../Editor' {
   }
 }
 
-export default (next: Function, editor: Editor) => (content: string, emitUpdate: Boolean = false, parseOptions = {}) => {
+export const setContent: SetContentCommand = (content = null, emitUpdate = false, parseOptions = {}) => ({ tr, editor }) => {
   if (content === null) {
-    next()
+    return false
-    return
   }
 
-  const { view, state, createDocument } = editor
+  const { createDocument } = editor
-  const { doc, tr } = state
+  const { doc } = tr
   const document = createDocument(content, parseOptions)
   const selection = TextSelection.create(doc, 0, doc.content.size)
-  const transaction = tr
+  
-    .setSelection(selection)
+  tr.setSelection(selection)
     .replaceSelectionWith(document, false)
     .setMeta('preventUpdate', !emitUpdate)
 
-  view.dispatch(transaction)
+  return true
-  next()
 }