Split codebase (#455)

2026-05-17 13:17:01 +02:00 · 2026-05-07 15:50:10 -07:00
parent d2dc719cc6
commit 10559c8f4f
742 changed files with 7686 additions and 3249 deletions
@@ -0,0 +1,83 @@
+import classNames from "classnames";
+import { useRef, useState } from "react";
+import type { EditorProps } from "./core/Editor/Editor";
+import { Editor } from "./core/Editor/LazyEditor";
+import { SegmentedControl } from "./core/SegmentedControl";
+import { Markdown } from "./Markdown";
+
+type ViewMode = "edit" | "preview";
+
+interface Props extends Pick<EditorProps, "heightMode" | "stateKey" | "forceUpdateKey"> {
+  placeholder: string;
+  className?: string;
+  editorClassName?: string;
+  defaultValue: string;
+  onChange: (value: string) => void;
+  name: string;
+}
+
+export function MarkdownEditor({
+  className,
+  editorClassName,
+  defaultValue,
+  onChange,
+  name,
+  forceUpdateKey,
+  ...editorProps
+}: Props) {
+  const [viewMode, setViewMode] = useState<ViewMode>(defaultValue ? "preview" : "edit");
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const editor = (
+    <Editor
+      hideGutter
+      wrapLines
+      className={classNames(editorClassName, "[&_.cm-line]:!max-w-lg max-h-full")}
+      language="markdown"
+      defaultValue={defaultValue}
+      onChange={onChange}
+      forceUpdateKey={forceUpdateKey}
+      {...editorProps}
+    />
+  );
+
+  const preview =
+    defaultValue.length === 0 ? (
+      <p className="text-text-subtlest">No description</p>
+    ) : (
+      <div className="pr-1.5 overflow-y-auto max-h-full [&_*]:cursor-auto [&_*]:select-auto">
+        <Markdown className="max-w-lg select-auto cursor-auto">{defaultValue}</Markdown>
+      </div>
+    );
+
+  const contents = viewMode === "preview" ? preview : editor;
+
+  return (
+    <div
+      ref={containerRef}
+      className={classNames(
+        "group/markdown",
+        "relative w-full h-full pt-1.5 rounded-md gap-x-1.5",
+        "min-w-0", // Not sure why this is needed
+        className,
+      )}
+    >
+      <div className="h-full w-full">{contents}</div>
+      <div className="absolute top-0 right-0 pt-1.5 pr-1.5">
+        <SegmentedControl
+          name={name}
+          label="View mode"
+          hideLabel
+          onChange={setViewMode}
+          value={viewMode}
+          className="opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100"
+          options={[
+            { icon: "eye", label: "Preview mode", value: "preview" },
+            { icon: "pencil", label: "Edit mode", value: "edit" },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}