@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.34

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/choice.jsx

@@ -0,0 +1,256 @@
+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-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,135 @@
+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';
+
+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
+                  editor._toolbarOpened = 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

@@ -0,0 +1,220 @@
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { NodeViewWrapper } from '@tiptap/react';
+import { NodeSelection } from 'prosemirror-state';
+import { Chevron } from '../icons/RespArea';
+import ReactDOM from 'react-dom';
+import CustomToolbarWrapper from '../../extensions/custom-toolbar-wrapper';
+
+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 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);
+  };
+
+  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]);
+
+  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) => {
+      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]);
+
+  return (
+    <NodeViewWrapper
+      className="inline-dropdown"
+      data-selected={selected}
+      style={{
+        display: 'inline-flex',
+        height: '50px',
+        cursor: 'pointer',
+      }}
+    >
+      <div
+        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} style={{ zIndex: 1 }}>
+              <InlineDropdownToolbar
+                editorCallback={(instance) => {
+                  toolbarEditor.current = instance;
+                }}
+              />
+            </div>,
+            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
+                  editor._toolbarOpened = 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;