@pie-element/ebsr 9.12.1 → 9.12.2-next.18

package/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/toolbar/default-toolbar.jsx

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

@@ -0,0 +1,242 @@
+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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/toolbar/index.jsx

@@ -0,0 +1,23 @@
+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/configure/node_modules/@pie-element/multiple-choice/node_modules/@pie-lib/pie-toolbox/src/code/editable-html/plugins/toolbar/toolbar-buttons.jsx

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