@wix/patterns-fields 1.0.0

package/src/__tests__/components/rich-text-editor.spec.tsx

@@ -0,0 +1,1684 @@
+import '../../testkit/test-polyfills';
+
+import React, { createRef } from 'react';
+import { render } from '@testing-library/react';
+
+import type { RichTextEditorProps } from '../../components/rich-text/rich-text-input/rich-text-editor';
+import { RichTextEditor } from '../../components/rich-text/rich-text-input/rich-text-editor';
+import type { RichTextEditingOptions } from '../../components/rich-text/rich-text-input/rich-text-editor/utils';
+import { reformat } from '../../components/rich-text/rich-text-input/rich-text-editor/utils';
+
+import { RichTextEditorDriver } from '../drivers/rich-text.driver';
+import { pressKeyOnActiveElement } from '../test-utils/press-key';
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+
+const ZERO_WIDTH_SPACE = '\u200B';
+
+function htmlToLines(html: string): string[] {
+  return html
+    .trim()
+    .replace(/\n+/g, '')
+    .replace(/([^\w])\s+/g, '$1')
+    .split(/(?=<)/)
+    .map((line) => line.replace(ZERO_WIDTH_SPACE, '').trim());
+}
+
+function trimHTML(html: string): string {
+  return html
+    .split('\n')
+    .map((line) => line.trim())
+    .join('');
+}
+
+function assertReformat(
+  input: string,
+  output: string,
+  options?: RichTextEditingOptions,
+) {
+  const result = reformat(trimHTML(input), options);
+
+  const resultLines = htmlToLines(result);
+  const outputLines = htmlToLines(output);
+
+  expect(resultLines.length).toEqual(outputLines.length);
+
+  for (let i = 0; i < resultLines.length; i++) {
+    expect(resultLines[i]).toEqual(outputLines[i]);
+  }
+}
+
+const assertReformatWithoutHeadings = (input: string, output: string) =>
+  assertReformat(input, output, { headingsEnabled: false });
+
+describe('<RichTextEditor/>', () => {
+  let driver: RichTextEditorDriver;
+  const editor = createRef<RichTextEditor>();
+
+  const dataHook = 'rich-text-editor';
+
+  let onChange: jest.Mock;
+
+  // Use real timers for this test suite to avoid hanging
+  beforeAll(() => {
+    jest.useRealTimers();
+  });
+
+  afterAll(() => {
+    jest.useFakeTimers();
+  });
+
+  beforeEach(() => (onChange = jest.fn()));
+  afterEach(() => onChange.mockClear());
+
+  function renderWithProps(props: RichTextEditorProps) {
+    return new RichTextEditorDriver(
+      render(<RichTextEditor ref={editor} dataHook={dataHook} {...props} />, {
+        wrapper: PatternsFieldsTestProvider,
+      }) as any,
+    );
+  }
+
+  describe('render component', () => {
+    const value = 'plain text';
+
+    beforeEach(async () => {
+      driver = renderWithProps({ value, onChange });
+      await driver.select(dataHook).waitToBePresent();
+    });
+
+    it('pressing "bold" button should make text bold', async () => {
+      await driver.selectText(editor);
+      const boldButton = driver.getToolbarButtonTestkit('bold');
+
+      await boldButton.click();
+      await expect(boldButton.isButtonSelected()).resolves.toBeTruthy();
+
+      await driver.blur();
+      expect(onChange).toBeCalledWith(
+        '<p class="font_8"><strong>plain text</strong></p>',
+      );
+    });
+
+    it('pressing "italic" button should make text italic', async () => {
+      await driver.selectText(editor);
+      const italicButton = driver.getToolbarButtonTestkit('italic');
+
+      await italicButton.click();
+      await expect(italicButton.isButtonSelected()).resolves.toBeTruthy();
+
+      await driver.blur();
+      expect(onChange).toBeCalledWith(
+        '<p class="font_8"><em>plain text</em></p>',
+      );
+    });
+
+    it('pressing "underline" button should make text underline', async () => {
+      await driver.selectText(editor);
+      const underlineButton = driver.getToolbarButtonTestkit('underline');
+
+      await underlineButton.click();
+      await expect(underlineButton.isButtonSelected()).resolves.toBeTruthy();
+
+      await driver.blur();
+      expect(onChange).toBeCalledWith(
+        '<p class="font_8"><u>plain text</u></p>',
+      );
+    });
+
+    it('pressing "ordered list" button should wrap text into list', async () => {
+      await driver.selectText(editor);
+      const orderedListButton = driver.getToolbarButtonTestkit('ol');
+
+      await orderedListButton.click();
+      await expect(orderedListButton.isButtonSelected()).resolves.toBeTruthy();
+
+      await driver.blur();
+      expect(onChange).toBeCalledWith(
+        `<ol class="font_8">\n  <li><p class="font_8">plain text</p></li>\n</ol>`,
+      );
+    });
+
+    it('pressing "unordered list" button should wrap text into list', async () => {
+      await driver.selectText(editor);
+      const unorderedListButton = driver.getToolbarButtonTestkit('ul');
+
+      await unorderedListButton.click();
+      await expect(
+        unorderedListButton.isButtonSelected(),
+      ).resolves.toBeTruthy();
+
+      await driver.blur();
+      expect(onChange).toBeCalledWith(
+        `<ul class="font_8">\n  <li><p class="font_8">plain text</p></li>\n</ul>`,
+      );
+    });
+
+    it('pressing "unordered list" button and choosing heading style should wrap text into list and heading', async () => {
+      await driver.selectText(editor);
+
+      const unorderedListButton = driver.getToolbarButtonTestkit('ul');
+      await unorderedListButton.click();
+
+      const headerButton = driver.getToolbarButtonTestkit('header');
+      await headerButton.click();
+
+      const headerDropdown = driver.getToolbarDropdownTestkit('header');
+      await expect(headerDropdown.isDropdownShown()).resolves.toBeTruthy();
+      await headerDropdown.selectOption('header-one');
+
+      await expect(
+        unorderedListButton.isButtonSelected(),
+      ).resolves.toBeTruthy();
+
+      await driver.blur();
+      expect(trimHTML(onChange.mock.calls.pop().pop())).toEqual(
+        '<ul class="font_0"><li><h1 class="font_0">plain text</h1></li></ul>',
+      );
+    });
+
+    it('choosing heading style and pressing "unordered list" button should wrap text into list and heading', async () => {
+      await driver.selectText(editor);
+
+      const headerButton = driver.getToolbarButtonTestkit('header');
+      await headerButton.click();
+
+      const headerDropdown = driver.getToolbarDropdownTestkit('header');
+      await expect(headerDropdown.isDropdownShown()).resolves.toBeTruthy();
+      await headerDropdown.selectOption('header-one');
+
+      const unorderedListButton = driver.getToolbarButtonTestkit('ul');
+      await unorderedListButton.click();
+
+      await expect(
+        unorderedListButton.isButtonSelected(),
+      ).resolves.toBeTruthy();
+
+      await driver.blur();
+      expect(trimHTML(onChange.mock.calls.pop().pop())).toEqual(
+        '<ul class="font_0"><li><h1 class="font_0">plain text</h1></li></ul>',
+      );
+    });
+
+    describe('change header', () => {
+      const headers = [
+        {
+          valueId: 'header-one',
+          html: '<h1 class="font_0">plain text</h1>',
+        },
+        {
+          valueId: 'header-two',
+          html: '<h2 class="font_2">plain text</h2>',
+        },
+        {
+          valueId: 'header-three',
+          html: '<h3 class="font_3">plain text</h3>',
+        },
+        {
+          valueId: 'header-four',
+          html: '<h4 class="font_4">plain text</h4>',
+        },
+        {
+          valueId: 'header-five',
+          html: '<h5 class="font_5">plain text</h5>',
+        },
+        {
+          valueId: 'header-six',
+          html: '<h6 class="font_6">plain text</h6>',
+        },
+        {
+          valueId: 'paragraph-one',
+          html: '<p class="font_7">plain text</p>',
+        },
+        {
+          valueId: 'unstyled',
+          html: '<p class="font_8">plain text</p>',
+        },
+        {
+          valueId: 'paragraph-three',
+          html: '<p class="font_9">plain text</p>',
+        },
+      ];
+
+      headers.forEach((header, index) => {
+        it(`selecting ${index} dropdown item should change font`, async () => {
+          await driver.selectText(editor);
+
+          const headerButton = driver.getToolbarButtonTestkit('header');
+          await headerButton.click();
+
+          const headerDropdown = driver.getToolbarDropdownTestkit('header');
+          await headerDropdown.selectOption(header.valueId);
+
+          await driver.blur();
+          expect(onChange).toBeCalledWith(header.html);
+        });
+      });
+
+      it('switching between headers should change font correctly', async () => {
+        await driver.selectText(editor);
+
+        const headerButton = driver.getToolbarButtonTestkit('header');
+        await headerButton.click();
+
+        const headerDropdown = driver.getToolbarDropdownTestkit('header');
+        await headerDropdown.selectOption(headers[0].valueId);
+
+        await headerButton.click();
+        await headerDropdown.selectOption(headers[1].valueId);
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith(headers[1].html);
+      });
+    });
+
+    describe('change alignment', () => {
+      const alignmentNames = ['left', 'center', 'right', 'justify'];
+      const alignments = [
+        '<p class="font_8" style="text-align: left">plain text</p>',
+        '<p class="font_8" style="text-align: center">plain text</p>',
+        '<p class="font_8" style="text-align: right">plain text</p>',
+        '<p class="font_8" style="text-align: justify">plain text</p>',
+      ];
+
+      alignments.forEach((alignment, index) => {
+        it(`selecting ${index} dropdown item should change alignment`, async () => {
+          await driver.selectText(editor);
+
+          const alignButton = driver.getToolbarButtonTestkit('align');
+          await alignButton.click();
+
+          const alignDropdown = driver.getToolbarDropdownTestkit('align');
+          await alignDropdown.selectOption(alignmentNames[index]);
+
+          await driver.blur();
+          expect(onChange).toBeCalledWith(alignment);
+        });
+      });
+
+      it('switching between alignments should change alignment correctly', async () => {
+        await driver.selectText(editor);
+
+        const alignButton = driver.getToolbarButtonTestkit('align');
+        await alignButton.click();
+
+        const alignDropdown = driver.getToolbarDropdownTestkit('align');
+        await alignDropdown.selectOption(alignmentNames[0]);
+
+        await alignButton.click();
+        await alignDropdown.selectOption(alignmentNames[1]);
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith(alignments[1]);
+      });
+    });
+
+    describe('change link', () => {
+      it('setting link without selection should append underlined text', async () => {
+        await driver.addLink('wix.com');
+        await driver.blur();
+        expect(onChange).toBeCalledWith(
+          '<p class="font_8">plain text<a href="http://wix.com"><u>http://wix.com</u></a></p>',
+        );
+      });
+
+      it('setting link with selection wrap text into link and underline it', async () => {
+        await driver.selectText(editor);
+        await driver.addLink('wix.com');
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith(
+          '<p class="font_8"><a href="http://wix.com"><u>plain text</u></a></p>',
+        );
+      });
+
+      it('setting link for underlined text should not underline it again', async () => {
+        await driver.selectText(editor);
+
+        const underlineButton = driver.getToolbarButtonTestkit('underline');
+        await underlineButton.click();
+
+        await driver.addLink('wix.com');
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith(
+          '<p class="font_8"><a href="http://wix.com"><u>plain text</u></a></p>',
+        );
+      });
+
+      it('should be possible to non underline link', async () => {
+        await driver.selectText(editor);
+        await driver.addLink('wix.com');
+
+        const underlineButton = driver.getToolbarButtonTestkit('underline');
+        await underlineButton.click();
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith(
+          '<p class="font_8"><a href="http://wix.com">plain text</a></p>',
+        );
+      });
+    });
+  });
+
+  describe('special class names', () => {
+    const value = '<p class="p3 p8">text</p>';
+
+    beforeEach(async () => {
+      driver = renderWithProps({ value, onChange });
+      await driver.select(dataHook).waitToBePresent();
+    });
+
+    it('should remove special class name after change font and keep valid other class names', async () => {
+      await driver.selectText(editor);
+
+      const headerButton = driver.getToolbarButtonTestkit('header');
+      await headerButton.click();
+
+      const headerDropdown = driver.getToolbarDropdownTestkit('header');
+      await headerDropdown.selectOption('unstyled');
+
+      await driver.blur();
+      const expectedValue = '<p class="font_8 p3 p8">text</p>';
+      expect(onChange).toBeCalledWith(expectedValue);
+    });
+  });
+
+  describe('render with readOnly and value', () => {
+    beforeEach(async () => {
+      driver = renderWithProps({
+        value: 'this is text',
+        readOnly: true,
+        onChange,
+      });
+      await driver.select(dataHook).waitToBePresent();
+    });
+
+    it('should not render toolbar', () => {
+      expect(driver.toolbar.query()).not.toBeInTheDocument();
+    });
+  });
+
+  describe('applying reformatting to html', () => {
+    it('multiple nested styles should keep the order', () => {
+      assertReformat(
+        `
+                <p>
+                    <span style="color:#fffbfb">
+                        <span style="font-family:sans-serif">
+                            <span style="background-color:#4d4d4d">text</span>
+                        </span>
+                    </span>
+                </p>
+                `,
+        `
+                <p class="font_8">
+                    <span style="color: rgb(255, 251, 251)">
+                        <span style="font-family: sans-serif">
+                            <span style="background-color: rgb(77, 77, 77)">text</span>
+                        </span>
+                    </span>
+                </p>
+                `,
+      );
+    });
+
+    it('multiple ZERO_WIDTH_SPACE should not create more than one empty line', () => {
+      assertReformat(
+        `
+                <p><span>text1</span></p>
+                <p><span>${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}</span></p>
+                <p><span>text2</span></p>
+                `,
+        `
+                <p class="font_8">text1</p>
+                <p class="font_8"><br></p>
+                <p class="font_8">text2${ZERO_WIDTH_SPACE}</p>
+                `,
+      );
+    });
+
+    it('should not create extra empty line when nested empty spans', () => {
+      assertReformat(
+        `
+                <p><span style="font-family:arial">text1</span></p>
+                <p><span><span>${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}</span>${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}</span></p>
+                <p><span>text2</span></p>
+                `,
+        `
+                <p class="font_8"><span style="font-family:arial">text1</span></p>
+                <p class="font_8"><br></p>
+                <p class="font_8">text2${ZERO_WIDTH_SPACE}</p>
+                `,
+      );
+    });
+
+    it('empty block should be replaced with new line', () => {
+      assertReformat(
+        `
+                <p><span style="font-family:arial">text1</span></p>
+                <p><span style="font-family:arial"></span></p>
+                <p><span style="font-family:arial">text2</span></p>
+                <h2><span></span></h2>
+                <h2><span style="font-family:arial">text3</span></h2>
+                `,
+        `
+                <p class="font_8"><span style="font-family:arial">text1</span></p>
+                <p class="font_8"><br></p>
+                <p class="font_8"><span style="font-family:arial">text2</span></p>
+                <h2 class="font_2"><br></h2>
+                <h2 class="font_2"><span style="font-family:arial">text3</span></h2>
+                `,
+      );
+    });
+
+    it('should keep all inline styles in block elements', () => {
+      assertReformat(
+        `
+                <ul>
+                    <li>
+                        <p style="font-size:19px">
+                            <span style="font-size:17px">
+                                <span style="font-family:times">text</span>
+                            </span>
+                        </p>
+                    </li>
+                </ul>
+                `,
+        `
+                <ul class="font_8">
+                    <li>
+                        <p class="font_8">
+                            <span style="font-size:19px">
+                                <span style="font-size: 17px">
+                                    <span style="font-family: times">text</span>
+                                </span>
+                            </span>
+                        </p>
+                    </li>
+                </ul>
+                `,
+      );
+    });
+
+    it('should keep all inline styles on UL element', () => {
+      assertReformat(
+        `
+                <ul style="margin-left:0px">
+                    <li style="font-family:arial">
+                        text
+                    </li>
+                </ul>
+                `,
+        `
+                <ul class="font_8">
+                    <li style="font-family:arial;margin-left:0px">
+                        <p class="font_8" style="font-family: arial; margin-left: 0px">
+                            text
+                        </p>
+                    </li>
+                </ul>
+                `,
+      );
+    });
+
+    it('should keep paragraphs in list items', () => {
+      assertReformat(
+        `
+                <ul>
+                    <li>
+                        <p>
+                            text
+                        </p>
+                    </li>
+                </ul>
+                `,
+        `
+                <ul class="font_8">
+                    <li>
+                        <p class="font_8">
+                            <span>
+                                text
+                            </span>
+                        </p>
+                    </li>
+                </ul>
+                `,
+      );
+    });
+
+    it('should keep headers in list items', () => {
+      assertReformat(
+        `
+                <ul>
+                    <li>
+                        <h2>
+                            text
+                        </h2>
+                    </li>
+                </ul>
+                `,
+        `
+                <ul class="font_2">
+                    <li>
+                        <h2 class="font_2">
+                            text
+                        </h2>
+                    </li>
+                </ul>
+                `,
+      );
+    });
+
+    it('should keep links mixed with text in list', () => {
+      assertReformat(
+        `
+                <ul>
+                    <li>
+                        <p>
+                            <span style="font-family:times">
+                                text1
+                                <span style="text-decoration:underline">
+                                    <a href="ftp://djigurda.com">
+                                        text2
+                                    </a>
+                                </span>
+                            </span>
+                        </p>
+                    </li>
+                </ul>
+                `,
+        `
+                <ul class="font_8">
+                    <li>
+                        <p class="font_8">
+                            <span style="display: inline">
+                                <span style="font-family:times">
+                                    text1
+                                </span>
+                            </span>
+                            <a href="ftp://djigurda.com">
+                                <span style="display: inline">
+                                    <span style="font-family:times">
+                                        <u>
+                                            text2
+                                        </u>
+                                    </span>
+                                </span>
+                            </a>
+                        </p>
+                    </li>
+                </ul>
+                `,
+      );
+    });
+
+    it('should correctly work with special class names', () => {
+      assertReformat(
+        `
+                <p class="font_8">text1</p>
+                <p class="font_8 other-class-name">text2${ZERO_WIDTH_SPACE}</p>
+                `,
+        `
+                <p class="font_8">text1</p>
+                <p class="font_8 other-class-name">text2${ZERO_WIDTH_SPACE}</p>
+                `,
+      );
+    });
+
+    it('editing the RTL text should add "dir" attribute and style', () => {
+      const text = 'בני חורין ושווים';
+      assertReformat(
+        text,
+        `<p dir="RTL" class="font_8" style="text-align:right">${text}</p>`,
+      );
+    });
+
+    it('editing the RTL text in lists should add "dir" attribute and style', () => {
+      const text = 'בני חורין ושווים';
+      assertReformat(
+        `<ul><li>${text}</li></ul>`,
+        `<ul class="font_8"><li style="text-align:right" dir="RTL"><p dir="RTL" class="font_8" style="text-align:right">${text}</p></li></ul>`,
+      );
+    });
+
+    it("editing the RTL text in lists shouldn't change style attribute if it already defined", () => {
+      const text = 'בני חורין ושווים';
+      assertReformat(
+        `<ul><li style="text-align:left">${text}</li></ul>`,
+        `<ul class="font_8"><li style="text-align:left" dir="RTL"><p dir="RTL" class="font_8" style="text-align:left">${text}</p></li></ul>`,
+      );
+    });
+
+    it('should correctly work with headings in list items', () => {
+      assertReformat(
+        `
+                <ul>
+                    <li>
+                        <h2>plain text</h2>
+                    </li>
+                    <li>plain text</li>
+                </ul>
+                `,
+        `
+                <ul class="font_2">
+                    <li>
+                        <h2 class="font_2">plain text</h2>
+                    </li>
+                    <li><p class="font_8">plain text</p></li>
+                </ul>
+                `,
+      );
+    });
+
+    it('should correctly work with nested lists', () => {
+      assertReformat(
+        `
+                <h1 class="font_0">
+                    What a rich <span style="color: rgb(199, 111, 44)">text</span>
+                </h1>
+                <ol class="font_0">
+                    <li>
+                    <h1 class="font_0">h1</h1>
+                    <ol>
+                        <li><h2 class="font_2">h2</h2></li>
+                        <li><h3 class="font_3">h3</h3></li>
+                    </ol>
+                    </li>
+                    <li>
+                    <p class="font_7">p1</p>
+                    <ol>
+                        <li>
+                        <p class="font_8">p2</p>
+                        <ol>
+                            <li><p class="font_9">p3</p></li>
+                        </ol>
+                        </li>
+                    </ol>
+                    </li>
+                </ol>
+                <ul class="font_0">
+                    <li>
+                    <h1 class="font_0">h1</h1>
+                    <ul>
+                        <li>
+                        <h2 class="font_2">h2</h2>
+                        <ul>
+                            <li><h3 class="font_3">h3</h3></li>
+                        </ul>
+                        </li>
+                    </ul>
+                    <ul>
+                        <li><p class="font_7">p1</p></li>
+                    </ul>
+                    </li>
+                    <li><p class="font_8">p2</p></li>
+                    <li><p class="font_9">p3</p></li>
+                </ul>
+                `,
+        `
+                <h1 class="font_0">What a rich <span style="color: rgb(199, 111, 44)">text</span></h1>
+                <ol class="font_0">
+                    <li><h1 class="font_0">h1</h1><ol><li><h2 class="font_2">h2</h2></li><li><h3 class="font_3">h3</h3></li></ol></li>
+                    <li><p class="font_7">p1</p><ol><li><p class="font_8">p2</p><ol><li><p class="font_9">p3</p></li></ol></li></ol></li>
+                </ol>
+                <ul class="font_0">
+                    <li><h1 class="font_0">h1</h1><ul><li><h2 class="font_2">h2</h2><ul><li><h3 class="font_3">h3</h3></li></ul></li></ul><ul><li><p class="font_7">p1</p></li></ul></li>
+                    <li><p class="font_8">p2</p></li>
+                    <li><p class="font_9">p3</p></li>
+                </ul>
+                `,
+      );
+    });
+
+    it('should correctly work with breaks', () => {
+      assertReformat(
+        `<p>text</p><br><p>text after break</p>`,
+        `
+                    <p class="font_8">text</p>
+                    <p class="font_8"><br></p>
+                    <p class="font_8">text after break</p>
+                `,
+      );
+      assertReformat(
+        `<p>text<br>text after break</p>`,
+        `<p class="font_8">
+                    text<br>text after break
+                </p>`,
+      );
+    });
+  });
+
+  describe('List indentation', () => {
+    const baseListValue = trimHTML(`
+            <ul class="font_8">
+                <li><p class="font_8">option 1</p></li>
+                <li><p class="font_8">option 2</p></li>
+                <li><p class="font_8">option 3</p></li>
+            </ul>
+            `);
+
+    async function setup(initialValue: string) {
+      driver = renderWithProps({ value: initialValue, onChange });
+      await driver.select(dataHook).waitToBePresent();
+    }
+
+    describe('Tab key indentation', () => {
+      it('pressing Tab on first LI should not add indentation', async () => {
+        await setup(baseListValue);
+
+        await driver.selectText(editor, 'main', 'li', 'option 1');
+        pressKeyOnActiveElement('Tab');
+        await driver.blur();
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(baseListValue),
+        );
+      });
+
+      it('pressing Tab on second LI should add indentation', async () => {
+        await setup(baseListValue);
+
+        await driver.selectText(editor, 'main', 'li', 'option 2');
+        pressKeyOnActiveElement('Tab');
+        await driver.blur();
+
+        const expectedOutput = `
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li><p class="font_8">option 2</p></li>
+                            </ul>
+                        </li>
+                        <li><p class="font_8">option 3</p></li>
+                    </ul>
+                `;
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(expectedOutput),
+        );
+      });
+
+      it('pressing Tab twice should add only one indentation', async () => {
+        await setup(baseListValue);
+
+        await driver.selectText(editor, 'main', 'li', 'option 2');
+        pressKeyOnActiveElement('Tab');
+        pressKeyOnActiveElement('Tab');
+        await driver.blur();
+
+        const expectedOutput = `
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li><p class="font_8">option 2</p></li>
+                            </ul>
+                        </li>
+                        <li><p class="font_8">option 3</p></li>
+                    </ul>
+                `;
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(expectedOutput),
+        );
+      });
+
+      it('pressing Tab on first LI of second list should not add indentation', async () => {
+        const valueWithTwoLists = trimHTML(`
+                    <ul class="font_8">
+                        <li><p class="font_8">option 1</p></li>
+                    </ul>
+                    <ol class="font_8">
+                        <li><p class="font_8">option 2</p></li>
+                        <li><p class="font_8">option 3</p></li>
+                    </ol>
+                `);
+
+        await setup(valueWithTwoLists);
+
+        await driver.selectText(editor, 'main', 'li', 'option 2');
+        pressKeyOnActiveElement('Tab');
+        await driver.blur();
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(valueWithTwoLists),
+        );
+      });
+
+      it('pressing Tab on LI with max depth should not add indentation', async () => {
+        const valueWithMaxDepth = trimHTML(`
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 2</p>
+                                    <ul>
+                                        <li>
+                                            <p class="font_8">option 3</p>
+                                            <ul>
+                                                <li>
+                                                    <p class="font_8">option 4</p>
+                                                    <ul>
+                                                        <li>
+                                                            <p class="font_8">option 5</p>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                `);
+
+        await setup(valueWithMaxDepth);
+
+        await driver.selectText(editor, 'main', 'li', 'option 5');
+        pressKeyOnActiveElement('Tab');
+        await driver.blur();
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(valueWithMaxDepth),
+        );
+      });
+
+      it('pressing Tab on LI with depth=0 after LI with max depth should add indentation until maxDepth', async () => {
+        const valueWithMaxDepth = trimHTML(`
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 2</p>
+                                    <ul>
+                                        <li>
+                                            <p class="font_8">option 3</p>
+                                            <ul>
+                                                <li>
+                                                    <p class="font_8">option 4</p>
+                                                    <ul>
+                                                        <li>
+                                                            <p class="font_8">option 5</p>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <p class="font_8">option 6</p>
+                        </li>
+                    </ul>
+                `);
+
+        await setup(valueWithMaxDepth);
+
+        await driver.selectText(editor, 'main', 'li', 'option 6');
+        pressKeyOnActiveElement('Tab');
+        pressKeyOnActiveElement('Tab');
+        pressKeyOnActiveElement('Tab');
+        pressKeyOnActiveElement('Tab');
+        await driver.blur();
+
+        const expectedOutput = `
+                     <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 2</p>
+                                    <ul>
+                                        <li>
+                                            <p class="font_8">option 3</p>
+                                            <ul>
+                                                <li>
+                                                <p class="font_8">option 4</p>
+                                                <ul>
+                                                    <li>
+                                                        <p class="font_8">option 5</p>
+                                                    </li>
+                                                    <li>
+                                                        <p class="font_8">option 6</p>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                `;
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(expectedOutput),
+        );
+      });
+    });
+
+    describe('Shift+Tab outdent', () => {
+      it('pressing Shift+Tab should remove indentation from nested LI', async () => {
+        const valueWithNestedList = trimHTML(`
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 2</p>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <p class="font_8">option 3</p>
+                        </li>
+                    </ul>
+                `);
+
+        await setup(valueWithNestedList);
+
+        await driver.selectText(editor, 'main', 'li', 'option 2');
+        pressKeyOnActiveElement('Tab', { shiftKey: true });
+        await driver.blur();
+
+        const expectedOutput = `
+                    <ul class="font_8">
+                        <li><p class="font_8">option 1</p></li>
+                        <li><p class="font_8">option 2</p></li>
+                        <li><p class="font_8">option 3</p></li>
+                    </ul>
+                `;
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(expectedOutput),
+        );
+      });
+
+      it('pressing Shift+Tab should remove 1 indentation on focused LI and all its nested LIs', async () => {
+        const valueWithMultipleNesting = trimHTML(`
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 2</p>
+                                    <ul>
+                                        <li><p class="font_8">option 3</p></li>
+                                        <li><p class="font_8">option 4</p></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                `);
+
+        await setup(valueWithMultipleNesting);
+
+        await driver.selectText(editor, 'main', 'li', 'option 2');
+        pressKeyOnActiveElement('Tab', { shiftKey: true });
+        await driver.blur();
+
+        const expectedOutput = `
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                        </li>
+                        <li>
+                            <p class="font_8">option 2</p>
+                            <ul>
+                                <li><p class="font_8">option 3</p></li>
+                                <li><p class="font_8">option 4</p></li>
+                            </ul>
+                        </li>
+                    </ul>
+                `;
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(expectedOutput),
+        );
+      });
+
+      it('pressing Shift+Tab 4 times should remove 4 indentations on focused LI and all its nested LIs', async () => {
+        const valueWithMaxDepth = trimHTML(`
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 2</p>
+                                    <ul>
+                                        <li>
+                                            <p class="font_8">option 3</p>
+                                            <ul>
+                                                <li>
+                                                    <p class="font_8">option 4</p>
+                                                    <ul>
+                                                        <li>
+                                                            <p class="font_8">option 5</p>
+                                                        </li>
+                                                        <li>
+                                                            <p class="font_8">option 6</p>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                `);
+
+        await setup(valueWithMaxDepth);
+
+        await driver.selectText(editor, 'main', 'li', 'option 4');
+        pressKeyOnActiveElement('Tab', { shiftKey: true });
+        pressKeyOnActiveElement('Tab', { shiftKey: true });
+        pressKeyOnActiveElement('Tab', { shiftKey: true });
+        pressKeyOnActiveElement('Tab', { shiftKey: true });
+        await driver.blur();
+
+        const expectedOutput = `
+                    <ul class="font_8">
+                        <li>
+                            <p class="font_8">option 1</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 2</p>
+                                    <ul>
+                                        <li>
+                                            <p class="font_8">option 3</p>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <p class="font_8">option 4</p>
+                            <ul>
+                                <li>
+                                    <p class="font_8">option 5</p>
+                                </li>
+                                <li>
+                                    <p class="font_8">option 6</p>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                `;
+
+        expect(trimmedHTMLFromLastCall(onChange)).toEqual(
+          trimHTML(expectedOutput),
+        );
+      });
+    });
+  });
+
+  describe('with headings disabled', () => {
+    describe('render component', () => {
+      const value = 'plain text';
+
+      beforeEach(async () => {
+        driver = renderWithProps({
+          value,
+          onChange,
+          headingsEnabled: false,
+        });
+        await driver.select(dataHook).waitToBePresent();
+      });
+
+      it('heading dropdown should not be visible', async () => {
+        const headerButton = driver.getToolbarButtonTestkit('header');
+        await expect(headerButton.exists()).resolves.toBeFalsy();
+      });
+
+      it('pressing "bold" button should make text bold', async () => {
+        await driver.selectText(editor);
+        const boldButton = driver.getToolbarButtonTestkit('bold');
+
+        await boldButton.click();
+        await expect(boldButton.isButtonSelected()).resolves.toBeTruthy();
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith('<p><strong>plain text</strong></p>');
+      });
+
+      it('pressing "italic" button should make text italic', async () => {
+        await driver.selectText(editor);
+        const italicButton = driver.getToolbarButtonTestkit('italic');
+
+        await italicButton.click();
+        await expect(italicButton.isButtonSelected()).resolves.toBeTruthy();
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith('<p><em>plain text</em></p>');
+      });
+
+      it('pressing "underline" button should make text underline', async () => {
+        await driver.selectText(editor);
+        const underlineButton = driver.getToolbarButtonTestkit('underline');
+
+        await underlineButton.click();
+        await expect(underlineButton.isButtonSelected()).resolves.toBeTruthy();
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith('<p><u>plain text</u></p>');
+      });
+
+      it('pressing "ordered list" button should wrap text into list', async () => {
+        await driver.selectText(editor);
+        const orderedListButton = driver.getToolbarButtonTestkit('ol');
+
+        await orderedListButton.click();
+        await expect(
+          orderedListButton.isButtonSelected(),
+        ).resolves.toBeTruthy();
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith(
+          `<ol>\n  <li><p>plain text</p></li>\n</ol>`,
+        );
+      });
+
+      it('pressing "unordered list" button should wrap text into list', async () => {
+        await driver.selectText(editor);
+        const unorderedListButton = driver.getToolbarButtonTestkit('ul');
+
+        await unorderedListButton.click();
+        await expect(
+          unorderedListButton.isButtonSelected(),
+        ).resolves.toBeTruthy();
+
+        await driver.blur();
+        expect(onChange).toBeCalledWith(
+          `<ul>\n  <li><p>plain text</p></li>\n</ul>`,
+        );
+      });
+
+      describe('change alignment', () => {
+        const alignmentNames = ['left', 'center', 'right', 'justify'];
+        const alignments = [
+          '<p style="text-align: left">plain text</p>',
+          '<p style="text-align: center">plain text</p>',
+          '<p style="text-align: right">plain text</p>',
+          '<p style="text-align: justify">plain text</p>',
+        ];
+
+        alignments.forEach((alignment, index) => {
+          it(`selecting ${index} dropdown item should change alignment`, async () => {
+            await driver.selectText(editor);
+
+            const alignButton = driver.getToolbarButtonTestkit('align');
+            await alignButton.click();
+
+            const alignDropdown = driver.getToolbarDropdownTestkit('align');
+            await alignDropdown.selectOption(alignmentNames[index]);
+
+            await driver.blur();
+            expect(onChange).toBeCalledWith(alignment);
+          });
+        });
+
+        it('switching between alignments should change alignment correctly', async () => {
+          await driver.selectText(editor);
+
+          const alignButton = driver.getToolbarButtonTestkit('align');
+          await alignButton.click();
+
+          const alignDropdown = driver.getToolbarDropdownTestkit('align');
+          await alignDropdown.selectOption(alignmentNames[0]);
+
+          await alignButton.click();
+          await alignDropdown.selectOption(alignmentNames[1]);
+
+          await driver.blur();
+          expect(onChange).toBeCalledWith(alignments[1]);
+        });
+      });
+
+      describe('change link', () => {
+        it('setting link without selection should append underlined text', async () => {
+          await driver.addLink('wix.com');
+          await driver.blur();
+          expect(onChange).toBeCalledWith(
+            '<p>plain text<a href="http://wix.com"><u>http://wix.com</u></a></p>',
+          );
+        });
+
+        it('setting link with selection wrap text into link and underline it', async () => {
+          await driver.selectText(editor);
+          await driver.addLink('wix.com');
+
+          await driver.blur();
+          expect(onChange).toBeCalledWith(
+            '<p><a href="http://wix.com"><u>plain text</u></a></p>',
+          );
+        });
+
+        it('setting link for underlined text should not underline it again', async () => {
+          await driver.selectText(editor);
+
+          const underlineButton = driver.getToolbarButtonTestkit('underline');
+          await underlineButton.click();
+
+          await driver.addLink('wix.com');
+
+          await driver.blur();
+          expect(onChange).toBeCalledWith(
+            '<p><a href="http://wix.com"><u>plain text</u></a></p>',
+          );
+        });
+
+        it('should be possible to non underline link', async () => {
+          await driver.selectText(editor);
+          await driver.addLink('wix.com');
+
+          const underlineButton = driver.getToolbarButtonTestkit('underline');
+          await underlineButton.click();
+
+          await driver.blur();
+          expect(onChange).toBeCalledWith(
+            '<p><a href="http://wix.com">plain text</a></p>',
+          );
+        });
+      });
+    });
+
+    describe('applying reformatting to html', () => {
+      it('multiple nested styles should keep the order', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <p>
+                        <span style="color:#fffbfb">
+                            <span style="font-family:sans-serif">
+                                <span style="background-color:#4d4d4d">text</span>
+                            </span>
+                        </span>
+                    </p>
+                    `,
+          `
+                    <p>
+                        <span style="color: rgb(255, 251, 251)">
+                            <span style="font-family: sans-serif">
+                                <span style="background-color: rgb(77, 77, 77)">text</span>
+                            </span>
+                        </span>
+                    </p>
+                    `,
+        );
+      });
+
+      it('multiple ZERO_WIDTH_SPACE should not create more than one empty line', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <p><span>text1</span></p>
+                    <p><span>${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}</span></p>
+                    <p><span>text2</span></p>
+                    `,
+          `
+                    <p>text1</p>
+                    <p><br></p>
+                    <p>text2${ZERO_WIDTH_SPACE}</p>
+                    `,
+        );
+      });
+
+      it('should not create extra empty line when nested empty spans', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <p><span style="font-family:arial">text1</span></p>
+                    <p><span><span>${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}</span>${ZERO_WIDTH_SPACE}${ZERO_WIDTH_SPACE}</span></p>
+                    <p><span>text2</span></p>
+                    `,
+          `
+                    <p><span style="font-family:arial">text1</span></p>
+                    <p><br></p>
+                    <p>text2${ZERO_WIDTH_SPACE}</p>
+                    `,
+        );
+      });
+
+      it('empty block should be replaced with new line', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <p><span style="font-family:arial">text1</span></p>
+                    <p><span style="font-family:arial"></span></p>
+                    <p><span style="font-family:arial">text2</span></p>
+                    <h2><span></span></h2>
+                    <h2><span style="font-family:arial">text3</span></h2>
+                    `,
+          `
+                    <p><span style="font-family:arial">text1</span></p>
+                    <p><br></p>
+                    <p><span style="font-family:arial">text2</span></p>
+                    <p><br></p>
+                    <p><span style="font-family:arial">text3</span></p>
+                    `,
+        );
+      });
+
+      it('should keep all inline styles in block elements', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <ul>
+                        <li>
+                            <p style="font-size:19px">
+                                <span style="font-size:17px">
+                                    <span style="font-family:times">text</span>
+                                </span>
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+          `
+                    <ul>
+                        <li>
+                            <p>
+                                <span style="font-size:19px">
+                                    <span style="font-size: 17px">
+                                        <span style="font-family: times">text</span>
+                                    </span>
+                                </span>
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+        );
+      });
+
+      it('should keep all inline styles on UL element', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <ul style="margin-left:0px">
+                        <li style="font-family:arial">
+                            text
+                        </li>
+                    </ul>
+                    `,
+          `
+                    <ul>
+                        <li style="font-family:arial;margin-left:0px">
+                            <p style="font-family: arial; margin-left: 0px">
+                                text
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+        );
+      });
+
+      it('should keep paragraphs in list items', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <ul>
+                        <li>
+                            <p>
+                                text
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+          `
+                    <ul>
+                        <li>
+                            <p>
+                                <span>
+                                    text
+                                </span>
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+        );
+      });
+
+      it('should not keep headers in list items ', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <ul>
+                        <li>
+                            <h2>
+                                text
+                            </h2>
+                        </li>
+                    </ul>
+                    `,
+          `
+                    <ul>
+                        <li>
+                            <p>
+                                text
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+        );
+      });
+
+      it('should keep links mixed with text in list', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <ul>
+                        <li>
+                            <p>
+                                <span style="font-family:times">
+                                    text1
+                                    <span style="text-decoration:underline">
+                                        <a href="ftp://djigurda.com">
+                                            text2
+                                        </a>
+                                    </span>
+                                </span>
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+          `
+                    <ul>
+                        <li>
+                            <p>
+                                <span style="display: inline">
+                                    <span style="font-family:times">
+                                        text1
+                                    </span>
+                                </span>
+                                <a href="ftp://djigurda.com">
+                                    <span style="display: inline">
+                                        <span style="font-family:times">
+                                            <u>
+                                                text2
+                                            </u>
+                                        </span>
+                                    </span>
+                                </a>
+                            </p>
+                        </li>
+                    </ul>
+                    `,
+        );
+      });
+
+      it('should correctly work with special class names', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <p class="font_8">text1</p>
+                    <p class="font_8 other-class-name">text2${ZERO_WIDTH_SPACE}</p>
+                    `,
+          `
+                    <p class="font_8">text1</p>
+                    <p class="font_8 other-class-name">text2${ZERO_WIDTH_SPACE}</p>
+                    `,
+        );
+      });
+
+      it('editing the RTL text should add "dir" attribute and style', () => {
+        const text = 'בני חורין ושווים';
+        assertReformatWithoutHeadings(
+          text,
+          `<p dir="RTL" style="text-align:right">${text}</p>`,
+        );
+      });
+
+      it('editing the RTL text in lists should add "dir" attribute and style', () => {
+        const text = 'בני חורין ושווים';
+        assertReformatWithoutHeadings(
+          `<ul><li>${text}</li></ul>`,
+          `<ul><li style="text-align:right" dir="RTL"><p dir="RTL" style="text-align:right">${text}</p></li></ul>`,
+        );
+      });
+
+      it("editing the RTL text in lists shouldn't change style attribute if it already defined", () => {
+        const text = 'בני חורין ושווים';
+        assertReformatWithoutHeadings(
+          `<ul><li style="text-align:left">${text}</li></ul>`,
+          `<ul><li style="text-align:left" dir="RTL"><p dir="RTL" style="text-align:left">${text}</p></li></ul>`,
+        );
+      });
+
+      it('should replace headings in list items', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <ul>
+                        <li>
+                            <h2>plain text</h2>
+                        </li>
+                        <li>plain text</li>
+                    </ul>
+                    `,
+          `
+                    <ul>
+                        <li>
+                            <p>plain text</p>
+                        </li>
+                        <li>
+                            <p>plain text</p>
+                        </li>
+                    </ul>
+                    `,
+        );
+      });
+
+      it('should correctly work with nested lists', () => {
+        assertReformatWithoutHeadings(
+          `
+                    <h1 class="font_0">
+                        What a rich <span style="color: rgb(199, 111, 44)">text</span>
+                    </h1>
+                    <ol>
+                        <li>
+                        <h1 class="font_0">h1</h1>
+                        <ol>
+                            <li><h2 class="font_2">h2</h2></li>
+                            <li><h3 class="font_3">h3</h3></li>
+                        </ol>
+                        </li>
+                        <li>
+                        <p class="font_7">p1</p>
+                        <ol>
+                            <li>
+                            <p class="font_8">p2</p>
+                            <ol>
+                                <li><p class="font_9">p3</p></li>
+                            </ol>
+                            </li>
+                        </ol>
+                        </li>
+                    </ol>
+                    <ul>
+                        <li>
+                        <h1 class="font_0">h1</h1>
+                        <ul>
+                            <li>
+                            <h2 class="font_2">h2</h2>
+                            <ul>
+                                <li><h3 class="font_3">h3</h3></li>
+                            </ul>
+                            </li>
+                        </ul>
+                        <ul>
+                            <li><p class="font_7">p1</p></li>
+                        </ul>
+                        </li>
+                        <li><p class="font_8">p2</p></li>
+                        <li><p class="font_9">p3</p></li>
+                    </ul>
+                    `,
+          `
+                    <p class="font_0">What a rich <span style="color: rgb(199, 111, 44)">text</span></p>
+                    <ol>
+                        <li><p>h1</p><ol><li><p>h2</p></li><li><p>h3</p></li></ol></li>
+                        <li>
+                            <p><span>p1</span></p>
+                            <ol>
+                                <li>
+                                    <p><span>p2</span></p>
+                                    <ol>
+                                        <li>
+                                            <p><span>p3</span></p>
+                                        </li>
+                                    </ol>
+                                </li>
+                            </ol>
+                        </li>
+                    </ol>
+                    <ul>
+                        <li>
+                            <p>h1</p>
+                            <ul>
+                                <li>
+                                    <p>h2</p>
+                                    <ul>
+                                        <li>
+                                            <p>h3</p>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                            <ul>
+                                <li>
+                                    <p><span>p1</span></p>
+                                </li>
+                            </ul>
+                        </li>
+                        <li>
+                            <p><span>p2</span></p>
+                        </li>
+                        <li>
+                            <p><span>p3</span></p>
+                        </li>
+                    </ul>
+                    `,
+        );
+      });
+
+      it('should correctly work with breaks', () => {
+        assertReformatWithoutHeadings(
+          `<p>text</p><br><p>text after break</p>`,
+          `
+                        <p>text</p>
+                        <p><br></p>
+                        <p>text after break</p>
+                    `,
+        );
+        assertReformatWithoutHeadings(
+          `<p>text<br>text after break</p>`,
+          `<p>
+                        text<br>text after break
+                    </p>`,
+        );
+      });
+    });
+  });
+});
+
+function trimmedHTMLFromLastCall(onChange: jest.Mock) {
+  return trimHTML(onChange.mock.calls.pop()?.pop() || '');
+}