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) => {
return editor.dom.querySelectorAll<HTMLDivElement>('div.cm-md-image > .image');
return editor.dom.querySelectorAll<HTMLImageElement>('div.cm-md-image > .image');
};
const getImageBackgroundUrls = (editor: EditorView) => {
return [...findImages(editor)].map(image => image.style.backgroundImage);
const getImageUrls = (editor: EditorView) => {
return [...findImages(editor)].map(image => image.getAttribute('src'));
};
describe('renderBlockImages', () => {
@@ -60,9 +60,9 @@ describe('renderBlockImages', () => {
const editor = await createEditor('![test](:/a123456789abcdef0123456789abcdef)\n![test 2](:/b123456789abcdef0123456789abcde2)', true);
// Should have the expected original image URLs
expect(getImageBackgroundUrls(editor)).toMatchObject([
'url(:/a123456789abcdef0123456789abcdef?r=0)',
'url(:/b123456789abcdef0123456789abcde2?r=0)',
expect(getImageUrls(editor)).toMatchObject([
':/a123456789abcdef0123456789abcdef?r=0',
':/b123456789abcdef0123456789abcde2?r=0',
]);
editor.dispatch({
@@ -70,9 +70,9 @@ describe('renderBlockImages', () => {
});
await allowImageUrlsToBeFetched();
expect(getImageBackgroundUrls(editor)).toMatchObject([
'url(:/a123456789abcdef0123456789abcdef?r=1)',
'url(:/b123456789abcdef0123456789abcde2?r=0)',
expect(getImageUrls(editor)).toMatchObject([
':/a123456789abcdef0123456789abcdef?r=1',
':/b123456789abcdef0123456789abcde2?r=0',
]);
editor.dispatch({
@@ -83,9 +83,9 @@ describe('renderBlockImages', () => {
});
await allowImageUrlsToBeFetched();
expect(getImageBackgroundUrls(editor)).toMatchObject([
'url(:/a123456789abcdef0123456789abcdef?r=2)',
'url(:/b123456789abcdef0123456789abcde2?r=1)',
expect(getImageUrls(editor)).toMatchObject([
':/a123456789abcdef0123456789abcdef?r=2',
':/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';
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 {
private resolvedSrc_: string;
@@ -26,7 +23,7 @@ class ImageWidget extends WidgetType {
}
public updateDOM(dom: HTMLElement): boolean {
const image = dom.querySelector<HTMLDivElement>('div.image');
const image = dom.querySelector<HTMLImageElement>('img.image');
if (!image) return false;
image.ariaLabel = this.alt_;
@@ -36,7 +33,7 @@ class ImageWidget extends WidgetType {
if (this.resolvedSrc_) {
// Use a background-image style property rather than img[src=]. This
// 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');
container.classList.add(imageClassName);
const image = document.createElement('div');
const image = document.createElement('img');
image.classList.add('image');
container.appendChild(image);
@@ -66,7 +63,7 @@ class ImageWidget extends WidgetType {
}
public get estimatedHeight() {
return imageHeight;
return -1;
}
}
@@ -105,12 +102,14 @@ export const testing__resetImageRefreshCounterCache = () => {
const renderBlockImages = (context: RenderedContentContext) => [
EditorView.theme({
[`& .${imageClassName} > div`]: {
height: `${imageHeight}px`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
[`& .${imageClassName} > .image`]: {
maxWidth: '100%',
minWidth: 0,
display: 'block',
// Center
marginLeft: 'auto',
marginRight: 'auto',
},
}),
makeBlockReplaceExtension({