Better markdown editor and SegmentedControl

src-web/components/MarkdownEditor.tsx

@@ -1,15 +1,12 @@
 import classNames from 'classnames';
-import { atom, useAtom } from 'jotai';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import type { Components } from 'react-markdown';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useStateWithDeps } from '../hooks/useStateWithDeps';
-import { Button } from './core/Button';
 import type { EditorProps } from './core/Editor/Editor';
 import { Editor } from './core/Editor/Editor';
-import { HStack, VStack } from './core/Stacks';
 import { Prose } from './Prose';
+import { SegmentedControl } from './core/SegmentedControl';
 
 type ViewMode = 'edit' | 'preview';
 
@@ -19,27 +16,19 @@ interface Props extends Pick<EditorProps, 'heightMode' | 'stateKey' | 'forceUpda
   defaultValue: string;
   onChange: (value: string) => void;
   name: string;
-  defaultMode?: ViewMode;
-  doneButtonLabel?: string;
 }
 
-const viewModeAtom = atom<Record<string, ViewMode>>({});
-
 export function MarkdownEditor({
   className,
   defaultValue,
   onChange,
   name,
-  defaultMode = 'preview',
-  doneButtonLabel = 'Save',
   forceUpdateKey,
   ...editorProps
 }: Props) {
-  const [rawViewMode, setViewMode] = useAtom(viewModeAtom);
-  const [value, setValue] = useStateWithDeps<string>(defaultValue, [forceUpdateKey]);
+  const [viewMode, setViewMode] = useState<ViewMode>(defaultValue ? 'preview' : 'edit');
 
   const containerRef = useRef<HTMLDivElement>(null);
-  const viewMode = rawViewMode[name] ?? defaultMode;
 
   const editor = (
     <Editor
@@ -48,8 +37,7 @@ export function MarkdownEditor({
       className="max-w-2xl max-h-full"
       language="markdown"
       defaultValue={defaultValue}
-      onChange={setValue}
-      autoFocus
+      onChange={onChange}
       forceUpdateKey={forceUpdateKey}
       {...editorProps}
     />
@@ -61,7 +49,7 @@ export function MarkdownEditor({
     ) : (
       <Prose className="max-w-xl overflow-y-auto max-h-full [&_*]:cursor-auto [&_*]:select-auto">
         <Markdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
-          {value}
+          {defaultValue}
         </Markdown>
       </Prose>
     );
@@ -72,53 +60,31 @@ export function MarkdownEditor({
     <div
       ref={containerRef}
       className={classNames(
-        'w-full h-full pt-1.5 group rounded-md grid grid-cols-[minmax(0,1fr)_auto] grid-rows-1 gap-x-1.5',
+        'group/markdown',
+        'w-full h-full pt-1.5 rounded-md grid grid-cols-[minmax(0,1fr)_auto] grid-rows-1 gap-x-1.5',
         className,
       )}
     >
       <div className="h-full w-full">{contents}</div>
-      <VStack
-        space={1}
-        className="bg-surface opacity-20 group-hover:opacity-100 transition-opacity transform-gpu"
-      >
-        {viewMode === 'preview' && (
-          <Button
-            size="xs"
-            variant="border"
-            event={{ id: 'md_mode', mode: viewMode }}
-            onClick={() => setViewMode((prev) => ({ ...prev, [name]: 'edit' }))}
-          >
-            Edit
-          </Button>
-        )}
-        {viewMode === 'edit' && (
-          <HStack space={2}>
-            <Button
-              size="xs"
-              event={{ id: 'md_mode', mode: viewMode }}
-              color="secondary"
-              variant="border"
-              onClick={() => {
-                setViewMode((prev) => ({ ...prev, [name]: 'preview' }));
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              size="xs"
-              variant="border"
-              color="primary"
-              event={{ id: 'md_mode', mode: viewMode }}
-              onClick={() => {
-                onChange(value);
-                setViewMode((prev) => ({ ...prev, [name]: 'preview' }));
-              }}
-            >
-              {doneButtonLabel}
-            </Button>
-          </HStack>
-        )}
-      </VStack>
+      <SegmentedControl
+        name={name}
+        onChange={setViewMode}
+        value={viewMode}
+        options={[
+          {
+            event: { id: 'md_mode', mode: 'preview' },
+            icon: 'eye',
+            label: 'Preview mode',
+            value: 'preview',
+          },
+          {
+            event: { id: 'md_mode', mode: 'edit' },
+            icon: 'pencil',
+            label: 'Edit mode',
+            value: 'edit',
+          },
+        ]}
+      />
     </div>
   );
 }

src-web/components/core/IconButton.tsx

@@ -7,7 +7,7 @@ import { Button } from './Button';
 import type { IconProps } from './Icon';
 import { Icon } from './Icon';
 
-type Props = IconProps &
+export type IconButtonProps = IconProps &
   ButtonProps & {
     showConfirm?: boolean;
     iconClassName?: string;
@@ -16,7 +16,7 @@ type Props = IconProps &
     showBadge?: boolean;
   };
 
-export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButton(
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
   {
     showConfirm,
     icon,
@@ -30,7 +30,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
     iconSize,
     showBadge,
     ...props
-  }: Props,
+  }: IconButtonProps,
   ref,
 ) {
   const [confirmed, setConfirmed] = useTimedBoolean();

src-web/components/core/SegmentedControl.tsx

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+import { useStateWithDeps } from '../../hooks/useStateWithDeps';
+import type { IconProps } from './Icon';
+import type { IconButtonProps } from './IconButton';
+import { IconButton } from './IconButton';
+import { HStack } from './Stacks';
+
+interface Props<T extends string> {
+  options: { value: T; label: string; icon: IconProps['icon']; event?: IconButtonProps['event'] }[];
+  onChange: (value: T) => void;
+  value: T;
+  name: string;
+}
+
+export function SegmentedControl<T extends string>({ value, onChange, options, name }: Props<T>) {
+  const [selectedValue, setSelectedValue] = useStateWithDeps<T>(value, [value]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  return (
+    <HStack
+      ref={containerRef}
+      space={1}
+      role="group"
+      dir="ltr"
+      className="mb-auto bg-surface opacity-0 group-focus-within/markdown:opacity-100 group-hover/markdown:opacity-100 transition-opacity transform-gpu"
+      onKeyDown={(e) => {
+        const selectedIndex = options.findIndex((o) => o.value === selectedValue);
+        if (e.key === 'ArrowRight') {
+          const newIndex = Math.abs((selectedIndex + 1) % options.length);
+          setSelectedValue(options[newIndex]!.value);
+          const child = containerRef.current?.children[newIndex] as HTMLButtonElement;
+          child.focus();
+        } else if (e.key === 'ArrowLeft') {
+          const newIndex = Math.abs((selectedIndex - 1) % options.length);
+          setSelectedValue(options[newIndex]!.value);
+          const child = containerRef.current?.children[newIndex] as HTMLButtonElement;
+          child.focus();
+        }
+      }}
+    >
+      {options.map((o, i) => (
+        <IconButton
+          size="xs"
+          variant={value === o.value ? 'solid' : 'border'}
+          color={value === o.value ? 'secondary' : 'default'}
+          role="radio"
+          event={{ id: name, value: String(o.value) }}
+          tabIndex={selectedValue === o.value ? 0 : -1}
+          key={i}
+          title={o.label}
+          icon={o.icon}
+          onClick={() => onChange(o.value)}
+        />
+      ))}
+    </HStack>
+  );
+}