@pie-lib/editable-html 13.0.13 → 13.0.14-beta.1

package/src/plugins/image/__tests__/image-toolbar-logic.test.jsx

@@ -1,90 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ImageToolbar } from '../image-toolbar';
-import React from 'react';
-
-// Mock the alt-dialog component to avoid complex modal rendering in tests
-jest.mock('../alt-dialog', () => {
-  return function AltDialog({ alt, onDone }) {
-    return (
-      <div data-testid="alt-dialog">
-        <input data-testid="alt-input" defaultValue={alt} onChange={(e) => onDone(e.target.value)} />
-      </div>
-    );
-  };
-});
-
-describe('ImageToolbar', () => {
-  let onChange;
-
-  beforeEach(() => {
-    onChange = jest.fn();
-  });
-
-  const renderComponent = (extras = {}) => {
-    const props = {
-      onChange,
-      imageLoaded: true,
-      ...extras,
-    };
-
-    return render(<ImageToolbar {...props} />);
-  };
-
-  describe('rendering', () => {
-    it('renders alignment buttons', () => {
-      renderComponent();
-      expect(screen.getByText('left')).toBeInTheDocument();
-      expect(screen.getByText('center')).toBeInTheDocument();
-      expect(screen.getByText('right')).toBeInTheDocument();
-    });
-
-    it('renders alt text button', () => {
-      renderComponent();
-      expect(screen.getByText('Alt text')).toBeInTheDocument();
-    });
-
-    it('does not render alignment buttons when disabled', () => {
-      renderComponent({ disableImageAlignmentButtons: true });
-      expect(screen.queryByText('left')).not.toBeInTheDocument();
-      expect(screen.queryByText('center')).not.toBeInTheDocument();
-      expect(screen.queryByText('right')).not.toBeInTheDocument();
-    });
-
-    it('shows active state for selected alignment', () => {
-      const { container } = renderComponent({ alignment: 'center' });
-      // The MarkButton component uses aria-pressed for active state
-      const centerButton = screen.getByText('center').closest('button');
-      expect(centerButton).toHaveAttribute('aria-pressed', 'true');
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange with alignment when left is clicked', async () => {
-      const user = userEvent.setup();
-      renderComponent();
-
-      await user.click(screen.getByText('left'));
-
-      expect(onChange).toHaveBeenCalledWith({ alignment: 'left' });
-    });
-
-    it('calls onChange with alignment when center is clicked', async () => {
-      const user = userEvent.setup();
-      renderComponent();
-
-      await user.click(screen.getByText('center'));
-
-      expect(onChange).toHaveBeenCalledWith({ alignment: 'center' });
-    });
-
-    it('calls onChange with alignment when right is clicked', async () => {
-      const user = userEvent.setup();
-      renderComponent();
-
-      await user.click(screen.getByText('right'));
-
-      expect(onChange).toHaveBeenCalledWith({ alignment: 'right' });
-    });
-  });
-});

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import Toolbar from '../image-toolbar';
-import { render } from '@testing-library/react';
-
-it('renders image toolbar', () => {
-  const classes = { holder: 'holder' };
-
-  const { container } = render(<Toolbar percent={50} classes={classes} onChange={jest.fn()} />);
-
-  // Verify the toolbar is rendered
-  expect(container.firstChild).toBeInTheDocument();
-});

package/src/plugins/image/__tests__/index.test.js

@@ -1,92 +0,0 @@
-import ImageToolbar from '../';
-
-describe('image plugin', () => {
-  let value = {};
-
-  const imageSupport = {
-    delete: jest.fn(),
-    add: jest.fn(),
-  };
-
-  const imagePlugin = ImageToolbar({
-    onDelete: (src, done) => {
-      imageSupport.delete(src, (e) => {
-        done(e, value);
-      });
-    },
-    insertImageRequested: (node, getHandler) => {
-      const handler = getHandler(() => value);
-      imageSupport.add(handler);
-    },
-  });
-
-  describe('normalizeNode', () => {
-    it('should exit the function if the node is not of type document', () => {
-      const returnValue = imagePlugin.normalizeNode({ object: 'image' });
-
-      expect(returnValue).toEqual(undefined);
-    });
-
-    it('should exit if the function if there are no changes needed', () => {
-      const nodes = [
-        {
-          object: 'text',
-          text: 'Before Image',
-        },
-        {
-          type: 'image',
-        },
-        {
-          object: 'text',
-          text: 'After Image',
-        },
-      ];
-      const returnValue = imagePlugin.normalizeNode({
-        object: 'document',
-        findDescendant: jest.fn((callback) => {
-          nodes.forEach((n) => callback(n));
-        }),
-      });
-      expect(returnValue).toEqual(undefined);
-    });
-
-    it('should return a function if there is a node with an empty text before an image', () => {
-      const nodes = [
-        {
-          object: 'text',
-          text: '',
-          key: '1',
-        },
-        {
-          type: 'image',
-          key: '2',
-        },
-        {
-          object: 'text',
-          text: 'After Image',
-          key: '3',
-        },
-      ];
-      const findDescendant = jest.fn((callback) => {
-        nodes.forEach((n) => callback(n));
-      });
-      const change = {
-        withoutNormalization: jest.fn((callback) => {
-          callback();
-        }),
-        insertTextByKey: jest.fn(),
-      };
-      const returnValue = imagePlugin.normalizeNode({
-        object: 'document',
-        findDescendant,
-      });
-
-      expect(returnValue).toEqual(expect.any(Function));
-
-      returnValue(change);
-
-      expect(change.withoutNormalization).toHaveBeenCalledWith(expect.any(Function));
-      expect(change.insertTextByKey).toHaveBeenCalledWith('1', 0, ' ');
-    });
-  });
-});

