@pie-lib/editable-html-tip-tap 2.1.2-next.31 → 2.1.2-next.34

package/src/__tests__/EditableHtml.test.jsx

@@ -0,0 +1,554 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { useEditor } from '@tiptap/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: {
+    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(() => ({})),
+  },
+  MathTemplatedNode: {
+    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();
+  });
+
+  it('calls editorRef callback when editor is initialized', async () => {
+    const editorRef = jest.fn();
+    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
+
+    await waitFor(() => {
+      expect(editorRef).toHaveBeenCalled();
+    });
+  });
+
+  it('calls editorRef with the editor instance', async () => {
+    const editorRef = jest.fn();
+    render(<EditableHtml {...defaultProps} editorRef={editorRef} />);
+
+    await waitFor(() => {
+      expect(editorRef).toHaveBeenCalled();
+      // Verify it was called with an object that has editor-like properties
+      const callArg = editorRef.mock.calls[0][0];
+      expect(callArg).toHaveProperty('getHTML');
+      expect(callArg).toHaveProperty('commands');
+    });
+  });
+
+  it('handles editorRef being undefined', () => {
+    const { container } = render(<EditableHtml {...defaultProps} editorRef={undefined} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('applies flex display to StyledEditorContent', async () => {
+    const { getByTestId } = render(<EditableHtml {...defaultProps} />);
+    await waitFor(() => {
+      const editorContent = getByTestId('editor-content');
+      expect(editorContent).toBeInTheDocument();
+    });
+  });
+
+  it('does not run blur onChange/onDone while an image insert flow is active', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ ...defaultProps.toolbarOpts, doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const blurEditor = {
+      getHTML: jest.fn(() => '<p>changed</p>'),
+      schema: {},
+      _insertingImage: true,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDone).not.toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
+
+  it('does not run blur onChange/onDone when editor has no schema', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const getHTML = jest.fn(() => '<p>changed</p>');
+    const blurEditor = {
+      getHTML,
+      schema: undefined,
+      _insertingImage: false,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(getHTML).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+    expect(onDone).not.toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
+
+  it('calls getHTML once on blur and passes the same html to onChange and onDone', async () => {
+    jest.useFakeTimers();
+    const onChange = jest.fn();
+    const onDone = jest.fn();
+    const html = '<p>from editor</p>';
+
+    render(
+      <EditableHtml
+        {...defaultProps}
+        markup="<p>Hello World</p>"
+        onChange={onChange}
+        onDone={onDone}
+        toolbarOpts={{ doneOn: 'blur' }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(useEditor).toHaveBeenCalled();
+    });
+
+    const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+    const getHTML = jest.fn(() => html);
+    const blurEditor = {
+      getHTML,
+      schema: {},
+      _insertingImage: false,
+      _toolbarOpened: false,
+      isActive: jest.fn(() => false),
+    };
+
+    editorConfig.onBlur({ editor: blurEditor });
+    jest.advanceTimersByTime(200);
+
+    expect(getHTML).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(html);
+    expect(onDone).toHaveBeenCalledWith(html);
+
+    jest.useRealTimers();
+  });
+
+  describe('onUpdate callback', () => {
+    it('calls onChange when transaction.isDone is true', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Initial content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Updated content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: true,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).toHaveBeenCalledWith('<p>Updated content</p>');
+    });
+
+    it('does not call onChange when transaction.isDone is false even if markup differs from editor HTML', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Initial content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Different content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: false,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('does not call onChange when transaction.isDone is false and markup matches editor HTML', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Same content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Same content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: false,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    it('calls onChange when transaction.isDone is true even if markup matches', async () => {
+      const onChange = jest.fn();
+      const markup = '<p>Same content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={onChange} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Same content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: true,
+      };
+
+      editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+
+      expect(onChange).toHaveBeenCalledWith('<p>Same content</p>');
+    });
+
+    it('does not call onChange when onChange is not provided', async () => {
+      const markup = '<p>Content</p>';
+
+      render(<EditableHtml {...defaultProps} markup={markup} onChange={undefined} />);
+
+      await waitFor(() => {
+        expect(useEditor).toHaveBeenCalled();
+      });
+
+      const editorConfig = useEditor.mock.calls[useEditor.mock.calls.length - 1][0];
+      const mockEditor = {
+        getHTML: jest.fn(() => '<p>Updated content</p>'),
+      };
+
+      const mockTransaction = {
+        isDone: true,
+      };
+
+      // Should not throw error when onChange is undefined
+      expect(() => {
+        editorConfig.onUpdate({ editor: mockEditor, transaction: mockTransaction });
+      }).not.toThrow();
+    });
+  });
+});

package/src/__tests__/constants.test.js

@@ -0,0 +1,19 @@
+import constants, { PIE_TOOLBAR__CLASS } 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__/div-to-paragraph-conversion.test.jsx

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