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

package/src/__tests__/EditableHtml.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
+import { useEditor } from '@tiptap/react';
 import { EditableHtml } from '../components/EditableHtml';
 
 // Mock TipTap dependencies
@@ -24,7 +25,9 @@ jest.mock('@tiptap/react', () => ({
 
 jest.mock('@tiptap/starter-kit', () => ({
   __esModule: true,
-  default: {},
+  default: {
+    configure: jest.fn(() => ({})),
+  },
 }));
 
 jest.mock('@tiptap/extension-text-style', () => ({
@@ -68,12 +71,9 @@ jest.mock('@tiptap/extension-table-row', () => ({
   TableRow: {},
 }));
 
-jest.mock('@tiptap/extension-table-cell', () => ({
-  TableCell: {},
-}));
-
-jest.mock('@tiptap/extension-table-header', () => ({
-  TableHeader: {},
+jest.mock('../extensions/extended-table-cell', () => ({
+  ExtendedTableCell: {},
+  ExtendedTableHeader: {},
 }));
 
 jest.mock('../extensions/extended-table', () => ({
@@ -81,6 +81,18 @@ jest.mock('../extensions/extended-table', () => ({
   default: {},
 }));
 
+jest.mock('../extensions/ensure-empty-root-div', () => ({
+  EnsureEmptyRootIsDiv: {},
+}));
+
+jest.mock('../extensions/extended-list-item', () => ({
+  ExtendedListItem: {},
+}));
+
+jest.mock('../extensions/ensure-list-item-content-is-div', () => ({
+  EnsureListItemContentIsDiv: {},
+}));
+
 jest.mock('../extensions/responseArea', () => ({
   ExplicitConstructedResponseNode: {
     configure: jest.fn(() => ({})),
@@ -266,4 +278,75 @@ describe('EditableHtml', () => {
     const { container } = render(<EditableHtml {...defaultProps} disableImageAlignmentButtons={true} />);
     expect(container).toBeInTheDocument();
   });
+
+  it('calls editorRef callback when editor is initialized', async () => {
+    const editorRef = jest.fn();
+    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
+
+    await waitFor(() => {
+      expect(editorRef).toHaveBeenCalled();
+    });
+  });
+
+  it('calls editorRef with the editor instance', async () => {
+    const editorRef = jest.fn();
+    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
+
+    await waitFor(() => {
+      expect(editorRef).toHaveBeenCalled();
+      // Verify it was called with an object that has editor-like properties
+      const callArg = editorRef.mock.calls[0][0];
+      expect(callArg).toHaveProperty('getHTML');
+      expect(callArg).toHaveProperty('commands');
+    });
+  });
+
+  it('handles editorRef being undefined', () => {
+    const { container } = render(<EditableHtml {...defaultProps} editorRef={undefined} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('applies flex display to StyledEditorContent', async () => {
+    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
+    await waitFor(() => {
+      const editorContent = getByTestId('editor-content');
+      expect(editorContent).toBeInTheDocument();
+    });
+  });
+
+  it('does not run blur onChange/onDone while an image insert flow is active', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ ...defaultProps.toolbarOpts, doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const blurEditor = {
+      getHTML: jest.fn(() => '<p>changed</p>'),
+      _insertingImage: true,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDone).not.toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
 });

package/src/__tests__/index.test.jsx

@@ -13,7 +13,10 @@ jest.mock('@tiptap/react', () => ({
   useEditorState: jest.fn(() => ({ isFocused: false })),
 }));
 
-jest.mock('@tiptap/starter-kit', () => ({ __esModule: true, default: {} }));
+jest.mock('@tiptap/starter-kit', () => ({
+  __esModule: true,
+  default: { configure: jest.fn(() => ({})) },
+}));
 jest.mock('@tiptap/extension-text-style', () => ({ TextStyleKit: {} }));
 jest.mock('@tiptap/extension-character-count', () => ({
   CharacterCount: { configure: jest.fn(() => ({})) },
@@ -27,9 +30,14 @@ jest.mock('@tiptap/extension-text-align', () => ({
 jest.mock('@tiptap/extension-image', () => ({ __esModule: true, default: {} }));
 jest.mock('@tiptap/extension-table', () => ({ __esModule: true, default: {} }));
 jest.mock('@tiptap/extension-table-row', () => ({ TableRow: {} }));
-jest.mock('@tiptap/extension-table-cell', () => ({ TableCell: {} }));
-jest.mock('@tiptap/extension-table-header', () => ({ TableHeader: {} }));
+jest.mock('../extensions/extended-table-cell', () => ({
+  ExtendedTableCell: {},
+  ExtendedTableHeader: {},
+}));
 jest.mock('../extensions/extended-table', () => ({ __esModule: true, default: {} }));
+jest.mock('../extensions/ensure-empty-root-div', () => ({ EnsureEmptyRootIsDiv: {} }));
+jest.mock('../extensions/extended-list-item', () => ({ ExtendedListItem: {} }));
+jest.mock('../extensions/ensure-list-item-content-is-div', () => ({ EnsureListItemContentIsDiv: {} }));
 jest.mock('../extensions/responseArea', () => ({
   ExplicitConstructedResponseNode: { configure: jest.fn(() => ({})) },
   DragInTheBlankNode: { configure: jest.fn(() => ({})) },

package/src/components/CharacterPicker.jsx

@@ -121,6 +121,7 @@ export function CharacterPicker({ editor, opts, onClose }) {
         <div
           ref={containerRef}
           className="insert-character-dialog"
+          data-toolbar-for={editor.instanceId}
           style={{
             visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
             position: 'absolute',

package/src/components/EditableHtml.jsx

@@ -1,5 +1,7 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash-es/debounce';
 import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import { styled } from '@mui/material/styles';
 import StarterKit from '@tiptap/starter-kit';
 import { TextStyleKit } from '@tiptap/extension-text-style';
 import { CharacterCount } from '@tiptap/extension-character-count';
@@ -8,13 +10,14 @@ import SubScript from '@tiptap/extension-subscript';
 import TextAlign from '@tiptap/extension-text-align';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
-import { styled } from '@mui/material/styles';
-import debounce from 'lodash-es/debounce';
+import { normalizeInitialMarkup } from '../utils/helper';
 
 import ExtendedTable from '../extensions/extended-table';
+import { ExtendedTableCell, ExtendedTableHeader } from '../extensions/extended-table-cell';
+import { DivNode } from '../extensions/div-node';
+import { EnsureEmptyRootIsDiv } from '../extensions/ensure-empty-root-div';
+import { EnsureListItemContentIsDiv } from '../extensions/ensure-list-item-content-is-div';
 import { TableRow } from '@tiptap/extension-table-row';
-import { TableCell } from '@tiptap/extension-table-cell';
-import { TableHeader } from '@tiptap/extension-table-header';
 import {
   DragInTheBlankNode,
   ExplicitConstructedResponseNode,
@@ -26,6 +29,7 @@ import { MathNode } from '../extensions/math';
 import { ImageUploadNode } from '../extensions/image';
 import { Media } from '../extensions/media';
 import { CSSMark } from '../extensions/css';
+import { ExtendedListItem } from '../extensions/extended-list-item';
 
 import EditorContainer from './TiptapContainer';
 import { valueToSize } from '../utils/size';
@@ -97,6 +101,19 @@ export const EditableHtml = (props) => {
   const [scheduled, setScheduled] = useState(false);
   const { toolbarOpts } = props;
 
+  const removePendingImage = useCallback(
+    (imagePos) => {
+      setPendingImages((prev) => {
+        const next = prev.filter((img) => img.pos !== imagePos);
+        if (next.length === 0) {
+          setScheduled(false);
+        }
+        return next;
+      });
+    },
+    [setPendingImages],
+  );
+
   const toolbarOptsToUse = {
     ...defaultToolbarOpts,
     ...toolbarOpts,
@@ -135,11 +152,24 @@ export const EditableHtml = (props) => {
   }, [props]);
 
   const extensions = [
+    TextAlign.configure({
+      types: ['heading', 'paragraph', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'td', 'th'],
+      alignments: ['left', 'right', 'center', 'justify'],
+    }),
     TextStyleKit,
     CharacterCount.configure({
       limit: props.charactersLimit || 1000000,
     }),
-    StarterKit,
+    StarterKit.configure({
+      trailingNode: {
+        node: 'paragraph',
+        notAfter: ['paragraph', 'div'],
+      },
+    }),
+    ExtendedListItem,
+    DivNode,
+    EnsureEmptyRootIsDiv,
+    EnsureListItemContentIsDiv,
     Placeholder.configure({
       placeholder: props.placeholder,
       // show placeholder even when editor is focused
@@ -149,8 +179,8 @@ export const EditableHtml = (props) => {
     }),
     ExtendedTable,
     TableRow,
-    TableHeader,
-    TableCell,
+    ExtendedTableHeader,
+    ExtendedTableCell,
     ResponseAreaExtension.configure(props.responseAreaProps),
     ExplicitConstructedResponseNode.configure(props.responseAreaProps),
     DragInTheBlankNode.configure(props.responseAreaProps),
@@ -158,19 +188,16 @@ export const EditableHtml = (props) => {
     MathTemplatedNode.configure(props.responseAreaProps),
     MathNode.configure({
       toolbarOpts: toolbarOptsToUse,
+      math: props.pluginProps?.math || {},
     }),
     SubScript,
     SuperScript,
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-      alignments: ['left', 'right', 'center'],
-    }),
     Image,
     ImageUploadNode.configure({
       toolbarOpts: toolbarOptsToUse,
       imageHandling: {
         disableImageAlignmentButtons: props.disableImageAlignmentButtons,
-        onDone: () => props.onDone?.(editor.getHTML()),
+        onDone: (editor) => props.onDone?.(editor.getHTML()),
         onDelete:
           props.imageSupport &&
           props.imageSupport.delete &&
@@ -178,19 +205,14 @@ export const EditableHtml = (props) => {
             const { src } = node.attrs;
 
             props.imageSupport.delete(src, (e) => {
-              const newPendingImages = pendingImages.filter((img) => img.key !== node.key);
-              const newState = {
-                pendingImages: newPendingImages,
-                scheduled: scheduled && newPendingImages.length === 0 ? false : scheduled,
-              };
-
-              setPendingImages(newState.pendingImages);
-              setScheduled(newState.scheduled);
+              removePendingImage(node.pos);
             });
           }),
         insertImageRequested:
           props.imageSupport &&
-          ((addedImage, getHandler) => {
+          ((editor, imageInfo, getHandler) => {
+            const [addedImage, pos] = imageInfo;
+
             const onFinish = (result) => {
               let cb;
 
@@ -199,29 +221,39 @@ export const EditableHtml = (props) => {
                 cb = props.onChange;
               }
 
-              const newPendingImages = pendingImages.filter((img) => img.key !== addedImage.key);
-              const newState = {
-                pendingImages: newPendingImages,
-              };
-
-              if (newPendingImages.length === 0) {
-                newState.scheduled = false;
-              }
-
-              setPendingImages(newState.pendingImages);
-              setScheduled(newState.scheduled);
+              removePendingImage(pos);
               cb?.(editor.getHTML());
             };
+
             const callback = () => {
               /**
                * The handler is the object through which the outer context
                * communicates file upload events like: fileChosen, cancel, progress
                */
               const handler = getHandler(onFinish);
+
+              // If the user closes the file picker without choosing a file, the window regains
+              // focus while _insertingImage is still true — drop the stale pending entry.
+              const focusHandler = debounce(() => {
+                const detach = () => window.removeEventListener('focus', focusHandler);
+
+                if (!editor._insertingImage) {
+                  detach();
+                  return;
+                }
+
+                removePendingImage(pos);
+                editor._insertingImage = false;
+                detach();
+              }, 500);
+
+              window.addEventListener('focus', focusHandler);
+
               props.imageSupport.add(handler);
             };
 
-            setPendingImages([...pendingImages, addedImage]);
+            editor._insertingImage = true;
+            setPendingImages((prev) => [...prev, addedImage]);
             callback();
           }),
         maxImageWidth: props.maxImageWidth,
@@ -252,7 +284,7 @@ export const EditableHtml = (props) => {
         },
       },
       editable: !props.disabled,
-      content: props.markup,
+      content: normalizeInitialMarkup(props.markup),
       onUpdate: ({ editor, transaction }) => {
         if (transaction.isDone) {
           props.onChange?.(editor.getHTML());
@@ -260,6 +292,7 @@ export const EditableHtml = (props) => {
       },
       onBlur: debounce(({ editor }) => {
         const otherToolbarOpened =
+          editor._insertingImage ||
           editor._toolbarOpened ||
           editor.isActive('inline_dropdown') ||
           editor.isActive('explicit_constructed_response');
@@ -280,6 +313,12 @@ export const EditableHtml = (props) => {
     [props.charactersLimit],
   );
 
+  useEffect(() => {
+    if (props.editorRef) {
+      props.editorRef(editor);
+    }
+  }, [props.editorRef, editor]);
+
   useEffect(() => {
     editor?.setEditable(!props.disabled);
   }, [props.disabled, editor]);
@@ -288,9 +327,10 @@ export const EditableHtml = (props) => {
     if (!editor) {
       return;
     }
+    const nextMarkup = normalizeInitialMarkup(props.markup);
 
-    if (props.markup !== editor.getHTML()) {
-      editor.commands.setContent(props.markup, false); // false = don’t emit update
+    if (nextMarkup !== editor.getHTML()) {
+      editor.commands.setContent(nextMarkup, false);
     }
   }, [props.markup, editor]);
 
@@ -349,26 +389,36 @@ export const EditableHtml = (props) => {
 const StyledEditorContent = styled(EditorContent, {
   shouldForwardProp: (prop) => !['showParagraph', 'separateParagraph'].includes(prop),
 })(({ showParagraph, separateParagraph }) => ({
+  display: 'flex',
   outline: 'none !important',
   '& .ProseMirror': {
+    flex: 1,
     padding: '5px',
     maxHeight: '500px',
     outline: 'none !important',
     position: 'initial',
-    '& > p': {
+
+    // reset default margins for all block paragraphs/divs in the editor
+    '& > p, & > div': {
       margin: '0',
     },
 
-    '& p.is-editor-empty:first-child::before': {
+    // Out of flow so the caret stays at the start of the block; in-flow ::before pushes the caret after the hint text.
+    '& p.is-editor-empty, & div.is-editor-empty': {
+      position: 'relative',
+    },
+    '& p.is-editor-empty::before, & div.is-editor-empty::before': {
       content: 'attr(data-placeholder)',
-      display: 'block',
+      position: 'absolute',
+      left: 0,
+      top: 0,
       color: '#9CA3AF',
       pointerEvents: 'none',
       whiteSpace: 'pre-wrap',
     },
 
     ...(showParagraph && {
-      '& > p:has(+ p)::after': {
+      '& > p:has(+ p)::after, & > div:has(+ div)::after': {
         display: 'block',
         content: '"¶"',
         fontSize: '1em',

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}>