refactoring
This commit is contained in:
@@ -14,7 +14,7 @@ export default {
|
|||||||
if (editor.element) {
|
if (editor.element) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$el.append(editor.element.firstChild)
|
this.$el.append(editor.element.firstChild)
|
||||||
editor.setParent(this)
|
editor.setParentComponent(this)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,10 +1,12 @@
|
|||||||
export { default as Editor } from './Utils/Editor'
|
export { default as Editor } from './Utils/Editor'
|
||||||
|
export { default as Extension } from './Utils/Extension'
|
||||||
|
export { default as Node } from './Utils/Node'
|
||||||
|
export { default as Mark } from './Utils/Mark'
|
||||||
|
|
||||||
export { default as EditorContent } from './Components/EditorContent'
|
export { default as EditorContent } from './Components/EditorContent'
|
||||||
export { default as EditorMenuBar } from './Components/EditorMenuBar'
|
export { default as EditorMenuBar } from './Components/EditorMenuBar'
|
||||||
export { default as EditorMenuBubble } from './Components/EditorMenuBubble'
|
export { default as EditorMenuBubble } from './Components/EditorMenuBubble'
|
||||||
export { default as EditorFloatingMenu } from './Components/EditorFloatingMenu'
|
export { default as EditorFloatingMenu } from './Components/EditorFloatingMenu'
|
||||||
|
|
||||||
export { default as Extension } from './Utils/Extension'
|
export { Plugin } from 'prosemirror-state'
|
||||||
export { default as Node } from './Utils/Node'
|
export { PluginKey } from 'prosemirror-state'
|
||||||
export { default as Mark } from './Utils/Mark'
|
|
||||||
export { default as Plugin } from './Utils/Plugin'
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
export default class ComponentView {
|
export default class ComponentView {
|
||||||
|
|
||||||
constructor(component, {
|
constructor(component, {
|
||||||
extension,
|
extension,
|
||||||
parent,
|
parent,
|
||||||
@@ -94,4 +95,5 @@ export default class ComponentView {
|
|||||||
destroy() {
|
destroy() {
|
||||||
this.vm.$destroy()
|
this.vm.$destroy()
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,8 +18,27 @@ import builtInNodes from '../Nodes'
|
|||||||
export default class Editor {
|
export default class Editor {
|
||||||
|
|
||||||
constructor(options = {}) {
|
constructor(options = {}) {
|
||||||
|
this.init(options)
|
||||||
|
}
|
||||||
|
|
||||||
|
init(options = {}) {
|
||||||
this.setOptions(options)
|
this.setOptions(options)
|
||||||
this.init()
|
this.element = document.createElement('div')
|
||||||
|
this.extensions = this.createExtensions()
|
||||||
|
this.nodes = this.createNodes()
|
||||||
|
this.marks = this.createMarks()
|
||||||
|
this.schema = this.createSchema()
|
||||||
|
this.plugins = this.createPlugins()
|
||||||
|
this.keymaps = this.createKeymaps()
|
||||||
|
this.inputRules = this.createInputRules()
|
||||||
|
this.state = this.createState()
|
||||||
|
this.view = this.createView()
|
||||||
|
this.commands = this.createCommands()
|
||||||
|
this.setActiveNodesAndMarks()
|
||||||
|
this.options.onInit({
|
||||||
|
view: this.view,
|
||||||
|
state: this.state,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
setOptions(options) {
|
setOptions(options) {
|
||||||
@@ -39,25 +58,6 @@ export default class Editor {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
init() {
|
|
||||||
this.element = document.createElement('div')
|
|
||||||
this.extensions = this.createExtensions()
|
|
||||||
this.nodes = this.createNodes()
|
|
||||||
this.marks = this.createMarks()
|
|
||||||
this.schema = this.createSchema()
|
|
||||||
this.plugins = this.createPlugins()
|
|
||||||
this.keymaps = this.createKeymaps()
|
|
||||||
this.inputRules = this.createInputRules()
|
|
||||||
this.state = this.createState()
|
|
||||||
this.view = this.createView()
|
|
||||||
this.commands = this.createCommands()
|
|
||||||
this.setActiveNodesAndMarks()
|
|
||||||
this.options.onInit({
|
|
||||||
view: this.view,
|
|
||||||
state: this.state,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
createExtensions() {
|
createExtensions() {
|
||||||
return new ExtensionManager([
|
return new ExtensionManager([
|
||||||
...builtInNodes,
|
...builtInNodes,
|
||||||
@@ -169,7 +169,7 @@ export default class Editor {
|
|||||||
return view
|
return view
|
||||||
}
|
}
|
||||||
|
|
||||||
setParent(component = null) {
|
setParentComponent(component = null) {
|
||||||
if (!component) {
|
if (!component) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@@ -206,6 +206,10 @@ export default class Editor {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
focus() {
|
||||||
|
this.view.focus()
|
||||||
|
}
|
||||||
|
|
||||||
getHTML() {
|
getHTML() {
|
||||||
const div = document.createElement('div')
|
const div = document.createElement('div')
|
||||||
const fragment = DOMSerializer
|
const fragment = DOMSerializer
|
||||||
@@ -267,19 +271,6 @@ export default class Editor {
|
|||||||
}), {})
|
}), {})
|
||||||
}
|
}
|
||||||
|
|
||||||
focus() {
|
|
||||||
this.view.focus()
|
|
||||||
}
|
|
||||||
|
|
||||||
registerPlugin(plugin = null) {
|
|
||||||
if (plugin) {
|
|
||||||
this.state = this.state.reconfigure({
|
|
||||||
plugins: this.state.plugins.concat([plugin]),
|
|
||||||
})
|
|
||||||
this.view.updateState(this.state)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getMarkAttrs(type = null) {
|
getMarkAttrs(type = null) {
|
||||||
return this.activeMarkAttrs[type]
|
return this.activeMarkAttrs[type]
|
||||||
}
|
}
|
||||||
@@ -296,10 +287,23 @@ export default class Editor {
|
|||||||
}), {})
|
}), {})
|
||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
registerPlugin(plugin = null) {
|
||||||
if (this.view) {
|
if (!plugin) {
|
||||||
this.view.destroy()
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.state = this.state.reconfigure({
|
||||||
|
plugins: this.state.plugins.concat([plugin]),
|
||||||
|
})
|
||||||
|
this.view.updateState(this.state)
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
if (!this.view) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.view.destroy()
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { lift, selectParentNode } from 'prosemirror-commands'
|
import { selectParentNode } from 'prosemirror-commands'
|
||||||
import { undoInputRule } from 'prosemirror-inputrules'
|
import { undoInputRule } from 'prosemirror-inputrules'
|
||||||
|
|
||||||
const keymap = {
|
const keymap = {
|
||||||
'Mod-BracketLeft': lift,
|
|
||||||
Backspace: undoInputRule,
|
Backspace: undoInputRule,
|
||||||
Escape: selectParentNode,
|
Escape: selectParentNode,
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
import { Plugin } from 'prosemirror-state'
|
|
||||||
|
|
||||||
export default Plugin
|
|
||||||
@@ -19,7 +19,7 @@ import {
|
|||||||
History,
|
History,
|
||||||
} from '../../tiptap-extensions'
|
} from '../../tiptap-extensions'
|
||||||
|
|
||||||
test('can create editor', () => {
|
test('create editor', () => {
|
||||||
const editor = new Editor()
|
const editor = new Editor()
|
||||||
|
|
||||||
expect(editor).toBeDefined()
|
expect(editor).toBeDefined()
|
||||||
|
|||||||
Reference in New Issue
Block a user