@pie-element/rubric 3.6.1 → 3.6.2

package/controller/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/toolbar/default-toolbar.jsx

@@ -1,144 +0,0 @@
-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 { is } from 'immutable';
-
-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 { disabled } = props;
-    const isActive = props.isActive ? props.isActive(props.value, props.type) : hasBlock(props.value, props.type);
-
-    log('[ToolbarButton] block:isActive: ', isActive);
-
-    return (
-      <Button
-        active={isActive}
-        disabled={disabled}
-        onClick={() => props.onClick(props.value, props.onChange, props.getFocusedValue)}
-        extraStyles={props.buttonStyles}
-      >
-        {props.icon}
-      </Button>
-    );
-  }
-};
-
-ToolbarButton.propTypes = {
-  buttonStyles: PropTypes.object,
-  disabled: PropTypes.bool,
-  icon: PropTypes.any,
-  isActive: PropTypes.bool,
-  isMark: PropTypes.bool,
-  getFocusedValue: PropTypes.func,
-  onToggle: PropTypes.func,
-  onChange: PropTypes.func,
-  onClick: PropTypes.func,
-  type: PropTypes.string,
-  value: PropTypes.object,
-};
-
-const isActiveToolbarPlugin = (props) => (plugin) => {
-  const isDisabled = (props[plugin.name] || {}).disabled;
-
-  return plugin && plugin.toolbar && !isDisabled;
-};
-
-export const DefaultToolbar = ({
-  plugins,
-  pluginProps,
-  value,
-  onChange,
-  getFocusedValue,
-  onDone,
-  classes,
-  showDone,
-  deletable,
-  isHtmlMode,
-}) => {
-  pluginProps = {
-    // disable HTML plugin by default, at least for now
-    html: { disabled: true },
-    ...pluginProps,
-  };
-  let filtered;
-
-  if (isHtmlMode) {
-    filtered = plugins
-      .filter((plugin) => {
-        return isActiveToolbarPlugin(pluginProps)(plugin) && (plugin.name === 'characters' || plugin.name === 'html');
-      })
-      .map((p) => p.toolbar);
-  } else {
-    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} />
-          );
-        })}
-      </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,
-  getFocusedValue: 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/controller/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/toolbar/done-button.jsx

@@ -1,36 +0,0 @@
-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/controller/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/toolbar/editor-and-toolbar.jsx

@@ -1,242 +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 '../../../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,
-    }),
-  };
-
-  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) => ({
-  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: '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: 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/controller/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/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/controller/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/toolbar/toolbar-buttons.jsx

@@ -1,97 +0,0 @@
-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',
-  },
-  disabled: {
-    opacity: 0.7,
-    cursor: 'not-allowed',
-    '& :hover': {
-      color: 'grey',
-    },
-  },
-});
-
-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,
-    disabled: 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, disabled, extraStyles } = this.props;
-    const names = classNames(classes.button, {
-      [classes.active]: active,
-      [classes.disabled]: disabled,
-    });
-
-    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);