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

package/src/plugins/respArea/index.jsx

@@ -0,0 +1,299 @@
+import React from 'react';
+import debug from 'debug';
+import isUndefined from 'lodash/isUndefined';
+
+import InlineDropdown from './inline-dropdown';
+import DragInTheBlank from './drag-in-the-blank';
+import ExplicitConstructedResponse from './explicit-constructed-response';
+import MathTemplated from './math-templated';
+import { getDefaultElement } from './utils';
+import { ToolbarIcon } from './icons';
+
+const log = debug('@pie-lib:editable-html:plugins:respArea');
+
+const lastIndexMap = {};
+const elTypesMap = {
+  'inline-dropdown': 'inline_dropdown',
+  'explicit-constructed-response': 'explicit_constructed_response',
+  'math-templated': 'math_templated',
+  'drag-in-the-blank': 'drag_in_the_blank',
+};
+const elTypesArray = Object.values(elTypesMap);
+
+export default function ResponseAreaPlugin(opts) {
+  const isOfCurrentType = (d) => d.type === opts.type || d.type === elTypesMap[opts.type];
+
+  const toolbar = {
+    icon: <ToolbarIcon />,
+    buttonStyles: {
+      margin: '0 20px 0 auto',
+    },
+    onClick: (value, onChange) => {
+      log('[toolbar] onClick');
+      const change = value.change();
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+
+      if (currentRespAreaList.size >= opts.maxResponseAreas) {
+        return;
+      }
+
+      const type = opts.type.replace(/-/g, '_');
+      const prevIndex = lastIndexMap[type];
+      const newIndex = prevIndex === 0 ? prevIndex : prevIndex + 1;
+      const newInline = getDefaultElement(opts, newIndex);
+
+      lastIndexMap[type] += 1;
+
+      if (newInline) {
+        if (change.value.selection.startKey || change.value.selection.endKey) {
+          change.insertInline(newInline);
+        } else {
+          // If the markup is empty and there's no focus
+          const lastText = value.document.getLastText();
+
+          if (!lastText) {
+            return;
+          }
+          const parentNode = value.document.getParent(lastText.key);
+
+          if (parentNode) {
+            const index = parentNode.nodes.indexOf(lastText.key);
+
+            if (parentNode.isVoid) return;
+
+            change.insertNodeByKey(parentNode.key, index + 1, newInline);
+          }
+        }
+
+        if (newInline.type === 'drag_in_the_blank') {
+          const nextText = change.value.document.getNextText(newInline.key);
+
+          if (nextText) {
+            change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
+          }
+        }
+        if (newInline.type === 'math_templated') {
+          const nextText = change.value.document.getNextText(newInline.key);
+
+          if (nextText) {
+            change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
+          }
+        }
+
+        onChange(change);
+      }
+    },
+    customToolbar: opts.respAreaToolbar,
+    supports: (node) => node.object === 'inline' && elTypesArray.indexOf(node.type) >= 0,
+    showDone: false,
+  };
+
+  return {
+    name: 'response_area',
+    toolbar,
+    filterPlugins: (node, plugins) => {
+      if (
+        node.type === 'explicit_constructed_response' ||
+        node.type === 'math_templated' ||
+        node.type === 'drag_in_the_blank'
+      ) {
+        return [];
+      }
+
+      return plugins.filter((p) => p.name !== 'response_area');
+    },
+    deleteNode: (e, node, value, onChange) => {
+      e.preventDefault();
+
+      const change = value.change().removeNodeByKey(node.key);
+
+      onChange(change);
+    },
+    renderNode(props) {
+      const { attributes, node: n, isFocused } = props;
+
+      if (n.type === 'explicit_constructed_response') {
+        const data = n.data.toJSON();
+        let error;
+
+        if (opts.error) {
+          error = opts.error();
+        }
+
+        return (
+          <ExplicitConstructedResponse
+            attributes={attributes}
+            isFocused={isFocused}
+            value={data.value}
+            error={error && error[data.index] && error[data.index][0]}
+          />
+        );
+      }
+
+      if (n.type === 'math_templated') {
+        const data = n.data.toJSON();
+        let error;
+
+        if (opts.error) {
+          error = opts.error();
+        }
+
+        // add 1 to index to display R 1 instead of R 0
+        const keyToDisplay = `R ${parseInt(data.index) + 1}`;
+
+        return (
+          <MathTemplated
+            attributes={attributes}
+            keyToDisplay={keyToDisplay}
+            value={data.value || ''}
+            error={error && error[data.index] && error[data.index][0]}
+          />
+        );
+      }
+
+      if (n.type === 'drag_in_the_blank') {
+        const data = n.data.toJSON();
+
+        return <DragInTheBlank attributes={attributes} data={data} n={n} nodeProps={props} opts={opts} />;
+      }
+
+      if (n.type === 'inline_dropdown') {
+        const data = n.data.toJSON();
+
+        return <InlineDropdown attributes={attributes} selectedItem={data.value} />;
+      }
+    },
+    onChange(change, editor) {
+      const type = opts.type.replace(/-/g, '_');
+
+      if (isUndefined(lastIndexMap[type])) {
+        lastIndexMap[type] = 0;
+
+        change.value.document.forEachDescendant((d) => {
+          if (d.type === type) {
+            const newIndex = parseInt(d.data.get('index'), 10);
+
+            if (newIndex > lastIndexMap[type]) {
+              lastIndexMap[type] = newIndex;
+            }
+          }
+        });
+      }
+
+      if (!editor.value) {
+        return;
+      }
+
+      const currentRespAreaList = change.value.document.filterDescendants(isOfCurrentType);
+      const oldRespAreaList = editor.value.document.filterDescendants(isOfCurrentType);
+
+      toolbar.disabled = currentRespAreaList.size >= opts.maxResponseAreas;
+
+      const arrayToFilter = oldRespAreaList.size > currentRespAreaList.size ? oldRespAreaList : currentRespAreaList;
+      const arrayToUseForFilter = arrayToFilter === oldRespAreaList ? currentRespAreaList : oldRespAreaList;
+
+      const elementsWithChangedStatus = arrayToFilter.filter(
+        (d) => !arrayToUseForFilter.find((e) => e.data.get('index') === d.data.get('index')),
+      );
+
+      if (elementsWithChangedStatus.size && oldRespAreaList.size > currentRespAreaList.size) {
+        opts.onHandleAreaChange(elementsWithChangedStatus);
+      }
+    },
+    onDrop(event, change, editor) {
+      const closestEl = event.target.closest('[data-key]');
+      const inline = editor.value.document.findDescendant((d) => d.key === closestEl.dataset.key);
+
+      if (inline.type === 'drag_in_the_blank') {
+        return false;
+      }
+    },
+  };
+}
+
+export const serialization = {
+  deserialize(el) {
+    const type = el.dataset && el.dataset.type;
+
+    switch (type) {
+      case 'inline_dropdown':
+        return {
+          object: 'inline',
+          type: 'inline_dropdown',
+          isVoid: true,
+          data: {
+            index: el.dataset.index,
+            value: el.dataset.value,
+          },
+        };
+      case 'explicit_constructed_response':
+        return {
+          object: 'inline',
+          type: 'explicit_constructed_response',
+          isVoid: true,
+          data: {
+            index: el.dataset.index,
+            value: el.dataset.value,
+          },
+        };
+      case 'math_templated':
+        return {
+          object: 'inline',
+          type: 'math_templated',
+          isVoid: true,
+          data: {
+            index: el.dataset.index,
+            value: el.dataset.value,
+          },
+        };
+      case 'drag_in_the_blank':
+        return {
+          object: 'inline',
+          type: 'drag_in_the_blank',
+          isVoid: true,
+          data: {
+            index: el.dataset.index,
+            id: el.dataset.id,
+            value: el.dataset.value,
+            inTable: el.dataset.inTable,
+          },
+        };
+    }
+  },
+  serialize(object) {
+    if (object.object !== 'inline') {
+      return;
+    }
+
+    switch (object.type) {
+      case 'inline_dropdown': {
+        const data = object.data.toJSON();
+
+        return <span data-type="inline_dropdown" data-index={data.index} data-value={data.value} />;
+      }
+      case 'explicit_constructed_response': {
+        const data = object.data.toJSON();
+
+        return <span data-type="explicit_constructed_response" data-index={data.index} data-value={data.value} />;
+      }
+      case 'math_templated': {
+        const data = object.data.toJSON();
+
+        return <span data-type="math_templated" data-index={data.index} data-value={data.value} />;
+      }
+      case 'drag_in_the_blank': {
+        const data = object.data.toJSON();
+
+        return (
+          <span
+            data-type="drag_in_the_blank"
+            data-index={data.index}
+            data-id={data.id}
+            data-value={data.value}
+            data-in-table={data.inTable}
+          />
+        );
+      }
+    }
+  },
+};

