@pie-element/ebsr 6.6.3-next.1097 → 6.6.3-next.1137

package/configure/node_modules/@pie-lib/editable-html/src/plugins/image/insert-image-handler.js

@@ -0,0 +1,93 @@
+import { Data } from 'slate';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:image:insert-image-handler');
+
+/**
+ * Handles user selection, insertion (or cancellation) of an image into the editor.
+ * @param {Block} placeholderBlock - a block that has been added to the editor as a place holder for the image
+ * @param {Function} getValue - a function to return the value of the editor
+ * @param {Function} onChange - callback to notify changes applied by the handler
+ */
+class InsertImageHandler {
+  constructor(placeholderBlock, getValue, onChange) {
+    this.placeholderBlock = placeholderBlock;
+    this.getValue = getValue;
+    this.onChange = onChange;
+  }
+
+  getPlaceholderInDocument(value) {
+    const { document } = value;
+    const directChild = document.getChild(this.placeholderBlock.key);
+
+    if (directChild) {
+      return directChild;
+    }
+
+    const child = document.getDescendant(this.placeholderBlock.key);
+
+    if (child) {
+      return child;
+    } else {
+      //eslint-disable-next-line
+      throw new Error("insert-image: Can't find placeholder!");
+    }
+  }
+
+  cancel() {
+    log('insert cancelled');
+    const c = this.getValue()
+      .change()
+      .removeNodeByKey(this.placeholderBlock.key);
+    this.onChange(c);
+  }
+
+  done(err, src) {
+    log('done: err:', err);
+    if (err) {
+      //eslint-disable-next-line
+      console.log(err);
+    } else {
+      const value = this.getValue();
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.merge(Data.create({ loaded: true, src, percent: 100 }));
+
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
+    }
+  }
+
+  /**
+   * Notify handler that the user chose a file - will create a change with a preview in the editor.
+   *
+   * @param {File} file - the file that the user chose using a file input.
+   */
+  fileChosen(file) {
+    if (!file) {
+      return;
+    }
+
+    log('[fileChosen] file: ', file);
+    const reader = new FileReader();
+    reader.onload = () => {
+      const value = this.getValue();
+      const dataURL = reader.result;
+      const child = this.getPlaceholderInDocument(value);
+      const data = child.data.set('src', dataURL);
+      const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+      this.onChange(change);
+    };
+    reader.readAsDataURL(file);
+  }
+
+  progress(percent, bytes, total) {
+    log('progress: ', percent, bytes, total);
+    const value = this.getValue();
+    const child = this.getPlaceholderInDocument(value);
+    const data = child.data.set('percent', percent);
+    const change = value.change().setNodeByKey(this.placeholderBlock.key, { data });
+    this.onChange(change);
+  }
+}
+
+export default InsertImageHandler;

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

