refactor: remove isEditable from node views, remove viewUpdate event

packages/core/src/Editor.ts

@@ -60,7 +60,6 @@ export class Editor extends EventEmitter {
     onCreate: () => null,
     onUpdate: () => null,
     onSelectionUpdate: () => null,
-    onViewUpdate: () => null,
     onTransaction: () => null,
     onFocus: () => null,
     onBlur: () => null,
@@ -79,7 +78,6 @@ export class Editor extends EventEmitter {
     this.on('create', this.options.onCreate)
     this.on('update', this.options.onUpdate)
     this.on('selectionUpdate', this.options.onSelectionUpdate)
-    this.on('viewUpdate', this.options.onViewUpdate)
     this.on('transaction', this.options.onTransaction)
     this.on('focus', this.options.onFocus)
     this.on('blur', this.options.onBlur)
@@ -243,16 +241,7 @@ export class Editor extends EventEmitter {
     // `editor.view` is not yet available at this time.
     // Therefore we will add all plugins and node views directly afterwards.
     const newState = this.state.reconfigure({
-      plugins: [
-        new Plugin({
-          view: () => ({
-            update: () => this.emit('viewUpdate', {
-              editor: this,
-            }),
-          }),
-        }),
-        ...this.extensionManager.plugins,
-      ],
+      plugins: this.extensionManager.plugins,
     })
 
     this.view.updateState(newState)

packages/core/src/Extension.ts

@@ -123,14 +123,6 @@ declare module '@tiptap/core' {
       editor: Editor,
     }) => void) | null,
 
-    /**
-     * The view has changed.
-     */
-     onViewUpdate?: ((this: {
-      options: Options,
-      editor: Editor,
-    }) => void) | null,
-
     /**
      * The editor state has changed.
      */

packages/core/src/ExtensionManager.ts

@@ -55,10 +55,6 @@ export default class ExtensionManager {
         this.editor.on('selectionUpdate', extension.config.onSelectionUpdate.bind(context))
       }
 
-      if (typeof extension.config.onViewUpdate === 'function') {
-        this.editor.on('viewUpdate', extension.config.onViewUpdate.bind(context))
-      }
-
       if (typeof extension.config.onTransaction === 'function') {
         this.editor.on('transaction', extension.config.onTransaction.bind(context))
       }

packages/core/src/Mark.ts

@@ -136,15 +136,6 @@ declare module '@tiptap/core' {
       type: MarkType,
     }) => void) | null,
 
-    /**
-     * The view has changed.
-     */
-    onViewUpdate?: ((this: {
-      options: Options,
-      editor: Editor,
-      type: MarkType,
-    }) => void) | null,
-
     /**
      * The editor state has changed.
      */

packages/core/src/Node.ts

