@pie-element/ebsr 6.6.2 → 6.6.3-next.1008

package/configure/node_modules/@pie-lib/editable-html/src/plugins/respArea/inline-dropdown/index.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Chevron } from '../icons';
+
+const InlineDropdown = ({ attributes, selectedItem }) => {
+  // TODO: Investigate
+  // Needed because items with values inside have different positioning for some reason
+  const html = selectedItem || '<div>&nbsp</div>';
+
+  return (
+    <span
+      {...attributes}
+      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',
+          position: 'relative'
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            padding: '0 25px 0 8px',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            lineHeight: '35px'
+          }}
+          dangerouslySetInnerHTML={{
+            __html: html
+          }}
+        />
+        <Chevron
+          direction="down"
+          style={{
+            position: 'absolute',
+            top: '5px',
+            right: '5px'
+          }}
+        />
+      </div>
+    </span>
+  );
+};
+
+InlineDropdown.propTypes = {
+  attributes: PropTypes.object,
+  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+};
+
+export default InlineDropdown;

package/configure/node_modules/@pie-lib/editable-html/src/plugins/respArea/utils.jsx

@@ -0,0 +1,77 @@
+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-lib/editable-html/src/plugins/table/icons/index.jsx

@@ -0,0 +1,59 @@
+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-lib/editable-html/src/plugins/table/index.jsx

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