@pie-element/complex-rubric 1.12.2-next.8 → 1.12.2

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

@@ -1,348 +0,0 @@
-import Functions from '@material-ui/icons/Functions';
-import { Inline } from 'slate';
-import { MathPreview, MathToolbar } from '../../../math-toolbar';
-import { wrapMath, unWrapMath, mmlToLatex, renderMath } from '../../../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';
-import isEqual from 'lodash/isEqual';
-
-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,
-  }));
-}
-
-// eslint-disable-next-line react/display-name
-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(opts) {
-  MathPlugin.mathMlOptions = {
-    mmlOutput: opts.mmlOutput,
-    mmlEditing: opts.mmlEditing,
-  };
-
-  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';
-MathPlugin.mathMlOptions = {};
-
-MathPlugin.propTypes = {
-  attributes: PropTypes.object,
-  node: SlatePropTypes.node,
-};
-
-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]*>/gi)) {
-        return `${st}${st ? '<' : ''}${part}`;
-      }
-
-      return `${st}${st ? '&lt;' : ''}${part}`;
-    }, '');
-  }
-
-  return input;
-};
-
-function fixLatexExpression(latexInput) {
-  // for some reason, mmlToLatex parses () incorrectly - or at least in a way that our interpreter can not use them
-  // Replace '\\left.' and '\\right.' with an empty string
-  return latexInput.replace(/\\left\.\s*|\\right\.\s*/g, '');
-}
-
-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;
-
-      if (MathPlugin.mathMlOptions.mmlEditing) {
-        // todo fix this in mathml-to-latex
-        const htmlWithRemovedSpaces = newHtml.replaceAll("&nbsp;", " ");
-        const htmlToUse = mmlToLatex(htmlWithRemovedSpaces);
-        const latex = htmlDecode(htmlToUse);
-        // todo fix this in mathml-to-latex
-        const correctedLatex = fixLatexExpression(latex);
-        const { unwrapped, wrapType } = unWrapMath(correctedLatex);
-
-        return {
-          object: 'inline',
-          type: 'math',
-          isVoid: true,
-          nodes: [],
-          data: {
-            latex: unwrapped,
-            wrapper: wrapType,
-          },
-        };
-      }
-
-      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));
-
-      if (MathPlugin.mathMlOptions.mmlOutput) {
-        const res = renderMath(`<span data-latex="" data-raw="${decoded}">${wrapMath(decoded, wrapper)}</span>`);
-        const newLatex = mmlToLatex(res);
-
-        // we need to remove all the spaces from the latex to be able to compare it
-        const strippedL = l.replace(/\s/g, '');
-        const strippedNewL = newLatex.replace(/\s/g, '');
-
-        // we check if the latex keeps his form after being converted to mathml and back to latex
-        // if it does we can safely convert it to mathml
-        if (!isEqual(strippedL, strippedNewL)) {
-          const correctedLatex = fixLatexExpression(newLatex);
-
-          // As George requested in PD-3167, I will set the new mathML anyway, and also log differences
-          // if it doesn't we keep the latex version
-          console.log('This latex can not be safely converted to mathml so we will keep the latex version!!!', {
-            initialLatex: l,
-            newLatex: newLatex,
-            correctedLatex,
-            mathML: res,
-          });
-        }
-
-        return <span data-type="mathml" dangerouslySetInnerHTML={{ __html: res }} />;
-      }
-
-      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 }} />;
-    }
-  },
-};

package/configure/node_modules/@pie-element/rubric/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/media/index.jsx

