gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-26 02:24:23 +01:00
Code Issues Actions 11 Packages Projects Releases Wiki Activity

fix(text): classic toolbar sometimes not showing

Browse Source
This commit is contained in:
Elian Doran 2025-11-22 11:21:51 +02:00
parent 664d28f105
commit c76f368fa0
No known key found for this signature in database
3 changed files with 18 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/components/app_context.ts
View File

@ -445,6 +445,7 @@ type EventMappings = {
error: string; error: string;
}; };
searchRefreshed: { ntxId?: string | null }; searchRefreshed: { ntxId?: string | null };
textEditorRefreshed: { ntxId?: string | null, editor: CKTextEditor };
hoistedNoteChanged: { hoistedNoteChanged: {
noteId: string; noteId: string;
ntxId: string | null; ntxId: string | null;

19
apps/client/src/widgets/ribbon/FormattingToolbar.tsx
View File

@ -1,4 +1,5 @@
import { useTriliumOption } from "../react/hooks"; import { useRef } from "preact/hooks";
import { useTriliumEvent, useTriliumOption } from "../react/hooks";
import { TabContext } from "./ribbon-interface"; import { TabContext } from "./ribbon-interface";
/** /**
@ -10,10 +11,22 @@ import { TabContext } from "./ribbon-interface";
* *
* ! The toolbar is not only used in the ribbon, but also in the quick edit feature. * ! The toolbar is not only used in the ribbon, but also in the quick edit feature.
*/ */
export default function FormattingToolbar({ hidden }: TabContext) { export default function FormattingToolbar({ hidden, ntxId }: TabContext) {
const containerRef = useRef<HTMLDivElement>(null);
const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType"); const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
useTriliumEvent("textEditorRefreshed", ({ ntxId: eventNtxId, editor }) => {
if (eventNtxId !== ntxId) return;
const toolbar = editor.ui.view.toolbar?.element;
if (toolbar && containerRef.current) {
containerRef.current.replaceChildren(toolbar);
}
});
return (textNoteEditorType === "ckeditor-classic" && return (textNoteEditorType === "ckeditor-classic" &&
<div className={`classic-toolbar-widget ${hidden ? "hidden-ext" : ""}`} /> <div
ref={containerRef}
className={`classic-toolbar-widget ${hidden ? "hidden-ext" : ""}`}
/>
) )
}; };

30
apps/client/src/widgets/type_widgets/text/EditableText.tsx
View File

@ -251,6 +251,7 @@ export default function EditableText({ note, parentComponent, ntxId, noteContext
} }
initialized.current.resolve(); initialized.current.resolve();
parentComponent?.triggerEvent("textEditorRefreshed", { ntxId, editor });
}} }}
/>} />}
@ -304,19 +305,8 @@ function onNotificationWarning(data, evt) {
function setupClassicEditor(editor: CKTextEditor, parentComponent: Component | undefined) { function setupClassicEditor(editor: CKTextEditor, parentComponent: Component | undefined) {
if (!parentComponent) return; if (!parentComponent) return;
const $classicToolbarWidget = findClassicToolbar(parentComponent);
$classicToolbarWidget.empty();
if ($classicToolbarWidget.length) {
const toolbarView = (editor as ClassicEditor).ui.view.toolbar;
if (toolbarView.element) {
$classicToolbarWidget[0].appendChild(toolbarView.element);
}
}
if (utils.isMobile()) { if (utils.isMobile()) {
$classicToolbarWidget.addClass("visible");
// Reposition all dropdowns to point upwards instead of downwards. // Reposition all dropdowns to point upwards instead of downwards.
// See https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for more info. // See https://ckeditor.com/docs/ckeditor5/latest/examples/framework/bottom-toolbar-editor.html for more info.
const toolbarView = (editor as ClassicEditor).ui.view.toolbar; const toolbarView = (editor as ClassicEditor).ui.view.toolbar;
@ -333,24 +323,6 @@ function setupClassicEditor(editor: CKTextEditor, parentComponent: Component | u
} }
} }
function findClassicToolbar(parentComponent: Component): JQuery<HTMLElement> {
const $widget = $(parentComponent.$widget);
if (!utils.isMobile()) {
const $parentSplit = $widget.parents(".note-split.type-text");
if ($parentSplit.length) {
// The editor is in a normal tab.
return $parentSplit.find("> .ribbon-container .classic-toolbar-widget");
} else {
// The editor is in a popup.
return $widget.closest(".modal-body").find(".classic-toolbar-widget");
}
} else {
return $("body").find(".classic-toolbar-widget");
}
}
function EditableTextTouchBar({ watchdogRef, refreshTouchBarRef }: { watchdogRef: RefObject<EditorWatchdog | null>, refreshTouchBarRef: RefObject<() => void> }) { function EditableTextTouchBar({ watchdogRef, refreshTouchBarRef }: { watchdogRef: RefObject<EditorWatchdog | null>, refreshTouchBarRef: RefObject<() => void> }) {
const [ headingSelectedIndex, setHeadingSelectedIndex ] = useState<number>(); const [ headingSelectedIndex, setHeadingSelectedIndex ] = useState<number>();