@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 2.2.0-beta.9

package/src/__tests__/div-to-paragraph-conversion.test.jsx

@@ -1,125 +0,0 @@
-import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import { EditableHtml } from '../components/EditableHtml';
-
-describe('Div to Paragraph Conversion', () => {
-  it('converts consecutive divs to paragraph with br tags', async () => {
-    const markup = '<div>A</div><div>B</div>';
-    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
-
-    // Wait for the editor to initialize
-    await waitFor(() => {
-      const prosemirror = container.querySelector('.ProseMirror');
-      expect(prosemirror).toBeInTheDocument();
-    });
-
-    // Check that the content was converted to a paragraph
-    const paragraph = container.querySelector('.ProseMirror p');
-    expect(paragraph).toBeInTheDocument();
-
-    // Check that br tag is present
-    const br = container.querySelector('.ProseMirror p br');
-    expect(br).toBeInTheDocument();
-
-    // Verify the text content
-    expect(paragraph.textContent).toBe('AB');
-  });
-
-  it('converts three consecutive divs correctly', async () => {
-    const markup = '<div>First</div><div>Second</div><div>Third</div>';
-    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
-
-    await waitFor(() => {
-      const prosemirror = container.querySelector('.ProseMirror');
-      expect(prosemirror).toBeInTheDocument();
-    });
-
-    const paragraph = container.querySelector('.ProseMirror p');
-    expect(paragraph).toBeInTheDocument();
-
-    // Should have 2 br tags (between 3 items)
-    const brTags = container.querySelectorAll('.ProseMirror p br');
-    expect(brTags.length).toBe(2);
-
-    expect(paragraph.textContent).toBe('FirstSecondThird');
-  });
-
-  it('does not convert single div', async () => {
-    const markup = '<div>Single</div>';
-    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
-
-    await waitFor(() => {
-      const prosemirror = container.querySelector('.ProseMirror');
-      expect(prosemirror).toBeInTheDocument();
-    });
-
-    // Should remain as a div
-    const div = container.querySelector('.ProseMirror div');
-    expect(div).toBeInTheDocument();
-    expect(div.textContent).toBe('Single');
-  });
-
-  it('does not convert divs with attributes', async () => {
-    const markup = '<div class="test">A</div><div>B</div>';
-    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
-
-    await waitFor(() => {
-      const prosemirror = container.querySelector('.ProseMirror');
-      expect(prosemirror).toBeInTheDocument();
-    });
-
-    // Should remain as divs since one has an attribute
-    const divs = container.querySelectorAll('.ProseMirror div');
-    expect(divs.length).toBeGreaterThanOrEqual(2);
-  });
-
-  it('handles divs with inline formatting', async () => {
-    const markup = '<div><strong>Bold</strong></div><div><em>Italic</em></div>';
-    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
-
-    await waitFor(() => {
-      const prosemirror = container.querySelector('.ProseMirror');
-      expect(prosemirror).toBeInTheDocument();
-    });
-
-    // Should be converted to paragraph
-    const paragraph = container.querySelector('.ProseMirror p');
-    expect(paragraph).toBeInTheDocument();
-
-    // Check that formatting is preserved
-    const strong = container.querySelector('.ProseMirror p strong');
-    const em = container.querySelector('.ProseMirror p em');
-    expect(strong).toBeInTheDocument();
-    expect(em).toBeInTheDocument();
-  });
-
-  it('does not convert mixed element types', async () => {
-    const markup = '<div>A</div><p>B</p>';
-    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
-
-    await waitFor(() => {
-      const prosemirror = container.querySelector('.ProseMirror');
-      expect(prosemirror).toBeInTheDocument();
-    });
-
-    // Should have both div and paragraph
-    const div = container.querySelector('.ProseMirror div');
-    const p = container.querySelector('.ProseMirror p');
-    expect(div).toBeInTheDocument();
-    expect(p).toBeInTheDocument();
-  });
-
-  it('does not convert divs with nested block elements', async () => {
-    const markup = '<div><div>Nested</div></div><div>B</div>';
-    const { container } = render(<EditableHtml markup={markup} onChange={() => {}} pluginProps={{}} />);
-
-    await waitFor(() => {
-      const prosemirror = container.querySelector('.ProseMirror');
-      expect(prosemirror).toBeInTheDocument();
-    });
-
-    // Should remain as divs
-    const divs = container.querySelectorAll('.ProseMirror > div');
-    expect(divs.length).toBeGreaterThanOrEqual(1);
-  });
-});

