diff --git a/src/public/app/services/content_renderer.js b/src/public/app/services/content_renderer.js index 6f66adfb0..8be8ba1e8 100644 --- a/src/public/app/services/content_renderer.js +++ b/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 diff --git a/src/public/app/services/link.js b/src/public/app/services/link.js index 73ad58704..cee987305 100644 --- a/src/public/app/services/link.js +++ b/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 $("") + .attr("src", `api/images/${noteId}/${encodedTitle}?${Math.random()}`) + .attr("alt", linkTitle); + } + const $container = $(""); if (showNoteIcon) { diff --git a/src/public/app/widgets/dialogs/include_note.js b/src/public/app/widgets/dialogs/include_note.js index 7fb1e4c25..f4d81778d 100644 --- a/src/public/app/widgets/dialogs/include_note.js +++ b/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); diff --git a/src/public/app/widgets/dialogs/revisions.js b/src/public/app/widgets/dialogs/revisions.js index 1799ce37a..b040ed994 100644 --- a/src/public/app/widgets/dialogs/revisions.js +++ b/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($("") - .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($("") - .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($("
").text(fullRevision.content));
diff --git a/src/public/app/widgets/highlights_list.js b/src/public/app/widgets/highlights_list.js
index 285d9634d..032ae36ce 100644
--- a/src/public/app/widgets/highlights_list.js
+++ b/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")
diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js
index ad0d41a87..6f70fc78f 100644
--- a/src/public/app/widgets/note_tree.js
+++ b/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 = $("