@pie-lib/editable-html-tip-tap 2.1.2-next.0 → 2.1.2-next.104

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NodeViewWrapper } from '@tiptap/react';
+import DragDropTile from './choice';
+import omit from 'lodash-es/omit';
+
+export const onValueChange = (editor, node, pos, choice) => {
+  const { tr } = editor.state;
+
+  // Merge old and new attributes
+  tr.setNodeMarkup(pos, undefined, {
+    ...node.attrs,
+    ...choice.value,
+  });
+  tr.isDone = true;
+  editor.view.dispatch(tr);
+};
+
+export const onRemoveResponse = (editor, node, choice) => {
+  const { tr } = editor.state;
+
+  // Merge old and new attributes
+  tr.setNodeMarkup(choice.pos, undefined, omit(node.attrs, ['value', 'id']));
+  tr.isDone = true;
+  editor.view.dispatch(tr);
+};
+
+const DragDrop = (props) => {
+  const { editor, node, getPos, options, selected } = props;
+  const { attrs: attributes } = node;
+  const { inTable } = attributes;
+  const pos = getPos();
+
+  // console.log({nodeProps.children})
+  return (
+    <NodeViewWrapper
+      className="drag-in-the-blank"
+      data-selected={selected}
+      style={{ display: 'inline', whiteSpace: 'normal' }}
+    >
+      <span
+        {...attributes}
+        style={{
+          display: 'inline-flex',
+          minHeight: '50px',
+          minWidth: '178px',
+          position: 'relative',
+          margin: inTable ? '10px' : '0 10px',
+          cursor: 'pointer',
+        }}
+      >
+        <DragDropTile
+          n={attributes}
+          dragKey={attributes.id}
+          targetId="0"
+          pos={pos}
+          value={attributes}
+          duplicates={options.duplicates}
+          selected={selected}
+          onChange={(choice) => onValueChange(editor, node, pos, choice)}
+          removeResponse={(choice) => onRemoveResponse(editor, node, choice)}
+        ></DragDropTile>
+      </span>
+    </NodeViewWrapper>
+  );
+};
+
+DragDrop.propTypes = {
+  attributes: PropTypes.object,
+  data: PropTypes.object,
+  n: PropTypes.object,
+  nodeProps: PropTypes.object,
+  opts: PropTypes.object,
+};
+
+export default DragDrop;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DragDropChoice from '../choice';
+
+// Mock @dnd-kit hooks to avoid DndContext requirement
+jest.mock('@dnd-kit/core', () => ({
+  useDraggable: jest.fn(() => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: jest.fn(),
+    isDragging: false,
+  })),
+  useDroppable: jest.fn(() => ({
+    setNodeRef: jest.fn(),
+    isOver: false,
+    active: null,
+  })),
+}));
+
+jest.mock('@pie-lib/math-rendering', () => ({
+  renderMath: jest.fn(),
+}));
+
+// Collect the CSS rules emotion/MUI injected into the document (jsdom uses insertRule).
+const collectEmotionRules = () => {
+  const rules = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    try {
+      for (const rule of Array.from(sheet.cssRules)) {
+        rules.push(rule.cssText);
+      }
+    } catch (e) {
+      /* inaccessible stylesheet */
+    }
+  }
+  return rules;
+};
+
+describe('DragInTheBlank choice', () => {
+  const defaultProps = {
+    value: { id: '1', value: '<math>1/2</math>' },
+    disabled: false,
+    instanceId: 'test-instance',
+    n: { index: 0 },
+    onChange: jest.fn(),
+    removeResponse: jest.fn(),
+    duplicates: false,
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<DragDropChoice {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  describe('fraction math styling', () => {
+    it('enlarges numerator/denominator digits adjacent to a fraction to 120%', () => {
+      render(<DragDropChoice {...defaultProps} />);
+      const rule = collectEmotionRules().find((r) => r.includes('mjx-mn') && r.includes('mjx-mfrac'));
+      expect(rule).toBeDefined();
+      expect(rule).toMatch(/mjx-mn:has\(~\s*mjx-mfrac\)/);
+      expect(rule).toMatch(/mjx-mfrac\s*~\s*mjx-mn/);
+      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+    });
+
+    it('keeps the existing mjx-frac 120% rule', () => {
+      render(<DragDropChoice {...defaultProps} />);
+      const rule = collectEmotionRules().find((r) => /(^|[^-])mjx-frac/.test(r) && !r.includes('mjx-mfrac'));
+      expect(rule).toBeDefined();
+      expect(rule).toMatch(/font-size:\s*120%\s*!important/i);
+    });
+  });
+});

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

@@ -0,0 +1,259 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { color } from '@pie-lib/render-ui';
+import { renderMath } from '@pie-lib/math-rendering';
+import { styled } from '@mui/material/styles';
+import classnames from 'classnames';
+
+import { GripIcon } from '../../icons/RespArea';
+
+const StyledContent = styled('span')(({ theme }) => ({
+  border: `solid 0px ${theme.palette.primary.main}`,
+  '& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn': {
+    fontSize: '120% !important',
+  },
+  '& mjx-frac': {
+    fontSize: '120% !important',
+  },
+}));
+
+export function BlankContent({ n, children, isDragging, isOver, dragItem, value, selected }) {
+  const [hoveredElementSize, setHoveredElementSize] = useState(null);
+  const elementRef = useRef(null);
+
+  const handleClick = (event) => {
+    if (!elementRef.current) return;
+
+    if (elementRef.current.contains(event.target)) {
+      elementRef.current.classList.add('selected');
+    } else {
+      elementRef.current.classList.remove('selected');
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (elementRef.current && typeof renderMath === 'function') {
+      renderMath(elementRef.current);
+    }
+  }, [value?.value, isOver, dragItem?.value?.value]);
+
+  useEffect(() => {
+    if (isOver && elementRef.current && !hoveredElementSize) {
+      const node = elementRef.current;
+      setHoveredElementSize({ width: node.offsetWidth, height: node.offsetHeight });
+    } else if (!isOver && hoveredElementSize) {
+      setHoveredElementSize(null);
+    }
+  }, [isOver, hoveredElementSize]);
+
+  const label = dragItem && isOver ? dragItem.value.value : value.value || '\u00A0';
+  const finalLabel = isDragging ? '\u00A0' : label;
+  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: borderStyle,
+        boxSizing: 'border-box',
+        borderRadius: '3px',
+        overflow: 'hidden',
+        position: 'relative',
+        padding: '8px 8px 8px 35px',
+        width: hoveredElementSize ? hoveredElementSize.width : undefined,
+        height: hoveredElementSize ? hoveredElementSize.height : undefined,
+        touchAction: 'none',
+      }}
+      data-key={n.index}
+      contentEditable={false}
+    >
+      {hasGrip && (
+        <GripIcon
+          style={{
+            position: 'absolute',
+            top: '6px',
+            left: '15px',
+            color: '#9B9B9B',
+          }}
+          contentEditable={false}
+        />
+      )}
+      <span
+        dangerouslySetInnerHTML={{
+          __html: finalLabel,
+        }}
+      />
+      {children}
+    </div>
+  );
+}
+
+BlankContent.propTypes = {
+  n: PropTypes.object,
+  children: PropTypes.node,
+  isDragging: PropTypes.bool,
+  isOver: PropTypes.bool,
+  dragItem: PropTypes.object,
+  value: PropTypes.object,
+  selected: PropTypes.bool,
+};
+
+function DragDropChoice({
+  value,
+  disabled,
+  instanceId,
+  children,
+  n,
+  onChange,
+  removeResponse,
+  duplicates,
+  pos,
+  selected,
+}) {
+  const {
+    attributes: dragAttributes,
+    listeners: dragListeners,
+    setNodeRef: setDragNodeRef,
+    isDragging,
+  } = useDraggable({
+    id: `drag-${n.index}`,
+    disabled: disabled || !value?.value,
+    data: {
+      id: `drag-${n.index}`,
+      value,
+      instanceId,
+      n,
+      pos,
+      opts: { duplicates },
+      type: 'drag-in-the-blank-placed-choice',
+      fromChoice: !value,
+      onRemove: (draggedData) => removeResponse(draggedData),
+      onDrop: (draggedData, dropData) => {
+        // check if we're dropping into a blank
+        const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
+
+        if (!isValidBlank) return;
+
+        // place into blank
+        onChange(draggedData);
+
+        if (!duplicates && draggedData.fromChoice) {
+          removeResponse(draggedData);
+        }
+      },
+    },
+  });
+
+  const {
+    setNodeRef: setDropNodeRef,
+    isOver,
+    active: dragItem,
+  } = useDroppable({
+    id: `drop-${n.index}`,
+    data: {
+      type: 'drag-in-the-blank-drop-choice',
+      accepts: ['drag-in-the-blank-choice', 'drag-in-the-blank-placed-choice'],
+      instanceId: instanceId,
+      value: value,
+      id: `drop-${n.index}`,
+      pos,
+      n,
+      opts: { duplicates },
+      onDrop: (draggedData, dropData) => {
+        // check if we're dropping into a blank
+        const isValidBlank = dropData?.type === 'drag-in-the-blank-drop-choice';
+
+        if (!isValidBlank) return;
+
+        // if the dragged and dropped data are the same, do nothing
+        if (draggedData.value.id === dropData.value.id) return;
+
+        if (draggedData.type === 'drag-in-the-blank-choice') {
+          // place into blank
+          onChange(draggedData);
+
+          if (!duplicates && draggedData.fromChoice) {
+            removeResponse(draggedData);
+          }
+          return;
+        }
+
+        // moving placed choice between blanks
+        if (draggedData.type === 'drag-in-the-blank-placed-choice') {
+          // clear target blank
+          removeResponse(dropData);
+
+          // set new blank value
+          onChange(draggedData);
+
+          // clear original blank - slight delay to ensure state updates correctly
+          setTimeout(() => removeResponse(draggedData), 10);
+        }
+      },
+    },
+  });
+
+  const setNodeRef = (node) => {
+    setDragNodeRef(node);
+    setDropNodeRef(node);
+  };
+
+  const dragContent = (
+    <BlankContent
+      n={n}
+      isDragging={isDragging}
+      isOver={isOver}
+      dragItem={dragItem?.data?.current}
+      value={value}
+      selected={selected}
+    >
+      {children}
+    </BlankContent>
+  );
+
+  const dragEl = !value ? (
+    <span ref={setDropNodeRef}>{dragContent}</span>
+  ) : (
+    <span ref={setNodeRef} {...dragAttributes} {...dragListeners}>
+      {dragContent}
+    </span>
+  );
+
+  const content = <StyledContent className={classnames(isOver && 'over')}>{dragEl}</StyledContent>;
+
+  return content;
+}
+
+DragDropChoice.propTypes = {
+  value: PropTypes.object,
+  disabled: PropTypes.bool,
+  instanceId: PropTypes.string,
+  children: PropTypes.node,
+  n: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  removeResponse: PropTypes.func.isRequired,
+  duplicates: PropTypes.bool,
+  selected: PropTypes.bool,
+};
+
+export default DragDropChoice;

