@pie-lib/editable-html 10.0.0-beta.5 → 10.0.0-beta.6

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

@@ -24,7 +24,7 @@ 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 = {
@@ -32,7 +32,7 @@ export class TableToolbar extends React.Component {
     onChange: () => {}
   };
 
-  onDone = e => {
+  onDone = (e) => {
     const { onDone } = this.props;
     e.preventDefault();
     onDone();
@@ -50,7 +50,7 @@ export class TableToolbar extends React.Component {
       onRemoveTable,
       onToggleBorder,
       hasBorder,
-      classes
+      classes,
     } = this.props;
     log('[render] hasBorder:', hasBorder);
 
@@ -94,10 +94,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

@@ -30,7 +30,7 @@ const isBlockActive = (editor, format) => {
   return !!match;
 };
 
-export const ToolbarButton = props => {
+export const ToolbarButton = (props) => {
   const { editor } = props;
   const onToggle = () => {
     props.onToggle(editor, props);
@@ -79,7 +79,7 @@ ToolbarButton.propTypes = {
   buttonStyles: PropTypes.object,
 };
 
-const isActiveToolbarPlugin = props => plugin => {
+const isActiveToolbarPlugin = (props) => plugin => {
   const isDisabled = (props[plugin.name] || {}).disabled;
 
   return plugin && plugin.toolbar && !isDisabled;
@@ -95,9 +95,9 @@ 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}>
@@ -136,24 +136,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

@@ -10,7 +10,7 @@ import { color } from '@pie-lib/render-ui';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');
 
-const style = {
+const style = (theme) => ({
   root: {
     position: 'relative',
     padding: '0px',
@@ -22,15 +22,15 @@ 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',
     },
     '& [data-slate-void="true"]': {
       // needed in order to be able to put the focus before a void element when it is the first one in the editor
-      padding: '1px'
+      padding: '1px',
     }
   },
   children: {
-    padding: '10px 16px'
+    padding: '10px 16px',
   },
   editorHolder: {
     position: 'relative',
@@ -47,6 +47,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)',
     },
     '&::after': {
       left: '0',
@@ -56,39 +57,41 @@ 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'
-      }
+        backgroundColor: theme.palette.common.black,
+        height: '2px',
+      },
+    },
+    '& :focus-visible': {
+      outline: 'none !important',
     }
   },
   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': {
@@ -96,7 +99,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',
@@ -107,38 +110,38 @@ 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'
-      }
-    }
+        backgroundColor: theme.palette.common.black,
+        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 ${theme.palette.error.main} !important`,
   },
   noBorder: {
-    border: 'none'
+    border: 'none',
   },
   noPadding: {
-    padding: 0
-  }
-};
+    padding: 0,
+  },
+});
 
 export const EditorAndToolbar = props => {
   const {
@@ -249,7 +252,7 @@ EditorAndToolbar.propTypes = {
     alwaysVisible: PropTypes.bool,
     error: PropTypes.string,
     noBorder: PropTypes.bool,
-    position: PropTypes.oneOf(['bottom', 'top'])
+    position: PropTypes.oneOf(['bottom', 'top']),
   })
 };
 

package/src/plugins/toolbar/index.jsx

@@ -9,14 +9,15 @@ 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}
         disableScrollbar={opts.disableScrollbar}
         disableUnderline={opts.disableUnderline}
+        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

@@ -169,6 +169,11 @@ export const Toolbar = props => {
       return null;
     }
 
+    // this means we have selected text
+    if (selection.anchor.offset !== selection.focus.offset) {
+      return null;
+    }
+
     const [node, path] = Editor.node(editor, selection, depth ? { depth } : undefined);
 
     if (!node) {
@@ -263,7 +268,7 @@ export const Toolbar = props => {
     [classes.toolbarRight]: toolbarOpts.alignment === 'right',
     [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
     [classes.autoWidth]: autoWidth,
-    [classes.fullWidth]: !autoWidth
+    [classes.fullWidth]: !autoWidth,
   });
 
   return (

package/src/plugins/utils.js

@@ -26,9 +26,9 @@ 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 isBlockActive = (editor, format, blockType = 'type') => {
   const { selection } = editor;

package/src/serialization.jsx

@@ -30,7 +30,7 @@ export const BLOCK_TAGS = {
   h3: 'heading-three',
   h4: 'heading-four',
   h5: 'heading-five',
-  h6: 'heading-six'
+  h6: 'heading-six',
 };
 
 /**
@@ -45,10 +45,10 @@ const MARK_TAGS = {
   u: 'underline',
   s: 'strikethrough',
   code: 'code',
-  strong: 'bold'
+  strong: 'bold',
 };
 
-export const parseStyleString = s => {
+export const parseStyleString = (s) => {
   const regex = /([\w-]*)\s*:\s*([^;]*)/g;
   let match;
   const result = {};
@@ -58,18 +58,18 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const getBase64 = file => {
+export const getBase64 = (file) => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = () => resolve(reader.result);
-    reader.onerror = error => reject(error);
+    reader.onerror = (error) => reject(error);
   });
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
 
-const attributesToMap = el => (acc, attribute) => {
+const attributesToMap = (el) => (acc, attribute) => {
   const value = el.getAttribute(attribute);
   if (value) {
     if (attribute === 'style') {
@@ -113,7 +113,7 @@ const blocks = {
        * Here for rendering styles for all block elements
        */
       data: { attributes: attributes.reduce(attributesToMap(el), {}) },
-      nodes: next(el.childNodes)
+      nodes: next(el.childNodes),
     };
   },
   serialize: (object, children) => {
@@ -131,7 +131,7 @@ const blocks = {
         return <Tag {...jsonData.attributes}>{children}</Tag>;
       }
     }
-  }
+  },
 };
 
 const marks = {
@@ -142,7 +142,7 @@ const marks = {
     return {
       object: 'mark',
       type: mark,
-      nodes: next(el.childNodes)
+      nodes: next(el.childNodes),
     };
   },
   serialize(object, children) {
@@ -154,10 +154,11 @@ const marks = {
         }
       }
     }
-  }
+  },
 };
 
-const findPreviousText = el => {
+// eslint-disable-next-line no-unused-vars
+const findPreviousText = (el) => {
   if (el.nodeName === '#text') {
     return el;
   }
@@ -182,9 +183,9 @@ export const TEXT_RULE = {
         leaves: [
           {
             object: 'leaf',
-            text: '\n'
-          }
-        ]
+            text: '\n',
+          },
+        ],
       };
     }
 
@@ -197,9 +198,9 @@ export const TEXT_RULE = {
         leaves: [
           {
             object: 'leaf',
-            text: el.nodeValue
-          }
-        ]
+            text: el.nodeValue,
+          },
+        ],
       };
     }
   },
@@ -212,7 +213,7 @@ export const TEXT_RULE = {
         return array;
       }, []);
     }
-  }
+  },
 };
 
 const RULES = [
@@ -224,7 +225,7 @@ const RULES = [
   responseAreaSerialization,
   TEXT_RULE,
   blocks,
-  marks
+  marks,
 ];
 
 function allWhitespace(node) {
@@ -235,7 +236,7 @@ function allWhitespace(node) {
 function defaultParseHtml(html) {
   if (typeof DOMParser === 'undefined') {
     throw new Error(
-      'The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.'
+      'The native `DOMParser` global which the `Html` serializer uses by default is not present in this environment. You must supply the `options.parseHtml` function instead.',
     );
   }
 
@@ -259,14 +260,14 @@ function defaultParseHtml(html) {
 const parseHtml =
   typeof window === 'undefined'
     ? () => ({
-        childNodes: []
+        childNodes: [],
       })
     : defaultParseHtml;
 
 const serializer = new Html({
   defaultBlock: 'div',
   rules: RULES,
-  parseHtml
+  parseHtml,
 });
 
 const _extends =
@@ -320,7 +321,7 @@ serializer.deserialize = function deserialize(html) {
     }
 
     const block = _extends({ object: 'block', data: {}, isVoid: false }, defaultBlock, {
-      nodes: [node]
+      nodes: [node],
     });
 
     memo.push(block);
@@ -330,8 +331,8 @@ serializer.deserialize = function deserialize(html) {
   if (nodes.length === 0) {
     nodes = [
       _extends({ object: 'block', data: {}, isVoid: false }, defaultBlock, {
-        nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }]
-      })
+        nodes: [{ object: 'text', leaves: [{ object: 'leaf', text: '', marks: [] }] }],
+      }),
     ];
   }
 
@@ -340,11 +341,11 @@ serializer.deserialize = function deserialize(html) {
     document: {
       object: 'document',
       data: {},
-      nodes: nodes
+      nodes: nodes,
     },
     schema: {
-      rules: []
-    }
+      rules: [],
+    },
   };
 
   let i;
@@ -352,7 +353,7 @@ serializer.deserialize = function deserialize(html) {
   for (i = 0; i < 3000; i++) {
     json.schema.rules.push({
       match: { object: 'document' },
-      nodes: [{ match: { object: 'block' } }]
+      nodes: [{ match: { object: 'block' } }],
     });
   }
 
@@ -365,16 +366,17 @@ serializer.deserialize = function deserialize(html) {
   return null;
 };
 
-export const htmlToValue = html => {
+export const htmlToValue = (html) => {
   try {
     return serializer.deserialize(html);
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.log("Couldn't parse html: ", e);
     return {};
   }
 };
 
-export const valueToHtml = value => serializer.serialize(value);
+export const valueToHtml = (value) => serializer.serialize(value);
 
 /**
  *