@pie-lib/editable-html 13.1.0-beta.1 → 13.1.0-beta.3

package/src/__tests__/serialization.test.js

@@ -1,290 +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);
-
-    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/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('@mui/material/IconButton', () => {
-    return (props) => <div className={props.className} style={props.style} ariaLabel={props['aria-label']} />;
-  });
-}
-export function mockMathInput() {
-  jest.mock('@pie-lib/math-input-mathlive', () => ({
-    addBrackets: jest.fn((s) => s),
-    removeBrackets: jest.fn((s) => s),
-    ...mockComponents('Keypad', 'MathQuillInput', 'EditableMathInput', 'HorizontalKeypad'),
-  }));
-}

package/src/plugins/image/__tests__/component.test.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Block, Data } from 'slate';
-import { Component } from '../component';
-
-describe('Image Component', () => {
-  const createImageNode = (dataProps = {}) => {
-    return Block.fromJSON({
-      type: 'image',
-      data: Data.create({
-        width: 50,
-        height: 50,
-        src: 'test-image.jpg',
-        ...dataProps,
-      }),
-    });
-  };
-
-  const createMockEditor = () => ({
-    value: {},
-    change: jest.fn(),
-  });
-
-  const defaultClasses = {
-    active: 'active',
-    loading: 'loading',
-    pendingDelete: 'pendingDelete',
-  };
-
-  const defaultProps = {
-    node: createImageNode(),
-    editor: createMockEditor(),
-    classes: defaultClasses,
-    onDelete: jest.fn(),
-  };
-
-  it('renders correctly with default props', () => {
-    const { container } = render(<Component {...defaultProps} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('renders image with correct dimensions', () => {
-    const { container } = render(<Component {...defaultProps} />);
-    const img = container.querySelector('img');
-    expect(img).toBeInTheDocument();
-  });
-
-  it('renders with custom width and height', () => {
-    const node = createImageNode({ width: 100, height: 200 });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    const img = container.querySelector('img');
-    expect(img).toBeInTheDocument();
-  });
-
-  it('renders with loading class when loading', () => {
-    const node = createImageNode({ loading: true });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('renders with active class when active', () => {
-    const node = createImageNode({ active: true });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-
-  it('handles image with source', () => {
-    const node = createImageNode({ src: 'test-image.jpg' });
-    const { container } = render(<Component {...defaultProps} node={node} />);
-    const img = container.querySelector('img');
-    expect(img).toHaveAttribute('src', 'test-image.jpg');
-  });
-});

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);
-    });
-  });
-});