@pie-lib/editable-html 9.6.2-next.0 → 9.6.2-next.27

package/lib/plugins/characters/index.js

@@ -209,6 +209,7 @@ var insertDialog = function insertDialog(_ref) {
         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;

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

@@ -1 +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","n","map","k","name","write","category","extraClass","extraProps","style","border","hasPreview","actions","onMouseEnter","ev","onMouseLeave","cursorItem","querySelector","anchorKey","bodyRect","getBoundingClientRect","boundRect","additionalTopOffset","y","offsetHeight","position","top","Math","abs","zIndex","leftValue","left","offsetWidth","rightValue","x","leftAlignedWidth","right","rightAlignedWidth","addEventListener","CharacterIcon","letter","propTypes","PropTypes","string","CharactersPlugin","toolbar","icon","characterIcon","characterIcons","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';\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      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.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: '25px',\n      lineHeight: '15px',\n    }}\n  >\n    {letter}\n  </div>\n);\n\nCharacterIcon.propTypes = {\n  letter: PropTypes.string,\n};\n\nexport default function CharactersPlugin(opts) {\n  removeDialogs();\n  return {\n    name: 'characters',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      onClick: (value, onChange, getFocusedValue) => {\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n        const callback = (char, focus) => {\n          valueToUse = getFocusedValue();\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"}
+{"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","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","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';\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      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: '25px',\n      lineHeight: '15px',\n    }}\n  >\n    {letter}\n  </div>\n);\n\nCharacterIcon.propTypes = {\n  letter: PropTypes.string,\n};\n\nexport default function CharactersPlugin(opts) {\n  removeDialogs();\n  return {\n    name: 'characters',\n    toolbar: {\n      icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,\n      onClick: (value, onChange, getFocusedValue) => {\n        const editorDOM = document.querySelector(`[data-key=\"${value.document.key}\"]`);\n        let valueToUse = value;\n        const callback = (char, focus) => {\n          valueToUse = getFocusedValue();\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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "9.6.2-next.0+15460080",
+  "version": "9.6.2-next.27+a87c17e8",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -12,8 +12,8 @@
     "@material-ui/styles": "^3.0.0-alpha.10",
     "@pie-lib/drag": "^2.1.18",
     "@pie-lib/math-rendering": "^2.5.14",
-    "@pie-lib/math-toolbar": "^1.11.27",
-    "@pie-lib/render-ui": "^4.14.25-next.0+15460080",
+    "@pie-lib/math-toolbar": "^1.11.28-next.46+a87c17e8",
+    "@pie-lib/render-ui": "^4.14.24",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -47,6 +47,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "154600802a4a23ddca033f39f5a813b9fb257571",
+  "gitHead": "a87c17e895cf6c7d606f848daec00c10fe84c9ec",
   "scripts": {}
 }

package/src/plugins/characters/index.jsx

@@ -184,6 +184,7 @@ const insertDialog = ({ editorDOM, value, callback, opts }) => {
         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;