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

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/inlineDropdownUtils.js

@@ -1,79 +0,0 @@
-import { NodeSelection } from 'prosemirror-state';
-
-export const HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX = '_holdInlineDropdownToolbarIndex';
-
-export const findInlineDropdownPos = (editor, index) => {
-    let foundPos = null;
-
-    editor.state.doc.descendants((n, p) => {
-        if (n.type?.name === 'inline_dropdown' && String(n.attrs?.index) === String(index)) {
-            foundPos = p;
-            return false;
-        }
-
-        return true;
-    });
-
-    return foundPos;
-};
-
-export const holdInlineDropdownToolbar = (editor, index) => {
-    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] = index;
-};
-
-export const releaseInlineDropdownToolbarHold = (editor) => {
-    delete editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX];
-};
-
-export const isInlineDropdownToolbarHeld = (editor, index) =>
-    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] != null &&
-    String(editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX]) === String(index);
-
-export const selectInlineDropdownNode = (editor, index, fallbackPos) => {
-    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;
-
-    if (pos == null) {
-        return null;
-    }
-
-    const { tr } = editor.state;
-    const nodeAtPos = tr.doc.nodeAt(pos);
-
-    if (!nodeAtPos) {
-        return null;
-    }
-
-    const { selection } = tr;
-
-    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {
-        return pos;
-    }
-
-    tr.setSelection(NodeSelection.create(tr.doc, pos));
-    editor.view.dispatch(tr);
-
-    return pos;
-};
-
-export const deleteInlineDropdownByIndex = (editor, index, fallbackPos) => {
-    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;
-
-    if (pos == null) {
-        releaseInlineDropdownToolbarHold(editor);
-        return false;
-    }
-
-    const { tr } = editor.state;
-    const nodeAtPos = tr.doc.nodeAt(pos);
-
-    if (!nodeAtPos) {
-        releaseInlineDropdownToolbarHold(editor);
-        return false;
-    }
-
-    tr.delete(pos, pos + nodeAtPos.nodeSize);
-    editor.view.dispatch(tr);
-    releaseInlineDropdownToolbarHold(editor);
-
-    return true;
-};

package/src/constants.js

@@ -1,5 +0,0 @@
-export const PIE_TOOLBAR__CLASS = 'pie-toolbar';
-
-export default {
-  PIE_TOOLBAR__CLASS,
-};

package/src/extensions/css.js

