pass extension to component view
This commit is contained in:
@@ -2,6 +2,7 @@ import Vue from 'vue'
|
|||||||
|
|
||||||
export default class ComponentView {
|
export default class ComponentView {
|
||||||
constructor(component, {
|
constructor(component, {
|
||||||
|
extension,
|
||||||
parent,
|
parent,
|
||||||
node,
|
node,
|
||||||
view,
|
view,
|
||||||
@@ -9,6 +10,7 @@ export default class ComponentView {
|
|||||||
decorations,
|
decorations,
|
||||||
editable,
|
editable,
|
||||||
}) {
|
}) {
|
||||||
|
this.extension = extension
|
||||||
this.parent = parent
|
this.parent = parent
|
||||||
this.component = component
|
this.component = component
|
||||||
this.node = node
|
this.node = node
|
||||||
@@ -63,11 +65,14 @@ export default class ComponentView {
|
|||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
stopEvent(event) {
|
stopEvent() {
|
||||||
// TODO: find a way to pass full extensions to ComponentView
|
const draggable = !!this.extension.schema.draggable
|
||||||
// so we could check for schema.draggable
|
|
||||||
// for now we're allowing all drag events for node views
|
if (draggable) {
|
||||||
return !/drag/.test(event.type)
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
update(node, decorations) {
|
update(node, decorations) {
|
||||||
|
|||||||
@@ -42,7 +42,6 @@ export default class Editor {
|
|||||||
this.extensions = this.createExtensions()
|
this.extensions = this.createExtensions()
|
||||||
this.nodes = this.createNodes()
|
this.nodes = this.createNodes()
|
||||||
this.marks = this.createMarks()
|
this.marks = this.createMarks()
|
||||||
this.views = this.createViews()
|
|
||||||
this.schema = this.createSchema()
|
this.schema = this.createSchema()
|
||||||
this.plugins = this.createPlugins()
|
this.plugins = this.createPlugins()
|
||||||
this.keymaps = this.createKeymaps()
|
this.keymaps = this.createKeymaps()
|
||||||
@@ -93,10 +92,6 @@ export default class Editor {
|
|||||||
return this.extensions.marks
|
return this.extensions.marks
|
||||||
}
|
}
|
||||||
|
|
||||||
createViews() {
|
|
||||||
return this.extensions.views
|
|
||||||
}
|
|
||||||
|
|
||||||
createSchema() {
|
createSchema() {
|
||||||
return new Schema({
|
return new Schema({
|
||||||
nodes: this.nodes,
|
nodes: this.nodes,
|
||||||
@@ -146,7 +141,10 @@ export default class Editor {
|
|||||||
state: this.state,
|
state: this.state,
|
||||||
dispatchTransaction: this.dispatchTransaction.bind(this),
|
dispatchTransaction: this.dispatchTransaction.bind(this),
|
||||||
nodeViews: initNodeViews({
|
nodeViews: initNodeViews({
|
||||||
nodes: this.views,
|
extensions: [
|
||||||
|
...builtInNodes,
|
||||||
|
...this.options.extensions,
|
||||||
|
],
|
||||||
editable: this.options.editable,
|
editable: this.options.editable,
|
||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -33,16 +33,6 @@ export default class ExtensionManager {
|
|||||||
]), [])
|
]), [])
|
||||||
}
|
}
|
||||||
|
|
||||||
get views() {
|
|
||||||
return this.extensions
|
|
||||||
.filter(extension => ['node', 'mark'].includes(extension.type))
|
|
||||||
.filter(extension => extension.view)
|
|
||||||
.reduce((views, { name, view }) => ({
|
|
||||||
...views,
|
|
||||||
[name]: view,
|
|
||||||
}), {})
|
|
||||||
}
|
|
||||||
|
|
||||||
keymaps({ schema }) {
|
keymaps({ schema }) {
|
||||||
const extensionKeymaps = this.extensions
|
const extensionKeymaps = this.extensions
|
||||||
.filter(extension => ['extension'].includes(extension.type))
|
.filter(extension => ['extension'].includes(extension.type))
|
||||||
|
|||||||
@@ -1,13 +1,15 @@
|
|||||||
import ComponentView from './ComponentView'
|
import ComponentView from './ComponentView'
|
||||||
|
|
||||||
export default function initNodeViews({ parent, nodes, editable }) {
|
export default function initNodeViews({ parent, extensions, editable }) {
|
||||||
const nodeViews = {}
|
return extensions
|
||||||
|
.filter(extension => ['node', 'mark'].includes(extension.type))
|
||||||
Object.keys(nodes).forEach(nodeName => {
|
.filter(extension => extension.view)
|
||||||
nodeViews[nodeName] = (node, view, getPos, decorations) => {
|
.reduce((nodeViews, extension) => {
|
||||||
const component = nodes[nodeName]
|
const nodeView = (node, view, getPos, decorations) => {
|
||||||
|
const component = extension.view
|
||||||
|
|
||||||
return new ComponentView(component, {
|
return new ComponentView(component, {
|
||||||
|
extension,
|
||||||
parent,
|
parent,
|
||||||
node,
|
node,
|
||||||
view,
|
view,
|
||||||
@@ -16,7 +18,10 @@ export default function initNodeViews({ parent, nodes, editable }) {
|
|||||||
editable,
|
editable,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
|
||||||
|
|
||||||
return nodeViews
|
return {
|
||||||
|
...nodeViews,
|
||||||
|
[extension.name]: nodeView,
|
||||||
|
}
|
||||||
|
}, {})
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user