package/src/plugins/respArea/inline-dropdown/index.jsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, useState } from "react";
+import PropTypes from 'prop-types';
+import { NodeViewWrapper } from '@tiptap/react';
+import { Chevron } from '../icons';
+
+const InlineDropdown = (props) => {
+  const { editor, node, getPos, options, selected } = props;
+  const { attrs: attributes } = node;
+  const { value, error } = attributes;
+  // TODO: Investigate
+  // Needed because items with values inside have different positioning for some reason
+  const html = value || '<div>&nbsp</div>';
+  const toolbarRef = useRef(null);
+  const [showToolbar, setShowToolbar] = useState(false);
+  const InlineDropdownToolbar = options.respAreaToolbar(node, editor, () => {});
+
+  useEffect(() => {
+    setShowToolbar(selected);
+  }, [selected]);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        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="inline-dropdown"
+      data-selected={selected}
+      style={{
+        display: 'inline-flex',
+        height: '50px',
+        margin: '0 5px',
+        cursor: 'pointer',
+      }}
+    >
+      <div
+        style={{
+          display: 'inline-flex',
+          minWidth: '178px',
+          height: '36px',
+          background: '#FFF',
+          border: '1px solid #C0C3CF',
+          boxSizing: 'border-box',
+          borderRadius: '3px',
+          margin: '0 4px',
+          position: 'relative',
+          alignItems: 'center',
+        }}
+      >
+        <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 && (
+        <div ref={toolbarRef} className="absolute z-50 bg-white shadow-lg rounded p-2" style={{ zIndex: 1 }}>
+          <InlineDropdownToolbar />
+        </div>
+      )}
+    </NodeViewWrapper>
+  );
+};
+
+InlineDropdown.propTypes = {
+  attributes: PropTypes.object,
+  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+};
+
+export default InlineDropdown;

