@pie-lib/editable-html-tip-tap 2.1.18 → 2.1.20-beta.1

package/src/components/__tests__/InsertImageHandler.test.js

@@ -1,161 +0,0 @@
-import InsertImageHandler from '../image/InsertImageHandler';
-
-describe('InsertImageHandler', () => {
-  const mockNode = {
-    attrs: {},
-    nodeSize: 1,
-  };
-
-  const NODE_POS = 5;
-
-  const nodeInfo = (node = mockNode, pos = NODE_POS) => [node, pos];
-
-  const createMockEditor = () => ({
-    _insertingImage: true,
-    state: {
-      doc: {},
-      tr: {
-        setNodeMarkup: jest.fn((pos, type, attrs) => ({ setNodeMarkup: jest.fn() })),
-        delete: jest.fn((from, to) => ({ delete: jest.fn() })),
-      },
-    },
-    view: {
-      dispatch: jest.fn(),
-    },
-  });
-
-  const mockOnFinish = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('creates handler instance', () => {
-    const editor = createMockEditor();
-    const info = nodeInfo();
-    const handler = new InsertImageHandler(editor, info, mockOnFinish);
-    expect(handler).toBeDefined();
-    expect(handler.editor).toBe(editor);
-    expect(handler.nodeInfo).toBe(info);
-    expect(handler.node).toBe(mockNode);
-    expect(handler.onFinish).toBe(mockOnFinish);
-  });
-
-  it('stores nodePos from nodeInfo tuple', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(mockNode, 42), mockOnFinish);
-    expect(handler.nodePos).toBe(42);
-  });
-
-  it('stores isPasted parameter', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish, true);
-    expect(handler.isPasted).toBe(true);
-  });
-
-  it('defaults isPasted to false', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    expect(handler.isPasted).toBe(false);
-  });
-
-  it('cancel deletes node and calls onFinish', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.cancel();
-    expect(mockOnFinish).toHaveBeenCalledWith(false);
-    expect(editor._insertingImage).toBe(false);
-  });
-
-  it('updateNode dispatches transaction with new attributes', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: { existing: 'value' } }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.updateNode({ newAttr: 'newValue' });
-
-    expect(mockNodeAt).toHaveBeenCalledWith(NODE_POS);
-    expect(editor.view.dispatch).toHaveBeenCalled();
-  });
-
-  it('done calls onFinish with false on error', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation();
-
-    handler.done('error', null);
-
-    expect(consoleLogSpy).toHaveBeenCalledWith('error');
-    expect(mockOnFinish).toHaveBeenCalledWith(false);
-    expect(editor._insertingImage).toBe(false);
-    consoleLogSpy.mockRestore();
-  });
-
-  it('done updates node and calls onFinish with true on success', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: {} }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.done(null, 'http://example.com/image.jpg');
-
-    expect(editor.view.dispatch).toHaveBeenCalled();
-    expect(mockOnFinish).toHaveBeenCalledWith(true);
-    expect(editor._insertingImage).toBe(false);
-  });
-
-  it('fileChosen returns early when no file provided', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.fileChosen(null);
-    expect(editor.view.dispatch).not.toHaveBeenCalled();
-  });
-
-  it('fileChosen saves file and reads it as data URL', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: {} }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
-
-    global.FileReader = jest.fn(function () {
-      this.readAsDataURL = jest.fn(function () {
-        this.result = 'data:image/jpeg;base64,abc123';
-        this.onload();
-      });
-    });
-
-    handler.fileChosen(mockFile);
-
-    expect(handler.chosenFile).toBe(mockFile);
-    expect(editor._insertingImage).toBe(false);
-  });
-
-  it('progress updates node with percent', () => {
-    const editor = createMockEditor();
-    const mockNodeAt = jest.fn(() => ({ attrs: {} }));
-    editor.state.doc.nodeAt = mockNodeAt;
-
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    handler.progress(50, 500, 1000);
-
-    expect(editor.view.dispatch).toHaveBeenCalled();
-  });
-
-  it('getChosenFile returns the chosen file', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    const mockFile = new File(['content'], 'test.jpg', { type: 'image/jpeg' });
-    handler.chosenFile = mockFile;
-
-    expect(handler.getChosenFile()).toBe(mockFile);
-  });
-
-  it('getChosenFile returns null initially', () => {
-    const editor = createMockEditor();
-    const handler = new InsertImageHandler(editor, nodeInfo(), mockOnFinish);
-    expect(handler.getChosenFile()).toBeNull();
-  });
-});

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

