@pie-lib/editable-html 7.22.4 → 8.0.0

package/lib/plugins/characters/index.js

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CharactersPlugin;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _debug = _interopRequireDefault(require("debug"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _mathToolbar = require("@pie-lib/math-toolbar");
+
+var _customPopover = _interopRequireDefault(require("./custom-popover"));
+
+var _utils = require("../respArea/utils");
+
+var _utils2 = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:characters');
+
+var removeDialogs = function removeDialogs() {
+  var prevDialogs = document.querySelectorAll('.insert-character-dialog');
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach(function (s) {
+    return s.remove();
+  });
+};
+
+var removePopOvers = function removePopOvers() {
+  var prevPopOvers = document.querySelectorAll('#mouse-over-popover');
+  log('[characters:removePopOvers]');
+  prevPopOvers.forEach(function (s) {
+    return s.remove();
+  });
+};
+
+var insertDialog = function insertDialog(_ref) {
+  var value = _ref.value,
+      callback = _ref.callback,
+      opts = _ref.opts;
+  var newEl = document.createElement('div');
+  var initialBodyOverflow = document.body.style.overflow;
+  log('[characters:insertDialog]');
+  removeDialogs();
+  newEl.className = 'insert-character-dialog';
+  document.body.style.overflow = 'hidden';
+  var configToUse;
+
+  switch (true) {
+    case opts.language === 'spanish':
+      configToUse = _utils2.spanishConfig;
+      break;
+
+    case opts.language === 'special':
+      configToUse = _utils2.specialConfig;
+      break;
+
+    default:
+      configToUse = opts;
+  }
+
+  if (!configToUse.characters) {
+    (0, _utils.insertSnackBar)('No characters provided or language not recognized');
+    return;
+  }
+
+  var layoutForCharacters = configToUse.characters.reduce(function (obj, arr) {
+    if (arr.length >= obj.columns) {
+      obj.columns = arr.length;
+    }
+
+    return obj;
+  }, {
+    rows: configToUse.characters.length,
+    columns: 0
+  });
+  var popoverEl;
+
+  var closePopOver = function closePopOver() {
+    if (popoverEl) {
+      popoverEl.remove();
+    }
+
+    removePopOvers();
+  };
+
+  var renderPopOver = function renderPopOver(event, el) {
+    if (!event) {
+      return;
+    }
+
+    var infoStyle = {
+      fontSize: '20px',
+      lineHeight: '20px'
+    };
+    closePopOver();
+    popoverEl = document.createElement('div');
+
+    _reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(_customPopover["default"], {
+      onClose: closePopOver,
+      anchorEl: event.currentTarget
+    }, /*#__PURE__*/_react["default"].createElement("div", null, el.label), /*#__PURE__*/_react["default"].createElement("div", {
+      style: infoStyle
+    }, el.description), /*#__PURE__*/_react["default"].createElement("div", {
+      style: infoStyle
+    }, el.unicode)), popoverEl);
+
+    document.body.appendChild(newEl);
+  };
+
+  var handleClose = function handleClose() {
+    newEl.remove();
+    closePopOver();
+    document.body.style.overflow = initialBodyOverflow;
+    callback(undefined, true);
+  };
+
+  var handleChange = function handleChange(val) {
+    if (typeof val === 'string') {
+      callback(val);
+    }
+
+    if (configToUse.autoClose) {
+      handleClose();
+    }
+  };
+
+  var el = /*#__PURE__*/_react["default"].createElement(_mathToolbar.PureToolbar, {
+    autoFocus: true,
+    noDecimal: true,
+    hideInput: true,
+    noLatexHandling: true,
+    layoutForKeyPad: layoutForCharacters,
+    additionalKeys: configToUse.characters.reduce(function (arr, n) {
+      arr = [].concat(_toConsumableArray(arr), _toConsumableArray(n.map(function (k) {
+        return _objectSpread({
+          name: (0, _get["default"])(k, 'name') || k,
+          write: (0, _get["default"])(k, 'write') || k,
+          label: (0, _get["default"])(k, 'label') || k,
+          category: 'character',
+          extraClass: 'character'
+        }, configToUse.hasPreview ? {
+          actions: {
+            onMouseEnter: function onMouseEnter(ev) {
+              return renderPopOver(ev, k);
+            },
+            onMouseLeave: closePopOver
+          }
+        } : {});
+      })));
+      return arr;
+    }, []),
+    keypadMode: "language",
+    onChange: handleChange,
+    onDone: handleClose
+  });
+
+  _reactDom["default"].render(el, newEl, function () {
+    var cursorItem = document.querySelector("[data-key=\"".concat(value.anchorKey, "\"]"));
+
+    if (cursorItem) {
+      var boundRect = cursorItem.getBoundingClientRect();
+      document.body.appendChild(newEl);
+      newEl.style.position = 'fixed';
+      newEl.style.top = "".concat(boundRect.top - newEl.offsetHeight - 10, "px");
+      newEl.style.left = "".concat(boundRect.left + cursorItem.offsetWidth + 10, "px");
+      newEl.style.zIndex = 99999;
+      var firstCallMade = false;
+
+      var listener = function listener() {
+        // 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) {
+          document.body.removeEventListener('click', listener);
+          handleClose();
+        } else {
+          firstCallMade = true;
+        }
+      };
+
+      if (configToUse.autoClose) {
+        document.body.addEventListener('click', listener);
+      }
+    }
+  });
+};
+
+var CharacterIcon = function CharacterIcon(_ref2) {
+  var letter = _ref2.letter;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontSize: '25px',
+      lineHeight: '15px'
+    }
+  }, letter);
+};
+
+function CharactersPlugin(opts) {
+  removeDialogs();
+  return {
+    name: 'math',
+    toolbar: {
+      icon: /*#__PURE__*/_react["default"].createElement(CharacterIcon, {
+        letter: opts.characterIcon || _utils2.characterIcons[opts.language] || 'ñ'
+      }),
+      onClick: function onClick(value, onChange) {
+        var valueToUse = value;
+
+        var callback = function callback(_char, focus) {
+          if (_char) {
+            var change = valueToUse.change().insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, _char);
+            valueToUse = change.value;
+            log('[characters:insert]: ', value);
+            onChange(change);
+          }
+
+          log('[characters:click]');
+
+          if (focus) {
+            var editorDOM = document.querySelector("[data-key=\"".concat(valueToUse.document.key, "\"]"));
+
+            if (editorDOM) {
+              editorDOM.focus();
+            }
+          }
+        };
+
+        insertDialog({
+          value: valueToUse,
+          callback: callback,
+          opts: opts
+        });
+      }
+    },
+    pluginStyles: function pluginStyles(node, parentNode, p) {
+      if (p) {
+        return {
+          position: 'absolute',
+          top: 'initial'
+        };
+      }
+    }
+  };
+}
+//# sourceMappingURL=index.js.map