package/src/plugins/respArea/math-templated/index.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { mq } from '@pie-lib/math-input';
+
+const MathTemplated = ({ attributes, value, classes, keyToDisplay }) => (
+  <span {...attributes} className={classes.spanContainer}>
+    <div className={classes.responseBox}>{keyToDisplay}</div>
+    <div className={classes.mathBlock}>
+      <mq.Static latex={value} />
+    </div>
+  </span>
+);
+
+MathTemplated.propTypes = {
+  attributes: PropTypes.object,
+  classes: PropTypes.object.isRequired,
+  value: PropTypes.string,
+  keyToDisplay: PropTypes.string,
+};
+
+const styles = (theme) => ({
+  responseBox: {
+    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',
+  },
+  spanContainer: {
+    display: 'inline-flex',
+    border: '1px solid #C0C3CF',
+    margin: '1px 5px',
+    cursor: 'pointer',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '50px',
+    minHeight: '36px',
+    height: 'fit-content',
+  },
+  mathBlock: {
+    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',
+    },
+  },
+});
+
+export default withStyles(styles)(MathTemplated);

package/src/plugins/respArea/utils.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Inline } from 'slate';
+import Snackbar from '@material-ui/core/Snackbar';
+
+export const isNumber = (val) => !isNaN(parseFloat(val)) && isFinite(val);
+
+export const insertSnackBar = (message) => {
+  const prevSnacks = document.querySelectorAll('.response-area-alert');
+
+  prevSnacks.forEach((s) => s.remove());
+
+  const newEl = document.createElement('div');
+
+  newEl.className = 'response-area-alert';
+
+  const el = (
+    <Snackbar
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      open={true}
+      ContentProps={{
+        'aria-describedby': 'message-id',
+      }}
+      message={<span id="message-id">{message}</span>}
+    />
+  );
+
+  ReactDOM.render(el, newEl);
+
+  document.body.appendChild(newEl);
+
+  setTimeout(() => {
+    newEl.remove();
+  }, 2000);
+};
+
+export const defaultECR = (index) =>
+  Inline.create({
+    type: 'explicit_constructed_response',
+    isVoid: true,
+    data: {
+      index,
+    },
+  });
+export const defaultMT = (index) =>
+  Inline.create({
+    type: 'math_templated',
+    isVoid: true,
+    data: {
+      index,
+    },
+  });
+
+export const defaultDIB = (opts, index) =>
+  Inline.create({
+    type: 'drag_in_the_blank',
+    isVoid: true,
+    data: {
+      index,
+      duplicates: opts.options.duplicates,
+      value: null,
+    },
+  });
+
+export const defaultIDD = (index) =>
+  Inline.create({
+    object: 'inline',
+    type: 'inline_dropdown',
+    isVoid: true,
+    data: {
+      index,
+    },
+  });
+
+export const getDefaultElement = (opts, index) => {
+  switch (opts.type) {
+    case 'explicit-constructed-response':
+      return defaultECR(index);
+
+    case 'math-templated':
+      return defaultMT(index);
+
+    case 'drag-in-the-blank':
+      return defaultDIB(opts, index);
+
+    default:
+      // inline-dropdown
+      return defaultIDD(index);
+  }
+};

