book notes don't display images as separate children if the image is included in the parent text note, #892

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.40.6",
+  "version": "0.40.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

src/public/javascripts/widgets/note_actions.js

@@ -10,6 +10,7 @@ const TPL = `
     .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
         color: var(--muted-text-color) !important;
         background-color: transparent !important;
+        pointer-events: none; /* makes it unclickable */
     }
     </style>
 
@@ -64,14 +65,4 @@ export default class NoteActionsWidget extends TabAwareWidget {
             this.$exportNoteButton.attr('disabled', 'disabled');
         }
     }
-
-    triggerEvent(e, eventName) {
-        const $item = $(e.target).closest('dropdown-item');
-
-        if ($item.is('[disabled]')) {
-            return;
-        }
-
-        this.triggerEvent(eventName);
-    }
 }

src/public/javascripts/widgets/type_widgets/book.js

@@ -158,46 +158,62 @@ export default class BookTypeWidget extends TypeWidget {
             this.$help.show();
         }
 
+        const imageLinks = note.getRelations('imageLink');
+
         for (const childNote of childNotes) {
-            const childNotePath = this.notePath + '/' + childNote.noteId;
+            // image is already visible in the parent note so no need to display it separately in the book
-
+            if (imageLinks.find(rel => rel.value === childNote.noteId)) {
-            const $content = $('<div class="note-book-content">')
+                continue;
-                .css("max-height", ZOOMS[this.zoomLevel].height);
-
-            const $card = $('<div class="note-book-card">')
-                .attr('data-note-id', childNote.noteId)
-                .css("flex-basis", ZOOMS[this.zoomLevel].width)
-                .append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(childNotePath,  {showTooltip: false})))
-                .append($content);
-
-            try {
-                const {type, renderedContent} = await noteContentRenderer.getRenderedContent(childNote);
-
-                $card.addClass("type-" + type);
-                $content.append(renderedContent);
-            }
-            catch (e) {
-                console.log(`Caught error while rendering note ${note.noteId} of type ${note.type}: ${e.message}, stack: ${e.stack}`);
-
-                $content.append("rendering error");
             }
 
-            const childCount = childNote.getChildNoteIds().length;
+            const $card = await this.renderNote(childNote);
-
-            if (childCount > 0) {
-                const label = `${childCount} child${childCount > 1 ? 'ren' : ''}`;
-
-                $card.append($('<div class="note-book-children">')
-                    .append($(`<a class="note-book-open-children-button no-print" href="javascript:">+ Show ${label}</a>`))
-                    .append($(`<a class="note-book-hide-children-button no-print" href="javascript:">- Hide ${label}</a>`).hide())
-                    .append($('<div class="note-book-children-content">'))
-                );
-            }
 
             $container.append($card);
         }
     }
 
+    async renderNote(note) {
+        const notePath = this.notePath + '/' + note.noteId;
+
+        const $content = $('<div class="note-book-content">')
+            .css("max-height", ZOOMS[this.zoomLevel].height);
+
+        const $card = $('<div class="note-book-card">')
+            .attr('data-note-id', note.noteId)
+            .css("flex-basis", ZOOMS[this.zoomLevel].width)
+            .append($('<h5 class="note-book-title">').append(await linkService.createNoteLink(notePath, {showTooltip: false})))
+            .append($content);
+
+        try {
+            const {type, renderedContent} = await noteContentRenderer.getRenderedContent(note);
+
+            $card.addClass("type-" + type);
+            $content.append(renderedContent);
+        } catch (e) {
+            console.log(`Caught error while rendering note ${note.noteId} of type ${note.type}: ${e.message}, stack: ${e.stack}`);
+
+            $content.append("rendering error");
+        }
+
+        const imageLinks = note.getRelations('imageLink');
+
+        const childCount = note.getChildNoteIds()
+            .filter(childNoteId => !imageLinks.find(rel => rel.value === childNoteId))
+            .length;
+
+        if (childCount > 0) {
+            const label = `${childCount} child${childCount > 1 ? 'ren' : ''}`;
+
+            $card.append($('<div class="note-book-children">')
+                .append($(`<a class="note-book-open-children-button no-print" href="javascript:">+ Show ${label}</a>`))
+                .append($(`<a class="note-book-hide-children-button no-print" href="javascript:">- Hide ${label}</a>`).hide())
+                .append($('<div class="note-book-children-content">'))
+            );
+        }
+
+        return $card;
+    }
+
     /** @return {boolean} true if this is "auto book" activated (empty text note) and not explicit book note */
     isAutoBook() {
         return this.note.type !== 'book';

src/public/javascripts/widgets/type_widgets/text.js

@@ -155,15 +155,7 @@ export default class TextTypeWidget extends TypeWidget {
 
         // if content is only tags/whitespace (typically <p>&nbsp;</p>), then just make it empty
         // this is important when setting new note to code
-        return this.isContentEmpty(content) ? '' : content;
+        return utils.isHtmlEmpty(content) ? '' : content;
-    }
-
-    isContentEmpty(content) {
-        content = content.toLowerCase();
-
-        return jQuery(content).text().trim() === ''
-            && !content.includes("<img")
-            && !content.includes("<section")
     }
 
     focus() {

src/public/stylesheets/style.css

@@ -201,6 +201,7 @@ span.fancytree-node.archived {
 .icon-action.disabled {
     color: var(--muted-text-color) !important;
     cursor: not-allowed;
+    pointer-events: none;
 }
 
 .ui-widget-content a:not(.ui-tabs-anchor) {
@@ -271,6 +272,7 @@ div.ui-tooltip {
 
 .dropdown-menu .disabled {
     color: #888 !important;
+    pointer-events: none;
 }
 
 .dropdown-menu a:hover:not(.disabled), .dropdown-item:hover:not(.disabled) {