@pie-lib/editable-html 11.1.2-next.0 → 11.2.0-beta.2

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

@@ -8,7 +8,6 @@ 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');
 
@@ -21,31 +20,45 @@ export const ToolbarButton = (props) => {
 
   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);
 
-    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);
+    let ariaLabel;
 
-    log('[ToolbarButton] block:isActive: ', isActive);
+    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 (
-      <Button
-        active={isActive}
-        disabled={disabled}
-        onClick={() => props.onClick(props.value, props.onChange, props.getFocusedValue)}
-        extraStyles={props.buttonStyles}
-      >
+      <MarkButton active={isActive} onToggle={fnToCall} mark={props.type} label={ariaLabel}>
         {props.icon}
-      </Button>
+      </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 = {
@@ -60,6 +73,7 @@ ToolbarButton.propTypes = {
   onClick: PropTypes.func,
   type: PropTypes.string,
   value: PropTypes.object,
+  ariaLabel: PropTypes.string,
 };
 
 const isActiveToolbarPlugin = (props) => (plugin) => {
@@ -79,6 +93,9 @@ export const DefaultToolbar = ({
   showDone,
   deletable,
   isHtmlMode,
+  doneButtonRef,
+  onBlur,
+  onFocus,
 }) => {
   pluginProps = {
     // disable HTML plugin by default, at least for now
@@ -87,6 +104,15 @@ export const DefaultToolbar = ({
   };
   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) => {
@@ -97,16 +123,48 @@ export const DefaultToolbar = ({
     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}>
+    <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} />
+            <ToolbarButton
+              {...p}
+              key={index}
+              value={value}
+              onChange={onChange}
+              getFocusedValue={getFocusedValue}
+              disabled={isToolbarButtonDisabled(p)}
+            />
           );
         })}
       </div>
-      {showDone && !deletable && !isHtmlMode && <DoneButton onClick={onDone} />}
+      {showDone && !deletable && <DoneButton doneButtonRef={doneButtonRef} onClick={onDone} />}
     </div>
   );
 };
@@ -122,6 +180,10 @@ DefaultToolbar.propTypes = {
   showDone: PropTypes.bool,
   addArea: PropTypes.bool,
   deletable: PropTypes.bool,
+  isHtmlMode: PropTypes.bool,
+  doneButtonRef: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
 };
 
 DefaultToolbar.defaultProps = {

package/src/plugins/toolbar/done-button.jsx

@@ -5,10 +5,11 @@ import Check from '@material-ui/icons/Check';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 
-export const RawDoneButton = ({ classes, onClick }) => (
+export const RawDoneButton = ({ classes, onClick, doneButtonRef }) => (
   <IconButton
     aria-label="Done"
     className={classes.iconRoot}
+    buttonRef={doneButtonRef}
     onClick={onClick}
     classes={{
       label: classes.label,
@@ -22,6 +23,7 @@ export const RawDoneButton = ({ classes, onClick }) => (
 RawDoneButton.propTypes = {
   classes: PropTypes.object.isRequired,
   onClick: PropTypes.func,
+  doneButtonRef: PropTypes.func,
 };
 
 const styles = {

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

@@ -6,7 +6,6 @@ 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');
@@ -33,18 +32,14 @@ export class EditorAndToolbar extends React.Component {
       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,
   };
 
-  /** 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,
@@ -63,15 +58,21 @@ export class EditorAndToolbar extends React.Component {
       toolbarOpts,
       onDataChange,
       toolbarRef,
+      doneButtonRef,
+      focusToolbar,
+      onToolbarFocus,
+      onToolbarBlur,
     } = this.props;
 
-    const inFocus = value.isFocused || (focusedNode !== null && focusedNode !== undefined);
+    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') {
@@ -96,7 +97,7 @@ export class EditorAndToolbar extends React.Component {
           <div
             className={classNames(
               {
-                [classes.noPadding]: toolbarOpts && toolbarOpts.noBorder,
+                [classes.noPadding]: toolbarOpts && toolbarOpts.noPadding,
               },
               classes.children,
             )}
@@ -104,17 +105,21 @@ export class EditorAndToolbar extends React.Component {
             {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}
         />
@@ -144,7 +149,7 @@ const style = (theme) => ({
   editorHolder: {
     position: 'relative',
     padding: '0px',
-    overflowY: 'scroll',
+    overflowY: 'auto',
     color: color.text(),
     backgroundColor: color.background(),
     '&::before': {