@pie-lib/editable-html 7.22.4 → 8.0.0

package/lib/plugins/index.js

@@ -15,6 +15,8 @@ var _image = _interopRequireDefault(require("./image"));
 
 var _media = _interopRequireDefault(require("./media"));
 
+var _characters = _interopRequireDefault(require("./characters"));
+
 var _FormatItalic = _interopRequireDefault(require("@material-ui/icons/FormatItalic"));
 
 var _math = _interopRequireDefault(require("./math"));
@@ -41,7 +43,18 @@ var _respArea = _interopRequireDefault(require("./respArea"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// import Code from '@material-ui/icons/Code';
+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');
 
 function MarkHotkey(options) {
@@ -79,7 +92,7 @@ function MarkHotkey(options) {
 }
 
 var ALL_PLUGINS = ['bold', // 'code',
-'italic', 'underline', 'strikethrough', 'bulleted-list', 'numbered-list', 'image', 'math', 'table', 'video', 'audio', 'responseArea'];
+'italic', 'underline', 'strikethrough', 'bulleted-list', 'numbered-list', 'image', 'math', 'languageCharacters', 'table', 'video', 'audio', 'responseArea'];
 exports.ALL_PLUGINS = ALL_PLUGINS;
 var DEFAULT_PLUGINS = ALL_PLUGINS.filter(function (plug) {
   return plug !== 'responseArea';
@@ -118,7 +131,9 @@ var buildPlugins = function buildPlugins(activePlugins, opts) {
     type: 'underline',
     icon: /*#__PURE__*/_react["default"].createElement(_FormatUnderlined["default"], null),
     tag: 'u'
-  })), addIf('image', imagePlugin), addIf('video', (0, _media["default"])('video', opts.media)), addIf('audio', (0, _media["default"])('audio', opts.media)), addIf('math', mathPlugin), addIf('bulleted-list', (0, _list["default"])({
+  })), addIf('image', imagePlugin), addIf('video', (0, _media["default"])('video', opts.media)), addIf('audio', (0, _media["default"])('audio', opts.media)), addIf('math', mathPlugin)].concat(_toConsumableArray(opts.languageCharacters.map(function (config) {
+    return addIf('languageCharacters', (0, _characters["default"])(config));
+  })), [addIf('bulleted-list', (0, _list["default"])({
     key: 'l',
     type: 'ul_list',
     icon: /*#__PURE__*/_react["default"].createElement(_FormatListBulleted["default"], null)
@@ -128,7 +143,7 @@ var buildPlugins = function buildPlugins(activePlugins, opts) {
     icon: /*#__PURE__*/_react["default"].createElement(_FormatListNumbered["default"], null)
   })), (0, _toolbar["default"])(opts.toolbar), (0, _slateSoftBreak["default"])({
     shift: true
-  }), addIf('responseArea', respAreaPlugin)]);
+  }), addIf('responseArea', respAreaPlugin)]));
 };
 
 exports.buildPlugins = buildPlugins;

