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

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

@@ -1,23 +1,22 @@
-import React from 'react';
-import { Change } from 'slate';
+import React, { useEffect } from 'react';
+import { Change, Editor, Element as SlateElement, Text, Node } from 'slate';
+import { useSlate, useSlateSelection } from "slate-react";
 import Delete from '@material-ui/icons/Delete';
 import IconButton from '@material-ui/core/IconButton';
 import PropTypes from 'prop-types';
 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');
 
-const getCustomToolbar = (plugin, node, value, handleDone, onDataChange) => {
+const getCustomToolbar = (plugin, node, value, editor, handleDone) => {
   if (!plugin) {
     return;
   }
@@ -34,58 +33,74 @@ const getCustomToolbar = (plugin, node, value, handleDone, onDataChange) => {
     return plugin.toolbar.CustomToolbarComp;
   } else if (typeof plugin.toolbar.customToolbar === 'function') {
     log('deprecated - use CustomToolbarComp');
-    return plugin.toolbar.customToolbar(node, value, handleDone, onDataChange);
+    return plugin.toolbar.customToolbar(node, value, editor, handleDone);
   }
 };
 
-export class Toolbar extends React.Component {
-  static propTypes = {
-    zIndex: PropTypes.number,
-    value: SlatePropTypes.value.isRequired,
-    plugins: PropTypes.array,
-    plugin: PropTypes.object,
-    onImageClick: PropTypes.func,
-    onDone: PropTypes.func.isRequired,
-    toolbarRef: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-    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.func,
-      showDone: PropTypes.bool,
-    }),
-    onDataChange: PropTypes.func,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      change: null,
-    };
+const style = {
+  toolbar: {
+    position: 'absolute',
+    zIndex: 10,
+    cursor: 'pointer',
+    justifyContent: 'space-between',
+    background: 'var(--editable-html-toolbar-bg, #efefef)',
+    minWidth: '280px',
+    margin: '5px 0 0 0',
+    padding: '2px',
+    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'
+  },
+  toolbarWithNoDone: {
+    minWidth: '265px'
+  },
+  toolbarTop: {
+    top: '-45px'
+  },
+  toolbarRight: {
+    right: 0
+  },
+  fullWidth: {
+    width: '100%'
+  },
+  autoWidth: {
+    width: 'auto'
+  },
+  focused: {
+    display: 'flex'
+  },
+  iconRoot: {
+    width: '28px',
+    height: '28px',
+    padding: '4px',
+    verticalAlign: 'top'
+  },
+  label: {
+    color: 'var(--editable-html-toolbar-check, #00bb00)'
+  },
+  shared: {
+    display: 'flex'
   }
+};
 
