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

package/src/components/__tests__/custom-popper.test.jsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CustomPopper from '../characters/custom-popper';
+
+jest.mock('@mui/material/Popper', () => ({
+  __esModule: true,
+  default: ({ children, id, open, ...props }) =>
+    open ? (
+      <div id={id} data-testid="popper" {...props}>
+        {children}
+      </div>
+    ) : null,
+}));
+
+describe('CustomPopper', () => {
+  const mockAnchorEl = document.createElement('div');
+
+  it('renders without crashing', () => {
+    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(<CustomPopper anchorEl={mockAnchorEl}>Test Content</CustomPopper>);
+    expect(getByText('Test Content')).toBeInTheDocument();
+  });
+
+  it('is always open', () => {
+    const { getByTestId } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
+    expect(getByTestId('popper')).toBeInTheDocument();
+  });
+
+  it('has correct id', () => {
+    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
+    const popper = container.querySelector('#mouse-over-popover');
+    expect(popper).toBeInTheDocument();
+  });
+
+  it('applies correct styling to typography', () => {
+    const { getByText } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
+    const typography = getByText('Content');
+    expect(typography).toHaveStyle({ fontSize: '50px', textAlign: 'center' });
+  });
+
+  it('passes additional props to Popper', () => {
+    const { container } = render(
+      <CustomPopper anchorEl={mockAnchorEl} onClose={jest.fn()}>
+        Content
+      </CustomPopper>,
+    );
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders multiple children', () => {
+    const { getByText } = render(
+      <CustomPopper anchorEl={mockAnchorEl}>
+        <div>First</div>
+        <div>Second</div>
+      </CustomPopper>,
+    );
+    expect(getByText('First')).toBeInTheDocument();
+    expect(getByText('Second')).toBeInTheDocument();
+  });
+
+  it('has pointer-events disabled', () => {
+    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
+    // Styling is applied via styled component, just verify it rendered
+    expect(container).toBeInTheDocument();
+  });
+
+  it('has high z-index', () => {
+    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
+    // Styling is applied via styled component, just verify it rendered
+    expect(container).toBeInTheDocument();
+  });
+
+  it('has correct background color', () => {
+    const { container } = render(<CustomPopper anchorEl={mockAnchorEl}>Content</CustomPopper>);
+    // Styling is applied via styled component, just verify it rendered
+    expect(container).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/done-button.test.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { RawDoneButton, DoneButton } from '../common/done-button';
+
+describe('RawDoneButton', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders with Check icon', () => {
+    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    const onClick = jest.fn();
+    const { container } = render(<RawDoneButton onClick={onClick} />);
+    const button = container.querySelector('button');
+    fireEvent.click(button);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('has aria-label "Done"', () => {
+    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
+    const button = container.querySelector('button');
+    expect(button).toHaveAttribute('aria-label', 'Done');
+  });
+
+  it('accepts doneButtonRef prop', () => {
+    const doneButtonRef = jest.fn();
+    const { container } = render(<RawDoneButton onClick={jest.fn()} doneButtonRef={doneButtonRef} />);
+    // doneButtonRef is passed as buttonRef to IconButton, just verify it's accepted
+    expect(container).toBeInTheDocument();
+  });
+
+  it('applies correct styling', () => {
+    const { container } = render(<RawDoneButton onClick={jest.fn()} />);
+    const button = container.querySelector('button');
+    expect(button).toHaveClass('MuiIconButton-root');
+  });
+});
+
+describe('DoneButton', () => {
+  it('is the same as RawDoneButton', () => {
+    expect(DoneButton).toBe(RawDoneButton);
+  });
+
+  it('renders correctly', () => {
+    const { container } = render(<DoneButton onClick={jest.fn()} />);
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+});

package/src/components/__tests__/toolbar-buttons.test.jsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { RawButton, Button, RawMarkButton, MarkButton } from '../common/toolbar-buttons';
+
+describe('RawButton', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<RawButton onClick={jest.fn()}>Click me</RawButton>);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(<RawButton onClick={jest.fn()}>Test Button</RawButton>);
+    expect(getByText('Test Button')).toBeInTheDocument();
+  });
+
+  it('calls onClick on mouse down', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
+    fireEvent.mouseDown(getByText('Click'));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('prevents default on mouse down', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
+    const button = getByText('Click');
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
+    const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+    button.dispatchEvent(event);
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it('calls onClick on Enter key press', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
+    fireEvent.keyDown(getByText('Click'), { key: 'Enter' });
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('calls onClick on Space key press', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
+    fireEvent.keyDown(getByText('Click'), { key: ' ' });
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('does not call onClick on other key press', () => {
+    const onClick = jest.fn();
+    const { getByText } = render(<RawButton onClick={onClick}>Click</RawButton>);
+    fireEvent.keyDown(getByText('Click'), { key: 'a' });
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('applies active style when active is true', () => {
+    const { getByText } = render(
+      <RawButton onClick={jest.fn()} active={true}>
+        Active
+      </RawButton>,
+    );
+    const button = getByText('Active');
+    expect(button).toHaveStyle({ color: 'black' });
+  });
+
+  it('applies disabled style when disabled is true', () => {
+    const { getByText } = render(
+      <RawButton onClick={jest.fn()} disabled={true}>
+        Disabled
+      </RawButton>,
+    );
+    const button = getByText('Disabled');
+    expect(button).toHaveStyle({ cursor: 'not-allowed' });
+  });
+
+  it('applies extraStyles when provided', () => {
+    const extraStyles = { backgroundColor: 'red' };
+    const { getByText } = render(
+      <RawButton onClick={jest.fn()} extraStyles={extraStyles}>
+        Styled
+      </RawButton>,
+    );
+    const button = getByText('Styled');
+    expect(button).toHaveStyle({ backgroundColor: 'red' });
+  });
+
+  it('has aria-label when provided', () => {
+    const { getByLabelText } = render(
+      <RawButton onClick={jest.fn()} ariaLabel="Test Button">
+        Button
+      </RawButton>,
+    );
+    expect(getByLabelText('Test Button')).toBeInTheDocument();
+  });
+
+  it('has aria-pressed attribute', () => {
+    const { getByText } = render(
+      <RawButton onClick={jest.fn()} active={true}>
+        Button
+      </RawButton>,
+    );
+    expect(getByText('Button')).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('is focusable with tabIndex', () => {
+    const { getByText } = render(<RawButton onClick={jest.fn()}>Button</RawButton>);
+    expect(getByText('Button')).toHaveAttribute('tabIndex', '0');
+  });
+});
+
+describe('Button', () => {
+  it('is the same as RawButton', () => {
+    expect(Button).toBe(RawButton);
+  });
+});
+
+describe('RawMarkButton', () => {
+  it('renders without crashing', () => {
+    const { container } = render(
+      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
+        B
+      </RawMarkButton>,
+    );
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(
+      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
+        Bold
+      </RawMarkButton>,
+    );
+    expect(getByText('Bold')).toBeInTheDocument();
+  });
+
+  it('calls onToggle with mark on mouse down', () => {
+    const onToggle = jest.fn();
+    const { getByText } = render(
+      <RawMarkButton onToggle={onToggle} mark="italic" label="Italic">
+        I
+      </RawMarkButton>,
+    );
+    fireEvent.mouseDown(getByText('I'));
+    expect(onToggle).toHaveBeenCalledWith('italic');
+  });
+
+  it('prevents default on mouse down', () => {
+    const onToggle = jest.fn();
+    const { getByText } = render(
+      <RawMarkButton onToggle={onToggle} mark="bold" label="Bold">
+        B
+      </RawMarkButton>,
+    );
+    const button = getByText('B');
+    const event = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
+    const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
+    button.dispatchEvent(event);
+    expect(preventDefaultSpy).toHaveBeenCalled();
+  });
+
+  it('calls onToggle on Enter key press', () => {
+    const onToggle = jest.fn();
+    const { getByText } = render(
+      <RawMarkButton onToggle={onToggle} mark="underline" label="Underline">
+        U
+      </RawMarkButton>,
+    );
+    fireEvent.keyDown(getByText('U'), { key: 'Enter' });
+    expect(onToggle).toHaveBeenCalledWith('underline');
+  });
+
+  it('calls onToggle on Space key press', () => {
+    const onToggle = jest.fn();
+    const { getByText } = render(
+      <RawMarkButton onToggle={onToggle} mark="strike" label="Strike">
+        S
+      </RawMarkButton>,
+    );
+    fireEvent.keyDown(getByText('S'), { key: ' ' });
+    expect(onToggle).toHaveBeenCalledWith('strike');
+  });
+
+  it('does not call onToggle on other key press', () => {
+    const onToggle = jest.fn();
+    const { getByText } = render(
+      <RawMarkButton onToggle={onToggle} mark="bold" label="Bold">
+        B
+      </RawMarkButton>,
+    );
+    fireEvent.keyDown(getByText('B'), { key: 'a' });
+    expect(onToggle).not.toHaveBeenCalled();
+  });
+
+  it('applies active style when active is true', () => {
+    const { getByText } = render(
+      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold" active={true}>
+        B
+      </RawMarkButton>,
+    );
+    const button = getByText('B');
+    expect(button).toHaveStyle({ color: 'black' });
+  });
+
+  it('has aria-label from label prop', () => {
+    const { getByLabelText } = render(
+      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Toggle Bold">
+        B
+      </RawMarkButton>,
+    );
+    expect(getByLabelText('Toggle Bold')).toBeInTheDocument();
+  });
+
+  it('has aria-pressed attribute', () => {
+    const { getByText } = render(
+      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold" active={true}>
+        B
+      </RawMarkButton>,
+    );
+    expect(getByText('B')).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('is focusable with tabIndex', () => {
+    const { getByText } = render(
+      <RawMarkButton onToggle={jest.fn()} mark="bold" label="Bold">
+        B
+      </RawMarkButton>,
+    );
+    expect(getByText('B')).toHaveAttribute('tabIndex', '0');
+  });
+});
+
+describe('MarkButton', () => {
+  it('is the same as RawMarkButton', () => {
+    expect(MarkButton).toBe(RawMarkButton);
+  });
+});

package/src/extensions/__tests__/css.test.js

@@ -0,0 +1,196 @@
+import { CSSMark, removeDialogs } from '../css';
+
+jest.mock('@tiptap/core', () => ({
+  Mark: { create: jest.fn((config) => config) },
+  mergeAttributes: jest.fn((...args) => Object.assign({}, ...args)),
+}));
+
+jest.mock('react-dom', () => ({
+  render: jest.fn(),
+}));
+
+describe('CSSMark', () => {
+  describe('configuration', () => {
+    it('has correct name', () => {
+      expect(CSSMark.name).toBe('cssmark');
+    });
+  });
+
+  describe('addOptions', () => {
+    it('returns default options with empty classes array', () => {
+      const options = CSSMark.addOptions();
+
+      expect(options).toHaveProperty('classes');
+      expect(Array.isArray(options.classes)).toBe(true);
+      expect(options.classes).toHaveLength(0);
+    });
+  });
+
+  describe('addAttributes', () => {
+    it('returns class attribute configuration', () => {
+      const attributes = CSSMark.addAttributes();
+
+      expect(attributes).toHaveProperty('class');
+      expect(attributes.class).toHaveProperty('default', null);
+      expect(attributes.class).toHaveProperty('parseHTML');
+      expect(attributes.class).toHaveProperty('renderHTML');
+      expect(typeof attributes.class.parseHTML).toBe('function');
+      expect(typeof attributes.class.renderHTML).toBe('function');
+    });
+
+    it('parseHTML extracts class attribute', () => {
+      const attributes = CSSMark.addAttributes();
+      const mockEl = {
+        getAttribute: jest.fn((attr) => (attr === 'class' ? 'my-class' : null)),
+      };
+
+      const result = attributes.class.parseHTML(mockEl);
+
+      expect(result).toBe('my-class');
+      expect(mockEl.getAttribute).toHaveBeenCalledWith('class');
+    });
+
+    it('renderHTML returns empty object when no class', () => {
+      const attributes = CSSMark.addAttributes();
+      const result = attributes.class.renderHTML({ class: null });
+
+      expect(result).toEqual({});
+    });
+
+    it('renderHTML returns class when present', () => {
+      const attributes = CSSMark.addAttributes();
+      const result = attributes.class.renderHTML({ class: 'my-class' });
+
+      expect(result).toEqual({ class: 'my-class' });
+    });
+  });
+
+  describe('parseHTML', () => {
+    beforeEach(() => {
+      CSSMark.options = { classes: ['allowed-class', 'another-class'] };
+    });
+
+    it('returns array with span[class] selector', () => {
+      const rules = CSSMark.parseHTML();
+
+      expect(Array.isArray(rules)).toBe(true);
+      expect(rules).toHaveLength(1);
+      expect(rules[0]).toHaveProperty('tag', 'span[class]');
+      expect(rules[0]).toHaveProperty('getAttrs');
+    });
+
+    it('matches allowed classes', () => {
+      const rules = CSSMark.parseHTML();
+      const mockEl = {
+        getAttribute: jest.fn(() => 'allowed-class some-other'),
+      };
+
+      const result = rules[0].getAttrs(mockEl);
+
+      expect(result).toEqual({ class: 'allowed-class' });
+    });
+
+    it('returns false for non-allowed classes', () => {
+      const rules = CSSMark.parseHTML();
+      const mockEl = {
+        getAttribute: jest.fn(() => 'not-allowed'),
+      };
+
+      const result = rules[0].getAttrs(mockEl);
+
+      expect(result).toBe(false);
+    });
+
+    it('handles empty class attribute', () => {
+      const rules = CSSMark.parseHTML();
+      const mockEl = {
+        getAttribute: jest.fn(() => ''),
+      };
+
+      const result = rules[0].getAttrs(mockEl);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('renderHTML', () => {
+    it('returns span with merged attributes', () => {
+      const result = CSSMark.renderHTML({
+        HTMLAttributes: { class: 'my-class' },
+      });
+
+      expect(result[0]).toBe('span');
+      expect(result[1]).toEqual({ class: 'my-class' });
+      expect(result[2]).toBe(0);
+    });
+  });
+
+  describe('addCommands', () => {
+    it('returns setCSSClass command', () => {
+      const commands = CSSMark.addCommands();
+
+      expect(commands).toHaveProperty('setCSSClass');
+      expect(typeof commands.setCSSClass).toBe('function');
+    });
+
+    it('returns unsetCSSClass command', () => {
+      const commands = CSSMark.addCommands();
+
+      expect(commands).toHaveProperty('unsetCSSClass');
+      expect(typeof commands.unsetCSSClass).toBe('function');
+    });
+
+    it('returns openCSSClassDialog command', () => {
+      const commands = CSSMark.addCommands();
+
+      expect(commands).toHaveProperty('openCSSClassDialog');
+      expect(typeof commands.openCSSClassDialog).toBe('function');
+    });
+
+    it('setCSSClass sets mark with class name', () => {
+      const context = { name: 'cssmark' };
+      const commands = CSSMark.addCommands.call(context);
+      const mockCommands = {
+        setMark: jest.fn(() => true),
+      };
+
+      const result = commands.setCSSClass('my-class')({ commands: mockCommands });
+
+      expect(mockCommands.setMark).toHaveBeenCalledWith('cssmark', { class: 'my-class' });
+      expect(result).toBe(true);
+    });
+
+    it('unsetCSSClass unsets mark', () => {
+      const context = { name: 'cssmark' };
+      const commands = CSSMark.addCommands.call(context);
+      const mockCommands = {
+        unsetMark: jest.fn(() => true),
+      };
+
+      const result = commands.unsetCSSClass()({ commands: mockCommands });
+
+      expect(mockCommands.unsetMark).toHaveBeenCalledWith('cssmark');
+      expect(result).toBe(true);
+    });
+  });
+});
+
+describe('removeDialogs', () => {
+  it('removes all elements with insert-css-dialog class', () => {
+    const mockElements = [{ remove: jest.fn() }, { remove: jest.fn() }];
+
+    document.querySelectorAll = jest.fn(() => mockElements);
+
+    removeDialogs();
+
+    expect(document.querySelectorAll).toHaveBeenCalledWith('.insert-css-dialog');
+    expect(mockElements[0].remove).toHaveBeenCalled();
+    expect(mockElements[1].remove).toHaveBeenCalled();
+  });
+
+  it('handles no dialogs gracefully', () => {
+    document.querySelectorAll = jest.fn(() => []);
+
+    expect(() => removeDialogs()).not.toThrow();
+  });
+});