@pie-lib/editable-html-tip-tap 1.0.2 → 1.0.4

package/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -1,257 +0,0 @@
-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 { 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,
-      noBorder: PropTypes.any,
-      noPadding: PropTypes.any,
-    }),
-    focusToolbar: PropTypes.bool.isRequired,
-    onToolbarFocus: PropTypes.func.isRequired,
-    onToolbarBlur: PropTypes.func.isRequired,
-    doneButtonRef: PropTypes.func,
-  };
-
-  render() {
-    const {
-      classes,
-      children,
-      value,
-      plugins,
-      onChange,
-      getFocusedValue,
-      onDone,
-      focusedNode,
-      autoWidth,
-      readOnly,
-      disableScrollbar,
-      disableUnderline,
-      pluginProps,
-      toolbarOpts,
-      onDataChange,
-      toolbarRef,
-      doneButtonRef,
-      focusToolbar,
-      onToolbarFocus,
-      onToolbarBlur,
-    } = this.props;
-
-    let inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined) || focusToolbar;
-
-    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.noPadding,
-              },
-              classes.children,
-            )}
-          >
-            {clonedChildren}
-          </div>
-        </div>
-
-        <Toolbar
-          autoWidth={autoWidth}
-          plugins={plugins}
-          focusedNode={focusedNode}
-          value={value}
-          isFocused={inFocus}
-          onBlur={onToolbarBlur}
-          onFocus={onToolbarFocus}
-          onChange={onChange}
-          getFocusedValue={getFocusedValue}
-          onDone={onDone}
-          onDataChange={onDataChange}
-          toolbarRef={toolbarRef}
-          doneButtonRef={doneButtonRef}
-          pluginProps={pluginProps}
-          toolbarOpts={toolbarOpts}
-        />
-      </div>
-    );
-  }
-}
-
-const style = (theme) => ({
-  root: {
-    position: 'relative',
-    padding: '0px',
-    border: '1px solid #ccc',
-    borderRadius: '4px',
-    cursor: 'text',
-    '& [data-slate-editor="true"]': {
-      wordBreak: 'break-word',
-      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',
-    },
-  },
-  children: {
-    padding: '10px 16px',
-  },
-  editorHolder: {
-    position: 'relative',
-    padding: '0px',
-    overflowY: 'auto',
-    color: color.text(),
-    backgroundColor: color.background(),
-    '&::before': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      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',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      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)',
-    },
-    '&:focus': {
-      '&::after': {
-        transform: 'scaleX(1)',
-        backgroundColor: primary,
-        height: '2px',
-      },
-    },
-    '&:hover': {
-      '&::after': {
-        transform: 'scaleX(1)',
-        backgroundColor: theme.palette.common.black,
-        height: '2px',
-      },
-    },
-  },
-  disabledUnderline: {
-    '&::before': {
-      display: 'none',
-    },
-    '&::after': {
-      display: 'none',
-    },
-  },
-  disabledScrollbar: {
-    '&::-webkit-scrollbar': {
-      display: 'none',
-    },
-    scrollbarWidth: 'none',
-    '-ms-overflow-style': 'none',
-  },
-  readOnly: {
-    '&::before': {
-      background: 'transparent',
-      backgroundSize: '5px 1px',
-      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
-      backgroundRepeat: 'repeat-x',
-      backgroundPosition: 'left top',
-    },
-    '&::after': {
-      left: '0',
-      right: '0',
-      bottom: '0',
-      height: '1px',
-      content: '""',
-      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)',
-    },
-    '&:hover': {
-      '&::after': {
-        transform: 'scaleX(0)',
-        backgroundColor: theme.palette.common.black,
-        height: '2px',
-      },
-    },
-  },
-  editorInFocus: {
-    '&::after': {
-      transform: 'scaleX(1)',
-      backgroundColor: primary,
-      height: '2px',
-    },
-    '&:hover': {
-      '&::after': {
-        backgroundColor: primary,
-      },
-    },
-  },
-  error: {
-    border: `2px solid ${theme.palette.error.main} !important`,
-  },
-  noBorder: {
-    border: 'none',
-  },
-  noPadding: {
-    padding: 0,
-  },
-});
-
-export default withStyles(style)(EditorAndToolbar);

package/src/plugins/toolbar/index.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-
-import EditorAndToolbar from './editor-and-toolbar';
-
-/**
- * Adds a toolbar which is shown when the editor is focused.
- * @param {*} opts
- */
-export default function ToolbarPlugin(opts) {
-  return {
-    /* eslint-disable-next-line */
-    renderEditor: (props) => (
-      <EditorAndToolbar
-        {...props}
-        mainEditorRef={opts.mainEditorRef}
-        disableScrollbar={opts.disableScrollbar}
-        disableUnderline={opts.disableUnderline}
-        autoWidth={opts.autoWidth}
-        onDone={opts.onDone}
-      />
-    ),
-  };
-}

package/src/plugins/toolbar/toolbar.jsx

@@ -1,338 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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);