@pie-lib/editable-html-tip-tap 1.1.0-next.6059 → 1.1.1-next.1

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

@@ -0,0 +1,64 @@
+import { valueToSize } from '../utils/size';
+
+describe('Size 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');
+      expect(valueToSize(0)).toBeUndefined();
+    });
+
+    it('returns undefined for percentage strings', () => {
+      expect(valueToSize('100%')).toBeUndefined();
+      expect(valueToSize('50%')).toBeUndefined();
+      expect(valueToSize('0%')).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)');
+      expect(valueToSize('calc(50vh + 10px)')).toBe('calc(50vh + 10px)');
+    });
+
+    it('converts numeric strings to px', () => {
+      expect(valueToSize('100')).toBe('100px');
+      expect(valueToSize('50')).toBe('50px');
+      expect(valueToSize('250')).toBe('250px');
+    });
+
+    it('handles invalid numeric strings', () => {
+      const result = valueToSize('invalid');
+      expect(isNaN(result)).toBe(true);
+    });
+
+    it('handles edge cases with whitespace', () => {
+      const result = valueToSize('  ');
+      expect(isNaN(result)).toBe(true);
+    });
+
+    it('handles negative numbers', () => {
+      expect(valueToSize(-100)).toBe('-100px');
+      expect(valueToSize('-50')).toBe('-50px');
+    });
+
+    it('handles decimal numbers', () => {
+      expect(valueToSize(100.5)).toBe('100.5px');
+      expect(valueToSize('100.5')).toBe('100px'); // parseInt truncates
+    });
+  });
+});

package/src/__tests__/theme.test.js

