@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

package/configure/node_modules/@pie-lib/editable-html/src/__tests__/editor.test.jsx

@@ -1,363 +0,0 @@
-import React from 'react';
-import { htmlToValue, valueToHtml } from '../index';
-import { Editor } from '../editor';
-import { shallow, configure } from 'enzyme';
-import debug from 'debug';
-
-import { mockComponents } from './utils';
-
-const log = debug('@pie-lib:editable-html:test');
-
-const value = htmlToValue('hi');
-
-const resizeWindow = (width, height) => {
-  window.innerWidth = width;
-  window.innerHeight = height;
-  window.dispatchEvent(new Event('resize'));
-};
-jest.mock('@pie-lib/math-toolbar', () => ({}));
-jest.mock('@pie-lib/math-input', () => {
-  HorizontalKeypad: () => <div>HorizontalKeypad</div>;
-});
-
-expect.extend({
-  toEqualHtml(value, html) {
-    const v = valueToHtml(value);
-    const pass = v === html;
-
-    return {
-      pass,
-      message: () => `expected ${html} to match ${v}`,
-    };
-  },
-});
-
-describe('logic', () => {
-  test('onFocus/onBlur saves the value', async () => {
-    const wrapper = shallow(
-      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-    );
-
-    await wrapper.instance().onFocus();
-
-    const v = htmlToValue('hi');
-
-    expect(wrapper.state('stashedValue')).toEqualHtml('<div>hi</div>');
-
-    wrapper.instance().onChange({ value: htmlToValue('new value') });
-
-    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-
-    return wrapper
-      .instance()
-      .onBlur({})
-      .then(() => {
-        expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-      });
-  });
-});
-
-test('onFocus does not change focus if related target is a button from language keypad', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const event = {
-    relatedTarget: {
-      tagName: 'button',
-    },
-  };
-
-  const change = {
-    focus: jest.fn(),
-  };
-
-  wrapper.instance().keypadInteractionDetected = true;
-
-  await wrapper.instance().onFocus(event, change);
-
-  expect(change.focus).not.toHaveBeenCalled();
-});
-
-test('onFocus changes focus if related target is not a button from language keypad', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const event = {
-    relatedTarget: {
-      tagName: 'div',
-    },
-  };
-
-  const change = {
-    focus: jest.fn(),
-  };
-
-  await wrapper.instance().onFocus(event, change);
-
-  expect(change.focus).toHaveBeenCalled();
-});
-
-test('onFocus stashes the value', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  await wrapper.instance().onFocus();
-
-  expect(wrapper.state('stashedValue')).toEqualHtml('<div>hi</div>');
-});
-
-test('onBlur does not set focusToolbar if related target is RawDoneButton', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const toolbarElement = document.createElement('div');
-  const relatedTarget = document.createElement('button');
-  relatedTarget.className = 'RawDoneButton';
-  toolbarElement.className = 'toolbar';
-  toolbarElement.appendChild(relatedTarget);
-
-  wrapper.instance().toolbarRef = toolbarElement;
-  wrapper.instance().doneButtonRef.current = relatedTarget;
-
-  const event = { relatedTarget };
-
-  await wrapper.instance().onBlur(event);
-
-  expect(wrapper.state('focusToolbar')).toBe(false);
-});
-
-test('handleToolbarFocus sets focusToolbar to true', () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  wrapper.instance().handleToolbarFocus();
-  expect(wrapper.state('focusToolbar')).toBe(true);
-});
-
-test('handleToolbarBlur sets focusToolbar to false if toolbar does not contain focus', (done) => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  wrapper.instance().toolbarContainsFocus = jest.fn().mockReturnValue(false);
-
-  wrapper.instance().handleToolbarBlur();
-
-  setTimeout(() => {
-    expect(wrapper.state('focusToolbar')).toBe(false);
-    done();
-  }, 20);
-});
-
-test('handleToolbarBlur does not set focusToolbar to false if toolbar contains focus', (done) => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  wrapper.instance().toolbarContainsFocus = jest.fn().mockReturnValue(true);
-
-  wrapper.setState({ focusToolbar: true });
-
-  wrapper.instance().handleToolbarBlur();
-
-  setTimeout(() => {
-    expect(wrapper.state('focusToolbar')).toBe(true);
-    done();
-  }, 20);
-});
-
-test('toolbarContainsFocus correctly detects focus within toolbar', () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const toolbarElement = document.createElement('div');
-  const activeElement = document.createElement('button');
-  toolbarElement.appendChild(activeElement);
-
-  Object.defineProperty(document, 'activeElement', {
-    value: activeElement,
-    configurable: true,
-  });
-
-  wrapper.instance().toolbarRef = toolbarElement;
-
-  expect(wrapper.instance().toolbarContainsFocus()).toBe(true);
-
-  Object.defineProperty(document, 'activeElement', {
-    value: document.createElement('div'),
-    configurable: true,
-  });
-
-  expect(wrapper.instance().toolbarContainsFocus()).toBe(false);
-});
-
-test('onBlur sets focusToolbar to true if related target is within toolbar', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const toolbarElement = document.createElement('div');
-  const relatedTarget = document.createElement('button');
-  toolbarElement.className = 'toolbar';
-  toolbarElement.appendChild(relatedTarget);
-
-  wrapper.instance().toolbarRef = toolbarElement;
-
-  const event = { relatedTarget };
-
-  await wrapper.instance().onBlur(event);
-
-  expect(wrapper.state('focusToolbar')).toBe(true);
-});
-
-describe('buildSizeStyle', () => {
-  const wrapper = (extras) => {
-    const props = Object.assign({}, extras);
-    return shallow(
-      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} {...props} />,
-    );
-  };
-
-  it('builds width with px', () => {
-    const w = wrapper({ width: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: '100px',
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('returns undefined for % ', () => {
-    const w = wrapper({ height: '100%', width: '100%' });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds height', () => {
-    const w = wrapper({ height: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: '100px',
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds minHeight', () => {
-    const w = wrapper({ minHeight: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: '100px',
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds maxHeight', () => {
-    const w = wrapper({ maxHeight: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: '100px',
-    });
-  });
-
-  it('builds width with calc()', () => {
-    const w = wrapper({ width: 'calc(10em + 42px)' });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: 'calc(10em + 42px)',
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds width with ch', () => {
-    const w = wrapper({ width: '9ch' });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: '9ch',
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds', () => {
-    const w = wrapper({});
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-});
-
-describe('onResize', () => {
-  it('should display html of current state on Resize', () => {
-    const wrapper = shallow(
-      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-    );
-
-    resizeWindow(500, 300);
-    expect(wrapper.state('value')).toEqualHtml('<div>hi</div>');
-
-    wrapper.instance().onChange({ value: htmlToValue('new value') });
-    resizeWindow(1024, 768);
-    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-
-    resizeWindow(500, 300);
-    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-  });
-});
-
-describe('MathMl', () => {
-  beforeEach(() => {});
-
-  it('should not call runSerializationOnMarkup if mathMl props are not there', () => {
-    const runSerializationOnMarkup = jest.fn();
-
-    const wrapper = shallow(
-      <Editor
-        editorRef={jest.fn()}
-        value={value}
-        classes={{}}
-        onChange={jest.fn()}
-        onRef={jest.fn()}
-        runSerializationOnMarkup={runSerializationOnMarkup}
-      />,
-    );
-
-    expect(runSerializationOnMarkup).not.toHaveBeenCalled();
-  });
-
-  it('should call runSerializationOnMarkup if mmlEditing or mmlOutput are true', () => {
-    const runSerializationOnMarkup = jest.fn();
-
-    const wrapper = shallow(
-      <Editor
-        editorRef={jest.fn()}
-        value={value}
-        classes={{}}
-        onChange={jest.fn()}
-        onRef={jest.fn()}
-        runSerializationOnMarkup={runSerializationOnMarkup}
-        mathMlOptions={{ mmlOutput: true }}
-      />,
-    );
-
-    expect(runSerializationOnMarkup).toHaveBeenCalled();
-  });
-});

package/configure/node_modules/@pie-lib/editable-html/src/__tests__/serialization.test.js

@@ -1,291 +0,0 @@
-import { htmlToValue, TEXT_RULE } from '../serialization';
-
-jest.mock('../plugins/math', () => ({
-  serialization: {
-    serialize: jest.fn((o, c) => {
-      return undefined;
-    }),
-    deserialize: jest.fn((el, next) => {
-      return undefined;
-    }),
-  },
-}));
-
-describe('TEXT_RULE', () => {
-  const mkBr = (previousSibling) => {
-    return {
-      remove: jest.fn(),
-      previousSibling,
-      replaceWith: (foo) => {
-        previousSibling.textContent = previousSibling.textContent.replace(/(<br>)|(<\/br>)/g, foo);
-      },
-      normalize: jest.fn().mockReturnThis(),
-      tagName: 'br',
-    };
-  };
-
-  const mkTextNode = (textContent = '') => ({
-    nodeName: '#text',
-    textContent,
-    normalize: jest.fn().mockReturnThis(),
-  });
-
-  const mkEl = (querySelectorAllResult) => ({
-    querySelectorAll: jest.fn().mockReturnValue(querySelectorAllResult),
-    normalize: jest.fn().mockReturnThis(),
-  });
-
-  describe('deserialize', () => {
-    it('if no previous text node, no error is thrown', () => {
-      const br = mkBr();
-      const el = mkEl([br]);
-      expect(() => TEXT_RULE.deserialize(el)).not.toThrow();
-    });
-  });
-});
-
-describe('htmlToValue', () => {
-  it('converts', () => {
-    const expected = {
-      object: 'value',
-      document: {
-        object: 'document',
-        data: {},
-        nodes: [
-          {
-            object: 'block',
-            type: 'div',
-            isVoid: false,
-            data: {
-              attributes: {},
-            },
-            nodes: [
-              {
-                object: 'block',
-                type: 'paragraph',
-                isVoid: false,
-                data: {
-                  attributes: {},
-                },
-                nodes: [
-                  {
-                    object: 'text',
-                    leaves: [
-                      {
-                        object: 'leaf',
-                        text: 'foo',
-                        marks: [],
-                      },
-                    ],
-                  },
-                  {
-                    object: 'inline',
-                    type: 'image',
-                    isVoid: true,
-                    data: {
-                      src: 'blah.jpg',
-                      width: null,
-                      height: null,
-                      margin: '',
-                      justifyContent: '',
-                      alignment: null,
-                      alt: null,
-                    },
-                    nodes: [
-                      {
-                        object: 'text',
-                        leaves: [
-                          {
-                            object: 'leaf',
-                            text: '',
-                            marks: [],
-                          },
-                        ],
-                      },
-                    ],
-                  },
-                  {
-                    object: 'text',
-                    leaves: [
-                      {
-                        object: 'leaf',
-                        text: 'bar',
-                        marks: [],
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    };
-    const html = `<div><p>foo<img src="blah.jpg"/>bar</p></div>`;
-    const v = htmlToValue(html);
-
-    console.log(JSON.stringify(v.toJSON()));
-    expect(v.toJSON()).toEqual(expected);
-  });
-
-  it('does not break', () => {
-    /*
-     More than 12 iterations of the same kind would previously break the input. Here we have 16 text nodes, and now it works.
-     */
-    const expected = {
-      object: 'value',
-      document: {
-        object: 'document',
-        data: {},
-        nodes: [
-          {
-            object: 'block',
-            type: 'div',
-            isVoid: false,
-            data: { attributes: {} },
-            nodes: [
-              {
-                object: 'text',
-                leaves: [
-                  {
-                    object: 'leaf',
-                    text: 'Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' Foo ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                  {
-                    object: 'leaf',
-                    text: ' bar ',
-                    marks: [],
-                  },
-                  {
-                    object: 'leaf',
-                    text: 'x',
-                    marks: [
-                      {
-                        object: 'mark',
-                        type: 'italic',
-                        data: {},
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
-      },
-    };
-    const html =
-      '<div>Foo <em>x</em> bar <em>x</em> Foo <em>x</em> bar <em>x</em> Foo <em>x</em> bar <em>x</em> Foo <em>x</em> bar <em>x</em></div>';
-    const v = htmlToValue(html);
-
-    expect(v.toJSON()).toEqual(expected);
-  });
-});

package/configure/node_modules/@pie-lib/editable-html/src/__tests__/utils.js

@@ -1,36 +0,0 @@
-import React from 'react';
-
-export function classObject() {
-  const out = {};
-  for (var a in arguments) {
-    const value = arguments[a];
-    out[value] = value;
-  }
-  return out;
-}
-
-export function mockComponents() {
-  const out = {};
-  for (var a in arguments) {
-    const value = arguments[a];
-    out[value] = class extends React.Component {
-      render() {
-        return <div data-mock-component="true">{value}</div>;
-      }
-    };
-  }
-  return out;
-}
-
-export function mockIconButton() {
-  jest.mock('@material-ui/core/IconButton', () => {
-    return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
-  });
-}
-export function mockMathInput() {
-  jest.mock('@pie-lib/math-input', () => ({
-    addBrackets: jest.fn((s) => s),
-    removeBrackets: jest.fn((s) => s),
-    ...mockComponents('Keypad', 'MathQuillInput', 'EditableMathInput', 'HorizontalKeypad'),
-  }));
-}

package/configure/node_modules/@pie-lib/editable-html/src/block-tags.js

@@ -1,17 +0,0 @@
-/**
- * Tags to blocks.
- *
- * @type {Object}
- */
-
-export const BLOCK_TAGS = {
-  div: 'div',
-  // span: 'span',
-  p: 'paragraph',
-  pre: 'code',
-  h1: 'heading-one',
-  h2: 'heading-two',
-  h4: 'heading-four',
-  h5: 'heading-five',
-  h6: 'heading-six',
-};

package/configure/node_modules/@pie-lib/editable-html/src/constants.js

@@ -1,7 +0,0 @@
-export const MAIN_CONTAINER_CLASS = 'main-container';
-export const PIE_TOOLBAR__CLASS = 'pie-toolbar';
-
-export default {
-  MAIN_CONTAINER_CLASS,
-  PIE_TOOLBAR__CLASS,
-};