@@ -0,0 +1,115 @@
+import Bold from '@material-ui/icons/FormatBold';
+// import Code from '@material-ui/icons/Code';
+import BulletedListIcon from '@material-ui/icons/FormatListBulleted';
+import NumberedListIcon from '@material-ui/icons/FormatListNumbered';
+import ImagePlugin from './image';
+import MediaPlugin from './media';
+import CharactersPlugin from './characters';
+import Italic from '@material-ui/icons/FormatItalic';
+import MathPlugin from './math';
+import React from 'react';
+import Strikethrough from '@material-ui/icons/FormatStrikethrough';
+import ToolbarPlugin from './toolbar';
+import Underline from '@material-ui/icons/FormatUnderlined';
+import compact from 'lodash/compact';
+import SoftBreakPlugin from 'slate-soft-break';
+import debug from 'debug';
+import List from './list';
+import TablePlugin from './table';
+import RespAreaPlugin from './respArea';
+
+const log = debug('@pie-lib:editable-html:plugins');
+
+function MarkHotkey(options) {
+  const { type, key, icon, tag } = options;
+
+  // Return our "plugin" object, containing the `onKeyDown` handler.
+  return {
+    toolbar: {
+      isMark: true,
+      type,
+      icon,
+      onToggle: change => {
+        log('[onToggleMark] type: ', type);
+        return change.toggleMark(type);
+      }
+    },
+    renderMark(props) {
+      if (props.mark.type === type) {
+        const K = tag || type;
+        return <K>{props.children}</K>;
+      }
+    },
+    onKeyDown(event, change) {
+      // Check that the key pressed matches our `key` option.
+      if (!event.metaKey || event.key != key) return;
+
+      // Prevent the default characters from being inserted.
+      event.preventDefault();
+
+      // Toggle the mark `type`.
+      change.toggleMark(type);
+      return true;
+    }
+  };
+}
+
+export const ALL_PLUGINS = [
+  'bold',
+  // 'code',
+  'italic',
+  'underline',
+  'strikethrough',
+  'bulleted-list',
+  'numbered-list',
+  'image',
+  'math',
+  'languageCharacters',
+  'table',
+  'video',
+  'audio',
+  'responseArea'
+];
+
+export const DEFAULT_PLUGINS = ALL_PLUGINS.filter(plug => plug !== 'responseArea');
+
+export const buildPlugins = (activePlugins, opts) => {
+  log('[buildPlugins] opts: ', opts);
+
+  activePlugins = activePlugins || DEFAULT_PLUGINS;
+
+  const addIf = (key, p) => activePlugins.includes(key) && p;
+  const imagePlugin = opts.image && opts.image.onDelete && ImagePlugin(opts.image);
+  const mathPlugin = MathPlugin(opts.math);
+  const respAreaPlugin =
+    opts.responseArea &&
+    opts.responseArea.type &&
+    RespAreaPlugin(opts.responseArea, compact([mathPlugin]));
+
+  return compact([
+    addIf('table', TablePlugin(opts.table, compact([imagePlugin, mathPlugin, respAreaPlugin]))),
+    addIf('bold', MarkHotkey({ key: 'b', type: 'bold', icon: <Bold />, tag: 'strong' })),
+    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),
+    addIf('italic', MarkHotkey({ key: 'i', type: 'italic', icon: <Italic />, tag: 'em' })),
+    addIf(
+      'strikethrough',
+      MarkHotkey({
+        key: '~',
+        type: 'strikethrough',
+        icon: <Strikethrough />,
+        tag: 'del'
+      })
+    ),
+    addIf('underline', MarkHotkey({ key: 'u', type: 'underline', icon: <Underline />, tag: 'u' })),
+    addIf('image', imagePlugin),
+    addIf('video', MediaPlugin('video', opts.media)),
+    addIf('audio', MediaPlugin('audio', opts.media)),
+    addIf('math', mathPlugin),
+    ...opts.languageCharacters.map(config => addIf('languageCharacters', CharactersPlugin(config))),
+    addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),
+    addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),
+    ToolbarPlugin(opts.toolbar),
+    SoftBreakPlugin({ shift: true }),
+    addIf('responseArea', respAreaPlugin)
+  ]);
+};

package/configure/node_modules/@pie-lib/editable-html/src/plugins/list/index.jsx

