diff --git a/apps/client/src/services/note_tooltip.ts b/apps/client/src/services/note_tooltip.ts index 19ac71801..8ea7ac88f 100644 --- a/apps/client/src/services/note_tooltip.ts +++ b/apps/client/src/services/note_tooltip.ts @@ -8,6 +8,10 @@ import appContext from "../components/app_context.js"; import type FNote from "../entities/fnote.js"; import { t } from "./i18n.js"; +// Track all elements that open tooltips +let openTooltipElements: JQuery[] = []; +let dismissTimer: ReturnType; + function setupGlobalTooltip() { $(document).on("mouseenter", "a", mouseEnterHandler); @@ -23,7 +27,12 @@ function setupGlobalTooltip() { } function dismissAllTooltips() { - $(".note-tooltip").remove(); + clearTimeout(dismissTimer); + openTooltipElements.forEach($el => { + $el.tooltip("dispose"); + $el.removeAttr("aria-describedby"); + }); + openTooltipElements = []; } function setupElementTooltip($el: JQuery) { @@ -86,8 +95,8 @@ async function mouseEnterHandler(this: HTMLElement) { // we need to check if we're still hovering over the element // since the operation to get tooltip content was async, it is possible that // we now create tooltip which won't close because it won't receive mouseleave event - if ($(this).filter(":hover").length > 0) { - $(this).tooltip({ + if ($link.filter(":hover").length > 0) { + $link.tooltip({ container: "body", // https://github.com/zadam/trilium/issues/2794 https://github.com/zadam/trilium/issues/2988 // with bottom this flickering happens a bit less @@ -103,7 +112,9 @@ async function mouseEnterHandler(this: HTMLElement) { }); dismissAllTooltips(); - $(this).tooltip("show"); + $link.tooltip("show"); + + openTooltipElements.push($link); // Dismiss the tooltip immediately if a link was clicked inside the tooltip. $(`.${tooltipClass} a`).on("click", (e) => { @@ -115,15 +126,16 @@ async function mouseEnterHandler(this: HTMLElement) { // click on links within tooltip etc. without tooltip disappearing // - once the user moves the cursor away from both link and the tooltip, hide the tooltip const checkTooltip = () => { - if (!$(this).filter(":hover").length && !$(`.${linkId}:hover`).length) { + + if (!$link.filter(":hover").length && !$(`.${linkId}:hover`).length) { // cursor is neither over the link nor over the tooltip, user likely is not interested dismissAllTooltips(); } else { - setTimeout(checkTooltip, 1000); + dismissTimer = setTimeout(checkTooltip, 1000); } }; - setTimeout(checkTooltip, 1000); + dismissTimer = setTimeout(checkTooltip, 1000); } } @@ -176,7 +188,25 @@ function renderFootnote($link: JQuery, url: string) { .closest(".footnote-item") // find the parent container of the footnote .find(".footnote-content"); // find the actual text content of the footnote - return $footnoteContent.html() || ""; + const isEditable = $link.closest(".ck-content").hasClass("note-detail-editable-text-editor"); + if (isEditable) { + /* Remove widget buttons for tables, formulas, and images in editable notes. */ + $footnoteContent.find('.ck-widget__selection-handle').remove(); + $footnoteContent.find('.ck-widget__type-around').remove(); + $footnoteContent.find('.ck-widget__resizer').remove(); + + /* Handling in-line math formulas */ + $footnoteContent.find('.ck-math-tex.ck-math-tex-inline.ck-widget').each(function () { + const $katex = $(this).find('.katex').first(); + if ($katex.length) { + $(this).replaceWith($('').append($('').append($katex.clone()))); + } + }); + } + + let footnoteContent = $footnoteContent.html(); + footnoteContent = `
${footnoteContent}
` + return footnoteContent || ""; } export default { diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css index 5f9ffb664..aa3936a22 100644 --- a/apps/client/src/stylesheets/style.css +++ b/apps/client/src/stylesheets/style.css @@ -1213,6 +1213,10 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu { background-color: inherit; } +::selection { + background-color: var(--selection-background-color); +} + [data-bs-toggle="tooltip"]:not(.button-widget) span { padding-bottom: 0; border-bottom: 1px dotted; @@ -1769,7 +1773,7 @@ body.zen .title-row { height: unset !important; -webkit-app-region: drag; padding-left: env(titlebar-area-x); - padding-right: 2.5em; + padding-right: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em); } body.zen .floating-buttons { diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index c32a01e84..b49f9142a 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -195,6 +195,8 @@ --scrollbar-background-color: transparent; --scrollbar-border-color: unset; /* Deprecated */ + --selection-background-color: #3399FF70; + --link-color: lightskyblue; --mermaid-theme: dark; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 7793d8ece..bdf3ae228 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -194,6 +194,8 @@ --scrollbar-background-color: transparent; --scrollbar-border-color: unset; /* Deprecated */ + --selection-background-color: #3399FF70; + --link-color: blue; --mermaid-theme: default; diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css index 483d6910d..fc751f8dd 100644 --- a/apps/client/src/stylesheets/theme-next/shell.css +++ b/apps/client/src/stylesheets/theme-next/shell.css @@ -131,6 +131,7 @@ body.layout-horizontal > .horizontal { } #launcher-pane.vertical #launcher-container { + width: var(--launcher-pane-size); height: 100%; overflow-x: hidden; overflow-y: auto; diff --git a/packages/ckeditor5-footnotes/theme/footnote.css b/packages/ckeditor5-footnotes/theme/footnote.css index 02b271619..29da50bae 100644 --- a/packages/ckeditor5-footnotes/theme/footnote.css +++ b/packages/ckeditor5-footnotes/theme/footnote.css @@ -44,10 +44,9 @@ flex-grow: 1; } -.ck .ck-widget.footnote-section .ck-widget__type-around__button_after { - display:none; /* hides the 'insert after' button from the ckeditor widget */ +.ck .ck-widget.footnote-section > .ck-reset_all.ck-widget__type-around > .ck-widget__type-around__button_after { + display: none; /* hides the 'insert after' button from the ckeditor widget, but displays the button inside the footnote content. */ } - .placeholder { padding: 2px 2px; outline-offset: -2px;