package/src/plugins/image/__tests__/insert-image-handler.test.js

@@ -1,113 +0,0 @@
-import MockChange, { MockDocument } from './mock-change';
-
-import { Data } from 'slate';
-import InsertImageHandler from '../insert-image-handler';
-
-expect.extend({
-  toMatchData: (received, argument) => {
-    const argData = Data.create(argument);
-    const pass = argData.equals(received.data);
-    if (pass) {
-      return {
-        message: () => `expected ${received.toJSON()} not to be divisible by ${argData.toJSON()}`,
-        pass: true,
-      };
-    } else {
-      return {
-        message: () => `expected ${received.toJSON()} to be divisible by ${argData.toJSON()}`,
-        pass: false,
-      };
-    }
-  },
-});
-describe('insert image handler', () => {
-  let change, document, value;
-  beforeEach(() => {
-    document = new MockDocument();
-    change = new MockChange();
-    value = {
-      change: () => change,
-      document,
-    };
-  });
-
-  const block = { key: 1 };
-  const onChange = jest.fn();
-
-  const handler = new InsertImageHandler(
-    block,
-    () => {},
-    () => value,
-    onChange,
-  );
-
-  test('it constructs', () => {
-    expect(handler).not.toEqual(undefined);
-  });
-
-  describe('fileChosen', () => {
-    let fileReader;
-    beforeEach(() => {
-      fileReader = {
-        readAsDataURL: jest.fn(),
-      };
-
-      global.FileReader = () => fileReader;
-      handler.fileChosen({});
-    });
-
-    test('calls readAsDataURL', () => {
-      expect(fileReader.readAsDataURL).toBeCalledWith({});
-    });
-
-    test('calls onChange with src -> dataUrl', () => {
-      fileReader.result = 'dataURL';
-      fileReader.onload();
-      expect(change.setNodeByKey).toBeCalledWith(block.key, expect.anything());
-      expect(change.setNodeByKey.mock.calls[0][1]).toMatchData({
-        src: 'dataURL',
-      });
-      expect(onChange).toBeCalledWith(change);
-    });
-  });
-
-  describe('progress', () => {
-    test('calls change w/ percent', () => {
-      handler.progress(40, 40, 100);
-      expect(change.setNodeByKey).toBeCalledWith(block.key, expect.anything());
-
-      expect(change.setNodeByKey.mock.calls[0][1].data.toJS()).toMatchObject({
-        percent: 40,
-      });
-    });
-  });
-
-  describe('done', () => {
-    test('calls setNodeByKey', () => {
-      handler.done(null, 'src');
-
-      expect(change.setNodeByKey).toBeCalledWith(block.key, expect.anything());
-
-      expect(change.setNodeByKey.mock.calls[0][1].data.toJS()).toMatchObject({
-        src: 'src',
-        loaded: true,
-        percent: 100,
-      });
-    });
-  });
-
-  describe('cancel', () => {
-    beforeEach(() => {
-      document.getChild = jest.fn().mockReturnValue({ data: Data.create({}), key: block.key });
-      handler.cancel();
-    });
-
-    test('calls onChange', () => {
-      expect(onChange).toBeCalled();
-    });
-
-    test('calls removeNodeByKey', () => {
-      expect(change.removeNodeByKey).toBeCalledWith(block.key);
-    });
-  });
-});

package/src/plugins/image/__tests__/mock-change.js

@@ -1,15 +0,0 @@
-import { Data } from 'slate';
-
-export default function MockChange() {
-  this.setNodeByKey = jest.fn().mockReturnValue(this);
-  this.removeNodeByKey = jest.fn().mockReturnValue(this);
-  this.insertInline = jest.fn().mockReturnValue(this);
-  this.moveFocusTo = jest.fn().mockReturnValue(this);
-  this.moveAnchorTo = jest.fn().mockReturnValue(this);
-}
-
-export function MockDocument() {
-  this.getChild = jest.fn().mockReturnValue({ data: Data.create({}) });
-
-  this.getDescendant = jest.fn();
-}

