fix(editable-html-tip-tap): handle focus,selection delete menu PD-5589

packages/editable-html-tip-tap/src/components/MenuBar.jsx

@@ -18,6 +18,7 @@ import Undo from '@mui/icons-material/Undo';
 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';
 
@@ -83,7 +84,8 @@ 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');
 
       return {
         currentNode,
@@ -320,8 +322,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}>

packages/editable-html-tip-tap/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>

packages/editable-html-tip-tap/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',
@@ -104,9 +111,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 +215,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 +249,7 @@ DragDropChoice.propTypes = {
   onChange: PropTypes.func.isRequired,
   removeResponse: PropTypes.func.isRequired,
   duplicates: PropTypes.bool,
+  selected: PropTypes.bool,
 };
 
 export default DragDropChoice;

packages/editable-html-tip-tap/src/extensions/responseArea.js

@@ -187,14 +187,9 @@ export const ResponseAreaExtension = Extension.create({
           // tr.setSelection(NodeSelection.create(tr.doc, usedPos))
 
           // --- Cursor move behavior for certain types (Slate: moveFocusTo next text) ---
-          if (
-            ['math_templated', 'inline_dropdown', 'drag_in_the_blank', 'explicit_constructed_response'].includes(
-              typeName,
-            )
-          ) {
+          if (['math_templated', 'inline_dropdown', 'explicit_constructed_response'].includes(typeName)) {
             tr.setSelection(NodeSelection.create(tr.doc, usedPos));
           } else {
-            // Default: put cursor after inserted node
             const after = usedPos + newInline.nodeSize;
             tr.setSelection(selectionAfterPos(tr.doc, after));
           }