@pie-element/ebsr 6.6.3-next.264 → 6.6.3-next.280

package/configure/node_modules/@pie-lib/editable-html/src/plugins/toolbar/default-toolbar.jsx

@@ -0,0 +1,103 @@
+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';
+
+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 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)}
+        extraStyles={props.buttonStyles}
+      >
+        {props.icon}
+      </Button>
+    );
+  }
+};
+
+const isActiveToolbarPlugin = props => plugin => {
+  const isDisabled = (props[plugin.name] || {}).disabled;
+  return plugin && plugin.toolbar && !isDisabled;
+};
+
+export const DefaultToolbar = ({
+  plugins,
+  pluginProps,
+  value,
+  onChange,
+  onDone,
+  classes,
+  showDone,
+  deletable
+}) => {
+  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} />;
+        })}
+      </div>
+      {showDone && !deletable && <DoneButton onClick={onDone} />}
+    </div>
+  );
+};
+
+DefaultToolbar.propTypes = {
+  classes: PropTypes.object.isRequired,
+  plugins: PropTypes.array.isRequired,
+  pluginProps: PropTypes.object,
+  value: SlatePropTypes.value.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onDone: PropTypes.func.isRequired,
+  showDone: PropTypes.bool,
+  addArea: PropTypes.bool,
+  deletable: PropTypes.bool
+};
+
+DefaultToolbar.defaultProps = {
+  pluginProps: {}
+};
+
+const toolbarStyles = () => ({
+  defaultToolbar: {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between'
+  },
+  buttonsContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    width: '100%'
+  }
+});
+
+export default withStyles(toolbarStyles)(DefaultToolbar);

package/configure/node_modules/@pie-lib/editable-html/src/plugins/toolbar/done-button.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import IconButton from '@material-ui/core/IconButton';
+import Check from '@material-ui/icons/Check';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+export const RawDoneButton = ({ classes, onClick }) => (
+  <IconButton
+    aria-label="Done"
+    className={classes.iconRoot}
+    onClick={onClick}
+    classes={{
+      label: classes.label,
+      root: classes.iconRoot
+    }}
+  >
+    <Check />
+  </IconButton>
+);
+
+RawDoneButton.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onClick: PropTypes.func
+};
+
+const styles = {
+  iconRoot: {
+    verticalAlign: 'top',
+    width: '28px',
+    height: '28px',
+    color: 'var(--editable-html-toolbar-check, #00bb00)',
+    padding: '4px'
+  }
+};
+export const DoneButton = withStyles(styles)(RawDoneButton);

package/configure/node_modules/@pie-lib/editable-html/src/plugins/toolbar/editor-and-toolbar.jsx

@@ -0,0 +1,217 @@
+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,
+    onDone: PropTypes.func.isRequired,
+    onDataChange: PropTypes.func,
+    focusedNode: SlatePropTypes.node,
+    readOnly: 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
+    })
+  };
+
+  /** 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,
+      onDone,
+      focusedNode,
+      autoWidth,
+      readOnly,
+      disableUnderline,
+      pluginProps,
+      toolbarOpts,
+      onDataChange
+    } = this.props;
+
+    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
+    const holderNames = classNames(
+      classes.editorHolder,
+      inFocus && classes.editorInFocus,
+      readOnly && classes.readOnly,
+      disableUnderline && classes.disabledUnderline
+    );
+    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={classes.root}>
+        <div className={holderNames}>
+          <div className={classes.children}>{clonedChildren}</div>
+        </div>
+        <Toolbar
+          autoWidth={autoWidth}
+          plugins={plugins}
+          focusedNode={focusedNode}
+          value={value}
+          isFocused={inFocus}
+          onChange={onChange}
+          onDone={onDone}
+          onDataChange={onDataChange}
+          pluginProps={pluginProps}
+          toolbarOpts={toolbarOpts}
+        />
+      </div>
+    );
+  }
+}
+
+const style = {
+  root: {
+    position: 'relative',
+    padding: '0px',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    cursor: 'text',
+    '& [data-slate-editor="true"]': {
+      wordBreak: 'break-word',
+      overflow: 'visible',
+      maxHeight: '500px',
+      padding: '5px 0'
+    }
+  },
+  children: {
+    padding: '10px 16px'
+  },
+  editorHolder: {
+    position: 'relative',
+    padding: '0px',
+    overflowY: 'scroll',
+    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: 'black',
+        height: '2px'
+      }
+    }
+  },
+  disabledUnderline: {
+    '&::before': {
+      display: 'none'
+    },
+    '&::after': {
+      display: '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: 'black',
+        height: '2px'
+      }
+    }
+  },
+  editorInFocus: {
+    '&::after': {
+      transform: 'scaleX(1)',
+      backgroundColor: primary,
+      height: '2px'
+    },
+    '&:hover': {
+      '&::after': {
+        backgroundColor: primary
+      }
+    }
+  }
+};
+
+export default withStyles(style)(EditorAndToolbar);

package/configure/node_modules/@pie-lib/editable-html/src/plugins/toolbar/index.jsx

@@ -0,0 +1,21 @@
+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}
+        disableUnderline={opts.disableUnderline}
+        onDone={opts.onDone}
+      />
+    )
+  };
+}

package/configure/node_modules/@pie-lib/editable-html/src/plugins/toolbar/toolbar-buttons.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import debug from 'debug';
+import injectSheet from 'react-jss';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+const styles = () => ({
+  button: {
+    color: 'grey',
+    display: 'inline-flex',
+    padding: '2px',
+    '& :hover': {
+      color: 'black'
+    }
+  },
+  active: {
+    color: 'black'
+  }
+});
+
+const log = debug('pie-elements:editable-html:raw-button');
+
+export class RawButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    active: PropTypes.bool,
+    extraStyles: PropTypes.object
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  onClick = e => {
+    log('[onClick]');
+    e.preventDefault();
+    const { onClick } = this.props;
+    onClick(e);
+  };
+
+  render() {
+    const { active, classes, children, extraStyles } = this.props;
+    const names = classNames(classes.button, active && classes.active);
+
+    return (
+      <div style={extraStyles} className={names} onMouseDown={this.onClick}>
+        {children}
+      </div>
+    );
+  }
+}
+
+export const Button = injectSheet(styles())(RawButton);
+
+export class RawMarkButton extends React.Component {
+  static propTypes = {
+    onToggle: PropTypes.func.isRequired,
+    mark: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    classes: PropTypes.object.isRequired,
+    active: PropTypes.bool
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  onToggle = e => {
+    e.preventDefault();
+    this.props.onToggle(this.props.mark);
+  };
+
+  render() {
+    const { classes, children, active } = this.props;
+    const names = classNames(classes.button, active && classes.active);
+    return (
+      <span className={names} onMouseDown={this.onToggle}>
+        {children}
+      </span>
+    );
+  }
+}
+
+export const MarkButton = injectSheet(styles())(RawMarkButton);