1
0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-23 22:36:32 +02:00

Desktop: Fixes #10733: Fix not-yet-created images lost while editing with the Rich Text Editor (#10734)

This commit is contained in:
Henry Heino
2024-07-16 11:25:23 -07:00
committed by GitHub
parent 9ad1249f11
commit 624bfd9175
10 changed files with 168 additions and 12 deletions

View File

@@ -1,3 +1,4 @@
import { attributesHtml } from './htmlUtils';
import { ItemIdToUrlHandler, OptionsResourceModel } from './types';
const Entities = require('html-entities').AllHtmlEntities;
@@ -123,10 +124,17 @@ export const resourceStatus = function(ResourceModel: OptionsResourceModel, reso
return status;
};
type ImageMarkupData = {
src: string;
alt: string;
title: string;
}|{ src: string; before: string; after: string };
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
export const imageReplacement = function(ResourceModel: OptionsResourceModel, src: string, resources: any, resourceBaseUrl: string, itemIdToUrl: ItemIdToUrlHandler = null) {
export const imageReplacement = function(ResourceModel: OptionsResourceModel, markup: ImageMarkupData, resources: any, resourceBaseUrl: string, itemIdToUrl: ItemIdToUrlHandler = null) {
if (!ResourceModel || !resources) return null;
const src = markup.src;
if (!ResourceModel.isResourceUrl(src)) return null;
const resourceId = ResourceModel.urlToId(src);
@@ -136,7 +144,28 @@ export const imageReplacement = function(ResourceModel: OptionsResourceModel, sr
if (status !== 'ready') {
const icon = resourceStatusImage(status);
return `<div class="not-loaded-resource resource-status-${status}" data-resource-id="${resourceId}">` + `<img src="data:image/svg+xml;utf8,${htmlentities(icon)}"/>` + '</div>';
// Preserve information necessary to restore the original markup when converting
// from HTML to markdown.
const attrs: Record<string, string> = {
class: `not-loaded-resource not-loaded-image-resource resource-status-${status}`,
['data-resource-id']: resourceId,
};
if ('alt' in markup) {
attrs['data-original-alt'] = markup.alt;
attrs['data-original-title'] = markup.title;
} else {
attrs['data-original-before'] = markup.before;
attrs['data-original-after'] = markup.after;
}
// contenteditable="false": Improves support for the Rich Text Editor -- without this,
// users can add content within the <div>, which breaks the html-to-md conversion.
return (
`<div ${attributesHtml(attrs)} contenteditable="false">`
+ `<img src="data:image/svg+xml;utf8,${htmlentities(icon)}"/>`
+ '</div>'
);
}
const mime = resource.mime ? resource.mime.toLowerCase() : '';
if (ResourceModel.isSupportedImageMimeType(mime)) {