package/src/__tests__/extensions.test.js

@@ -1,208 +0,0 @@
-import { ALL_PLUGINS, buildExtensions, DEFAULT_PLUGINS } from '../extensions';
-
-describe('Extensions', () => {
-  describe('ALL_PLUGINS', () => {
-    it('contains all expected plugins', () => {
-      expect(ALL_PLUGINS).toContain('bold');
-      expect(ALL_PLUGINS).toContain('italic');
-      expect(ALL_PLUGINS).toContain('underline');
-      expect(ALL_PLUGINS).toContain('strikethrough');
-      expect(ALL_PLUGINS).toContain('bulleted-list');
-      expect(ALL_PLUGINS).toContain('numbered-list');
-      expect(ALL_PLUGINS).toContain('image');
-      expect(ALL_PLUGINS).toContain('math');
-      expect(ALL_PLUGINS).toContain('languageCharacters');
-      expect(ALL_PLUGINS).toContain('text-align');
-      expect(ALL_PLUGINS).toContain('table');
-      expect(ALL_PLUGINS).toContain('video');
-      expect(ALL_PLUGINS).toContain('audio');
-      expect(ALL_PLUGINS).toContain('responseArea');
-      expect(ALL_PLUGINS).toContain('superscript');
-      expect(ALL_PLUGINS).toContain('subscript');
-      expect(ALL_PLUGINS).toContain('h3');
-      expect(ALL_PLUGINS).toContain('blockquote');
-      expect(ALL_PLUGINS).toContain('undo');
-      expect(ALL_PLUGINS).toContain('redo');
-    });
-  });
-
-  describe('DEFAULT_PLUGINS', () => {
-    it('excludes responseArea, h3, and blockquote', () => {
-      expect(DEFAULT_PLUGINS).not.toContain('responseArea');
-      expect(DEFAULT_PLUGINS).not.toContain('h3');
-      expect(DEFAULT_PLUGINS).not.toContain('blockquote');
-    });
-
-    it('contains basic formatting plugins', () => {
-      expect(DEFAULT_PLUGINS).toContain('bold');
-      expect(DEFAULT_PLUGINS).toContain('italic');
-      expect(DEFAULT_PLUGINS).toContain('underline');
-    });
-  });
-
-  describe('buildExtensions', () => {
-    it('returns an array when called with default parameters', () => {
-      const result = buildExtensions(DEFAULT_PLUGINS, [], {});
-      expect(Array.isArray(result)).toBe(true);
-    });
-
-    it('includes only active extensions', () => {
-      const activeExtensions = ['bold', 'italic'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toEqual(['bold', 'italic']);
-    });
-
-    it('filters out undefined values', () => {
-      const result = buildExtensions(['bold', 'italic'], [], {});
-      expect(result.every((item) => item !== undefined)).toBe(true);
-    });
-
-    it('excludes image plugin when opts.image.onDelete is not provided', () => {
-      const activeExtensions = ['image'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('image');
-    });
-
-    it('includes image plugin when opts.image.delete is provided', () => {
-      const activeExtensions = ['image'];
-      const opts = { image: { delete: jest.fn() } };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('image');
-    });
-
-    it('excludes math plugin when opts.math is not provided', () => {
-      const activeExtensions = ['math'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('math');
-    });
-
-    it('includes math plugin when opts.math is provided', () => {
-      const activeExtensions = ['math'];
-      const opts = { math: {} };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('math');
-    });
-
-    it('excludes responseArea plugin when opts.responseArea.type is not provided', () => {
-      const activeExtensions = ['responseArea'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('responseArea');
-    });
-
-    it('includes responseArea plugin when opts.responseArea.type is provided', () => {
-      const activeExtensions = ['responseArea'];
-      const opts = { responseArea: { type: 'explicit-constructed-response' } };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('responseArea');
-    });
-
-    it('excludes css plugin when opts.extraCSSRules is empty', () => {
-      const activeExtensions = ['css'];
-      const result = buildExtensions(activeExtensions, [], { extraCSSRules: {} });
-      expect(result).not.toContain('css');
-    });
-
-    it('includes css plugin when opts.extraCSSRules has values', () => {
-      const activeExtensions = ['css'];
-      const opts = { extraCSSRules: { color: 'red' } };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('css');
-    });
-
-    it('excludes html plugin when opts.html is not provided', () => {
-      const activeExtensions = ['html'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('html');
-    });
-
-    it('includes html plugin when opts.html is provided', () => {
-      const activeExtensions = ['html'];
-      const opts = { html: true };
-      const result = buildExtensions(activeExtensions, [], opts);
-      expect(result).toContain('html');
-    });
-
-    it('handles languageCharacters plugins array', () => {
-      const activeExtensions = ['languageCharacters'];
-      const opts = {
-        languageCharacters: [
-          { label: 'Greek', value: 'greek' },
-          { label: 'Cyrillic', value: 'cyrillic' },
-        ],
-      };
-      const result = buildExtensions(activeExtensions, [], opts);
-      // Should include languageCharacters for each item in the array
-      const languageCharsCount = result.filter((item) => item === 'languageCharacters').length;
-      expect(languageCharsCount).toBe(2);
-    });
-
-    it('uses DEFAULT_PLUGINS when activeExtensions is not provided', () => {
-      const result = buildExtensions(null, [], {});
-      expect(Array.isArray(result)).toBe(true);
-      expect(result.length).toBeGreaterThan(0);
-    });
-
-    it('includes list plugins', () => {
-      const activeExtensions = ['bulleted-list', 'numbered-list'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('bulleted-list');
-      expect(result).toContain('numbered-list');
-    });
-
-    it('includes undo and redo plugins', () => {
-      const activeExtensions = ['undo', 'redo'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('undo');
-      expect(result).toContain('redo');
-    });
-
-    it('includes text formatting plugins', () => {
-      const activeExtensions = ['superscript', 'subscript', 'strikethrough', 'underline'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('superscript');
-      expect(result).toContain('subscript');
-      expect(result).toContain('strikethrough');
-      expect(result).toContain('underline');
-    });
-
-    it('includes media plugins', () => {
-      const activeExtensions = ['video', 'audio'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('video');
-      expect(result).toContain('audio');
-    });
-
-    it('includes table plugin', () => {
-      const activeExtensions = ['table'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('table');
-    });
-
-    it('includes text-align plugin', () => {
-      const activeExtensions = ['text-align'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('text-align');
-    });
-
-    it('includes blockquote and h3 plugins when in active list', () => {
-      const activeExtensions = ['blockquote', 'h3'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).toContain('blockquote');
-      expect(result).toContain('h3');
-    });
-
-    it('filters out inactive extensions', () => {
-      const activeExtensions = ['bold'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result).not.toContain('italic');
-      expect(result).not.toContain('underline');
-    });
-
-    it('maintains order of extensions', () => {
-      const activeExtensions = ['table', 'bold', 'italic'];
-      const result = buildExtensions(activeExtensions, [], {});
-      expect(result.indexOf('table')).toBeLessThan(result.indexOf('bold'));
-      expect(result.indexOf('bold')).toBeLessThan(result.indexOf('italic'));
-    });
-  });
-});

package/src/__tests__/index.test.jsx

@@ -1,154 +0,0 @@
-import StyledEditor, { ALL_PLUGINS, DEFAULT_PLUGINS, EditableHtml } from '../index';
-
-// Mock TipTap and dependencies
-jest.mock('@tiptap/react', () => ({
-  EditorContent: () => <div data-testid="editor-content" />,
-  useEditor: jest.fn(() => ({
-    getHTML: jest.fn(() => '<p>test content</p>'),
-    setEditable: jest.fn(),
-    commands: { setContent: jest.fn() },
-    isActive: jest.fn(() => false),
-    isFocused: false,
-  })),
-  useEditorState: jest.fn(() => ({ isFocused: false })),
-}));
-
-jest.mock('@tiptap/starter-kit', () => ({
-  __esModule: true,
-  default: { configure: jest.fn(() => ({})) },
-}));
-jest.mock('@tiptap/extension-text-style', () => ({ TextStyleKit: {} }));
-jest.mock('@tiptap/extension-character-count', () => ({
-  CharacterCount: { configure: jest.fn(() => ({})) },
-}));
-jest.mock('@tiptap/extension-superscript', () => ({ __esModule: true, default: {} }));
-jest.mock('@tiptap/extension-subscript', () => ({ __esModule: true, default: {} }));
-jest.mock('@tiptap/extension-text-align', () => ({
-  __esModule: true,
-  default: { configure: jest.fn(() => ({})) },
-}));
-jest.mock('@tiptap/extension-image', () => ({ __esModule: true, default: {} }));
-jest.mock('@tiptap/extension-table', () => ({ __esModule: true, default: {} }));
-jest.mock('@tiptap/extension-table-row', () => ({ TableRow: {} }));
-jest.mock('../extensions/extended-table-cell', () => ({
-  ExtendedTableCell: {},
-  ExtendedTableHeader: {},
-}));
-jest.mock('../extensions/extended-table', () => ({ __esModule: true, default: {} }));
-jest.mock('../extensions/ensure-empty-root-div', () => ({ EnsureEmptyRootIsDiv: {} }));
-jest.mock('../extensions/extended-list-item', () => ({ ExtendedListItem: {} }));
-jest.mock('../extensions/ensure-list-item-content-is-div', () => ({ EnsureListItemContentIsDiv: {} }));
-jest.mock('../extensions/responseArea', () => ({
-  ExplicitConstructedResponseNode: { configure: jest.fn(() => ({})) },
-  DragInTheBlankNode: { configure: jest.fn(() => ({})) },
-  InlineDropdownNode: { configure: jest.fn(() => ({})) },
-  ResponseAreaExtension: { configure: jest.fn(() => ({})) },
-}));
-jest.mock('../extensions/math', () => ({ MathNode: { configure: jest.fn(() => ({})) } }));
-jest.mock('../extensions/image', () => ({ ImageUploadNode: { configure: jest.fn(() => ({})) } }));
-jest.mock('../extensions/media', () => ({ Media: { configure: jest.fn(() => ({})) } }));
-jest.mock('../extensions/css', () => ({ CSSMark: { configure: jest.fn(() => ({})) } }));
-jest.mock('../components/TiptapContainer', () => ({
-  __esModule: true,
-  default: ({ children }) => <div data-testid="editor-container">{children}</div>,
-}));
-jest.mock('../extensions', () => ({
-  buildExtensions: jest.fn(() => []),
-  ALL_PLUGINS: [
-    'bold',
-    'html',
-    'extraCSSRules',
-    'italic',
-    'underline',
-    'strikethrough',
-    'bulleted-list',
-    'numbered-list',
-    'image',
-    'math',
-    'languageCharacters',
-    'text-align',
-    'blockquote',
-    'h3',
-    'table',
-    'video',
-    'audio',
-    'responseArea',
-    'redo',
-    'undo',
-    'superscript',
-    'subscript',
-  ],
-  DEFAULT_PLUGINS: [
-    'bold',
-    'html',
-    'extraCSSRules',
-    'italic',
-    'underline',
-    'strikethrough',
-    'bulleted-list',
-    'numbered-list',
-    'image',
-    'math',
-    'languageCharacters',
-    'text-align',
-    'table',
-    'video',
-    'audio',
-    'redo',
-    'undo',
-    'superscript',
-    'subscript',
-  ],
-}));
-
-describe('editable-html-tip-tap module', () => {
-  describe('exports', () => {
-    it('exports StyledEditor as default', () => {
-      expect(StyledEditor).toBeDefined();
-    });
-
-    it('exports EditableHtml as named export', () => {
-      expect(EditableHtml).toBeDefined();
-    });
-
-    it('exports ALL_PLUGINS as named export', () => {
-      expect(ALL_PLUGINS).toBeDefined();
-      expect(Array.isArray(ALL_PLUGINS)).toBe(true);
-    });
-
-    it('exports DEFAULT_PLUGINS as named export', () => {
-      expect(DEFAULT_PLUGINS).toBeDefined();
-      expect(Array.isArray(DEFAULT_PLUGINS)).toBe(true);
-    });
-
-    it('StyledEditor and EditableHtml refer to the same component', () => {
-      expect(StyledEditor).toBe(EditableHtml);
-    });
-  });
-
-  describe('ALL_PLUGINS', () => {
-    it('contains expected plugins', () => {
-      expect(ALL_PLUGINS).toContain('bold');
-      expect(ALL_PLUGINS).toContain('italic');
-      expect(ALL_PLUGINS).toContain('underline');
-      expect(ALL_PLUGINS).toContain('math');
-      expect(ALL_PLUGINS).toContain('table');
-      expect(ALL_PLUGINS).toContain('responseArea');
-    });
-  });
-
-  describe('DEFAULT_PLUGINS', () => {
-    it('is a subset of ALL_PLUGINS', () => {
-      const allPluginsSet = new Set(ALL_PLUGINS);
-      DEFAULT_PLUGINS.forEach((plugin) => {
-        expect(allPluginsSet.has(plugin)).toBe(true);
-      });
-    });
-
-    it('contains basic formatting plugins', () => {
-      expect(DEFAULT_PLUGINS).toContain('bold');
-      expect(DEFAULT_PLUGINS).toContain('italic');
-      expect(DEFAULT_PLUGINS).toContain('underline');
-    });
-  });
-});

package/src/__tests__/size-utils.test.js

@@ -1,64 +0,0 @@
-import { valueToSize } from '../utils/size';
-
-describe('Size Utilities', () => {
-  describe('valueToSize', () => {
-    it('returns undefined for falsy values', () => {
-      expect(valueToSize(null)).toBeUndefined();
-      expect(valueToSize(undefined)).toBeUndefined();
-      expect(valueToSize('')).toBeUndefined();
-      expect(valueToSize(0)).toBeUndefined();
-    });
-
-    it('converts number to px string', () => {
-      expect(valueToSize(100)).toBe('100px');
-      expect(valueToSize(50)).toBe('50px');
-      expect(valueToSize(0)).toBeUndefined();
-    });
-
-    it('returns undefined for percentage strings', () => {
-      expect(valueToSize('100%')).toBeUndefined();
-      expect(valueToSize('50%')).toBeUndefined();
-      expect(valueToSize('0%')).toBeUndefined();
-    });
-
-    it('preserves valid CSS unit strings', () => {
-      expect(valueToSize('100px')).toBe('100px');
-      expect(valueToSize('10vh')).toBe('10vh');
-      expect(valueToSize('50vw')).toBe('50vw');
-      expect(valueToSize('9ch')).toBe('9ch');
-      expect(valueToSize('2em')).toBe('2em');
-    });
-
-    it('preserves calc() expressions', () => {
-      expect(valueToSize('calc(10em + 42px)')).toBe('calc(10em + 42px)');
-      expect(valueToSize('calc(100% - 20px)')).toBe('calc(100% - 20px)');
-      expect(valueToSize('calc(50vh + 10px)')).toBe('calc(50vh + 10px)');
-    });
-
-    it('converts numeric strings to px', () => {
-      expect(valueToSize('100')).toBe('100px');
-      expect(valueToSize('50')).toBe('50px');
-      expect(valueToSize('250')).toBe('250px');
-    });
-
-    it('handles invalid numeric strings', () => {
-      const result = valueToSize('invalid');
-      expect(isNaN(result)).toBe(true);
-    });
-
-    it('handles edge cases with whitespace', () => {
-      const result = valueToSize('  ');
-      expect(isNaN(result)).toBe(true);
-    });
-
-    it('handles negative numbers', () => {
-      expect(valueToSize(-100)).toBe('-100px');
-      expect(valueToSize('-50')).toBe('-50px');
-    });
-
-    it('handles decimal numbers', () => {
-      expect(valueToSize(100.5)).toBe('100.5px');
-      expect(valueToSize('100.5')).toBe('100px'); // parseInt truncates
-    });
-  });
-});

package/src/__tests__/theme.test.js

@@ -1,17 +0,0 @@
-import { primary } from '../theme';
-
-describe('Theme', () => {
-  describe('primary color', () => {
-    it('is defined', () => {
-      expect(primary).toBeDefined();
-    });
-
-    it('has the correct hex value', () => {
-      expect(primary).toBe('#304ffe');
-    });
-
-    it('is a valid hex color', () => {
-      expect(primary).toMatch(/^#[0-9A-Fa-f]{6}$/);
-    });
-  });
-});