@@ -1,293 +0,0 @@
-import React from 'react';
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import { MediaDialog } from '../media/MediaDialog';
-
-global.fetch = jest.fn();
-
-jest.mock('@mui/material/Dialog', () => ({
-  __esModule: true,
-  default: ({ children, open }) => open && <div data-testid="dialog">{children}</div>,
-}));
-
-jest.mock('@mui/material/DialogTitle', () => ({
-  __esModule: true,
-  default: ({ children }) => <div data-testid="dialog-title">{children}</div>,
-}));
-
-jest.mock('@mui/material/DialogContent', () => ({
-  __esModule: true,
-  default: ({ children }) => <div data-testid="dialog-content">{children}</div>,
-}));
-
-jest.mock('@mui/material/DialogContentText', () => ({
-  __esModule: true,
-  default: ({ children }) => <div>{children}</div>,
-}));
-
-jest.mock('@mui/material/DialogActions', () => ({
-  __esModule: true,
-  default: ({ children }) => <div data-testid="dialog-actions">{children}</div>,
-}));
-
-jest.mock('@mui/material/Button', () => ({
-  __esModule: true,
-  default: ({ children, onClick, disabled }) => (
-    <button onClick={onClick} disabled={disabled}>
-      {children}
-    </button>
-  ),
-}));
-
-jest.mock('@mui/material/TextField', () => ({
-  __esModule: true,
-  default: ({ value, onChange, label, placeholder, inputProps }) => (
-    <div>
-      <label>{label}</label>
-      <input
-        value={value === undefined ? '' : value}
-        onChange={onChange}
-        placeholder={placeholder}
-        aria-label={label}
-        {...inputProps}
-      />
-    </div>
-  ),
-}));
-
-jest.mock('@mui/material/Tabs', () => ({
-  __esModule: true,
-  default: ({ children, value, onChange }) => (
-    <div data-testid="tabs" data-value={value}>
-      {children}
-    </div>
-  ),
-}));
-
-jest.mock('@mui/material/Tab', () => ({
-  __esModule: true,
-  default: ({ label, onClick }) => (
-    <button onClick={onClick} data-testid="tab">
-      {label}
-    </button>
-  ),
-}));
-
-jest.mock('@mui/material/Typography', () => ({
-  __esModule: true,
-  default: ({ children }) => <div>{children}</div>,
-}));
-
-jest.mock('@mui/material/IconButton', () => ({
-  __esModule: true,
-  default: ({ children, onClick }) => <button onClick={onClick}>{children}</button>,
-}));
-
-jest.mock('@mui/icons-material/Delete', () => ({
-  __esModule: true,
-  default: () => <svg data-testid="delete-icon" />,
-}));
-
-describe('MediaDialog', () => {
-  const defaultProps = {
-    open: true,
-    handleClose: jest.fn(),
-    type: 'video',
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    global.fetch.mockClear();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(<MediaDialog {...defaultProps} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders dialog title for video', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} type="video" />);
-    expect(getByText('Insert Video')).toBeInTheDocument();
-  });
-
-  it('renders dialog title for audio', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} type="audio" />);
-    expect(getByText('Insert Audio')).toBeInTheDocument();
-  });
-
-  it('renders URL input field', () => {
-    const { getByLabelText } = render(<MediaDialog {...defaultProps} />);
-    expect(getByLabelText('URL')).toBeInTheDocument();
-  });
-
-  it('renders Cancel button', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} />);
-    expect(getByText('Cancel')).toBeInTheDocument();
-  });
-
-  it('renders Insert button', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} />);
-    expect(getByText('Insert')).toBeInTheDocument();
-  });
-
-  it('calls handleClose with false when Cancel is clicked', () => {
-    const handleClose = jest.fn();
-    const { getByText } = render(<MediaDialog {...defaultProps} handleClose={handleClose} />);
-    fireEvent.click(getByText('Cancel'));
-    expect(handleClose).toHaveBeenCalledWith(false);
-  });
-
-  it('disables Insert button when URL is invalid', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} />);
-    const insertButton = getByText('Insert');
-    expect(insertButton).toBeDisabled();
-  });
-
-  it('shows video properties fields for video type', () => {
-    const { getByLabelText } = render(<MediaDialog {...defaultProps} type="video" />);
-    expect(getByLabelText('Width')).toBeInTheDocument();
-    expect(getByLabelText('Height')).toBeInTheDocument();
-  });
-
-  it('shows starts and ends fields for video', async () => {
-    const { getByLabelText, getByPlaceholderText } = render(
-      <MediaDialog {...defaultProps} type="video" url="https://youtube.com/watch?v=abc" />,
-    );
-    await waitFor(() => {
-      const urlInput = getByPlaceholderText('Paste URL of video...');
-      fireEvent.change(urlInput, { target: { value: 'https://youtube.com/watch?v=abc123' } });
-    });
-  });
-
-  it('updates width on change', () => {
-    const { getByLabelText } = render(<MediaDialog {...defaultProps} type="video" />);
-    const widthInput = getByLabelText('Width');
-    fireEvent.change(widthInput, { target: { value: '800' } });
-    expect(widthInput.value).toBe('800');
-  });
-
-  it('updates height on change', () => {
-    const { getByLabelText } = render(<MediaDialog {...defaultProps} type="video" />);
-    const heightInput = getByLabelText('Height');
-    fireEvent.change(heightInput, { target: { value: '600' } });
-    expect(heightInput.value).toBe('600');
-  });
-
-  it('has default width of 560', () => {
-    const { getByLabelText } = render(<MediaDialog {...defaultProps} type="video" />);
-    const widthInput = getByLabelText('Width');
-    expect(widthInput.value).toBe('560');
-  });
-
-  it('has default height of 315', () => {
-    const { getByLabelText } = render(<MediaDialog {...defaultProps} type="video" />);
-    const heightInput = getByLabelText('Height');
-    expect(heightInput.value).toBe('315');
-  });
-
-  it('shows Insert URL tab', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} type="video" />);
-    expect(getByText('Insert YouTube, Vimeo, or Google Drive URL')).toBeInTheDocument();
-  });
-
-  it('shows Insert URL tab for audio', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} type="audio" />);
-    expect(getByText('Insert SoundCloud URL')).toBeInTheDocument();
-  });
-
-  it('shows Upload file tab when uploadSoundSupport is provided', () => {
-    const uploadSoundSupport = {
-      add: jest.fn(),
-      delete: jest.fn(),
-    };
-    const { getByText } = render(
-      <MediaDialog {...defaultProps} type="audio" uploadSoundSupport={uploadSoundSupport} />,
-    );
-    expect(getByText('Upload file')).toBeInTheDocument();
-  });
-
-  it('does not show Upload file tab for video', () => {
-    const uploadSoundSupport = {
-      add: jest.fn(),
-      delete: jest.fn(),
-    };
-    const { queryByText } = render(
-      <MediaDialog {...defaultProps} type="video" uploadSoundSupport={uploadSoundSupport} />,
-    );
-    expect(queryByText('Upload file')).not.toBeInTheDocument();
-  });
-
-  it('changes tab on tab click', () => {
-    const uploadSoundSupport = {
-      add: jest.fn(),
-      delete: jest.fn(),
-    };
-    const { getByText } = render(
-      <MediaDialog {...defaultProps} type="audio" uploadSoundSupport={uploadSoundSupport} />,
-    );
-    const insertUrlTab = getByText('Insert SoundCloud URL');
-    fireEvent.click(insertUrlTab);
-    expect(insertUrlTab).toBeInTheDocument();
-  });
-
-  it('shows Insert button text when not editing', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} edit={false} />);
-    expect(getByText('Insert')).toBeInTheDocument();
-  });
-
-  it('shows Update button text when editing', () => {
-    const { getByText } = render(<MediaDialog {...defaultProps} edit={true} />);
-    expect(getByText('Update')).toBeInTheDocument();
-  });
-
-  it('accepts custom src prop', () => {
-    const { container } = render(<MediaDialog {...defaultProps} src="https://example.com/video" />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts custom url prop', () => {
-    const { getByPlaceholderText } = render(<MediaDialog {...defaultProps} url="https://youtube.com/watch?v=test" />);
-    const urlInput = getByPlaceholderText('Paste URL of video...');
-    expect(urlInput.value).toBe('https://youtube.com/watch?v=test');
-  });
-
-  it('accepts custom starts prop', () => {
-    const { container } = render(
-      <MediaDialog {...defaultProps} starts={10} type="video" url="https://youtube.com/watch?v=test" />,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('accepts custom ends prop', () => {
-    const { container } = render(
-      <MediaDialog {...defaultProps} ends={60} type="video" url="https://youtube.com/watch?v=test" />,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('disables portal when disablePortal is true', () => {
-    const { container } = render(<MediaDialog {...defaultProps} disablePortal={true} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('handles URL change for YouTube', async () => {
-    const { getByPlaceholderText, container } = render(<MediaDialog {...defaultProps} type="video" />);
-    const urlInput = getByPlaceholderText('Paste URL of video...');
-    fireEvent.change(urlInput, { target: { value: 'https://youtube.com/watch?v=abc123' } });
-    // Just verify the input rendered and change event didn't throw
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders file upload input when on upload file tab', () => {
-    const uploadSoundSupport = {
-      add: jest.fn(),
-      delete: jest.fn(),
-    };
-    const { getByText, container } = render(
-      <MediaDialog {...defaultProps} type="audio" uploadSoundSupport={uploadSoundSupport} />,
-    );
-    const uploadTab = getByText('Upload file');
-    fireEvent.click(uploadTab);
-    const fileInput = container.querySelector('input[type="file"]');
-    expect(fileInput).toBeInTheDocument();
-  });
-});

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

@@ -1,74 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import MediaToolbar from '../media/MediaToolbar';
-
-describe('MediaToolbar', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders Edit Settings text', () => {
-    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    expect(getByText('Edit Settings')).toBeInTheDocument();
-  });
-
-  it('renders Remove text', () => {
-    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    expect(getByText('Remove')).toBeInTheDocument();
-  });
-
-  it('calls onEdit when Edit Settings is clicked', () => {
-    const onEdit = jest.fn();
-    const { getByText } = render(<MediaToolbar onEdit={onEdit} onRemove={jest.fn()} />);
-    fireEvent.click(getByText('Edit Settings'));
-    expect(onEdit).toHaveBeenCalled();
-  });
-
-  it('calls onRemove when Remove is clicked', () => {
-    const onRemove = jest.fn();
-    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={onRemove} />);
-    fireEvent.click(getByText('Remove'));
-    expect(onRemove).toHaveBeenCalled();
-  });
-
-  it('hides Edit Settings when hideEdit is true', () => {
-    const { queryByText } = render(<MediaToolbar hideEdit={true} onEdit={jest.fn()} onRemove={jest.fn()} />);
-    expect(queryByText('Edit Settings')).not.toBeInTheDocument();
-  });
-
-  it('shows Edit Settings when hideEdit is false', () => {
-    const { getByText } = render(<MediaToolbar hideEdit={false} onEdit={jest.fn()} onRemove={jest.fn()} />);
-    expect(getByText('Edit Settings')).toBeInTheDocument();
-  });
-
-  it('applies cursor pointer style', () => {
-    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    const editButton = getByText('Edit Settings');
-    expect(editButton).toHaveStyle({ cursor: 'pointer' });
-  });
-
-  it('has border on Edit Settings container', () => {
-    const { getByText } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    const editButton = getByText('Edit Settings');
-    expect(editButton).toHaveStyle({ borderWidth: '0 2px 0 0' });
-  });
-
-  it('applies white background', () => {
-    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    const root = container.firstChild;
-    expect(root).toHaveStyle({ background: '#fff' });
-  });
-
-  it('applies box shadow', () => {
-    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    const root = container.firstChild;
-    expect(root).toHaveStyle({ boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)' });
-  });
-
-  it('displays inline-flex', () => {
-    const { container } = render(<MediaToolbar onEdit={jest.fn()} onRemove={jest.fn()} />);
-    const root = container.firstChild;
-    expect(root).toHaveStyle({ display: 'inline-flex' });
-  });
-});

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

@@ -1,81 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import MediaWrapper from '../media/MediaWrapper';
-
-describe('MediaWrapper', () => {
-  it('renders without crashing', () => {
-    const { container } = render(<MediaWrapper>Content</MediaWrapper>);
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <MediaWrapper>
-        <div>Test Content</div>
-      </MediaWrapper>,
-    );
-    expect(getByText('Test Content')).toBeInTheDocument();
-  });
-
-  it('applies default width of 300', () => {
-    const { container } = render(<MediaWrapper>Content</MediaWrapper>);
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveStyle({ width: '300px' });
-  });
-
-  it('applies custom width from props', () => {
-    const { container } = render(<MediaWrapper width={500}>Content</MediaWrapper>);
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveStyle({ width: '500px' });
-  });
-
-  it('applies string width', () => {
-    const { container } = render(<MediaWrapper width="50%">Content</MediaWrapper>);
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveStyle({ width: '50%' });
-  });
-
-  it('applies editor styles when editor prop is true', () => {
-    const { container } = render(<MediaWrapper editor={true}>Content</MediaWrapper>);
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveStyle({ display: 'inline-block', overflow: 'hidden' });
-  });
-
-  it('does not apply editor styles when editor prop is false', () => {
-    const { container } = render(<MediaWrapper editor={false}>Content</MediaWrapper>);
-    const wrapper = container.firstChild;
-    expect(wrapper).not.toHaveStyle({ display: 'inline-block' });
-  });
-
-  it('has relative positioning', () => {
-    const { container } = render(<MediaWrapper>Content</MediaWrapper>);
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveStyle({ position: 'relative' });
-  });
-
-  it('renders multiple children', () => {
-    const { getByText } = render(
-      <MediaWrapper>
-        <div>First</div>
-        <div>Second</div>
-      </MediaWrapper>,
-    );
-    expect(getByText('First')).toBeInTheDocument();
-    expect(getByText('Second')).toBeInTheDocument();
-  });
-
-  it('passes additional props through', () => {
-    const { container } = render(
-      <MediaWrapper data-testid="custom" className="custom-class">
-        Content
-      </MediaWrapper>,
-    );
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveAttribute('data-testid', 'custom');
-  });
-
-  it('renders without children', () => {
-    const { container } = render(<MediaWrapper />);
-    expect(container.firstChild).toBeInTheDocument();
-  });
-});