remove editable prop, fix #223

README.md

@@ -417,10 +417,10 @@ export default class IframeNode extends Node {
       // there are some props available
       // `node` is a Prosemirror Node Object
       // `updateAttrs` is a function to update attributes defined in `schema`
-      // `editable` is the global editor prop whether the content can be edited
+      // `view` is the ProseMirror view instance
       // `options` is an array of your extension options
       // `selected`
-      props: ['node', 'updateAttrs', 'editable'],
+      props: ['node', 'updateAttrs', 'view'],
       computed: {
         src: {
           get() {
@@ -437,7 +437,7 @@ export default class IframeNode extends Node {
       template: `
         <div class="iframe">
           <iframe class="iframe__embed" :src="src"></iframe>
-          <input class="iframe__input" type="text" v-model="src" v-if="editable" />
+          <input class="iframe__input" type="text" v-model="src" v-if="view.editable" />
         </div>
       `,
     }

packages/tiptap-extensions/src/nodes/TodoItem.js

@@ -15,7 +15,7 @@ export default class TodoItem extends Node {
 
   get view() {
     return {
-      props: ['node', 'updateAttrs', 'editable'],
+      props: ['node', 'updateAttrs', 'view'],
       methods: {
         onChange() {
           this.updateAttrs({
@@ -26,7 +26,7 @@ export default class TodoItem extends Node {
       template: `
         <li :data-type="node.type.name" :data-done="node.attrs.done.toString()">
           <span class="todo-checkbox" contenteditable="false" @click="onChange"></span>
-          <div class="todo-content" ref="content" :contenteditable="editable.toString()"></div>
+          <div class="todo-content" ref="content" :contenteditable="view.editable.toString()"></div>
         </li>
       `,
     }

packages/tiptap/src/Editor.js

@@ -156,7 +156,6 @@ export default class Editor extends Emitter {
     return this.extensions.commands({
       schema: this.schema,
       view: this.view,
-      editable: this.options.editable,
     })
   }
 
@@ -277,12 +276,11 @@ export default class Editor extends Emitter {
           ...this.builtInExtensions,
           ...this.options.extensions,
         ],
-        editable: this.options.editable,
       }),
     })
   }
 
-  initNodeViews({ parent, extensions, editable }) {
+  initNodeViews({ parent, extensions }) {
     return extensions
       .filter(extension => ['node', 'mark'].includes(extension.type))
       .filter(extension => extension.view)
@@ -291,13 +289,13 @@ export default class Editor extends Emitter {
           const component = extension.view
 
           return new ComponentView(component, {
+            editor: this,
             extension,
             parent,
             node,
             view,
             getPos,
             decorations,
-            editable,
           })
         }
 

packages/tiptap/src/Utils/ComponentView.js

@@ -5,48 +5,46 @@ import { getMarkRange } from 'tiptap-utils'
 export default class ComponentView {
 
   constructor(component, {
+    editor,
     extension,
     parent,
     node,
     view,
-    getPos,
     decorations,
-    editable,
+    getPos,
   }) {
     this.component = component
+    this.editor = editor
     this.extension = extension
     this.parent = parent
     this.node = node
     this.view = view
-    this.getPos = getPos
     this.decorations = decorations
-    this.editable = editable
-    this.selected = false
     this.isNode = !!this.node.marks
     this.isMark = !this.isNode
+    this.getPos = this.isMark ? this.getMarkPos : getPos
     this.dom = this.createDOM()
     this.contentDOM = this.vm.$refs.content
-
-    if (this.isMark) {
-      this.getPos = this.getMarkPos
-    }
   }
 
   createDOM() {
     const Component = Vue.extend(this.component)
+    const props = {
+      editor: this.editor,
+      node: this.node,
+      view: this.view,
+      getPos: () => this.getPos(),
+      decorations: this.decorations,
+      selected: false,
+      options: this.extension.options,
+      updateAttrs: attrs => this.updateAttrs(attrs),
+    }
+
     this.vm = new Component({
       parent: this.parent,
-      propsData: {
+      propsData: props,
-        node: this.node,
-        view: this.view,
-        getPos: () => this.getPos(),
-        decorations: this.decorations,
-        editable: this.editable,
-        selected: false,
-        options: this.extension.options,
-        updateAttrs: attrs => this.updateAttrs(attrs),
-      },
     }).$mount()
+
     return this.vm.$el
   }
 
@@ -90,7 +88,7 @@ export default class ComponentView {
   }
 
   updateAttrs(attrs) {
-    if (!this.editable) {
+    if (!this.view.editable) {
       return
     }
 

packages/tiptap/src/Utils/ExtensionManager.js

@@ -134,7 +134,8 @@ export default class ExtensionManager {
     ]), [])
   }
 
-  commands({ schema, view, editable }) {
+  commands({ schema, view }) {
+
     return this.extensions
       .filter(extension => extension.commands)
       .reduce((allCommands, extension) => {
@@ -148,7 +149,7 @@ export default class ExtensionManager {
         })
 
         const apply = (cb, attrs) => {
-          if (!editable) {
+          if (!view.editable) {
             return false
           }
           view.focus()