@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 3.0.0-next.35

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;

package/src/components/respArea/MathTemplated.jsx

@@ -1,124 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NodeViewWrapper } from '@tiptap/react';
-import { mq } from '@pie-lib/math-input-mathlive';
-import { styled } from '@mui/material/styles';
-
-const StyledSpanContainer = styled('span')(() => ({
-  display: 'inline-flex',
-  border: '1px solid #C0C3CF',
-  margin: '1px 5px',
-  cursor: 'pointer',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minWidth: '50px',
-  minHeight: '36px',
-  height: 'fit-content',
-}));
-
-const StyledResponseBox = styled('div')(({ theme }) => ({
-  background: theme.palette.grey['A100'],
-  color: theme.palette.grey['A700'],
-  display: 'inline-flex',
-  borderRight: '2px solid #C0C3CF',
-  boxSizing: 'border-box',
-  overflow: 'hidden',
-  fontSize: '12px',
-  minHeight: '36px',
-  height: '100%',
-  alignItems: 'center',
-  fontFamily: 'Symbola, Times New Roman, serif',
-  padding: '0 2px',
-}));
-
-const StyledMathBlock = styled('div')(() => ({
-  flex: 8,
-  color: 'var(--pie-text, black)',
-  padding: '4px !important',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  backgroundColor: 'var(--pie-background, rgba(255, 255, 255, 0))',
-  '& > .mq-math-mode sup.mq-nthroot': {
-    fontSize: '70% !important',
-    verticalAlign: '1em !important',
-  },
-  '& > .mq-math-mode .mq-sqrt-stem': {
-    borderTop: '0.07em solid',
-    marginLeft: '-1.5px',
-    marginTop: '-2px !important',
-    paddingTop: '5px !important',
-  },
-  '& .mq-overarrow-inner': {
-    paddingTop: '0 !important',
-    border: 'none !important',
-  },
-  '& .mq-overarrow.mq-arrow-both': {
-    marginTop: '0px',
-    minWidth: '1.23em',
-    '& *': {
-      lineHeight: '1 !important',
-    },
-    '&:before': {
-      top: '-0.4em',
-      left: '-1px',
-    },
-    '&:after': {
-      top: '0px !important',
-      position: 'absolute !important',
-      right: '-2px',
-    },
-    '&.mq-empty:after': {
-      top: '-0.45em',
-    },
-  },
-  '& .mq-overarrow.mq-arrow-right': {
-    '&:before': {
-      top: '-0.4em',
-      right: '-1px',
-    },
-  },
-  '& .mq-overarrow-inner-right': {
-    display: 'none !important',
-  },
-  '& .mq-overarrow-inner-left': {
-    display: 'none !important',
-  },
-}));
-const MathTemplated = (props) => {
-  const { node, options, selected } = props;
-  const { attrs: attributes } = node;
-  const { value, index } = attributes;
-
-  // add 1 to index to display R 1 instead of R 0
-  const keyToDisplay = `R ${parseInt(index) + 1}`;
-
-  // console.log({nodeProps.children})
-  return (
-    <NodeViewWrapper
-      className="math-templated"
-      data-selected={selected}
-      style={{
-        display: 'inline-flex',
-        minHeight: '36px',
-        minWidth: '50px',
-        cursor: 'pointer',
-      }}
-    >
-      <StyledSpanContainer {...attributes}>
-        <StyledResponseBox>{keyToDisplay}</StyledResponseBox>
-        <StyledMathBlock>
-          <mq.Static latex={value} />
-        </StyledMathBlock>
-      </StyledSpanContainer>
-    </NodeViewWrapper>
-  );
-};
-
-MathTemplated.propTypes = {
-  attributes: PropTypes.object,
-  value: PropTypes.string,
-  keyToDisplay: PropTypes.string,
-};
-
-export default MathTemplated;

