@pie-lib/editable-html-tip-tap 1.2.0-next.2 → 1.2.0-next.21

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';
 
@@ -65,7 +67,15 @@ const HeadingIcon = () => (
   </svg>
 );
 
-function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, responseAreaProps, onChange }) {
+function MenuBar({
+  editor,
+  classes,
+  activePlugins,
+  toolbarOpts: toolOpts,
+  responseAreaProps,
+  onChange,
+  autoWidthToolbar,
+}) {
   const [showPicker, setShowPicker] = useState(false);
   const toolbarOpts = toolOpts ?? {};
 
@@ -83,11 +93,15 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
       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,
@@ -122,7 +136,7 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
   });
 
   const hasDoneButton = false;
-  const autoWidth = false;
+  const autoWidth = !!autoWidthToolbar;
 
   const names = classNames(classes.toolbar, PIE_TOOLBAR__CLASS, {
     [classes.toolbarWithNoDone]: !hasDoneButton,
@@ -152,35 +166,35 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
       {
         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,
       },
@@ -196,54 +210,54 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
 
           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,
       },
       {
@@ -253,22 +267,28 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
       },
       {
         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,
       },
@@ -289,30 +309,30 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
       },
       {
         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,
       },
@@ -320,8 +340,29 @@ function MenuBar({ editor, classes, activePlugins, toolbarOpts: toolOpts, respon
     [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,9 +73,10 @@ const StyledRoot = styled('div', {
     },
   },
   '& blockquote': {
-    borderLeft: '3px solid var(--gray-3)',
-    margin: '1.5rem 0',
-    paddingLeft: '1rem',
+    background: '#f9f9f9',
+    borderLeft: '5px solid #ccc',
+    margin: '1.5em 10px',
+    padding: '.5em 10px',
   },
   '& hr': {
     border: 'none',
@@ -108,13 +109,13 @@ const StyledRoot = styled('div', {
 }));
 
 const StyledEditorHolder = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'disableScrollbar',
-})(({ disableScrollbar }) => ({
+  shouldForwardProp: (prop) => !['disableScrollbar', 'highlightShape'].includes(prop),
+})(({ theme, disableScrollbar, highlightShape }) => ({
   position: 'relative',
   padding: '0px',
   overflowY: 'auto',
   color: color.text(),
-  backgroundColor: color.background(),
+  backgroundColor: highlightShape ? theme.palette.action.selected : color.background(),
   ...(disableScrollbar && {
     '&::-webkit-scrollbar': {
       display: 'none',
@@ -148,6 +149,7 @@ function TiptapContainer(props) {
     minHeight,
     height,
     maxHeight,
+    highlightShape,
     ref,
   } = props;
 
@@ -195,7 +197,7 @@ function TiptapContainer(props) {
       style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}
       ref={rootRef}
     >
-      <StyledEditorHolder disableScrollbar={disableScrollbar}>
+      <StyledEditorHolder disableScrollbar={disableScrollbar} highlightShape={highlightShape}>
         <StyledChildren noPadding={toolbarOpts && toolbarOpts.noPadding}>{children}</StyledChildren>
       </StyledEditorHolder>
 
@@ -206,6 +208,7 @@ function TiptapContainer(props) {
           toolbarOpts={toolbarOpts}
           activePlugins={activePlugins}
           onChange={props.onChange}
+          autoWidthToolbar={props.autoWidthToolbar}
         />
       )}
     </StyledRoot>

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

@@ -124,7 +124,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', () => {

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

@@ -132,7 +132,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 +184,153 @@ 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 = {
+      ...mockEditor,
+      _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();
+  });
 });

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

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

@@ -15,7 +15,7 @@ const StyledContent = styled('span')(({ theme }) => ({
   },
 }));
 
-export function BlankContent({ n, children, isDragging, isOver, dragItem, value }) {
+export function BlankContent({ n, children, isDragging, isOver, dragItem, value, selected }) {
   const [hoveredElementSize, setHoveredElementSize] = useState(null);
   const elementRef = useRef(null);
 
@@ -56,15 +56,22 @@ export function BlankContent({ n, children, isDragging, isOver, dragItem, value
   const hasGrip = finalLabel !== '\u00A0';
   const isPreview = dragItem && isOver;
 
+  const borderStyle = selected
+    ? `2px solid ${color.primaryDark()}`
+    : isPreview
+      ? `1px solid ${color.defaults.BORDER_DARK}`
+      : `1px solid ${color.defaults.BORDER_LIGHT}`;
+
   return (
     <div
       ref={elementRef}
+      className={selected ? 'selected' : undefined}
       style={{
         display: 'inline-flex',
         minWidth: '178px',
         minHeight: '36px',
         background: isPreview ? `${color.defaults.BORDER_LIGHT}` : `${color.defaults.WHITE}`,
-        border: isPreview ? `1px solid  ${color.defaults.BORDER_DARK}` : `1px solid  ${color.defaults.BORDER_LIGHT}`,
+        border: borderStyle,
         boxSizing: 'border-box',
         borderRadius: '3px',
         overflow: 'hidden',
@@ -72,6 +79,7 @@ export function BlankContent({ n, children, isDragging, isOver, dragItem, value
         padding: '8px 8px 8px 35px',
         width: hoveredElementSize ? hoveredElementSize.width : undefined,
         height: hoveredElementSize ? hoveredElementSize.height : undefined,
+        touchAction: 'none',
       }}
       data-key={n.index}
       contentEditable={false}
@@ -104,9 +112,21 @@ BlankContent.propTypes = {
   isOver: PropTypes.bool,
   dragItem: PropTypes.object,
   value: PropTypes.object,
+  selected: PropTypes.bool,
 };
 
-function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos }) {
+function DragDropChoice({
+  value,
+  disabled,
+  instanceId,
+  children,
+  n,
+  onChange,
+  removeResponse,
+  duplicates,
+  pos,
+  selected,
+}) {
   const {
     attributes: dragAttributes,
     listeners: dragListeners,
@@ -196,7 +216,14 @@ function DragDropChoice({ value, disabled, instanceId, children, n, onChange, re
   };
 
   const dragContent = (
-    <BlankContent n={n} isDragging={isDragging} isOver={isOver} dragItem={dragItem?.data?.current} value={value}>
+    <BlankContent
+      n={n}
+      isDragging={isDragging}
+      isOver={isOver}
+      dragItem={dragItem?.data?.current}
+      value={value}
+      selected={selected}
+    >
       {children}
     </BlankContent>
   );
@@ -223,6 +250,7 @@ DragDropChoice.propTypes = {
   onChange: PropTypes.func.isRequired,
   removeResponse: PropTypes.func.isRequired,
   duplicates: PropTypes.bool,
+  selected: PropTypes.bool,
 };
 
 export default DragDropChoice;

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -9,7 +9,7 @@ const ExplicitConstructedResponse = (props) => {
   const { respAreaToolbar, error: errorFn } = options;
   const pos = getPos();
   const [showToolbar, setShowToolbar] = useState(false);
-  const EcrToolbar = respAreaToolbar(node, editor, () => {});
+  const EcrToolbar = respAreaToolbar([node, pos], editor, () => {});
   const toolbarRef = useRef(null);
 
   let error;