@pie-lib/editable-html 9.5.13 → 10.0.0-beta.1

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

@@ -14,7 +14,7 @@ const log = debug('@pie-lib:editable-html:plugins:table-toolbar');
 export class TableToolbar extends React.Component {
   static propTypes = {
     plugins: PropTypes.array.isRequired,
-    value: PropTypes.object.isRequired,
+    editor: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
     onAddRow: PropTypes.func.isRequired,
     onRemoveRow: PropTypes.func.isRequired,
@@ -24,16 +24,15 @@ 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();
@@ -42,7 +41,7 @@ export class TableToolbar extends React.Component {
   render() {
     const {
       plugins,
-      value,
+      editor,
       onChange,
       onAddRow,
       onRemoveRow,
@@ -51,7 +50,7 @@ export class TableToolbar extends React.Component {
       onRemoveTable,
       onToggleBorder,
       hasBorder,
-      classes,
+      classes
     } = this.props;
     log('[render] hasBorder:', hasBorder);
 
@@ -74,7 +73,12 @@ 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}`}
+              editor={editor}
+              {...p.toolbar}
+              onChange={onChange}
+            />
           ))}
           <Button onClick={onToggleBorder} active={hasBorder}>
             <BorderAll />
@@ -90,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

@@ -1,25 +1,43 @@
 import { DoneButton } from './done-button';
 import PropTypes from 'prop-types';
 import React from 'react';
-import SlatePropTypes from 'slate-prop-types';
 
 import { hasBlock, hasMark } from '../utils';
 import { withStyles } from '@material-ui/core/styles';
 
 import { Button, MarkButton } from './toolbar-buttons';
 import debug from 'debug';
+import { Editor, Element as SlateElement } from "slate";
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar');
 
-export const ToolbarButton = (props) => {
-  const onToggle = () => {
-    const c = props.onToggle(props.value.change(), props);
+const isMarkActive = (editor, format) => {
+  const marks = Editor.marks(editor);
+  return marks ? marks[format] === true : false;
+};
+
+const isBlockActive = (editor, format) => {
+  const { selection } = editor;
+  if (!selection) return false;
+
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n.type === format
+    })
+  );
+
+  return !!match;
+};
 
-    props.onChange(c);
+export const ToolbarButton = props => {
+  const { editor } = props;
+  const onToggle = () => {
+    props.onToggle(editor, props);
   };
 
   if (props.isMark) {
-    const isActive = hasMark(props.value, props.type);
+    const isActive = isMarkActive(editor, props.type);
 
     log('[ToolbarButton] mark:isActive: ', isActive);
 
@@ -30,7 +48,9 @@ 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(editor, props.type)
+      : isBlockActive(editor, props.type);
 
     log('[ToolbarButton] block:isActive: ', isActive);
 
@@ -38,7 +58,7 @@ export const ToolbarButton = (props) => {
       <Button
         active={isActive}
         disabled={disabled}
-        onClick={() => props.onClick(props.value, props.onChange, props.getFocusedValue)}
+        onClick={() => props.onClick(editor)}
         extraStyles={props.buttonStyles}
       >
         {props.icon}
@@ -47,13 +67,26 @@ export const ToolbarButton = (props) => {
   }
 };
 
-const isActiveToolbarPlugin = (props) => (plugin) => {
+ToolbarButton.propTypes = {
+  disabled: PropTypes.bool,
+  icon: PropTypes.object,
+  editor: PropTypes.object,
+  isActive: PropTypes.func,
+  isMark: PropTypes.bool,
+  onClick: PropTypes.func,
+  onToggle: PropTypes.func,
+  type: PropTypes.string,
+  buttonStyles: PropTypes.object,
+};
+
+const isActiveToolbarPlugin = props => plugin => {
   const isDisabled = (props[plugin.name] || {}).disabled;
 
   return plugin && plugin.toolbar && !isDisabled;
 };
 
 export const DefaultToolbar = ({
+  editor,
   plugins,
   pluginProps,
   value,
@@ -62,20 +95,27 @@ 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}
+              editor={editor}
+              key={index}
+              value={value}
+              onChange={onChange}
+              getFocusedValue={getFocusedValue}
+            />
           );
         })}
       </div>
-      {showDone && !deletable && <DoneButton onClick={onDone} />}
+      {showDone && !deletable && <DoneButton onClick={() => onDone(editor)} />}
     </div>
   );
 };
@@ -84,30 +124,36 @@ DefaultToolbar.propTypes = {
   classes: PropTypes.object.isRequired,
   plugins: PropTypes.array.isRequired,
   pluginProps: PropTypes.object,
-  value: SlatePropTypes.value.isRequired,
+  value: PropTypes.arrayOf(
+    PropTypes.shape({
+      type: PropTypes.string,
+      children: PropTypes.array,
+      data: PropTypes.object
+    })
+  ),
   onChange: PropTypes.func.isRequired,
   getFocusedValue: PropTypes.func.isRequired,
   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

@@ -1,128 +1,16 @@
 import React from 'react';
+
 import Toolbar from './toolbar';
 import classNames from 'classnames';
 import debug from 'debug';
 import { primary } from '../../theme';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
-import SlatePropTypes from 'slate-prop-types';
-import { IS_FIREFOX } from 'slate-dev-environment';
 import { color } from '@pie-lib/render-ui';
 
 const log = debug('@pie-lib:editable-html:plugins:toolbar:editor-and-toolbar');
 
-export class EditorAndToolbar extends React.Component {
-  static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    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,
-      error: PropTypes.string,
-    }),
-  };
-
-  /** This is an interim fix until this PR is merged in slate:
-   * https://github.com/ianstormtaylor/slate/pull/2236
-   */
-  componentDidMount() {
-    if (IS_FIREFOX) {
-      this.editorRef.tmp.isUpdatingSelection = true;
-    }
-  }
-
-  render() {
-    const {
-      classes,
-      children,
-      value,
-      plugins,
-      onChange,
-      getFocusedValue,
-      onDone,
-      focusedNode,
-      autoWidth,
-      readOnly,
-      disableScrollbar,
-      disableUnderline,
-      pluginProps,
-      toolbarOpts,
-      onDataChange,
-      toolbarRef,
-    } = this.props;
-
-    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
-    const holderNames = classNames(classes.editorHolder, {
-      [classes.editorInFocus]: inFocus,
-      [classes.readOnly]: readOnly,
-      [classes.disabledUnderline]: disableUnderline,
-      [classes.disabledScrollbar]: disableScrollbar,
-    });
-    let clonedChildren = children;
-
-    if (typeof children !== 'string') {
-      clonedChildren = React.cloneElement(children, {
-        ref: (el) => (this.editorRef = el),
-      });
-    }
-
-    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.root,
-        )}
-      >
-        <div className={holderNames}>
-          <div
-            className={classNames(
-              {
-                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
-              },
-              classes.children,
-            )}
-          >
-            {clonedChildren}
-          </div>
-        </div>
-        <Toolbar
-          autoWidth={autoWidth}
-          plugins={plugins}
-          focusedNode={focusedNode}
-          value={value}
-          isFocused={inFocus}
-          onChange={onChange}
-          getFocusedValue={getFocusedValue}
-          onDone={onDone}
-          onDataChange={onDataChange}
-          toolbarRef={toolbarRef}
-          pluginProps={pluginProps}
-          toolbarOpts={toolbarOpts}
-        />
-      </div>
-    );
-  }
-}
-
-const style = (theme) => ({
+const style = {
   root: {
     position: 'relative',
     padding: '0px',
@@ -134,11 +22,15 @@ const style = (theme) => ({
       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'
+    }
   },
   children: {
-    padding: '10px 16px',
+    padding: '10px 16px'
   },
   editorHolder: {
     position: 'relative',
@@ -155,7 +47,6 @@ const style = (theme) => ({
       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',
@@ -165,38 +56,39 @@ const style = (theme) => ({
       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: theme.palette.common.black,
-        height: '2px',
-      },
-    },
+        backgroundColor: 'black',
+        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': {
@@ -204,7 +96,7 @@ const style = (theme) => ({
       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',
@@ -215,37 +107,150 @@ const style = (theme) => ({
       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: theme.palette.common.black,
-        height: '2px',
-      },
-    },
+        backgroundColor: 'black',
+        height: '2px'
+      }
+    }
   },
   editorInFocus: {
     '&::after': {
       transform: 'scaleX(1)',
       backgroundColor: primary,
-      height: '2px',
+      height: '2px'
     },
     '&:hover': {
       '&::after': {
-        backgroundColor: primary,
-      },
-    },
+        backgroundColor: primary
+      }
+    }
   },
   error: {
-    border: `2px solid ${theme.palette.error.main}`,
+    border: '2px solid red'
   },
   noBorder: {
-    border: 'none',
+    border: 'none'
   },
   noPadding: {
-    padding: 0,
-  },
-});
+    padding: 0
+  }
+};
+
+export const EditorAndToolbar = props => {
+  const {
+    editor,
+    classes,
+    children,
+    value,
+    plugins,
+    onChange,
+    getFocusedValue,
+    onDone,
+    focusedNode,
+    autoWidth,
+    readOnly,
+    disableScrollbar,
+    disableUnderline,
+    pluginProps,
+    toolbarOpts,
+    toolbarRef,
+    isFocused
+  } = props;
+
+  const holderNames = classNames(classes.editorHolder, {
+    [classes.editorInFocus]: isFocused,
+    [classes.readOnly]: readOnly,
+    [classes.disabledUnderline]: disableUnderline,
+    [classes.disabledScrollbar]: disableScrollbar
+  });
+  let clonedChildren = children;
+
+  log(
+    '[render] inFocus: ',
+    isFocused,
+    'value.isFocused:',
+    value.isFocused,
+    'focused node: ',
+    focusedNode
+  );
+
+  return (
+    <div
+      className={classNames(
+        {
+          [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
+          [classes.error]: toolbarOpts && toolbarOpts.error
+        },
+        classes.root
+      )}
+    >
+      <div className={holderNames}>
+        <div
+          className={classNames(
+            {
+              [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder
+            },
+            classes.children
+          )}
+        >
+          {clonedChildren}
+        </div>
+      </div>
+      <Toolbar
+        editor={editor}
+        autoWidth={autoWidth}
+        plugins={plugins}
+        focusedNode={focusedNode}
+        value={value}
+        isFocused={isFocused}
+        onChange={onChange}
+        getFocusedValue={getFocusedValue}
+        onDone={onDone}
+        toolbarRef={toolbarRef}
+        pluginProps={pluginProps}
+        toolbarOpts={toolbarOpts}
+      />
+    </div>
+  );
+};
+
+EditorAndToolbar.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  value: PropTypes.arrayOf(
+    PropTypes.shape({
+      type: PropTypes.string,
+      children: PropTypes.array,
+      data: PropTypes.object
+    })
+  ),
+  editor: PropTypes.object.isRequired,
+  isFocused: PropTypes.bool,
+  plugins: PropTypes.array.isRequired,
+  onChange: PropTypes.func.isRequired,
+  getFocusedValue: PropTypes.func.isRequired,
+  onDone: PropTypes.func.isRequired,
+  toolbarRef: PropTypes.func,
+  focusedNode: PropTypes.shape({
+    type: PropTypes.string,
+    children: PropTypes.array,
+    data: PropTypes.object
+  }),
+  readOnly: PropTypes.bool,
+  disableScrollbar: PropTypes.bool,
+  disableUnderline: PropTypes.bool,
+  autoWidth: PropTypes.bool,
+  classes: PropTypes.object.isRequired,
+  pluginProps: PropTypes.object,
+  toolbarOpts: PropTypes.shape({
+    alwaysVisible: PropTypes.bool,
+    error: PropTypes.string,
+    noBorder: PropTypes.bool,
+    position: PropTypes.oneOf(['bottom', 'top'])
+  })
+};
 
 export default withStyles(style)(EditorAndToolbar);

package/src/plugins/toolbar/index.jsx

@@ -9,15 +9,14 @@ 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}
       />
-    ),
+    )
   };
 }