self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Henry Heino 2024-12-18 03:51:03 -08:00 committed by GitHub
parent 9b50539591
commit c197d89ddc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 78 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/app-cli/tests/html_to_md/image_preserve_size_in_lists.html Normal file
View File

@ -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>

11
packages/app-cli/tests/html_to_md/image_preserve_size_in_lists.md Normal file
View File

@ -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.

35
packages/turndown/src/commonmark-rules.js
View File

@ -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({