@pie-lib/editable-html 9.1.2 → 9.1.3

package/src/plugins/characters/{custom-popover.js → custom-popper.js}

@@ -1,10 +1,12 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Popover from '@material-ui/core/Popover';
+import Popper from '@material-ui/core/Popper';
 import Typography from '@material-ui/core/Typography';
 
 const styles = () => ({
   popover: {
+    background: '#fff',
+    padding: '10px',
     pointerEvents: 'none',
     zIndex: 99999
   },
@@ -19,8 +21,8 @@ const styles = () => ({
   }
 });
 
-const CustomPopOver = withStyles(styles)(({ classes, children, ...props }) => (
-  <Popover
+const CustomPopper = withStyles(styles)(({ classes, children, ...props }) => (
+  <Popper
     id="mouse-over-popover"
     open
     className={classes.popover}
@@ -36,10 +38,11 @@ const CustomPopOver = withStyles(styles)(({ classes, children, ...props }) => (
       horizontal: 'left'
     }}
     disableRestoreFocus
+    disableAutoFocus
     {...props}
   >
     <Typography classes={{ root: classes.typography }}>{children}</Typography>
-  </Popover>
+  </Popper>
 ));
 
-export default CustomPopOver;
+export default CustomPopper;

package/src/plugins/characters/index.jsx

@@ -5,18 +5,11 @@ import get from 'lodash/get';
 
 import { PureToolbar } from '@pie-lib/math-toolbar';
 
-import CustomPopOver from './custom-popover';
+import CustomPopper from './custom-popper';
 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');
 
@@ -24,16 +17,22 @@ const removePopOvers = () => {
   prevPopOvers.forEach(s => s.remove());
 };
 
-const insertDialog = ({ value, callback, opts }) => {
+export const removeDialogs = () => {
+  const prevDialogs = document.querySelectorAll('.insert-character-dialog');
+
+  log('[characters:removeDialogs]');
+  prevDialogs.forEach(s => s.remove());
+  removePopOvers();
+};
+
+const insertDialog = ({ editorDOM, 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;
 
@@ -85,33 +84,48 @@ const insertDialog = ({ value, callback, opts }) => {
 
     popoverEl = document.createElement('div');
     ReactDOM.render(
-      <CustomPopOver onClose={closePopOver} anchorEl={event.currentTarget}>
+      <CustomPopper onClose={closePopOver} anchorEl={event.currentTarget}>
         <div>{el.label}</div>
 
         <div style={infoStyle}>{el.description}</div>
 
         <div style={infoStyle}>{el.unicode}</div>
-      </CustomPopOver>,
+      </CustomPopper>,
       popoverEl
     );
 
     document.body.appendChild(newEl);
   };
 
+  let firstCallMade = false;
+
+  const 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) {
+      const focusIsInModals =
+        newEl.contains(e.target) || (popoverEl && popoverEl.contains(e.target));
+      const focusIsInEditor = editorDOM.contains(e.target);
+
+      if (!(focusIsInModals || focusIsInEditor)) {
+        handleClose();
+      }
+    } else {
+      firstCallMade = true;
+    }
+  };
+
   const handleClose = () => {
+    callback(undefined, true);
     newEl.remove();
     closePopOver();
-    document.body.style.overflow = initialBodyOverflow;
-    callback(undefined, true);
+    document.body.removeEventListener('click', listener);
   };
 
   const handleChange = val => {
     if (typeof val === 'string') {
-      callback(val);
-    }
-
-    if (configToUse.autoClose) {
-      handleClose();
+      callback(val, true);
     }
   };
 
@@ -158,31 +172,40 @@ const insertDialog = ({ value, callback, opts }) => {
     const cursorItem = document.querySelector(`[data-key="${value.anchorKey}"]`);
 
     if (cursorItem) {
+      const bodyRect = document.body.getBoundingClientRect();
       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.position = 'absolute';
+      newEl.style.top = `${boundRect.top + Math.abs(bodyRect.top) - newEl.offsetHeight - 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 leftValue = `${boundRect.left +
+        Math.abs(bodyRect.left) +
+        cursorItem.offsetWidth +
+        10}px`;
+
+      const rightValue = `${boundRect.x}px`;
+
+      newEl.style.left = leftValue;
+
+      const leftAlignedWidth = newEl.offsetWidth;
+
+      newEl.style.left = 'unset';
+      newEl.style.right = rightValue;
+
+      const 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);
     }
   });
 };
@@ -201,12 +224,15 @@ const CharacterIcon = ({ letter }) => (
 export default function CharactersPlugin(opts) {
   removeDialogs();
   return {
-    name: 'math',
+    name: 'characters',
     toolbar: {
       icon: <CharacterIcon letter={opts.characterIcon || characterIcons[opts.language] || 'ñ'} />,
-      onClick: (value, onChange) => {
+      onClick: (value, onChange, getFocusedValue) => {
+        const editorDOM = document.querySelector(`[data-key="${value.document.key}"]`);
         let valueToUse = value;
         const callback = (char, focus) => {
+          valueToUse = getFocusedValue();
+
           if (char) {
             const change = valueToUse
               .change()
@@ -220,15 +246,13 @@ export default function CharactersPlugin(opts) {
           log('[characters:click]');
 
           if (focus) {
-            const editorDOM = document.querySelector(`[data-key="${valueToUse.document.key}"]`);
-
             if (editorDOM) {
               editorDOM.focus();
             }
           }
         };
 
-        insertDialog({ value: valueToUse, callback, opts });
+        insertDialog({ editorDOM, value: valueToUse, callback, opts });
       }
     },
 

package/src/plugins/characters/utils.js

@@ -4,8 +4,7 @@ export const spanishConfig = {
     ['Á', 'É', 'Í', 'Ó', 'Ú'],
     ['—', '«', '»', 'ñ', 'ü'],
     ['-', '¿', '¡', 'Ñ', 'Ü']
-  ],
-  autoClose: true
+  ]
 };
 
 export const specialConfig = {

package/src/plugins/toolbar/default-toolbar.jsx

@@ -40,7 +40,7 @@ export const ToolbarButton = props => {
       <Button
         active={isActive}
         disabled={disabled}
-        onClick={() => props.onClick(props.value, props.onChange)}
+        onClick={() => props.onClick(props.value, props.onChange, props.getFocusedValue)}
         extraStyles={props.buttonStyles}
       >
         {props.icon}
@@ -60,6 +60,7 @@ export const DefaultToolbar = ({
   pluginProps,
   value,
   onChange,
+  getFocusedValue,
   onDone,
   classes,
   showDone,
@@ -71,7 +72,15 @@ export const DefaultToolbar = ({
     <div className={classes.defaultToolbar}>
       <div className={classes.buttonsContainer}>
         {filtered.map((p, index) => {
-          return <ToolbarButton {...p} key={index} value={value} onChange={onChange} />;
+          return (
+            <ToolbarButton
+              {...p}
+              key={index}
+              value={value}
+              onChange={onChange}
+              getFocusedValue={getFocusedValue}
+            />
+          );
         })}
       </div>
       {showDone && !deletable && <DoneButton onClick={onDone} />}
@@ -85,6 +94,7 @@ DefaultToolbar.propTypes = {
   pluginProps: PropTypes.object,
   value: SlatePropTypes.value.isRequired,
   onChange: PropTypes.func.isRequired,
+  getFocusedValue: PropTypes.func.isRequired,
   onDone: PropTypes.func.isRequired,
   showDone: PropTypes.bool,
   addArea: PropTypes.bool,

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -17,6 +17,7 @@ export class EditorAndToolbar extends React.Component {
     value: SlatePropTypes.value.isRequired,
     plugins: PropTypes.array.isRequired,
     onChange: PropTypes.func.isRequired,
+    getFocusedValue: PropTypes.func.isRequired,
     onDone: PropTypes.func.isRequired,
     onDataChange: PropTypes.func,
     toolbarRef: PropTypes.func,
@@ -49,6 +50,7 @@ export class EditorAndToolbar extends React.Component {
       value,
       plugins,
       onChange,
+      getFocusedValue,
       onDone,
       focusedNode,
       autoWidth,
@@ -113,6 +115,7 @@ export class EditorAndToolbar extends React.Component {
           value={value}
           isFocused={inFocus}
           onChange={onChange}
+          getFocusedValue={getFocusedValue}
           onDone={onDone}
           onDataChange={onDataChange}
           toolbarRef={toolbarRef}

package/src/plugins/toolbar/toolbar.jsx

@@ -13,6 +13,7 @@ import { DoneButton } from './done-button';
 import { findSingleNode, findParentNode } from '../utils';
 import { withStyles } from '@material-ui/core/styles';
 import DefaultToolbar from './default-toolbar';
+import { removeDialogs as removeCharacterDialogs } from '../characters';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
@@ -50,6 +51,7 @@ export class Toolbar extends React.Component {
     isFocused: PropTypes.bool,
     autoWidth: PropTypes.bool,
     onChange: PropTypes.func.isRequired,
+    getFocusedValue: PropTypes.func.isRequired,
     pluginProps: PropTypes.object,
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
@@ -68,6 +70,10 @@ export class Toolbar extends React.Component {
     };
   }
 
+  componentWillUnmount() {
+    removeCharacterDialogs();
+  }
+
   hasMark = type => {
     const { value } = this.props;
     return value.marks.some(mark => mark.type == type);
@@ -136,6 +142,7 @@ export class Toolbar extends React.Component {
       value,
       autoWidth,
       onChange,
+      getFocusedValue,
       isFocused,
       onDone,
       toolbarRef
@@ -248,6 +255,7 @@ export class Toolbar extends React.Component {
             pluginProps={pluginProps}
             value={value}
             onChange={onChange}
+            getFocusedValue={getFocusedValue}
             showDone={defaultToolbarShowDone}
             onDone={handleDone}
             deletable={deletable}

package/lib/plugins/characters/custom-popover.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/plugins/characters/custom-popover.js"],"names":["styles","popover","pointerEvents","zIndex","paper","padding","height","width","typography","fontSize","textAlign","CustomPopOver","classes","children","props","vertical","horizontal","root"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,OAAO,EAAE;AACPC,MAAAA,aAAa,EAAE,MADR;AAEPC,MAAAA,MAAM,EAAE;AAFD,KADW;AAKpBC,IAAAA,KAAK,EAAE;AACLC,MAAAA,OAAO,EAAE,EADJ;AAELC,MAAAA,MAAM,EAAE,MAFH;AAGLC,MAAAA,KAAK,EAAE;AAHF,KALa;AAUpBC,IAAAA,UAAU,EAAE;AACVC,MAAAA,QAAQ,EAAE,EADA;AAEVC,MAAAA,SAAS,EAAE;AAFD;AAVQ,GAAP;AAAA,CAAf;;AAgBA,IAAMC,aAAa,GAAG,wBAAWX,MAAX,EAAmB;AAAA,MAAGY,OAAH,QAAGA,OAAH;AAAA,MAAYC,QAAZ,QAAYA,QAAZ;AAAA,MAAyBC,KAAzB;AAAA,sBACvC,gCAAC,mBAAD;AACE,IAAA,EAAE,EAAC,oBADL;AAEE,IAAA,IAAI,MAFN;AAGE,IAAA,SAAS,EAAEF,OAAO,CAACX,OAHrB;AAIE,IAAA,OAAO,EAAE;AACPG,MAAAA,KAAK,EAAEQ,OAAO,CAACR;AADR,KAJX;AAOE,IAAA,YAAY,EAAE;AACZW,MAAAA,QAAQ,EAAE,QADE;AAEZC,MAAAA,UAAU,EAAE;AAFA,KAPhB;AAWE,IAAA,eAAe,EAAE;AACfD,MAAAA,QAAQ,EAAE,KADK;AAEfC,MAAAA,UAAU,EAAE;AAFG,KAXnB;AAeE,IAAA,mBAAmB;AAfrB,KAgBMF,KAhBN,gBAkBE,gCAAC,sBAAD;AAAY,IAAA,OAAO,EAAE;AAAEG,MAAAA,IAAI,EAAEL,OAAO,CAACJ;AAAhB;AAArB,KAAoDK,QAApD,CAlBF,CADuC;AAAA,CAAnB,CAAtB;eAuBeF,a","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport Popover from '@material-ui/core/Popover';\nimport Typography from '@material-ui/core/Typography';\n\nconst styles = () => ({\n  popover: {\n    pointerEvents: 'none',\n    zIndex: 99999\n  },\n  paper: {\n    padding: 20,\n    height: 'auto',\n    width: 'auto'\n  },\n  typography: {\n    fontSize: 50,\n    textAlign: 'center'\n  }\n});\n\nconst CustomPopOver = withStyles(styles)(({ classes, children, ...props }) => (\n  <Popover\n    id=\"mouse-over-popover\"\n    open\n    className={classes.popover}\n    classes={{\n      paper: classes.paper\n    }}\n    anchorOrigin={{\n      vertical: 'bottom',\n      horizontal: 'left'\n    }}\n    transformOrigin={{\n      vertical: 'top',\n      horizontal: 'left'\n    }}\n    disableRestoreFocus\n    {...props}\n  >\n    <Typography classes={{ root: classes.typography }}>{children}</Typography>\n  </Popover>\n));\n\nexport default CustomPopOver;\n"],"file":"custom-popover.js"}