@@ -1,324 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Inline } from 'slate';
-import TheatersIcon from '@material-ui/icons/Theaters';
-import VolumeUpIcon from '@material-ui/icons/VolumeUp';
-import debug from 'debug';
-
-import MediaDialog from './media-dialog';
-import MediaToolbar from './media-toolbar';
-import MediaWrapper from './media-wrapper';
-
-const log = debug('@pie-lib:editable-html:plugins:image');
-
-const removeDialogs = () => {
-  const prevDialogs = document.querySelectorAll('.insert-media-dialog');
-
-  prevDialogs.forEach((s) => s.remove());
-};
-
-export const insertDialog = (props) => {
-  const newEl = document.createElement('div');
-  const { type, callback, opts, ...rest } = props;
-  const initialBodyOverflow = document.body.style.overflow;
-
-  removeDialogs();
-
-  newEl.className = 'insert-media-dialog';
-  document.body.style.overflow = 'hidden';
-
-  const handleClose = (val, data) => {
-    callback(val, data);
-    newEl.remove();
-    document.body.style.overflow = initialBodyOverflow;
-  };
-
-  const el = (
-    <MediaDialog
-      {...rest}
-      uploadSoundSupport={opts.uploadSoundSupport}
-      type={type}
-      disablePortal={true}
-      open={true}
-      handleClose={handleClose}
-    />
-  );
-
-  ReactDOM.render(el, newEl);
-
-  document.body.appendChild(newEl);
-};
-
-const types = ['audio', 'video'];
-
-export default function MediaPlugin(type, opts) {
-  const toolbar = {
-    icon: type === 'audio' ? <VolumeUpIcon /> : <TheatersIcon />,
-    onClick: (value, onChange) => {
-      log('[toolbar] onClick');
-      const inline = Inline.create({
-        type: type,
-        isVoid: true,
-        data: {
-          editing: false,
-          ends: undefined,
-          height: undefined,
-          title: undefined,
-          starts: undefined,
-          src: undefined,
-          url: undefined,
-          width: undefined,
-        },
-      });
-
-      const change = value.change().insertInline(inline);
-      onChange(change);
-      insertDialog({
-        type,
-        opts,
-        callback: (val, data) => {
-          const nodeIsThere = change.value.document.findDescendant((d) => d.key === inline.key);
-
-          if (nodeIsThere) {
-            if (!val) {
-              const c = change.removeNodeByKey(inline.key);
-              onChange(c, () => opts.focus());
-            } else {
-              const c = change.setNodeByKey(inline.key, { data });
-              onChange(c, () => opts.focus('beginning', nodeIsThere));
-            }
-          } else {
-            opts.focus();
-          }
-        },
-      });
-    },
-    supports: (node) => node.object === 'inline' && node.type === type,
-  };
-
-  return {
-    name: type,
-    toolbar,
-    deleteNode: (e, node, value, onChange) => {
-      e.preventDefault();
-      const change = value.change().removeNodeByKey(node.key);
-
-      onChange(change);
-    },
-    renderNode(props) {
-      if (props.node.type === type) {
-        const { node, key } = props;
-        const { data } = node;
-        const jsonData = data.toJSON();
-        const { src, height, width, editing, tag, ...rest } = jsonData;
-        const handleEdit = () => {
-          const change = opts.createChange();
-          const c = change.setNodeByKey(key, {
-            data: {
-              ...jsonData,
-              editing: true,
-            },
-          });
-
-          opts.onChange(c, () => {
-            insertDialog({
-              ...jsonData,
-              edit: true,
-              type,
-              opts,
-              callback: (val, data) => {
-                const { key } = node;
-
-                const nodeIsThere = change.value.document.findDescendant(
-                  (d) => d.type === type && d.data.get('editing'),
-                );
-
-                if (nodeIsThere && val) {
-                  const c = change.setNodeByKey(key, { data, editing: false });
-                  opts.onChange(c, () => opts.focus('beginning', nodeIsThere));
-                } else {
-                  opts.focus();
-                }
-              },
-            });
-          });
-        };
-        const handleDelete = () => {
-          const change = opts.createChange();
-          const c = change.removeNodeByKey(node.key);
-
-          opts.onChange(c);
-        };
-        const style = {};
-
-        if (width) {
-          style.width = `${width}px`;
-        }
-
-        if (height) {
-          style.height = `${height}px`;
-        }
-
-        if (tag === 'audio') {
-          return (
-            <MediaWrapper editor data-type={type} width={style.width} {...rest}>
-              <audio controls="controls">
-                <source type="audio/mp3" src={src} />
-              </audio>
-              <MediaToolbar hideEdit onRemove={handleDelete} />
-            </MediaWrapper>
-          );
-        }
-
-        return (
-          <MediaWrapper editor data-type={type} width={style.width} {...rest}>
-            <iframe
-              frameBorder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-              src={src}
-              editing={editing ? 1 : 0}
-              {...rest}
-              {...style}
-            />
-            <MediaToolbar onEdit={handleEdit} onRemove={handleDelete} />
-          </MediaWrapper>
-        );
-      }
-    },
-    normalizeNode: (node) => {
-      const textNodeMap = {};
-      const updateNodesArray = [];
-      let index = 0;
-
-      if (node.object !== 'document') return;
-
-      node.findDescendant((d) => {
-        if (d.object === 'text') {
-          textNodeMap[index] = d;
-        }
-
-        const isMedia = types.indexOf(d.type) >= 0;
-
-        if (isMedia) {
-          if (index > 0 && textNodeMap[index - 1] && textNodeMap[index - 1].text === '') {
-            updateNodesArray.push(textNodeMap[index - 1]);
-          }
-        }
-
-        index++;
-      });
-
-      if (!updateNodesArray.length) return;
-
-      return (change) => {
-        change.withoutNormalization(() => {
-          updateNodesArray.forEach((n) => change.insertTextByKey(n.key, 0, ' '));
-        });
-      };
-    },
-  };
-}
-
-export const serialization = {
-  deserialize(el /*, next*/) {
-    let type = el.dataset && el.dataset.type;
-    let tag = 'iframe';
-    let src;
-    const typeIndex = types.indexOf(type);
-
-    if (typeIndex < 0) {
-      if (el instanceof Element && el.tagName.toLowerCase() === 'audio') {
-        type = 'audio';
-        tag = 'audio';
-        src = el.firstChild?.getAttribute('src');
-      } else {
-        return;
-      }
-    }
-
-    const { ends, starts, title, editing, url } = el.dataset || {};
-
-    log('deserialize: ', name);
-    const width = parseInt(el.getAttribute('width'), 10) || null;
-    const height = parseInt(el.getAttribute('height'), 10) || null;
-
-    const out = {
-      object: 'inline',
-      type: type,
-      isVoid: true,
-      data: {
-        tag,
-        src: src || el.getAttribute('src'),
-        editing,
-        ends,
-        height,
-        starts,
-        title,
-        width,
-        url,
-      },
-    };
-    log('return object: ', out);
-    return out;
-  },
-  serialize(object /*, children*/) {
-    const typeIndex = types.indexOf(object.type);
-
-    if (typeIndex < 0) return;
-
-    const type = types[typeIndex];
-
-    const { data } = object;
-    const editing = data.get('editing');
-    const tag = data.get('tag');
-    const ends = data.get('ends');
-    const src = data.get('src');
-    const starts = data.get('starts');
-    const title = data.get('title');
-    const width = data.get('width');
-    const height = data.get('height');
-    const url = data.get('url');
-    const style = {};
-
-    if (width) {
-      style.width = `${width}px`;
-    }
-
-    if (height) {
-      style.height = `${height}px`;
-    }
-
-    const divProps = {
-      'data-editing': editing,
-      'data-ends': ends,
-      'data-starts': starts,
-      'data-title': title,
-      'data-url': url,
-    };
-    const props = {
-      ...style,
-      src,
-    };
-
-    if (tag === 'audio') {
-      return (
-        <audio controls="controls">
-          <source type="audio/mp3" src={src} />
-        </audio>
-      );
-    }
-
-    return (
-      <iframe
-        data-type={type}
-        src={src}
-        {...divProps}
-        frameBorder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen
-        {...props}
-      />
-    );
-  },
-};