@pie-lib/editable-html-tip-tap 1.0.0

package/src/plugins/toolbar/toolbar.jsx

@@ -0,0 +1,338 @@
+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 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';
+import { PIE_TOOLBAR__CLASS } from '../../constants';
+
+const log = debug('@pie-lib:editable-html:plugins:toolbar');
+
+const getCustomToolbar = (plugin, node, value, handleDone, getFocusedValue, onDataChange) => {
+  if (!plugin) {
+    return;
+  }
+
+  if (!plugin.toolbar) {
+    return;
+  }
+
+  if (plugin.toolbar.CustomToolbarComp) {
+    /**
+     * Using a pre-defined Component should be preferred
+     * as the rendering of it (and it's children) can be optimized by React.
+     * If you keep re-defining the comp with an inline function
+     * then react will have to re-render.
+     */
+    return plugin.toolbar.CustomToolbarComp;
+  } else if (typeof plugin.toolbar.customToolbar === 'function') {
+    log('deprecated - use CustomToolbarComp');
+    return plugin.toolbar.customToolbar(node, value, handleDone, getFocusedValue, onDataChange);
+  }
+};
+
+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,
+      minWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      isHidden: PropTypes.bool,
+    }),
+    onDataChange: PropTypes.func,
+    doneButtonRef: PropTypes.func,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      change: null,
+    };
+  }
+
+  componentWillUnmount() {
+    removeCharacterDialogs();
+  }
+
+  hasMark = (type) => {
+    const { value } = this.props;
+    return value.marks.some((mark) => mark.type == type);
+  };
+
+  hasBlock = (type) => {
+    const { value } = this.props;
+    return value.blocks.some((node) => node.type == type);
+  };
+
+  onToggle = (plugin) => {
+    const { value, onChange } = this.props;
+
+    if (!plugin.onToggle) return;
+
+    const change = plugin.onToggle(value.change());
+    onChange(change);
+  };
+
+  onClick = (e) => {
+    log('[onClick]');
+    e.preventDefault();
+  };
+
+  onButtonClick = (fn) => {
+    return (e) => {
+      e.preventDefault();
+      fn();
+    };
+  };
+
+  onToolbarDone = (change, finishEditing) => {
+    log('[onToolbarDone] change: ', change, 'finishEditing: ', finishEditing);
+    const { onChange, onDone } = this.props;
+
+    // use handler only if this is an actual Slate Change
+    if (change instanceof Change) {
+      onChange(change, () => {
+        if (finishEditing) {
+          onDone();
+        }
+      });
+    } else {
+      if (finishEditing) {
+        log('[onToolbarChange] call onDone');
+        onDone();
+      }
+    }
+  };
+
+  onDeleteClick = debounce((e, plugin, node, value, onChange) => plugin.deleteNode(e, node, value, onChange), 500);
+
+  onDeleteMouseDown = (e, plugin, node, value, onChange) => {
+    e.persist();
+    this.onDeleteClick(e, plugin, node, value, onChange);
+  };
+
+  render() {
+    const {
+      classes,
+      plugins,
+      pluginProps,
+      toolbarOpts,
+      value,
+      autoWidth,
+      onChange,
+      getFocusedValue,
+      isFocused,
+      onDone,
+      toolbarRef,
+      doneButtonRef,
+      onBlur,
+      onFocus,
+    } = 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;
+      }
+
+      if (p.toolbar) {
+        return p.toolbar.supports && p.toolbar.supports(node, value);
+      }
+    });
+    const parentPlugin = plugins.find((p) => {
+      if (!parentNode) {
+        return;
+      }
+
+      if (p.toolbar) {
+        return p.toolbar.supports && p.toolbar.supports(parentNode, value);
+      }
+    });
+
+    log('[render] plugin: ', plugin);
+
+    const handleDone = (change, done) => {
+      let handler = onDone;
+
+      if (plugin && plugin.toolbar && plugin.toolbar.customToolbar) {
+        handler = this.onToolbarDone;
+      }
+
+      handler(change, done);
+
+      if (parentPlugin && parentPlugin.handleDone) {
+        parentPlugin.handleDone(value, node, plugin, onChange);
+      }
+    };
+
+    const handleDataChange = (key, data) => {
+      this.props.onDataChange(key, data);
+    };
+
+    const CustomToolbar = getCustomToolbar(plugin, node, value, handleDone, getFocusedValue, this.props.onDataChange);
+
+    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 && 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, PIE_TOOLBAR__CLASS, {
+      [classes.toolbarWithNoDone]: !hasDoneButton,
+      [classes.toolbarTop]: toolbarOpts.position === 'top',
+      [classes.toolbarRight]: toolbarOpts.alignment === 'right',
+      [classes.focused]: toolbarOpts.alwaysVisible || isFocused,
+      [classes.autoWidth]: autoWidth,
+      [classes.fullWidth]: !autoWidth,
+      [classes.hidden]: toolbarOpts.isHidden === true,
+    });
+    const customStyles = toolbarOpts.minWidth !== undefined ? { minWidth: toolbarOpts.minWidth } : {};
+
+    return (
+      <div className={names} style={{ ...extraStyles, ...customStyles }} onClick={this.onClick} ref={toolbarRef}>
+        {CustomToolbar ? (
+          <CustomToolbar
+            node={node}
+            value={value}
+            getFocusedValue={getFocusedValue}
+            onToolbarDone={this.onToolbarDone}
+            onDataChange={handleDataChange}
+            pluginProps={pluginProps}
+          />
+        ) : (
+          <DefaultToolbar
+            plugins={filteredPlugins}
+            pluginProps={pluginProps}
+            value={value}
+            onChange={onChange}
+            getFocusedValue={getFocusedValue}
+            showDone={defaultToolbarShowDone}
+            onDone={handleDone}
+            deletable={deletable}
+            isHtmlMode={toolbarOpts.isHtmlMode}
+            onFocus={onFocus}
+            doneButtonRef={doneButtonRef}
+            onBlur={onBlur}
+          />
+        )}
+
+        <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 doneButtonRef={doneButtonRef} 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: 'flex',
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  toolbarWithNoDone: {
+    minWidth: '265px',
+  },
+  toolbarTop: {
+    top: '-45px',
+  },
+  toolbarRight: {
+    right: 0,
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  hidden: {
+    visibility: 'hidden',
+  },
+  autoWidth: {
+    width: 'auto',
+  },
+  focused: {
+    opacity: 1,
+    pointerEvents: 'auto',
+  },
+  iconRoot: {
+    width: '28px',
+    height: '28px',
+    padding: '4px',
+    verticalAlign: 'top',
+  },
+  label: {
+    color: 'var(--editable-html-toolbar-check, #00bb00)',
+  },
+  shared: {
+    display: 'flex',
+  },
+};
+export default withStyles(style, { index: 1000 })(Toolbar);

package/src/plugins/utils.js

@@ -0,0 +1,31 @@
+export const findSingleNode = (value) => {
+  if (!value || !value.isCollapsed || !value.startKey) {
+    return;
+  }
+
+  const inline = value.document.getClosestInline(value.startKey);
+
+  if (inline) {
+    return inline;
+  }
+
+  const block = value.document.getClosestBlock(value.startKey);
+
+  if (block) {
+    return block;
+  }
+};
+
+export const findParentNode = (value, node) => {
+  if (!value || !node) {
+    return;
+  }
+
+  return value.document.getParent(node.key);
+};
+
+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 hasNode = ({ document }, type) => document && document.nodes.some((node) => node.type == type);