package/src/components/respArea/ToolbarIcon.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-
-export const Chevron = (props) => {
-  const { direction, style } = props;
-  const rotate = (() => {
-    switch (direction) {
-      case 'down':
-        return 90;
-      case 'up':
-        return -90;
-      case 'left':
-        return 180;
-      default:
-        return 0;
-    }
-  })();
-
-  return (
-    <svg
-      style={{
-        transform: `rotate(${rotate}deg)`,
-        ...style,
-      }}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor" />
-    </svg>
-  );
-};
-
-export const GripIcon = ({ style }) => (
-  <span style={style}>
-    <svg
-      style={{
-        margin: '0 -16px',
-      }}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M9 3H7v2h2V3zm0 4H7v2h2V7zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm4-16h-2v2h2V3zm0 4h-2v2h2V7zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2z" />
-    </svg>
-    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <path d="M9 3H7v2h2V3zm0 4H7v2h2V7zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm4-16h-2v2h2V3zm0 4h-2v2h2V7zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2z" />
-    </svg>
-  </span>
-);
-
-const StyledToolbarIcon = styled('div')(({ theme }) => ({
-  fontFamily: 'Cerebri Sans !important',
-  fontSize: theme.typography.fontSize,
-  fontWeight: 'bold',
-  lineHeight: '14px',
-  position: 'relative',
-  top: '7px',
-  width: '110px',
-  height: '28px',
-  whiteSpace: 'nowrap',
-}));
-
-export const ToolbarIcon = () => <StyledToolbarIcon>+ Response Area</StyledToolbarIcon>;

package/src/components/respArea/__tests__/MathTemplated.test.jsx

@@ -1,210 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import MathTemplated from '../MathTemplated';
-
-// Mock the dependencies
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children, ...props }) => (
-    <div data-testid="node-view-wrapper" {...props}>
-      {children}
-    </div>
-  ),
-}));
-
-jest.mock('@pie-lib/math-input-mathlive', () => ({
-  mq: {
-    Static: ({ latex }) => (
-      <div data-testid="mq-static" data-latex={latex}>
-        {latex}
-      </div>
-    ),
-  },
-}));
-
-describe('MathTemplated', () => {
-  const defaultProps = {
-    node: {
-      attrs: {
-        value: 'x^2 + y^2 = r^2',
-        index: 0,
-      },
-    },
-    options: {},
-    selected: false,
-  };
-
-  it('renders without crashing', () => {
-    const { container } = render(<MathTemplated {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders NodeViewWrapper with correct className', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveClass('math-templated');
-  });
-
-  it('displays correct response key for index 0', () => {
-    const { getByText } = render(<MathTemplated {...defaultProps} />);
-    expect(getByText('R 1')).toBeInTheDocument();
-  });
-
-  it('displays correct response key for index 1', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'a + b',
-          index: 1,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 2')).toBeInTheDocument();
-  });
-
-  it('displays correct response key for index 5', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'c = d',
-          index: 5,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 6')).toBeInTheDocument();
-  });
-
-  it('renders LaTeX value correctly', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', 'x^2 + y^2 = r^2');
-  });
-
-  it('renders different LaTeX value', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: '\\frac{a}{b}',
-          index: 2,
-        },
-      },
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', '\\frac{a}{b}');
-  });
-
-  it('passes selected prop to NodeViewWrapper', () => {
-    const props = {
-      ...defaultProps,
-      selected: true,
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveAttribute('data-selected', 'true');
-  });
-
-  it('passes false selected prop to NodeViewWrapper', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveAttribute('data-selected', 'false');
-  });
-
-  it('applies correct inline styles to NodeViewWrapper', () => {
-    const { getByTestId } = render(<MathTemplated {...defaultProps} />);
-    const wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper).toHaveStyle({
-      display: 'inline-flex',
-      minHeight: '36px',
-      minWidth: '50px',
-      cursor: 'pointer',
-    });
-  });
-
-  it('handles string index correctly', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'test',
-          index: '3',
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 4')).toBeInTheDocument();
-  });
-
-  it('handles empty value', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: '',
-          index: 0,
-        },
-      },
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', '');
-  });
-
-  it('renders all styled components', () => {
-    const { container, getByText } = render(<MathTemplated {...defaultProps} />);
-
-    // Check for response box
-    expect(getByText('R 1')).toBeInTheDocument();
-
-    // Check for math block with LaTeX
-    const mqStatic = container.querySelector('[data-testid="mq-static"]');
-    expect(mqStatic).toBeInTheDocument();
-  });
-
-  it('handles zero index', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'x = 0',
-          index: 0,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 1')).toBeInTheDocument();
-  });
-
-  it('handles large index values', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: 'x = 100',
-          index: 99,
-        },
-      },
-    };
-    const { getByText } = render(<MathTemplated {...props} />);
-    expect(getByText('R 100')).toBeInTheDocument();
-  });
-
-  it('renders with complex LaTeX expression', () => {
-    const props = {
-      ...defaultProps,
-      node: {
-        attrs: {
-          value: '\\sqrt{x^2 + y^2}',
-          index: 0,
-        },
-      },
-    };
-    const { getByTestId } = render(<MathTemplated {...props} />);
-    const mqStatic = getByTestId('mq-static');
-    expect(mqStatic).toHaveAttribute('data-latex', '\\sqrt{x^2 + y^2}');
-  });
-});