@pie-element/ebsr 9.12.1 → 9.12.2-next.19

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/respArea/utils.jsx

@@ -0,0 +1,79 @@
+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 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 'drag-in-the-blank':
+      return defaultDIB(opts, index);
+
+    default:
+      // inline-dropdown
+      return defaultIDD(index);
+  }
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/table/icons/index.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = {
+  icon: {
+    fill: 'grey',
+    '&:hover': {
+      fill: 'black',
+    },
+  },
+};
+
+const SvgIcon = (Component) => {
+  return withStyles(styles)((props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
+      <Component className={props.classes.icon} />
+    </svg>
+  ));
+};
+export const AddRow = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M22,10A2,2 0 0,1 20,12H4A2,2 0 0,1 2,10V3H4V5H8V3H10V5H14V3H16V5H20V3H22V10M4,10H8V7H4V10M10,10H14V7H10V10M20,10V7H16V10H20M11,14H13V17H16V19H13V22H11V19H8V17H11V14Z"
+  />
+));
+
+export const RemoveRow = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M9.41,13L12,15.59L14.59,13L16,14.41L13.41,17L16,19.59L14.59,21L12,18.41L9.41,21L8,19.59L10.59,17L8,14.41L9.41,13M22,9A2,2 0 0,1 20,11H4A2,2 0 0,1 2,9V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V9M4,9H8V6H4V9M10,9H14V6H10V9M16,9H20V6H16V9Z"
+  />
+));
+
+export const AddColumn = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M11,2A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H2V2H11M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M15,11H18V8H20V11H23V13H20V16H18V13H15V11Z"
+  />
+));
+
+export const RemoveColumn = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M4,2H11A2,2 0 0,1 13,4V20A2,2 0 0,1 11,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2M4,10V14H11V10H4M4,16V20H11V16H4M4,4V8H11V4H4M17.59,12L15,9.41L16.41,8L19,10.59L21.59,8L23,9.41L20.41,12L23,14.59L21.59,16L19,13.41L16.41,16L15,14.59L17.59,12Z"
+  />
+));
+
+export const RemoveTable = SvgIcon((props) => (
+  <path
+    {...props}
+    d="M15.46,15.88L16.88,14.46L19,16.59L21.12,14.46L22.54,15.88L20.41,18L22.54,20.12L21.12,21.54L19,19.41L16.88,21.54L15.46,20.12L17.59,18L15.46,15.88M4,3H18A2,2 0 0,1 20,5V12.08C18.45,11.82 16.92,12.18 15.68,13H12V17H13.08C12.97,17.68 12.97,18.35 13.08,19H4A2,2 0 0,1 2,17V5A2,2 0 0,1 4,3M4,7V11H10V7H4M12,7V11H18V7H12M4,13V17H10V13H4Z"
+  />
+));

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/table/index.jsx

