Merge pull request #2214 from pie-framework/fix/PIE-439

fix: made sure multiple divs are treated as line breaks [PIE-439]

Author: CarlaCostea

packages/editable-html-tip-tap/src/__tests__/EditableHtml.test.jsx

@@ -349,4 +349,126 @@ describe('EditableHtml', () => {
 
     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('calls onChange when 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).toHaveBeenCalledWith('<p>Different content</p>');
+    });
+
+    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();
+    });
+  });
 });

packages/editable-html-tip-tap/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);
+  });
+});

packages/editable-html-tip-tap/src/components/EditableHtml.jsx

@@ -288,7 +288,7 @@ export const EditableHtml = (props) => {
       editable: !props.disabled,
       content: normalizeInitialMarkup(props.markup),
       onUpdate: ({ editor, transaction }) => {
-        if (transaction.isDone) {
+        if (transaction.isDone || props.markup !== editor.getHTML()) {
           props.onChange?.(editor.getHTML());
         }
       },

packages/editable-html-tip-tap/src/utils/__tests__/helper.test.js

@@ -0,0 +1,126 @@
+import { normalizeInitialMarkup } from '../helper';
+
+describe('normalizeInitialMarkup', () => {
+  describe('basic normalization', () => {
+    it('returns empty div for empty string', () => {
+      expect(normalizeInitialMarkup('')).toBe('<div></div>');
+    });
+
+    it('returns empty div for null', () => {
+      expect(normalizeInitialMarkup(null)).toBe('<div></div>');
+    });
+
+    it('returns empty div for undefined', () => {
+      expect(normalizeInitialMarkup(undefined)).toBe('<div></div>');
+    });
+
+    it('wraps plain text in div', () => {
+      expect(normalizeInitialMarkup('Hello')).toBe('<div>Hello</div>');
+    });
+
+    it('returns HTML tags as-is when detected as HTML', () => {
+      // Since '<script>' matches the HTML pattern, it's returned as-is
+      // To be escaped, it would need to not match the HTML pattern
+      expect(normalizeInitialMarkup('<script>')).toBe('<script>');
+    });
+
+    it('escapes HTML entities in plain text', () => {
+      // Plain text without angle brackets gets escaped
+      expect(normalizeInitialMarkup('Hello & World')).toBe('<div>Hello &amp; World</div>');
+    });
+
+    it('returns single div as-is', () => {
+      const html = '<div>Hello</div>';
+      expect(normalizeInitialMarkup(html)).toBe(html);
+    });
+
+    it('returns paragraph as-is', () => {
+      const html = '<p>Hello</p>';
+      expect(normalizeInitialMarkup(html)).toBe(html);
+    });
+  });
+
+  describe('consecutive divs to paragraph conversion', () => {
+    it('converts two consecutive divs to paragraph with br', () => {
+      const input = '<div>A</div><div>B</div>';
+      const expected = '<p>A<br>B</p>';
+      expect(normalizeInitialMarkup(input)).toBe(expected);
+    });
+
+    it('converts three consecutive divs to paragraph with br tags', () => {
+      const input = '<div>A</div><div>B</div><div>C</div>';
+      const expected = '<p>A<br>B<br>C</p>';
+      expect(normalizeInitialMarkup(input)).toBe(expected);
+    });
+
+    it('handles divs with whitespace', () => {
+      const input = '<div>  A  </div><div>  B  </div>';
+      const expected = '<p>  A  <br>  B  </p>';
+      expect(normalizeInitialMarkup(input)).toBe(expected);
+    });
+
+    it('handles divs with inline elements', () => {
+      const input = '<div><strong>A</strong></div><div><em>B</em></div>';
+      const expected = '<p><strong>A</strong><br><em>B</em></p>';
+      expect(normalizeInitialMarkup(input)).toBe(expected);
+    });
+
+    it('handles empty divs', () => {
+      const input = '<div></div><div>B</div>';
+      const expected = '<p><br>B</p>';
+      expect(normalizeInitialMarkup(input)).toBe(expected);
+    });
+
+    it('preserves existing br tags within divs', () => {
+      const input = '<div>A<br>A2</div><div>B</div>';
+      const expected = '<p>A<br>A2<br>B</p>';
+      expect(normalizeInitialMarkup(input)).toBe(expected);
+    });
+  });
+
+  describe('cases that should NOT convert', () => {
+    it('does not convert single div', () => {
+      const input = '<div>Hello</div>';
+      expect(normalizeInitialMarkup(input)).toBe(input);
+    });
+
+    it('does not convert divs with nested block elements', () => {
+      const input = '<div><div>Nested</div></div><div>B</div>';
+      expect(normalizeInitialMarkup(input)).toBe(input);
+    });
+
+    it('does not convert divs containing tables', () => {
+      const input = '<div><table><tr><td>A</td></tr></table></div><div>B</div>';
+      expect(normalizeInitialMarkup(input)).toBe(input);
+    });
+
+    it('does not convert divs containing lists', () => {
+      const input = '<div><ul><li>Item</li></ul></div><div>B</div>';
+      expect(normalizeInitialMarkup(input)).toBe(input);
+    });
+
+    it('does not convert mixed element types', () => {
+      const input = '<div>A</div><p>B</p>';
+      expect(normalizeInitialMarkup(input)).toBe(input);
+    });
+
+    it('does not convert paragraphs', () => {
+      const input = '<p>A</p><p>B</p>';
+      expect(normalizeInitialMarkup(input)).toBe(input);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles divs with attributes', () => {
+      const input = '<div class="test">A</div><div>B</div>';
+      // Should not convert since we only want simple divs
+      expect(normalizeInitialMarkup(input)).toBe(input);
+    });
+
+    it('handles complex inline formatting', () => {
+      const input = '<div><strong><em>A</em></strong></div><div><u>B</u></div>';
+      const expected = '<p><strong><em>A</em></strong><br><u>B</u></p>';
+      expect(normalizeInitialMarkup(input)).toBe(expected);
+    });
+  });
+});