Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-05 05:59:19 +01:00
Code Issues Packages Projects Releases Activity

fix(mobile): formatting toolbar not appearing after read-only (closes #5368)

Browse Source
This commit is contained in:
Elian Doran
2026-02-04 13:42:30 +02:00
parent 70523574b0
commit e021a54d2d
1 changed files with 11 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx
View File

@@ -1,8 +1,10 @@
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
import { useNoteContext, useTriliumEvent } from "../../react/hooks";
import "./mobile_editor_toolbar.css";
import { isIOS } from "../../../services/utils";
import { CKTextEditor, ClassicEditor } from "@triliumnext/ckeditor5";
import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
import { isIOS } from "../../../services/utils";
import { useIsNoteReadOnly, useNoteContext, useNoteProperty, useTriliumEvent } from "../../react/hooks";
interface MobileEditorToolbarProps {
inPopupEditor?: boolean;
@@ -17,17 +19,13 @@ interface MobileEditorToolbarProps {
export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolbarProps) {
const containerRef = useRef<HTMLDivElement>(null);
const { note, noteContext, ntxId } = useNoteContext();
const [ shouldDisplay, setShouldDisplay ] = useState(false);
const noteType = useNoteProperty(note, "type");
const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
const shouldDisplay = noteType === "text" && !isReadOnly;
const [ dropdownActive, setDropdownActive ] = useState(false);
usePositioningOniOS(!inPopupEditor, containerRef);
useEffect(() => {
noteContext?.isReadOnly().then(isReadOnly => {
setShouldDisplay(note?.type === "text" && !isReadOnly);
});
}, [ note ]);
// Attach the toolbar from the CKEditor.
useTriliumEvent("textEditorRefreshed", ({ ntxId: eventNtxId, editor }) => {
if (eventNtxId !== ntxId || !containerRef.current) return;
@@ -62,15 +60,15 @@ export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolb
return (
<div className={`classic-toolbar-outer-container ${!shouldDisplay ? "hidden-ext" : "visible"} ${isIOS() ? "ios" : ""}`}>
<div ref={containerRef} className={`classic-toolbar-widget ${dropdownActive ? "dropdown-active" : ""}`}></div>
<div ref={containerRef} className={`classic-toolbar-widget ${dropdownActive ? "dropdown-active" : ""}`} />
</div>
)
);
}
function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef<HTMLDivElement | null>) {
const adjustPosition = useCallback(() => {
if (!wrapperRef.current) return;
let bottom = window.innerHeight - (window.visualViewport?.height || 0);
const bottom = window.innerHeight - (window.visualViewport?.height || 0);
wrapperRef.current.style.bottom = `${bottom}px`;
}, []);