package/src/components/respArea/ExplicitConstructedResponse.jsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { NodeViewWrapper } from '@tiptap/react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
+import { setToolbarOpened } from '../../utils/toolbar';
+
+const ExplicitConstructedResponse = (props) => {
+  const { editor, node, getPos, options, selected } = props;
+  const { attrs: attributes } = node;
+  const { value } = attributes;
+  const { respAreaToolbar, error: errorFn } = options;
+  const pos = getPos();
+  const [showToolbar, setShowToolbar] = useState(false);
+  const EcrToolbar = respAreaToolbar([node, pos], editor, () => {});
+  const toolbarRef = useRef(null);
+
+  let error;
+
+  if (errorFn) {
+    const errorValue = errorFn();
+    const respIndex = parseInt(attributes.index, 10);
+
+    error = !!errorValue?.[respIndex]?.[0];
+  }
+
+  useEffect(() => {
+    const { selection } = editor.state;
+    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
+
+    if (selected) {
+      if (onlyThisNodeSelected) {
+        setShowToolbar(selected);
+      }
+    } else {
+      setShowToolbar(selected);
+    }
+  }, [editor, node, selected]);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const insideCharacterPicker =
+        event.target.closest('.insert-character-dialog') || event.target.closest('[data-toolbar-for]');
+
+      if (
+        !insideCharacterPicker &&
+        toolbarRef.current &&
+        !toolbarRef.current.contains(event.target) &&
+        !event.target.closest('[data-inline-node]')
+      ) {
+        setShowToolbar(false);
+      }
+    };
+
+    if (showToolbar) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [showToolbar]);
+
+  return (
+    <NodeViewWrapper
+      className="drag-in-the-blank"
+      data-selected={selected}
+      style={{
+        display: 'inline-flex',
+        minHeight: '55px',
+        position: 'relative',
+        cursor: 'pointer',
+      }}
+    >
+      <div
+        {...attributes}
+        style={{
+          display: 'inline-flex',
+          width: '100%',
+          minHeight: '46px',
+          height: '46px',
+          backgroundColor: '#FFF',
+          border: `1px solid ${error ? 'red' : '#C0C3CF'}`,
+          boxSizing: 'border-box',
+          borderRadius: '4px',
+          overflow: 'hidden',
+          padding: '12px 21px',
+          margin: '0 4px',
+          minWidth: '178px',
+          visibility: showToolbar ? 'hidden' : 'visible',
+        }}
+        onClick={() => setShowToolbar(true)}
+        dangerouslySetInnerHTML={{
+          __html: value || '<div>&nbsp;</div>',
+        }}
+      />
+      {showToolbar && (
+        <React.Fragment>
+          <div ref={toolbarRef} className="absolute z-50 bg-white shadow-lg rounded p-2" style={{ zIndex: 1 }}>
+            <EcrToolbar />
+          </div>
+          {editor._tiptapContainerEl &&
+            ReactDOM.createPortal(
+              <CustomToolbarWrapper
+                deletable
+                toolbarOpts={{ minWidth: 'auto' }}
+                autoWidth
+                style={{ top: -40, left: 0, right: 0 }}
+                onDelete={() => {
+                  const { tr } = editor.state;
+                  tr.delete(pos, pos + node.nodeSize);
+                  // Prevent the debounced onBlur/onDone from firing into the
+                  // now-deleted node's stale position
+                  setToolbarOpened(editor, false);
+                  editor.view.dispatch(tr);
+                  setShowToolbar(false);
+                  editor.commands.focus();
+                }}
+                showDone={false}
+              />,
+              editor._tiptapContainerEl,
+            )}
+        </React.Fragment>
+      )}
+    </NodeViewWrapper>
+  );
+};
+
+ExplicitConstructedResponse.propTypes = {
+  attributes: PropTypes.object,
+  error: PropTypes.any,
+  value: PropTypes.string,
+  isFocused: PropTypes.bool,
+};
+
+export default ExplicitConstructedResponse;