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

chore(react/type_widget): bring back split resizer

Browse Source
This commit is contained in:
Elian Doran 2025-09-20 12:54:18 +03:00
parent 695e8489ad
commit 425ffc02d8
No known key found for this signature in database
2 changed files with 22 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
View File

@ -1,11 +1,15 @@
import { isMobile } from "../../../services/utils"; import { useEffect, useRef } from "preact/hooks";
import utils, { isMobile } from "../../../services/utils";
import Admonition from "../../react/Admonition"; import Admonition from "../../react/Admonition";
import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks"; import { useNoteLabelBoolean, useTriliumOption } from "../../react/hooks";
import { TypeWidgetProps } from "../type_widget"; import { TypeWidgetProps } from "../type_widget";
import "./SplitEditor.css"; import "./SplitEditor.css";
import Split from "split.js";
import { DEFAULT_GUTTER_SIZE } from "../../../services/resizer";
interface SplitEditorProps extends TypeWidgetProps { interface SplitEditorProps extends TypeWidgetProps {
error?: string | null; error?: string | null;
splitOptions?: Split.Options;
} }
/** /**
@ -17,9 +21,10 @@ interface SplitEditorProps extends TypeWidgetProps {
* - Can display errors to the user via {@link setError}. * - Can display errors to the user via {@link setError}.
* - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button. * - Horizontal or vertical orientation for the editor/preview split, adjustable via the switch split orientation button floating button.
*/ */
export default function SplitEditor({ note, error }: SplitEditorProps) { export default function SplitEditor({ note, error, splitOptions }: SplitEditorProps) {
const splitEditorOrientation = useSplitOrientation(); const splitEditorOrientation = useSplitOrientation();
const [ readOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ readOnly ] = useNoteLabelBoolean(note, "readOnly");
const containerRef = useRef<HTMLDivElement>(null);
const editor = (!readOnly && const editor = (!readOnly &&
<div className="note-detail-split-editor-col"> <div className="note-detail-split-editor-col">
@ -37,8 +42,21 @@ export default function SplitEditor({ note, error }: SplitEditorProps) {
</div> </div>
); );
useEffect(() => {
if (!utils.isDesktop() || !containerRef.current || readOnly) return;
const elements = Array.from(containerRef.current?.children) as HTMLElement[];
const splitInstance = Split(elements, {
sizes: [ 50, 50],
direction: splitEditorOrientation,
gutterSize: DEFAULT_GUTTER_SIZE,
...splitOptions
});
return () => splitInstance.destroy();
}, [ readOnly, splitEditorOrientation ]);
return ( return (
<div className={`note-detail-split note-detail-printable ${"split-" + splitEditorOrientation} ${readOnly ? "split-read-only" : ""}`}> <div ref={containerRef} className={`note-detail-split note-detail-printable ${"split-" + splitEditorOrientation} ${readOnly ? "split-read-only" : ""}`}>
{splitEditorOrientation === "horizontal" {splitEditorOrientation === "horizontal"
? <>{editor}{preview}</> ? <>{editor}{preview}</>
: <>{preview}{editor}</>} : <>{preview}{editor}</>}
@ -50,5 +68,5 @@ function useSplitOrientation() {
const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation"); const [ splitEditorOrientation ] = useTriliumOption("splitEditorOrientation");
if (isMobile()) return "vertical"; if (isMobile()) return "vertical";
if (!splitEditorOrientation) return "horizontal"; if (!splitEditorOrientation) return "horizontal";
return splitEditorOrientation; return splitEditorOrientation as "horizontal" | "vertical";
} }

46
apps/client/src/widgets/type_widgets_old/abstract_split_type_widget.ts
View File

@ -84,52 +84,6 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
} }
} }
#adjustLayoutOrientation() {
// Vertical vs horizontal layout
if (this.layoutOrientation !== layoutOrientation || this.isReadOnly !== isReadOnly) {
this.$widget
.toggleClass("split-read-only", isReadOnly);
this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
this.isReadOnly = isReadOnly;
this.#destroyResizer();
}
if (!this.splitInstance) {
this.#setupResizer();
}
}
#setupResizer() {
if (!utils.isDesktop()) {
return;
}
this.splitInstance?.destroy();
if (!this.isReadOnly) {
this.splitInstance = Split(elements, {
sizes: [ 50, 50 ],
direction: this.layoutOrientation,
gutterSize: DEFAULT_GUTTER_SIZE,
...this.buildSplitExtraOptions()
});
} else {
this.splitInstance = undefined;
}
}
#destroyResizer() {
this.splitInstance?.destroy();
this.splitInstance = undefined;
}
/**
* Called upon when the split between the preview and content pane is initialized. Can be used to add additional listeners if needed.
*/
buildSplitExtraOptions(): Split.Options {
return {};
}
/** /**
* Called upon when the code editor is being initialized. Can be used to add additional options to the editor. * Called upon when the code editor is being initialized. Can be used to add additional options to the editor.
*/ */