@pie-element/ebsr 6.6.3-next.414 → 6.6.3-next.430

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

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

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

@@ -1,390 +0,0 @@
-import React from 'react';
-import EditTable from 'slate-edit-table';
-import { Block, Inline } 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 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.toolbar = {
-    icon: <GridOn />,
-    onClick: (value, onChange) => {
-      log('insert table');
-      const c = core.changes.insertTable(value.change(), 2, 2);
-      onChange(c);
-    },
-    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;
-    }
-
-    let shouldAddTextAfterNode = false;
-    const indexToNotHaveTableOn = node.nodes.size - 1;
-    const indexOfLastTable = node.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;
-    }
-
-    const tableNode = node.nodes.get(indexOfLastTable);
-
-    return change => {
-      if (shouldAddTextAfterNode) {
-        const tableJSON = tableNode.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(tableNode.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);
-        });
-      }
-    };
-  };
-
-  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 });
-
-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-lib/editable-html/src/plugins/table/table-toolbar.jsx

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