@pie-lib/editable-html-tip-tap 2.2.0-beta.8 → 3.0.0-next.35

package/src/components/respArea/inlineDropdownUtils.js

@@ -1,79 +0,0 @@
-import { NodeSelection } from 'prosemirror-state';
-
-export const HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX = '_holdInlineDropdownToolbarIndex';
-
-export const findInlineDropdownPos = (editor, index) => {
-    let foundPos = null;
-
-    editor.state.doc.descendants((n, p) => {
-        if (n.type?.name === 'inline_dropdown' && String(n.attrs?.index) === String(index)) {
-            foundPos = p;
-            return false;
-        }
-
-        return true;
-    });
-
-    return foundPos;
-};
-
-export const holdInlineDropdownToolbar = (editor, index) => {
-    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] = index;
-};
-
-export const releaseInlineDropdownToolbarHold = (editor) => {
-    delete editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX];
-};
-
-export const isInlineDropdownToolbarHeld = (editor, index) =>
-    editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX] != null &&
-    String(editor[HOLD_INLINE_DROPDOWN_TOOLBAR_INDEX]) === String(index);
-
-export const selectInlineDropdownNode = (editor, index, fallbackPos) => {
-    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;
-
-    if (pos == null) {
-        return null;
-    }
-
-    const { tr } = editor.state;
-    const nodeAtPos = tr.doc.nodeAt(pos);
-
-    if (!nodeAtPos) {
-        return null;
-    }
-
-    const { selection } = tr;
-
-    if (selection.from === pos && selection.to === pos + nodeAtPos.nodeSize) {
-        return pos;
-    }
-
-    tr.setSelection(NodeSelection.create(tr.doc, pos));
-    editor.view.dispatch(tr);
-
-    return pos;
-};
-
-export const deleteInlineDropdownByIndex = (editor, index, fallbackPos) => {
-    const pos = findInlineDropdownPos(editor, index) ?? fallbackPos;
-
-    if (pos == null) {
-        releaseInlineDropdownToolbarHold(editor);
-        return false;
-    }
-
-    const { tr } = editor.state;
-    const nodeAtPos = tr.doc.nodeAt(pos);
-
-    if (!nodeAtPos) {
-        releaseInlineDropdownToolbarHold(editor);
-        return false;
-    }
-
-    tr.delete(pos, pos + nodeAtPos.nodeSize);
-    editor.view.dispatch(tr);
-    releaseInlineDropdownToolbarHold(editor);
-
-    return true;
-};

package/src/constants.js

@@ -1,5 +0,0 @@
-export const PIE_TOOLBAR__CLASS = 'pie-toolbar';
-
-export default {
-  PIE_TOOLBAR__CLASS,
-};

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

@@ -1,196 +0,0 @@
-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();
-  });
-});

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);
-  });
-});