@pie-lib/editable-html-tip-tap 1.0.2 → 1.0.3

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

@@ -1,20 +0,0 @@
-// 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

@@ -1,36 +0,0 @@
-// 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

@@ -1,46 +0,0 @@
-// 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

@@ -1,94 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,206 +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';
-
-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);