@pie-lib/editable-html-tip-tap 1.1.0-next.6059 → 1.1.1-next.1

package/src/__tests__/EditableHtml.test.jsx

@@ -0,0 +1,266 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { EditableHtml } from '../components/EditableHtml';
+
+// Mock TipTap dependencies
+jest.mock('@tiptap/react', () => ({
+  EditorContent: ({ editor, ...props }) => <div data-testid="editor-content" {...props} />,
+  useEditor: jest.fn((config) => {
+    const mockEditor = {
+      getHTML: jest.fn(() => '<p>test content</p>'),
+      setEditable: jest.fn(),
+      commands: {
+        setContent: jest.fn(),
+      },
+      isActive: jest.fn(() => false),
+      isFocused: false,
+    };
+    return mockEditor;
+  }),
+  useEditorState: jest.fn(() => ({
+    isFocused: false,
+  })),
+}));
+
+jest.mock('@tiptap/starter-kit', () => ({
+  __esModule: true,
+  default: {},
+}));
+
+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('@tiptap/extension-table-cell', () => ({
+  TableCell: {},
+}));
+
+jest.mock('@tiptap/extension-table-header', () => ({
+  TableHeader: {},
+}));
+
+jest.mock('../extensions/extended-table', () => ({
+  __esModule: true,
+  default: {},
+}));
+
+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', () => ({
+  ...jest.requireActual('../extensions'),
+  buildExtensions: jest.fn(() => []),
+}));
+
+describe('EditableHtml', () => {
+  const defaultProps = {
+    markup: '<p>Hello World</p>',
+    onChange: jest.fn(),
+    onDone: jest.fn(),
+    disabled: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<EditableHtml {...defaultProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('renders editor container', () => {
+    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
+    expect(getByTestId('editor-container')).toBeInTheDocument();
+  });
+
+  it('renders editor content when editor is initialized', async () => {
+    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
+    await waitFor(() => {
+      expect(getByTestId('editor-content')).toBeInTheDocument();
+    });
+  });
+
+  it('accepts custom toolbar options', () => {
+    const toolbarOpts = {
+      position: 'top',
+      alignment: 'center',
+      alwaysVisible: true,
+      showDone: false,
+      doneOn: 'change',
+    };
+    const { container } = render(<EditableHtml {...defaultProps} toolbarOpts={toolbarOpts} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts custom active plugins', () => {
+    const activePlugins = ['bold', 'italic', 'underline'];
+    const { container } = render(<EditableHtml {...defaultProps} activePlugins={activePlugins} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts plugin props', () => {
+    const pluginProps = {
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: false },
+    };
+    const { container } = render(<EditableHtml {...defaultProps} pluginProps={pluginProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts response area props', () => {
+    const responseAreaProps = {
+      type: 'explicit-constructed-response',
+      options: {},
+    };
+    const { container } = render(<EditableHtml {...defaultProps} responseAreaProps={responseAreaProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts size props', () => {
+    const sizeProps = {
+      width: 500,
+      height: 300,
+      minHeight: 200,
+      maxHeight: 400,
+      minWidth: 300,
+      maxWidth: 600,
+    };
+    const { container } = render(<EditableHtml {...defaultProps} {...sizeProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts character limit', () => {
+    const { container } = render(<EditableHtml {...defaultProps} charactersLimit={500} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts image support props', () => {
+    const imageSupport = {
+      add: jest.fn(),
+      delete: jest.fn(),
+    };
+    const { container } = render(<EditableHtml {...defaultProps} imageSupport={imageSupport} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts max image dimensions', () => {
+    const { container } = render(<EditableHtml {...defaultProps} maxImageWidth={800} maxImageHeight={600} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts language characters props', () => {
+    const languageCharactersProps = [
+      { label: 'Greek', value: 'greek' },
+      { label: 'Cyrillic', value: 'cyrillic' },
+    ];
+    const { container } = render(<EditableHtml {...defaultProps} languageCharactersProps={languageCharactersProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts extra CSS rules', () => {
+    const extraCSSRules = {
+      '.custom-class': { color: 'red' },
+    };
+    const { container } = render(<EditableHtml {...defaultProps} extraCSSRules={extraCSSRules} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts upload sound support', () => {
+    const uploadSoundSupport = {
+      add: jest.fn(),
+      delete: jest.fn(),
+    };
+    const { container } = render(<EditableHtml {...defaultProps} uploadSoundSupport={uploadSoundSupport} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts onKeyDown handler', () => {
+    const onKeyDown = jest.fn();
+    const { container } = render(<EditableHtml {...defaultProps} onKeyDown={onKeyDown} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('accepts disableImageAlignmentButtons prop', () => {
+    const { container } = render(<EditableHtml {...defaultProps} disableImageAlignmentButtons={true} />);
+    expect(container).toBeInTheDocument();
+  });
+});

package/src/__tests__/constants.test.js

@@ -0,0 +1,20 @@
+import { PIE_TOOLBAR__CLASS } from '../constants';
+import constants from '../constants';
+
+describe('Constants', () => {
+  describe('PIE_TOOLBAR__CLASS', () => {
+    it('is defined', () => {
+      expect(PIE_TOOLBAR__CLASS).toBeDefined();
+    });
+
+    it('has the correct value', () => {
+      expect(PIE_TOOLBAR__CLASS).toBe('pie-toolbar');
+    });
+  });
+
+  describe('default export', () => {
+    it('contains PIE_TOOLBAR__CLASS', () => {
+      expect(constants.PIE_TOOLBAR__CLASS).toBe('pie-toolbar');
+    });
+  });
+});

package/src/__tests__/extensions.test.js

@@ -0,0 +1,208 @@
+import { buildExtensions, ALL_PLUGINS, 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

@@ -0,0 +1,146 @@
+import StyledEditor, { EditableHtml, ALL_PLUGINS, DEFAULT_PLUGINS } 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: {} }));
+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('@tiptap/extension-table-cell', () => ({ TableCell: {} }));
+jest.mock('@tiptap/extension-table-header', () => ({ TableHeader: {} }));
+jest.mock('../extensions/extended-table', () => ({ __esModule: true, default: {} }));
+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');
+    });
+  });
+});