package/src/plugins/list/__tests__/index.test.js

@@ -1,52 +0,0 @@
-import List, { serialization } from '../index';
-import debug from 'debug';
-
-const log = debug('@pie-lib:editable-html:test:plugins:list');
-
-describe('ListPlugin', () => {
-  let next;
-
-  describe('deserialize', () => {
-    next = jest.fn();
-
-    const assertDeserialize = (tagName, expectedType) => {
-      it(`should deserialize ${tagName} to ${expectedType}`, () => {
-        const out = serialization.deserialize({ tagName, children: [], childNodes: [] }, next);
-
-        expect(out).toMatchObject({ object: 'block', type: expectedType });
-        expect(next).toHaveBeenCalledWith([]);
-      });
-    };
-    assertDeserialize('ul', 'ul_list');
-    assertDeserialize('ol', 'ol_list');
-    assertDeserialize('li', 'list_item');
-  });
-
-  describe('serialize', () => {
-    const assertSerialize = (type, expectedType) => {
-      it(`should serialize ${type} to ${expectedType}`, () => {
-        const out = serialization.serialize({ object: 'block', type }, {});
-        log('out: ', out);
-        expect(out.type).toMatch(expectedType);
-      });
-    };
-    assertSerialize('ul_list', 'ul');
-    assertSerialize('ol_list', 'ol');
-    assertSerialize('list_item', 'li');
-  });
-
-  describe('renderNode', () => {
-    let plugin = List({});
-
-    const assertRenderNode = (type, expectedType) => {
-      it(`should renderNode ${type} to ${expectedType}`, () => {
-        const out = plugin.renderNode({ node: { type } });
-        expect(out.type).toMatch(expectedType);
-      });
-    };
-
-    assertRenderNode('ul_list', 'ul');
-    assertRenderNode('ol_list', 'ol');
-    assertRenderNode('list_item', 'li');
-  });
-});

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

@@ -1,264 +0,0 @@
-import React from 'react';
-import debug from 'debug';
-import MockChange from '../../image/__tests__/mock-change';
-import { Data } from 'slate';
-import MathPlugin, { CustomToolbarComp, inlineMath, serialization } from '../index';
-import { render, screen } from '@testing-library/react';
-
-jest.mock('@pie-framework/mathquill', () => ({
-  StaticMath: jest.fn(),
-  getInterface: jest.fn().mockReturnThis(),
-  registerEmbed: jest.fn(),
-}));
-
-let mockMathToolbarOnChange;
-let mockMathToolbarOnDone;
-
-jest.mock('@pie-lib/math-toolbar', () => ({
-  MathPreview: () => <div data-testid="math-preview" />,
-  MathToolbar: (props) => {
-    // Store callbacks for testing
-    mockMathToolbarOnChange = props.onChange;
-    mockMathToolbarOnDone = props.onDone;
-    return (
-      <div data-testid="math-toolbar" role="toolbar">
-        <button data-testid="toolbar-change" onClick={() => props.onChange && props.onChange('test-latex')}>
-          Change
-        </button>
-        <button data-testid="toolbar-done" onClick={() => props.onDone && props.onDone('test-latex')}>
-          Done
-        </button>
-      </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 renderComponent = (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 render(<CustomToolbarComp {...props} />);
-  };
-
-  describe('render', () => {
-    it('renders toolbar without default keypadMode', () => {
-      renderComponent();
-
-      // Verify the toolbar is rendered
-      expect(screen.getByTestId('math-toolbar')).toBeInTheDocument();
-      expect(screen.getByRole('toolbar')).toBeInTheDocument();
-    });
-
-    it('renders toolbar with default keypadMode', () => {
-      renderComponent({ pluginProps: { math: { keypadMode: 'geometry' } } });
-
-      // Verify the toolbar is rendered with keypadMode prop
-      expect(screen.getByTestId('math-toolbar')).toBeInTheDocument();
-      expect(screen.getByRole('toolbar')).toBeInTheDocument();
-    });
-  });
-
-  describe('onDone', () => {
-    it('calls onToolbarDone when done callback is triggered', () => {
-      onToolbarDone = jest.fn();
-      renderComponent();
-
-      // Trigger the onDone callback that was passed to MathToolbar
-      mockMathToolbarOnDone('oo');
-
-      expect(onToolbarDone).toHaveBeenCalledWith(expect.anything(), false);
-    });
-  });
-
-  describe('onChange', () => {
-    it('calls onDataChange when change callback is triggered', () => {
-      onDataChange = jest.fn();
-      renderComponent();
-
-      // Trigger the onChange callback that was passed to MathToolbar
-      mockMathToolbarOnChange('oo');
-
-      expect(onDataChange).toHaveBeenCalledWith('1', { latex: 'oo' });
-    });
-  });
-});