@@ -0,0 +1,175 @@
+import React from 'react';
+import { Data } from 'slate';
+import Immutable from 'immutable';
+import PropTypes from 'prop-types';
+import EditList from 'slate-edit-list';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins:list');
+
+const b = (type, next, childNodes) => ({
+  object: 'block',
+  type,
+  nodes: next(childNodes)
+});
+
+export const serialization = {
+  deserialize(el, next) {
+    const name = el.tagName.toLowerCase();
+
+    if (name === 'li') {
+      return b('list_item', next, el.childNodes);
+    }
+
+    if (name === 'ul') {
+      return b('ul_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
+    }
+
+    if (name === 'ol') {
+      return b('ol_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
+    }
+  },
+  serialize(object, children) {
+    if (object.object !== 'block') return;
+
+    if (object.type === 'list_item') {
+      return <li>{children}</li>;
+    }
+
+    if (object.type === 'ul_list') {
+      return <ul>{children}</ul>;
+    }
+
+    if (object.type === 'ol_list') {
+      return <ol>{children}</ol>;
+    }
+  }
+};
+
+const createEditList = () => {
+  const core = EditList({
+    typeDefault: 'span'
+  });
+
+  // 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) {
+        return;
+      }
+
+      block.nodes[0] = { type: block.nodes[0].types[0] };
+    });
+  }
+
+  /**
+   * This override of the core.changes.wrapInList is needed because the version
+   * of immutable that we have does not support getting the element at a specific
+   * index with a square bracket (list[0]). We have to use the list.get function instead
+   */
+
+  /**
+   * Returns the highest list of blocks that cover the current selection
+   */
+  const getHighestSelectedBlocks = value => {
+    const range = value.selection;
+    const document = value.document;
+
+    const startBlock = document.getClosestBlock(range.startKey);
+    const endBlock = document.getClosestBlock(range.endKey);
+
+    if (startBlock === endBlock) {
+      return Immutable.List([startBlock]);
+    }
+
+    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
+    const startPath = ancestor.getPath(startBlock.key);
+    const endPath = ancestor.getPath(endBlock.key);
+
+    return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
+  };
+
+  /**
+   * Wrap the blocks in the current selection in a new list. Selected
+   * lists are merged together.
+   */
+  core.changes.wrapInList = function(change, type, data) {
+    const selectedBlocks = getHighestSelectedBlocks(change.value);
+
+    // Wrap in container
+    change.wrapBlock({ type: type, data: Data.create(data) }, { normalize: false });
+
+    // Wrap in list items
+    selectedBlocks.forEach(function(node) {
+      if (core.utils.isList(node)) {
+        // Merge its items with the created list
+        node.nodes.forEach(function(_ref) {
+          const key = _ref.key;
+          return change.unwrapNodeByKey(key, { normalize: false });
+        });
+      } else if (node.type !== 'list_item') {
+        change.wrapBlockByKey(node.key, 'list_item', {
+          normalize: false
+        });
+      }
+    });
+
+    return change.normalize();
+  };
+
+  return core;
+};
+
+export default options => {
+  const { type, icon } = options;
+
+  const core = createEditList();
+
+  // eslint-disable-next-line react/display-name
+  core.renderNode = props => {
+    const { node, attributes, children } = props;
+
+    switch (node.type) {
+      case 'ul_list':
+        return <ul {...attributes}>{children}</ul>;
+      case 'ol_list':
+        return <ol {...attributes}>{children}</ol>;
+      case 'list_item':
+        return <li {...attributes}>{children}</li>;
+    }
+  };
+
+  core.toolbar = {
+    isMark: false,
+    type,
+    icon,
+    isActive: (value, type) => {
+      if (!core.utils.isSelectionInList(value)) {
+        return false;
+      }
+      const current = core.utils.getCurrentList(value);
+      return current ? current.type === type : false;
+    },
+    onClick: (value, onChange) => {
+      log('[onClick]', value);
+      const inList = core.utils.isSelectionInList(value);
+      if (inList) {
+        const change = value.change().call(core.changes.unwrapList);
+        onChange(change);
+      } else {
+        const change = value.change().call(core.changes.wrapInList, type);
+        onChange(change);
+      }
+    }
+  };
+
+  core.renderNode.propTypes = {
+    node: PropTypes.object,
+    attributes: PropTypes.object,
+    children: PropTypes.func
+  };
+
+  return core;
+};

package/configure/node_modules/@pie-lib/editable-html/src/plugins/math/index.jsx