-  componentWillUnmount() {
-    removeCharacterDialogs();
-  }
+export const Toolbar = props => {
+  useEffect(() => {
+    return () => removeCharacterDialogs();
+  }, []);
 
-  hasMark = (type) => {
-    const { value } = this.props;
-    return value.marks.some((mark) => mark.type == type);
+  const hasMark = type => {
+    const { value } = props;
+    return value.marks.some(mark => mark.type === type);
   };
 
-  hasBlock = (type) => {
-    const { value } = this.props;
-    return value.blocks.some((node) => node.type == type);
+  const hasBlock = type => {
+    const { value } = props;
+    return value.blocks.some(node => node.type === type);
   };
 
-  onToggle = (plugin) => {
-    const { value, onChange } = this.props;
+  const onToggle = plugin => {
+    const { value, onChange } = props;
 
     if (!plugin.onToggle) return;
 
@@ -93,24 +108,23 @@ export class Toolbar extends React.Component {
     onChange(change);
   };
 
-  onClick = (e) => {
+  const onClick = e => {
     log('[onClick]');
     e.preventDefault();
   };
 
-  onButtonClick = (fn) => {
-    return (e) => {
+  const onButtonClick = fn => {
+    return e => {
       e.preventDefault();
       fn();
     };
   };
 
-  onToolbarDone = (change, finishEditing) => {
+  const onToolbarDone = (change, finishEditing) => {
     log('[onToolbarDone] change: ', change, 'finishEditing: ', finishEditing);
-    const { onChange, onDone } = this.props;
+    const { onChange, onDone } = props;
 
-    // use handler only if this is an actual Slate Change
-    if (change instanceof Change) {
+    if (change) {
       onChange(change, () => {
         if (finishEditing) {
           onDone();
@@ -124,191 +138,200 @@ export class Toolbar extends React.Component {
     }
   };
 
-  onDeleteClick = debounce((e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange), 500);
+  const onDeleteClick = debounce(
+    (e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange),
+    500
+  );
 
-  onDeleteMouseDown = (e, plugin, node, value, onChange) => {
+  const onDeleteMouseDown = (e, plugin, node, value, onChange) => {
     e.persist();
-    this.onDeleteClick(e, plugin, node, value, onChange);
+    onDeleteClick(e, plugin, node, value, onChange);
   };
 
-  render() {
-    const {
-      classes,
-      plugins,
-      pluginProps,
-      toolbarOpts,
-      value,
-      autoWidth,
-      onChange,
-      getFocusedValue,
-      isFocused,
-      onDone,
-      toolbarRef,
-    } = this.props;
-
-    const node = findSingleNode(value);
-    const parentNode = findParentNode(value, node);
-
-    log(' --------------> [render] node: ', node);
-    log('[render] node: ', node);
-
-    const plugin = plugins.find((p) => {
-      if (!node) {
-        return;
-      }
+  const {
+    classes,
+    plugins,
+    pluginProps,
+    toolbarOpts,
+    value,
+    autoWidth,
+    onChange,
+    getFocusedValue,
+    isFocused,
+    onDone,
+    toolbarRef
+  } = props;
+
+  const editor = useSlate();
+  const selection = useSlateSelection();
+  const getNode = (editor, selection, depth) => {
+    if (!selection) {
+      return null;
+    }
 
-      if (p.toolbar) {
-        return p.toolbar.supports && p.toolbar.supports(node, value);
-      }
-    });
-    const parentPlugin = plugins.find((p) => {
-      if (!parentNode) {
-        return;
-      }
+    const [node, path] = Editor.node(editor, selection, depth ? { depth } : undefined);
 
-      if (p.toolbar) {
-        return p.toolbar.supports && p.toolbar.supports(parentNode, value);
-      }
-    });
+    if (!node) {
+      return null;
+    }
 
-    log('[render] plugin: ', plugin);
+    if (!Text.isText(node)) {
+      return [node, path];
+    }
 
-    const handleDone = (change, done) => {
-      let handler = onDone;
+    return getNode(editor, selection, path.length - 1);
+  };
+  const getParentNode = (editor, path) => Array.isArray(path) && path.length > 0 && Editor.parent(editor, path);
 
-      if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {
-        handler = this.onToolbarDone;
-      }
+  const [node, nodePath] = getNode(editor, selection) || [];
+  const [parentNode] = getParentNode(editor, nodePath) || [];
 
-      handler(change, done);
+  log(' --------------> [render] node: ', node);
+  log('[render] node: ', node);
 
-      if (parentPlugin && parentPlugin.handleDone) {
-        parentPlugin.handleDone(value, node, plugin, onChange);
-      }
-    };
+  const plugin = plugins.find(p => {
+    if (!node) {
+      return;
+    }
 
-    const handleDataChange = (key, data) => {
-      this.props.onDataChange(key, data);
-    };
+    if (p.toolbar) {
+      return p.supports && p.supports(node, editor, value);
+    }
+  });
+  const parentPlugin = plugins.find(p => {
+    if (!parentNode) {
+      return;
+    }
 
-    const CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, this.props.onDataChange);
+    if (p.toolbar) {
+      return p.supports && p.supports(parentNode, editor, value);
+    }
+  });
 
-    const filteredPlugins = plugin && plugin.filterPlugins ? plugin.filterPlugins(node, plugins) : plugins;
+  log('[render] plugin: ', plugin);
 
-    log('[render] CustomToolbar: ', CustomToolbar);
-    const parentExtraStyles =
-      parentPlugin && parentPlugin.pluginStyles ? parentPlugin.pluginStyles(node, parentNode, plugin) : {};
-    const pluginExtraStyles = plugin && plugin.pluginStyles ? plugin.pluginStyles(node, parentNode, plugin) : {};
-    const extraStyles = {
-      ...pluginExtraStyles,
-      ...parentExtraStyles,
-    };
+  const handleDone = editor => {
+    let handler = onDone;
 
-    const deletable = node && plugin && plugin.deleteNode;
-    const customToolbarShowDone =
-      node && plugin && plugin.toolbar && plugin.toolbar.showDone && !toolbarOpts.alwaysVisible;
-
-    // If there is a toolbarOpts we check if the showDone is not equal to false
-    const defaultToolbarShowDone = !toolbarOpts || toolbarOpts.showDone !== false;
-
-    const hasDoneButton = defaultToolbarShowDone || customToolbarShowDone;
-
-    const names = classNames(classes.toolbar, {
-      [classes.toolbarWithNoDone]: !hasDoneButton,
-      [classes.toolbarTop]: toolbarOpts.position === 'top',
-      [classes.toolbarRight]: toolbarOpts.alignment === 'right',
-      [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
-      [classes.autoWidth]: autoWidth,
-      [classes.fullWidth]: !autoWidth,
-    });
-
-    return (
-      <div className={names} style={extraStyles} onClick={this.onClick} ref={toolbarRef}>
-        {CustomToolbar ? (
-          <CustomToolbar
-            node={node}
-            value={value}
-            onToolbarDone={this.onToolbarDone}
-            onDataChange={handleDataChange}
-            pluginProps={pluginProps}
-          />
-        ) : (
-          <DefaultToolbar
-            plugins={filteredPlugins}
-            pluginProps={pluginProps}
-            value={value}
-            onChange={onChange}
-            getFocusedValue={getFocusedValue}
-            showDone={defaultToolbarShowDone}
-            onDone={handleDone}
-            deletable={deletable}
-          />
-        )}
+    if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {
+      handler = onToolbarDone;
+    }
+
+    handler(editor);
 
-        <div className={classes.shared}>
-          {deletable && (
-            <IconButton
-              aria-label="Delete"
-              className={classes.iconRoot}
-              onMouseDown={(e) => this.onDeleteMouseDown(e, plugin, node, value, onChange)}
-              classes={{
-                root: classes.iconRoot,
-              }}
-            >
-              <Delete />
-            </IconButton>
-          )}
-          {customToolbarShowDone && <DoneButton onClick={handleDone} />}
-        </div>
+    if (parentPlugin && parentPlugin.handleDone) {
+      parentPlugin.handleDone(editor, node, plugin);
+    }
+  };
+
+  const CustomToolbar = getCustomToolbar(plugin, node, value, editor, handleDone);
+
+  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) : {};
+  const extraStyles = {
+    ...pluginExtraStyles,
+    ...parentExtraStyles
+  };
+
+  const deletable = node && plugin && typeof plugin.deleteNode === 'function';
+  const customToolbarShowDone =
+    node && plugin && plugin.toolbar && plugin.toolbar.showDone && !toolbarOpts.alwaysVisible;
+
+  // If there is a toolbarOpts we check if the showDone is not equal to false
+  const defaultToolbarShowDone = !toolbarOpts || toolbarOpts.showDone !== false;
+
+  const hasDoneButton = defaultToolbarShowDone || customToolbarShowDone;
+
+  const names = classNames(classes.toolbar, {
+    [classes.toolbarWithNoDone]: !hasDoneButton,
+    [classes.toolbarTop]: toolbarOpts.position === 'top',
+    [classes.toolbarRight]: toolbarOpts.alignment === 'right',
+    [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
+    [classes.autoWidth]: autoWidth,
+    [classes.fullWidth]: !autoWidth
+  });
+
+  return (
+    <div className={names} style={extraStyles} onClick={onClick} ref={toolbarRef}>
+      {CustomToolbar ? (
+        <CustomToolbar
+          editor={editor}
+          node={node}
+          nodePath={nodePath}
+          value={value}
+          onToolbarDone={onToolbarDone}
+          pluginProps={pluginProps}
+        />
+      ) : (
+        <DefaultToolbar
+          editor={editor}
+          nodePath={nodePath}
+          plugins={filteredPlugins}
+          pluginProps={pluginProps}
+          value={value}
+          onChange={onChange}
+          getFocusedValue={getFocusedValue}
+          showDone={defaultToolbarShowDone}
+          onDone={handleDone}
+          deletable={deletable}
+        />
+      )}
+
+      <div className={classes.shared}>
+        {deletable && (
+          <IconButton
+            aria-label="Delete"
+            className={classes.iconRoot}
+            onMouseDown={e => onDeleteMouseDown(e, plugin, node, value, onChange)}
+            classes={{
+              root: classes.iconRoot
+            }}
+          >
+            <Delete />
+          </IconButton>
+        )}
+        {customToolbarShowDone && <DoneButton onClick={handleDone} />}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
 
-const style = {
-  toolbar: {
-    position: 'absolute',
-    zIndex: 10,
-    cursor: 'pointer',
-    justifyContent: 'space-between',
-    background: 'var(--editable-html-toolbar-bg, #efefef)',
-    minWidth: '280px',
-    margin: '5px 0 0 0',
-    padding: '2px',
-    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',
-  },
-  toolbarWithNoDone: {
-    minWidth: '265px',
-  },
-  toolbarTop: {
-    top: '-45px',
-  },
-  toolbarRight: {
-    right: 0,
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  autoWidth: {
-    width: 'auto',
-  },
-  focused: {
-    display: 'flex',
-  },
-  iconRoot: {
-    width: '28px',
-    height: '28px',
-    padding: '4px',
-    verticalAlign: 'top',
-  },
-  label: {
-    color: 'var(--editable-html-toolbar-check, #00bb00)',
-  },
-  shared: {
-    display: 'flex',
-  },
+Toolbar.propTypes = {
+  editor: PropTypes.object.isRequired,
+  zIndex: PropTypes.number,
+  value: PropTypes.arrayOf(
+    PropTypes.shape({
+      type: PropTypes.string,
+      children: PropTypes.array,
+      data: PropTypes.object
+    })
+  ),
+  plugins: PropTypes.array,
+  plugin: PropTypes.object,
+  onImageClick: PropTypes.func,
+  onDone: PropTypes.func.isRequired,
+  toolbarRef: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+  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.func,
+    showDone: PropTypes.bool
+  })
 };
+
 export default withStyles(style, { index: 1000 })(Toolbar);

package/src/plugins/utils.js

@@ -1,4 +1,6 @@
-export const findSingleNode = (value) => {
+import { Editor, Element as SlateElement } from "slate";
+
+export const findSingleNode = value => {
   if (!value || !value.isCollapsed || !value.startKey) {
     return;
   }
@@ -24,8 +26,23 @@ 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 isBlockActive = (editor, format, blockType = 'type') => {
+  const { selection } = editor;
+  if (!selection) return false;
 
-export const hasBlock = (value, type) => value && value.blocks.some((node) => node.type == type);
+  const [match] = Array.from(
+    Editor.nodes(editor, {
+      at: Editor.unhangRange(editor, selection),
+      match: n => !Editor.isEditor(n) && SlateElement.isElement(n) && n[blockType] === format
+    })
+  );
+
+  return !!match;
+};
 
-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);