Updates

2026-03-04 17:35:14 +01:00
parent f73b56cdc4
commit db26e26495
113 changed files with 12433 additions and 169 deletions
@@ -0,0 +1,106 @@
+import React, { ComponentProps, useRef } from "react";
+import { twMerge } from "tailwind-merge";
+import MarkdownEditorPreviewComponent from "./MarkdownEditorPreviewComponent";
+import MarkdownEditorComponent from "./MarkdownEditorComponent";
+import MarkdownEditorSelectorButtons from "./MarkdownEditorSelectorButtons";
+import Row from "../../layout/Row";
+import Stack from "../../layout/Stack";
+import AceEditor from "../../editors/AceEditor";
+import useStatus from "../../hooks/useStatus";
+
+type Props = {
+    value?: string;
+    setValue?: React.Dispatch<React.SetStateAction<string>>;
+    defaultSideBySide?: boolean;
+    changeHandler?: (content: string) => void;
+    editorProps?: ComponentProps<typeof AceEditor>;
+    maxHeight?: string;
+    noToggleButtons?: boolean;
+};
+
+export default function MarkdownEditor({
+    value: existingValue,
+    setValue: setExistingValue,
+    defaultSideBySide,
+    changeHandler,
+    editorProps,
+    maxHeight: existingMaxHeight,
+    noToggleButtons,
+}: Props) {
+    const [value, setValue] = React.useState<any>(existingValue || ``);
+
+    const [sideBySide, setSideBySide] = React.useState(
+        defaultSideBySide || false,
+    );
+    const [preview, setPreview] = React.useState(false);
+    const { refresh, setRefresh } = useStatus();
+    const updatingFromExtValueRef = useRef(false);
+
+    const maxHeight = existingMaxHeight || "600px";
+
+    React.useEffect(() => {
+        if (updatingFromExtValueRef.current) return;
+        setExistingValue?.(value);
+        changeHandler?.(value);
+    }, [value]);
+
+    React.useEffect(() => {
+        if (!existingValue) return;
+        updatingFromExtValueRef.current = true;
+        setValue(existingValue);
+        setTimeout(() => {
+            updatingFromExtValueRef.current = false;
+            setRefresh((prev) => prev + 1);
+        }, 500);
+    }, [existingValue]);
+
+    return (
+        <Stack className="w-full items-stretch">
+            {!noToggleButtons && (
+                <MarkdownEditorSelectorButtons
+                    {...{ preview, setPreview, setSideBySide, sideBySide }}
+                />
+            )}
+
+            {sideBySide ? (
+                <Row
+                    className={twMerge(
+                        `w-full grid xl:grid-cols-2 gap-6 max-h-[${maxHeight}]`,
+                        "overflow-auto",
+                    )}
+                >
+                    <MarkdownEditorComponent
+                        setValue={setValue}
+                        value={value}
+                        maxHeight={maxHeight}
+                        refreshDepArr={[refresh]}
+                        {...editorProps}
+                    />
+                    <MarkdownEditorPreviewComponent
+                        value={value}
+                        maxHeight={maxHeight}
+                    />
+                </Row>
+            ) : (
+                <Stack
+                    className={twMerge(`w-full max-h-[${maxHeight}] h-full`)}
+                >
+                    {preview ? (
+                        <MarkdownEditorPreviewComponent
+                            value={value}
+                            maxHeight={maxHeight}
+                        />
+                    ) : (
+                        <MarkdownEditorComponent
+                            setValue={setValue}
+                            value={value}
+                            maxHeight={maxHeight}
+                            refreshDepArr={[refresh]}
+                            {...editorProps}
+                        />
+                    )}
+                </Stack>
+            )}
+        </Stack>
+    );
+}