package/lib/plugins/characters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/plugins/characters/index.jsx"],"names":["log","removeDialogs","prevDialogs","document","querySelectorAll","forEach","s","remove","removePopOvers","prevPopOvers","insertDialog","value","callback","opts","newEl","createElement","initialBodyOverflow","body","style","overflow","className","configToUse","language","spanishConfig","specialConfig","characters","layoutForCharacters","reduce","obj","arr","length","columns","rows","popoverEl","closePopOver","renderPopOver","event","el","infoStyle","fontSize","lineHeight","ReactDOM","render","currentTarget","label","description","unicode","appendChild","handleClose","undefined","handleChange","val","autoClose","n","map","k","name","write","category","extraClass","hasPreview","actions","onMouseEnter","ev","onMouseLeave","cursorItem","querySelector","anchorKey","boundRect","getBoundingClientRect","position","top","offsetHeight","left","offsetWidth","zIndex","firstCallMade","listener","removeEventListener","addEventListener","CharacterIcon","letter","CharactersPlugin","toolbar","icon","characterIcon","characterIcons","onClick","onChange","valueToUse","char","focus","change","insertTextByKey","anchorOffset","editorDOM","key","pluginStyles","node","parentNode","p"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\nimport get from 'lodash/get';\n\nimport { PureToolbar } from '@pie-lib/math-toolbar';\n\nimport CustomPopOver from './custom-popover';\nimport { insertSnackBar } from '../respArea/utils';\nimport { characterIcons, spanishConfig, specialConfig } from './utils';\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nconst removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-character-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach(s => s.remove());\n};\n\nconst removePopOvers = () => {\n  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');\n\n  log('[characters:removePopOvers]');\n  prevPopOvers.forEach(s => s.remove());\n};\n\nconst insertDialog = ({ value, callback, opts }) => {\n  const newEl = document.createElement('div');\n  const initialBodyOverflow = document.body.style.overflow;\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-character-dialog';\n  document.body.style.overflow = 'hidden';\n\n  let configToUse;\n\n  switch (true) {\n    case opts.language === 'spanish':\n      configToUse = spanishConfig;\n      break;\n    case opts.language === 'special':\n      configToUse = specialConfig;\n      break;\n    default:\n      configToUse = opts;\n  }\n\n  if (!configToUse.characters) {\n    insertSnackBar('No characters provided or language not recognized');\n    return;\n  }\n\n  const layoutForCharacters = configToUse.characters.reduce(\n    (obj, arr) => {\n      if (arr.length >= obj.columns) {\n        obj.columns = arr.length;\n      }\n\n      return obj;\n    },\n    { rows: configToUse.characters.length, columns: 0 }\n  );\n\n  let popoverEl;\n\n  const closePopOver = () => {\n    if (popoverEl) {\n      popoverEl.remove();\n    }\n\n    removePopOvers();\n  };\n\n  const renderPopOver = (event, el) => {\n    if (!event) {\n      return;\n    }\n\n    const infoStyle = { fontSize: '20px', lineHeight: '20px' };\n\n    closePopOver();\n\n    popoverEl = document.createElement('div');\n    ReactDOM.render(\n      <CustomPopOver onClose={closePopOver} anchorEl={event.currentTarget}>\n        <div>{el.label}</div>\n\n        <div style={infoStyle}>{el.description}</div>\n\n        <div style={infoStyle}>{el.unicode}</div>\n      </CustomPopOver>,\n      popoverEl\n    );\n\n    document.body.appendChild(newEl);\n  };\n\n  const handleClose = () => {\n    newEl.remove();\n    closePopOver();\n    document.body.style.overflow = initialBodyOverflow;\n    callback(undefined, true);\n  };\n\n  const handleChange = val => {\n    if (typeof val === 'string') {\n      callback(val);\n    }\n\n    if (configToUse.autoClose) {\n      handleClose();\n    }\n  };\n\n  const el = (\n    <PureToolbar\n      autoFocus\n      noDecimal\n      hideInput\n      noLatexHandling\n      layoutForKeyPad={layoutForCharacters}\n      additionalKeys={configToUse.characters.reduce((arr, n) => {\n        arr = [\n          ...arr,\n          ...n.map(k => ({\n            name: get(k, 'name') || k,\n            write: get(k, 'write') || k,\n            label: get(k, 'label') || k,\n            category: 'character',\n            extraClass: 'character',\n            ...(configToUse.hasPreview\n              ? {\n                  actions: { onMouseEnter: ev => renderPopOver(ev, k), onMouseLeave: closePopOver }\n                }\n              : {})\n          }))\n        ];\n\n        return arr;\n      }, [])}\n      keypadMode=\"language\"\n      onChange={handleChange}\n      onDone={handleClose}\n    />\n  );\n\n  ReactDOM.render(el, newEl, () => {\n    const cursorItem = document.querySelector(`[data-key=\"${value.anchorKey}\"]`);\n\n    if (cursorItem) {\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      document.body.appendChild(newEl);\n      newEl.style.position = 'fixed';\n      newEl.style.top = `${boundRect.top - newEl.offsetHeight - 10}px`;\n      newEl.style.left = `${boundRect.left + cursorItem.offsetWidth + 10}px`;\n      newEl.style.zIndex = 99999;\n\n      let firstCallMade = false;\n\n      const listener = () => {\n        // this will be triggered right after setting it because\n        // this toolbar is added on the mousedown event\n        // so right after mouseup, the click will be triggered\n        if (firstCallMade) {\n          document.body.removeEventListener('click', listener);\n          handleClose();\n        } else {\n          firstCallMade = true;\n        }\n      };\n\n      if (configToUse.autoClose) {\n        document.body.addEventListener('click', listener);\n      }\n    }\n  });\n};\n\nconst CharacterIcon = ({ letter }) => (\n  <div\n    style={{\n      fontSize: '25px',\n      lineHeight: '15px'\n    }}\n  >\n    {letter}\n  </div>\n);\n\nexport default function CharactersPlugin(opts) {\n  removeDialogs();\n  return {\n    name: 'math',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      onClick: (value, onChange) => {\n        let valueToUse = value;\n        const callback = (char, focus) => {\n          if (char) {\n            const change = valueToUse\n              .change()\n              .insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);\n\n            valueToUse = change.value;\n            log('[characters:insert]: ', value);\n            onChange(change);\n          }\n\n          log('[characters:click]');\n\n          if (focus) {\n            const editorDOM = document.querySelector(`[data-key=\"${valueToUse.document.key}\"]`);\n\n            if (editorDOM) {\n              editorDOM.focus();\n            }\n          }\n        };\n\n        insertDialog({ value: valueToUse, callback, opts });\n      }\n    },\n\n    pluginStyles: (node, parentNode, p) => {\n      if (p) {\n        return {\n          position: 'absolute',\n          top: 'initial'\n        };\n      }\n    }\n  };\n}\n"],"file":"index.js"}

package/lib/plugins/characters/utils.js

@@ -0,0 +1,362 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.specialConfig = exports.spanishConfig = exports.characterIcons = void 0;
+var spanishConfig = {
+  characters: [['á', 'é', 'í', 'ó', 'ú'], ['Á', 'É', 'Í', 'Ó', 'Ú'], ['—', '«', '»', 'ñ', 'ü'], ['-', '¿', '¡', 'Ñ', 'Ü']],
+  autoClose: true
+};
+exports.spanishConfig = spanishConfig;
+var 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: '´'
+  }, {
+    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: '^'
+  }, {
+    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: '¨'
+  }, {
+    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: '`'
+  }, {
+    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: '—'
+  }]]
+};
+exports.specialConfig = specialConfig;
+var characterIcons = {
+  spanish: 'ñ',
+  special: '€'
+};
+exports.characterIcons = characterIcons;
+//# sourceMappingURL=utils.js.map