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

package/src/components/respArea/InlineDropdown.jsx

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

@@ -0,0 +1,124 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NodeViewWrapper } from '@tiptap/react';
+import { mq } from '@pie-lib/math-input';
+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

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

@@ -0,0 +1,210 @@
+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', () => ({
+  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}');
+  });
+});