@pie-element/ebsr 6.6.3-next.1085 → 6.6.3-next.1092

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

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

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

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