@pie-lib/editable-html-tip-tap 2.2.0-beta.9 → 3.0.0-next.20261002094057

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

@@ -1,76 +0,0 @@
-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/choice.jsx

@@ -1,259 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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;

package/src/components/respArea/InlineDropdown.jsx

@@ -1,240 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import ReactDOM from 'react-dom';
-import { renderMath } from '@pie-lib/math-rendering';
-import PropTypes from 'prop-types';
-import { NodeViewWrapper } from '@tiptap/react';
-import { NodeSelection } from 'prosemirror-state';
-import { Chevron } from '../icons/RespArea';
-import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
-import { setToolbarOpened } from '../../utils/toolbar';
-
-const InlineDropdown = (props) => {
-  const { editor, node, getPos, options, selected } = props;
-  const { attrs: attributes } = node;
-  const { value, error } = attributes;
-  const html = value || '<div>&nbsp</div>';
-  const pos = getPos();
-  const toolbarRef = useRef(null);
-  const toolbarEditor = useRef(null);
-  const pendingCloseRequest = useRef(false);
-  const elementRef = useRef(null);
-
-  const isHeld = () =>
-    editor._holdInlineDropdownToolbarIndex != null &&
-    String(editor._holdInlineDropdownToolbarIndex) === String(node.attrs.index);
-
-  const [showToolbar, setShowToolbar] = useState(false);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
-
-  const closeToolbar = () => {
-    if (isHeld()) {
-      return;
-    }
-
-    setShowToolbar(false);
-    options.onInlineDropdownToolbarClose?.(editor);
-  };
-
-  const InlineDropdownToolbar = options.respAreaToolbar([node, pos], editor, closeToolbar);
-
-  const reselectNode = () => {
-    const { tr } = editor.state;
-    const nodeAtPos = tr.doc.nodeAt(pos);
-
-    if (!nodeAtPos) {
-      return;
-    }
-
-    const { selection } = tr;
-
-    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {
-      return;
-    }
-
-    tr.setSelection(NodeSelection.create(tr.doc, pos));
-    editor.view.dispatch(tr);
-  };
-
-  const requestClose = () => {
-    if (pendingCloseRequest.current) {
-      return;
-    }
-
-    if (options.onToolbarCloseRequest) {
-      pendingCloseRequest.current = true;
-
-      options.onToolbarCloseRequest(
-        [node, pos],
-        editor,
-        () => {
-          pendingCloseRequest.current = false;
-          delete editor._holdInlineDropdownToolbarIndex;
-          closeToolbar();
-        },
-        () => {
-          pendingCloseRequest.current = false;
-          delete editor._holdInlineDropdownToolbarIndex;
-          setShowToolbar(true);
-          setTimeout(reselectNode, 0);
-        },
-      );
-    } else {
-      closeToolbar();
-    }
-  };
-
-  useEffect(() => {
-    const { selection } = editor.state;
-    const onlyThisNodeSelected = selection.from + node.nodeSize === selection.to;
-
-    if (selected) {
-      if (onlyThisNodeSelected) {
-        setShowToolbar(true);
-      }
-    } else if (showToolbar) {
-      requestClose();
-    }
-  }, [editor, node, selected]);
-
-  const isScrollbarClicked = (event) =>
-    event.clientX > document.documentElement.clientWidth ||
-    event.clientY > document.documentElement.clientHeight ||
-    event.target === document.documentElement;
-
-  useEffect(() => {
-    if (elementRef.current && typeof renderMath === 'function') {
-      renderMath(elementRef.current);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    // Calculate position relative to selection
-    const bodyRect = document.body.getBoundingClientRect();
-    const { from } = editor.state.selection;
-    const start = editor.view.coordsAtPos(from);
-
-    setPosition({
-      top: start.top + Math.abs(bodyRect.top) + 40, // shift above
-      left: start.left,
-    });
-
-    const handleClickOutside = (event) => {
-      if (isScrollbarClicked(event)) {
-        return;
-      }
-
-      const insideSomeEditor = event.target.closest('[data-toolbar-for]');
-
-      if (
-        !event.target.closest('[data-inline-dropdown-toolbar]') &&
-        (!insideSomeEditor || insideSomeEditor.dataset.toolbarFor !== toolbarEditor.current?.instanceId) &&
-        !editor._toolbarOpened &&
-        toolbarRef.current &&
-        !toolbarRef.current.contains(event.target) &&
-        !event.target.closest('[data-inline-node]')
-      ) {
-        requestClose();
-      }
-    };
-
-    if (showToolbar) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showToolbar, node]);
-
-  return (
-    <NodeViewWrapper
-      className="inline-dropdown"
-      data-selected={selected}
-      style={{
-        display: 'inline-flex',
-        height: '50px',
-        cursor: 'pointer',
-      }}
-    >
-      <div
-        ref={elementRef}
-        style={{
-          display: 'inline-flex',
-          minWidth: '178px',
-          height: '36px',
-          background: '#FFF',
-          border: '1px solid #C0C3CF',
-          boxSizing: 'border-box',
-          borderRadius: '3px',
-          margin: '0 2px',
-          position: 'relative',
-          alignItems: 'center',
-        }}
-        onClick={() => setShowToolbar(true)}
-      >
-        <div
-          style={{
-            flex: 1,
-            overflow: 'hidden',
-            padding: '0 25px 0 8px',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-          }}
-        >
-          <span
-            style={{
-              display: 'inline-block',
-              verticalAlign: 'middle',
-            }}
-            dangerouslySetInnerHTML={{ __html: html }}
-          />
-        </div>
-        <Chevron direction="down" style={{ position: 'absolute', top: '5px', right: '5px' }} />
-      </div>
-      {showToolbar && (
-        <React.Fragment>
-          {ReactDOM.createPortal(
-            <div ref={toolbarRef}>
-              <InlineDropdownToolbar
-                editorCallback={(instance) => {
-                  toolbarEditor.current = instance;
-                }}
-              />
-            </div>,
-            editor?._tiptapContainerEl || document.body,
-          )}
-
-          {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);
-                  delete editor._holdInlineDropdownToolbarIndex;
-                  editor.view.dispatch(tr);
-                  setShowToolbar(false);
-                  editor.commands.focus();
-                }}
-                showDone={false}
-              />,
-              editor._tiptapContainerEl,
-            )}
-        </React.Fragment>
-      )}
-    </NodeViewWrapper>
-  );
-};
-
-InlineDropdown.propTypes = {
-  attributes: PropTypes.object,
-  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-};
-
-export default InlineDropdown;