@pie-element/ebsr 9.12.1 → 9.12.2-next.18

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

@@ -0,0 +1,447 @@
+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: '€',
+};

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import { htmlToValue } from '../../serialization';
+
+// We're possibly going to have to support content types, so starting it as an enum
+export const CONTENT_TYPE = {
+  FRAGMENT: 'FRAGMENT',
+};
+
+// We're possibly going to have to support multiple icon types, so starting it as an enum
+export const ICON_TYPE = {
+  SVG: 'SVG',
+};
+
+const getIcon = (customPluginProps) => {
+  const svg = customPluginProps.icon;
+
+  switch (customPluginProps.iconType) {
+    case ICON_TYPE.SVG:
+      return <span style={{ width: 28, height: 28 }} dangerouslySetInnerHTML={{ __html: svg }} />;
+    default:
+      return <span>{customPluginProps.iconAlt}</span>;
+  }
+};
+
+export default function CustomPlugin(type, customPluginProps) {
+  const toolbar = {
+    icon: getIcon(customPluginProps),
+    onClick: (value, onChange, getFocusedValue) => {
+      const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
+      let valueToUse = value;
+      const callback = ({ customContent, contentType }, focus) => {
+        valueToUse = getFocusedValue();
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default: {
+            const contentValue = htmlToValue(customContent);
+            const change = valueToUse.change().insertFragment(contentValue.document);
+
+            valueToUse = change.value;
+            onChange(change);
+
+            break;
+          }
+        }
+
+        if (focus) {
+          if (editorDOM) {
+            editorDOM.focus();
+          }
+        }
+      };
+
+      // NOTE: the emitted event (custom event named by client) will be suffixed with "PIE-"
+      window.dispatchEvent(
+        new CustomEvent(`PIE-${customPluginProps.event}`, {
+          detail: {
+            ...customPluginProps,
+            callback,
+          },
+        }),
+      );
+    },
+    supports: (node) => node.object === 'inline' && node.type === type,
+  };
+
+  return {
+    name: type,
+    toolbar,
+    renderNode(props) {
+      if (props.node.type === type) {
+        const { node } = props;
+        const { data } = node;
+        const jsonData = data.toJSON();
+        const { customContent, contentType } = jsonData;
+
+        switch (contentType) {
+          case CONTENT_TYPE.FRAGMENT:
+          default:
+            return customContent;
+        }
+      }
+    },
+    normalizeNode: (node) => {
+      const textNodeMap = {};
+      let index = 0;
+
+      if (node.object !== 'document') return;
+
+      node.findDescendant((d) => {
+        if (d.object === 'text') {
+          textNodeMap[index] = d;
+        }
+
+        index++;
+      });
+    },
+  };
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = (theme) => ({
+  icon: {
+    fontFamily: 'Cerebri Sans, Arial, sans-serif',
+    fontSize: theme.typography.fontSize,
+    fontWeight: 'bold',
+    lineHeight: '14px',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+  },
+});
+
+const HtmlModeIcon = ({ classes, isHtmlMode }) => (
+  <div className={classes.icon}>{isHtmlMode ? 'Exit <HTML> mode' : '<HTML>'}</div>
+);
+
+export default withStyles(styles)(HtmlModeIcon);

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import HtmlModeIcon from './icons';
+import { htmlToValue, valueToHtml } from './../../serialization';
+
+const toggleToRichText = (value, onChange, dismiss) => {
+  const plainText = value.document.text;
+  const slateValue = dismiss ? value : htmlToValue(plainText);
+
+  const change = value
+    .change()
+    .selectAll()
+    .delete()
+    .insertFragment(slateValue.document);
+  onChange(change);
+};
+
+export default function HtmlPlugin(opts) {
+  const { isHtmlMode, isEditedInHtmlMode, toggleHtmlMode, handleAlertDialog, currentValue } = opts;
+
+  const handleHtmlModeOn = (value, onChange) => {
+    const dialogProps = {
+      title: 'Warning',
+      text: 'Returning to rich text mode without saving will cause edits to be lost.',
+      onConfirmText: 'Dismiss changes',
+      onCloseText: 'Continue Editing',
+      onConfirm: () => {
+        handleAlertDialog(false);
+        toggleToRichText(currentValue, onChange, true);
+        toggleHtmlMode();
+      },
+      onClose: () => {
+        handleAlertDialog(false);
+      },
+    };
+
+    handleAlertDialog(true, dialogProps);
+  };
+
+  const handleHtmlModeOff = (value, onChange) => {
+    const change = value
+      .change()
+      .selectAll()
+      .delete()
+      .insertText(valueToHtml(value));
+    onChange(change);
+  };
+
+  return {
+    name: 'html',
+    toolbar: {
+      icon: <HtmlModeIcon isHtmlMode={isHtmlMode} />,
+      buttonStyles: {
+        margin: '0 20px 0 auto',
+      },
+      type: 'html',
+      onClick: (value, onChange) => {
+        if (isHtmlMode) {
+          if (isEditedInHtmlMode) {
+            handleHtmlModeOn(value, onChange);
+          } else {
+            toggleToRichText(value, onChange);
+            toggleHtmlMode();
+          }
+        } else {
+          handleHtmlModeOff(value, onChange);
+          toggleHtmlMode();
+        }
+      },
+    },
+  };
+}

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/image/alt-dialog.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import DialogContent from '@material-ui/core/DialogContent';
+import ArrowBackIos from '@material-ui/icons/ArrowBackIos';
+import TextField from '@material-ui/core/TextField';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import PropTypes from 'prop-types';
+
+export class AltDialog extends React.Component {
+  static propTypes = {
+    onDone: PropTypes.func.isRequired,
+    alt: PropTypes.string,
+  };
+
+  constructor(props) {
+    super(props);
+
+    const { alt } = props;
+
+    this.state = {
+      value: alt,
+    };
+  }
+
+  closeDialog = () => {
+    const allDialogs = document.querySelectorAll('#text-dialog');
+
+    allDialogs.forEach(function(s) {
+      return s.remove();
+    });
+  };
+
+  onDone = () => {
+    const { onDone } = this.props;
+    const { value } = this.state;
+
+    onDone(value);
+    this.closeDialog();
+  };
+
+  handleOverflow = () => {
+    document.body.style.removeProperty('overflow');
+  };
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <Dialog
+        open
+        disablePortal
+        onClose={this.closeDialog}
+        id="text-dialog"
+        hideBackdrop
+        disableScrollLock
+        onEntered={this.handleOverflow}
+      >
+        <DialogContent>
+          <div style={{ display: 'flex' }}>
+            <ArrowBackIos style={{ paddingTop: '6px' }} />
+            <TextField
+              multiline
+              placeholder={'Enter an Alt Text description of this image'}
+              helperText={
+                'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.'
+              }
+              value={value}
+              onChange={(event) => this.setState({ value: event.target.value })}
+              FormHelperTextProps={{ style: { fontSize: 14 } }}
+            />
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={this.onDone}>Done</Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+}
+
+export default AltDialog;