TINY-10892: Fix deleting from P with IMG into LI would create unwanted font-styles on Chrome

.changes/unreleased/tinymce-TINY-10892-2024-05-12.yaml

@@ -0,0 +1,6 @@
+project: tinymce
+kind: Fixed
+body: Deleting into a list from a paragraph that has an `img` tag could cause extra inline styles to be added.
+time: 2024-05-12T23:00:56.388965+01:00
+custom:
+  Issue: TINY-10892

modules/tinymce/src/core/main/ts/delete/BlockMergeBoundary.ts

@@ -57,7 +57,7 @@ const isEditable = (blockBoundary: BlockBoundary): boolean =>
   NodeType.isContentEditableFalse(blockBoundary.from.block.dom) === false && NodeType.isContentEditableFalse(blockBoundary.to.block.dom) === false;
 
 const hasValidBlocks = (blockBoundary: BlockBoundary): boolean => {
-  const isValidBlock = (block: SugarElement<Element>) => ElementType.isTextBlock(block) || TransparentElements.hasBlockAttr(block.dom);
+  const isValidBlock = (block: SugarElement<Element>) => ElementType.isTextBlock(block) || TransparentElements.hasBlockAttr(block.dom) || ElementType.isListItem(block);
   return isValidBlock(blockBoundary.from.block) && isValidBlock(blockBoundary.to.block);
 };
 

modules/tinymce/src/core/test/ts/webdriver/delete/QuirksChromeTest.ts

@@ -0,0 +1,141 @@
+import { RealKeys } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+import { TinyAssertions, TinyHooks } from '@ephox/wrap-mcagar';
+
+import Editor from 'tinymce/core/api/Editor';
+
+describe('webdriver.tinymce.core.delete.QuirksChromeTest', () => {
+
+  const hook = TinyHooks.bddSetupLight<Editor>({
+    base_url: '/project/tinymce/js/tinymce'
+  }, [], true);
+
+  it('TINY-10892: Backspace from beginning of P that contains IMG into OL when the LI does NOT end with an inline element', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ol>
+  <li>sdadsa</li>
+  </ol>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('em') as HTMLElement, 0);
+    await RealKeys.pSendKeysOn('iframe => body => em', [ RealKeys.backspace() ]);
+    TinyAssertions.assertContent(editor,
+      `<ol>
+<li>sdadsa<em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ol>`
+    );
+  });
+
+  it('TINY-10892: Backspace from beginning of P that contains IMG into OL when the LI DOES end with an inline element', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ol>
+  <li>sdadsa <strong>a</strong></li>
+  </ol>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('em') as HTMLElement, 0);
+    await RealKeys.pSendKeysOn('iframe => body => em', [ RealKeys.backspace() ]);
+    TinyAssertions.assertContent(editor,
+      `<ol>
+<li>sdadsa <strong>a</strong><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ol>`
+    );
+  });
+
+  it('TINY-10892: Delete from end of OL when the LI does NOT end with an inline element and has nextSibling P that contains IMG', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ol>
+  <li>a</li>
+  </ol>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('li') as HTMLElement, 1);
+    await RealKeys.pSendKeysOn('iframe => body => li', [ RealKeys.text('\uE017') /* unicode for Delete key */]);
+    TinyAssertions.assertContent(editor,
+      `<ol>
+<li>a<em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ol>`
+    );
+  });
+
+  it('TINY-10892: Delete from end of OL when the LI DOES end with an inline element and has nextSibling P that contains IMG', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ol>
+  <li>a <strong>a</strong></li>
+  </ol>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('strong') as HTMLElement, 1);
+    await RealKeys.pSendKeysOn('iframe => body => strong', [ RealKeys.text('\uE017') /* unicode for Delete key */]);
+    TinyAssertions.assertContent(editor,
+      `<ol>
+<li>a <strong>a</strong><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ol>`
+    );
+  });
+
+  it('TINY-10892: Backspace from beginning of P that contains IMG into UL when the LI does NOT end with an inline element', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ul>
+  <li>sdadsa</li>
+  </ul>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('em') as HTMLElement, 0);
+    await RealKeys.pSendKeysOn('iframe => body => em', [ RealKeys.backspace() ]);
+    TinyAssertions.assertContent(editor,
+      `<ul>
+<li>sdadsa<em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ul>`
+    );
+  });
+
+  it('TINY-10892: Backspace from beginning of P that contains IMG into UL when the LI DOES end with an inline element', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ul>
+  <li>sdadsa <strong>a</strong></li>
+  </ul>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('em') as HTMLElement, 0);
+    await RealKeys.pSendKeysOn('iframe => body => em', [ RealKeys.backspace() ]);
+    TinyAssertions.assertContent(editor,
+      `<ul>
+<li>sdadsa <strong>a</strong><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ul>`
+    );
+  });
+
+  it('TINY-10892: Delete from end of UL when the LI does NOT end with an inline element and has nextSibling P that contains IMG', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ul>
+  <li>a</li>
+  </ul>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('li') as HTMLElement, 1);
+    await RealKeys.pSendKeysOn('iframe => body => li', [ RealKeys.text('\uE017') /* unicode for Delete key */]);
+    TinyAssertions.assertContent(editor,
+      `<ul>
+<li>a<em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ul>`
+    );
+  });
+
+  it('TINY-10892: Delete from end of UL when the LI DOES end with an inline element and has nextSibling P that contains IMG', async () => {
+    const editor = hook.editor();
+    editor.setContent(
+      `<ul>
+  <li>a <strong>a</strong></li>
+  </ul>
+  <p><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada </p>`);
+    editor.selection.setCursorLocation(editor.getDoc().querySelector('strong') as HTMLElement, 1);
+    await RealKeys.pSendKeysOn('iframe => body => strong', [ RealKeys.text('\uE017') /* unicode for Delete key */]);
+    TinyAssertions.assertContent(editor,
+      `<ul>
+<li>a <strong>a</strong><em>sdada</em><img src="#" alt="" width="24" height="24"> dsada</li>
+</ul>`
+    );
+  });
+
+});