@@ -0,0 +1,283 @@
+import Functions from '@material-ui/icons/Functions';
+import { Inline } from 'slate';
+import { MathPreview, MathToolbar } from '@pie-lib/math-toolbar';
+import { wrapMath, unWrapMath } from '@pie-lib/math-rendering';
+import React from 'react';
+import debug from 'debug';
+import SlatePropTypes from 'slate-prop-types';
+import PropTypes from 'prop-types';
+
+import { BLOCK_TAGS } from '../../serialization';
+const log = debug('@pie-lib:editable-html:plugins:math');
+
+const TEXT_NODE = 3;
+
+function generateAdditionalKeys(keyData = []) {
+  return keyData.map(key => ({
+    name: key,
+    latex: key,
+    write: key,
+    label: key
+  }));
+}
+
+export const CustomToolbarComp = React.memo(
+  props => {
+    const { node, value, onFocus, onBlur, onClick } = props;
+    const { pluginProps } = props || {};
+    const { math } = pluginProps || {};
+    const { keypadMode, customKeys, controlledKeypadMode = true } = math || {};
+
+    const onDone = latex => {
+      const update = {
+        ...node.data.toObject(),
+        latex
+      };
+      const change = value.change().setNodeByKey(node.key, { data: update });
+
+      const nextText = value.document.getNextText(node.key);
+
+      change.moveFocusTo(nextText.key, 0).moveAnchorTo(nextText.key, 0);
+
+      props.onToolbarDone(change, false);
+    };
+
+    const onChange = latex => {
+      const update = {
+        ...node.data.toObject(),
+        latex
+      };
+      const change = value.change().setNodeByKey(node.key, { data: update });
+      log('call onToolbarChange:', change);
+      props.onDataChange(node.key, update);
+    };
+
+    const latex = node.data.get('latex');
+
+    return (
+      <MathToolbar
+        autoFocus
+        additionalKeys={generateAdditionalKeys(customKeys)}
+        latex={latex}
+        onChange={onChange}
+        onDone={onDone}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onClick={onClick}
+        keypadMode={keypadMode}
+        controlledKeypadMode={controlledKeypadMode}
+      />
+    );
+  },
+  (prev, next) => {
+    const { node, pluginProps: { math: { keypadMode, controlledKeypadMode } = {} } = {} } = prev;
+    const {
+      node: nodeNext,
+      pluginProps: {
+        math: { keypadMode: keypadModeNext, controlledKeypadMode: controlledKeypadModeNext } = {}
+      } = {}
+    } = next;
+    const keypadModeChanged = keypadMode !== keypadModeNext;
+    const controlledKeypadModeChanged = controlledKeypadMode !== controlledKeypadModeNext;
+
+    const equal = node.equals(nodeNext);
+    return equal && !keypadModeChanged && !controlledKeypadModeChanged;
+  }
+);
+
+CustomToolbarComp.propTypes = {
+  node: SlatePropTypes.node.isRequired,
+  value: SlatePropTypes.value,
+  onToolbarDone: PropTypes.func,
+  onDataChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onClick: PropTypes.func,
+  onBlur: PropTypes.func
+};
+
+export default function MathPlugin() {
+  return {
+    name: 'math',
+    toolbar: {
+      icon: <Functions />,
+      onClick: (value, onChange) => {
+        log('[insertMath]');
+        const math = inlineMath();
+        const change = value.change().insertInline(math);
+        onChange(change);
+      },
+      supports: node => node && node.object === 'inline' && node.type === 'math',
+      /**
+       * Return a react component function
+       * @param node {Slate.Node}
+       * @param value {Slate.Value}
+       * @param onDone {(change?: Slate.Change, finishEditing :boolea) => void} - a function to call once the toolbar
+       *   has made any changes, call with the node.key and a data object.
+       */
+      CustomToolbarComp
+    },
+    schema: {
+      document: { match: [{ type: 'math' }] }
+    },
+
+    pluginStyles: (node, parentNode, p) => {
+      if (p) {
+        return {
+          position: 'absolute',
+          top: 'initial'
+        };
+      }
+    },
+
+    renderNode: props => {
+      if (props.node.type === 'math') {
+        log('[renderNode]: data:', props.node.data);
+        return <MathPreview {...props} />;
+      }
+
+      /**
+       * Here for rendering mathml content
+       */
+      if (props.node.type === 'mathml') {
+        const html = props.node.data.get('html');
+
+        return <span {...props.attributes} dangerouslySetInnerHTML={{ __html: html }} />;
+      }
+    }
+  };
+}
+
+MathPlugin.ROUND_BRACKETS = 'round_brackets';
+MathPlugin.SQUARE_BRACKETS = 'square_brackets';
+MathPlugin.DOLLAR = 'dollar';
+MathPlugin.DOUBLE_DOLLAR = 'double_dollar';
+
+export const inlineMath = () =>
+  Inline.create({
+    object: 'inline',
+    type: 'math',
+    isVoid: true,
+    data: {
+      latex: ''
+    }
+  });
+
+const htmlDecode = input => {
+  const doc = new DOMParser().parseFromString(input, 'text/html');
+
+  return doc.documentElement.textContent;
+};
+
+const getTagName = el => {
+  return ((el && el.tagName) || '').toLowerCase();
+};
+
+/**
+ * Makes sure that strings that contain stuff like:
+ * x<y are not transformed into x by the DOMParser because it thinks
+ * that <y is the start of a dom element tag
+ * @param input
+ * @returns {*}
+ */
+const lessThanHandling = input => {
+  const arrowSplit = input.split('<');
+
+  // if we don't have at least 2 characters there's no point in checking
+  if (input.length > 2) {
+    return arrowSplit.reduce((st, part) => {
+      /*
+       We check if this element resulted is:
+       div - continuation of a beginning of a HTML element
+       /div - closing of a HTML tag
+       br/> - beginning and closing of a html TAG
+       */
+      if (part.match(/<[a-zA-Z/][\s\S]*>/ig)) {
+        return `${st}${st ? '<' : ''}${part}`;
+      }
+
+      return `${st}${st ? '&lt;' : ''}${part}`;
+    }, '');
+  }
+
+  return input;
+};
+
+export const serialization = {
+  deserialize(el) {
+    const tagName = getTagName(el);
+    /**
+     * This is used for when there's a wrapper over the mathml element.
+     * Because of this slate rule: "Only allow block nodes or inline and text nodes in blocks."
+     * The element that contains only the mathml is removed (along with the math) because it has
+     * an inline child and the block is of type block
+     * This is for legacy content only since our math rendering is valid for the core slate rules
+     */
+    const hasMathChild =
+      BLOCK_TAGS[tagName] && el.childNodes.length === 1 && getTagName(el.firstChild) === 'math';
+    log('[deserialize] name: ', tagName);
+
+    /**
+     * This is here in order to be able to render mathml content
+     */
+    if (tagName === 'math' || (el.dataset && el.dataset.type === 'mathml') || hasMathChild) {
+      const newHtml = hasMathChild ? el.innerHTML : el.outerHTML;
+
+      return {
+        object: 'inline',
+        isVoid: true,
+        type: 'mathml',
+        data: {
+          html: newHtml
+        }
+      };
+    }
+
+    if (el.nodeType === TEXT_NODE) {
+      return;
+    }
+
+    if (tagName !== 'span') {
+      return;
+    }
+
+    const hasLatex = el.hasAttribute('data-latex') || el.hasAttribute('latex');
+
+    if (hasLatex) {
+      const latex = htmlDecode(el.innerHTML);
+      const { unwrapped, wrapType } = unWrapMath(latex);
+      log('[deserialize]: noBrackets: ', unwrapped, wrapType);
+      return {
+        object: 'inline',
+        type: 'math',
+        isVoid: true,
+        nodes: [],
+        data: {
+          latex: unwrapped,
+          wrapper: wrapType
+        }
+      };
+    }
+  },
+  serialize(object) {
+    if (object.type === 'math') {
+      const l = object.data.get('latex');
+      const wrapper = object.data.get('wrapper');
+      log('[serialize] latex: ', l);
+      const decoded = htmlDecode(lessThanHandling(l));
+      return (
+        <span data-latex="" data-raw={decoded}>
+          {wrapMath(decoded, wrapper)}
+        </span>
+      );
+    }
+
+    /**
+     * Here for rendering mathml content
+     */
+    if (object.type === 'mathml') {
+      const html = object.data.get('html');
+
+      return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: html }} />;
+    }
+  }
+};