package/lib/plugins/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugins/index.jsx"],"names":["log","MarkHotkey","options","type","key","icon","tag","toolbar","isMark","onToggle","change","toggleMark","renderMark","props","mark","K","children","onKeyDown","event","metaKey","preventDefault","ALL_PLUGINS","DEFAULT_PLUGINS","filter","plug","buildPlugins","activePlugins","opts","addIf","p","includes","imagePlugin","image","onDelete","mathPlugin","math","respAreaPlugin","responseArea","table","media","shift"],"mappings":"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","sourcesContent":["import Bold from '@material-ui/icons/FormatBold';\n// import Code from '@material-ui/icons/Code';\nimport BulletedListIcon from '@material-ui/icons/FormatListBulleted';\nimport NumberedListIcon from '@material-ui/icons/FormatListNumbered';\nimport ImagePlugin from './image';\nimport MediaPlugin from './media';\nimport Italic from '@material-ui/icons/FormatItalic';\nimport MathPlugin from './math';\nimport React from 'react';\nimport Strikethrough from '@material-ui/icons/FormatStrikethrough';\nimport ToolbarPlugin from './toolbar';\nimport Underline from '@material-ui/icons/FormatUnderlined';\nimport compact from 'lodash/compact';\nimport SoftBreakPlugin from 'slate-soft-break';\nimport debug from 'debug';\nimport List from './list';\nimport TablePlugin from './table';\nimport RespAreaPlugin from './respArea';\n\nconst log = debug('@pie-lib:editable-html:plugins');\n\nfunction MarkHotkey(options) {\n  const { type, key, icon, tag } = options;\n\n  // Return our \"plugin\" object, containing the `onKeyDown` handler.\n  return {\n    toolbar: {\n      isMark: true,\n      type,\n      icon,\n      onToggle: change => {\n        log('[onToggleMark] type: ', type);\n        return change.toggleMark(type);\n      }\n    },\n    renderMark(props) {\n      if (props.mark.type === type) {\n        const K = tag || type;\n        return <K>{props.children}</K>;\n      }\n    },\n    onKeyDown(event, change) {\n      // Check that the key pressed matches our `key` option.\n      if (!event.metaKey || event.key != key) return;\n\n      // Prevent the default characters from being inserted.\n      event.preventDefault();\n\n      // Toggle the mark `type`.\n      change.toggleMark(type);\n      return true;\n    }\n  };\n}\n\nexport const ALL_PLUGINS = [\n  'bold',\n  // 'code',\n  'italic',\n  'underline',\n  'strikethrough',\n  'bulleted-list',\n  'numbered-list',\n  'image',\n  'math',\n  'table',\n  'video',\n  'audio',\n  'responseArea'\n];\n\nexport const DEFAULT_PLUGINS = ALL_PLUGINS.filter(plug => plug !== 'responseArea');\n\nexport const buildPlugins = (activePlugins, opts) => {\n  log('[buildPlugins] opts: ', opts);\n\n  activePlugins = activePlugins || DEFAULT_PLUGINS;\n\n  const addIf = (key, p) => activePlugins.includes(key) && p;\n  const imagePlugin = opts.image && opts.image.onDelete && ImagePlugin(opts.image);\n  const mathPlugin = MathPlugin(opts.math);\n  const respAreaPlugin =\n    opts.responseArea &&\n    opts.responseArea.type &&\n    RespAreaPlugin(opts.responseArea, compact([mathPlugin]));\n\n  return compact([\n    addIf('table', TablePlugin(opts.table, compact([imagePlugin, mathPlugin, respAreaPlugin]))),\n    addIf('bold', MarkHotkey({ key: 'b', type: 'bold', icon: <Bold />, tag: 'strong' })),\n    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),\n    addIf('italic', MarkHotkey({ key: 'i', type: 'italic', icon: <Italic />, tag: 'em' })),\n    addIf(\n      'strikethrough',\n      MarkHotkey({\n        key: '~',\n        type: 'strikethrough',\n        icon: <Strikethrough />,\n        tag: 'del'\n      })\n    ),\n    addIf('underline', MarkHotkey({ key: 'u', type: 'underline', icon: <Underline />, tag: 'u' })),\n    addIf('image', imagePlugin),\n    addIf('video', MediaPlugin('video', opts.media)),\n    addIf('audio', MediaPlugin('audio', opts.media)),\n    addIf('math', mathPlugin),\n    addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),\n    addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),\n    ToolbarPlugin(opts.toolbar),\n    SoftBreakPlugin({ shift: true }),\n    addIf('responseArea', respAreaPlugin)\n  ]);\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/plugins/index.jsx"],"names":["log","MarkHotkey","options","type","key","icon","tag","toolbar","isMark","onToggle","change","toggleMark","renderMark","props","mark","K","children","onKeyDown","event","metaKey","preventDefault","ALL_PLUGINS","DEFAULT_PLUGINS","filter","plug","buildPlugins","activePlugins","opts","addIf","p","includes","imagePlugin","image","onDelete","mathPlugin","math","respAreaPlugin","responseArea","table","media","languageCharacters","map","config","shift"],"mappings":"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","sourcesContent":["import Bold from '@material-ui/icons/FormatBold';\n// import Code from '@material-ui/icons/Code';\nimport BulletedListIcon from '@material-ui/icons/FormatListBulleted';\nimport NumberedListIcon from '@material-ui/icons/FormatListNumbered';\nimport ImagePlugin from './image';\nimport MediaPlugin from './media';\nimport CharactersPlugin from './characters';\nimport Italic from '@material-ui/icons/FormatItalic';\nimport MathPlugin from './math';\nimport React from 'react';\nimport Strikethrough from '@material-ui/icons/FormatStrikethrough';\nimport ToolbarPlugin from './toolbar';\nimport Underline from '@material-ui/icons/FormatUnderlined';\nimport compact from 'lodash/compact';\nimport SoftBreakPlugin from 'slate-soft-break';\nimport debug from 'debug';\nimport List from './list';\nimport TablePlugin from './table';\nimport RespAreaPlugin from './respArea';\n\nconst log = debug('@pie-lib:editable-html:plugins');\n\nfunction MarkHotkey(options) {\n  const { type, key, icon, tag } = options;\n\n  // Return our \"plugin\" object, containing the `onKeyDown` handler.\n  return {\n    toolbar: {\n      isMark: true,\n      type,\n      icon,\n      onToggle: change => {\n        log('[onToggleMark] type: ', type);\n        return change.toggleMark(type);\n      }\n    },\n    renderMark(props) {\n      if (props.mark.type === type) {\n        const K = tag || type;\n        return <K>{props.children}</K>;\n      }\n    },\n    onKeyDown(event, change) {\n      // Check that the key pressed matches our `key` option.\n      if (!event.metaKey || event.key != key) return;\n\n      // Prevent the default characters from being inserted.\n      event.preventDefault();\n\n      // Toggle the mark `type`.\n      change.toggleMark(type);\n      return true;\n    }\n  };\n}\n\nexport const ALL_PLUGINS = [\n  'bold',\n  // 'code',\n  'italic',\n  'underline',\n  'strikethrough',\n  'bulleted-list',\n  'numbered-list',\n  'image',\n  'math',\n  'languageCharacters',\n  'table',\n  'video',\n  'audio',\n  'responseArea'\n];\n\nexport const DEFAULT_PLUGINS = ALL_PLUGINS.filter(plug => plug !== 'responseArea');\n\nexport const buildPlugins = (activePlugins, opts) => {\n  log('[buildPlugins] opts: ', opts);\n\n  activePlugins = activePlugins || DEFAULT_PLUGINS;\n\n  const addIf = (key, p) => activePlugins.includes(key) && p;\n  const imagePlugin = opts.image && opts.image.onDelete && ImagePlugin(opts.image);\n  const mathPlugin = MathPlugin(opts.math);\n  const respAreaPlugin =\n    opts.responseArea &&\n    opts.responseArea.type &&\n    RespAreaPlugin(opts.responseArea, compact([mathPlugin]));\n\n  return compact([\n    addIf('table', TablePlugin(opts.table, compact([imagePlugin, mathPlugin, respAreaPlugin]))),\n    addIf('bold', MarkHotkey({ key: 'b', type: 'bold', icon: <Bold />, tag: 'strong' })),\n    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),\n    addIf('italic', MarkHotkey({ key: 'i', type: 'italic', icon: <Italic />, tag: 'em' })),\n    addIf(\n      'strikethrough',\n      MarkHotkey({\n        key: '~',\n        type: 'strikethrough',\n        icon: <Strikethrough />,\n        tag: 'del'\n      })\n    ),\n    addIf('underline', MarkHotkey({ key: 'u', type: 'underline', icon: <Underline />, tag: 'u' })),\n    addIf('image', imagePlugin),\n    addIf('video', MediaPlugin('video', opts.media)),\n    addIf('audio', MediaPlugin('audio', opts.media)),\n    addIf('math', mathPlugin),\n    ...opts.languageCharacters.map(config => addIf('languageCharacters', CharactersPlugin(config))),\n    addIf('bulleted-list', List({ key: 'l', type: 'ul_list', icon: <BulletedListIcon /> })),\n    addIf('numbered-list', List({ key: 'n', type: 'ol_list', icon: <NumberedListIcon /> })),\n    ToolbarPlugin(opts.toolbar),\n    SoftBreakPlugin({ shift: true }),\n    addIf('responseArea', respAreaPlugin)\n  ]);\n};\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "7.22.4",
+  "version": "8.0.0",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -11,9 +11,9 @@
     "@material-ui/icons": "^3.0.2",
     "@material-ui/styles": "^3.0.0-alpha.10",
     "@pie-lib/drag": "^1.1.52",
