@pie-lib/editable-html 9.2.6-next.4 → 9.2.7

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

@@ -24,16 +24,16 @@ export class TableToolbar extends React.Component {
     onToggleBorder: PropTypes.func.isRequired,
     hasBorder: PropTypes.bool,
     onDone: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
     plugins: [],
     value: {},
-    onChange: () => {}
+    onChange: () => {},
   };
 
-  onDone = e => {
+  onDone = (e) => {
     const { onDone } = this.props;
     e.preventDefault();
     onDone();
@@ -51,7 +51,7 @@ export class TableToolbar extends React.Component {
       onRemoveTable,
       onToggleBorder,
       hasBorder,
-      classes
+      classes,
     } = this.props;
     log('[render] hasBorder:', hasBorder);
 
@@ -74,12 +74,7 @@ export class TableToolbar extends React.Component {
             <RemoveTable />
           </Button>
           {plugins.map((p, index) => (
-            <ToolbarButton
-              key={`plugin-${index}`}
-              {...p.toolbar}
-              value={value}
-              onChange={onChange}
-            />
+            <ToolbarButton key={`plugin-${index}`} {...p.toolbar} value={value} onChange={onChange} />
           ))}
           <Button onClick={onToggleBorder} active={hasBorder}>
             <BorderAll />
@@ -95,10 +90,10 @@ const styles = () => ({
   tableToolbar: {
     width: '100%',
     display: 'flex',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
   toolbarButtons: {
-    display: 'flex'
-  }
+    display: 'flex',
+  },
 });
 export default withStyles(styles)(TableToolbar);

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

@@ -11,7 +11,7 @@ import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
-export const ToolbarButton = props => {
+export const ToolbarButton = (props) => {
   const onToggle = () => {
     const c = props.onToggle(props.value.change(), props);
 
@@ -30,9 +30,7 @@ export const ToolbarButton = props => {
     );
   } else {
     const { disabled } = props;
-    const isActive = props.isActive
-      ? props.isActive(props.value, props.type)
-      : hasBlock(props.value, props.type);
+    const isActive = props.isActive ? props.isActive(props.value, props.type) : hasBlock(props.value, props.type);
 
     log('[ToolbarButton] block:isActive: ', isActive);
 
@@ -49,7 +47,7 @@ export const ToolbarButton = props => {
   }
 };
 
-const isActiveToolbarPlugin = props => plugin => {
+const isActiveToolbarPlugin = (props) => (plugin) => {
   const isDisabled = (props[plugin.name] || {}).disabled;
 
   return plugin && plugin.toolbar && !isDisabled;
@@ -64,22 +62,16 @@ export const DefaultToolbar = ({
   onDone,
   classes,
   showDone,
-  deletable
+  deletable,
 }) => {
-  const filtered = plugins.filter(isActiveToolbarPlugin(pluginProps)).map(p => p.toolbar);
+  const filtered = plugins.filter(isActiveToolbarPlugin(pluginProps)).map((p) => p.toolbar);
 
   return (
     <div className={classes.defaultToolbar}>
       <div className={classes.buttonsContainer}>
         {filtered.map((p, index) => {
           return (
-            <ToolbarButton
-              {...p}
-              key={index}
-              value={value}
-              onChange={onChange}
-              getFocusedValue={getFocusedValue}
-            />
+            <ToolbarButton {...p} key={index} value={value} onChange={onChange} getFocusedValue={getFocusedValue} />
           );
         })}
       </div>
@@ -98,24 +90,24 @@ DefaultToolbar.propTypes = {
   onDone: PropTypes.func.isRequired,
   showDone: PropTypes.bool,
   addArea: PropTypes.bool,
-  deletable: PropTypes.bool
+  deletable: PropTypes.bool,
 };
 
 DefaultToolbar.defaultProps = {
-  pluginProps: {}
+  pluginProps: {},
 };
 
 const toolbarStyles = () => ({
   defaultToolbar: {
     display: 'flex',
     width: '100%',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
   buttonsContainer: {
     alignItems: 'center',
     display: 'flex',
-    width: '100%'
-  }
+    width: '100%',
+  },
 });
 
 export default withStyles(toolbarStyles)(DefaultToolbar);

package/src/plugins/toolbar/done-button.jsx

@@ -12,7 +12,7 @@ export const RawDoneButton = ({ classes, onClick }) => (
     onClick={onClick}
     classes={{
       label: classes.label,
-      root: classes.iconRoot
+      root: classes.iconRoot,
     }}
   >
     <Check />
@@ -21,7 +21,7 @@ export const RawDoneButton = ({ classes, onClick }) => (
 
 RawDoneButton.propTypes = {
   classes: PropTypes.object.isRequired,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 const styles = {
@@ -30,7 +30,7 @@ const styles = {
     width: '28px',
     height: '28px',
     color: 'var(--editable-html-toolbar-check, #00bb00)',
-    padding: '4px'
-  }
+    padding: '4px',
+  },
 };
 export const DoneButton = withStyles(styles)(RawDoneButton);

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

@@ -31,8 +31,8 @@ export class EditorAndToolbar extends React.Component {
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
       alwaysVisible: PropTypes.bool,
-      error: PropTypes.string
-    })
+      error: PropTypes.string,
+    }),
   };
 
   /** This is an interim fix until this PR is merged in slate:
@@ -61,7 +61,7 @@ export class EditorAndToolbar extends React.Component {
       pluginProps,
       toolbarOpts,
       onDataChange,
-      toolbarRef
+      toolbarRef,
     } = this.props;
 
     const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
@@ -69,42 +69,35 @@ export class EditorAndToolbar extends React.Component {
       [classes.editorInFocus]: inFocus,
       [classes.readOnly]: readOnly,
       [classes.disabledUnderline]: disableUnderline,
-      [classes.disabledScrollbar]: disableScrollbar
+      [classes.disabledScrollbar]: disableScrollbar,
     });
     let clonedChildren = children;
 
     if (typeof children !== 'string') {
       clonedChildren = React.cloneElement(children, {
-        ref: el => (this.editorRef = el)
+        ref: (el) => (this.editorRef = el),
       });
     }
 
-    log(
-      '[render] inFocus: ',
-      inFocus,
-      'value.isFocused:',
-      value.isFocused,
-      'focused node: ',
-      focusedNode
-    );
+    log('[render] inFocus: ', inFocus, 'value.isFocused:', value.isFocused, 'focused node: ', focusedNode);
 
     return (
       <div
         className={classNames(
           {
             [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
-            [classes.error]: toolbarOpts && toolbarOpts.error
+            [classes.error]: toolbarOpts && toolbarOpts.error,
           },
-          classes.root
+          classes.root,
         )}
       >
         <div className={holderNames}>
           <div
             className={classNames(
               {
-                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
+                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
               },
-              classes.children
+              classes.children,
             )}
           >
             {clonedChildren}
@@ -141,11 +134,11 @@ const style = {
       overflow: 'visible',
       maxHeight: '500px',
       // needed in order to be able to put the focus before a void element when it is the first one in the editor
-      padding: '5px'
-    }
+      padding: '5px',
+    },
   },
   children: {
-    padding: '10px 16px'
+    padding: '10px 16px',
   },
   editorHolder: {
     position: 'relative',
@@ -162,7 +155,7 @@ const style = {
       position: 'absolute',
       transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       pointerEvents: 'none',
-      backgroundColor: 'rgba(0, 0, 0, 0.42)'
+      backgroundColor: 'rgba(0, 0, 0, 0.42)',
     },
     '&::after': {
       left: '0',
@@ -172,39 +165,38 @@ const style = {
       content: '""',
       position: 'absolute',
       transform: 'scaleX(0)',
-      transition:
-        'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
-      backgroundColor: 'rgba(0, 0, 0, 0.42)'
+      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
+      backgroundColor: 'rgba(0, 0, 0, 0.42)',
     },
     '&:focus': {
       '&::after': {
         transform: 'scaleX(1)',
         backgroundColor: primary,
-        height: '2px'
-      }
+        height: '2px',
+      },
     },
     '&:hover': {
       '&::after': {
         transform: 'scaleX(1)',
         backgroundColor: 'black',
-        height: '2px'
-      }
-    }
+        height: '2px',
+      },
+    },
   },
   disabledUnderline: {
     '&::before': {
-      display: 'none'
+      display: 'none',
     },
     '&::after': {
-      display: 'none'
-    }
+      display: 'none',
+    },
   },
   disabledScrollbar: {
     '&::-webkit-scrollbar': {
-      display: 'none'
+      display: 'none',
     },
     scrollbarWidth: 'none',
-    '-ms-overflow-style': 'none'
+    '-ms-overflow-style': 'none',
   },
   readOnly: {
     '&::before': {
@@ -212,7 +204,7 @@ const style = {
       backgroundSize: '5px 1px',
       backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
       backgroundRepeat: 'repeat-x',
-      backgroundPosition: 'left top'
+      backgroundPosition: 'left top',
     },
     '&::after': {
       left: '0',
@@ -223,37 +215,37 @@ const style = {
       position: 'absolute',
       transform: 'scaleX(0)',
       transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',
-      backgroundColor: 'rgba(0, 0, 0, 0)'
+      backgroundColor: 'rgba(0, 0, 0, 0)',
     },
     '&:hover': {
       '&::after': {
         transform: 'scaleX(0)',
         backgroundColor: 'black',
-        height: '2px'
-      }
-    }
+        height: '2px',
+      },
+    },
   },
   editorInFocus: {
     '&::after': {
       transform: 'scaleX(1)',
       backgroundColor: primary,
-      height: '2px'
+      height: '2px',
     },
     '&:hover': {
       '&::after': {
-        backgroundColor: primary
-      }
-    }
+        backgroundColor: primary,
+      },
+    },
   },
   error: {
-    border: '2px solid red'
+    border: '2px solid red',
   },
   noBorder: {
-    border: 'none'
+    border: 'none',
   },
   noPadding: {
-    padding: 0
-  }
+    padding: 0,
+  },
 };
 
 export default withStyles(style)(EditorAndToolbar);

package/src/plugins/toolbar/index.jsx

@@ -9,7 +9,7 @@ import EditorAndToolbar from './editor-and-toolbar';
 export default function ToolbarPlugin(opts) {
   return {
     /* eslint-disable-next-line */
-    renderEditor: props => (
+    renderEditor: (props) => (
       <EditorAndToolbar
         {...props}
         mainEditorRef={opts.mainEditorRef}
@@ -18,6 +18,6 @@ export default function ToolbarPlugin(opts) {
         autoWidth={opts.autoWidth}
         onDone={opts.onDone}
       />
-    )
+    ),
   };
 }

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

@@ -10,19 +10,19 @@ const styles = () => ({
     display: 'inline-flex',
     padding: '2px',
     '& :hover': {
-      color: 'black'
-    }
+      color: 'black',
+    },
   },
   active: {
-    color: 'black'
+    color: 'black',
   },
   disabled: {
     opacity: 0.7,
     cursor: 'not-allowed',
     '& :hover': {
-      color: 'grey'
-    }
-  }
+      color: 'grey',
+    },
+  },
 });
 
 const log = debug('pie-elements:editable-html:raw-button');
@@ -34,14 +34,14 @@ export class RawButton extends React.Component {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     active: PropTypes.bool,
     disabled: PropTypes.bool,
-    extraStyles: PropTypes.object
+    extraStyles: PropTypes.object,
   };
 
   constructor(props) {
     super(props);
   }
 
-  onClick = e => {
+  onClick = (e) => {
     log('[onClick]');
     e.preventDefault();
     const { onClick } = this.props;
@@ -52,7 +52,7 @@ export class RawButton extends React.Component {
     const { active, classes, children, disabled, extraStyles } = this.props;
     const names = classNames(classes.button, {
       [classes.active]: active,
-      [classes.disabled]: disabled
+      [classes.disabled]: disabled,
     });
 
     return (
@@ -71,14 +71,14 @@ export class RawMarkButton extends React.Component {
     mark: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     classes: PropTypes.object.isRequired,
-    active: PropTypes.bool
+    active: PropTypes.bool,
   };
 
   constructor(props) {
     super(props);
   }
 
-  onToggle = e => {
+  onToggle = (e) => {
     e.preventDefault();
     this.props.onToggle(this.props.mark);
   };

package/src/plugins/toolbar/toolbar.jsx

@@ -58,15 +58,15 @@ export class Toolbar extends React.Component {
       alignment: PropTypes.oneOf(['left', 'right']),
       alwaysVisible: PropTypes.bool,
       ref: PropTypes.func,
-      showDone: PropTypes.bool
+      showDone: PropTypes.bool,
     }),
-    onDataChange: PropTypes.func
+    onDataChange: PropTypes.func,
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      change: null
+      change: null,
     };
   }
 
@@ -74,17 +74,17 @@ export class Toolbar extends React.Component {
     removeCharacterDialogs();
   }
 
-  hasMark = type => {
+  hasMark = (type) => {
     const { value } = this.props;
-    return value.marks.some(mark => mark.type == type);
+    return value.marks.some((mark) => mark.type == type);
   };
 
-  hasBlock = type => {
+  hasBlock = (type) => {
     const { value } = this.props;
-    return value.blocks.some(node => node.type == type);
+    return value.blocks.some((node) => node.type == type);
   };
 
-  onToggle = plugin => {
+  onToggle = (plugin) => {
     const { value, onChange } = this.props;
 
     if (!plugin.onToggle) return;
@@ -93,13 +93,13 @@ export class Toolbar extends React.Component {
     onChange(change);
   };
 
-  onClick = e => {
+  onClick = (e) => {
     log('[onClick]');
     e.preventDefault();
   };
 
-  onButtonClick = fn => {
-    return e => {
+  onButtonClick = (fn) => {
+    return (e) => {
       e.preventDefault();
       fn();
     };
@@ -123,10 +123,7 @@ export class Toolbar extends React.Component {
     }
   };
 
-  onDeleteClick = debounce(
-    (e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange),
-    500
-  );
+  onDeleteClick = debounce((e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange), 500);
 
   onDeleteMouseDown = (e, plugin, node, value, onChange) => {
     e.persist();
@@ -145,7 +142,7 @@ export class Toolbar extends React.Component {
       getFocusedValue,
       isFocused,
       onDone,
-      toolbarRef
+      toolbarRef,
     } = this.props;
 
     const node = findSingleNode(value);
@@ -154,7 +151,7 @@ export class Toolbar extends React.Component {
     log(' --------------> [render] node: ', node);
     log('[render] node: ', node);
 
-    const plugin = plugins.find(p => {
+    const plugin = plugins.find((p) => {
       if (!node) {
         return;
       }
@@ -163,7 +160,7 @@ export class Toolbar extends React.Component {
         return p.toolbar.supports && p.toolbar.supports(node, value);
       }
     });
-    const parentPlugin = plugins.find(p => {
+    const parentPlugin = plugins.find((p) => {
       if (!parentNode) {
         return;
       }
@@ -198,27 +195,17 @@ export class Toolbar extends React.Component {
       this.props.onDataChange(key, data);
     };
 
-    const CustomToolbar = getCustomToolbar(
-      plugin,
-      node,
-      value,
-      handleDone,
-      this.props.onDataChange
-    );
+    const CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, this.props.onDataChange);
 
-    const filteredPlugins =
-      plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;
+    const filteredPlugins = plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;
 
     log('[render] CustomToolbar: ', CustomToolbar);
     const parentExtraStyles =
-      parentPlugin && parentPlugin.pluginStyles
-        ? parentPlugin.pluginStyles(node, parentNode, plugin)
-        : {};
-    const pluginExtraStyles =
-      plugin && plugin.pluginStyles ? plugin.pluginStyles(node, parentNode, plugin) : {};
+      parentPlugin && parentPlugin.pluginStyles ? parentPlugin.pluginStyles(node, parentNode, plugin) : {};
+    const pluginExtraStyles = plugin && plugin.pluginStyles ? plugin.pluginStyles(node, parentNode, plugin) : {};
     const extraStyles = {
       ...pluginExtraStyles,
-      ...parentExtraStyles
+      ...parentExtraStyles,
     };
 
     const deletable = node && plugin && plugin.deleteNode;
@@ -236,7 +223,7 @@ export class Toolbar extends React.Component {
       [classes.toolbarRight]: toolbarOpts.alignment === 'right',
       [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
       [classes.autoWidth]: autoWidth,
-      [classes.fullWidth]: !autoWidth
+      [classes.fullWidth]: !autoWidth,
     });
 
     return (
@@ -267,9 +254,9 @@ export class Toolbar extends React.Component {
             <IconButton
               aria-label="Delete"
               className={classes.iconRoot}
-              onMouseDown={e => this.onDeleteMouseDown(e, plugin, node, value, onChange)}
+              onMouseDown={(e) => this.onDeleteMouseDown(e, plugin, node, value, onChange)}
               classes={{
-                root: classes.iconRoot
+                root: classes.iconRoot,
               }}
             >
               <Delete />
@@ -295,37 +282,37 @@ const style = {
     boxShadow:
       '0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12)',
     boxSizing: 'border-box',
-    display: 'none'
+    display: 'none',
   },
   toolbarWithNoDone: {
-    minWidth: '265px'
+    minWidth: '265px',
   },
   toolbarTop: {
-    top: '-45px'
+    top: '-45px',
   },
   toolbarRight: {
-    right: 0
+    right: 0,
   },
   fullWidth: {
-    width: '100%'
+    width: '100%',
   },
   autoWidth: {
-    width: 'auto'
+    width: 'auto',
   },
   focused: {
-    display: 'flex'
+    display: 'flex',
   },
   iconRoot: {
     width: '28px',
     height: '28px',
     padding: '4px',
-    verticalAlign: 'top'
+    verticalAlign: 'top',
   },
   label: {
-    color: 'var(--editable-html-toolbar-check, #00bb00)'
+    color: 'var(--editable-html-toolbar-check, #00bb00)',
   },
   shared: {
-    display: 'flex'
-  }
+    display: 'flex',
+  },
 };
 export default withStyles(style, { index: 1000 })(Toolbar);

package/src/plugins/utils.js

@@ -1,4 +1,4 @@
-export const findSingleNode = value => {
+export const findSingleNode = (value) => {
   if (!value || !value.isCollapsed || !value.startKey) {
     return;
   }
@@ -24,9 +24,8 @@ export const findParentNode = (value, node) => {
   return value.document.getParent(node.key);
 };
 
-export const hasMark = (value, type) => value && value.marks.some(mark => mark.type == type);
+export const hasMark = (value, type) => value && value.marks.some((mark) => mark.type == type);
 
-export const hasBlock = (value, type) => value && value.blocks.some(node => node.type == type);
+export const hasBlock = (value, type) => value && value.blocks.some((node) => node.type == type);
 
-export const hasNode = ({ document }, type) =>
-  document && document.nodes.some(node => node.type == type);
+export const hasNode = ({ document }, type) => document && document.nodes.some((node) => node.type == type);