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 ]);
}
/**