Merge branch 'stable'

# Conflicts:
#	package-lock.json

Author: zadam

src/public/app/services/content_renderer.js

@@ -117,14 +117,14 @@ async function renderCode(note, $renderedContent) {
 }
 
 function renderImage(entity, $renderedContent, options = {}) {
-    const sanitizedTitle = entity.title.replace(/[^a-z0-9-.]/gi, "");
+    const encodedTitle = encodeURIComponent(entity.title);
 
     let url;
 
     if (entity instanceof FNote) {
-        url = `api/images/${entity.noteId}/${sanitizedTitle}?${Math.random()}`;
+        url = `api/images/${entity.noteId}/${encodedTitle}?${Math.random()}`;
     } else if (entity instanceof FAttachment) {
-        url = `api/attachments/${entity.attachmentId}/image/${sanitizedTitle}?${entity.utcDateModified}">`;
+        url = `api/attachments/${entity.attachmentId}/image/${encodedTitle}?${entity.utcDateModified}">`;
     }
 
     $renderedContent // styles needed for the zoom to work well

src/public/app/services/link.js

@@ -42,6 +42,7 @@ async function createLink(notePath, options = {}) {
     const showNotePath = options.showNotePath === undefined ? false : options.showNotePath;
     const showNoteIcon = options.showNoteIcon === undefined ? false : options.showNoteIcon;
     const referenceLink = options.referenceLink === undefined ? false : options.referenceLink;
+    const autoConvertToImage = options.autoConvertToImage === undefined ? false : options.autoConvertToImage;
 
     const { noteId, parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(notePath);
     const viewScope = options.viewScope || {};
@@ -58,6 +59,16 @@ async function createLink(notePath, options = {}) {
         }
     }
 
+    const note = await froca.getNote(noteId);
+
+    if (autoConvertToImage && ['image', 'canvas', 'mermaid'].includes(note.type) && viewMode === 'default') {
+        const encodedTitle = encodeURIComponent(linkTitle);
+
+        return $("<img>")
+            .attr("src", `api/images/${noteId}/${encodedTitle}?${Math.random()}`)
+            .attr("alt", linkTitle);
+    }
+
     const $container = $("<span>");
 
     if (showNoteIcon) {

src/public/app/widgets/dialogs/include_note.js

@@ -97,7 +97,7 @@ export default class IncludeNoteDialog extends BasicWidget {
 
         const boxSize = $("input[name='include-note-box-size']:checked").val();
 
-        if (note.type === 'image') {
+        if (['image', 'canvas', 'mermaid'].includes(note.type)) {
             // there's no benefit to use insert note functionlity for images,
             // so we'll just add an IMG tag
             this.textTypeWidget.addImage(noteId);

src/public/app/widgets/dialogs/revisions.js

@@ -274,16 +274,16 @@ export default class RevisionsDialog extends BasicWidget {
 
             this.$content.html($table);
         } else if (revisionItem.type === 'canvas') {
-            const sanitizedTitle = revisionItem.title.replace(/[^a-z0-9-.]/gi, "");
+            const encodedTitle = encodeURIComponent(revisionItem.title);
 
             this.$content.html($("<img>")
-                .attr("src", `api/revisions/${revisionItem.revisionId}/image/${sanitizedTitle}?${Math.random()}`)
+                .attr("src", `api/revisions/${revisionItem.revisionId}/image/${encodedTitle}?${Math.random()}`)
                 .css("max-width", "100%"));
         } else if (revisionItem.type === 'mermaid') {
-            const sanitizedTitle = revisionItem.title.replace(/[^a-z0-9-.]/gi, "");
+            const encodedTitle = encodeURIComponent(revisionItem.title);
 
             this.$content.html($("<img>")
-                .attr("src", `api/revisions/${revisionItem.revisionId}/image/${sanitizedTitle}?${Math.random()}`)
+                .attr("src", `api/revisions/${revisionItem.revisionId}/image/${encodedTitle}?${Math.random()}`)
                 .css("max-width", "100%"));
 
             this.$content.append($("<pre>").text(fullRevision.content));

src/public/app/widgets/highlights_list.js

@@ -56,7 +56,6 @@ export default class HighlightsListWidget extends RightPanelWidget {
                 .class("icon-action"),
             new OnClickButtonWidget()
                 .icon("bx-x")
-                .title("Close Highlights List")
                 .titlePlacement("left")
                 .onClick(widget => widget.triggerCommand("closeHlt"))
                 .class("icon-action")

src/public/app/widgets/note_tree.js

@@ -402,11 +402,11 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     }));
 
                     if (notes.length === 1) {
-                        linkService.createLink(notes[0].noteId, {referenceLink: true})
+                        linkService.createLink(notes[0].noteId, {referenceLink: true, autoConvertToImage: true})
                             .then($link => data.dataTransfer.setData("text/html", $link[0].outerHTML));
                     }
                     else {
-                        Promise.all(notes.map(note => linkService.createLink(note.noteId, {referenceLink: true}))).then(links => {
+                        Promise.all(notes.map(note => linkService.createLink(note.noteId, {referenceLink: true, autoConvertToImage: true}))).then(links => {
                             const $list = $("<ul>").append(...links.map($link => $("<li>").append($link)));
 
                             data.dataTransfer.setData("text/html", $list[0].outerHTML);

src/public/app/widgets/ribbon_widgets/promoted_attributes.js

@@ -8,8 +8,14 @@ import options from "../../services/options.js";
 import utils from "../../services/utils.js";
 
 const TPL = `
-<div>
+<div class="promoted-attributes-widget">
     <style>
+    body.mobile .promoted-attributes-widget {
+        /* https://github.com/zadam/trilium/issues/4468 */
+        flex-shrink: 0.4;
+        overflow: auto;
+    }
+    
     .promoted-attributes-container {
         margin: auto;
         display: flex;

src/public/app/widgets/toc.js

@@ -68,7 +68,6 @@ export default class TocWidget extends RightPanelWidget {
                 .class("icon-action"),
             new OnClickButtonWidget()
                 .icon("bx-x")
-                .title("Close Table of Contents")
                 .titlePlacement("left")
                 .onClick(widget => widget.triggerCommand("closeToc"))
                 .class("icon-action")

src/public/app/widgets/type_widgets/editable_text.js

@@ -365,12 +365,10 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
         const note = await froca.getNote(noteId);
 
         this.watchdog.editor.model.change( writer => {
-            const sanitizedTitle = note.title.replace(/[^a-z0-9-.]/gi, "");
-            const src = `api/images/${note.noteId}/${sanitizedTitle}`;
+            const encodedTitle = encodeURIComponent(note.title);
+            const src = `api/images/${note.noteId}/${encodedTitle}`;
 
-            const imageElement = writer.createElement( 'image',  { 'src': src } );
-
-            this.watchdog.editor.model.insertContent(imageElement, this.watchdog.editor.model.document.selection);
+            this.watchdog.editor.execute( 'insertImage', { source: src } );
         } );
     }
 

src/routes/api/clipper.js

@@ -153,8 +153,9 @@ function processContent(images, note, content) {
             const buffer = Buffer.from(dataUrl.split(",")[1], 'base64');
 
             const attachment = imageService.saveImageToAttachment(note.noteId, buffer, filename, true);
-            const sanitizedTitle = attachment.title.replace(/[^a-z0-9-.]/gi, "");
-            const url = `api/attachments/${attachment.attachmentId}/image/${sanitizedTitle}`;
+
+            const encodedTitle = encodeURIComponent(attachment.title);
+            const url = `api/attachments/${attachment.attachmentId}/image/${encodedTitle}`;
 
             log.info(`Replacing '${imageId}' with '${url}' in note '${note.noteId}'`);