@@ -135,16 +135,7 @@ declare module '@tiptap/core' {
     /**
      * The selection has changed.
      */
-     onSelectionUpdate?: ((this: {
-      options: Options,
-      editor: Editor,
-      type: NodeType,
-    }) => void) | null,
-
-    /**
-     * The view has changed.
-     */
-     onViewUpdate?: ((this: {
+    onSelectionUpdate?: ((this: {
       options: Options,
       editor: Editor,
       type: NodeType,

packages/core/src/types.ts

@@ -31,7 +31,6 @@ export interface EditorOptions {
   enablePasteRules: boolean,
   onCreate: (props: { editor: Editor }) => void,
   onUpdate: (props: { editor: Editor }) => void,
-  onViewUpdate: (props: { editor: Editor }) => void,
   onSelectionUpdate: (props: { editor: Editor }) => void,
   onTransaction: (props: { editor: Editor, transaction: Transaction }) => void,
   onFocus: (props: { editor: Editor, event: FocusEvent }) => void,

packages/react/src/NodeViewContent.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { useReactNodeView } from './useReactNodeView'
 
 export interface NodeViewContentProps {
   className?: string,
@@ -7,14 +6,12 @@ export interface NodeViewContentProps {
 }
 
 export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
-  const { isEditable } = useReactNodeView()
   const Tag = props.as || 'div'
 
   return (
     <Tag
       className={props.className}
       data-node-view-content=""
-      contentEditable={isEditable}
       style={{ whiteSpace: 'pre-wrap' }}
     />
   )

packages/react/src/ReactNodeViewRenderer.tsx

@@ -40,21 +40,11 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
     }
 
     const ReactNodeViewProvider: React.FunctionComponent = componentProps => {
-      const [isEditable, setIsEditable] = useState(this.editor.isEditable)
       const onDragStart = this.onDragStart.bind(this)
-      const onViewUpdate = () => setIsEditable(this.editor.isEditable)
       const Component = this.component
 
-      useEffect(() => {
-        this.editor.on('viewUpdate', onViewUpdate)
-
-        return () => {
-          this.editor.off('viewUpdate', onViewUpdate)
-        }
-      }, [])
-
       return (
-        <ReactNodeViewContext.Provider value={{ onDragStart, isEditable }}>
+        <ReactNodeViewContext.Provider value={{ onDragStart }}>
           <Component {...componentProps} />
         </ReactNodeViewContext.Provider>
       )

packages/react/src/useReactNodeView.ts

@@ -1,12 +1,10 @@
 import { createContext, useContext } from 'react'
 
 export interface ReactNodeViewContextProps {
-  isEditable: boolean,
   onDragStart: (event: DragEvent) => void,
 }
 
 export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({
-  isEditable: undefined,
   onDragStart: undefined,
 })
 

packages/vue-2/src/NodeViewContent.ts

@@ -8,8 +8,6 @@ export const NodeViewContent = Vue.extend({
     },
   },
 
-  inject: ['isEditable'],
-
   render(createElement) {
     return createElement(
       this.as, {
@@ -18,8 +16,6 @@ export const NodeViewContent = Vue.extend({
         },
         attrs: {
           'data-node-view-content': '',
-          // @ts-ignore
-          contenteditable: this.isEditable.value,
         },
       },
     )

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -67,13 +67,6 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
     }
 
     const onDragStart = this.onDragStart.bind(this)
-    const isEditable = Vue.observable({
-      value: this.editor.isEditable,
-    })
-
-    this.editor.on('viewUpdate', () => {
-      isEditable.value = this.editor.isEditable
-    })
 
     this.decorationClasses = Vue.observable({
       value: this.getDecorationClasses(),
@@ -86,7 +79,6 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
         provide: () => {
           return {
             onDragStart,
-            isEditable,
             decorationClasses: this.decorationClasses,
           }
         },

packages/vue-3/src/NodeViewContent.ts

@@ -8,8 +8,6 @@ export const NodeViewContent = defineComponent({
     },
   },
 
-  inject: ['isEditable'],
-
   render() {
     return h(
       this.as, {
@@ -17,8 +15,6 @@ export const NodeViewContent = defineComponent({
           whiteSpace: 'pre-wrap',
         },
         'data-node-view-content': '',
-        // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
-        contenteditable: this.isEditable.value,
       },
     )
   },

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -71,11 +71,6 @@ class VueNodeView extends NodeView<Component, Editor> {
     }
 
     const onDragStart = this.onDragStart.bind(this)
-    const isEditable = ref(this.editor.isEditable)
-
-    this.editor.on('viewUpdate', () => {
-      isEditable.value = this.editor.isEditable
-    })
 
     this.decorationClasses = ref(this.getDecorationClasses())
 
@@ -84,7 +79,6 @@ class VueNodeView extends NodeView<Component, Editor> {
       props: Object.keys(props),
       setup: () => {
         provide('onDragStart', onDragStart)
-        provide('isEditable', isEditable)
         provide('decorationClasses', this.decorationClasses)
 
         return (this.component as any).setup?.(props)