@pie-lib/editable-html-tip-tap 1.2.0-next.9 → 2.0.0

package/src/components/TiptapContainer.jsx

@@ -73,14 +73,10 @@ const StyledRoot = styled('div', {
     },
   },
   '& blockquote': {
-    borderLeft: '3px solid var(--gray-3)',
-    margin: '1.5rem 0',
-    paddingLeft: '1rem',
-  },
-  '& hr': {
-    border: 'none',
-    borderTop: '1px solid var(--gray-2)',
-    margin: '2rem 0',
+    background: '#f9f9f9',
+    borderLeft: '5px solid #ccc',
+    margin: '1.5em 10px',
+    padding: '.5em 10px',
   },
   '& p': {
     margin: '0',
@@ -152,6 +148,12 @@ function TiptapContainer(props) {
     ref,
   } = props;
 
+  useEffect(() => {
+    if (editor && rootRef.current) {
+      editor._tiptapContainerEl = rootRef.current;
+    }
+  }, [editor, rootRef.current]);
+
   useEffect(() => {
     if (editor && autoFocus) {
       Promise.resolve().then(() => {

package/src/components/__tests__/CharacterPicker.test.jsx

@@ -194,4 +194,26 @@ describe('CharacterPicker', () => {
     const dialog = container.querySelector('.insert-character-dialog');
     expect(dialog).toHaveStyle({ position: 'absolute' });
   });
+
+  it('adds data-toolbar-for attribute with editor instanceId', () => {
+    const editorWithInstanceId = {
+      ...mockEditor,
+      instanceId: 'editor-123',
+    };
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { container } = render(<CharacterPicker editor={editorWithInstanceId} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toHaveAttribute('data-toolbar-for', 'editor-123');
+  });
+
+  it('renders without instanceId gracefully', () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toBeInTheDocument();
+  });
 });

package/src/components/__tests__/ExplicitConstructedResponse.test.jsx

@@ -10,19 +10,37 @@ jest.mock('@tiptap/react', () => ({
   ),
 }));
 
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: (node) => node,
+}));
+
 describe('ExplicitConstructedResponse', () => {
-  const mockEditor = {
-    state: {
-      selection: {
-        from: 0,
-        to: 1,
+  const buildMockEditor = (overrides = {}) => {
+    const mockTr = {
+      delete: jest.fn(),
+    };
+    return {
+      state: {
+        selection: {
+          from: 0,
+          to: 1,
+        },
+        tr: mockTr,
       },
-    },
-    commands: {
-      focus: jest.fn(),
-    },
+      view: {
+        dispatch: jest.fn(),
+      },
+      commands: {
+        focus: jest.fn(),
+      },
+      _tiptapContainerEl: document.createElement('div'),
+      ...overrides,
+    };
   };
 
+  let mockEditor;
+
   const mockNode = {
     attrs: {
       index: '0',
@@ -46,6 +64,8 @@ describe('ExplicitConstructedResponse', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockEditor = buildMockEditor();
+    defaultProps.editor = mockEditor;
   });
 
   it('renders without crashing', () => {
@@ -97,8 +117,7 @@ describe('ExplicitConstructedResponse', () => {
     const clickableDiv = container.querySelector('div[style*="border"]');
     fireEvent.click(clickableDiv);
     await waitFor(() => {
-      // After click, toolbar should be shown
-      expect(container).toBeInTheDocument();
+      expect(queryByTestId('toolbar')).toBeInTheDocument();
     });
   });
 
@@ -124,7 +143,7 @@ describe('ExplicitConstructedResponse', () => {
 
   it('calls respAreaToolbar with correct params', () => {
     render(<ExplicitConstructedResponse {...defaultProps} />);
-    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith(mockNode, mockEditor, expect.any(Function));
+    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith([mockNode, 5], mockEditor, expect.any(Function));
   });
 
   it('has cursor pointer style', () => {
@@ -158,4 +177,28 @@ describe('ExplicitConstructedResponse', () => {
     const contentDiv = container.querySelector('div[style*="padding"]');
     expect(contentDiv).toHaveStyle({ minWidth: '178px' });
   });
+
+  it('renders delete control on portaled custom toolbar when container el is set', async () => {
+    const { findByLabelText } = render(<ExplicitConstructedResponse {...defaultProps} selected />);
+    expect(await findByLabelText('Delete')).toBeInTheDocument();
+  });
+
+  it('does not render portaled delete control when _tiptapContainerEl is missing', async () => {
+    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
+    const { queryByLabelText, findByTestId } = render(
+      <ExplicitConstructedResponse {...defaultProps} editor={editor} selected />,
+    );
+    expect(await findByTestId('toolbar')).toBeInTheDocument();
+    expect(queryByLabelText('Delete')).not.toBeInTheDocument();
+  });
+
+  it('delete clears toolbar flag, removes node range, dispatches, and focuses', async () => {
+    mockEditor._toolbarOpened = true;
+    const { findByLabelText } = render(<ExplicitConstructedResponse {...defaultProps} selected />);
+    fireEvent.mouseDown(await findByLabelText('Delete'));
+    expect(mockEditor.state.tr.delete).toHaveBeenCalledWith(5, 6);
+    expect(mockEditor.view.dispatch).toHaveBeenCalledWith(mockEditor.state.tr);
+    expect(mockEditor._toolbarOpened).toBe(false);
+    expect(mockEditor.commands.focus).toHaveBeenCalled();
+  });
 });

package/src/components/__tests__/InlineDropdown.test.jsx

@@ -16,18 +16,33 @@ jest.mock('react-dom', () => ({
 }));
 
 describe('InlineDropdown', () => {
-  const mockEditor = {
-    state: {
-      selection: {
-        from: 0,
-        to: 1,
+  const buildMockEditor = (overrides = {}) => {
+    const mockTr = {
+      delete: jest.fn(),
+    };
+    return {
+      state: {
+        selection: {
+          from: 0,
+          to: 1,
+        },
+        tr: mockTr,
       },
-    },
-    view: {
-      coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
-    },
+      view: {
+        coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
+        dispatch: jest.fn(),
+      },
+      commands: {
+        focus: jest.fn(),
+      },
+      _tiptapContainerEl: document.createElement('div'),
+      _toolbarOpened: false,
+      ...overrides,
+    };
   };
 
+  let mockEditor;
+
   const mockNode = {
     attrs: {
       index: '0',
@@ -51,6 +66,8 @@ describe('InlineDropdown', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockEditor = buildMockEditor();
+    defaultProps.editor = mockEditor;
     Object.defineProperty(document.body, 'getBoundingClientRect', {
       value: jest.fn(() => ({ top: 0, left: 0 })),
       configurable: true,
@@ -73,6 +90,14 @@ describe('InlineDropdown', () => {
     expect(valueDiv).toBeInTheDocument();
   });
 
+  it('uses 2px horizontal margin on the value control and no horizontal margin on the wrapper', () => {
+    const { container, getByTestId } = render(<InlineDropdown {...defaultProps} />);
+    const valueDiv = container.querySelector('div[style*="border"]');
+    expect(valueDiv).toHaveStyle({ margin: '0 2px' });
+    const wrapper = getByTestId('node-view-wrapper');
+    expect(wrapper.getAttribute('style') || '').not.toMatch(/margin/);
+  });
+
   it('renders chevron icon', () => {
     const { container } = render(<InlineDropdown {...defaultProps} />);
     const chevron = container.querySelector('svg');
@@ -132,7 +157,7 @@ describe('InlineDropdown', () => {
 
   it('calls respAreaToolbar with correct params', () => {
     render(<InlineDropdown {...defaultProps} />);
-    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith(mockNode, mockEditor, expect.any(Function));
+    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith([mockNode, 5], mockEditor, expect.any(Function));
   });
 
   it('closes toolbar on outside click', async () => {
@@ -184,4 +209,172 @@ describe('InlineDropdown', () => {
       }
     });
   });
+
+  it('passes editorCallback to InlineDropdownToolbar', async () => {
+    const mockToolbarComponent = jest.fn(({ editorCallback }) => {
+      editorCallback?.({ instanceId: 'test-instance' });
+      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
+    });
+
+    const mockOptionsWithCallback = {
+      respAreaToolbar: jest.fn(() => mockToolbarComponent),
+    };
+
+    const { queryByTestId } = render(
+      <InlineDropdown {...defaultProps} options={mockOptionsWithCallback} selected={true} />,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+  });
+
+  it('stores toolbar editor instance in ref when editorCallback is called', async () => {
+    let capturedCallback;
+    const mockToolbarComponent = ({ editorCallback }) => {
+      capturedCallback = editorCallback;
+      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
+    };
+
+    const mockOptionsWithCallback = {
+      respAreaToolbar: jest.fn(() => mockToolbarComponent),
+    };
+
+    const { queryByTestId } = render(
+      <InlineDropdown {...defaultProps} options={mockOptionsWithCallback} selected={true} />,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    // Verify callback exists
+    expect(capturedCallback).toBeDefined();
+  });
+
+  it('handles click outside logic with data-toolbar-for attribute', async () => {
+    const editorWithInstanceId = {
+      ...mockEditor,
+      instanceId: 'editor-123',
+      _toolbarOpened: false,
+    };
+
+    // Mock the toolbar callback to set the toolbar editor instance
+    let capturedCallback;
+    const mockToolbarComponent = ({ editorCallback }) => {
+      React.useEffect(() => {
+        capturedCallback = editorCallback;
+        if (editorCallback) {
+          editorCallback({ instanceId: 'editor-123' });
+        }
+      }, [editorCallback]);
+      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
+    };
+
+    const mockOptionsWithCallback = {
+      respAreaToolbar: jest.fn(() => mockToolbarComponent),
+    };
+
+    const { container, queryByTestId } = render(
+      <InlineDropdown
+        {...defaultProps}
+        editor={editorWithInstanceId}
+        options={mockOptionsWithCallback}
+        selected={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    // Create an element with data-toolbar-for attribute
+    const otherToolbar = document.createElement('div');
+    otherToolbar.setAttribute('data-toolbar-for', 'editor-456');
+    document.body.appendChild(otherToolbar);
+
+    await waitFor(() => {
+      fireEvent.mouseDown(otherToolbar);
+    });
+
+    // Cleanup
+    document.body.removeChild(otherToolbar);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('does not close when clicking inside same editor toolbar', async () => {
+    const editorWithInstanceId = {
+      ...mockEditor,
+      instanceId: 'editor-123',
+      _toolbarOpened: false,
+    };
+
+    let toolbarEditorInstance;
+    const mockToolbarComponent = ({ editorCallback }) => {
+      React.useEffect(() => {
+        if (editorCallback) {
+          editorCallback({ instanceId: 'editor-123' });
+          toolbarEditorInstance = { instanceId: 'editor-123' };
+        }
+      }, [editorCallback]);
+      return <div data-testid="inline-dropdown-toolbar">Toolbar</div>;
+    };
+
+    const mockOptionsWithCallback = {
+      respAreaToolbar: jest.fn(() => mockToolbarComponent),
+    };
+
+    render(
+      <InlineDropdown
+        {...defaultProps}
+        editor={editorWithInstanceId}
+        options={mockOptionsWithCallback}
+        selected={true}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(mockOptionsWithCallback.respAreaToolbar).toHaveBeenCalled();
+    });
+  });
+
+  it('checks editor._toolbarOpened in click outside handler', async () => {
+    const editorWithToolbarOpened = buildMockEditor({ _toolbarOpened: true });
+
+    const { queryByTestId } = render(
+      <InlineDropdown {...defaultProps} editor={editorWithToolbarOpened} selected={true} />,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    // When _toolbarOpened is true, clicking outside should not close
+    fireEvent.mouseDown(document.body);
+
+    // Toolbar should still be visible
+    expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+  });
+
+  it('renders delete control on portaled custom toolbar when container el is set', async () => {
+    const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
+    expect(await findByLabelText('Delete')).toBeInTheDocument();
+  });
+
+  it('does not render portaled delete control when _tiptapContainerEl is missing', async () => {
+    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
+    const { queryByLabelText, findByTestId } = render(<InlineDropdown {...defaultProps} editor={editor} selected />);
+    expect(await findByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    expect(queryByLabelText('Delete')).not.toBeInTheDocument();
+  });
+
+  it('delete clears toolbar flag, removes node range, dispatches, and focuses', async () => {
+    mockEditor._toolbarOpened = true;
+    const { findByLabelText } = render(<InlineDropdown {...defaultProps} selected />);
+    fireEvent.mouseDown(await findByLabelText('Delete'));
+    expect(mockEditor.state.tr.delete).toHaveBeenCalledWith(5, 6);
+    expect(mockEditor.view.dispatch).toHaveBeenCalledWith(mockEditor.state.tr);
+    expect(mockEditor._toolbarOpened).toBe(false);
+    expect(mockEditor.commands.focus).toHaveBeenCalled();
+  });
 });

package/src/components/__tests__/InsertImageHandler.test.js

@@ -6,13 +6,14 @@ describe('InsertImageHandler', () => {
     nodeSize: 1,
   };
 
+  const NODE_POS = 5;
+
+  const nodeInfo = (node = mockNode, pos = NODE_POS) => [node, pos];
+
   const createMockEditor = () => ({
+    _insertingImage: true,
     state: {
-      doc: {
-        descendants: jest.fn((callback) => {
-          callback(mockNode, 5);
-        }),
-      },
+      doc: {},
       tr: {
         setNodeMarkup: jest.fn((pos, type, attrs) => ({ setNodeMarkup: jest.fn() })),
         delete: jest.fn((from, to) => ({ delete: jest.fn() })),
@@ -31,36 +32,39 @@ describe('InsertImageHandler', () => {
 
   it('creates handler instance', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const info = nodeInfo();
+    const handler = new InsertImageHandler(editor, info, mockOnFinish);
     expect(handler).toBeDefined();
     expect(handler.editor).toBe(editor);
+    expect(handler.nodeInfo).toBe(info);
     expect(handler.node).toBe(mockNode);
     expect(handler.onFinish).toBe(mockOnFinish);
   });
 
-  it('stores nodePos from descendants', () => {
+  it('stores nodePos from nodeInfo tuple', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
-    expect(handler.nodePos).toBe(5);
+    const handler = new InsertImageHandler(editor, nodeInfo(mockNode, 42), mockOnFinish);
+    expect(handler.nodePos).toBe(42);
   });
 
   it('stores isPasted parameter', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish, true);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish, true);
     expect(handler.isPasted).toBe(true);
   });
 
   it('defaults isPasted to false', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.isPasted).toBe(false);
   });
 
   it('cancel deletes node and calls onFinish', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.cancel();
     expect(mockOnFinish).toHaveBeenCalledWith(false);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('updateNode dispatches transaction with new attributes', () => {
@@ -68,22 +72,23 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: { existing: 'value' } }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.updateNode({ newAttr: 'newValue' });
 
-    expect(mockNodeAt).toHaveBeenCalledWith(5);
+    expect(mockNodeAt).toHaveBeenCalledWith(NODE_POS);
     expect(editor.view.dispatch).toHaveBeenCalled();
   });
 
   it('done calls onFinish with false on error', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
 
     handler.done('error', null);
 
     expect(consoleLogSpy).toHaveBeenCalledWith('error');
     expect(mockOnFinish).toHaveBeenCalledWith(false);
+    expect(editor._insertingImage).toBe(false);
     consoleLogSpy.mockRestore();
   });
 
@@ -92,16 +97,17 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.done(null, 'http://example.com/image.jpg');
 
     expect(editor.view.dispatch).toHaveBeenCalled();
     expect(mockOnFinish).toHaveBeenCalledWith(true);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('fileChosen returns early when no file provided', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.fileChosen(null);
     expect(editor.view.dispatch).not.toHaveBeenCalled();
   });
@@ -111,7 +117,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
 
     global.FileReader = jest.fn(function () {
@@ -124,6 +130,7 @@ describe('InsertImageHandler', () => {
     handler.fileChosen(mockFile);
 
     expect(handler.chosenFile).toBe(mockFile);
+    expect(editor._insertingImage).toBe(false);
   });
 
   it('progress updates node with percent', () => {
@@ -131,7 +138,7 @@ describe('InsertImageHandler', () => {
     const mockNodeAt = jest.fn(() => ({ attrs: {} }));
     editor.state.doc.nodeAt = mockNodeAt;
 
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     handler.progress(50, 500, 1000);
 
     expect(editor.view.dispatch).toHaveBeenCalled();
@@ -139,7 +146,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns the chosen file', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
     handler.chosenFile = mockFile;
 
@@ -148,7 +155,7 @@ describe('InsertImageHandler', () => {
 
   it('getChosenFile returns null initially', () => {
     const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, mockNode, mockOnFinish);
+    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
     expect(handler.getChosenFile()).toBeNull();
   });
 });

package/src/components/__tests__/MenuBar.test.jsx

@@ -214,4 +214,36 @@ describe('StyledMenuBar', () => {
     toolbar?.dispatchEvent(event);
     expect(preventDefaultSpy).toHaveBeenCalled();
   });
+
+  it('calculates hasTextSelectionInTable correctly when selection is not empty in table', () => {
+    // This test verifies the hasTextSelectionInTable state computation
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('hides table manipulation buttons when text is selected in table', () => {
+    // When hasTextSelectionInTable is true, table row/column buttons should be hidden
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
+    // The component should render but table manipulation buttons should be conditional
+    expect(container).toBeInTheDocument();
+  });
+
+  it('shows table manipulation buttons when no text is selected in table', () => {
+    // When hasTextSelectionInTable is false, table row/column buttons should be visible
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table']} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('shows text formatting buttons regardless of table state', () => {
+    // Bold, italic, etc. should always be visible when their plugin is active
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['bold', 'italic', 'underline']} />);
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('does not hide text formatting buttons when in table', () => {
+    // Verify that the removal of "|| state.isTable" condition works correctly
+    const { container } = render(<StyledMenuBar {...defaultProps} activePlugins={['table', 'bold', 'italic']} />);
+    expect(container).toBeInTheDocument();
+  });
 });

package/src/components/icons/TextAlign.jsx

@@ -60,7 +60,7 @@ export default ({ editor, onChange }) => {
   }
 
   const applyAlignment = (event) => {
-    const alignType = event.target?.closest('div')?.getAttribute('value');
+    const alignType = event.currentTarget?.getAttribute('value');
 
     if (alignType) {
       editor.commands.setTextAlign(alignType);

package/src/components/image/InsertImageHandler.js

@@ -11,20 +11,11 @@ const log = debug('@pie-lib:editable-html:image:insert-image-handler');
  * @param {Boolean} isPasted - a boolean that keeps track if the file is pasted
  */
 class InsertImageHandler {
-  constructor(editor, node, onFinish, isPasted = false) {
+  constructor(editor, nodeInfo, onFinish, isPasted = false) {
     this.editor = editor;
-    this.node = node;
-
-    let nodePos;
-
-    editor.state.doc.descendants((node, pos) => {
-      if (node === this.node) {
-        nodePos = pos;
-        return false;
-      }
-    });
-
-    this.nodePos = nodePos;
+    this.nodeInfo = nodeInfo;
+    this.node = nodeInfo[0];
+    this.nodePos = nodeInfo[1];
     this.onFinish = onFinish;
     this.isPasted = isPasted;
     this.chosenFile = null;
@@ -38,6 +29,8 @@ class InsertImageHandler {
       this.onFinish(false);
     } catch (err) {
       //
+    } finally {
+      this.editor._insertingImage = false;
     }
   }
 
@@ -72,6 +65,8 @@ class InsertImageHandler {
       this.updateNode({ loaded: true, src, percent: 100 });
       this.onFinish(true);
     }
+
+    this.editor._insertingImage = false;
   }
 
   /**
@@ -86,6 +81,7 @@ class InsertImageHandler {
 
     // Save the chosen file to this.chosenFile
     this.chosenFile = file;
+    this.editor._insertingImage = false;
 
     log('[fileChosen] file: ', file);
     const reader = new FileReader();

package/src/components/respArea/DragInTheBlank/DragInTheBlank.jsx

@@ -33,7 +33,11 @@ const DragDrop = (props) => {
 
   // console.log({nodeProps.children})
   return (
-    <NodeViewWrapper className="drag-in-the-blank" data-selected={selected}>
+    <NodeViewWrapper
+      className="drag-in-the-blank"
+      data-selected={selected}
+      style={{ display: 'inline', whiteSpace: 'normal' }}
+    >
       <span
         {...attributes}
         style={{
@@ -52,6 +56,7 @@ const DragDrop = (props) => {
           pos={pos}
           value={attributes}
           duplicates={options.duplicates}
+          selected={selected}
           onChange={(choice) => onValueChange(editor, node, pos, choice)}
           removeResponse={(choice) => onRemoveResponse(editor, node, choice)}
         ></DragDropTile>