Desktop: Fixes #11382: Rich Text Editor: Fix resized images in lists break sub-list items (#11532)

packages/app-cli/tests/html_to_md/image_preserve_size_in_lists.html

@@ -0,0 +1,33 @@
+<ul>
+	<li>
+		<img src=":/0123456789abcdef0123456789abcdef" width="10" height="11"/>
+		<ul>
+			<li>HTML images just before a sublist should have a closing &lt;img&gt; tag added.</li>
+			<li>Otherwise, when rendered to Markdown again, the subsequent list items will be rendered as HTML.</li>
+		</ul>
+	</li>
+	<li>
+		<img src=":/0123456789abcdef0123456789abcdef" width="10" height="11"/>
+		<br/>
+		<strong>A closing tag is also necessary if the image is followed by content on a new line.</strong>
+	</li>
+	<li>
+		<img src=":/0123456789abcdef0123456789abcdef"/>
+		<ul>
+			<li>Similar logic isn't necessary for images converted to Markdown.</li>
+		</ul>
+	</li>
+	<li>
+		<img src=":/0123456789abcdef0123456789abcdef" width="10" height="11"/>
+	</li>
+	<li>It also isn't necessary if the next item is at the same level as the image...</li>
+	<li>
+		...or if the image has text just before it.
+		<img src=":/0123456789abcdef0123456789abcdef" width="10" height="11"/>
+		<ul>
+			<li>
+				See <a href="https://github.com/laurent22/joplin/issues/11382">this issue</a> for details.
+			</li>
+		</ul>
+	</li>
+</ul>

packages/app-cli/tests/html_to_md/image_preserve_size_in_lists.md

@@ -0,0 +1,11 @@
+- <img src=":/0123456789abcdef0123456789abcdef" width="10" height="11"></img>
+    - HTML images just before a sublist should have a closing &lt;img&gt; tag added.
+    - Otherwise, when rendered to Markdown again, the subsequent list items will be rendered as HTML.
+- <img src=":/0123456789abcdef0123456789abcdef" width="10" height="11"></img>  
+    **A closing tag is also necessary if the image is followed by content on a new line.**
+- ![](:/0123456789abcdef0123456789abcdef)
+    - Similar logic isn't necessary for images converted to Markdown.
+- <img src=":/0123456789abcdef0123456789abcdef" width="10" height="11">
+- It also isn't necessary if the next item is at the same level as the image...
+- ...or if the image has text just before it. <img src=":/0123456789abcdef0123456789abcdef" width="10" height="11">
+    - See [this issue](https://github.com/laurent22/joplin/issues/11382) for details.

packages/turndown/src/commonmark-rules.js

@@ -561,7 +561,40 @@ function imageMarkdownFromNode(node, options = null) {
   }, options);
 
   if (options.preserveImageTagsWithSize && (node.getAttribute('width') || node.getAttribute('height'))) {
-    return node.outerHTML;
+    let html = node.outerHTML;
+
+    // To prevent markup immediately after the image from being interpreted as HTML, a closing tag
+    // is sometimes necessary.
+    const needsClosingTag = () => {
+      const parent = node.parentElement;
+      if (!parent || parent.nodeName !== 'LI') return false;
+      const hasClosingTag = html.match(/<\/[a-z]+\/>$/ig);
+      if (hasClosingTag) {
+        return false;
+      }
+
+      const allChildren = [...parent.childNodes];
+      const nonEmptyChildren = allChildren.filter(item => {
+        // Even if surrounded by #text nodes that only contain whitespace, Markdown after
+        // an <img> can still be incorrectly interpreted as HTML. Only non-empty #texts seem
+        // to prevent this.
+        return item.nodeName !== '#text' || item.textContent.trim() !== '';
+      });
+
+      const imageIndex = nonEmptyChildren.indexOf(node);
+      const hasNextSibling = imageIndex + 1 < nonEmptyChildren.length;
+      const nextSiblingName = hasNextSibling ? (
+        nonEmptyChildren[imageIndex + 1].nodeName
+      ) : null;
+
+      const nextSiblingIsNewLine = nextSiblingName === 'UL' || nextSiblingName === 'OL' || nextSiblingName === 'BR';
+      return imageIndex === 0 && nextSiblingIsNewLine;
+    };
+
+    if (needsClosingTag()) {
+      html = html.replace(/[/]?>$/, `></${node.nodeName.toLowerCase()}>`);
+    }
+    return html;
   }
 
   return imageMarkdownFromAttributes({