feat: enhance ProseMirror integration with NodeView types and improve image placeholder handling

Author: Jeremy Mouton

packages/core/src/index.ts

@@ -37,7 +37,7 @@ export type { EditorConfig, EditorEvents, EventHandler } from './editor';
 // ===========================================================================
 
 export { ProseMirrorAPI } from './pm';
-export type { WidgetDecorationSpec, Coords, PosInfo, Command } from './pm';
+export type { WidgetDecorationSpec, Coords, PosInfo, Command, NodeView, NodeViewConstructor } from './pm';
 
 // Re-export ProseMirror classes for convenience
 export {

packages/core/src/plugins/multiBlockSelectionPlugin.ts

@@ -7,9 +7,9 @@
  * @module
  */
 
-import { Plugin, PluginKey, EditorState, Transaction } from 'prosemirror-state';
+import { Plugin, PluginKey, EditorState } from 'prosemirror-state';
 import { EditorView, Decoration, DecorationSet } from 'prosemirror-view';
-import { Node as PMNode, ResolvedPos } from 'prosemirror-model';
+import { Node as PMNode } from 'prosemirror-model';
 
 /**
  * State for multi-block selection.
@@ -59,9 +59,8 @@ function getBlockAtPos(
  */
 function getAllBlockPositions(doc: PMNode): number[] {
   const positions: number[] = [];
-  let pos = 0;
 
-  doc.forEach((node, offset) => {
+  doc.forEach((_node, offset) => {
     positions.push(offset);
   });
 
@@ -146,7 +145,7 @@ export function createMultiBlockSelectionPlugin(
         };
       },
 
-      apply(tr, state, oldEditorState, newEditorState): MultiBlockSelectionState {
+      apply(tr, state, _oldEditorState, newEditorState): MultiBlockSelectionState {
         // Check for meta to update state
         const meta = tr.getMeta(MULTI_BLOCK_SELECTION_KEY);
         if (meta) {
@@ -189,7 +188,7 @@ export function createMultiBlockSelectionPlugin(
         return createBlockSelectionDecorations(state, pluginState.selectedBlocks);
       },
 
-      handleClick(view: EditorView, pos: number, event: MouseEvent): boolean {
+      handleClick(view: EditorView, _pos: number, event: MouseEvent): boolean {
         // Clear selection on regular click without modifiers
         if (!event.shiftKey && !event.metaKey && !event.ctrlKey) {
           const state = MULTI_BLOCK_SELECTION_KEY.getState(view.state);
@@ -269,7 +268,7 @@ export function createMultiBlockSelectionPlugin(
 
           const state = MULTI_BLOCK_SELECTION_KEY.getState(view.state);
 
-          if (event.shiftKey && state?.anchorPos !== null) {
+          if (event.shiftKey && state && state.anchorPos !== null) {
             // Range selection
             const blocks = getBlocksInRange(view.state.doc, state.anchorPos, block.pos);
             view.dispatch(

packages/core/src/pm/ProseMirrorAPI.ts

@@ -26,7 +26,7 @@ import {
   DecorationSet,
   DecorationAttrs,
 } from 'prosemirror-view';
-import type { DecorationSource } from 'prosemirror-view';
+import type { DecorationSource, NodeView, NodeViewConstructor } from 'prosemirror-view';
 import {
   EditorState,
   Transaction,
@@ -689,3 +689,5 @@ export {
   Slice,
   Fragment,
 };
+
+export type { NodeView, NodeViewConstructor };

packages/core/src/pm/index.ts

@@ -35,3 +35,5 @@ export {
   Slice,
   Fragment,
 } from './ProseMirrorAPI';
+
+export type { NodeView, NodeViewConstructor } from './ProseMirrorAPI';

packages/core/src/schema/nodes/image.ts

@@ -62,18 +62,17 @@ export const imageNode: NodeSpec = {
 
     // If no src, show a placeholder
     if (!src) {
-      const children: (string | (string | Record<string, string> | 0)[])[] = [
-        [
-          'div',
-          { class: 'openblock-image-placeholder' },
-          ['span', { class: 'openblock-image-placeholder-icon' }],
-          ['span', { class: 'openblock-image-placeholder-text' }, 'Click to add an image'],
-        ],
-      ];
+      const placeholderDiv = [
+        'div',
+        { class: 'openblock-image-placeholder' },
+        ['span', { class: 'openblock-image-placeholder-icon' }],
+        ['span', { class: 'openblock-image-placeholder-text' }, 'Click to add an image'],
+      ] as const;
+
       if (caption) {
-        children.push(['figcaption', {}, caption]);
+        return ['figure', figureAttrs, placeholderDiv, ['figcaption', {}, caption]];
       }
-      return ['figure', figureAttrs, ...children];
+      return ['figure', figureAttrs, placeholderDiv];
     }
 
     const imgAttrs: Record<string, string> = { src, alt };

packages/react/src/blocks/createReactBlockSpec.tsx

@@ -31,10 +31,11 @@ import React from 'react';
 import { createRoot, Root } from 'react-dom/client';
 import {
   type OpenBlockEditor,
+  type NodeView,
+  type NodeViewConstructor,
   Node as PMNode,
   EditorView,
 } from '@labbs/openblock-core';
-import type { NodeView, NodeViewConstructor } from 'prosemirror-view';
 
 /**
  * Property schema definition for a block
@@ -208,7 +209,7 @@ export function createReactBlockSpec<T extends PropSchema>(
 
   // Create NodeView constructor
   const createNodeView = (editor: OpenBlockEditor): NodeViewConstructor => {
-    return (node: PMNode, _view: EditorView, _getPos: () => number | undefined): NodeView => {
+    return (node: PMNode, _view: EditorView, _getPos: () => number | undefined, _decorations, _innerDecorations): NodeView => {
       // Create container
       const dom = document.createElement('div');
       dom.className = `openblock-custom-block openblock-${type}`;

packages/react/src/hooks/useOpenBlock.ts

@@ -61,10 +61,10 @@ export function useOpenBlock(options: UseOpenBlockOptions = {}): OpenBlockEditor
     if (customBlocks && customBlocks.length > 0) {
       for (const blockSpec of customBlocks) {
         // Create a wrapper that will use the editor from the ref
-        nodeViews[blockSpec.type] = (node: any, view: any, getPos: any) => {
+        nodeViews[blockSpec.type] = (node: any, view: any, getPos: any, decorations: any, innerDecorations: any) => {
           // editorRef.current will be set by the time this is called
           const nodeViewConstructor = blockSpec.createNodeView(editorRef.current!);
-          return nodeViewConstructor(node, view, getPos);
+          return nodeViewConstructor(node, view, getPos, decorations, innerDecorations);
         };
       }
     }

packages/react/src/index.ts

@@ -53,7 +53,6 @@ export type {
   OpenBlockViewProps,
   OpenBlockViewRef,
   SlashMenuProps,
-  SlashMenuItem,
   BubbleMenuProps,
   BubbleMenuItem,
   TableMenuProps,