@@ -0,0 +1,17 @@
+import { primary } from '../theme';
+
+describe('Theme', () => {
+  describe('primary color', () => {
+    it('is defined', () => {
+      expect(primary).toBeDefined();
+    });
+
+    it('has the correct hex value', () => {
+      expect(primary).toBe('#304ffe');
+    });
+
+    it('is a valid hex color', () => {
+      expect(primary).toMatch(/^#[0-9A-Fa-f]{6}$/);
+    });
+  });
+});

package/src/components/EditableHtml.jsx

@@ -26,7 +26,7 @@ import { CSSMark } from '../extensions/css';
 
 import EditorContainer from './TiptapContainer';
 import { valueToSize } from '../utils/size';
-import { buildExtensions } from '../extensions';
+import { buildExtensions, PLUGINS_MAP } from '../extensions';
 
 const defaultToolbarOpts = {
   position: 'bottom',
@@ -105,17 +105,20 @@ export const EditableHtml = (props) => {
     customPlugins = customPlugins || [];
 
     const filteredActivePlugins = (props.activePlugins || DEFAULT_ACTIVE_PLUGINS)?.filter((pluginName) => {
-      const pluginInfo = otherPluginProps[pluginName] || {};
+      const nameToUse = PLUGINS_MAP[pluginName] || pluginName;
+      const pluginInfo = otherPluginProps[nameToUse] || {};
 
       return !pluginInfo || !pluginInfo.disabled;
     });
 
     return buildExtensions(filteredActivePlugins, customPlugins, {
       math: {},
-      textAlign: {},
+      textAlign: props.textAlign,
       html: {},
       extraCSSRules: props.extraCSSRules || {},
-      image: {},
+      image: {
+        ...props.imageSupport,
+      },
       toolbar: {},
       table: {},
       responseArea: {
@@ -160,7 +163,7 @@ export const EditableHtml = (props) => {
         onDelete:
           props.imageSupport &&
           props.imageSupport.delete &&
-          ((node, done) => {
+          (node => {
             const { src } = node.attrs;
 
             props.imageSupport.delete(src, (e) => {
@@ -172,7 +175,6 @@ export const EditableHtml = (props) => {
 
               setPendingImages(newState.pendingImages);
               setScheduled(newState.scheduled);
-              done();
             });
           }),
         insertImageRequested:

package/src/components/__tests__/AltDialog.test.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { AltDialog } from '../image/AltDialog';
+
+jest.mock('@mui/material/Dialog', () => ({
+  __esModule: true,
+  default: ({ children, open, id }) => open && <div id={id}>{children}</div>,
+}));
+
+jest.mock('@mui/material/DialogContent', () => ({
+  __esModule: true,
+  default: ({ children }) => <div>{children}</div>,
+}));
+
+jest.mock('@mui/material/DialogActions', () => ({
+  __esModule: true,
+  default: ({ children }) => <div>{children}</div>,
+}));
+
+jest.mock('@mui/material/Button', () => ({
+  __esModule: true,
+  default: ({ children, onClick }) => <button onClick={onClick}>{children}</button>,
+}));
+
+jest.mock('@mui/material/TextField', () => ({
+  __esModule: true,
+  default: ({ value, onChange, placeholder, helperText, FormHelperTextProps, multiline }) => (
+    <div className="MuiTextField-root">
+      <textarea value={value || ''} onChange={onChange} placeholder={placeholder} data-multiline={multiline} />
+      {helperText && <div style={FormHelperTextProps?.style}>{helperText}</div>}
+    </div>
+  ),
+}));
+
+jest.mock('@mui/icons-material/ArrowBackIos', () => ({
+  __esModule: true,
+  default: () => <svg data-testid="arrow-back-icon" />,
+}));
+
+describe('AltDialog', () => {
+  const defaultProps = {
+    onDone: jest.fn(),
+    alt: 'Initial alt text',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders with initial alt text', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.value).toBe('Initial alt text');
+  });
+
+  it('renders placeholder text', () => {
+    const { getByPlaceholderText } = render(<AltDialog {...defaultProps} alt="" />);
+    expect(getByPlaceholderText('Enter an Alt Text description of this image')).toBeInTheDocument();
+  });
+
+  it('renders helper text', () => {
+    const { getByText } = render(<AltDialog {...defaultProps} />);
+    expect(
+      getByText(
+        'Users with visual limitations rely on Alt Text, since screen readers cannot otherwise describe the contents of an image.',
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders Done button', () => {
+    const { getByText } = render(<AltDialog {...defaultProps} />);
+    expect(getByText('Done')).toBeInTheDocument();
+  });
+
+  it('renders ArrowBackIos icon', () => {
+    const { getByTestId } = render(<AltDialog {...defaultProps} />);
+    expect(getByTestId('arrow-back-icon')).toBeInTheDocument();
+  });
+
+  it('updates value on text field change', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const textarea = container.querySelector('textarea');
+    fireEvent.change(textarea, { target: { value: 'New alt text' } });
+    expect(textarea.value).toBe('New alt text');
+  });
+
+  it('calls onDone with value when Done button is clicked', () => {
+    const onDone = jest.fn();
+    // Mock document.querySelectorAll to avoid DOM manipulation issues
+    const mockQuerySelectorAll = jest.spyOn(document, 'querySelectorAll').mockReturnValue([]);
+
+    const { getByText, container } = render(<AltDialog {...defaultProps} onDone={onDone} />);
+    const textarea = container.querySelector('textarea');
+    fireEvent.change(textarea, { target: { value: 'Updated alt text' } });
+    fireEvent.click(getByText('Done'));
+    expect(onDone).toHaveBeenCalledWith('Updated alt text');
+
+    mockQuerySelectorAll.mockRestore();
+  });
+
+  it('closes dialog when Done button is clicked', () => {
+    // Mock document.querySelectorAll to avoid DOM manipulation issues
+    const mockQuerySelectorAll = jest.spyOn(document, 'querySelectorAll').mockReturnValue([]);
+
+    const { getByText, container } = render(<AltDialog {...defaultProps} />);
+    const dialog = container.querySelector('#text-dialog');
+    expect(dialog).toBeInTheDocument();
+    fireEvent.click(getByText('Done'));
+
+    mockQuerySelectorAll.mockRestore();
+  });
+
+  it('dialog is open', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const dialog = container.querySelector('[id="text-dialog"]');
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it('has correct dialog props', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const dialog = container.querySelector('[id="text-dialog"]');
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it('text field is multiline', () => {
+    const { container } = render(<AltDialog {...defaultProps} />);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.getAttribute('data-multiline')).toBe('true');
+  });
+
+  it('renders without alt text', () => {
+    const { getByPlaceholderText } = render(<AltDialog {...defaultProps} alt={undefined} />);
+    expect(getByPlaceholderText('Enter an Alt Text description of this image')).toBeInTheDocument();
+  });
+
+  it('handles empty alt text', () => {
+    const { container } = render(<AltDialog {...defaultProps} alt="" />);
+    const textarea = container.querySelector('textarea');
+    expect(textarea.value).toBe('');
+  });
+});

package/src/components/__tests__/CharacterPicker.test.jsx

@@ -0,0 +1,195 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { CharacterPicker, CharacterIcon } from '../CharacterPicker';
+
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: (node) => node,
+}));
+
+jest.mock('@pie-lib/math-toolbar', () => ({
+  PureToolbar: ({ onChange, onDone, additionalKeys }) => (
+    <div data-testid="pure-toolbar">
+      <button onClick={() => onChange('á')} data-testid="char-button">
+        á
+      </button>
+      <button onClick={onDone} data-testid="done-button">
+        Done
+      </button>
+    </div>
+  ),
+}));
+
+jest.mock('../characters/custom-popper', () => ({
+  __esModule: true,
+  default: ({ children, onClose }) => (
+    <div data-testid="custom-popper">
+      {children}
+      <button onClick={onClose} data-testid="close-popper">
+        Close
+      </button>
+    </div>
+  ),
+}));
+
+describe('CharacterIcon', () => {
+  it('renders with letter', () => {
+    const { getByText } = render(<CharacterIcon letter="ñ" />);
+    expect(getByText('ñ')).toBeInTheDocument();
+  });
+
+  it('renders with correct styling', () => {
+    const { container } = render(<CharacterIcon letter="€" />);
+    const div = container.firstChild;
+    expect(div).toHaveStyle({ fontSize: '24px', lineHeight: '24px' });
+  });
+});
+
+describe('CharacterPicker', () => {
+  const mockEditor = {
+    chain: jest.fn(() => ({
+      focus: jest.fn(() => ({
+        insertContent: jest.fn(() => ({ run: jest.fn() })),
+      })),
+    })),
+    options: {
+      element: document.createElement('div'),
+    },
+    view: {
+      coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
+      dom: document.createElement('div'),
+    },
+    state: {
+      selection: { from: 0 },
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Reset the element to avoid "Cannot redefine property" error
+    mockEditor.options.element = document.createElement('div');
+    Object.defineProperty(mockEditor.options.element, 'getBoundingClientRect', {
+      value: jest.fn(() => ({ top: 0, left: 0, height: 100 })),
+      configurable: true,
+    });
+  });
+
+  it('returns null when opts has no characters', () => {
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={{}} onClose={jest.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('returns null when opts is not provided', () => {
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={null} onClose={jest.fn()} />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders character picker with spanish config', () => {
+    const opts = {
+      language: 'spanish',
+      characters: [['á', 'é', 'í']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('renders character picker with special config', () => {
+    const opts = {
+      language: 'special',
+      characters: [['€', '£']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('handles character insertion', () => {
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    fireEvent.click(getByTestId('char-button'));
+    expect(mockEditor.chain).toHaveBeenCalled();
+  });
+
+  it('calls onClose when done button is clicked', () => {
+    const onClose = jest.fn();
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onClose} />);
+    fireEvent.click(getByTestId('done-button'));
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('closes on outside click', async () => {
+    const onClose = jest.fn();
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onClose} />);
+
+    await waitFor(() => {
+      fireEvent.mouseDown(document.body);
+    });
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('does not close when clicking inside picker', async () => {
+    const onClose = jest.fn();
+    const opts = {
+      characters: [['á', 'é']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={onClose} />);
+
+    await waitFor(() => {
+      const picker = container.querySelector('.insert-character-dialog');
+      if (picker) {
+        fireEvent.mouseDown(picker);
+      }
+    });
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('renders with custom opts structure', () => {
+    const opts = {
+      characters: [
+        [
+          { name: 'a', write: 'á', label: 'á' },
+          { name: 'e', write: 'é', label: 'é' },
+        ],
+      ],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('renders with hasPreview option', () => {
+    const opts = {
+      hasPreview: true,
+      characters: [
+        [
+          {
+            name: 'euro',
+            write: '€',
+            label: '€',
+            description: 'Euro sign',
+            unicode: 'U+20AC',
+          },
+        ],
+      ],
+    };
+    const { getByTestId } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    expect(getByTestId('pure-toolbar')).toBeInTheDocument();
+  });
+
+  it('calculates position correctly', () => {
+    const opts = {
+      characters: [['á']],
+    };
+    const { container } = render(<CharacterPicker editor={mockEditor} opts={opts} onClose={jest.fn()} />);
+    const dialog = container.querySelector('.insert-character-dialog');
+    expect(dialog).toHaveStyle({ position: 'absolute' });
+  });
+});

package/src/components/__tests__/CssIcon.test.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CssIcon from '../icons/CssIcon';
+
+describe('CssIcon', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<CssIcon />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders CSS text', () => {
+    const { getByText } = render(<CssIcon />);
+    expect(getByText('CSS')).toBeInTheDocument();
+  });
+
+  it('applies correct font family', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    // Font family is applied via styled component, just verify text renders
+    expect(element).toBeInTheDocument();
+  });
+
+  it('applies bold font weight', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ fontWeight: 'bold' });
+  });
+
+  it('has correct line height', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ lineHeight: '14px' });
+  });
+
+  it('has relative positioning', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ position: 'relative' });
+  });
+
+  it('has nowrap white space', () => {
+    const { getByText } = render(<CssIcon />);
+    const element = getByText('CSS');
+    expect(element).toHaveStyle({ whiteSpace: 'nowrap' });
+  });
+});