From dcac8e54073b6dd2359409d1ec2394f04ff26cb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Tue, 24 Nov 2020 10:51:57 +0100 Subject: [PATCH] improve node views --- .eslintrc.js | 1 + .../src/demos/Examples/NodeView/Component.vue | 47 +++--------- docs/src/demos/Examples/NodeView/Test.ts | 2 - packages/vue/src/VueRenderer.ts | 76 ++++++++++++------- packages/vue/src/components/EditorContent.ts | 1 + 5 files changed, 60 insertions(+), 67 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 36715012..8e87abee 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -46,6 +46,7 @@ module.exports = { 'func-names': ['error', 'never'], 'arrow-body-style': 'off', 'max-len': 'off', + 'vue/one-component-per-file': 'off', 'vue/this-in-template': ['error', 'never'], 'vue/max-attributes-per-line': ['error', { singleline: 3, diff --git a/docs/src/demos/Examples/NodeView/Component.vue b/docs/src/demos/Examples/NodeView/Component.vue index 07385fdb..e03e0490 100644 --- a/docs/src/demos/Examples/NodeView/Component.vue +++ b/docs/src/demos/Examples/NodeView/Component.vue @@ -1,25 +1,13 @@ - - diff --git a/docs/src/demos/Examples/NodeView/Test.ts b/docs/src/demos/Examples/NodeView/Test.ts index 981386cf..5d4b7911 100644 --- a/docs/src/demos/Examples/NodeView/Test.ts +++ b/docs/src/demos/Examples/NodeView/Test.ts @@ -13,8 +13,6 @@ export default Node.create({ selectable: false, - // atom: true, - addAttributes() { return { checked: { diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts index dbca0f82..2d132f5c 100644 --- a/packages/vue/src/VueRenderer.ts +++ b/packages/vue/src/VueRenderer.ts @@ -6,9 +6,6 @@ import { } from 'prosemirror-model' import Vue from 'vue' import { VueConstructor } from 'vue/types/umd' -// import Inner from './components/Inner.vue' - -// const Inner = Vue.extend() class VueNodeView implements NodeView { @@ -31,16 +28,16 @@ class VueNodeView implements NodeView { this.extension = props.extension this.node = props.node this.getPos = props.getPos + this.createUniqueId() this.mount(component) } - mount(component: Vue | VueConstructor) { - this.id = `id_${Math.random().toString(36).replace('0.', '')}` + createUniqueId() { + this.id = `id_${Math.floor(Math.random() * 0xFFFFFFFF)}` + } - const { id } = this - - const Inner = Vue.extend({ - // functional: true, + createNodeViewWrapper() { + return Vue.extend({ inheritAttrs: false, props: { as: { @@ -48,38 +45,69 @@ class VueNodeView implements NodeView { default: 'div', }, }, - render(createElement, context) { + render(createElement) { + return createElement( + this.as, { + style: { + whiteSpace: 'normal', + }, + }, + this.$slots.default, + ) + }, + }) + } + + createNodeViewContent() { + const { id } = this + + return Vue.extend({ + inheritAttrs: false, + props: { + as: { + type: String, + default: 'div', + }, + }, + render(createElement) { return createElement( - // context.props.as, { this.as, { style: { whiteSpace: 'pre-wrap', }, attrs: { id, - // contenteditable: true, + contenteditable: true, }, }, ) }, }) + } + + mount(component: Vue | VueConstructor) { + const NodeViewWrapper = this.createNodeViewWrapper() + const NodeViewContent = this.createNodeViewContent() const Component = Vue .extend(component) .extend({ components: { - Inner, + NodeViewWrapper, + NodeViewContent, }, }) const props = { editor: this.editor, - inner: Inner, + NodeViewWrapper, + NodeViewContent, node: this.node, - updateAttrs: (attrs: {}) => this.updateAttrs(attrs), + updateAttributes: (attrs: {}) => this.updateAttributes(attrs), } this.vm = new Component({ + // TODO: get parent component // parent: this.parent, propsData: props, }).$mount() @@ -98,8 +126,6 @@ class VueNodeView implements NodeView { } stopEvent(event: Event): boolean { - // console.log(event.type) - const isDraggable = this.node.type.spec.draggable const isCopy = event.type === 'copy' const isPaste = event.type === 'paste' @@ -139,7 +165,6 @@ class VueNodeView implements NodeView { this.node = node this.decorations = decorations - this.updateComponentProps() return true @@ -150,24 +175,17 @@ class VueNodeView implements NodeView { this.vm.$props.decorations = this.decorations } - updateAttrs(attrs: {}) { + updateAttributes(attributes: {}) { if (!this.editor.view.editable) { return } const { state } = this.editor.view - // const { type } = this.node const pos = this.getPos() - const newAttrs = { + const transaction = state.tr.setNodeMarkup(pos, undefined, { ...this.node.attrs, - ...attrs, - } - // const transaction = this.isMark - // ? state.tr - // .removeMark(pos.from, pos.to, type) - // .addMark(pos.from, pos.to, type.create(newAttrs)) - // : state.tr.setNodeMarkup(pos, null, newAttrs) - const transaction = state.tr.setNodeMarkup(pos, undefined, newAttrs) + ...attributes, + }) this.editor.view.dispatch(transaction) } diff --git a/packages/vue/src/components/EditorContent.ts b/packages/vue/src/components/EditorContent.ts index 2f74d5ff..bdb5b8dd 100644 --- a/packages/vue/src/components/EditorContent.ts +++ b/packages/vue/src/components/EditorContent.ts @@ -17,6 +17,7 @@ export default Vue.extend({ if (editor && editor.options.element) { this.$nextTick(() => { this.$el.appendChild(editor.options.element.firstChild) + console.log('append') // editor.setParentComponent(this) }) }