107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
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>
|
|
);
|
|
}
|