diff --git a/apps/client/src/widgets/dialogs/PopupEditor.css b/apps/client/src/widgets/dialogs/PopupEditor.css index c39545293..c545a13eb 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.css +++ b/apps/client/src/widgets/dialogs/PopupEditor.css @@ -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 { diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx index 8d566a404..a6c641d8d 100644 --- a/apps/client/src/widgets/dialogs/PopupEditor.tsx +++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx @@ -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() { > - + + {isMobile + ? + : } + diff --git a/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.css b/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.css index db469fcbd..2286cc013 100644 --- a/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.css +++ b/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.css @@ -1,52 +1,54 @@ -.classic-toolbar-outer-container { - contain: none !important; -} - -.classic-toolbar-outer-container.visible { - height: 38px; - background-color: var(--main-background-color); - position: relative; - overflow: visible; - flex-shrink: 0; -} - -#root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios { - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - bottom: 0; -} - -.classic-toolbar-widget { - position: absolute; - bottom: 0; - inset-inline-start: 0; - inset-inline-end: 0; - height: 38px; - overflow: scroll; - display: flex; - align-items: flex-end; - user-select: none; - scrollbar-width: 0 !important; -} - -.classic-toolbar-widget::-webkit-scrollbar:horizontal { - height: 0 !important; -} - -.classic-toolbar-widget.dropdown-active { - height: 50vh; -} - -.classic-toolbar-widget .ck.ck-toolbar { - --ck-color-toolbar-background: transparent; - --ck-color-button-default-background: transparent; - --ck-color-button-default-disabled-background: transparent; - position: absolute; - background-color: transparent; - border: none; -} - -.classic-toolbar-widget .ck.ck-button.ck-disabled { - opacity: 0.3; +body.mobile { + .classic-toolbar-outer-container { + contain: none !important; + } + + .classic-toolbar-outer-container.visible { + height: 38px; + background-color: var(--main-background-color); + position: relative; + overflow: visible; + flex-shrink: 0; + } + + #root-widget.virtual-keyboard-opened .classic-toolbar-outer-container.ios { + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + bottom: 0; + } + + .classic-toolbar-widget { + position: absolute; + bottom: 0; + inset-inline-start: 0; + inset-inline-end: 0; + height: 38px; + overflow: scroll; + display: flex; + align-items: flex-end; + user-select: none; + scrollbar-width: 0 !important; + } + + .classic-toolbar-widget::-webkit-scrollbar:horizontal { + height: 0 !important; + } + + .classic-toolbar-widget.dropdown-active { + height: 50vh; + } + + .classic-toolbar-widget .ck.ck-toolbar { + --ck-color-toolbar-background: transparent; + --ck-color-button-default-background: transparent; + --ck-color-button-default-disabled-background: transparent; + position: absolute; + background-color: transparent; + border: none; + } + + .classic-toolbar-widget .ck.ck-button.ck-disabled { + opacity: 0.3; + } } \ No newline at end of file diff --git a/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx b/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx index 4b2ac7e1c..86e7129ef 100644 --- a/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx +++ b/apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx @@ -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(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; - repositionDropdowns(editor); + if (!inPopupEditor) { + repositionDropdowns(editor); + } + if (toolbar) { containerRef.current.replaceChildren(toolbar); } else { @@ -60,7 +67,7 @@ export default function MobileEditorToolbar() { ) } -function usePositioningOniOS(wrapperRef: MutableRef) { +function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef) { const adjustPosition = useCallback(() => { if (!wrapperRef.current) return; let bottom = window.innerHeight - (window.visualViewport?.height || 0); @@ -68,7 +75,7 @@ function usePositioningOniOS(wrapperRef: MutableRef) { }, []); 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) { window.visualViewport?.removeEventListener("resize", adjustPosition); window.removeEventListener("scroll", adjustPosition); }; - }, []); + }, [ enabled ]); } /**