@@ -1,233 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Mark, mergeAttributes } from '@tiptap/core';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-
-export const removeDialogs = () => {
-  const prevDialogs = document.querySelectorAll('.insert-css-dialog');
-
-  prevDialogs.forEach((s) => s.remove());
-};
-
-const insertDialog = ({ editor, callback, opts, selectedText, parentNode }) => {
-  const editorDOM = editor.options.element;
-  const newEl = document.createElement('div');
-  const { selection } = editor.state;
-
-  removeDialogs();
-
-  newEl.className = 'insert-css-dialog';
-
-  let popoverEl;
-
-  const closePopOver = () => {
-    if (popoverEl) {
-      popoverEl.remove();
-    }
-  };
-
-  let firstCallMade = false;
-
-  const listener = (e) => {
-    // this will be triggered right after setting it because
-    // this toolbar is added on the mousedown event
-    // so right after mouseup, the click will be triggered
-    if (firstCallMade) {
-      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
-      const focusIsInEditor = editorDOM.contains(e.target);
-
-      if (!(focusIsInModals || focusIsInEditor)) {
-        handleClose();
-      }
-    } else {
-      firstCallMade = true;
-    }
-  };
-
-  const handleClose = () => {
-    callback(undefined, true);
-    newEl.remove();
-    closePopOver();
-    document.body.removeEventListener('click', listener);
-  };
-
-  const handleChange = (name) => {
-    callback(name, true);
-    newEl.remove();
-    closePopOver();
-    document.body.removeEventListener('click', listener);
-  };
-
-  const parentNodeClass = parentNode?.attrs.class;
-  const createHTML = (name) => {
-    let html = `<span class="${name}">${selectedText}</span>`;
-
-    if (parentNode) {
-      let tag = 'span';
-
-      if (parentNode?.object === 'inline') {
-        tag = 'span';
-      }
-
-      if (parentNode?.object === 'block') {
-        tag = 'div';
-      }
-
-      html = `<${tag} class="${parentNodeClass}">${parentNode.text.slice(
-        0,
-        selection.$anchor.textOffset,
-      )}${html}${parentNode.text.slice(selection.$head.textOffset)}</${tag}>`;
-    }
-
-    return html;
-  };
-
-  const el = (
-    <div
-      style={{ background: 'white', height: 500, padding: 20, overflow: 'hidden', display: 'flex', flexFlow: 'column' }}
-    >
-      <h2>Please choose a css class</h2>
-      {parentNodeClass && <div>The current parent has this class {parentNodeClass}</div>}
-      <List component="nav" style={{ overflow: 'scroll' }}>
-        {opts.names.map((name, i) => (
-          <ListItem key={`rule-${i}`} button onClick={() => handleChange(name)}>
-            <div style={{ marginRight: 20 }}>{name}</div>
-            <div
-              dangerouslySetInnerHTML={{
-                __html: createHTML(name),
-              }}
-            />
-          </ListItem>
-        ))}
-      </List>
-    </div>
-  );
-
-  ReactDOM.render(el, newEl, () => {
-    const cursorItem = editor.view.nodeDOM(editor.state.selection.from);
-    const cursorNode = cursorItem?.parentNode;
-
-    if (cursorNode) {
-      const bodyRect = editorDOM.parentElement.parentElement.parentElement.getBoundingClientRect();
-      const boundRect = cursorNode.getBoundingClientRect();
-
-      editorDOM.parentElement.parentElement.parentElement.appendChild(newEl);
-
-      newEl.style.maxWidth = '500px';
-      newEl.style.position = 'absolute';
-      newEl.style.top = 0;
-      newEl.style.zIndex = 99999;
-
-      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorNode.offsetWidth + 10}px`;
-
-      const rightValue = `${boundRect.x}px`;
-
-      newEl.style.left = leftValue;
-
-      const leftAlignedWidth = newEl.offsetWidth;
-
-      newEl.style.left = 'unset';
-      newEl.style.right = rightValue;
-
-      const rightAlignedWidth = newEl.offsetWidth;
-
-      newEl.style.left = 'unset';
-      newEl.style.right = 'unset';
-
-      if (leftAlignedWidth >= rightAlignedWidth) {
-        newEl.style.left = leftValue;
-      } else {
-        newEl.style.right = rightValue;
-      }
-
-      document.body.addEventListener('click', listener);
-    }
-  });
-};
-
-export const CSSMark = Mark.create({
-  name: 'cssmark',
-
-  addOptions() {
-    return {
-      classes: [],
-    };
-  },
-
-  addAttributes() {
-    return {
-      class: {
-        default: null,
-        parseHTML: (el) => el.getAttribute('class'),
-        renderHTML: (attributes) => {
-          if (!attributes.class) return {};
-          return { class: attributes.class };
-        },
-      },
-    };
-  },
-
-  parseHTML() {
-    // Any span with a class that matches one of allowed classes any span that carries a class attribute
-    // so that pre-existing spans are preserved when loading content
-    return [
-      {
-        tag: 'span[class]',
-        getAttrs: (el) => {
-          const cls = el.getAttribute('class') || '';
-
-          if (!cls) {
-            return false;
-          }
-
-          const allowedClasses = (this.options && this.options.classes) || [];
-
-          if (allowedClasses.length > 0) {
-            const match = this.options.classes.find((name) => cls.includes(name));
-
-            return match ? { class: match } : false;
-          }
-
-          return { class: cls };
-        },
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['span', mergeAttributes(HTMLAttributes), 0];
-  },
-
-  addCommands() {
-    return {
-      setCSSClass:
-        (className) =>
-        ({ commands }) => {
-          return commands.setMark(this.name, { class: className });
-        },
-
-      unsetCSSClass:
-        () =>
-        ({ commands }) => {
-          return commands.unsetMark(this.name);
-        },
-
-      openCSSClassDialog:
-        () =>
-        ({ editor }) => {
-          insertDialog({
-            editor,
-            selectedText: editor.state.doc.textBetween(editor.state.selection.from, editor.state.selection.to),
-            parentNode: editor.state.selection.$from.nodeAfter,
-            opts: this.options.extraCSSRules,
-            callback: (className) => {
-              if (className) {
-                editor.chain().focus().setCSSClass(className).run();
-              }
-            },
-          });
-        },
-    };
-  },
-});

package/src/extensions/custom-toolbar-wrapper.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import IconButton from '@mui/material/IconButton';
-import Delete from '@mui/icons-material/Delete';
-import { PIE_TOOLBAR__CLASS } from '../constants';
-import { styled } from '@mui/material/styles';
-import { DoneButton } from '../components/common/done-button';
-
-const StyledToolbar = styled('div', {
-  shouldForwardProp: (prop) => !['showDone', 'toolbarAlignment', 'isFocused', 'autoWidth', 'isHidden'].includes(prop),
-})(({ showDone, toolbarAlignment, isFocused, autoWidth, isHidden }) => ({
-  position: 'absolute',
-  zIndex: 10,
-  cursor: 'pointer',
-  justifyContent: 'space-between',
-  background: 'var(--editable-html-toolbar-bg, #efefef)',
-  minWidth: showDone ? '280px' : '265px',
-  margin: '5px 0 0 0',
-  padding: '2px',
-  boxShadow:
-    '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
-  boxSizing: 'border-box',
-  display: 'flex',
-  opacity: 1,
-  ...(toolbarAlignment === 'right' && {
-    right: 0,
-  }),
-  ...(autoWidth
-    ? {
-        width: 'auto',
-      }
-    : {
-        width: '100%',
-      }),
-  ...(isHidden && {
-    visibility: 'hidden',
-  }),
-}));
-
-const StyledIconButton = styled(IconButton)({
-  width: '28px',
-  height: '28px',
-  padding: '4px',
-  verticalAlign: 'top',
-});
-
-const SharedContainer = styled('div')({
-  display: 'flex',
-});
-
-function CustomToolbarWrapper(props) {
-  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone, style } = props;
-  const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
-
-  return (
-    <StyledToolbar
-      className={PIE_TOOLBAR__CLASS}
-      showDone={showDone}
-      toolbarAlignment={toolbarOpts.alignment}
-      isFocused={toolbarOpts.alwaysVisible || isFocused}
-      autoWidth={autoWidth}
-      isHidden={toolbarOpts.isHidden === true}
-      style={{ ...customStyles, ...style }}
-    >
-      {children}
-
-      <SharedContainer>
-        {deletable && (
-          <StyledIconButton aria-label="Delete" onMouseDown={(e) => onDelete?.(e)}>
-            <Delete />
-          </StyledIconButton>
-        )}
-        {showDone && <DoneButton doneButtonRef={doneButtonRef} onClick={onDone} />}
-      </SharedContainer>
-    </StyledToolbar>
-  );
-}
-
-export default CustomToolbarWrapper;

package/src/extensions/div-node.js

@@ -1,86 +0,0 @@
-// DivNode.ts
-import { Node } from '@tiptap/core';
-
-export const DivNode = Node.create({
-  name: 'div',
-  group: 'block',
-  content: 'inline*',
-
-  parseHTML() {
-    return [{ tag: 'div' }];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['div', HTMLAttributes, 0];
-  },
-
-  addKeyboardShortcuts() {
-    const isInsideListItem = ($from) => {
-      for (let depth = $from.depth; depth >= 0; depth -= 1) {
-        if ($from.node(depth).type.name === 'listItem') {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    return {
-      Enter: () => {
-        const { state } = this.editor;
-        const { $from } = state.selection;
-
-        if ($from.parent.type.name !== 'div') {
-          return false;
-        }
-        if (isInsideListItem($from)) {
-          return false;
-        }
-
-        return this.editor
-          .chain()
-          .focus()
-          .setNode('paragraph') // current div becomes <p>
-          .splitBlock() // create another <p>
-          .run();
-      },
-
-      // When the cursor is in a div and the user presses Backspace,
-      // ProseMirror's default handler may try to join/delete the block node
-      // once it becomes empty. That triggers the Enter shortcut above
-      // (div → p conversion + split), making it look like a new line is
-      // inserted instead of deleting.
-      // We handle two cases explicitly:
-      //  1. The div already IS empty → swallow the event (nothing to delete).
-      //  2. The div has exactly ONE character left → delete just that character
-      //     using a precise transaction, then stop. This prevents ProseMirror
-      //     from following up with a block-join that triggers the Enter handler.
-      Backspace: () => {
-        const { state } = this.editor;
-        const { $from, empty: selectionEmpty } = state.selection;
-
-        if ($from.parent.type.name !== 'div') {
-          return false;
-        }
-
-        if (!selectionEmpty) {
-          return false;
-        }
-
-        const parentText = $from.parent.textContent;
-
-        if (parentText.length === 0) {
-          return state.doc.childCount === 1 ? true : false;
-        }
-
-        if (parentText.length === 1 && $from.parentOffset === 1) {
-          const { tr } = state;
-          tr.delete($from.pos - 1, $from.pos);
-          this.editor.view.dispatch(tr);
-          return true;
-        }
-
-        return false;
-      },
-    };
-  },
-});