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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/editable-html",
-  "version": "13.1.0-beta.2",
+  "version": "13.1.0-beta.3",
   "description": "",
   "license": "ISC",
   "main": "lib/index.js",
@@ -16,9 +16,9 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/drag": "^4.0.2",
-    "@pie-lib/math-input-mathlive": "^1.0.12",
+    "@pie-lib/math-input-mathlive": "^1.0.13",
     "@pie-lib/math-rendering": "^5.0.2",
-    "@pie-lib/math-toolbar": "^3.1.0-beta.8",
+    "@pie-lib/math-toolbar": "^3.1.0-beta.9",
     "@pie-lib/render-ui": "^6.1.0",
     "change-case": "^3.0.2",
     "classnames": "^2.2.6",

package/src/__tests__/editor-utils.test.js

@@ -1,162 +0,0 @@
-import { buildSizeStyle, valueToSize } from '../editor';
-
-describe('Editor Utilities', () => {
-  describe('valueToSize', () => {
-    it('returns undefined for falsy values', () => {
-      expect(valueToSize(null)).toBeUndefined();
-      expect(valueToSize(undefined)).toBeUndefined();
-      expect(valueToSize('')).toBeUndefined();
-      expect(valueToSize(0)).toBeUndefined();
-    });
-
-    it('converts number to px string', () => {
-      expect(valueToSize(100)).toBe('100px');
-      expect(valueToSize(50)).toBe('50px');
-    });
-
-    it('returns undefined for percentage strings', () => {
-      expect(valueToSize('100%')).toBeUndefined();
-      expect(valueToSize('50%')).toBeUndefined();
-    });
-
-    it('preserves valid CSS unit strings', () => {
-      expect(valueToSize('100px')).toBe('100px');
-      expect(valueToSize('10vh')).toBe('10vh');
-      expect(valueToSize('50vw')).toBe('50vw');
-      expect(valueToSize('9ch')).toBe('9ch');
-      expect(valueToSize('2em')).toBe('2em');
-    });
-
-    it('preserves calc() expressions', () => {
-      expect(valueToSize('calc(10em + 42px)')).toBe('calc(10em + 42px)');
-      expect(valueToSize('calc(100% - 20px)')).toBe('calc(100% - 20px)');
-    });
-
-    it('converts numeric strings to px', () => {
-      expect(valueToSize('100')).toBe('100px');
-      expect(valueToSize('50')).toBe('50px');
-    });
-
-    it('handles invalid numeric strings', () => {
-      const result = valueToSize('invalid');
-      expect(isNaN(result)).toBe(true);
-    });
-  });
-
-  describe('buildSizeStyle', () => {
-    it('builds style with numeric width', () => {
-      const result = buildSizeStyle({ width: 100 });
-      expect(result).toEqual({
-        width: '100px',
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('returns undefined for percentage values', () => {
-      const result = buildSizeStyle({ height: '100%', width: '100%' });
-      expect(result).toEqual({
-        width: undefined,
-        height: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with numeric height', () => {
-      const result = buildSizeStyle({ height: 100 });
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: '100px',
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with minHeight', () => {
-      const result = buildSizeStyle({ minHeight: 100 });
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: '100px',
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with maxHeight', () => {
-      const result = buildSizeStyle({ maxHeight: 100 });
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: '100px',
-      });
-    });
-
-    it('builds style with calc() expression', () => {
-      const result = buildSizeStyle({ width: 'calc(10em + 42px)' });
-      expect(result).toEqual({
-        width: 'calc(10em + 42px)',
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with ch unit', () => {
-      const result = buildSizeStyle({ width: '9ch' });
-      expect(result).toEqual({
-        width: '9ch',
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with no size props', () => {
-      const result = buildSizeStyle({});
-      expect(result).toEqual({
-        width: undefined,
-        minWidth: undefined,
-        maxWidth: undefined,
-        height: undefined,
-        minHeight: undefined,
-        maxHeight: undefined,
-      });
-    });
-
-    it('builds style with multiple size constraints', () => {
-      const result = buildSizeStyle({
-        width: 500,
-        minWidth: 300,
-        maxWidth: 700,
-        height: 400,
-        minHeight: 200,
-        maxHeight: 600,
-      });
-      expect(result).toEqual({
-        width: '500px',
-        minWidth: '300px',
-        maxWidth: '700px',
-        height: '400px',
-        minHeight: '200px',
-        maxHeight: '600px',
-      });
-    });
-  });
-});

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