@pie-lib/editable-html-tip-tap 2.1.1 → 2.1.2-next.0

package/src/extensions/__tests__/media-node-view.test.jsx

@@ -1,298 +0,0 @@
-// Create a mockable insertDialog function
-const mockInsertDialog = jest.fn();
-
-// Mock react-dom BEFORE any imports that depend on it
-jest.mock('react-dom', () => ({
-  ...jest.requireActual('react-dom'),
-  render: jest.fn(),
-}));
-
-// Mock the insertDialog function in the media module
-jest.mock('../media', () => {
-  const actual = jest.requireActual('../media');
-  return {
-    __esModule: true,
-    ...actual,
-    default: actual.default, // Preserve the default export
-    insertDialog: (...args) => mockInsertDialog(...args),
-  };
-});
-
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import MediaNodeView from '../media';
-
-jest.mock('@tiptap/core', () => ({
-  Node: { create: jest.fn((config) => config) },
-  mergeAttributes: jest.fn((...args) => Object.assign({}, ...args)),
-}));
-
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children }) => <div data-testid="node-view-wrapper">{children}</div>,
-  ReactNodeViewRenderer: jest.fn((component) => component),
-}));
-
-jest.mock('../../components/media/MediaDialog', () => ({
-  __esModule: true,
-  default: jest.fn(() => <div data-testid="media-dialog" />),
-}));
-
-jest.mock('../../components/media/MediaToolbar', () => ({
-  __esModule: true,
-  default: jest.fn(({ onEdit, onRemove }) => (
-    <div data-testid="media-toolbar">
-      <button onClick={onEdit} data-testid="edit-button">
-        Edit Settings
-      </button>
-      <button onClick={onRemove} data-testid="remove-button">
-        Remove
-      </button>
-    </div>
-  )),
-}));
-
-describe('MediaNodeView Component', () => {
-  let mockEditor;
-  let mockUpdateAttributes;
-  let mockDeleteNode;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockInsertDialog.mockClear();
-
-    // Clean up any existing dialogs in the DOM
-    document.body.innerHTML = '';
-
-    mockEditor = {
-      chain: jest.fn(() => ({
-        focus: jest.fn(() => ({
-          run: jest.fn(),
-        })),
-      })),
-    };
-
-    mockUpdateAttributes = jest.fn();
-    mockDeleteNode = jest.fn();
-  });
-
-  afterEach(() => {
-    // Clean up DOM after each test
-    document.body.innerHTML = '';
-  });
-
-  describe('dialog auto-opening behavior - verifies the fix', () => {
-    it('should NOT open dialog on mount when audio has existing src', () => {
-      const node = {
-        attrs: {
-          type: 'audio',
-          tag: 'audio',
-          src: 'https://example.com/audio.mp3',
-          width: null,
-          height: null,
-        },
-      };
-
-      // This should render without opening any dialogs
-      const { container } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      // Verify the component rendered successfully
-      expect(container.querySelector('audio')).toBeTruthy();
-      // Verify mockInsertDialog was not called (dialog didn't open)
-      expect(mockInsertDialog).not.toHaveBeenCalled();
-      // Verify deleteNode was not called (media was not removed)
-      expect(mockDeleteNode).not.toHaveBeenCalled();
-    });
-
-    it('should NOT open dialog on mount when video has existing src', () => {
-      const node = {
-        attrs: {
-          type: 'video',
-          tag: 'iframe',
-          src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
-          width: '640',
-          height: '480',
-        },
-      };
-
-      // This should render without opening any dialogs
-      const { container } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      // Verify the component rendered successfully
-      expect(container.querySelector('iframe')).toBeTruthy();
-      // Verify mockInsertDialog was not called (dialog didn't open)
-      expect(mockInsertDialog).not.toHaveBeenCalled();
-      // Verify deleteNode was not called (media was not removed)
-      expect(mockDeleteNode).not.toHaveBeenCalled();
-    });
-
-    it('should render existing media with empty string src without opening dialog', () => {
-      const node = {
-        attrs: {
-          type: 'audio',
-          tag: 'audio',
-          src: '', // Empty string (falsy but not null)
-          width: null,
-          height: null,
-        },
-      };
-
-      const { container } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      // Empty string is falsy, so dialog WOULD open with current implementation
-      // This documents current behavior
-      expect(container).toBeTruthy();
-    });
-  });
-
-  describe('toolbar interaction', () => {
-    it('should render edit and remove buttons', () => {
-      const node = {
-        attrs: {
-          type: 'audio',
-          tag: 'audio',
-          src: 'https://example.com/audio.mp3',
-        },
-      };
-
-      const { getByTestId } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      expect(getByTestId('edit-button')).toBeTruthy();
-      expect(getByTestId('remove-button')).toBeTruthy();
-    });
-  });
-
-  describe('rendering', () => {
-    it('should render audio element when tag is audio', () => {
-      const node = {
-        attrs: {
-          type: 'audio',
-          tag: 'audio',
-          src: 'https://example.com/audio.mp3',
-        },
-      };
-
-      const { container } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      const audio = container.querySelector('audio');
-      expect(audio).toBeTruthy();
-      const source = audio.querySelector('source');
-      expect(source.getAttribute('src')).toBe('https://example.com/audio.mp3');
-    });
-
-    it('should render iframe when tag is iframe', () => {
-      const node = {
-        attrs: {
-          type: 'video',
-          tag: 'iframe',
-          src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
-          width: '640',
-          height: '480',
-        },
-      };
-
-      const { container } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      const iframe = container.querySelector('iframe');
-      expect(iframe).toBeTruthy();
-      expect(iframe.getAttribute('src')).toBe('https://www.youtube.com/embed/dQw4w9WgXcQ');
-      expect(iframe.getAttribute('width')).toBe('640');
-      expect(iframe.getAttribute('height')).toBe('480');
-    });
-
-    it('should render MediaToolbar', () => {
-      const node = {
-        attrs: {
-          type: 'audio',
-          tag: 'audio',
-          src: 'https://example.com/audio.mp3',
-        },
-      };
-
-      const { getByTestId } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      expect(getByTestId('media-toolbar')).toBeTruthy();
-      expect(getByTestId('edit-button')).toBeTruthy();
-      expect(getByTestId('remove-button')).toBeTruthy();
-    });
-
-    it('should call deleteNode when remove button is clicked', () => {
-      const node = {
-        attrs: {
-          type: 'audio',
-          tag: 'audio',
-          src: 'https://example.com/audio.mp3',
-        },
-      };
-
-      const { getByTestId } = render(
-        <MediaNodeView
-          editor={mockEditor}
-          node={node}
-          updateAttributes={mockUpdateAttributes}
-          deleteNode={mockDeleteNode}
-          options={{}}
-        />,
-      );
-
-      fireEvent.click(getByTestId('remove-button'));
-
-      expect(mockDeleteNode).toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,271 +0,0 @@
-import { insertDialog, Media } from '../media';
-
-jest.mock('@tiptap/core', () => ({
-  Node: { create: jest.fn((config) => config) },
-  mergeAttributes: jest.fn((...args) => Object.assign({}, ...args)),
-}));
-
-jest.mock('@tiptap/react', () => ({
-  NodeViewWrapper: ({ children }) => <div data-testid="node-view-wrapper">{children}</div>,
-  ReactNodeViewRenderer: jest.fn((component) => component),
-}));
-
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
-}));
-
-jest.mock('../../components/media/MediaDialog', () => ({
-  __esModule: true,
-  default: jest.fn(() => <div data-testid="media-dialog" />),
-}));
-
-jest.mock('../../components/media/MediaToolbar', () => ({
-  __esModule: true,
-  default: jest.fn(() => <div data-testid="media-toolbar" />),
-}));
-
-describe('Media', () => {
-  describe('configuration', () => {
-    it('has correct name', () => {
-      expect(Media.name).toBe('media');
-    });
-
-    it('is inline', () => {
-      expect(Media.inline).toBe(true);
-    });
-
-    it('is in inline group', () => {
-      expect(Media.group).toBe('inline');
-    });
-
-    it('is atomic', () => {
-      expect(Media.atom).toBe(true);
-    });
-  });
-
-  describe('addAttributes', () => {
-    it('returns all media attributes with defaults', () => {
-      const attributes = Media.addAttributes();
-
-      expect(attributes).toHaveProperty('type');
-      expect(attributes).toHaveProperty('src');
-      expect(attributes).toHaveProperty('width');
-      expect(attributes).toHaveProperty('height');
-      expect(attributes).toHaveProperty('title');
-      expect(attributes).toHaveProperty('starts');
-      expect(attributes).toHaveProperty('ends');
-      expect(attributes).toHaveProperty('editing');
-      expect(attributes).toHaveProperty('tag');
-      expect(attributes).toHaveProperty('url');
-
-      expect(attributes.type.default).toBe('video');
-      expect(attributes.src.default).toBeNull();
-      expect(attributes.tag.default).toBe('iframe');
-      expect(attributes.editing.default).toBe(false);
-    });
-  });
-
-  describe('parseHTML', () => {
-    it('returns parsing rules for iframe and audio', () => {
-      const rules = Media.parseHTML();
-
-      expect(Array.isArray(rules)).toBe(true);
-      expect(rules).toHaveLength(2);
-      expect(rules[0].tag).toBe('iframe[data-type="video"]');
-      expect(rules[1].tag).toBe('audio');
-    });
-
-    it('parses video iframe attributes', () => {
-      const rules = Media.parseHTML();
-      const mockEl = {
-        getAttribute: jest.fn((attr) => {
-          const attrs = {
-            src: 'https://video.com/embed',
-            width: '640',
-            height: '480',
-          };
-          return attrs[attr] || null;
-        }),
-        dataset: {
-          title: 'Test Video',
-          starts: '10',
-          ends: '60',
-          url: 'https://video.com/watch',
-        },
-      };
-
-      const result = rules[0].getAttrs(mockEl);
-
-      expect(result.type).toBe('video');
-      expect(result.tag).toBe('iframe');
-      expect(result.src).toBe('https://video.com/embed');
-      expect(result.width).toBe('640');
-      expect(result.height).toBe('480');
-      expect(result.title).toBe('Test Video');
-    });
-
-    it('parses audio element attributes', () => {
-      const rules = Media.parseHTML();
-      const mockEl = {
-        querySelector: jest.fn(() => ({
-          getAttribute: jest.fn(() => 'https://audio.com/file.mp3'),
-        })),
-      };
-
-      const result = rules[1].getAttrs(mockEl);
-
-      expect(result.type).toBe('audio');
-      expect(result.tag).toBe('audio');
-      expect(result.src).toBe('https://audio.com/file.mp3');
-    });
-  });
-
-  describe('renderHTML', () => {
-    it('renders audio element for audio type', () => {
-      const HTMLAttributes = {
-        tag: 'audio',
-        src: 'test.mp3',
-      };
-
-      const result = Media.renderHTML({ HTMLAttributes });
-
-      expect(result[0]).toBe('audio');
-      expect(result[1]).toEqual({ controls: 'controls', controlsList: 'nodownload' });
-      expect(result[2][0]).toBe('source');
-      expect(result[2][1]).toEqual({ src: 'test.mp3', type: 'audio/mp3' });
-    });
-
-    it('renders iframe for video type', () => {
-      const HTMLAttributes = {
-        tag: 'iframe',
-        src: 'https://video.com/embed',
-        width: '640',
-        height: '480',
-      };
-
-      const result = Media.renderHTML({ HTMLAttributes });
-
-      expect(result[0]).toBe('iframe');
-      expect(result[1]).toHaveProperty('data-type', 'video');
-      expect(result[1]).toHaveProperty('frameborder', '0');
-      expect(result[1]).toHaveProperty('src', 'https://video.com/embed');
-      expect(result[1]).toHaveProperty('width', '640');
-      expect(result[1]).toHaveProperty('height', '480');
-    });
-
-    it('renders iframe without dimensions if not provided', () => {
-      const HTMLAttributes = {
-        tag: 'iframe',
-        src: 'https://video.com/embed',
-      };
-
-      const result = Media.renderHTML({ HTMLAttributes });
-
-      expect(result[1]).not.toHaveProperty('width');
-      expect(result[1]).not.toHaveProperty('height');
-    });
-  });
-
-  describe('addCommands', () => {
-    it('returns insertMedia and updateMedia commands', () => {
-      const commands = Media.addCommands();
-
-      expect(commands).toHaveProperty('insertMedia');
-      expect(commands).toHaveProperty('updateMedia');
-      expect(typeof commands.insertMedia).toBe('function');
-      expect(typeof commands.updateMedia).toBe('function');
-    });
-
-    it('insertMedia inserts content with attributes', () => {
-      const context = { name: 'media' };
-      const commands = Media.addCommands.call(context);
-      const mockCommands = {
-        insertContent: jest.fn(() => true),
-      };
-      const attrs = { type: 'video', src: 'test.mp4' };
-
-      const result = commands.insertMedia(attrs)({ commands: mockCommands });
-
-      expect(mockCommands.insertContent).toHaveBeenCalledWith({
-        type: 'media',
-        attrs,
-      });
-      expect(result).toBe(true);
-    });
-
-    it('updateMedia updates attributes', () => {
-      const context = { name: 'media' };
-      const commands = Media.addCommands.call(context);
-      const mockCommands = {
-        updateAttributes: jest.fn(() => true),
-      };
-      const attrs = { width: '800' };
-
-      const result = commands.updateMedia(attrs)({ commands: mockCommands });
-
-      expect(mockCommands.updateAttributes).toHaveBeenCalledWith('media', attrs);
-      expect(result).toBe(true);
-    });
-  });
-
-  describe('addNodeView', () => {
-    it('returns ReactNodeViewRenderer result', () => {
-      const result = Media.addNodeView();
-
-      expect(result).toBeDefined();
-    });
-  });
-});
-
-describe('insertDialog', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    document.body.style.overflow = 'auto';
-  });
-
-  it('creates dialog element', () => {
-    const mockCallback = jest.fn();
-    const props = {
-      type: 'video',
-      callback: mockCallback,
-      options: {},
-    };
-
-    insertDialog(props);
-
-    const dialog = document.querySelector('.insert-media-dialog');
-    expect(dialog).toBeTruthy();
-  });
-
-  it('sets body overflow to hidden', () => {
-    const mockCallback = jest.fn();
-    const props = {
-      type: 'video',
-      callback: mockCallback,
-      options: {},
-    };
-
-    insertDialog(props);
-
-    expect(document.body.style.overflow).toBe('hidden');
-  });
-
-  it('removes previous dialogs', () => {
-    const existingDialog = document.createElement('div');
-    existingDialog.className = 'insert-media-dialog';
-    document.body.appendChild(existingDialog);
-
-    const mockCallback = jest.fn();
-    const props = {
-      type: 'video',
-      callback: mockCallback,
-      options: {},
-    };
-
-    insertDialog(props);
-
-    const dialogs = document.querySelectorAll('.insert-media-dialog');
-    expect(dialogs).toHaveLength(1);
-  });
-});
-