@pie-lib/editable-html 7.17.4-next.53 → 7.17.4-next.549

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,
@@ -28,7 +29,8 @@ export class EditorAndToolbar extends React.Component {
     pluginProps: PropTypes.object,
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
-      alwaysVisible: PropTypes.bool
+      alwaysVisible: PropTypes.bool,
+      error: PropTypes.string
     })
   };
 
@@ -48,6 +50,7 @@ export class EditorAndToolbar extends React.Component {
       value,
       plugins,
       onChange,
+      getFocusedValue,
       onDone,
       focusedNode,
       autoWidth,
@@ -84,9 +87,26 @@ export class EditorAndToolbar extends React.Component {
     );
 
     return (
-      <div className={classes.root}>
+      <div
+        className={classNames(
+          {
+            [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
+            [classes.error]: toolbarOpts && toolbarOpts.error
+          },
+          classes.root
+        )}
+      >
         <div className={holderNames}>
-          <div className={classes.children}>{clonedChildren}</div>
+          <div
+            className={classNames(
+              {
+                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
+              },
+              classes.children
+            )}
+          >
+            {clonedChildren}
+          </div>
         </div>
         <Toolbar
           autoWidth={autoWidth}
@@ -95,6 +115,7 @@ export class EditorAndToolbar extends React.Component {
           value={value}
           isFocused={inFocus}
           onChange={onChange}
+          getFocusedValue={getFocusedValue}
           onDone={onDone}
           onDataChange={onDataChange}
           toolbarRef={toolbarRef}
@@ -117,7 +138,8 @@ const style = {
       wordBreak: 'break-word',
       overflow: 'visible',
       maxHeight: '500px',
-      padding: '5px 0'
+      // 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'
     }
   },
   children: {
@@ -214,6 +236,15 @@ const style = {
         backgroundColor: primary
       }
     }
+  },
+  error: {
+    border: '2px solid red'
+  },
+  noBorder: {
+    border: 'none'
+  },
+  noPadding: {
+    padding: 0
   }
 };
 

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

@@ -15,6 +15,13 @@ const styles = () => ({
   },
   active: {
     color: 'black'
+  },
+  disabled: {
+    opacity: 0.7,
+    cursor: 'not-allowed',
+    '& :hover': {
+      color: 'grey'
+    }
   }
 });
 
@@ -26,6 +33,7 @@ export class RawButton extends React.Component {
     classes: PropTypes.object.isRequired,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     active: PropTypes.bool,
+    disabled: PropTypes.bool,
     extraStyles: PropTypes.object
   };
 
@@ -41,8 +49,11 @@ export class RawButton extends React.Component {
   };
 
   render() {
-    const { active, classes, children, extraStyles } = this.props;
-    const names = classNames(classes.button, active && classes.active);
+    const { active, classes, children, disabled, extraStyles } = this.props;
+    const names = classNames(classes.button, {
+      [classes.active]: active,
+      [classes.disabled]: disabled
+    });
 
     return (
       <div style={extraStyles} className={names} onMouseDown={this.onClick}>

package/src/plugins/toolbar/toolbar.jsx

@@ -1,16 +1,19 @@
-import { DoneButton } from './done-button';
+import React from 'react';
+import { Change } from 'slate';
 import Delete from '@material-ui/icons/Delete';
 import IconButton from '@material-ui/core/IconButton';
 import PropTypes from 'prop-types';
-import React from 'react';
 import classNames from 'classnames';
 import debug from 'debug';
 import SlatePropTypes from 'slate-prop-types';
 import debounce from 'lodash/debounce';
 
+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');
 
@@ -48,12 +51,13 @@ 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']),
       alignment: PropTypes.oneOf(['left', 'right']),
       alwaysVisible: PropTypes.bool,
-      ref: PropTypes.obj,
+      ref: PropTypes.func,
       showDone: PropTypes.bool
     }),
     onDataChange: PropTypes.func
@@ -66,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);
@@ -134,6 +142,7 @@ export class Toolbar extends React.Component {
       value,
       autoWidth,
       onChange,
+      getFocusedValue,
       isFocused,
       onDone,
       toolbarRef
@@ -167,6 +176,11 @@ export class Toolbar extends React.Component {
     log('[render] plugin: ', plugin);
 
     const handleDone = (change, done) => {
+      // use handler only if this is an actual Slate Change
+      if (!(change instanceof Change)) {
+        return;
+      }
+
       let handler = onDone;
 
       if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {
@@ -241,6 +255,7 @@ export class Toolbar extends React.Component {
             pluginProps={pluginProps}
             value={value}
             onChange={onChange}
+            getFocusedValue={getFocusedValue}
             showDone={defaultToolbarShowDone}
             onDone={handleDone}
             deletable={deletable}

package/src/serialization.jsx

@@ -58,7 +58,16 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true });
+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);
+  });
+};
+
+export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const attributesToMap = el => (acc, attribute) => {
   const value = el.getAttribute(attribute);
@@ -340,7 +349,7 @@ serializer.deserialize = function deserialize(html) {
 
   let i;
 
-  for (i = 0; i < 1000; i++) {
+  for (i = 0; i < 3000; i++) {
     json.schema.rules.push({
       match: { object: 'document' },
       nodes: [{ match: { object: 'block' } }]
@@ -356,7 +365,14 @@ serializer.deserialize = function deserialize(html) {
   return null;
 };
 
-export const htmlToValue = html => serializer.deserialize(html);
+export const htmlToValue = html => {
+  try {
+    return serializer.deserialize(html);
+  } catch (e) {
+    console.log("Couldn't parse html: ", e);
+    return {};
+  }
+};
 
 export const valueToHtml = value => serializer.serialize(value);