package/src/plugins/table/CustomTablePlugin.js

@@ -0,0 +1,113 @@
+import EditTable from 'slate-edit-table';
+import { isSelectionInTable } from 'slate-edit-table/dist/utils';
+import { onEnter, onModEnter, onTab, onUpDown } from 'slate-edit-table/dist/handlers';
+import TableOptions from 'slate-edit-table/dist/options';
+import { clearCell } from 'slate-edit-table/dist/changes';
+
+function onBackspace(event, change, editor, opts) {
+  const { value } = change;
+  const { startBlock, endBlock, selection, document } = value;
+
+  const startCell = document.getClosest(startBlock.key, opts.isCell);
+  const endCell = document.getClosest(endBlock.key, opts.isCell);
+
+  const startBlockIndex = startCell?.nodes?.findIndex((block) => block.key == startBlock.key);
+
+  // If a cursor is collapsed at the start of the first block, do nothing
+  if (startBlockIndex === 0 && selection.isAtStartOf(startBlock)) {
+    if (startBlock.isVoid) {
+      // Delete the block normally if it is a void block
+      return undefined;
+    }
+
+    event.preventDefault();
+    return change;
+  }
+
+  // If "normal" deletion, we continue
+  if (startCell === endCell) {
+    return undefined;
+  }
+
+  // If cursor is between multiple blocks,
+  // we clear the content of the cells.
+  event.preventDefault();
+
+  const { blocks } = value;
+
+  // Get all cells that contains the selection
+  const cells = blocks
+    .map((node) =>
+      node.type === opts.typeCell ? node : document.getClosest(node.key, (a) => a.type === opts.typeCell),
+    )
+    .toSet();
+
+  // If the cursor is at the very end of the first cell, ignore it.
+  // If the cursor is at the very start of the last cell, ignore it.
+  // This behavior is to compensate hanging selection behaviors:
+  // https://github.com/ianstormtaylor/slate/pull/1605
+  const ignoreFirstCell = value.selection.collapseToStart().isAtEndOf(cells.first());
+  const ignoreLastCell = value.selection.collapseToEnd().isAtStartOf(cells.last());
+
+  let cellsToClear = cells;
+  if (ignoreFirstCell) {
+    cellsToClear = cellsToClear.rest();
+  }
+  if (ignoreLastCell) {
+    cellsToClear = cellsToClear.butLast();
+  }
+
+  // Clear all the selection
+  cellsToClear.forEach((cell) => clearCell(opts, change, cell));
+
+  // Update the selection properly, and avoid reset of selection
+  const updatedStartCell = change.value.document.getDescendant(cellsToClear.first().key);
+  return change.collapseToStartOf(updatedStartCell);
+}
+
+const KEY_ENTER = 'Enter';
+const KEY_TAB = 'Tab';
+const KEY_BACKSPACE = 'Backspace';
+const KEY_DOWN = 'ArrowDown';
+const KEY_UP = 'ArrowUp';
+
+/**
+ * User is pressing a key in the editor
+ */
+function onKeyDown(opts, event, change, editor) {
+  // Only handle events in cells
+  if (!isSelectionInTable(opts, change.value)) {
+    return undefined;
+  }
+
+  // Build arguments list
+  const args = [event, change, editor, opts];
+
+  switch (event.key) {
+    case KEY_ENTER:
+      if (event.metaKey && opts.exitBlockType) {
+        return onModEnter(...args);
+      }
+      return onEnter(...args);
+
+    case KEY_TAB:
+      return onTab(...args);
+    case KEY_BACKSPACE:
+      return onBackspace(...args);
+    case KEY_DOWN:
+    case KEY_UP:
+      return onUpDown(...args);
+    default:
+      return undefined;
+  }
+}
+
+export default (opts) => {
+  const core = EditTable(opts);
+
+  const tableOpts = new TableOptions(opts);
+
+  core.onKeyDown = onKeyDown.bind(null, tableOpts);
+
+  return core;
+};