-    "@pie-lib/math-rendering": "^2.4.1",
-    "@pie-lib/math-toolbar": "^1.9.3",
-    "@pie-lib/render-ui": "^4.12.7",
+    "@pie-lib/math-rendering": "^2.4.3",
+    "@pie-lib/math-toolbar": "^1.9.4",
+    "@pie-lib/render-ui": "^4.12.9",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -46,6 +46,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "611d47d0ed9fb2591be8f26cc78a40049e5e70a5",
+  "gitHead": "2f841d92dcda7472f18cbce517eb664dec2f6442",
   "scripts": {}
 }

package/src/editor.jsx

@@ -30,6 +30,8 @@ const defaultResponseAreaProps = {
   onHandleAreaChange: () => {}
 };
 
+const defaultLanguageCharactersProps = [];
+
 const createToolbarOpts = toolbarOpts => {
   return {
     ...defaultToolbarOpts,
@@ -49,6 +51,7 @@ export class Editor extends React.Component {
     focus: PropTypes.func.isRequired,
     value: SlateTypes.value.isRequired,
     imageSupport: PropTypes.object,
+    charactersLimit: PropTypes.number,
     width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     minHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -72,6 +75,13 @@ export class Editor extends React.Component {
       respAreaToolbar: PropTypes.func,
       onHandleAreaChange: PropTypes.func
     }),
+    languageCharactersProps: PropTypes.arrayOf(
+      PropTypes.shape({
+        language: PropTypes.string,
+        characterIcon: PropTypes.string,
+        characters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string))
+      })
+    ),
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
       alignment: PropTypes.oneOf(['left', 'right']),
