@pie-lib/editable-html 11.2.1-beta.0 → 11.4.0

package/lib/plugins/characters/index.js

@@ -0,0 +1,305 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CharactersPlugin;
+exports.removeDialogs = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+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 _customPopper = _interopRequireDefault(require("./custom-popper"));
+
+var _utils = require("../respArea/utils");
+
+var _utils2 = require("./utils");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var log = (0, _debug["default"])('@pie-lib:editable-html:plugins:characters');
+
+var removePopOvers = function removePopOvers() {
+  var prevPopOvers = document.querySelectorAll('#mouse-over-popover');
+  log('[characters:removePopOvers]');
+  prevPopOvers.forEach(function (s) {
+    return s.remove();
+  });
+};
+
+var removeDialogs = function removeDialogs() {
+  var prevDialogs = document.querySelectorAll('.insert-character-dialog');
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach(function (s) {
+    return s.remove();
+  });
+  removePopOvers();
+};
+
+exports.removeDialogs = removeDialogs;
+
+var insertDialog = function insertDialog(_ref) {
+  var editorDOM = _ref.editorDOM,
+      value = _ref.value,
+      callback = _ref.callback,
+      opts = _ref.opts;
+  var newEl = document.createElement('div');
+  log('[characters:insertDialog]');
+  removeDialogs();
+  newEl.className = 'insert-character-dialog';
+  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(_customPopper["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 firstCallMade = false;
+
+  var listener = function 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) {
+      var focusIsInModals = newEl.contains(e.target) || popoverEl && popoverEl.contains(e.target);
+      var focusIsInEditor = editorDOM.contains(e.target);
+
+      if (!(focusIsInModals || focusIsInEditor)) {
+        handleClose();
+      }
+    } else {
+      firstCallMade = true;
+    }
+  };
+
+  var handleClose = function handleClose() {
+    callback(undefined, true);
+    newEl.remove();
+    closePopOver();
+    document.body.removeEventListener('click', listener);
+  };
+
+  var handleChange = function handleChange(val) {
+    if (typeof val === 'string') {
+      callback(val, true);
+    }
+  };
+
+  var el = /*#__PURE__*/_react["default"].createElement(_mathToolbar.PureToolbar, {
+    keyPadCharacterRef: opts.keyPadCharacterRef,
+    setKeypadInteraction: opts.setKeypadInteraction,
+    autoFocus: true,
+    noDecimal: true,
+    hideInput: true,
+    noLatexHandling: true,
+    hideDoneButtonBackground: true,
+    layoutForKeyPad: layoutForCharacters,
+    additionalKeys: configToUse.characters.reduce(function (arr, n) {
+      arr = [].concat((0, _toConsumableArray2["default"])(arr), (0, _toConsumableArray2["default"])(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',
+          extraProps: _objectSpread(_objectSpread({}, k.extraProps || {}), {}, {
+            style: _objectSpread(_objectSpread({}, (k.extraProps || {}).style), {}, {
+              border: '1px solid #000'
+            })
+          })
+        }, 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 bodyRect = document.body.getBoundingClientRect();
+      var boundRect = cursorItem.getBoundingClientRect();
+      document.body.appendChild(newEl); // when height of toolbar exceeds screen - can happen in scrollable contexts
+
+      var additionalTopOffset = 0;
+
+      if (boundRect.y < newEl.offsetHeight) {
+        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;
+      }
+
+      newEl.style.maxWidth = '500px';
+      newEl.style.position = 'absolute';
+      newEl.style.top = "".concat(boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10 + additionalTopOffset, "px");
+      newEl.style.zIndex = 99999;
+      var leftValue = "".concat(boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10, "px");
+      var rightValue = "".concat(boundRect.x, "px");
+      newEl.style.left = leftValue;
+      var leftAlignedWidth = newEl.offsetWidth;
+      newEl.style.left = 'unset';
+      newEl.style.right = rightValue;
+      var 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);
+    }
+  });
+};
+
+var CharacterIcon = function CharacterIcon(_ref2) {
+  var letter = _ref2.letter;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontSize: '24px',
+      lineHeight: '24px'
+    }
+  }, letter);
+};
+
+CharacterIcon.propTypes = {
+  letter: _propTypes["default"].string
+};
+
+function CharactersPlugin(opts) {
+  removeDialogs();
+  return {
+    name: 'characters',
+    toolbar: {
+      icon: /*#__PURE__*/_react["default"].createElement(CharacterIcon, {
+        letter: opts.characterIcon || _utils2.characterIcons[opts.language] || 'ñ'
+      }),
+      ariaLabel: "".concat(opts.language, " characters Toolbar"),
+      onClick: function onClick(value, onChange, getFocusedValue) {
+        var editorDOM = document.querySelector("[data-key=\"".concat(value.document.key, "\"]"));
+        var valueToUse = value;
+
+        var callback = function callback(_char, focus) {
+          if (getFocusedValue) {
+            valueToUse = getFocusedValue() || valueToUse;
+          }
+
+          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) {
+            if (editorDOM) {
+              editorDOM.focus();
+            }
+          }
+        };
+
+        insertDialog({
+          editorDOM: editorDOM,
+          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","removePopOvers","prevPopOvers","document","querySelectorAll","forEach","s","remove","removeDialogs","prevDialogs","insertDialog","editorDOM","value","callback","opts","newEl","createElement","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","body","appendChild","firstCallMade","listener","e","focusIsInModals","contains","target","focusIsInEditor","handleClose","undefined","removeEventListener","handleChange","val","keyPadCharacterRef","setKeypadInteraction","n","map","k","name","write","category","extraClass","extraProps","style","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","cursorItem","querySelector","anchorKey","bodyRect","getBoundingClientRect","boundRect","additionalTopOffset","y","offsetHeight","maxWidth","position","top","Math","abs","zIndex","leftValue","left","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","CharacterIcon","letter","propTypes","PropTypes","string","CharactersPlugin","toolbar","icon","characterIcon","characterIcons","ariaLabel","onClick","onChange","getFocusedValue","key","valueToUse","char","focus","change","insertTextByKey","anchorOffset","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 CustomPopper from './custom-popper';\nimport { insertSnackBar } from '../respArea/utils';\nimport { characterIcons, spanishConfig, specialConfig } from './utils';\nimport PropTypes from 'prop-types';\n\nconst log = debug('@pie-lib:editable-html:plugins:characters');\n\nconst removePopOvers = () => {\n  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');\n\n  log('[characters:removePopOvers]');\n  prevPopOvers.forEach((s) => s.remove());\n};\n\nexport const removeDialogs = () => {\n  const prevDialogs = document.querySelectorAll('.insert-character-dialog');\n\n  log('[characters:removeDialogs]');\n  prevDialogs.forEach((s) => s.remove());\n  removePopOvers();\n};\n\nconst insertDialog = ({ editorDOM, value, callback, opts }) => {\n  const newEl = document.createElement('div');\n\n  log('[characters:insertDialog]');\n\n  removeDialogs();\n\n  newEl.className = 'insert-character-dialog';\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      <CustomPopper 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      </CustomPopper>,\n      popoverEl,\n    );\n\n    document.body.appendChild(newEl);\n  };\n\n  let firstCallMade = false;\n\n  const listener = (e) => {\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      const focusIsInModals = newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));\n      const focusIsInEditor = editorDOM.contains(e.target);\n\n      if (!(focusIsInModals || focusIsInEditor)) {\n        handleClose();\n      }\n    } else {\n      firstCallMade = true;\n    }\n  };\n\n  const handleClose = () => {\n    callback(undefined, true);\n    newEl.remove();\n    closePopOver();\n    document.body.removeEventListener('click', listener);\n  };\n\n  const handleChange = (val) => {\n    if (typeof val === 'string') {\n      callback(val, true);\n    }\n  };\n\n  const el = (\n    <PureToolbar\n      keyPadCharacterRef={opts.keyPadCharacterRef}\n      setKeypadInteraction={opts.setKeypadInteraction}\n      autoFocus\n      noDecimal\n      hideInput\n      noLatexHandling\n      hideDoneButtonBackground\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            extraProps: {\n              ...(k.extraProps || {}),\n              style: {\n                ...(k.extraProps || {}).style,\n                border: '1px solid #000',\n              },\n            },\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 bodyRect = document.body.getBoundingClientRect();\n      const boundRect = cursorItem.getBoundingClientRect();\n\n      document.body.appendChild(newEl);\n\n      // when height of toolbar exceeds screen - can happen in scrollable contexts\n      let additionalTopOffset = 0;\n      if (boundRect.y < newEl.offsetHeight) {\n        additionalTopOffset = newEl.offsetHeight - boundRect.y + 10;\n      }\n\n      newEl.style.maxWidth = '500px';\n      newEl.style.position = 'absolute';\n      newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 10 + additionalTopOffset}px`;\n      newEl.style.zIndex = 99999;\n\n      const leftValue = `${boundRect.left + Math.abs(bodyRect.left) + cursorItem.offsetWidth + 10}px`;\n\n      const rightValue = `${boundRect.x}px`;\n\n      newEl.style.left = leftValue;\n\n      const leftAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = rightValue;\n\n      const rightAlignedWidth = newEl.offsetWidth;\n\n      newEl.style.left = 'unset';\n      newEl.style.right = 'unset';\n\n      if (leftAlignedWidth >= rightAlignedWidth) {\n        newEl.style.left = leftValue;\n      } else {\n        newEl.style.right = rightValue;\n      }\n\n      document.body.addEventListener('click', listener);\n    }\n  });\n};\n\nconst CharacterIcon = ({ letter }) => (\n  <div\n    style={{\n      fontSize: '24px',\n      lineHeight: '24px',\n    }}\n  >\n    {letter}\n  </div>\n);\n\nCharacterIcon.propTypes = {\n  letter: PropTypes.string,\n};\n\nexport default function CharactersPlugin(opts) {\n  removeDialogs();\n\n  return {\n    name: 'characters',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      ariaLabel: `${opts.language} characters Toolbar`,\n      onClick: (value, onChange, getFocusedValue) => {\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n\n        const callback = (char, focus) => {\n          if (getFocusedValue) {\n            valueToUse = getFocusedValue() || valueToUse;\n          }\n\n          if (char) {\n            const change = valueToUse.change().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            if (editorDOM) {\n              editorDOM.focus();\n            }\n          }\n        };\n\n        insertDialog({ editorDOM, 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"}