153 lines
3.7 KiB
TypeScript
153 lines
3.7 KiB
TypeScript
import {EditorState, Plugin} from "prosemirror-state"
|
|
import {EditorView} from "prosemirror-view"
|
|
import {Schema, DOMParser, DOMSerializer} from "prosemirror-model"
|
|
// @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 insertText from './commands/insertText'
|
|
import insertHTML from './commands/insertHTML'
|
|
import focus from './commands/focus'
|
|
|
|
import elementFromString from './utils/elementFromString'
|
|
|
|
type EditorContent = string | JSON
|
|
|
|
interface EditorOptions {
|
|
element: Node
|
|
content: EditorContent
|
|
}
|
|
|
|
export class Editor {
|
|
|
|
private lastCommand = Promise.resolve()
|
|
|
|
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: EditorOptions
|
|
|
|
constructor(options: EditorOptions) {
|
|
this.options = options
|
|
this.view = this.createView()
|
|
this.registerCommand('focus', focus)
|
|
this.registerCommand('insertText', insertText)
|
|
this.registerCommand('insertHTML', insertHTML)
|
|
}
|
|
|
|
get state() {
|
|
return this.view.state
|
|
}
|
|
|
|
private createState() {
|
|
return EditorState.create({
|
|
doc: this.createDocument(this.options.content),
|
|
plugins: [
|
|
...exampleSetup({schema: this.schema}),
|
|
],
|
|
})
|
|
}
|
|
|
|
private createView() {
|
|
return new EditorView(this.options.element, {
|
|
state: this.createState(),
|
|
dispatchTransaction: this.dispatchTransaction.bind(this),
|
|
})
|
|
}
|
|
|
|
private chainCommand = (method: Function) => (...args: any) => {
|
|
this.lastCommand = this.lastCommand
|
|
.then(() => method.apply(this, args))
|
|
.catch(console.error)
|
|
|
|
return this
|
|
}
|
|
|
|
private createDocument(content: EditorContent): any {
|
|
// if (content === null) {
|
|
// return this.schema.nodeFromJSON(this.options.emptyDocument)
|
|
// }
|
|
|
|
// if (typeof content === 'object') {
|
|
// try {
|
|
// return this.schema.nodeFromJSON(content)
|
|
// } catch (error) {
|
|
// console.warn('[tiptap warn]: Invalid content.', 'Passed value:', content, 'Error:', error)
|
|
// return this.schema.nodeFromJSON(this.options.emptyDocument)
|
|
// }
|
|
// }
|
|
|
|
if (typeof content === 'string') {
|
|
return DOMParser
|
|
.fromSchema(this.schema)
|
|
.parse(elementFromString(content))
|
|
}
|
|
|
|
return false
|
|
}
|
|
|
|
private dispatchTransaction(transaction: any): void {
|
|
const newState = this.state.apply(transaction)
|
|
this.view.updateState(newState)
|
|
this.selection = {
|
|
from: this.state.selection.from,
|
|
to: this.state.selection.to,
|
|
}
|
|
// this.setActiveNodesAndMarks()
|
|
|
|
// this.emit('transaction', {
|
|
// getHTML: this.getHTML.bind(this),
|
|
// getJSON: this.getJSON.bind(this),
|
|
// state: this.state,
|
|
// transaction,
|
|
// })
|
|
|
|
if (!transaction.docChanged || transaction.getMeta('preventUpdate')) {
|
|
return
|
|
}
|
|
|
|
// this.emitUpdate(transaction)
|
|
}
|
|
|
|
public registerCommand(name: string, method: Function): Editor {
|
|
// @ts-ignore
|
|
this[name] = this.chainCommand((...args: any) => {
|
|
return new Promise(resolve => {
|
|
return method(resolve as Function, this as Editor, ...args as any)
|
|
})
|
|
})
|
|
|
|
return this
|
|
}
|
|
|
|
public command(name: string, ...args: any) {
|
|
// @ts-ignore
|
|
return this[name](...args)
|
|
}
|
|
|
|
public json() {
|
|
return this.state.doc.toJSON()
|
|
}
|
|
|
|
public html() {
|
|
const div = document.createElement('div')
|
|
const fragment = DOMSerializer
|
|
.fromSchema(this.schema)
|
|
.serializeFragment(this.state.doc.content)
|
|
|
|
div.appendChild(fragment)
|
|
|
|
return div.innerHTML
|
|
}
|
|
|
|
}
|