yaak-mountain-loop/src-web/components/MarkdownEditor.tsx

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>
  );
}