@pie-lib/editable-html-tip-tap 1.0.2 → 1.0.3

package/src/plugins/media/media-wrapper.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-const useStyles = withStyles(() => ({
-  root: {
-    position: 'relative',
-  },
-  editor: {
-    display: 'inline-block',
-    overflow: 'hidden',
-  },
-}));
-
-class MediaWrapper extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    children: PropTypes.array,
-    editor: PropTypes.bool,
-    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  };
-
-  render() {
-    const { editor, classes, children, width, ...rest } = this.props;
-
-    return (
-      <span
-        className={classNames(classes.root, {
-          [classes.editor]: editor,
-        })}
-        {...rest}
-        style={{
-          width: width || 300,
-        }}
-      >
-        {children}
-      </span>
-    );
-  }
-}
-
-export default useStyles(MediaWrapper);

package/src/plugins/rendering/index.js

@@ -1,31 +0,0 @@
-import React from 'react';
-
-/**
- * Plugin to render the normal divs and spans with attributes (if they are provided)
- */
-export default () => {
-  return {
-    name: 'renderingPlugin',
-    renderNode: (props) => {
-      const { attributes, children, node } = props;
-
-      if (node.object !== 'block' && node.object !== 'inline') {
-        return;
-      }
-
-      const Tag = node.object === 'block' ? 'div' : 'span';
-      const style = { position: 'relative' };
-      const extraAttributes = node.data.get('attributes');
-
-      return React.createElement(
-        Tag,
-        {
-          ...attributes,
-          ...extraAttributes,
-          style: style,
-        },
-        children,
-      );
-    },
-  };
-};

package/src/plugins/respArea/index.jsx

@@ -1,299 +0,0 @@
-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/math-templated/index.jsx

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

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

@@ -1,113 +0,0 @@
-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;
-};