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

package/src/plugins/toolbar/__tests__/__snapshots__/editor-and-toolbar.test.jsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toolbar renders 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="editorHolder editorInFocus"
+  >
+    <div
+      className=""
+    >
+      children
+    </div>
+  </div>
+  <div>
+    ---- toolbar ------ 
+  </div>
+</div>
+`;

package/src/plugins/toolbar/__tests__/__snapshots__/toolbar-buttons.test.jsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders 1`] = `
+<button
+  className=""
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  tabIndex={0}
+>
+  children
+</button>
+`;
+
+exports[`MarkButton renders active 1`] = `
+<button
+  aria-pressed={true}
+  className="button active"
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  tabIndex={0}
+>
+  children
+</button>
+`;
+
+exports[`MarkButton renders not active 1`] = `
+<button
+  aria-pressed={false}
+  className="button"
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  tabIndex={0}
+>
+  children
+</button>
+`;

package/src/plugins/toolbar/__tests__/__snapshots__/toolbar.test.jsx.snap

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toolbar default renders default toolbar 1`] = `
+<div
+  className="toolbar pie-toolbar"
+  onClick={[Function]}
+  style={Object {}}
+>
+  <div
+    className="DefaultToolbar-defaultToolbar-1"
+    onFocus={[Function]}
+    tabIndex="1"
+  >
+    <div
+      className="DefaultToolbar-buttonsContainer-2"
+    />
+    <div
+      ariaLabel="Done"
+      className="RawDoneButton-iconRoot-3"
+    />
+  </div>
+  <div
+    className="shared"
+  />
+</div>
+`;
+
+exports[`toolbar renders custom toolbar 1`] = `
+<div
+  className="toolbar pie-toolbar"
+  onClick={[Function]}
+  style={Object {}}
+>
+  <div>
+     --------- custom toolbar ----------- 
+  </div>
+  <div
+    className="shared"
+  >
+    <div
+      ariaLabel="Delete"
+      className="iconRoot"
+    />
+  </div>
+</div>
+`;

package/src/plugins/toolbar/__tests__/default-toolbar.test.jsx

@@ -0,0 +1,94 @@
+import { classObject, mockIconButton, mockMathInput } from '../../../__tests__/utils';
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { Data, Value, Inline } from 'slate';
+import { DefaultToolbar, ToolbarButton } from '../default-toolbar';
+import { DoneButton } from '../done-button';
+import debug from 'debug';
+import renderer from 'react-test-renderer';
+
+mockMathInput();
+
+jest.mock('@material-ui/core/IconButton', () => {
+  return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
+});
+
+let node = Inline.fromJSON({ type: 'i' });
+let value;
+const log = debug('@pie-lib:editable-html:test:toolbar');
+
+describe('default-toolbar', () => {
+  let w;
+  let onDone = jest.fn();
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      value: Value.fromJSON({}),
+      plugins: [],
+      className: 'className',
+      onDone,
+      onChange,
+      deletable: false,
+      showDone: true,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<DefaultToolbar {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      expect(w).toMatchSnapshot();
+    });
+    it('renders 1 plugins', () => {
+      w = wrapper({
+        plugins: [{ toolbar: {}, name: 'plugin-one' }],
+      });
+      expect(w).toMatchSnapshot();
+      expect(w.find(ToolbarButton)).toHaveLength(1);
+    });
+    it('renders 2 plugins', () => {
+      w = wrapper({
+        plugins: [
+          { toolbar: {}, name: 'plugin-one' },
+          { toolbar: {}, name: 'plugin-two' },
+        ],
+      });
+      expect(w).toMatchSnapshot();
+      expect(w.find(ToolbarButton)).toHaveLength(2);
+    });
+    it('renders 1 plugins, 1 is disabled', () => {
+      w = wrapper({
+        pluginProps: {
+          'plugin-one': {
+            disabled: true,
+          },
+        },
+        plugins: [
+          { toolbar: {}, name: 'plugin-one' },
+          { toolbar: {}, name: 'plugin-two' },
+        ],
+      });
+      expect(w).toMatchSnapshot();
+      expect(w.find(ToolbarButton)).toHaveLength(1);
+    });
+    it('renders without done button', () => {
+      w = wrapper({
+        deletable: false,
+      });
+
+      expect(w).toMatchSnapshot();
+      expect(w.find(DoneButton)).toHaveLength(1);
+    });
+    it('renders with done button', () => {
+      w = wrapper({
+        deletable: true,
+      });
+
+      expect(w).toMatchSnapshot();
+      expect(w.find(DoneButton)).toHaveLength(0);
+    });
+  });
+  describe('logic', () => {});
+});

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

@@ -0,0 +1,37 @@
+import { classObject, mockIconButton } from '../../../__tests__/utils';
+
+import { Data, Value } from 'slate';
+import { EditorAndToolbar, getClonedChildren } from '../editor-and-toolbar';
+import React from 'react';
+import debug from 'debug';
+import renderer from 'react-test-renderer';
+
+jest.mock('../toolbar', () => () => <div>---- toolbar ------ </div>);
+
+mockIconButton();
+
+const log = debug('@pie-lib:editable-html:test:editor-and-toolbar');
+
+describe('toolbar', () => {
+  let onDelete, classes;
+
+  beforeEach(() => {
+    onDelete = jest.fn();
+    classes = classObject('root', 'editorHolder', 'editorInFocus');
+  });
+
+  it('renders', () => {
+    const value = Value.fromJSON({});
+    Object.defineProperty(value, 'isFocused', { get: jest.fn(() => true) });
+
+    const tree = renderer
+      .create(
+        <EditorAndToolbar classes={classes} value={value} plugins={[]} onDone={jest.fn()} onChange={jest.fn()}>
+          children
+        </EditorAndToolbar>,
+      )
+      .toJSON();
+    log('tree: ', JSON.stringify(tree, null, '  '));
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/plugins/toolbar/__tests__/toolbar-buttons.test.jsx

@@ -0,0 +1,51 @@
+import { classObject, mockIconButton } from '../../../__tests__/utils';
+
+import { Data } from 'slate';
+import { RawMarkButton, RawButton } from '../toolbar-buttons';
+import React from 'react';
+import debug from 'debug';
+import renderer from 'react-test-renderer';
+
+mockIconButton();
+
+const log = debug('@pie-lib:editable-html:test:editor-and-toolbar');
+
+describe('Button', () => {
+  it('renders', () => {
+    const classes = classObject('root');
+    const tree = renderer
+      .create(
+        <RawButton onClick={jest.fn()} classes={classes}>
+          children
+        </RawButton>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
+
+describe('MarkButton', () => {
+  const classes = classObject('button', 'root', 'active');
+
+  it('renders not active', () => {
+    const tree = renderer
+      .create(
+        <RawMarkButton mark={'i'} onToggle={jest.fn()} active={false} classes={classes}>
+          children
+        </RawMarkButton>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders active', () => {
+    const tree = renderer
+      .create(
+        <RawMarkButton mark={'i'} onToggle={jest.fn()} active={true} classes={classes}>
+          children
+        </RawMarkButton>,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/plugins/toolbar/__tests__/toolbar.test.jsx

@@ -0,0 +1,106 @@
+import { classObject, mockIconButton, mockMathInput } from '../../../__tests__/utils';
+import { shallow } from 'enzyme';
+
+import { Data, Value, Inline } from 'slate';
+import { Toolbar, DefaultToolbar } from '../toolbar';
+import React from 'react';
+import debug from 'debug';
+import renderer from 'react-test-renderer';
+
+mockMathInput();
+
+jest.mock('@material-ui/core/IconButton', () => {
+  return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
+});
+
+let node = Inline.fromJSON({ type: 'i' });
+let parentNode = Inline.fromJSON({
+  type: 'i',
+});
+let value;
+const log = debug('@pie-lib:editable-html:test:toolbar');
+
+describe('toolbar', () => {
+  let onDelete, classes, document, toolbarOpts;
+
+  beforeEach(() => {
+    onDelete = jest.fn();
+
+    toolbarOpts = {
+      position: 'bottom',
+      alwaysVisible: false,
+    };
+
+    value = Value.fromJSON({});
+    document = {
+      getClosestInline: jest.fn().mockReturnValue(node),
+      getParent: jest.fn().mockReturnValue(),
+    };
+
+    Object.defineProperties(value, {
+      isCollapsed: {
+        get: jest.fn(() => true),
+      },
+      startKey: {
+        get: jest.fn(() => '1'),
+      },
+      document: {
+        get: jest.fn(() => document),
+      },
+    });
+
+    classes = classObject('iconRoot', 'inline', 'toolbar', 'focused', 'shared', 'inline', 'pie-toolbar');
+  });
+
+  test('renders custom toolbar', () => {
+    const plugins = [
+      {
+        deleteNode: () => true,
+        toolbar: {
+          supports: () => true,
+          customToolbar: () => () => <div> --------- custom toolbar ----------- </div>,
+        },
+      },
+    ];
+
+    const tree = renderer
+      .create(
+        <Toolbar
+          toolbarOpts={toolbarOpts}
+          plugins={plugins}
+          classes={classes}
+          value={value}
+          onDone={jest.fn()}
+          onChange={jest.fn()}
+        />,
+      )
+      .toJSON();
+
+    log('tree: ', JSON.stringify(tree, null, '  '));
+    expect(tree).toMatchSnapshot();
+  });
+
+  describe('default', () => {
+    let plugins;
+
+    beforeEach(() => {
+      plugins = [];
+    });
+
+    test('renders default toolbar', () => {
+      const tree = renderer
+        .create(
+          <Toolbar
+            toolbarOpts={toolbarOpts}
+            plugins={plugins}
+            classes={classes}
+            value={value}
+            onDone={jest.fn()}
+            onChange={jest.fn()}
+          />,
+        )
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});

package/src/plugins/toolbar/default-toolbar.jsx

@@ -0,0 +1,206 @@
+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);
+    const fnToCall =
+      props.type === 'css' ? () => props.onClick(props.value, props.onChange, props.getFocusedValue) : onToggle;
+
+    log('[ToolbarButton] mark:isActive: ', isActive);
+
+    let ariaLabel;
+
+    if (props.type === 'sup') {
+      ariaLabel = 'Superscript (marks text as superscripted)';
+    } else if (props.type === 'sub') {
+      ariaLabel = 'Subscript (marks text as subscripted)';
+    } else {
+      ariaLabel = props.type;
+    }
+
+    return (
+      <MarkButton active={isActive} onToggle={fnToCall} mark={props.type} label={ariaLabel}>
+        {props.icon}
+      </MarkButton>
+    );
+  }
+
+  const { disabled } = props;
+  const isActive = props.isActive ? props.isActive(props.value, props.type) : hasBlock(props.value, props.type);
+
+  log('[ToolbarButton] block:isActive: ', isActive);
+  const newIcon = React.cloneElement(props.icon);
+
+  return (
+    <Button
+      ariaLabel={props.ariaLabel}
+      active={isActive}
+      disabled={disabled}
+      onClick={(event) => props.onClick(props.value, props.onChange, props.getFocusedValue, event)}
+      extraStyles={props.buttonStyles}
+    >
+      {newIcon}
+    </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,
+  ariaLabel: PropTypes.string,
+};
+
+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,
+  doneButtonRef,
+  onBlur,
+  onFocus,
+}) => {
+  pluginProps = {
+    // disable HTML plugin by default, at least for now
+    html: { disabled: true },
+    ...pluginProps,
+  };
+  let filtered;
+
+  const handleFocus = (event) => {
+    const doneButtonClassName = doneButtonRef?.current?.className;
+    const isRawDoneButton = doneButtonClassName && event.target?.closest(`[class*="${doneButtonClassName}"]`);
+
+    if (onFocus && !isRawDoneButton) {
+      onFocus(event);
+    }
+  };
+
+  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);
+  }
+
+  const isListActive = plugins.some(
+    (plugin) =>
+      isActiveToolbarPlugin(pluginProps)(plugin) &&
+      ['ul_list', 'ol_list'].includes(plugin.name) &&
+      plugin.toolbar.isActive(value, plugin.name),
+  );
+
+  const isTableActive = plugins.some(
+    (plugin) =>
+      isActiveToolbarPlugin(pluginProps)(plugin) &&
+      plugin.name === 'table' &&
+      plugin.utils &&
+      plugin.utils.isSelectionInTable &&
+      plugin.utils.isSelectionInTable(value),
+  );
+
+  const isToolbarButtonDisabled = (plugin) => {
+    if (plugin.type === 'table') {
+      return isListActive;
+    } else if (plugin.type === 'ul_list' || plugin.type === 'ol_list') {
+      return isTableActive;
+    }
+    return plugin.disabled;
+  };
+
+  return (
+    <div className={classes.defaultToolbar} onFocus={handleFocus} tabIndex="1" onBlur={onBlur}>
+      <div className={classes.buttonsContainer}>
+        {filtered.map((p, index) => {
+          return (
+            <ToolbarButton
+              {...p}
+              key={index}
+              value={value}
+              onChange={onChange}
+              getFocusedValue={getFocusedValue}
+              disabled={isToolbarButtonDisabled(p)}
+            />
+          );
+        })}
+      </div>
+      {showDone && !deletable && <DoneButton doneButtonRef={doneButtonRef} 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,
+  isHtmlMode: PropTypes.bool,
+  doneButtonRef: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+};
+
+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/src/plugins/toolbar/done-button.jsx

@@ -0,0 +1,38 @@
+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, doneButtonRef }) => (
+  <IconButton
+    aria-label="Done"
+    className={classes.iconRoot}
+    buttonRef={doneButtonRef}
+    onClick={onClick}
+    classes={{
+      label: classes.label,
+      root: classes.iconRoot,
+    }}
+  >
+    <Check />
+  </IconButton>
+);
+
+RawDoneButton.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onClick: PropTypes.func,
+  doneButtonRef: 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);