diff --git a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
index f065a702c..62c1b8161 100644
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
@@ -1,3 +1,5 @@
+import { isMobile } from "../../../services/utils";
+import { useTriliumOption } from "../../react/hooks";
import { TypeWidgetProps } from "../type_widget";
import "./SplitEditor.css";
@@ -11,16 +13,24 @@ import "./SplitEditor.css";
* - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
*/
export default function SplitEditor({ }: TypeWidgetProps) {
+ const splitEditorOrientation = useSplitOrientation();
return (
-
+
-
-
+
Detail goes here.
+
Errors go here.
-
-
+
Preview goes here
+
Buttons go here
)
}
+
+function useSplitOrientation() {
+ const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
+ if (isMobile()) return "vertical";
+ if (!splitEditorOrientation) return "horizontal";
+ return splitEditorOrientation;
+}
diff --git a/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts b/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
index 80e7c3c15..bd2b3b567 100644
--- a/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
+++ b/apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
@@ -92,11 +92,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
}
// Vertical vs horizontal layout
- const layoutOrientation = (!utils.isMobile() ? options.get("splitEditorOrientation") ?? "horizontal" : "vertical");
if (this.layoutOrientation !== layoutOrientation || this.isReadOnly !== isReadOnly) {
this.$widget
- .toggleClass("split-horizontal", !isReadOnly && layoutOrientation === "horizontal")
- .toggleClass("split-vertical", !isReadOnly && layoutOrientation === "vertical")
.toggleClass("split-read-only", isReadOnly);
this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
this.isReadOnly = isReadOnly;