add basic implementation for node views

packages/core/src/Editor.ts

@@ -75,8 +75,6 @@ declare module './Editor' {
 @magicMethods
 export class Editor extends EventEmitter {
 
-  public renderer!: any
-
   private proxy!: Editor
 
   private commandManager!: CommandManager
@@ -256,7 +254,6 @@ export class Editor extends EventEmitter {
    * Creates a ProseMirror view.
    */
   private createView() {
-    console.log('CREATE VIEW')
     this.view = new EditorView(this.options.element, {
       state: EditorState.create({
         doc: this.createDocument(this.options.content),
@@ -266,10 +263,16 @@ export class Editor extends EventEmitter {
         ],
       }),
       dispatchTransaction: this.dispatchTransaction.bind(this),
+    })
+
+    // `editor.view` is not yet available at this time.
+    // Therefore we will add all node views directly afterwards.
+    this.view.setProps({
       nodeViews: this.extensionManager.nodeViews,
     })
 
-    // store editor in dom element for better testing
+    // Let’s store the editor instance in the DOM element.
+    // So we’ll have access to it for tests.
     const dom = this.view.dom as HTMLElement
     dom.editor = this.proxy
   }

packages/core/src/ExtensionManager.ts

@@ -4,8 +4,7 @@ import { Schema, Node as ProsemirrorNode } from 'prosemirror-model'
 import { inputRules } from 'prosemirror-inputrules'
 import { EditorView, Decoration } from 'prosemirror-view'
 import { Editor } from './Editor'
-// import capitalize from './utils/capitalize'
-import { Extensions } from './types'
+import { Extensions, NodeViewRenderer } from './types'
 import getSchema from './utils/getSchema'
 import getSchemaTypeByName from './utils/getSchemaTypeByName'
 import splitExtensions from './utils/splitExtensions'
@@ -109,57 +108,22 @@ export default class ExtensionManager {
           type: getSchemaTypeByName(extension.name, this.schema),
         }
 
-        const renderer = extension.addNodeView?.bind(context)?.()
+        const renderer = extension.addNodeView?.bind(context)?.() as NodeViewRenderer
 
         const nodeview = (
           node: ProsemirrorNode,
           view: EditorView,
           getPos: (() => number) | boolean,
           decorations: Decoration[],
-        ) => {
-          // @ts-ignore
-          return new renderer({
-            editor: this.editor,
-            view,
-            node,
-            getPos,
-            decorations,
-          })
-        }
+        ) => renderer({
+          editor: this.editor,
+          node,
+          getPos,
+          decorations,
+        })
 
         return [extension.name, nodeview]
       }))
-
-    // const { renderer: Renderer } = this.editor
-
-    // if (!Renderer || !Renderer.type) {
-    //   return {}
-    // }
-
-    // const prop = `to${capitalize(Renderer.type)}`
-
-    // return collect(this.extensions)
-    //   .where('extensionType', 'node')
-    //   .filter((extension: any) => extension.schema()[prop])
-    //   .map((extension: any) => {
-    //     return (
-    //       node: ProsemirrorNode,
-    //       view: EditorView,
-    //       getPos: (() => number) | boolean,
-    //       decorations: Decoration[],
-    //     ) => {
-    //       return new Renderer(extension.schema()[prop], {
-    //         extension,
-    //         editor: this.editor,
-    //         node,
-    //         getPos,
-    //         decorations,
-    //       })
-    //     }
-    //   })
-    //   .all()
-
-    return {}
   }
 
 }

packages/core/src/NodeExtension.ts

@@ -3,7 +3,7 @@ import {
 } from 'prosemirror-model'
 import { Plugin } from 'prosemirror-state'
 import { ExtensionSpec, defaultExtension } from './Extension'
-import { Attributes, Overwrite } from './types'
+import { Attributes, NodeViewRenderer, Overwrite } from './types'
 import { Editor } from './Editor'
 
 export interface NodeExtensionSpec<Options = {}, Commands = {}> extends Overwrite<ExtensionSpec<Options, Commands>, {
@@ -143,7 +143,7 @@ export interface NodeExtensionSpec<Options = {}, Commands = {}> extends Overwrit
   /**
    * Node View
    */
-  addNodeView?: (() => any) | null,
+  addNodeView?: (() => NodeViewRenderer) | null,
 }> {}
 
 export type NodeExtension = Required<Omit<NodeExtensionSpec, 'defaultOptions'> & {

packages/core/src/NodeView.ts

@@ -1,3 +0,0 @@
-export class NodeView {
-
-}

packages/core/src/types.ts

@@ -1,6 +1,9 @@
+import { Node } from 'prosemirror-model'
+import { Decoration, NodeView } from 'prosemirror-view'
 import { Extension } from './Extension'
 import { NodeExtension } from './NodeExtension'
 import { MarkExtension } from './MarkExtension'
+import Editor from '..'
 
 export type Extensions = (Extension | NodeExtension | MarkExtension)[]
 
@@ -40,3 +43,12 @@ export type Overwrite<T, U> = Pick<T, Diff<keyof T, keyof U>> & U;
 export type AnyObject = {
   [key: string]: any
 }
+
+export type NodeViewRendererProps = {
+  editor: Editor,
+  node: Node,
+  getPos: (() => number) | boolean,
+  decorations: Decoration[]
+}
+
+export type NodeViewRenderer = (props: NodeViewRendererProps) => NodeView