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

package/src/components/MenuBar.jsx

@@ -15,9 +15,11 @@ import Functions from '@mui/icons-material/Functions';
 import ImageIcon from '@mui/icons-material/Image';
 import Redo from '@mui/icons-material/Redo';
 import Undo from '@mui/icons-material/Undo';
+import FormatQuote from '@mui/icons-material/FormatQuote';
 import TheatersIcon from '@mui/icons-material/Theaters';
 import VolumeUpIcon from '@mui/icons-material/VolumeUp';
 import BorderAll from '@mui/icons-material/BorderAll';
+import Delete from '@mui/icons-material/Delete';
 
 import { useEditorState } from '@tiptap/react';
 
@@ -91,11 +93,15 @@ function MenuBar({
       const hideDefaultToolbar =
         ctx.editor?.isActive('math') ||
         ctx.editor?.isActive('explicit_constructed_response') ||
-        ctx.editor?.isActive('imageUploadNode');
+        ctx.editor?.isActive('imageUploadNode') ||
+        ctx.editor?.isActive('drag_in_the_blank');
+
+      const hasTextSelectionInTable = selection && selection.empty === false && ctx.editor.isActive('table');
 
       return {
         currentNode,
         hideDefaultToolbar,
+        hasTextSelectionInTable,
         isFocused: ctx.editor?.isFocused,
         isBold: ctx.editor.isActive('bold') ?? false,
         canBold: ctx.editor.can().chain().toggleBold().run() ?? false,
@@ -136,7 +142,7 @@ function MenuBar({
     [classes.toolbarWithNoDone]: !hasDoneButton,
     [classes.toolbarTop]: toolbarOpts.position === 'top',
     [classes.toolbarRight]: toolbarOpts.alignment === 'right',
-    [classes.focused]: toolbarOpts.alwaysVisible || (editorState.isFocused && !editor._toolbarOpened),
+    [classes.focused]: toolbarOpts.alwaysVisible || (editorState.isFocused && !editor._toolbarOpened && !editorState.hideDefaultToolbar),
     [classes.autoWidth]: autoWidth,
     [classes.fullWidth]: !autoWidth,
     [classes.hidden]: toolbarOpts.isHidden === true,
@@ -160,35 +166,35 @@ function MenuBar({
       {
         icon: <AddRow />,
         onClick: (editor) => editor.chain().focus().addRowAfter().run(),
-        hidden: (state) => !state.isTable,
+        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
         isDisabled: (state) => !state.canTable,
       },
       {
         icon: <RemoveRow />,
         onClick: (editor) => editor.chain().focus().deleteRow().run(),
-        hidden: (state) => !state.isTable,
+        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
         isDisabled: (state) => !state.canTable,
       },
       {
         icon: <AddColumn />,
         onClick: (editor) => editor.chain().focus().addColumnAfter().run(),
-        hidden: (state) => !state.isTable,
+        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
         isDisabled: (state) => !state.canTable,
       },
       {
         icon: <RemoveColumn />,
         onClick: (editor) => editor.chain().focus().deleteColumn().run(),
-        hidden: (state) => !state.isTable,
+        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
         isDisabled: (state) => !state.canTable,
       },
       {
         icon: <RemoveTable />,
         onClick: (editor) => editor.chain().focus().deleteTable().run(),
-        hidden: (state) => !state.isTable,
+        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.isTable,
         isDisabled: (state) => !state.canTable,
       },
@@ -204,54 +210,54 @@ function MenuBar({
 
           editor.commands.updateAttributes('table', update);
         },
-        hidden: (state) => !state.isTable,
+        hidden: (state) => !(state.isTable && !state.hasTextSelectionInTable),
         isActive: (state) => state.tableHasBorder,
         isDisabled: (state) => !state.canTable,
       },
       {
         icon: <Bold />,
         onClick: (editor) => editor.chain().focus().toggleBold().run(),
-        hidden: (state) => !activePlugins?.includes('bold') || state.isTable,
+        hidden: () => !activePlugins?.includes('bold'),
         isActive: (state) => state.isBold,
         isDisabled: (state) => !state.canBold,
       },
       {
         icon: <Italic />,
         onClick: (editor) => editor.chain().focus().toggleItalic().run(),
-        hidden: (state) => !activePlugins?.includes('italic') || state.isTable,
+        hidden: () => !activePlugins?.includes('italic'),
         isActive: (state) => state.isItalic,
         isDisabled: (state) => !state.canItalic,
       },
       {
         icon: <Strikethrough />,
         onClick: (editor) => editor.chain().focus().toggleStrike().run(),
-        hidden: (state) => !activePlugins?.includes('strikethrough') || state.isTable,
+        hidden: () => !activePlugins?.includes('strikethrough'),
         isActive: (state) => state.isStrike,
         isDisabled: (state) => !state.canStrike,
       },
       {
         icon: <Code />,
         onClick: (editor) => editor.chain().focus().toggleCode().run(),
-        hidden: (state) => !activePlugins?.includes('code') || state.isTable,
+        hidden: () => !activePlugins?.includes('code'),
         isActive: (state) => state.isCode,
         isDisabled: (state) => !state.canCode,
       },
       {
         icon: <Underline />,
         onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
-        hidden: (state) => !activePlugins?.includes('underline') || state.isTable,
+        hidden: () => !activePlugins?.includes('underline'),
         isActive: (state) => state.isUnderline,
       },
       {
         icon: <SubscriptIcon />,
         onClick: (editor) => editor.chain().focus().toggleSubscript().run(),
-        hidden: (state) => !activePlugins?.includes('subscript') || state.isTable,
+        hidden: () => !activePlugins?.includes('subscript'),
         isActive: (state) => state.isSubScript,
       },
       {
         icon: <SuperscriptIcon />,
         onClick: (editor) => editor.chain().focus().toggleSuperscript().run(),
-        hidden: (state) => !activePlugins?.includes('superscript') || state.isTable,
+        hidden: () => !activePlugins?.includes('superscript'),
         isActive: (state) => state.isSuperScript,
       },
       {
@@ -261,22 +267,28 @@ function MenuBar({
       },
       {
         icon: <TheatersIcon />,
-        hidden: (state) => !activePlugins?.includes('video') || state.isTable,
+        hidden: () => !activePlugins?.includes('video'),
         onClick: (editor) => editor.chain().focus().insertMedia({ type: 'video' }).run(),
       },
       {
         icon: <VolumeUpIcon />,
-        hidden: (state) => !activePlugins?.includes('audio') || state.isTable,
+        hidden: () => !activePlugins?.includes('audio'),
         onClick: (editor) => editor.chain().focus().insertMedia({ type: 'audio', tag: 'audio' }).run(),
       },
       {
         icon: <CSSIcon />,
-        hidden: (state) => !activePlugins?.includes('css') || state.isTable,
+        hidden: () => !activePlugins?.includes('css'),
         onClick: (editor) => editor.commands.openCSSClassDialog(),
       },
+      {
+        icon: <FormatQuote />,
+        hidden: () => !activePlugins?.includes('blockquote'),
+        onClick: (editor) => editor.chain().focus().toggleBlockquote().run(),
+        isActive: (state) => state.isBlockquote,
+      },
       {
         icon: <HeadingIcon />,
-        hidden: (state) => !activePlugins?.includes('h3') || state.isTable,
+        hidden: () => !activePlugins?.includes('h3'),
         onClick: (editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
         isActive: (state) => state.isHeading3,
       },
@@ -297,30 +309,30 @@ function MenuBar({
       },
       {
         icon: <TextAlignIcon editor={editor} />,
-        hidden: (state) => !activePlugins?.includes('text-align') || state.isTable,
+        hidden: () => !activePlugins?.includes('text-align'),
         onClick: () => {},
       },
       {
         icon: <BulletedListIcon />,
-        hidden: (state) => !activePlugins?.includes('bulleted-list') || state.isTable,
+        hidden: () => !activePlugins?.includes('bulleted-list'),
         onClick: (editor) => editor.chain().focus().toggleBulletList().run(),
         isActive: (state) => state.isBulletList,
       },
       {
         icon: <NumberedListIcon />,
-        hidden: (state) => !activePlugins?.includes('numbered-list') || state.isTable,
+        hidden: () => !activePlugins?.includes('numbered-list'),
         onClick: (editor) => editor.chain().focus().toggleOrderedList().run(),
         isActive: (state) => state.isOrderedList,
       },
       {
         icon: <Undo />,
-        hidden: (state) => !activePlugins?.includes('undo') || state.isTable,
+        hidden: () => !activePlugins?.includes('undo'),
         onClick: (editor) => editor.chain().focus().undo().run(),
         isDisabled: (state) => !state.canUndo,
       },
       {
         icon: <Redo />,
-        hidden: (state) => !activePlugins?.includes('redo') || state.isTable,
+        hidden: () => !activePlugins?.includes('redo'),
         onClick: (editor) => editor.chain().focus().redo().run(),
         isDisabled: (state) => !state.canRedo,
       },
@@ -328,8 +340,29 @@ function MenuBar({
     [activePlugins, editor],
   );
 
+  const isDragInTheBlankSelected =
+    editorState.hideDefaultToolbar && editorState.currentNode?.type?.name === 'drag_in_the_blank';
+
   return (
     <div className={names} style={{ ...customStyles }} onMouseDown={handleMouseDown}>
+      {isDragInTheBlankSelected && (
+        <div className={classes.defaultToolbar} tabIndex="1">
+          <div className={classes.buttonsContainer}>
+            <button
+              type="button"
+              className={classes.button}
+              onClick={(e) => {
+                e.preventDefault();
+                editor.chain().focus().deleteSelection().run();
+                onChange?.(editor.getHTML());
+              }}
+              aria-label="Delete response area"
+            >
+              <Delete />
+            </button>
+          </div>
+        </div>
+      )}
       {!editorState.hideDefaultToolbar && (
         <div className={classes.defaultToolbar} tabIndex="1">
           <div className={classes.buttonsContainer}>

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();
+  });
 });