@@ -0,0 +1,440 @@
+import React from 'react';
+import EditTable from 'slate-edit-table';
+import { Block } from 'slate';
+import debug from 'debug';
+import GridOn from '@material-ui/icons/GridOn';
+import TableToolbar from './table-toolbar';
+import PropTypes from 'prop-types';
+import SlatePropTypes from 'slate-prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import convert from 'react-attr-converter';
+import { object as toStyleObject } from 'to-style';
+
+const log = debug('@pie-lib:editable-html:plugins:table');
+
+const Table = withStyles(() => ({
+  table: {},
+}))((props) => {
+  const nodeAttributes = dataToAttributes(props.node.data);
+
+  return (
+    <table
+      className={props.classes.table}
+      {...props.attributes}
+      {...nodeAttributes}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+    >
+      <tbody>{props.children}</tbody>
+    </table>
+  );
+});
+
+Table.propTypes = {
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  node: SlatePropTypes.node,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+const TableRow = (props) => <tr {...props.attributes}>{props.children}</tr>;
+
+TableRow.propTypes = {
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+const TableCell = withStyles(() => ({
+  td: {
+    minWidth: '25px',
+  },
+}))((props) => {
+  const Tag = props.node.data.get('header') ? 'th' : 'td';
+
+  const nodeAttributes = dataToAttributes(props.node.data);
+  delete nodeAttributes.header;
+
+  return (
+    <Tag
+      {...props.attributes}
+      {...nodeAttributes}
+      colSpan={props.node.data.get('colspan')}
+      className={props.classes[Tag]}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+    >
+      {props.children}
+    </Tag>
+  );
+});
+
+TableCell.propTypes = {
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export const moveFocusToBeginningOfTable = (change) => {
+  const addedTable = change.value.document.findDescendant((d) => !!d.data && !!d.data.get('newTable'));
+
+  if (!addedTable) {
+    return;
+  }
+
+  change.collapseToStartOf(addedTable);
+
+  const update = addedTable.data.remove('newTable');
+
+  change.setNodeByKey(addedTable.key, { data: update });
+};
+
+export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
+  const core = EditTable({
+    typeContent: 'div',
+  });
+
+  // fix outdated schema
+
+  if (core.schema && core.schema.blocks) {
+    Object.keys(core.schema.blocks).forEach((key) => {
+      const block = core.schema.blocks[key];
+
+      if (block.parent) {
+        if (block.nodes[0].types) {
+          block.nodes[0] = {
+            type: block.nodes[0].types[0],
+          };
+        }
+
+        if (block.nodes[0].objects) {
+          block.nodes[0] = {
+            object: block.nodes[0].objects[0],
+          };
+        }
+
+        block.parent = {
+          type: block.parent.types[0],
+        };
+      } else {
+        block.nodes[0] = { type: block.nodes[0].types[0] };
+      }
+    });
+  }
+
+  core.utils.getTableBlock = (containerNode, key) => {
+    const node = containerNode.getDescendant(key);
+    const ancestors = containerNode.getAncestors(key).push(node);
+    return ancestors.findLast((p) => p.type === 'table');
+  };
+
+  core.utils.createTableWithOptions = (row, columns, extra) => {
+    const createdTable = core.utils.createTable(row, columns);
+    const newTable = Block.create({
+      ...createdTable.toJSON(),
+      ...extra,
+    });
+
+    return newTable;
+  };
+
+  core.toolbar = {
+    icon: <GridOn />,
+    onClick: (value, onChange) => {
+      log('insert table');
+      const change = value.change();
+      const newTable = core.utils.createTableWithOptions(2, 2, {
+        data: {
+          border: '1',
+          newTable: true,
+        },
+      });
+
+      change.insertBlock(newTable);
+
+      moveFocusToBeginningOfTable(change);
+      onChange(change);
+    },
+    supports: (node, value) => node && node.object === 'block' && core.utils.isSelectionInTable(value),
+    /**
+     * Note - the node may not be a table node - it may be a node inside a table.
+     */
+    customToolbar: (node, value, onToolbarDone) => {
+      log('[customToolbar] node.data: ', node.data);
+
+      const tableBlock = core.utils.getTableBlock(value.document, node?.key);
+      log('[customToolbar] tableBlock: ', tableBlock);
+
+      const hasBorder = () => tableBlock.data.get('border') && tableBlock.data.get('border') !== '0';
+      const addRow = () => {
+        const change = core.changes.insertRow(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const addColumn = () => {
+        const change = core.changes.insertColumn(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const removeRow = () => {
+        const change = core.changes.removeRow(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const removeColumn = () => {
+        const change = core.changes.removeColumn(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const removeTable = () => {
+        const change = core.changes.removeTable(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const toggleBorder = () => {
+        const { data } = tableBlock;
+        const update = data.set('border', hasBorder() ? '0' : '1');
+        log('[toggleBorder] update: ', update);
+        const change = value.change().setNodeByKey(tableBlock.key, { data: update });
+        onToolbarDone(change, false);
+      };
+
+      const onDone = () => {
+        log('[onDone] call onToolbarDone...');
+        onToolbarDone(null, true);
+      };
+
+      const Tb = () => (
+        <TableToolbar
+          plugins={toolbarPlugins}
+          onChange={(c) => onToolbarDone(c, false)}
+          value={value}
+          onAddRow={addRow}
+          onRemoveRow={removeRow}
+          onAddColumn={addColumn}
+          onRemoveColumn={removeColumn}
+          onRemoveTable={removeTable}
+          hasBorder={hasBorder()}
+          onToggleBorder={toggleBorder}
+          onDone={onDone}
+        />
+      );
+      return Tb;
+    },
+  };
+
+  const Node = (props) => {
+    switch (props.node.type) {
+      case 'table':
+        return <Table {...props} onFocus={opts.onFocus} onBlur={opts.onBlur} />;
+      case 'table_row':
+        return <TableRow {...props} />;
+      case 'table_cell':
+        return <TableCell {...props} onFocus={opts.onFocus} onBlur={opts.onBlur} />;
+      default:
+        return null;
+    }
+  };
+  Node.propTypes = {
+    node: PropTypes.object,
+  };
+
+  core.normalizeNode = (node) => {
+    if (node.object !== 'document') {
+      return;
+    }
+
+    const tableAdded = node.findDescendant((d) => d.data && d.data.get('newTable'));
+
+    if (!tableAdded) {
+      return;
+    }
+
+    const nodeToSearch = node.getParent(tableAdded.key) || node;
+    let shouldAddTextAfterNode = false;
+    const indexToNotHaveTableOn = nodeToSearch.nodes.size - 1;
+    const indexOfLastTable = nodeToSearch.nodes.findLastIndex((d) => d.type === 'table');
+
+    // if the last table in the document is of type table, we need to do the change
+    if (indexOfLastTable === indexToNotHaveTableOn) {
+      shouldAddTextAfterNode = true;
+    }
+
+    if (!shouldAddTextAfterNode) {
+      return;
+    }
+
+    return (change) => {
+      if (shouldAddTextAfterNode) {
+        const tableJSON = tableAdded.toJSON();
+
+        // we remove the table node because otherwise we can't add the empty block after it
+        // we need a block that contains text in order to do it
+        change.removeNodeByKey(tableAdded.key);
+
+        const newBlock = Block.create({
+          object: 'block',
+          type: 'div',
+        });
+
+        // we add an empty block but that it's going to be normalized
+        // because it will add the empty text to it like it should
+        change.insertBlock(newBlock);
+
+        change.withoutNormalization(() => {
+          // we do these changes without normalization
+
+          // we get the text previous to the new block added
+          const prevText = change.value.document.getPreviousText(newBlock.key);
+
+          if (prevText) {
+            // we move focus to the previous text
+            change.moveFocusTo(prevText.key, prevText.text?.length).moveAnchorTo(prevText.key, prevText.text?.length);
+          }
+
+          // we insert the table block between the first block with text and the last block with text
+          change.insertBlock({
+            ...tableJSON,
+            data: {
+              ...tableJSON.data,
+              newTable: true,
+            },
+          });
+
+          moveFocusToBeginningOfTable(change);
+        });
+      }
+    };
+  };
+
+  core.renderNode = Node;
+
+  return core;
+};
+
+export const parseStyleString = (s) => {
+  const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+  let match;
+  const result = {};
+  while ((match = regex.exec(s))) {
+    result[match[1]] = match[2].trim();
+  }
+  return result;
+};
+
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
+
+const attributesToMap = (el) => (acc, attribute) => {
+  const value = el.getAttribute(attribute);
+  if (value) {
+    if (attribute === 'style') {
+      const styleString = el.getAttribute(attribute);
+      const reactStyleObject = reactAttributes(parseStyleString(styleString));
+      acc['style'] = reactStyleObject;
+    } else {
+      acc[attribute] = el.getAttribute(attribute);
+    }
+  }
+  return acc;
+};
+
+const dataToAttributes = (data) => {
+  if (!data || !data.get) {
+    return {};
+  }
+
+  return data.reduce((acc, v, name) => {
+    if (v) {
+      acc[convert(name)] = v;
+    }
+    return acc;
+  }, {});
+};
+
+const attributes = ['border', 'cellpadding', 'cellspacing', 'class', 'style'];
+
+const cellAttributes = ['colspan', 'rowspan', 'class', 'style'];
+
+export const serialization = {
+  deserialize(el, next) {
+    const tag = el.tagName.toLowerCase();
+
+    switch (tag) {
+      case 'table': {
+        const children =
+          el.children.length === 1 && el.children[0].tagName.toLowerCase() === 'tbody'
+            ? el.children[0].children
+            : el.children;
+        const c = Array.from(children);
+
+        return {
+          object: 'block',
+          type: 'table',
+          nodes: next(c),
+          data: attributes.reduce(attributesToMap(el), {}),
+        };
+      }
+
+      case 'th': {
+        return {
+          object: 'block',
+          type: 'table_cell',
+          nodes: next(el.childNodes),
+          data: cellAttributes.reduce(attributesToMap(el), { header: true }),
+        };
+      }
+
+      case 'tr': {
+        return {
+          object: 'block',
+          type: 'table_row',
+          nodes: next(Array.from(el.children)),
+        };
+      }
+
+      case 'td': {
+        return {
+          object: 'block',
+          type: 'table_cell',
+          nodes: next(Array.from(el.childNodes)),
+          data: cellAttributes.reduce(attributesToMap(el), { header: false }),
+        };
+      }
+    }
+  },
+  serialize(object, children) {
+    if (object.object !== 'block') {
+      return;
+    }
+
+    switch (object.type) {
+      case 'table': {
+        const attributes = dataToAttributes(object.data);
+
+        return (
+          <table {...attributes}>
+            <tbody>{children}</tbody>
+          </table>
+        );
+      }
+
+      case 'table_row': {
+        return <tr>{children}</tr>;
+      }
+
+      case 'table_cell': {
+        const attributes = dataToAttributes(object.data);
+        delete attributes.header;
+
+        if (object.data.get('header')) {
+          return <th {...attributes}>{children}</th>;
+        } else {
+          return <td {...attributes}>{children}</td>;
+        }
+      }
+    }
+  },
+};

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/table/table-toolbar.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { Button } from '../toolbar/toolbar-buttons';
+import { DoneButton } from '../toolbar/done-button';
+import BorderAll from '@material-ui/icons/BorderAll';
+import { ToolbarButton } from '../toolbar/default-toolbar';
+
+import { AddRow, AddColumn, RemoveColumn, RemoveRow, RemoveTable } from './icons';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins:table-toolbar');
+
+export class TableToolbar extends React.Component {
+  static propTypes = {
+    plugins: PropTypes.array.isRequired,
+    value: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onAddRow: PropTypes.func.isRequired,
+    onRemoveRow: PropTypes.func.isRequired,
+    onAddColumn: PropTypes.func.isRequired,
+    onRemoveColumn: PropTypes.func.isRequired,
+    onRemoveTable: PropTypes.func.isRequired,
+    onToggleBorder: PropTypes.func.isRequired,
+    hasBorder: PropTypes.bool,
+    onDone: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    plugins: [],
+    value: {},
+    onChange: () => {},
+  };
+
+  onDone = (e) => {
+    const { onDone } = this.props;
+    e.preventDefault();
+    onDone();
+  };
+
+  render() {
+    const {
+      plugins,
+      value,
+      onChange,
+      onAddRow,
+      onRemoveRow,
+      onAddColumn,
+      onRemoveColumn,
+      onRemoveTable,
+      onToggleBorder,
+      hasBorder,
+      classes,
+    } = this.props;
+    log('[render] hasBorder:', hasBorder);
+
+    return (
+      <div className={classes.tableToolbar}>
+        <div className={classes.toolbarButtons}>
+          <Button onClick={onAddRow}>
+            <AddRow />
+          </Button>
+          <Button onClick={onRemoveRow}>
+            <RemoveRow />
+          </Button>
+          <Button onClick={onAddColumn}>
+            <AddColumn />
+          </Button>
+          <Button onClick={onRemoveColumn}>
+            <RemoveColumn />
+          </Button>
+          <Button onClick={onRemoveTable}>
+            <RemoveTable />
+          </Button>
+          {plugins.map((p, index) => (
+            <ToolbarButton key={`plugin-${index}`} {...p.toolbar} value={value} onChange={onChange} />
+          ))}
+          <Button onClick={onToggleBorder} active={hasBorder}>
+            <BorderAll />
+          </Button>
+        </div>
+        <DoneButton onClick={this.onDone} />
+      </div>
+    );
+  }
+}
+
+const styles = () => ({
+  tableToolbar: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  toolbarButtons: {
+    display: 'flex',
+  },
+});
+export default withStyles(styles)(TableToolbar);