self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-23 22:36:32 +02:00
Code Issues Releases Activity

Desktop,Mobile: Resolves #12959: Remove image height limit in Markdown editor (#13717)

Browse Source
This commit is contained in:
Henry Heino
2025-11-18 14:53:14 -08:00
committed by GitHub
parent ae5bc1b849
commit 46c22fffb9
2 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/editor/CodeMirror/extensions/rendering/renderBlockImages.test.ts
View File

@@ -22,11 +22,11 @@ const createEditor = async (initialMarkdown: string, hasImage: boolean) => {
}; };
const findImages = (editor: EditorView) => { const findImages = (editor: EditorView) => {
return editor.dom.querySelectorAll<HTMLDivElement>('div.cm-md-image > .image'); return editor.dom.querySelectorAll<HTMLImageElement>('div.cm-md-image > .image');
}; };
const getImageBackgroundUrls = (editor: EditorView) => { const getImageUrls = (editor: EditorView) => {
return [...findImages(editor)].map(image => image.style.backgroundImage); return [...findImages(editor)].map(image => image.getAttribute('src'));
}; };
describe('renderBlockImages', () => { describe('renderBlockImages', () => {
@@ -60,9 +60,9 @@ describe('renderBlockImages', () => {
const editor = await createEditor('![test](:/a123456789abcdef0123456789abcdef)\n![test 2](:/b123456789abcdef0123456789abcde2)', true); const editor = await createEditor('![test](:/a123456789abcdef0123456789abcdef)\n![test 2](:/b123456789abcdef0123456789abcde2)', true);
// Should have the expected original image URLs // Should have the expected original image URLs
expect(getImageBackgroundUrls(editor)).toMatchObject([ expect(getImageUrls(editor)).toMatchObject([
'url(:/a123456789abcdef0123456789abcdef?r=0)', ':/a123456789abcdef0123456789abcdef?r=0',
'url(:/b123456789abcdef0123456789abcde2?r=0)', ':/b123456789abcdef0123456789abcde2?r=0',
]); ]);
editor.dispatch({ editor.dispatch({
@@ -70,9 +70,9 @@ describe('renderBlockImages', () => {
}); });
await allowImageUrlsToBeFetched(); await allowImageUrlsToBeFetched();
expect(getImageBackgroundUrls(editor)).toMatchObject([ expect(getImageUrls(editor)).toMatchObject([
'url(:/a123456789abcdef0123456789abcdef?r=1)', ':/a123456789abcdef0123456789abcdef?r=1',
'url(:/b123456789abcdef0123456789abcde2?r=0)', ':/b123456789abcdef0123456789abcde2?r=0',
]); ]);
editor.dispatch({ editor.dispatch({
@@ -83,9 +83,9 @@ describe('renderBlockImages', () => {
}); });
await allowImageUrlsToBeFetched(); await allowImageUrlsToBeFetched();
expect(getImageBackgroundUrls(editor)).toMatchObject([ expect(getImageUrls(editor)).toMatchObject([
'url(:/a123456789abcdef0123456789abcdef?r=2)', ':/a123456789abcdef0123456789abcdef?r=2',
'url(:/b123456789abcdef0123456789abcde2?r=1)', ':/b123456789abcdef0123456789abcde2?r=1',
]); ]);
}); });
}); });

23
packages/editor/CodeMirror/extensions/rendering/renderBlockImages.ts
View File

@@ -5,9 +5,6 @@ import { RenderedContentContext } from './types';
import makeBlockReplaceExtension from './utils/makeBlockReplaceExtension'; import makeBlockReplaceExtension from './utils/makeBlockReplaceExtension';
const imageClassName = 'cm-md-image'; const imageClassName = 'cm-md-image';
// Pre-set the image height for performance (allows CodeMirror to better calculate
// the document height while scrolling).
const imageHeight = 200;
class ImageWidget extends WidgetType { class ImageWidget extends WidgetType {
private resolvedSrc_: string; private resolvedSrc_: string;
@@ -26,7 +23,7 @@ class ImageWidget extends WidgetType {
} }
public updateDOM(dom: HTMLElement): boolean { public updateDOM(dom: HTMLElement): boolean {
const image = dom.querySelector<HTMLDivElement>('div.image'); const image = dom.querySelector<HTMLImageElement>('img.image');
if (!image) return false; if (!image) return false;
image.ariaLabel = this.alt_; image.ariaLabel = this.alt_;
@@ -36,7 +33,7 @@ class ImageWidget extends WidgetType {
if (this.resolvedSrc_) { if (this.resolvedSrc_) {
// Use a background-image style property rather than img[src=]. This // Use a background-image style property rather than img[src=]. This
// simplifies setting the image to the correct size/position. // simplifies setting the image to the correct size/position.
image.style.backgroundImage = `url(${JSON.stringify(this.resolvedSrc_)})`; image.src = this.resolvedSrc_;
} }
}; };
@@ -56,7 +53,7 @@ class ImageWidget extends WidgetType {
const container = document.createElement('div'); const container = document.createElement('div');
container.classList.add(imageClassName); container.classList.add(imageClassName);
const image = document.createElement('div'); const image = document.createElement('img');
image.classList.add('image'); image.classList.add('image');
container.appendChild(image); container.appendChild(image);
@@ -66,7 +63,7 @@ class ImageWidget extends WidgetType {
} }
public get estimatedHeight() { public get estimatedHeight() {
return imageHeight; return -1;
} }
} }
@@ -105,12 +102,14 @@ export const testing__resetImageRefreshCounterCache = () => {
const renderBlockImages = (context: RenderedContentContext) => [ const renderBlockImages = (context: RenderedContentContext) => [
EditorView.theme({ EditorView.theme({
[`& .${imageClassName} > div`]: { [`& .${imageClassName} > .image`]: {
height: `${imageHeight}px`, maxWidth: '100%',
backgroundSize: 'contain', minWidth: 0,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
display: 'block', display: 'block',
// Center
marginLeft: 'auto',
marginRight: 'auto',
}, },
}), }),
makeBlockReplaceExtension({ makeBlockReplaceExtension({