gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-07 04:28:09 +01:00
Code Issues Actions Packages Projects Releases Wiki 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
No known key found for this signature in database
1 changed files with 11 additions and 13 deletions
Show Stats 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 "./mobile_editor_toolbar.css";
import { isIOS } from "../../../services/utils";
import { CKTextEditor, ClassicEditor } from "@triliumnext/ckeditor5"; 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 { interface MobileEditorToolbarProps {
inPopupEditor?: boolean; inPopupEditor?: boolean;
@ -17,17 +19,13 @@ interface MobileEditorToolbarProps {
export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolbarProps) { export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolbarProps) {
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const { note, noteContext, ntxId } = useNoteContext(); 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); const [ dropdownActive, setDropdownActive ] = useState(false);
usePositioningOniOS(!inPopupEditor, containerRef); usePositioningOniOS(!inPopupEditor, containerRef);
useEffect(() => {
noteContext?.isReadOnly().then(isReadOnly => {
setShouldDisplay(note?.type === "text" && !isReadOnly);
});
}, [ note ]);
// Attach the toolbar from the CKEditor. // Attach the toolbar from the CKEditor.
useTriliumEvent("textEditorRefreshed", ({ ntxId: eventNtxId, editor }) => { useTriliumEvent("textEditorRefreshed", ({ ntxId: eventNtxId, editor }) => {
if (eventNtxId !== ntxId || !containerRef.current) return; if (eventNtxId !== ntxId || !containerRef.current) return;
@ -62,15 +60,15 @@ export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolb
return ( return (
<div className={`classic-toolbar-outer-container ${!shouldDisplay ? "hidden-ext" : "visible"} ${isIOS() ? "ios" : ""}`}> <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> </div>
) );
} }
function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef<HTMLDivElement | null>) { function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef<HTMLDivElement | null>) {
const adjustPosition = useCallback(() => { const adjustPosition = useCallback(() => {
if (!wrapperRef.current) return; 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`; wrapperRef.current.style.bottom = `${bottom}px`;
}, []); }, []);