@pie-lib/editable-html-tip-tap 0.1.0

package/src/components/respArea/MathTemplated.tsx

@@ -0,0 +1,134 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/MathTemplated.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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: any = 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: any = 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: any = 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.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/ToolbarIcon.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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: any = 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/constants.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/constants.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+export const PIE_TOOLBAR__CLASS = 'pie-toolbar';
+
+export default {
+  PIE_TOOLBAR__CLASS,
+};

package/src/extensions/css.tsx

@@ -0,0 +1,230 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/css.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+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
+    return [
+      {
+        tag: 'span[class]',
+        getAttrs: (el) => {
+          const cls = el.getAttribute('class') || '';
+          const match = this.options.classes.find((name) => cls.includes(name));
+          return match ? { class: match } : false;
+        },
+      },
+    ];
+  },
+
+  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.tsx

@@ -0,0 +1,88 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/custom-toolbar-wrapper.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Delete from '@mui/icons-material/Delete';
+import { PIE_TOOLBAR__CLASS } from '../constants.js';
+import { styled } from '@mui/material/styles';
+import { DoneButton } from '../components/common/done-button.js';
+
+const StyledToolbar: any = 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: any = styled(IconButton)({
+  width: '28px',
+  height: '28px',
+  padding: '4px',
+  verticalAlign: 'top',
+});
+
+const SharedContainer: any = styled('div')({
+  display: 'flex',
+});
+
+function CustomToolbarWrapper(props) {
+  const { children, deletable, toolbarOpts, autoWidth, isFocused, doneButtonRef, onDelete, showDone, onDone } = 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 }}
+    >
+      {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.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/div-node.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+// 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() {
+    return {
+      Enter: () => {
+        const { state } = this.editor;
+        const { $from } = state.selection;
+
+        if ($from.parent.type.name !== 'div') {
+          return false;
+        }
+
+        return this.editor
+          .chain()
+          .focus()
+          .setNode('paragraph') // current div becomes <p>
+          .splitBlock() // create another <p>
+          .run();
+      },
+    };
+  },
+});

package/src/extensions/extended-table.ts

@@ -0,0 +1,34 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/extensions/extended-table.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { Table } from '@tiptap/extension-table';
+
+const ExtendedTable = Table.extend({
+  addAttributes() {
+    return {
+      border: { default: '1' },
+    };
+  },
+  renderHTML(props) {
+    const originalTable = this.parent(props);
+    const { border } = props.HTMLAttributes;
+
+    const previousStyle = `${originalTable[1].style}${originalTable[1].style.match(/.*; */) ? '' : ';'}`;
+
+    originalTable[1].style = `${previousStyle}
+    color: var(--pie-text, black);
+    background-color: var(--pie-background, rgba(255, 255, 255))`;
+    originalTable[1].border = border ? border : '1';
+
+    return originalTable;
+  },
+});
+
+export default ExtendedTable;