Merge branch 'develop' into open_new_tab

Author: SiriusXT

apps/client/src/menus/context_menu.ts

@@ -10,6 +10,7 @@ interface ContextMenuOptions<T> {
     items: MenuItem<T>[];
     /** On mobile, if set to `true` then the context menu is shown near the element. If `false` (default), then the context menu is shown at the bottom of the screen. */
     forcePositionOnMobile?: boolean;
+    onHide?: () => void;
 }
 
 interface MenuSeparatorItem {
@@ -36,15 +37,13 @@ export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEve
 class ContextMenu {
     private $widget: JQuery<HTMLElement>;
     private $cover: JQuery<HTMLElement>;
-    private dateContextMenuOpenedMs: number;
     private options?: ContextMenuOptions<any>;
     private isMobile: boolean;
 
     constructor() {
         this.$widget = $("#context-menu-container");
         this.$cover = $("#context-menu-cover");
         this.$widget.addClass("dropend");
-        this.dateContextMenuOpenedMs = 0;
         this.isMobile = utils.isMobile();
 
         if (this.isMobile) {
@@ -76,8 +75,6 @@ class ContextMenu {
         keyboardActionService.updateDisplayedShortcuts(this.$widget);
 
         this.positionMenu();
-
-        this.dateContextMenuOpenedMs = Date.now();
     }
 
     positionMenu() {
@@ -186,8 +183,6 @@ class ContextMenu {
                             return false;
                         }
 
-                        this.hide();
-
                         if ("handler" in item && item.handler) {
                             item.handler(item, e);
                         }
@@ -197,6 +192,12 @@ class ContextMenu {
                         // it's important to stop the propagation especially for sub-menus, otherwise the event
                         // might be handled again by top-level menu
                         return false;
+                    })
+                    .on("mouseup", (e) =>{
+                        e.stopPropagation();
+                        // Hide the content menu on mouse up to prevent the mouse event from propagating to the elements below.
+                        this.hide();
+                        return false;
                     });
 
                 if ("enabled" in item && item.enabled !== undefined && !item.enabled) {
@@ -220,27 +221,14 @@ class ContextMenu {
     }
 
     async hide() {
-        // this date checking comes from change in FF66 - https://github.com/zadam/trilium/issues/468
-        // "contextmenu" event also triggers "click" event which depending on the timing can close the just opened context menu
-        // we might filter out right clicks, but then it's better if even right clicks close the context menu
-        if (Date.now() - this.dateContextMenuOpenedMs > 300) {
-            // seems like if we hide the menu immediately, some clicks can get propagated to the underlying component
-            // see https://github.com/zadam/trilium/pull/3805 for details
-            await timeout(100);
-            this.$widget.removeClass("show");
-            this.$cover.removeClass("show");
-            $("body").removeClass("context-menu-shown");
-            this.$widget.hide();
-        }
+        this.options?.onHide?.();
+        this.$widget.removeClass("show");
+        this.$cover.removeClass("show");
+        $("body").removeClass("context-menu-shown");
+        this.$widget.hide();
     }
 }
 
-function timeout(ms: number) {
-    return new Promise((accept, reject) => {
-        setTimeout(accept, ms);
-    });
-}
-
 const contextMenu = new ContextMenu();
 
 export default contextMenu;

apps/client/src/menus/tree_context_menu.ts

@@ -19,6 +19,8 @@ interface ConvertToAttachmentResponse {
     attachment?: FAttachment;
 }
 
+let lastTargetNode: HTMLElement | null = null;
+
 // This will include all commands that implement ContextMenuCommandData, but it will not work if it additional options are added via the `|` operator,
 // so they need to be added manually.
 export type TreeCommandNames = FilteredCommandNames<ContextMenuCommandData> | "openBulkActionsDialog";
@@ -33,12 +35,19 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
     }
 
     async show(e: PointerEvent | JQuery.TouchStartEvent | JQuery.ContextMenuEvent) {
-        contextMenu.show({
+        await contextMenu.show({
             x: e.pageX ?? 0,
             y: e.pageY ?? 0,
             items: await this.getMenuItems(),
-            selectMenuItemHandler: (item, e) => this.selectMenuItemHandler(item)
+            selectMenuItemHandler: (item, e) => this.selectMenuItemHandler(item),
+            onHide: () => {
+                lastTargetNode?.classList.remove('fancytree-menu-target');
+            }
         });
+        // It's placed after show to ensure the old target is cleared before showing the context menu again on repeated right-clicks.
+        lastTargetNode?.classList.remove('fancytree-menu-target');
+        lastTargetNode = this.node.span;
+        lastTargetNode.classList.add('fancytree-menu-target');
     }
 
     async getMenuItems(): Promise<MenuItem<TreeCommandNames>[]> {

apps/client/src/services/resizer.ts

@@ -26,10 +26,16 @@ function setupLeftPaneResizer(leftPaneVisible: boolean) {
     }
 
     if (leftPaneVisible) {
-        leftInstance = Split(["#left-pane", "#rest-pane"], {
-            sizes: [leftPaneWidth, 100 - leftPaneWidth],
-            gutterSize: DEFAULT_GUTTER_SIZE,
-            onDragEnd: (sizes) => options.save("leftPaneWidth", Math.round(sizes[0]))
+        // Delayed initialization ensures that all DOM elements are fully rendered and part of the layout,
+        // preventing Split.js from retrieving incorrect dimensions due to #left-pane not being rendered yet,
+        // which would cause the minSize setting to have no effect.
+        requestAnimationFrame(() => {
+            leftInstance = Split(["#left-pane", "#rest-pane"], {
+                sizes: [leftPaneWidth, 100 - leftPaneWidth],
+                gutterSize: DEFAULT_GUTTER_SIZE,
+                minSize: [150, 300],
+                onDragEnd: (sizes) => options.save("leftPaneWidth", Math.round(sizes[0]))
+            });
         });
     }
 }

apps/client/src/stylesheets/style.css

@@ -438,6 +438,14 @@ body .CodeMirror {
     background-color: #eeeeee;
 }
 
+.cm-matchhighlight.ck-find-result{
+    background: var(--ck-color-highlight-background);
+}
+
+.cm-matchhighlight.ck-find-result_selected {
+    background-color: #ff9633;
+}
+
 .CodeMirror pre.CodeMirror-placeholder {
     color: #999 !important;
 }

apps/client/src/stylesheets/tree.css

@@ -208,6 +208,10 @@ span.fancytree-node:hover {
     border: 1px solid var(--main-border-color);
 }
 
+span.fancytree-node.fancytree-menu-target {
+    box-shadow: inset 0 0 0 1px var(--main-border-color);
+}
+
 .fancytree-title:hover,
 span.fancytree-node:hover .fancytree-title {
     border: 0;

apps/client/src/widgets/buttons/left_pane_toggle.ts

@@ -5,10 +5,13 @@ import { t } from "../../services/i18n.js";
 import type { EventData } from "../../components/app_context.js";
 
 export default class LeftPaneToggleWidget extends CommandButtonWidget {
+    private currentLeftPaneVisible: boolean;
 
     constructor(isHorizontalLayout: boolean) {
         super();
 
+        this.currentLeftPaneVisible = options.is("leftPaneVisible");
+
         this.class(isHorizontalLayout ? "toggle-button" : "launcher-button");
 
         this.settings.icon = () => {
@@ -21,21 +24,23 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget {
 
         this.settings.title = () => (options.is("leftPaneVisible") ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel"));
 
-        this.settings.command = () => (options.is("leftPaneVisible") ? "hideLeftPane" : "showLeftPane");
+        this.settings.command = () => (this.currentLeftPaneVisible ? "hideLeftPane" : "showLeftPane");
 
         if (isHorizontalLayout) {
             this.settings.titlePlacement = "bottom";
         }
     }
 
     refreshIcon() {
-        super.refreshIcon();
-
-        splitService.setupLeftPaneResizer(options.is("leftPaneVisible"));
+        if (document.hasFocus() || this.currentLeftPaneVisible === true) {
+            super.refreshIcon();
+            splitService.setupLeftPaneResizer(this.currentLeftPaneVisible);
+        }
     }
 
     entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("leftPaneVisible")) {
+        if (loadResults.isOptionReloaded("leftPaneVisible") && document.hasFocus()) {
+            this.currentLeftPaneVisible = options.is("leftPaneVisible");
             this.refreshIcon();
         }
     }

apps/client/src/widgets/containers/left_pane_container.ts

@@ -17,7 +17,7 @@ export default class LeftPaneContainer extends FlexContainer<Component> {
     }
 
     entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("leftPaneVisible")) {
+        if (loadResults.isOptionReloaded("leftPaneVisible") && document.hasFocus()) {
             const visible = this.isEnabled();
             this.toggleInt(visible);
 

apps/client/src/widgets/find.ts

@@ -143,9 +143,9 @@ export default class FindWidget extends NoteContextAwareWidget {
         this.$currentFound = this.$widget.find(".find-widget-current-found");
         this.$totalFound = this.$widget.find(".find-widget-total-found");
         this.$caseSensitiveCheckbox = this.$widget.find(".find-widget-case-sensitive-checkbox");
-        this.$caseSensitiveCheckbox.change(() => this.performFind());
+        this.$caseSensitiveCheckbox.on("change", () => this.performFind());
         this.$matchWordsCheckbox = this.$widget.find(".find-widget-match-words-checkbox");
-        this.$matchWordsCheckbox.change(() => this.performFind());
+        this.$matchWordsCheckbox.on("change", () => this.performFind());
         this.$previousButton = this.$widget.find(".find-widget-previous-button");
         this.$previousButton.on("click", () => this.findNext(-1));
         this.$nextButton = this.$widget.find(".find-widget-next-button");
@@ -160,7 +160,7 @@ export default class FindWidget extends NoteContextAwareWidget {
         this.$replaceButton = this.$widget.find(".replace-widget-replace-button");
         this.$replaceButton.on("click", () => this.replace());
 
-        this.$input.keydown(async (e) => {
+        this.$input.on("keydown", async (e) => {
             if ((e.metaKey || e.ctrlKey) && (e.key === "F" || e.key === "f")) {
                 // If ctrl+f is pressed when the findbox is shown, select the
                 // whole input to find
@@ -172,7 +172,7 @@ export default class FindWidget extends NoteContextAwareWidget {
             }
         });
 
-        this.$widget.keydown(async (e) => {
+        this.$widget.on("keydown", async (e) => {
             if (e.key === "Escape") {
                 await this.closeSearch();
             }
@@ -197,9 +197,14 @@ export default class FindWidget extends NoteContextAwareWidget {
         const isReadOnly = await this.noteContext?.isReadOnly();
 
         let selectedText = "";
-        if (this.note?.type === "code" && !isReadOnly && this.noteContext) {
-            const codeEditor = await this.noteContext.getCodeEditor();
-            selectedText = codeEditor.getSelection();
+        if (this.note?.type === "code" && this.noteContext) {
+            if (isReadOnly){
+                const $content = await this.noteContext.getContentElement();
+                selectedText = $content.find('.cm-matchhighlight').first().text();
+            } else {
+                const codeEditor = await this.noteContext.getCodeEditor();
+                selectedText = codeEditor.getSelection();
+            }
         } else {
             selectedText = window.getSelection()?.toString() || "";
         }
@@ -235,6 +240,12 @@ export default class FindWidget extends NoteContextAwareWidget {
         }
     }
 
+    async readOnlyTemporarilyDisabledEvent({ noteContext }: EventData<"readOnlyTemporarilyDisabled">) {
+        if (this.isNoteContext(noteContext.ntxId)) {
+            await this.closeSearch();
+        }
+    }
+
     async getHandler() {
         if (this.note?.type === "render") {
             return this.htmlHandler;

apps/client/src/widgets/find_in_html.ts

@@ -2,7 +2,6 @@
 // uses for highlighting matches, use the same one on CodeMirror
 // for consistency
 import utils from "../services/utils.js";
-import appContext from "../components/app_context.js";
 import type FindWidget from "./find.js";
 import type { FindResult } from "./find.js";
 
@@ -39,12 +38,16 @@ export default class FindInHtml {
                         caseSensitive: matchCase,
                         done: async () => {
                             this.$results = $content.find(`.${FIND_RESULT_CSS_CLASSNAME}`);
-                            this.currentIndex = 0;
+                            const scrollingContainer = $content[0].closest('.scrolling-container');
+                            const containerTop = scrollingContainer?.getBoundingClientRect().top ?? 0;
+                            const closestIndex = this.$results.toArray().findIndex(el => el.getBoundingClientRect().top >= containerTop);
+                            this.currentIndex = closestIndex >= 0 ? closestIndex : 0;
+                            
                             await this.jumpTo();
 
                             res({
                                 totalFound: this.$results.length,
-                                currentFound: Math.min(1, this.$results.length)
+                                currentFound: this.$results.length > 0 ? this.currentIndex + 1 : 0
                             });
                         }
                     });
@@ -71,27 +74,17 @@ export default class FindInHtml {
 
     async findBoxClosed(totalFound: number, currentFound: number) {
         const $content = await this.parent?.noteContext?.getContentElement();
-        if ($content) {
+        if (typeof $content?.unmark === 'function') {
             $content.unmark();
         }
     }
 
     async jumpTo() {
         if (this.$results?.length) {
-            const offsetTop = 100;
             const $current = this.$results.eq(this.currentIndex);
             this.$results.removeClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
-
-            if ($current.length) {
-                $current.addClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
-                const position = $current.position().top - offsetTop;
-
-                const $content = await this.parent.noteContext?.getContentElement();
-                if ($content) {
-                    const $contentWidget = appContext.getComponentByEl($content[0]);
-                    $contentWidget.triggerCommand("scrollContainerTo", { position });
-                }
-            }
+            $current[0].scrollIntoView();
+            $current.addClass(FIND_RESULT_SELECTED_CSS_CLASSNAME);
         }
     }
 }

apps/client/src/widgets/find_in_text.ts

@@ -55,15 +55,26 @@ export default class FindInText {
             const options = { matchCase: matchCase, wholeWords: wholeWord };
             findResult = textEditor.execute("find", searchTerm, options);
             totalFound = findResult.results.length;
-            // Find the result beyond the cursor
-            const cursorPos = model.document.selection.getLastPosition();
-            for (let i = 0; i < findResult.results.length; ++i) {
-                const marker = findResult.results.get(i)?.marker;
-                const fromPos = marker?.getStart();
-                if (cursorPos && fromPos && fromPos.compareWith(cursorPos) !== "before") {
-                    currentFound = i;
-                    break;
+            const selection = model.document.selection;
+            // If text is selected, highlight the corresponding result;
+            // otherwise, highlight the first visible result in the scrolling container.
+            if (!selection.isCollapsed) {
+                const cursorPos = selection.getFirstPosition();
+                for (let i = 0; i < findResult.results.length; ++i) {
+                    const marker = findResult.results.get(i)?.marker;
+                    const fromPos = marker?.getStart();
+                    if (cursorPos && fromPos?.compareWith(cursorPos) !== "before") {
+                        currentFound = i;
+                        break;
+                    }
                 }
+            } else {
+                const editorEl = textEditor?.sourceElement;
+                const findResultElement = editorEl?.querySelectorAll(".ck-find-result");
+                const scrollingContainer = editorEl?.closest('.scrolling-container');
+                const containerTop = scrollingContainer?.getBoundingClientRect().top ?? 0;
+                const closestIndex = Array.from(findResultElement ?? []).findIndex((el) => el.getBoundingClientRect().top >= containerTop);
+                currentFound = closestIndex >= 0 ? closestIndex : 0;
             }
         }