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

fix(quick_edit): classic toolbar dropdowns not working

Browse Source
This commit is contained in:
Elian Doran 2025-11-29 12:16:42 +02:00
parent 70fe3b9773
commit ab97068a1d
No known key found for this signature in database
4 changed files with 73 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/client/src/widgets/dialogs/PopupEditor.css
View File

@ -59,6 +59,7 @@ body.desktop .modal.popup-editor-dialog .modal-dialog {
inset-inline-end: 0;
background: var(--modal-background-color);
z-index: 998;
align-items: flex-start;
}
.modal.popup-editor-dialog .note-detail.full-height {

7
apps/client/src/widgets/dialogs/PopupEditor.tsx
View File

@ -18,6 +18,7 @@ import utils from "../../services/utils";
import tree from "../../services/tree";
import froca from "../../services/froca";
import ReadOnlyNoteInfoBar from "../ReadOnlyNoteInfoBar";
import MobileEditorToolbar from "../type_widgets/text/mobile_editor_toolbar";
export default function PopupEditor() {
const [ shown, setShown ] = useState(false);
@ -71,7 +72,11 @@ export default function PopupEditor() {
>
<ReadOnlyNoteInfoBar />
<PromotedAttributes />
<StandaloneRibbonAdapter component={FormattingToolbar} />
{isMobile
? <MobileEditorToolbar inPopupEditor />
: <StandaloneRibbonAdapter component={FormattingToolbar} />}
<FloatingButtons items={items} />
<NoteDetail />
<NoteList media="screen" displayOnlyCollections />

2
apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.css
View File

@ -1,3 +1,4 @@
body.mobile {
.classic-toolbar-outer-container {
contain: none !important;
}
@ -50,3 +51,4 @@
.classic-toolbar-widget .ck.ck-button.ck-disabled {
opacity: 0.3;
}
}

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

@ -4,19 +4,23 @@ import "./mobile_editor_toolbar.css";
import { isIOS } from "../../../services/utils";
import { CKTextEditor, ClassicEditor } from "@triliumnext/ckeditor5";
interface MobileEditorToolbarProps {
inPopupEditor?: boolean;
}
/**
* Handles the editing toolbar for CKEditor in mobile mode. The toolbar acts as a floating bar, with two different mechanism:
*
* - On iOS, because it does not respect the viewport meta value `interactive-widget=resizes-content`, we need to listen to window resizes and scroll and reposition the toolbar using absolute positioning.
* - On Android, the viewport change makes the keyboard resize the content area, all we have to do is to hide the tab bar and global menu (handled in the global style).
*/
export default function MobileEditorToolbar() {
export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolbarProps) {
const containerRef = useRef<HTMLDivElement>(null);
const { note, noteContext, ntxId } = useNoteContext();
const [ shouldDisplay, setShouldDisplay ] = useState(false);
const [ dropdownActive, setDropdownActive ] = useState(false);
usePositioningOniOS(containerRef);
usePositioningOniOS(!inPopupEditor, containerRef);
useEffect(() => {
noteContext?.isReadOnly().then(isReadOnly => {
@ -29,7 +33,10 @@ export default function MobileEditorToolbar() {
if (eventNtxId !== ntxId || !containerRef.current) return;
const toolbar = editor.ui.view.toolbar?.element;
if (!inPopupEditor) {
repositionDropdowns(editor);
}
if (toolbar) {
containerRef.current.replaceChildren(toolbar);
} else {
@ -60,7 +67,7 @@ export default function MobileEditorToolbar() {
)
}
function usePositioningOniOS(wrapperRef: MutableRef<HTMLDivElement | null>) {
function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef<HTMLDivElement | null>) {
const adjustPosition = useCallback(() => {
if (!wrapperRef.current) return;
let bottom = window.innerHeight - (window.visualViewport?.height || 0);
@ -68,7 +75,7 @@ function usePositioningOniOS(wrapperRef: MutableRef<HTMLDivElement | null>) {
}, []);
useEffect(() => {
if (!isIOS()) return;
if (!isIOS() || !enabled) return;
window.visualViewport?.addEventListener("resize", adjustPosition);
window.addEventListener("scroll", adjustPosition);
@ -77,7 +84,7 @@ function usePositioningOniOS(wrapperRef: MutableRef<HTMLDivElement | null>) {
window.visualViewport?.removeEventListener("resize", adjustPosition);
window.removeEventListener("scroll", adjustPosition);
};
}, []);
}, [ enabled ]);
}
/**