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

package/src/extensions/__tests__/custom-toolbar-wrapper.test.jsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import CustomToolbarWrapper from '../custom-toolbar-wrapper';
-
-jest.mock('../../components/common/done-button', () => ({
-  DoneButton: ({ onClick }) => (
-    <button data-testid="done-button" onClick={onClick}>
-      Done
-    </button>
-  ),
-}));
-
-jest.mock('@mui/icons-material/Delete', () => ({
-  __esModule: true,
-  default: () => <span data-testid="delete-icon">Delete</span>,
-}));
-
-describe('CustomToolbarWrapper', () => {
-  const mockOnDone = jest.fn();
-  const mockOnDelete = jest.fn();
-  const defaultToolbarOpts = {
-    position: 'bottom',
-    alignment: 'left',
-    alwaysVisible: false,
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders without crashing', () => {
-    const { container } = render(
-      <CustomToolbarWrapper showDone={false} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-    expect(container).toBeInTheDocument();
-  });
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <CustomToolbarWrapper showDone={false} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-    expect(getByText('Test content')).toBeInTheDocument();
-  });
-
-  it('does not show done button when showDone is false', () => {
-    const { queryByTestId } = render(
-      <CustomToolbarWrapper showDone={false} onDone={mockOnDone} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-    expect(queryByTestId('done-button')).not.toBeInTheDocument();
-  });
-
-  it('shows done button when showDone is true', () => {
-    const { getByTestId } = render(
-      <CustomToolbarWrapper showDone={true} onDone={mockOnDone} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-    expect(getByTestId('done-button')).toBeInTheDocument();
-  });
-
-  it('calls onDone when done button is clicked', () => {
-    const { getByTestId } = render(
-      <CustomToolbarWrapper showDone={true} onDone={mockOnDone} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-
-    const doneButton = getByTestId('done-button');
-    fireEvent.click(doneButton);
-
-    expect(mockOnDone).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not show delete button when deletable is false', () => {
-    const { queryByTestId } = render(
-      <CustomToolbarWrapper deletable={false} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-    expect(queryByTestId('delete-icon')).not.toBeInTheDocument();
-  });
-
-  it('shows delete button when deletable is true', () => {
-    const { getByTestId } = render(
-      <CustomToolbarWrapper deletable={true} onDelete={mockOnDelete} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-    expect(getByTestId('delete-icon')).toBeInTheDocument();
-  });
-
-  it('calls onDelete when delete button is clicked', () => {
-    const { getByLabelText } = render(
-      <CustomToolbarWrapper deletable={true} onDelete={mockOnDelete} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-
-    const deleteButton = getByLabelText('Delete');
-    fireEvent.mouseDown(deleteButton);
-
-    expect(mockOnDelete).toHaveBeenCalledTimes(1);
-  });
-
-  it('applies right alignment from toolbarOpts', () => {
-    const toolbarOpts = {
-      ...defaultToolbarOpts,
-      alignment: 'right',
-    };
-
-    const { container } = render(
-      <CustomToolbarWrapper toolbarOpts={toolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-
-    const toolbar = container.querySelector('.pie-toolbar');
-    expect(toolbar).toHaveStyle({ right: '0' });
-  });
-
-  it('applies autoWidth when specified', () => {
-    const { container } = render(
-      <CustomToolbarWrapper autoWidth={true} toolbarOpts={defaultToolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-
-    const toolbar = container.querySelector('.pie-toolbar');
-    expect(toolbar).toHaveStyle({ width: 'auto' });
-  });
-
-  it('applies minWidth from toolbarOpts', () => {
-    const toolbarOpts = {
-      ...defaultToolbarOpts,
-      minWidth: '300px',
-    };
-
-    const { container } = render(
-      <CustomToolbarWrapper toolbarOpts={toolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-
-    const toolbar = container.querySelector('.pie-toolbar');
-    expect(toolbar).toHaveStyle({ minWidth: '300px' });
-  });
-
-  it('hides toolbar when isHidden is true', () => {
-    const toolbarOpts = {
-      ...defaultToolbarOpts,
-      isHidden: true,
-    };
-
-    const { container } = render(
-      <CustomToolbarWrapper toolbarOpts={toolbarOpts}>
-        <div>Test content</div>
-      </CustomToolbarWrapper>,
-    );
-
-    const toolbar = container.querySelector('.pie-toolbar');
-    expect(toolbar).toHaveStyle({ visibility: 'hidden' });
-  });
-
-  it('renders multiple children', () => {
-    const { getByText } = render(
-      <CustomToolbarWrapper showDone={false} toolbarOpts={defaultToolbarOpts}>
-        <div>First child</div>
-        <div>Second child</div>
-      </CustomToolbarWrapper>,
-    );
-    expect(getByText('First child')).toBeInTheDocument();
-    expect(getByText('Second child')).toBeInTheDocument();
-  });
-});

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

@@ -1,87 +0,0 @@
-import { DivNode } from '../div-node';
-
-jest.mock('@tiptap/core', () => ({
-  Node: {
-    create: jest.fn((config) => config),
-  },
-}));
-
-describe('DivNode', () => {
-  describe('configuration', () => {
-    it('has correct name', () => {
-      expect(DivNode.name).toBe('div');
-    });
-
-    it('is block level', () => {
-      expect(DivNode.group).toBe('block');
-      expect(DivNode.content).toBe('inline*');
-    });
-  });
-
-  describe('parseHTML', () => {
-    it('parses <div> tags', () => {
-      const rules = DivNode.parseHTML();
-
-      expect(Array.isArray(rules)).toBe(true);
-      expect(rules).toHaveLength(1);
-      expect(rules[0]).toHaveProperty('tag', 'div');
-    });
-  });
-
-  describe('renderHTML', () => {
-    it('renders a <div> tag', () => {
-      const result = DivNode.renderHTML({ HTMLAttributes: { class: 'foo' } });
-
-      expect(result[0]).toBe('div');
-      expect(result[1]).toEqual({ class: 'foo' });
-    });
-  });
-
-  describe('addKeyboardShortcuts', () => {
-    it('does nothing when current block is not div', () => {
-      const mockEditor = {
-        state: {
-          selection: {
-            $from: {
-              parent: { type: { name: 'paragraph' } },
-            },
-          },
-        },
-      };
-
-      const shortcuts = DivNode.addKeyboardShortcuts.call({ editor: mockEditor });
-      const handled = shortcuts.Enter();
-
-      expect(handled).toBe(false);
-    });
-
-    it('turns div into paragraph and splits when Enter is pressed in a div', () => {
-      const chain = {
-        focus: jest.fn(() => chain),
-        setNode: jest.fn(() => chain),
-        splitBlock: jest.fn(() => chain),
-        run: jest.fn(() => true),
-      };
-
-      const mockEditor = {
-        state: {
-          selection: {
-            $from: {
-              parent: { type: { name: 'div' } },
-            },
-          },
-        },
-        chain: () => chain,
-      };
-
-      const shortcuts = DivNode.addKeyboardShortcuts.call({ editor: mockEditor });
-      const handled = shortcuts.Enter();
-
-      expect(chain.focus).toHaveBeenCalled();
-      expect(chain.setNode).toHaveBeenCalledWith('paragraph');
-      expect(chain.splitBlock).toHaveBeenCalled();
-      expect(chain.run).toHaveBeenCalled();
-      expect(handled).toBe(true);
-    });
-  });
-});

package/src/extensions/__tests__/ensure-empty-root-div.test.js

@@ -1,57 +0,0 @@
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import { DivNode } from '../div-node';
-import { EnsureEmptyRootIsDiv } from '../ensure-empty-root-div';
-
-/** Match EditableHtml so TrailingNode does not add a second empty block next to an empty paragraph. */
-const starterKitConfigured = StarterKit.configure({
-  trailingNode: {
-    node: 'paragraph',
-    notAfter: ['paragraph', 'div'],
-  },
-});
-
-describe('EnsureEmptyRootIsDiv', () => {
-  const extensions = [starterKitConfigured, DivNode, EnsureEmptyRootIsDiv];
-
-  let editor;
-
-  afterEach(() => {
-    if (editor) {
-      editor.destroy();
-      editor = null;
-    }
-  });
-
-  it('replaces a lone root paragraph with an empty div after select-all and delete (full delete flow)', () => {
-    editor = new Editor({
-      extensions,
-      content: '<p>hello</p>',
-    });
-
-    editor.chain().focus().selectAll().deleteSelection().run();
-
-    expect(editor.state.doc.childCount).toBe(1);
-    expect(editor.state.doc.firstChild.type.name).toBe('div');
-    expect(editor.state.doc.firstChild.textContent).toBe('');
-  });
-
-  it('does not replace a root paragraph that still has text', () => {
-    editor = new Editor({
-      extensions,
-      content: '<p>x</p>',
-    });
-
-    expect(editor.state.doc.firstChild.type.name).toBe('paragraph');
-  });
-
-  it('does not run when there is more than one top-level block', () => {
-    editor = new Editor({
-      extensions,
-      content: '<p>a</p><p>b</p>',
-    });
-
-    expect(editor.state.doc.childCount).toBe(2);
-    expect(editor.state.doc.firstChild.type.name).toBe('paragraph');
-  });
-});

package/src/extensions/__tests__/ensure-list-item-content-is-div.test.js

@@ -1,44 +0,0 @@
-import { EnsureListItemContentIsDiv } from '../ensure-list-item-content-is-div';
-
-describe('EnsureListItemContentIsDiv', () => {
-  it('registers a ProseMirror plugin that rewrites listItem paragraph children to div', () => {
-    const plugins = EnsureListItemContentIsDiv.config.addProseMirrorPlugins();
-    expect(Array.isArray(plugins)).toBe(true);
-    expect(plugins).toHaveLength(1);
-
-    const plugin = plugins[0];
-    const divType = { name: 'div' };
-    const tr = { setNodeMarkup: jest.fn() };
-
-    const paragraphChild = {
-      type: { name: 'paragraph' },
-      attrs: { class: 'x' },
-      nodeSize: 6,
-    };
-
-    const listItemNode = {
-      type: { name: 'listItem' },
-      forEach: (cb) => cb(paragraphChild),
-    };
-
-    const newState = {
-      schema: { nodes: { div: divType } },
-      tr,
-      doc: {
-        descendants: (cb) => cb(listItemNode, 10),
-      },
-    };
-
-    const result = plugin.spec.appendTransaction([{ docChanged: true }], {}, newState);
-
-    expect(tr.setNodeMarkup).toHaveBeenCalledWith(11, divType, paragraphChild.attrs);
-    expect(result).toBe(tr);
-  });
-
-  it('returns null when there is no document change', () => {
-    const plugin = EnsureListItemContentIsDiv.config.addProseMirrorPlugins()[0];
-
-    const result = plugin.spec.appendTransaction([{ docChanged: false }], {}, {});
-    expect(result).toBeNull();
-  });
-});

package/src/extensions/__tests__/extended-list-item.test.js

@@ -1,13 +0,0 @@
-import { ExtendedListItem } from '../extended-list-item';
-
-describe('ExtendedListItem', () => {
-  it('extends listItem and prefers div over paragraph in content spec', () => {
-    expect(ExtendedListItem.name).toBe('listItem');
-
-    const content =
-      ExtendedListItem.options?.content ?? ExtendedListItem.config?.content ?? ExtendedListItem.extendOptions?.content;
-
-    expect(String(content)).toMatch(/^\(div \| paragraph/);
-    expect(String(content)).toContain('imageUploadNode');
-  });
-});

package/src/extensions/__tests__/extended-table-cell.test.js

@@ -1,22 +0,0 @@
-import { ExtendedTableCell, ExtendedTableHeader } from '../extended-table-cell';
-
-describe('ExtendedTableCell / ExtendedTableHeader', () => {
-  it('exports cell and header extensions with div preferred over paragraph in content spec', () => {
-    expect(ExtendedTableCell.name).toBe('tableCell');
-    expect(ExtendedTableHeader.name).toBe('tableHeader');
-
-    const cellContent =
-      ExtendedTableCell.options?.content ??
-      ExtendedTableCell.config?.content ??
-      ExtendedTableCell.extendOptions?.content;
-
-    expect(String(cellContent)).toMatch(/^\(div \| paragraph/);
-
-    const headerContent =
-      ExtendedTableHeader.options?.content ??
-      ExtendedTableHeader.config?.content ??
-      ExtendedTableHeader.extendOptions?.content;
-
-    expect(headerContent).toBe(cellContent);
-  });
-});

package/src/extensions/__tests__/extended-table.test.js

@@ -1,183 +0,0 @@
-import ExtendedTable, { applyPresentationToTableElement, ExtendedTableView } from '../extended-table';
-
-const mockTableViewState = { updateReturns: true };
-
-jest.mock('@tiptap/extension-table', () => ({
-  Table: {
-    extend: jest.fn((config) => config),
-  },
-  TableView: class TableView {
-    constructor() {
-      this.table = {
-        style: { setProperty: jest.fn() },
-        setAttribute: jest.fn(),
-      };
-    }
-
-    update() {
-      return mockTableViewState.updateReturns;
-    }
-  },
-}));
-
-describe('ExtendedTable', () => {
-  beforeEach(() => {
-    mockTableViewState.updateReturns = true;
-  });
-
-  describe('applyPresentationToTableElement', () => {
-    it('sets default border and theme styles', () => {
-      const table = document.createElement('table');
-      const setProperty = jest.spyOn(table.style, 'setProperty');
-
-      applyPresentationToTableElement(table, {});
-
-      expect(table.getAttribute('border')).toBe('1');
-      expect(setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
-      expect(setProperty).toHaveBeenCalledWith('background-color', 'var(--pie-background, rgba(255, 255, 255))');
-      setProperty.mockRestore();
-    });
-
-    it('uses explicit border from attrs', () => {
-      const table = document.createElement('table');
-      applyPresentationToTableElement(table, { border: '0' });
-
-      expect(table.getAttribute('border')).toBe('0');
-    });
-
-    it('treats empty border as default', () => {
-      const table = document.createElement('table');
-      applyPresentationToTableElement(table, { border: '' });
-
-      expect(table.getAttribute('border')).toBe('1');
-    });
-  });
-
-  describe('ExtendedTableView', () => {
-    it('applies presentation after construction', () => {
-      const node = { attrs: { border: '2' } };
-      const view = new ExtendedTableView(node, 25);
-
-      expect(view.table.setAttribute).toHaveBeenCalledWith('border', '2');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith(
-        'background-color',
-        'var(--pie-background, rgba(255, 255, 255))',
-      );
-    });
-
-    it('reapplies presentation when super.update returns true', () => {
-      const view = new ExtendedTableView({ attrs: { border: '1' } }, 25);
-      view.table.setAttribute.mockClear();
-      view.table.style.setProperty.mockClear();
-
-      view.update({ attrs: { border: '0' } });
-
-      expect(view.table.setAttribute).toHaveBeenCalledWith('border', '0');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith('color', 'var(--pie-text, black)');
-      expect(view.table.style.setProperty).toHaveBeenCalledWith(
-        'background-color',
-        'var(--pie-background, rgba(255, 255, 255))',
-      );
-    });
-
-    it('does not reapply presentation when super.update returns false', () => {
-      mockTableViewState.updateReturns = false;
-      const view = new ExtendedTableView({ attrs: { border: '1' } }, 25);
-      view.table.setAttribute.mockClear();
-      view.table.style.setProperty.mockClear();
-
-      const ok = view.update({ attrs: { border: '0' } });
-
-      expect(ok).toBe(false);
-      expect(view.table.setAttribute).not.toHaveBeenCalled();
-      expect(view.table.style.setProperty).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('addOptions', () => {
-    it('enables resizable table view with zero handle width for colgroup sync', () => {
-      const options = ExtendedTable.addOptions();
-      expect(options.resizable).toBe(true);
-      expect(options.handleWidth).toBe(0);
-      expect(options.View).toBe(ExtendedTableView);
-    });
-  });
-
-  describe('addAttributes', () => {
-    it('returns border attribute with default value', () => {
-      const attributes = ExtendedTable.addAttributes();
-      expect(attributes).toHaveProperty('border');
-      expect(attributes.border).toEqual({ default: '1' });
-    });
-  });
-
-  describe('renderHTML', () => {
-    it('renders table with default border', () => {
-      const props = {
-        HTMLAttributes: {},
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: '' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(mockParent).toHaveBeenCalledWith(props);
-      expect(result[0]).toBe('table');
-      expect(result[1]).toHaveProperty('style');
-    });
-
-    it('renders table with custom border', () => {
-      const props = {
-        HTMLAttributes: { border: '2' },
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: '' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(result[1].border).toBe('2');
-    });
-
-    it('handles styles ending with semicolon', () => {
-      const props = {
-        HTMLAttributes: {},
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: 'padding: 5px;' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(result[1].style).toContain('padding: 5px;');
-    });
-
-    it('includes CSS custom properties', () => {
-      const props = {
-        HTMLAttributes: {},
-      };
-
-      const mockParent = jest.fn(() => ['table', { style: '' }]);
-
-      const context = {
-        parent: mockParent,
-      };
-
-      const result = ExtendedTable.renderHTML.call(context, props);
-
-      expect(result[1].style).toContain('color: var(--pie-text, black)');
-      expect(result[1].style).toContain('background-color: var(--pie-background, rgba(255, 255, 255))');
-    });
-  });
-});