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().insertText('1').focus().run()">chain 2</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" />
</div>
</template>

View File

@ -28,6 +28,7 @@ export type Command = (props: {
tr: Transaction
// TODO: find correct type
commands: any
state: EditorState
}) => boolean
export interface CommandSpec {
@ -118,7 +119,14 @@ export class Editor extends EventEmitter {
return (...args: any) => {
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)
return callback
@ -126,8 +134,7 @@ export class Editor extends EventEmitter {
}
public chain() {
// const { tr } = this.state
const tr = this.state.tr
const { tr } = this.state
const callbacks = []
return new Proxy({}, {
@ -147,6 +154,9 @@ export class Editor extends EventEmitter {
return (...args: any) => {
const props = {
editor: this.proxy,
state: this.chainableEditorState(tr, this.state),
view: this.view,
dispatch: () => {},
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.
*

View File

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

View File

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