@pie-lib/editable-html 7.17.4-next.59 → 7.17.4-next.592

package/src/plugins/table/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import EditTable from 'slate-edit-table';
-import { Block, Inline } from 'slate';
+import { Block } from 'slate';
 import debug from 'debug';
 import GridOn from '@material-ui/icons/GridOn';
 import TableToolbar from './table-toolbar';
@@ -78,6 +78,22 @@ TableCell.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 
+export const moveFocusToBeginningOfTable = change => {
+  const addedTable = change.value.document.findDescendant(
+    d => !!d.data && !!d.data.get('newTable')
+  );
+
+  if (!addedTable) {
+    return;
+  }
+
+  change.collapseToStartOf(addedTable);
+
+  const update = addedTable.data.remove('newTable');
+
+  change.setNodeByKey(addedTable.key, { data: update });
+};
+
 export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
   const core = EditTable({
     typeContent: 'div'
@@ -117,12 +133,32 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     return ancestors.findLast(p => p.type === 'table');
   };
 
+  core.utils.createTableWithOptions = (row, columns, extra) => {
+    const createdTable = core.utils.createTable(row, columns);
+    const newTable = Block.create({
+      ...createdTable.toJSON(),
+      ...extra
+    });
+
+    return newTable;
+  };
+
   core.toolbar = {
     icon: <GridOn />,
     onClick: (value, onChange) => {
       log('insert table');
-      const c = core.changes.insertTable(value.change(), 2, 2);
-      onChange(c);
+      const change = value.change();
+      const newTable = core.utils.createTableWithOptions(2, 2, {
+        data: {
+          border: '1',
+          newTable: true
+        }
+      });
+
+      change.insertBlock(newTable);
+
+      moveFocusToBeginningOfTable(change);
+      onChange(change);
     },
     supports: (node, value) =>
       node && node.object === 'block' && core.utils.isSelectionInTable(value),
@@ -132,7 +168,7 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
     customToolbar: (node, value, onToolbarDone) => {
       log('[customToolbar] node.data: ', node.data);
 
-      const tableBlock = core.utils.getTableBlock(value.document, node.key);
+      const tableBlock = core.utils.getTableBlock(value.document, node?.key);
       log('[customToolbar] tableBlock: ', tableBlock);
 
       const hasBorder = () =>
@@ -215,9 +251,16 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
       return;
     }
 
+    const tableAdded = node.findDescendant(d => d.data && d.data.get('newTable'));
+
+    if (!tableAdded) {
+      return;
+    }
+
+    const nodeToSearch = node.getParent(tableAdded.key) || node;
     let shouldAddTextAfterNode = false;
-    const indexToNotHaveTableOn = node.nodes.size - 1;
-    const indexOfLastTable = node.nodes.findLastIndex(d => d.type === 'table');
+    const indexToNotHaveTableOn = nodeToSearch.nodes.size - 1;
+    const indexOfLastTable = nodeToSearch.nodes.findLastIndex(d => d.type === 'table');
 
     // if the last table in the document is of type table, we need to do the change
     if (indexOfLastTable === indexToNotHaveTableOn) {
@@ -228,15 +271,13 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
       return;
     }
 
-    const tableNode = node.nodes.get(indexOfLastTable);
-
     return change => {
       if (shouldAddTextAfterNode) {
-        const tableJSON = tableNode.toJSON();
+        const tableJSON = tableAdded.toJSON();
 
         // we remove the table node because otherwise we can't add the empty block after it
         // we need a block that contains text in order to do it
-        change.removeNodeByKey(tableNode.key);
+        change.removeNodeByKey(tableAdded.key);
 
         const newBlock = Block.create({
           object: 'block',
@@ -256,12 +297,20 @@ export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
           if (prevText) {
             // we move focus to the previous text
             change
-              .moveFocusTo(prevText.key, prevText.text.length)
-              .moveAnchorTo(prevText.key, prevText.text.length);
+              .moveFocusTo(prevText.key, prevText.text?.length)
+              .moveAnchorTo(prevText.key, prevText.text?.length);
           }
 
           // we insert the table block between the first block with text and the last block with text
-          change.insertBlock(tableJSON);
+          change.insertBlock({
+            ...tableJSON,
+            data: {
+              ...tableJSON.data,
+              newTable: true
+            }
+          });
+
+          moveFocusToBeginningOfTable(change);
         });
       }
     };
@@ -282,7 +331,7 @@ export const parseStyleString = s => {
   return result;
 };
 
-export const reactAttributes = o => toStyleObject(o, { camelize: true });
+export const reactAttributes = o => toStyleObject(o, { camelize: true, addUnits: false });
 
 const attributesToMap = el => (acc, attribute) => {
   const value = el.getAttribute(attribute);

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

@@ -14,26 +14,33 @@ const log = debug('@pie-lib:editable-html:plugins:toolbar');
 export const ToolbarButton = props => {
   const onToggle = () => {
     const c = props.onToggle(props.value.change(), props);
+
     props.onChange(c);
   };
 
   if (props.isMark) {
     const isActive = hasMark(props.value, props.type);
+
     log('[ToolbarButton] mark:isActive: ', isActive);
+
     return (
       <MarkButton active={isActive} label={props.type} onToggle={onToggle} mark={props.type}>
         {props.icon}
       </MarkButton>
     );
   } else {
+    const { disabled } = props;
     const isActive = props.isActive
       ? props.isActive(props.value, props.type)
       : hasBlock(props.value, props.type);
+
     log('[ToolbarButton] block:isActive: ', isActive);
+
     return (
       <Button
         active={isActive}
-        onClick={() => props.onClick(props.value, props.onChange)}
+        disabled={disabled}
+        onClick={() => props.onClick(props.value, props.onChange, props.getFocusedValue)}
         extraStyles={props.buttonStyles}
       >
         {props.icon}
@@ -44,6 +51,7 @@ export const ToolbarButton = props => {
 
 const isActiveToolbarPlugin = props => plugin => {
   const isDisabled = (props[plugin.name] || {}).disabled;
+
   return plugin && plugin.toolbar && !isDisabled;
 };
 
@@ -52,6 +60,7 @@ export const DefaultToolbar = ({
   pluginProps,
   value,
   onChange,
+  getFocusedValue,
   onDone,
   classes,
   showDone,
@@ -63,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} />}
@@ -77,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,18 +17,21 @@ 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,
     focusedNode: SlatePropTypes.node,
     readOnly: PropTypes.bool,
+    disableScrollbar: PropTypes.bool,
     disableUnderline: PropTypes.bool,
     autoWidth: PropTypes.bool,
     classes: PropTypes.object.isRequired,
     pluginProps: PropTypes.object,
     toolbarOpts: PropTypes.shape({
       position: PropTypes.oneOf(['bottom', 'top']),
-      alwaysVisible: PropTypes.bool
+      alwaysVisible: PropTypes.bool,
+      error: PropTypes.string
     })
   };
 
@@ -48,10 +51,12 @@ export class EditorAndToolbar extends React.Component {
       value,
       plugins,
       onChange,
+      getFocusedValue,
       onDone,
       focusedNode,
       autoWidth,
       readOnly,
+      disableScrollbar,
       disableUnderline,
       pluginProps,
       toolbarOpts,
@@ -60,12 +65,12 @@ export class EditorAndToolbar extends React.Component {
     } = this.props;
 
     const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
-    const holderNames = classNames(
-      classes.editorHolder,
-      inFocus && classes.editorInFocus,
-      readOnly && classes.readOnly,
-      disableUnderline && classes.disabledUnderline
-    );
+    const holderNames = classNames(classes.editorHolder, {
+      [classes.editorInFocus]: inFocus,
+      [classes.readOnly]: readOnly,
+      [classes.disabledUnderline]: disableUnderline,
+      [classes.disabledScrollbar]: disableScrollbar
+    });
     let clonedChildren = children;
 
     if (typeof children !== 'string') {
@@ -84,9 +89,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 +117,7 @@ export class EditorAndToolbar extends React.Component {
           value={value}
           isFocused={inFocus}
           onChange={onChange}
+          getFocusedValue={getFocusedValue}
           onDone={onDone}
           onDataChange={onDataChange}
           toolbarRef={toolbarRef}
@@ -117,7 +140,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: {
@@ -175,7 +199,13 @@ const style = {
       display: 'none'
     }
   },
-
+  disabledScrollbar: {
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none'
+  },
   readOnly: {
     '&::before': {
       background: 'transparent',
@@ -214,6 +244,15 @@ const style = {
         backgroundColor: primary
       }
     }
+  },
+  error: {
+    border: '2px solid red'
+  },
+  noBorder: {
+    border: 'none'
+  },
+  noPadding: {
+    padding: 0
   }
 };
 

package/src/plugins/toolbar/index.jsx

@@ -13,6 +13,7 @@ export default function ToolbarPlugin(opts) {
       <EditorAndToolbar
         {...props}
         mainEditorRef={opts.mainEditorRef}
+        disableScrollbar={opts.disableScrollbar}
         disableUnderline={opts.disableUnderline}
         onDone={opts.onDone}
       />

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);