add support for prosemirror commands

This commit is contained in:
Philipp Kühn
2020-09-21 18:40:32 +02:00
parent 432b30f1a6
commit c1a941a042
4 changed files with 52 additions and 10 deletions

View File

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

View File

@@ -28,6 +28,7 @@ export type Command = (props: {
tr: Transaction tr: Transaction
// TODO: find correct type // TODO: find correct type
commands: any commands: any
state: EditorState
}) => boolean }) => boolean
export interface CommandSpec { export interface CommandSpec {
@@ -118,7 +119,14 @@ export class Editor extends EventEmitter {
return (...args: any) => { return (...args: any) => {
const { tr } = this.state const { tr } = this.state
const callback = command(...args)({ editor: this.proxy, tr }) const callback = command(...args)({
editor: this.proxy,
state: this.chainableEditorState(tr, this.state),
view: this.view,
dispatch: () => {},
tr,
})
this.view.dispatch(tr) this.view.dispatch(tr)
return callback return callback
@@ -126,8 +134,7 @@ export class Editor extends EventEmitter {
} }
public chain() { public chain() {
// const { tr } = this.state const { tr } = this.state
const tr = this.state.tr
const callbacks = [] const callbacks = []
return new Proxy({}, { return new Proxy({}, {
@@ -147,6 +154,9 @@ export class Editor extends EventEmitter {
return (...args: any) => { return (...args: any) => {
const props = { const props = {
editor: this.proxy, editor: this.proxy,
state: this.chainableEditorState(tr, this.state),
view: this.view,
dispatch: () => {},
tr, tr,
} }
@@ -169,6 +179,38 @@ export class Editor extends EventEmitter {
}) })
} }
protected chainableEditorState(tr: Transaction, state: EditorState): EditorState {
let selection = tr.selection
let doc = tr.doc
let storedMarks = tr.storedMarks
return {
...state,
schema: state.schema,
plugins: state.plugins,
apply: state.apply.bind(state),
applyTransaction: state.applyTransaction.bind(state),
reconfigure: state.reconfigure.bind(state),
toJSON: state.toJSON.bind(state),
get storedMarks() {
return storedMarks
},
get selection() {
return selection
},
get doc() {
return doc
},
get tr() {
selection = tr.selection
doc = tr.doc
storedMarks = tr.storedMarks
return tr
},
};
}
/** /**
* Update editor options. * Update editor options.
* *

View File

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

View File

@@ -1,6 +1,6 @@
export { blur } from './blur' export { blur } from './blur'
export { clearContent } from './clearContent' export { clearContent } from './clearContent'
// export { default as deleteSelection } from './deleteSelection' export { deleteSelection } from './deleteSelection'
export { focus } from './focus' export { focus } from './focus'
export { insertHTML } from './insertHTML' export { insertHTML } from './insertHTML'
export { insertText } from './insertText' export { insertText } from './insertText'