@pie-element/ebsr 9.0.2-next.28 → 9.0.2-next.45

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/characters/index.jsx

@@ -1,271 +0,0 @@
-import React from 'react';
-import { ReactEditor } from 'slate-react';
-import { Editor } from 'slate';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import debug from 'debug';
-import get from 'lodash/get';
-
-import { PureToolbar } from '../../../math-toolbar';
-
-import CustomPopper from './custom-popper';
-import { insertSnackBar } from '../respArea/utils';
-import { characterIcons, spanishConfig, specialConfig } from './utils';
-const log = debug('@pie-lib:editable-html:plugins:characters');
-
-const removePopOvers = () => {
-  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');
-
-  log('[characters:removePopOvers]');
-  prevPopOvers.forEach((s) => s.remove());
-};
-
-export const removeDialogs = () => {
-  const prevDialogs = document.querySelectorAll('.insert-character-dialog');
-
-  log('[characters:removeDialogs]');
-  prevDialogs.forEach((s) => s.remove());
-  removePopOvers();
-};
-
-const insertDialog = ({ editor, callback, opts }) => {
-  const newEl = document.createElement('div');
-
-  log('[characters:insertDialog]');
-
-  removeDialogs();
-
-  newEl.className = 'insert-character-dialog';
-
-  let configToUse;
-
-  switch (true) {
-    case opts.language === 'spanish':
-      configToUse = spanishConfig;
-      break;
-    case opts.language === 'special':
-      configToUse = specialConfig;
-      break;
-    default:
-      configToUse = opts;
-  }
-
-  if (!configToUse.characters) {
-    insertSnackBar('No characters provided or language not recognized');
-    return;
-  }
-
-  const layoutForCharacters = configToUse.characters.reduce(
-    (obj, arr) => {
-      if (arr.length >= obj.columns) {
-        obj.columns = arr.length;
-      }
-
-      return obj;
-    },
-    { rows: configToUse.characters.length, columns: 0 },
-  );
-
-  let popoverEl;
-
-  const closePopOver = () => {
-    if (popoverEl) {
-      popoverEl.remove();
-    }
-
-    removePopOvers();
-  };
-
-  const renderPopOver = (event, el) => {
-    if (!event) {
-      return;
-    }
-
-    const infoStyle = { fontSize: '20px', lineHeight: '20px' };
-
-    closePopOver();
-
-    popoverEl = document.createElement('div');
-    ReactDOM.render(
-      <CustomPopper onClose={closePopOver} anchorEl={event.currentTarget}>
-        <div>{el.label}</div>
-
-        <div style={infoStyle}>{el.description}</div>
-
-        <div style={infoStyle}>{el.unicode}</div>
-      </CustomPopper>,
-      popoverEl,
-    );
-
-    document.body.appendChild(newEl);
-  };
-
-  let firstCallMade = false;
-
-  const listener = (e) => {
-    // this will be triggered right after setting it because
-    // this toolbar is added on the mousedown event
-    // so right after mouseup, the click will be triggered
-    if (firstCallMade) {
-      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
-      const editorDOM = ReactEditor.toDOMNode(editor, editor);
-      const focusIsInEditor = editorDOM.contains(e.target);
-
-      if (!(focusIsInModals || focusIsInEditor)) {
-        handleClose();
-      }
-    } else {
-      firstCallMade = true;
-    }
-  };
-
-  const handleClose = () => {
-    callback(undefined, true);
-    newEl.remove();
-    closePopOver();
-    document.body.removeEventListener('click', listener);
-  };
-
-  const handleChange = (val) => {
-    if (typeof val === 'string') {
-      callback(val, true);
-    }
-  };
-
-  const el = (
-    <PureToolbar
-      autoFocus
-      noDecimal
-      hideInput
-      noLatexHandling
-      hideDoneButtonBackground
-      layoutForKeyPad={layoutForCharacters}
-      additionalKeys={configToUse.characters.reduce((arr, n) => {
-        arr = [
-          ...arr,
-          ...n.map((k) => ({
-            name: get(k, 'name') || k,
-            write: get(k, 'write') || k,
-            label: get(k, 'label') || k,
-            category: 'character',
-            extraClass: 'character',
-            extraProps: {
-              ...(k.extraProps || {}),
-              style: {
-                ...(k.extraProps || {}).style,
-                border: '1px solid #000',
-              },
-            },
-            ...(configToUse.hasPreview
-              ? {
-                  actions: { onMouseEnter: (ev) => renderPopOver(ev, k), onMouseLeave: closePopOver },
-                }
-              : {}),
-          })),
-        ];
-
-        return arr;
-      }, [])}
-      keypadMode="language"
-      onChange={handleChange}
-      onDone={handleClose}
-    />
-  );
-
-  ReactDOM.render(el, newEl, () => {
-    const [nodeAtSelection] = Editor.node(editor, editor.selection);
-    const cursorItem = ReactEditor.toDOMNode(editor, nodeAtSelection);
-
-    if (cursorItem) {
-      const bodyRect = document.body.getBoundingClientRect();
-      const boundRect = cursorItem.getBoundingClientRect();
-
-      document.body.appendChild(newEl);
-
-      // when height of toolbar exceeds screen - can happen in scrollable contexts
-      let additionalTopOffset = 0;
-      if (boundRect.y < newEl.offsetHeight) {
-        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;
-      }
-
-      newEl.style.maxWidth = '500px';
-      newEl.style.position = 'absolute';
-      newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10 + additionalTopOffset}px`;
-      newEl.style.zIndex = 99999;
-
-      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;
-
-      const rightValue = `${boundRect.x}px`;
-
-      newEl.style.left = leftValue;
-
-      const leftAlignedWidth = newEl.offsetWidth;
-
-      newEl.style.left = 'unset';
-      newEl.style.right = rightValue;
-
-      const rightAlignedWidth = newEl.offsetWidth;
-
-      newEl.style.left = 'unset';
-      newEl.style.right = 'unset';
-
-      if (leftAlignedWidth >= rightAlignedWidth) {
-        newEl.style.left = leftValue;
-      } else {
-        newEl.style.right = rightValue;
-      }
-
-      document.body.addEventListener('click', listener);
-    }
-  });
-};
-
-const CharacterIcon = ({ letter }) => (
-  <div
-    style={{
-      fontSize: '25px',
-      lineHeight: '15px',
-    }}
-  >
-    {letter}
-  </div>
-);
-
-CharacterIcon.propTypes = {
-  letter: PropTypes.string,
-};
-
-export default function CharactersPlugin(opts) {
-  removeDialogs();
-  return {
-    name: 'characters',
-    toolbar: {
-      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
-      onClick: (editor) => {
-        const callback = (char, focus) => {
-          if (char) {
-            log('[characters:insert]: ', char);
-            editor.insertText(char);
-          }
-
-          log('[characters:click]');
-
-          if (focus) {
-            ReactEditor.focus(editor);
-          }
-        };
-
-        insertDialog({ editor, callback, opts });
-      },
-    },
-
-    pluginStyles: (node, parentNode, p) => {
-      if (p) {
-        return {
-          position: 'absolute',
-          top: 'initial',
-        };
-      }
-    },
-  };
-}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/characters/utils.js

@@ -1,447 +0,0 @@
-export const spanishConfig = {
-  characters: [
-    ['á', 'é', 'í', 'ó', 'ú'],
-    ['Á', 'É', 'Í', 'Ó', 'Ú'],
-    ['—', '«', '»', 'ñ', 'ü'],
-    ['-', '¿', '¡', 'Ñ', 'Ü'],
-  ],
-};
-
-export const specialConfig = {
-  hasPreview: true,
-  characters: [
-    [
-      {
-        unicode: 'U+00A2',
-        description: 'CENT SIGN',
-        write: '¢',
-        label: '¢',
-      },
-      {
-        unicode: 'U+00BF',
-        description: 'INVERTED QUESTION MARK',
-        write: '¿',
-        label: '¿',
-      },
-      {
-        unicode: 'U+00B4',
-        description: 'ACUTE ACCENT',
-        write: '´',
-        label: '´',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E1',
-        description: 'LATIN SMALL LETTER A WITH ACUTE',
-        write: 'á',
-        label: 'á',
-      },
-      {
-        unicode: 'U+00E9',
-        description: 'LATIN SMALL LETTER E WITH ACUTE',
-        write: 'é',
-        label: 'é',
-      },
-      {
-        unicode: 'U+00ED',
-        description: 'LATIN SMALL LETTER I WITH ACUTE',
-        write: 'í',
-        label: 'í',
-      },
-      {
-        unicode: 'U+00F3',
-        description: 'LATIN SMALL LETTER O WITH ACUTE',
-        write: 'ó',
-        label: 'ó',
-      },
-      {
-        unicode: 'U+00FA',
-        description: 'LATIN SMALL LETTER U WITH ACUTE',
-        write: 'ú',
-        label: 'ú',
-      },
-      {
-        unicode: 'U+00F1',
-        description: 'LATIN SMALL LETTER N WITH TILDE',
-        write: 'ñ',
-        label: 'ñ',
-      },
-    ],
-    [
-      {
-        unicode: 'U+20AC',
-        description: 'EURO SIGN',
-        write: '€',
-        label: '€',
-      },
-      {
-        unicode: 'U+00A1',
-        description: 'INVERTED EXCLAMATION MARK',
-        write: '¡',
-        label: '¡',
-      },
-      {
-        unicode: 'U+00C1',
-        description: 'LATIN CAPITAL LETTER A WITH ACUTE',
-        write: 'Á',
-        label: 'Á',
-      },
-      {
-        unicode: 'U+00C9',
-        description: 'LATIN CAPITAL LETTER E WITH ACUTE',
-        write: 'É',
-        label: 'É',
-      },
-      {
-        unicode: 'U+00CD',
-        description: 'LATIN CAPITAL LETTER I WITH ACUTE',
-        write: 'Í',
-        label: 'Í',
-      },
-      {
-        unicode: 'U+00D3',
-        description: 'LATIN CAPITAL LETTER O WITH ACUTE',
-        write: 'Ó',
-        label: 'Ó',
-      },
-      {
-        unicode: 'U+00DA',
-        description: 'LATIN CAPITAL LETTER U WITH ACUTE',
-        write: 'Ú',
-        label: 'Ú',
-      },
-      {
-        unicode: 'U+00D1',
-        description: 'LATIN CAPITAL LETTER N WITH TILDE',
-        write: 'Ñ',
-        label: 'Ñ',
-      },
-    ],
-    [
-      {
-        unicode: 'U+00A3',
-        description: 'POUND SIGN',
-        write: '£',
-        label: '£',
-      },
-      {
-        unicode: 'U+00AB',
-        description: 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK',
-        write: '«',
-        label: '«',
-      },
-      {
-        unicode: 'U+005E',
-        description: 'CIRCUMFLEX ACCENT',
-        write: '^',
-        label: '^',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E2',
-        description: 'LATIN SMALL LETTER A WITH CIRCUMFLEX',
-        write: 'â',
-        label: 'â',
-      },
-      {
-        unicode: 'U+00EA',
-        description: 'LATIN SMALL LETTER E WITH CIRCUMFLEX',
-        write: 'ê',
-        label: 'ê',
-      },
-      {
-        unicode: 'U+00EE',
-        description: 'LATIN SMALL LETTER I WITH CIRCUMFLEX',
-        write: 'î',
-        label: 'î',
-      },
-      {
-        unicode: 'U+00F4',
-        description: 'LATIN SMALL LETTER O WITH CIRCUMFLEX',
-        write: 'ô',
-        label: 'ô',
-      },
-      {
-        unicode: 'U+00FB',
-        description: 'LATIN SMALL LETTER U WITH CIRCUMFLEX',
-        write: 'û',
-        label: 'û',
-      },
-      {
-        unicode: 'U+00E7',
-        description: 'LATIN SMALL LETTER C WITH CEDILLA',
-        write: 'ç',
-        label: 'ç',
-      },
-    ],
-    [
-      {
-        unicode: 'U+00A5',
-        description: 'YEN SIGN',
-        write: '¥',
-        label: '¥',
-      },
-      {
-        unicode: 'U+00BB',
-        description: 'RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK',
-        write: '»',
-        label: '»',
-      },
-      {
-        unicode: 'U+00C2',
-        description: 'LATIN CAPITAL LETTER A WITH CIRCUMFLEX',
-        write: 'Â',
-        label: 'Â',
-      },
-      {
-        unicode: 'U+00CA',
-        description: 'LATIN CAPITAL LETTER E WITH CIRCUMFLEX',
-        write: 'Ê',
-        label: 'Ê',
-      },
-      {
-        unicode: 'U+00CE',
-        description: 'LATIN CAPITAL LETTER I WITH CIRCUMFLEX',
-        write: 'Î',
-        label: 'Î',
-      },
-      {
-        unicode: 'U+00D4',
-        description: 'LATIN CAPITAL LETTER O WITH CIRCUMFLEX',
-        write: 'Ô',
-        label: 'Ô',
-      },
-      {
-        unicode: 'U+00DB',
-        description: 'LATIN CAPITAL LETTER U WITH CIRCUMFLEX',
-        write: 'Û',
-        label: 'Û',
-      },
-      {
-        unicode: 'U+00C7',
-        description: 'LATIN CAPITAL LETTER C WITH CEDILLA',
-        write: 'Ç',
-        label: 'Ç',
-      },
-    ],
-    [
-      {
-        unicode: 'U+00A0',
-        description: 'NO-BREAK SPACE',
-        write: String.fromCodePoint('0x00A0'),
-        label: ' ',
-      },
-      {
-        unicode: 'U+00A7',
-        description: 'SECTION SIGN',
-        write: '§',
-        label: '§',
-      },
-      {
-        unicode: 'U+00A8',
-        description: 'DIAERESIS',
-        write: '¨',
-        label: '¨',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E4',
-        description: 'LATIN SMALL LETTER A WITH DIAERESIS',
-        write: 'ä',
-        label: 'ä',
-      },
-      {
-        unicode: 'U+00EB',
-        description: 'LATIN SMALL LETTER E WITH DIAERESIS',
-        write: 'ë',
-        label: 'ë',
-      },
-      {
-        unicode: 'U+00EF',
-        description: 'LATIN SMALL LETTER I WITH DIAERESIS',
-        write: 'ï',
-        label: 'ï',
-      },
-      {
-        unicode: 'U+00F6',
-        description: 'LATIN SMALL LETTER O WITH DIAERESIS',
-        write: 'ö',
-        label: 'ö',
-      },
-      {
-        unicode: 'U+00FC',
-        description: 'LATIN SMALL LETTER U WITH DIAERESIS',
-        write: 'ü',
-        label: 'ü',
-      },
-      {
-        unicode: 'U+00DF',
-        description: 'LATIN SMALL LETTER SHARP S',
-        write: 'ß',
-        label: 'ß',
-      },
-    ],
-    [
-      {
-        unicode: 'U+2009',
-        description: 'THIN SPACE',
-        write: String.fromCodePoint('0x2009'),
-        label: ' ',
-      },
-      {
-        unicode: 'U+2026',
-        description: 'HORIZONTAL ELLIPSIS',
-        write: '…',
-        label: '…',
-      },
-      {
-        unicode: 'U+00C4',
-        description: 'LATIN CAPITAL LETTER A WITH DIAERESIS',
-        write: 'Ä',
-        label: 'Ä',
-      },
-      {
-        unicode: 'U+00CB',
-        description: 'LATIN CAPITAL LETTER E WITH DIAERESIS',
-        write: 'Ë',
-        label: 'Ë',
-      },
-      {
-        unicode: 'U+00CF',
-        description: 'LATIN CAPITAL LETTER I WITH DIAERESIS',
-        write: 'Ï',
-        label: 'Ï',
-      },
-      {
-        unicode: 'U+00D6',
-        description: 'LATIN CAPITAL LETTER O WITH DIAERESIS',
-        write: 'Ö',
-        label: 'Ö',
-      },
-      {
-        unicode: 'U+00DC',
-        description: 'LATIN CAPITAL LETTER U WITH DIAERESIS',
-        write: 'Ü',
-        label: 'Ü',
-      },
-      {
-        unicode: 'U+2212',
-        description: 'MINUS SIGN',
-        write: '−',
-        label: '−',
-      },
-    ],
-    [
-      {
-        unicode: 'U+200A',
-        description: 'HAIR SPACE',
-        write: String.fromCodePoint('0x200A'),
-        label: ' ',
-      },
-      {
-        unicode: 'U+2022',
-        description: 'BULLET',
-        write: '•',
-        label: '•',
-      },
-      {
-        unicode: 'U+0060',
-        description: 'GRAVE ACCENT',
-        write: '`',
-        label: '`',
-        extraProps: { style: { gridRow: 'span 2' } },
-      },
-      {
-        unicode: 'U+00E0',
-        description: 'LATIN SMALL LETTER A WITH GRAVE',
-        write: 'à',
-        label: 'à',
-      },
-      {
-        unicode: 'U+00E8',
-        description: 'LATIN SMALL LETTER E WITH GRAVE',
-        write: 'è',
-        label: 'è',
-      },
-      {
-        unicode: 'U+00EC',
-        description: 'LATIN SMALL LETTER I WITH GRAVE',
-        write: 'ì',
-        label: 'ì',
-      },
-      {
-        unicode: 'U+00F2',
-        description: 'LATIN SMALL LETTER O WITH GRAVE',
-        write: 'ò',
-        label: 'ò',
-      },
-      {
-        unicode: 'U+00F9',
-        description: 'LATIN SMALL LETTER U WITH GRAVE',
-        write: 'ù',
-        label: 'ù',
-      },
-      {
-        unicode: 'U+2013',
-        description: 'EN DASH',
-        write: '–',
-        label: '–',
-      },
-    ],
-    [
-      {
-        unicode: 'U+0009',
-        description: 'TAB',
-        write: String.fromCodePoint('0x0009'),
-        label: 'TAB',
-      },
-      {
-        unicode: 'U+25E6',
-        description: 'WHITE BULLET',
-        write: '◦',
-        label: '◦',
-      },
-      {
-        unicode: 'U+00C0',
-        description: 'LATIN CAPITAL LETTER A WITH GRAVE',
-        write: 'À',
-        label: 'À',
-      },
-      {
-        unicode: 'U+00C8',
-        description: 'LATIN CAPITAL LETTER E WITH GRAVE',
-        write: 'È',
-        label: 'È',
-      },
-      {
-        unicode: 'U+00CC',
-        description: 'LATIN CAPITAL LETTER I WITH GRAVE',
-        write: 'Ì',
-        label: 'Ì',
-      },
-      {
-        unicode: 'U+00D2',
-        description: 'LATIN CAPITAL LETTER O WITH GRAVE',
-        write: 'Ò',
-        label: 'Ò',
-      },
-      {
-        unicode: 'U+00D9',
-        description: 'LATIN CAPITAL LETTER U WITH GRAVE',
-        write: 'Ù',
-        label: 'Ù',
-      },
-      {
-        unicode: 'U+2014',
-        description: 'EM DASH',
-        write: '—',
-        label: '—',
-      },
-    ],
-  ],
-};
-
-export const characterIcons = {
-  spanish: 'ñ',
-  special: '€',
-};