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

package/src/plugins/list/index.jsx

@@ -1,305 +0,0 @@
-import React from 'react';
-import { Data } from 'slate';
-import Immutable from 'immutable';
-import PropTypes from 'prop-types';
-import EditList from 'slate-edit-list';
-import ListOptions from 'slate-edit-list/dist/options';
-import debug from 'debug';
-
-const log = debug('@pie-lib:editable-html:plugins:list');
-
-const b = (type, next, childNodes) => ({
-  object: 'block',
-  type,
-  nodes: next(childNodes),
-});
-
-export const serialization = {
-  deserialize(el, next) {
-    const name = el.tagName.toLowerCase();
-
-    if (name === 'li') {
-      return b('list_item', next, el.childNodes);
-    }
-
-    if (name === 'ul') {
-      return b('ul_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
-    }
-
-    if (name === 'ol') {
-      return b('ol_list', next, el.children.length ? Array.from(el.children) : el.childNodes);
-    }
-  },
-  serialize(object, children) {
-    if (object.object !== 'block') return;
-
-    if (object.type === 'list_item') {
-      return <li>{children}</li>;
-    }
-
-    if (object.type === 'ul_list') {
-      return <ul>{children}</ul>;
-    }
-
-    if (object.type === 'ol_list') {
-      return <ol>{children}</ol>;
-    }
-  },
-};
-
-const createEditList = () => {
-  const core = EditList({
-    typeDefault: 'span',
-  });
-
-  const listOptions = new ListOptions({
-    typeDefault: 'span',
-  });
-
-  // fix outdated schema
-  if (core.schema && core.schema.blocks) {
-    Object.keys(core.schema.blocks).forEach((key) => {
-      const block = core.schema.blocks[key];
-
-      if (block.parent) {
-        return;
-      }
-
-      block.nodes[0] = { type: block.nodes[0].types[0] };
-    });
-  }
-
-  /**
-   * This override of the core.changes.wrapInList is needed because the version
-   * of immutable that we have does not support getting the element at a specific
-   * index with a square bracket (list[0]). We have to use the list.get function instead
-   */
-
-  /**
-   * Returns the highest list of blocks that cover the current selection
-   */
-  const getHighestSelectedBlocks = (value) => {
-    const range = value.selection;
-    const document = value.document;
-
-    const startBlock = document.getClosestBlock(range.startKey);
-    const endBlock = document.getClosestBlock(range.endKey);
-
-    if (startBlock === endBlock) {
-      return Immutable.List([startBlock]);
-    }
-
-    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
-    const startPath = ancestor.getPath(startBlock.key);
-    const endPath = ancestor.getPath(endBlock.key);
-
-    return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
-  };
-
-  /**
-   * Wrap the blocks in the current selection in a new list. Selected
-   * lists are merged together.
-   */
-  core.changes.wrapInList = function(change, type, data) {
-    const selectedBlocks = getHighestSelectedBlocks(change.value);
-
-    // Wrap in container
-    change.wrapBlock({ type: type, data: Data.create(data) }, { normalize: false });
-
-    // Wrap in list items
-    selectedBlocks.forEach(function(node) {
-      if (core.utils.isList(node)) {
-        // Merge its items with the created list
-        node.nodes.forEach(function(_ref) {
-          const key = _ref.key;
-          return change.unwrapNodeByKey(key, { normalize: false });
-        });
-      } else if (node.type !== 'list_item') {
-        change.wrapBlockByKey(node.key, 'list_item', {
-          normalize: false,
-        });
-      }
-    });
-
-    return change.normalize();
-  };
-
-  core.changes.unwrapList = function unwrapList(opts, change) {
-    const items = core.utils.getItemsAtRange(change.value);
-
-    if (items.isEmpty()) {
-      return change;
-    }
-
-    // Unwrap the items from their list
-    items.forEach((item) => change.unwrapNodeByKey(item.key, { normalize: false }));
-
-    // Parent of the list of the items
-    const firstItem = items.first();
-    const parent = change.value.document.getParent(firstItem.key);
-
-    let index = parent.nodes.findIndex((node) => node.key === firstItem.key);
-
-    // Unwrap the items' children
-    items.forEach((item) => {
-      item.nodes.forEach((node) => {
-        change.moveNodeByKey(node.key, parent.key, index, {
-          normalize: false,
-        });
-        index += 1;
-      });
-    });
-
-    // Finally, remove the now empty items
-    items.forEach((item) => change.removeNodeByKey(item.key, { normalize: false }));
-
-    return change;
-  }.bind(this, listOptions);
-
-  core.utils.getItemsAtRange = function(opts, value, range) {
-    range = range || value.selection;
-
-    if (!range.startKey) {
-      return Immutable.List();
-    }
-
-    const { document } = value;
-
-    const startBlock = document.getClosestBlock(range.startKey);
-    const endBlock = document.getClosestBlock(range.endKey);
-
-    if (startBlock === endBlock) {
-      const item = core.utils.getCurrentItem(value, startBlock);
-      return item ? Immutable.List([item]) : Immutable.List();
-    }
-
-    const ancestor = document.getCommonAncestor(startBlock.key, endBlock.key);
-
-    if (core.utils.isList(ancestor)) {
-      const startPath = ancestor.getPath(startBlock.key);
-      const endPath = ancestor.getPath(endBlock.key);
-
-      return ancestor.nodes.slice(startPath.get(0), endPath.get(0) + 1);
-    } else if (ancestor.type === opts.typeItem) {
-      // The ancestor is the highest list item that covers the range
-      return Immutable.List([ancestor]);
-    }
-    // No list of items can cover the range
-    return Immutable.List();
-  }.bind(this, listOptions);
-
-  core.utils.getListForItem = function(opts, value, item) {
-    const { document } = value;
-    const parent = document.getParent(item.key);
-    return parent && core.utils.isList(parent) ? parent : null;
-  }.bind(this, listOptions);
-
-  core.utils.isSelectionInList = function(opts, value, type) {
-    const items = core.utils.getItemsAtRange(value);
-    return (
-      !items.isEmpty() &&
-      // Check the type of the list if needed
-      (!type || core.utils.getListForItem(value, items.first()).get('type') === type)
-    );
-  }.bind(this, listOptions);
-
-  return core;
-};
-
-export default (options) => {
-  const { type, icon } = options;
-
-  const core = createEditList();
-
-  // eslint-disable-next-line react/display-name
-  core.renderNode = (props) => {
-    const { node, attributes, children } = props;
-
-    switch (node.type) {
-      case 'ul_list':
-        return <ul {...attributes}>{children}</ul>;
-      case 'ol_list':
-        return <ol {...attributes}>{children}</ol>;
-      case 'list_item':
-        return <li {...attributes}>{children}</li>;
-    }
-  };
-
-  core.toolbar = {
-    isMark: false,
-    ariaLabel: type == 'ul_list' ? 'bulleted list' : 'numbered-list',
-    type,
-    icon,
-    isActive: (value, type) => {
-      if (!core.utils.isSelectionInList(value)) {
-        return false;
-      }
-      const current = core.utils.getCurrentList(value);
-      return current ? current.type === type : false;
-    },
-    onClick: (value, onChange) => {
-      log('[onClick]', value);
-      const inList = core.utils.isSelectionInList(value);
-      if (inList) {
-        const change = value.change().call(core.changes.unwrapList);
-        onChange(change);
-      } else {
-        const change = value.change().call(core.changes.wrapInList, type);
-        onChange(change);
-      }
-    },
-  };
-
-  core.normalizeNode = (node) => {
-    if (node.object !== 'document' && node.object !== 'block') {
-      return undefined;
-    }
-
-    const response = core.validateNode(node);
-
-    const invalidListItems = [];
-
-    node.forEachDescendant((d) => {
-      if (d.type === 'list_item' && d.nodes.size === 1 && d.nodes.first().object === 'text') {
-        // if we have a list_item that has only a text inside, we need to add a block in it
-        invalidListItems.push(d);
-      }
-    });
-
-    if (!invalidListItems.length && !response) {
-      return undefined;
-    }
-
-    return (change) => {
-      if (response) {
-        response(change);
-      }
-
-      if (invalidListItems.length) {
-        change.withoutNormalization(() => {
-          invalidListItems.forEach((node) => {
-            const textNode = node.nodes.first();
-            const wrappedBlock = {
-              object: 'block',
-              type: 'div',
-              nodes: [textNode.toJSON()],
-            };
-
-            change.removeNodeByKey(textNode.key);
-
-            change.insertNodeByKey(node.key, 0, wrappedBlock);
-          });
-        });
-      }
-    };
-  };
-
-  core.renderNode.propTypes = {
-    node: PropTypes.object,
-    attributes: PropTypes.object,
-    children: PropTypes.func,
-  };
-  core.name = type;
-
-  return core;
-};

package/src/plugins/math/__tests__/__snapshots__/index.test.jsx.snap

@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CustomToolbarComp render renders with default keypadMode 1`] = `
-<MathToolbar
-  additionalKeys={Array []}
-  autoFocus={true}
-  controlledKeypadMode={true}
-  keypadMode="geometry"
-  latex="foo"
-  onChange={[Function]}
-  onDone={[Function]}
-/>
-`;
-
-exports[`CustomToolbarComp render renders with default keypadMode 2`] = `
-<MathToolbar
-  additionalKeys={Array []}
-  autoFocus={true}
-  controlledKeypadMode={true}
-  keypadMode={3}
-  latex="foo"
-  onChange={[Function]}
-  onDone={[Function]}
-/>
-`;
-
-exports[`CustomToolbarComp render renders without default keypadMode 1`] = `
-<MathToolbar
-  additionalKeys={Array []}
-  autoFocus={true}
-  controlledKeypadMode={true}
-  latex="foo"
-  onChange={[Function]}
-  onDone={[Function]}
-/>
-`;
-
-exports[`CustomToolbarComp render renders without default keypadMode 2`] = `
-<MathToolbar
-  additionalKeys={Array []}
-  autoFocus={true}
-  controlledKeypadMode={true}
-  keypadMode={3}
-  latex="foo"
-  onChange={[Function]}
-  onDone={[Function]}
-/>
-`;

package/src/plugins/math/__tests__/index.test.jsx

@@ -1,245 +0,0 @@
-import React from 'react';
-import debug from 'debug';
-import MockChange from '../../image/__tests__/mock-change';
-import { Data } from 'slate';
-import MathPlugin, { serialization, inlineMath, CustomToolbarComp } from '../index';
-import { shallow } from 'enzyme';
-import { MathToolbar } from '@pie-lib/math-toolbar';
-jest.mock('@pie-framework/mathquill', () => ({
-  StaticMath: jest.fn(),
-  getInterface: jest.fn().mockReturnThis(),
-  registerEmbed: jest.fn(),
-}));
-
-jest.mock('@pie-lib/math-toolbar', () => ({
-  MathPreview: () => <div />,
-  MathToolbar: () => <div />,
-}));
-
-jest.mock('@pie-lib/math-rendering', () => ({
-  ...jest.requireActual('@pie-lib/math-rendering'),
-  mmlToLatex: jest.fn(() => {
-    return '/foobar/latex';
-  }),
-}));
-const log = debug('@pie-lib:editable-html:test:math');
-
-// I believe @andrei is moving this stuff out.
-describe('MathPlugin', () => {
-  describe('toolbar', () => {
-    describe('onClick', () => {
-      let plugin, mockChange, value, onChange;
-      beforeEach(() => {
-        plugin = MathPlugin({});
-        mockChange = new MockChange();
-        value = {
-          change: jest.fn(() => mockChange),
-        };
-        onChange = jest.fn();
-        plugin.toolbar.onClick(value, onChange);
-      });
-
-      test('calls insertInline', () => {
-        expect(mockChange.insertInline).toBeCalledWith(expect.objectContaining({ data: inlineMath().data }));
-      });
-
-      test('it calls onChange', () => {
-        expect(onChange).toHaveBeenCalledWith(mockChange);
-      });
-    });
-  });
-
-  describe('renderNode', () => {
-    test('the component has props', () => {
-      const plugin = MathPlugin({});
-      const { props } = plugin.renderNode({ node: { type: 'math' } });
-      expect(props.node).toEqual({ type: 'math' });
-    });
-  });
-
-  describe('serialization', () => {
-    describe('deserialize', () => {
-      const assertDeserialize = (html, expected, wrapType) => {
-        it(`innerHTML: ${html} is deserialized to: ${expected} with wrapType: ${wrapType}`, () => {
-          const el = {
-            tagName: 'span',
-            childNodes: [],
-            getAttribute: jest.fn(() => ''),
-            hasAttribute: jest.fn(() => true),
-            innerHTML: html,
-          };
-          const next = jest.fn();
-
-          const out = serialization.deserialize(el, next);
-          expect(out).toEqual({
-            object: 'inline',
-            type: 'math',
-            isVoid: true,
-            nodes: [],
-            data: {
-              latex: expected,
-              wrapper: wrapType,
-            },
-          });
-        });
-      };
-
-      assertDeserialize('$$&lt;$$', '<', MathPlugin.DOLLAR);
-      assertDeserialize('$&lt;$', '<', MathPlugin.DOLLAR);
-      assertDeserialize('\\(&lt;\\)', '<', MathPlugin.ROUND_BRACKETS);
-      assertDeserialize('\\[&lt;\\]', '<', MathPlugin.ROUND_BRACKETS);
-      assertDeserialize('latex', 'latex', MathPlugin.ROUND_BRACKETS);
-      assertDeserialize('\\displaystyle foo', 'foo', MathPlugin.ROUND_BRACKETS);
-
-      it('should make mathml editable if MathPlugin.mathMlOptions.mmlEditing is true', () => {
-        MathPlugin.mathMlOptions.mmlEditing = true;
-        const el = {
-          tagName: 'math',
-          outerHTML:
-            '<math xmlns="http://www.w3.org/1998/Math/MathML">  <mn>2</mn>  <mi>x</mi>  <mtext>&#xA0;</mtext>  <mo>&#x2264;</mo>  <mn>4</mn>  <mi>y</mi>  <mtext>&#xA0;</mtext>  <mo>+</mo>  <mtext>&#xA0;</mtext>  <mn>8</mn> <msqrt>    <mi>h</mi>  </msqrt></math>',
-        };
-        const next = jest.fn();
-
-        const out = serialization.deserialize(el, next);
-
-        expect(out).toEqual({
-          object: 'inline',
-          type: 'math',
-          isVoid: true,
-          nodes: [],
-          data: {
-            latex: '/foobar/latex',
-            wrapper: 'round_brackets',
-          },
-        });
-      });
-
-      it('should make mathml readOnly if MathPlugin.mathMlOptions.mmlEditing is false', () => {
-        MathPlugin.mathMlOptions.mmlEditing = false;
-        const el = {
-          tagName: 'math',
-          outerHTML:
-            '<math xmlns="http://www.w3.org/1998/Math/MathML">  <mn>2</mn>  <mi>x</mi>  <mtext>&#xA0;</mtext>  <mo>&#x2264;</mo>  <mn>4</mn>  <mi>y</mi>  <mtext>&#xA0;</mtext>  <mo>+</mo>  <mtext>&#xA0;</mtext>  <mn>8</mn> <msqrt>    <mi>h</mi>  </msqrt></math>',
-        };
-        const next = jest.fn();
-
-        const out = serialization.deserialize(el, next);
-
-        expect(out).toEqual({
-          object: 'inline',
-          isVoid: true,
-          type: 'mathml',
-          data: {
-            html: el.outerHTML,
-          },
-        });
-      });
-    });
-
-    describe('serialize', () => {
-      const assertSerialize = (latex, expectedHtml, wrapper) => {
-        wrapper = wrapper || MathPlugin.ROUND_BRACKETS;
-        it(`${latex} is serialized to: ${expectedHtml}`, () => {
-          const object = {
-            kind: 'inline',
-            type: 'math',
-            isVoid: true,
-            nodes: [],
-            data: Data.create({ latex, wrapper }),
-          };
-          const children = [];
-
-          const out = serialization.serialize(object, children);
-          log('out: ', out);
-          expect(out).toEqual(
-            <span data-latex="" data-raw={latex}>
-              {expectedHtml}
-            </span>,
-          );
-        });
-      };
-
-      assertSerialize('latex', '\\(latex\\)', MathPlugin.ROUND_BRACKETS);
-      assertSerialize('latex', '\\(latex\\)', MathPlugin.SQUARE_BRACKETS);
-      assertSerialize('latex', '$latex$', MathPlugin.DOLLAR);
-      assertSerialize('latex', '$latex$', MathPlugin.DOUBLE_DOLLAR);
-
-      /**
-       * Note that when this is converted to html it get's escaped - but that's an issue with the slate html-serializer.
-       */
-      assertSerialize('<', '\\(<\\)');
-      assertSerialize('x<y', '\\(x<y\\)');
-    });
-  });
-});
-
-describe('CustomToolbarComp', () => {
-  let onDataChange;
-  let onToolbarDone;
-
-  const wrapper = (extras) => {
-    let mockChange = new MockChange();
-    const defaults = {
-      node: {
-        key: '1',
-        data: Data.create({ latex: 'foo' }),
-        equals: () => true,
-      },
-      value: {
-        document: {
-          getNextText: jest.fn().mockReturnValue({ key: 'nt' }),
-        },
-        change: jest.fn().mockReturnValue(mockChange),
-      },
-      onDataChange,
-      onToolbarDone,
-    };
-
-    const props = {
-      ...defaults,
-      ...extras,
-    };
-
-    return shallow(<CustomToolbarComp {...props} />);
-  };
-
-  describe('render', () => {
-    it('renders without default keypadMode', () => {
-      const w = wrapper();
-
-      expect(w).toMatchSnapshot();
-
-      w.setProps({ pluginProps: { math: { keypadMode: 3 } } });
-
-      expect(w).toMatchSnapshot();
-    });
-
-    it('renders with default keypadMode', () => {
-      const w = wrapper({ pluginProps: { math: { keypadMode: 'geometry' } } });
-
-      expect(w).toMatchSnapshot();
-
-      w.setProps({ pluginProps: { math: { keypadMode: 3 } } });
-
-      expect(w).toMatchSnapshot();
-    });
-  });
-
-  describe('onDone', () => {
-    it('calls onToolbarDone', () => {
-      onToolbarDone = jest.fn();
-      const w = wrapper();
-      w.find(MathToolbar).prop('onDone')('oo');
-      expect(onToolbarDone).toHaveBeenCalledWith(expect.anything(), false);
-    });
-  });
-
-  describe('onChange', () => {
-    it('calls onDataChange', () => {
-      onDataChange = jest.fn();
-      const w = wrapper();
-      w.find(MathToolbar).prop('onChange')('oo');
-      expect(onDataChange).toHaveBeenCalledWith('1', { latex: 'oo' });
-    });
-  });
-});