refactoring

This commit is contained in:
Philipp Kühn
2020-03-05 21:49:53 +01:00
parent 01a0b99d00
commit d722cfe1bc

View File

@@ -2,10 +2,6 @@ import {EditorState, TextSelection, Plugin} from "prosemirror-state"
import {EditorView} from "prosemirror-view" import {EditorView} from "prosemirror-view"
import {Schema, DOMParser, DOMSerializer} from "prosemirror-model" import {Schema, DOMParser, DOMSerializer} from "prosemirror-model"
// @ts-ignore // @ts-ignore
import {schema} from "prosemirror-schema-basic"
// @ts-ignore
import {addListNodes} from "prosemirror-schema-list"
// @ts-ignore
import {exampleSetup} from "prosemirror-example-setup" import {exampleSetup} from "prosemirror-example-setup"
import elementFromString from './utils/elementFromString' import elementFromString from './utils/elementFromString'
@@ -24,32 +20,24 @@ interface Options {
export class Editor { export class Editor {
private lastCommand = Promise.resolve() extensionManager!: ExtensionManager
schema!: Schema
schema: Schema view!: EditorView
// private schema: Schema = new Schema({
// nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
// marks: schema.spec.marks
// })
selection = { from: 0, to: 0 }
view: EditorView
options: Options = { options: Options = {
content: '', content: '',
injectCSS: true, injectCSS: true,
extensions: [], extensions: [],
} }
extensionManager: ExtensionManager private lastCommand = Promise.resolve()
public selection = { from: 0, to: 0 }
constructor(options: Options) { constructor(options: Options) {
this.options = { ...this.options, ...options } this.options = { ...this.options, ...options }
this.extensionManager = new ExtensionManager(this.options.extensions, this) this.createExtensionManager()
this.schema = this.createSchema() this.createSchema()
this.view = this.createView() this.createView()
this.registerCommand('focus', require('./commands/focus').default) this.registerCommand('focus', require('./commands/focus').default)
this.registerCommand('insertText', require('./commands/insertText').default) this.registerCommand('insertText', require('./commands/insertText').default)
this.registerCommand('insertHTML', require('./commands/insertHTML').default) this.registerCommand('insertHTML', require('./commands/insertHTML').default)
@@ -59,30 +47,26 @@ export class Editor {
} }
} }
get state() { private createExtensionManager() {
return this.view.state this.extensionManager = new ExtensionManager(this.options.extensions, this)
} }
private createSchema() { private createSchema() {
return new Schema({ this.schema = new Schema({
// topNode: this.options.topNode, // topNode: this.options.topNode,
nodes: this.extensionManager.nodes, nodes: this.extensionManager.nodes,
marks: this.extensionManager.marks, marks: this.extensionManager.marks,
}) })
} }
private createState() {
return EditorState.create({
doc: this.createDocument(this.options.content),
plugins: [
...exampleSetup({schema: this.schema}),
],
})
}
private createView() { private createView() {
return new EditorView(this.options.element, { this.view = new EditorView(this.options.element, {
state: this.createState(), state: EditorState.create({
doc: this.createDocument(this.options.content),
plugins: [
...exampleSetup({schema: this.schema}),
],
}),
dispatchTransaction: this.dispatchTransaction.bind(this), dispatchTransaction: this.dispatchTransaction.bind(this),
}) })
} }
@@ -118,20 +102,6 @@ export class Editor {
return false return false
} }
public setContent(content: EditorContent = '', emitUpdate: Boolean = false, parseOptions: any = {}) {
const { doc, tr } = this.state
const document = this.createDocument(content, parseOptions)
const selection = TextSelection.create(doc, 0, doc.content.size)
const transaction = tr
.setSelection(selection)
.replaceSelectionWith(document, false)
.setMeta('preventUpdate', !emitUpdate)
this.view.dispatch(transaction)
return this
}
private dispatchTransaction(transaction: any): void { private dispatchTransaction(transaction: any): void {
const state = this.state.apply(transaction) const state = this.state.apply(transaction)
this.view.updateState(state) this.view.updateState(state)
@@ -155,6 +125,24 @@ export class Editor {
// this.emitUpdate(transaction) // this.emitUpdate(transaction)
} }
public get state() {
return this.view.state
}
public setContent(content: EditorContent = '', emitUpdate: Boolean = false, parseOptions: any = {}) {
const { doc, tr } = this.state
const document = this.createDocument(content, parseOptions)
const selection = TextSelection.create(doc, 0, doc.content.size)
const transaction = tr
.setSelection(selection)
.replaceSelectionWith(document, false)
.setMeta('preventUpdate', !emitUpdate)
this.view.dispatch(transaction)
return this
}
public registerCommand(name: string, method: Function): Editor { public registerCommand(name: string, method: Function): Editor {
// @ts-ignore // @ts-ignore
this[name] = this.chainCommand((...args: any) => { this[name] = this.chainCommand((...args: any) => {