add some comments

This commit is contained in:
Philipp Kühn
2020-08-21 23:35:15 +02:00
parent be6ee9853c
commit 3cfed6c17f

View File

@@ -1,7 +1,6 @@
import { EditorState, Plugin } from 'prosemirror-state' import { EditorState, Plugin, Transaction } 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'
import magicMethods from './utils/magicMethods' import magicMethods from './utils/magicMethods'
import elementFromString from './utils/elementFromString' import elementFromString from './utils/elementFromString'
import getAllMethodNames from './utils/getAllMethodNames' import getAllMethodNames from './utils/getAllMethodNames'
@@ -64,6 +63,9 @@ export class Editor extends EventEmitter {
this.options = { ...this.options, ...options } this.options = { ...this.options, ...options }
} }
/**
* This method is called after the proxy is initialized.
*/
private init() { private init() {
this.createExtensionManager() this.createExtensionManager()
this.createSchema() this.createSchema()
@@ -77,6 +79,11 @@ export class Editor extends EventEmitter {
this.proxy.focus(this.options.autoFocus) this.proxy.focus(this.options.autoFocus)
} }
/**
* A magic method to call commands.
*
* @param name The name of the command
*/
private __get(name: string) { private __get(name: string) {
const command = this.commands[name] const command = this.commands[name]
@@ -89,6 +96,11 @@ export class Editor extends EventEmitter {
return (...args: any) => command(...args) return (...args: any) => command(...args)
} }
/**
* Update editor options.
*
* @param options A list of options
*/
public setOptions(options: Partial<EditorOptions> = {}) { public setOptions(options: Partial<EditorOptions> = {}) {
this.options = { ...this.options, ...options } this.options = { ...this.options, ...options }
@@ -96,21 +108,38 @@ export class Editor extends EventEmitter {
this.view.updateState(this.state) this.view.updateState(this.state)
} }
} }
/**
* Returns whether the editor is editable.
*/
public get isEditable() { public get isEditable() {
return this.view && this.view.editable return this.view && this.view.editable
} }
/**
* Returns the editor state.
*/
public get state() { public get state() {
return this.view.state return this.view.state
} }
/**
* Register a list of commands.
*
* @param commands A list of commands
*/
public registerCommands(commands: CommandSpec) { public registerCommands(commands: CommandSpec) {
Object Object
.entries(commands) .entries(commands)
.forEach(([name, command]) => this.registerCommand(name, command)) .forEach(([name, command]) => this.registerCommand(name, command))
} }
/**
* Register a command.
*
* @param name The name of your command
* @param callback The method of your command
*/
public registerCommand(name: string, callback: Command): Editor { public registerCommand(name: string, callback: Command): Editor {
if (this.commands[name]) { if (this.commands[name]) {
throw new Error(`tiptap: command '${name}' is already defined.`) throw new Error(`tiptap: command '${name}' is already defined.`)
@@ -127,6 +156,12 @@ export class Editor extends EventEmitter {
return this.proxy return this.proxy
} }
/**
* Register a ProseMirror plugin.
*
* @param plugin A ProseMirror plugin
* @param handlePlugins Control how to merge the plugin into the existing plugins.
*/
public registerPlugin(plugin: Plugin, handlePlugins?: (plugin: Plugin, plugins: Plugin[]) => Plugin[]) { public registerPlugin(plugin: Plugin, handlePlugins?: (plugin: Plugin, plugins: Plugin[]) => Plugin[]) {
const plugins = typeof handlePlugins === 'function' const plugins = typeof handlePlugins === 'function'
? handlePlugins(plugin, this.state.plugins) ? handlePlugins(plugin, this.state.plugins)
@@ -137,6 +172,11 @@ export class Editor extends EventEmitter {
this.view.updateState(state) this.view.updateState(state)
} }
/**
* Unregister a ProseMirror plugin.
*
* @param name The plugins name
*/
public unregisterPlugin(name: string) { public unregisterPlugin(name: string) {
const state = this.state.reconfigure({ const state = this.state.reconfigure({
// @ts-ignore // @ts-ignore
@@ -146,14 +186,39 @@ export class Editor extends EventEmitter {
this.view.updateState(state) this.view.updateState(state)
} }
public command(name: string, ...args: any) { /**
return this.commands[name](...args) * Call a command.
*
* @param name The name of the command you want to call.
* @param options The options of the command.
*/
public command(name: string, ...options: any) {
return this.commands[name](...options)
} }
/**
* Wraps a command to make it chainable.
*
* @param method
*/
private chainCommand = (method: Function) => (...args: any) => {
this.lastCommand = this.lastCommand
.then(() => method.apply(this, args))
.catch(console.error)
return this.proxy
}
/**
* Creates an extension manager.
*/
private createExtensionManager() { private createExtensionManager() {
this.extensionManager = new ExtensionManager(this.options.extensions, this.proxy) this.extensionManager = new ExtensionManager(this.options.extensions, this.proxy)
} }
/**
* Creates a ProseMirror schema.
*/
private createSchema() { private createSchema() {
this.schema = new Schema({ this.schema = new Schema({
topNode: this.extensionManager.topNode, topNode: this.extensionManager.topNode,
@@ -163,32 +228,26 @@ export class Editor extends EventEmitter {
this.emit('schemaCreated') this.emit('schemaCreated')
} }
private get plugins() { /**
return [ * Creates a ProseMirror view.
...this.extensionManager.plugins, */
...defaultPlugins.map(plugin => plugin(this.proxy)),
]
}
private createView() { private createView() {
this.view = new EditorView(this.options.element, { this.view = new EditorView(this.options.element, {
state: EditorState.create({ state: EditorState.create({
doc: this.createDocument(this.options.content), doc: this.createDocument(this.options.content),
plugins: this.plugins, plugins: [
...this.extensionManager.plugins,
...defaultPlugins.map(plugin => plugin(this.proxy)),
],
}), }),
dispatchTransaction: this.dispatchTransaction.bind(this), dispatchTransaction: this.dispatchTransaction.bind(this),
nodeViews: this.extensionManager.nodeViews, nodeViews: this.extensionManager.nodeViews,
}) })
} }
private chainCommand = (method: Function) => (...args: any) => { /**
this.lastCommand = this.lastCommand * Creates a ProseMirror document.
.then(() => method.apply(this, args)) */
.catch(console.error)
return this.proxy
}
public createDocument = (content: EditorContent, parseOptions: any = {}): any => { public createDocument = (content: EditorContent, parseOptions: any = {}): any => {
if (content && typeof content === 'object') { if (content && typeof content === 'object') {
try { try {
@@ -208,12 +267,20 @@ export class Editor extends EventEmitter {
return this.createDocument('') return this.createDocument('')
} }
/**
* Store the current selection.
*/
private storeSelection() { private storeSelection() {
const { from, to } = this.state.selection const { from, to } = this.state.selection
this.selection = { from, to } this.selection = { from, to }
} }
private dispatchTransaction(transaction: any): void { /**
* The callback over which to send transactions (state updates) produced by the view.
*
* @param transaction An editor state transaction
*/
private dispatchTransaction(transaction: Transaction) {
const state = this.state.apply(transaction) const state = this.state.apply(transaction)
this.view.updateState(state) this.view.updateState(state)
this.storeSelection() this.storeSelection()
@@ -226,14 +293,30 @@ export class Editor extends EventEmitter {
this.emit('update', { transaction }) this.emit('update', { transaction })
} }
/**
* Get attributes of the currently selected node.
*
* @param name Name of the node
*/
public getNodeAttrs(name: string) { public getNodeAttrs(name: string) {
return getNodeAttrs(this.state, this.schema.nodes[name]) return getNodeAttrs(this.state, this.schema.nodes[name])
} }
/**
* Get attributes of the currently selected mark.
*
* @param name Name of the mark
*/
public getMarkAttrs(name: string) { public getMarkAttrs(name: string) {
return getMarkAttrs(this.state, this.schema.marks[name]) return getMarkAttrs(this.state, this.schema.marks[name])
} }
/**
* Returns if the currently selected node or mark is active.
*
* @param name Name of the node or mark
* @param attrs Attributes of the node or mark
*/
public isActive(name: string, attrs = {}) { public isActive(name: string, attrs = {}) {
const schemaType = getSchemaTypeByName(name, this.schema) const schemaType = getSchemaTypeByName(name, this.schema)
@@ -262,10 +345,16 @@ export class Editor extends EventEmitter {
// }) // })
// } // }
/**
* Get the document as JSON.
*/
public json() { public json() {
return this.state.doc.toJSON() return this.state.doc.toJSON()
} }
/**
* Get the document as HTML.
*/
public html() { public html() {
const div = document.createElement('div') const div = document.createElement('div')
const fragment = DOMSerializer const fragment = DOMSerializer
@@ -277,6 +366,9 @@ export class Editor extends EventEmitter {
return div.innerHTML return div.innerHTML
} }
/**
* Destroy the editor.
*/
public destroy() { public destroy() {
if (this.view) { if (this.view) {
this.view.destroy() this.view.destroy()