@@ -87,7 +97,9 @@ export class Editor extends React.Component {
         new Error(`Invalid values: ${values}, values must be one of [${ALL_PLUGINS.join(',')}]`)
       );
     }),
-    className: PropTypes.string
+    className: PropTypes.string,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
   };
 
   static defaultProps = {
@@ -96,7 +108,8 @@ export class Editor extends React.Component {
     onBlur: () => {},
     onKeyDown: () => {},
     toolbarOpts: defaultToolbarOpts,
-    responseAreaProps: defaultResponseAreaProps
+    responseAreaProps: defaultResponseAreaProps,
+    languageCharactersProps: defaultLanguageCharactersProps
   };
 
   constructor(props) {
@@ -106,15 +119,19 @@ export class Editor extends React.Component {
       toolbarOpts: createToolbarOpts(props.toolbarOpts)
     };
 
+    this.onResize = () => {
+      props.onChange(this.state.value, true);
+    };
+
+    this.handlePlugins(this.props);
+  }
+
+  handlePlugins = props => {
     const normalizedResponseAreaProps = {
       ...defaultResponseAreaProps,
       ...props.responseAreaProps
     };
 
-    this.onResize = () => {
-      props.onChange(this.state.value, true);
-    };
-
     this.plugins = buildPlugins(props.activePlugins, {
       math: {
         onClick: this.onMathClick,
@@ -123,25 +140,27 @@ export class Editor extends React.Component {
       },
       image: {
         onDelete:
-          this.props.imageSupport &&
-          this.props.imageSupport.delete &&
+          props.imageSupport &&
+          props.imageSupport.delete &&
           ((src, done) => {
-            this.props.imageSupport.delete(src, e => {
+            props.imageSupport.delete(src, e => {
               done(e, this.state.value);
             });
           }),
         insertImageRequested:
-          this.props.imageSupport &&
+          props.imageSupport &&
           (getHandler => {
             /**
              * The handler is the object through which the outer context
              * communicates file upload events like: fileChosen, cancel, progress
              */
             const handler = getHandler(() => this.state.value);
-            this.props.imageSupport.add(handler);
+            props.imageSupport.add(handler);
           }),
         onFocus: this.onPluginFocus,
-        onBlur: this.onPluginBlur
+        onBlur: this.onPluginBlur,
+        maxImageWidth: this.props.maxImageWidth,
+        maxImageHeight: this.props.maxImageHeight,
       },
       toolbar: {
         /**
@@ -151,7 +170,7 @@ export class Editor extends React.Component {
         disableUnderline: props.disableUnderline,
         autoWidth: props.autoWidthToolbar,
         onDone: () => {
-          const { nonEmpty } = this.props;
+          const { nonEmpty } = props;
 
           log('[onDone]');
           this.setState({ toolbarInFocus: false, focusedNode: null });
@@ -192,13 +211,14 @@ export class Editor extends React.Component {
           this.onPluginBlur();
         }
       },
+      languageCharacters: props.languageCharactersProps,
       media: {
         focus: this.focus,
         createChange: () => this.state.value.change(),
         onChange: this.onChange
       }
     });
-  }
+  };
 
   componentDidMount() {
     // onRef is needed to get the ref of the component because we export it using withStyles
@@ -232,6 +252,10 @@ export class Editor extends React.Component {
         toolbarOpts: newToolbarOpts
       });
     }
+
+    if (!isEqual(nextProps.languageCharactersProps, this.props.languageCharactersProps)) {
+      this.handlePlugins(nextProps);
+    }
   }
 
   componentDidUpdate() {
@@ -440,7 +464,20 @@ export class Editor extends React.Component {
 
   onChange = (change, done) => {
     log('[onChange]');
-    this.setState({ value: change.value }, () => {
+
+    const { value } = change;
+    const { charactersLimit } = this.props;
+
+    if (
+      value &&
+      value.document &&
+      value.document.text &&
+      value.document.text.length > charactersLimit
+    ) {
+      return;
+    }
+
+    this.setState({ value }, () => {
       log('[onChange], call done()');
 
       if (done) {

package/src/plugins/characters/custom-popover.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Popover from '@material-ui/core/Popover';
+import Typography from '@material-ui/core/Typography';
+
+const styles = () => ({
+  popover: {
+    pointerEvents: 'none',
+    zIndex: 99999
+  },
+  paper: {
+    padding: 20,
+    height: 'auto',
+    width: 'auto'
+  },
+  typography: {
+    fontSize: 50,
+    textAlign: 'center'
+  }
+});
+
+const CustomPopOver = withStyles(styles)(({ classes, children, ...props }) => (
+  <Popover
+    id="mouse-over-popover"
+    open
+    className={classes.popover}
+    classes={{
+      paper: classes.paper
+    }}
+    anchorOrigin={{
+      vertical: 'bottom',
+      horizontal: 'left'
+    }}
+    transformOrigin={{
+      vertical: 'top',
+      horizontal: 'left'
+    }}
+    disableRestoreFocus
+    {...props}
+  >
+    <Typography classes={{ root: classes.typography }}>{children}</Typography>
+  </Popover>
+));
+
+export default CustomPopOver;

package/src/plugins/characters/index.jsx

@@ -0,0 +1,237 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import get from 'lodash/get';
+
+import { PureToolbar } from '@pie-lib/math-toolbar';
+
+import CustomPopOver from './custom-popover';
+import { insertSnackBar } from '../respArea/utils';
+import { characterIcons, spanishConfig, specialConfig } from './utils';
+const log = debug('@pie-lib:editable-html:plugins:characters');
+
+const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-character-dialog');
+
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach(s => s.remove());
+};
+
+const removePopOvers = () => {
+  const prevPopOvers = document.querySelectorAll('#mouse-over-popover');
+
+  log('[characters:removePopOvers]');
+  prevPopOvers.forEach(s => s.remove());
+};
+
+const insertDialog = ({ value, callback, opts }) => {
+  const newEl = document.createElement('div');
+  const initialBodyOverflow = document.body.style.overflow;
+
+  log('[characters:insertDialog]');
+
+  removeDialogs();
+
+  newEl.className = 'insert-character-dialog';
+  document.body.style.overflow = 'hidden';
+
+  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(
+      <CustomPopOver onClose={closePopOver} anchorEl={event.currentTarget}>
+        <div>{el.label}</div>
+
+        <div style={infoStyle}>{el.description}</div>
+
+        <div style={infoStyle}>{el.unicode}</div>
+      </CustomPopOver>,
+      popoverEl
+    );
+
+    document.body.appendChild(newEl);
+  };
+
+  const handleClose = () => {
+    newEl.remove();
+    closePopOver();
+    document.body.style.overflow = initialBodyOverflow;
+    callback(undefined, true);
+  };
+
+  const handleChange = val => {
+    if (typeof val === 'string') {
+      callback(val);
+    }
+
+    if (configToUse.autoClose) {
+      handleClose();
+    }
+  };
+
+  const el = (
+    <PureToolbar
+      autoFocus
+      noDecimal
+      hideInput
+      noLatexHandling
+      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',
+            ...(configToUse.hasPreview
+              ? {
+                  actions: { onMouseEnter: ev => renderPopOver(ev, k), onMouseLeave: closePopOver }
+                }
+              : {})
+          }))
+        ];
+
+        return arr;
+      }, [])}
+      keypadMode="language"
+      onChange={handleChange}
+      onDone={handleClose}
+    />
+  );
+
+  ReactDOM.render(el, newEl, () => {
+    const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
+
+    if (cursorItem) {
+      const boundRect = cursorItem.getBoundingClientRect();
+
+      document.body.appendChild(newEl);
+      newEl.style.position = 'fixed';
+      newEl.style.top = `${boundRect.top - newEl.offsetHeight - 10}px`;
+      newEl.style.left = `${boundRect.left + cursorItem.offsetWidth + 10}px`;
+      newEl.style.zIndex = 99999;
+
+      let firstCallMade = false;
+
+      const 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);
+      }
+    }
+  });
+};
+
+const CharacterIcon = ({ letter }) => (
+  <div
+    style={{
+      fontSize: '25px',
+      lineHeight: '15px'
+    }}
+  >
+    {letter}
+  </div>
+);
+
+export default function CharactersPlugin(opts) {
+  removeDialogs();
+  return {
+    name: 'math',
+    toolbar: {
+      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
+      onClick: (value, onChange) => {
+        let valueToUse = value;
+        const callback = (char, focus) => {
+          if (char) {
+            const change = valueToUse
+              .change()
+              .insertTextByKey(valueToUse.anchorKey, valueToUse.anchorOffset, char);
+
+            valueToUse = change.value;
+            log('[characters:insert]: ', value);
+            onChange(change);
+          }
+
+          log('[characters:click]');
+
+          if (focus) {
+            const editorDOM = document.querySelector(`[data-key="${valueToUse.document.key}"]`);
+
+            if (editorDOM) {
+              editorDOM.focus();
+            }
+          }
+        };
+
+        insertDialog({ value: valueToUse, callback, opts });
+      }
+    },
+
+    pluginStyles: (node, parentNode, p) => {
+      if (p) {
+        return {
+          position: 'absolute',
+          top: 'initial'
+        };
+      }
+    }
+  };
+}