sh-ui-cli 0.114.0 → 0.116.0

package/data/registry/react/components/rich-text-editor/index.tailwind.tsx

@@ -1,19 +1,99 @@
 "use client";
 
-import { useCallback, useEffect } from "react";
-import { useEditor, EditorContent, type Editor } from "@tiptap/react";
+import { useEffect, useState } from "react";
+import {
+  useEditor,
+  useEditorState,
+  EditorContent,
+  type Editor,
+} from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
 import Link from "@tiptap/extension-link";
+import { TextStyle, Color } from "@tiptap/extension-text-style";
 import { cn } from "@SH_UI_UTILS@";
 import {
-  BoldIcon, ItalicIcon, StrikethroughIcon,
-  Heading1Icon, Heading2Icon, Heading3Icon,
-  ListIcon, ListOrderedIcon, QuoteIcon,
-  CodeIcon, Code2Icon, LinkIcon, MinusIcon,
-  Undo2Icon, Redo2Icon,
+  BoldIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikethroughIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ListIcon,
+  ListOrderedIcon,
+  QuoteIcon,
+  CodeIcon,
+  Code2Icon,
+  BaselineIcon,
+  LinkIcon,
+  UnlinkIcon,
+  MinusIcon,
+  Undo2Icon,
+  Redo2Icon,
+  CheckIcon,
+  XIcon,
 } from "lucide-react";
 
+/** 툴바 a11y 라벨/툴팁 — 기본 영어. `labels` prop 으로 부분 덮어쓰기(i18n). */
+export interface RichTextEditorLabels {
+  bold: string;
+  italic: string;
+  underline: string;
+  strike: string;
+  code: string;
+  h1: string;
+  h2: string;
+  h3: string;
+  bulletList: string;
+  orderedList: string;
+  blockquote: string;
+  codeBlock: string;
+  textColor: string;
+  link: string;
+  horizontalRule: string;
+  undo: string;
+  redo: string;
+  colorDefault: string;
+  colorMoss: string;
+  colorRed: string;
+  colorOrange: string;
+  colorBlue: string;
+  linkUrl: string;
+  apply: string;
+  removeLink: string;
+  cancel: string;
+}
+
+const DEFAULT_LABELS: RichTextEditorLabels = {
+  bold: "Bold",
+  italic: "Italic",
+  underline: "Underline",
+  strike: "Strikethrough",
+  code: "Inline code",
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  bulletList: "Bulleted list",
+  orderedList: "Ordered list",
+  blockquote: "Blockquote",
+  codeBlock: "Code block",
+  textColor: "Text color",
+  link: "Link",
+  horizontalRule: "Horizontal rule",
+  undo: "Undo",
+  redo: "Redo",
+  colorDefault: "Default",
+  colorMoss: "Moss",
+  colorRed: "Red",
+  colorOrange: "Orange",
+  colorBlue: "Blue",
+  linkUrl: "Link URL",
+  apply: "Apply",
+  removeLink: "Remove link",
+  cancel: "Cancel",
+};
+
 export interface RichTextEditorProps {
   value?: string;
   defaultValue?: string;
@@ -21,35 +101,101 @@ export interface RichTextEditorProps {
   placeholder?: string;
   readOnly?: boolean;
   hideToolbar?: boolean;
+  /** 핵심 버튼만 노출(좁은 패널용). 제목/코드블록/목록 일부를 생략한다. */
+  compact?: boolean;
+  /** "always"(기본) 항상 노출 · "focus" 포커스/편집 중에만 노출(인라인 느낌). */
+  toolbarMode?: "always" | "focus";
+  /** 툴바 라벨/툴팁 i18n. 누락 키는 영어 기본값. */
+  labels?: Partial<RichTextEditorLabels>;
   minHeight?: string;
   maxHeight?: string;
   className?: string;
   "aria-label"?: string;
 }
 
+/**
+ * 본문 텍스트 색 — CSS 변수로 저장(`var(--sh-ui-rte-c-*)`)해 라이트/다크 테마를
+ * 추종한다(하드 hex 가 아님). 변수 정의부는 하단 주입 스타일시트. moss 는
+ * DESIGN.md accent(#2F5D4F / #5BA886).
+ */
+const COLOR_SWATCHES = [
+  { key: "moss", cssVar: "--sh-ui-rte-c-moss", labelKey: "colorMoss" },
+  { key: "red", cssVar: "--sh-ui-rte-c-red", labelKey: "colorRed" },
+  { key: "orange", cssVar: "--sh-ui-rte-c-orange", labelKey: "colorOrange" },
+  { key: "blue", cssVar: "--sh-ui-rte-c-blue", labelKey: "colorBlue" },
+] as const;
+
+const colorValue = (cssVar: string) => `var(${cssVar})`;
+
+/** 선택 영역(없으면 URL 텍스트 삽입)에 링크를 적용. */
+function applyLink(editor: Editor, rawUrl: string) {
+  const url = rawUrl.trim();
+  if (url === "") {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    return;
+  }
+  const { empty } = editor.state.selection;
+  const inLink = editor.isActive("link");
+  if (empty && !inLink) {
+    editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: "text",
+        text: url,
+        marks: [{ type: "link", attrs: { href: url } }],
+      })
+      .run();
+    return;
+  }
+  editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+}
+
+type ToolbarPanel = "none" | "link" | "color";
 
 export function RichTextEditor({
-  value: valueProp, defaultValue, onChange, placeholder, readOnly = false, hideToolbar = false,
-  minHeight, maxHeight, className,
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder,
+  readOnly = false,
+  hideToolbar = false,
+  compact = false,
+  toolbarMode = "always",
+  labels,
+  minHeight,
+  maxHeight,
+  className,
   "aria-label": ariaLabel = "Rich text editor",
 }: RichTextEditorProps) {
   const isControlled = valueProp !== undefined;
+  const [isFocused, setIsFocused] = useState(false);
+  const [panel, setPanel] = useState<ToolbarPanel>("none");
+  const L = labels ? { ...DEFAULT_LABELS, ...labels } : DEFAULT_LABELS;
+
   const editor = useEditor({
     extensions: [
-      StarterKit,
+      // Link/Underline 은 v3 StarterKit 에 포함 — Link 는 따로 설정하려 끄고 별도 등록(중복 경고 회피).
+      StarterKit.configure({ link: false }),
       Placeholder.configure({
         placeholder: placeholder ?? "",
         emptyEditorClass: "sh-ui-rte__is-empty",
       }),
       Link.configure({
-        openOnClick: false, autolink: true,
+        // 편집 중엔 클릭으로 이탈 방지, 읽기 전용일 때만 클릭 시 열림.
+        openOnClick: readOnly,
+        autolink: true,
         HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
       }),
+      TextStyle,
+      Color.configure({ types: ["textStyle"] }),
     ],
     content: valueProp ?? defaultValue ?? "",
     editable: !readOnly,
     immediatelyRender: false,
-    onUpdate: ({ editor }) => { onChange?.(editor.getHTML()); },
+    onUpdate: ({ editor }) => {
+      onChange?.(editor.getHTML());
+    },
     editorProps: {
       attributes: { class: "sh-ui-rte__content", "aria-label": ariaLabel },
     },
@@ -62,110 +208,476 @@ export function RichTextEditor({
     editor.commands.setContent(valueProp ?? "", { emitUpdate: false });
   }, [isControlled, valueProp, editor]);
 
-  useEffect(() => { editor?.setEditable(!readOnly); }, [readOnly, editor]);
+  useEffect(() => {
+    editor?.setEditable(!readOnly);
+  }, [readOnly, editor]);
+
+  const showToolbar =
+    !hideToolbar && (toolbarMode === "always" || isFocused || panel !== "none");
+
+  // 포커스 추적(toolbarMode="focus" 노출 판정용) — 래퍼의 focusin/focusout(버블).
+  // 에디터·툴바 버튼·링크 입력·컬러 스와치 어디로 포커스가 옮겨가도 컨테이너 안이면
+  // "포커스 중"을 유지(focusout 의 relatedTarget 가 컨테이너 내부면 무시).
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;
+    setIsFocused(false);
+  };
 
   return (
     <div
       className={cn(
-        "sh-ui-rte flex flex-col border border-border rounded-[var(--radius)] bg-background overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-primary focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-ring focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
+        "sh-ui-rte border-border bg-background focus-within:border-primary focus-within:outline-ring data-[readonly]:bg-background-subtle flex flex-col overflow-hidden rounded-[var(--radius)] border transition-[border-color] duration-[var(--duration-fast)] focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-offset-2 motion-reduce:transition-none",
         className,
       )}
       data-readonly={readOnly || undefined}
-      style={{ "--sh-ui-rte-min-height": minHeight, "--sh-ui-rte-max-height": maxHeight } as React.CSSProperties}
+      onFocus={() => setIsFocused(true)}
+      onBlur={handleBlur}
+      style={
+        {
+          "--sh-ui-rte-min-height": minHeight,
+          "--sh-ui-rte-max-height": maxHeight,
+        } as React.CSSProperties
+      }
     >
-      {!hideToolbar && <Toolbar editor={editor} disabled={readOnly} />}
+      {showToolbar && (
+        <Toolbar
+          editor={editor}
+          disabled={readOnly}
+          compact={compact}
+          panel={panel}
+          setPanel={setPanel}
+          labels={L}
+        />
+      )}
       <EditorContent editor={editor} className="sh-ui-rte__viewport" />
     </div>
   );
 }
 
-interface ToolbarProps { editor: Editor | null; disabled: boolean; }
+interface ToolbarProps {
+  editor: Editor | null;
+  disabled: boolean;
+  compact: boolean;
+  panel: ToolbarPanel;
+  setPanel: (next: ToolbarPanel) => void;
+  labels: RichTextEditorLabels;
+}
+
+/** 활성/실행가능 상태 스냅샷 — useEditorState 로 트랜잭션마다 구독(버튼 강조 즉시 반영). */
+function Toolbar({
+  editor,
+  disabled,
+  compact,
+  panel,
+  setPanel,
+  labels: L,
+}: ToolbarProps) {
+  const flags = useEditorState({
+    editor,
+    selector: ({ editor: e }) =>
+      e
+        ? {
+            bold: e.isActive("bold"),
+            canBold: e.can().toggleBold(),
+            italic: e.isActive("italic"),
+            canItalic: e.can().toggleItalic(),
+            underline: e.isActive("underline"),
+            canUnderline: e.can().toggleUnderline(),
+            strike: e.isActive("strike"),
+            canStrike: e.can().toggleStrike(),
+            code: e.isActive("code"),
+            canCode: e.can().toggleCode(),
+            h1: e.isActive("heading", { level: 1 }),
+            h2: e.isActive("heading", { level: 2 }),
+            h3: e.isActive("heading", { level: 3 }),
+            bulletList: e.isActive("bulletList"),
+            orderedList: e.isActive("orderedList"),
+            blockquote: e.isActive("blockquote"),
+            codeBlock: e.isActive("codeBlock"),
+            link: e.isActive("link"),
+            color: e.getAttributes("textStyle").color as string | undefined,
+            canUndo: e.can().undo(),
+            canRedo: e.can().redo(),
+          }
+        : null,
+  });
 
-function Toolbar({ editor, disabled }: ToolbarProps) {
-  const promptLink = useCallback(() => {
-    if (!editor) return;
-    const previous = editor.getAttributes("link").href as string | undefined;
-    const url = window.prompt("URL", previous ?? "https://");
-    if (url === null) return;
-    if (url === "") {
-      editor.chain().focus().extendMarkRange("link").unsetLink().run();
-      return;
-    }
-    const { empty } = editor.state.selection;
-    const inLink = editor.isActive("link");
-    if (empty && !inLink) {
-      editor.chain().focus().insertContent({
-        type: "text", text: url,
-        marks: [{ type: "link", attrs: { href: url } }],
-      }).run();
-      return;
-    }
-    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
-  }, [editor]);
+  const togglePanel = (next: Exclude<ToolbarPanel, "none">) =>
+    setPanel(panel === next ? "none" : next);
+
+  const f = flags;
+  const editorReady = !!editor && !!f;
+  const colorActive = Boolean(f?.color) || panel === "color";
 
   return (
     <div
-      className="flex flex-wrap items-center gap-0.5 py-[var(--space-1)] px-[var(--space-2)] bg-background-muted border-b border-border"
+      className="bg-background-muted border-border border-b"
       role="toolbar"
       aria-label="Formatting"
       aria-disabled={disabled || undefined}
     >
-      <ToolbarButton editor={editor} label="Bold" icon={<BoldIcon size={16} />} isActive={editor?.isActive("bold")} canRun={() => !!editor?.can().toggleBold()} run={() => editor?.chain().focus().toggleBold().run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Italic" icon={<ItalicIcon size={16} />} isActive={editor?.isActive("italic")} canRun={() => !!editor?.can().toggleItalic()} run={() => editor?.chain().focus().toggleItalic().run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Strikethrough" icon={<StrikethroughIcon size={16} />} isActive={editor?.isActive("strike")} canRun={() => !!editor?.can().toggleStrike()} run={() => editor?.chain().focus().toggleStrike().run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Inline code" icon={<CodeIcon size={16} />} isActive={editor?.isActive("code")} canRun={() => !!editor?.can().toggleCode()} run={() => editor?.chain().focus().toggleCode().run()} disabled={disabled} />
+      <div className="flex flex-wrap items-center gap-0.5 px-[var(--space-2)] py-[var(--space-1)]">
+        <ToolbarButton
+          label={L.bold}
+          icon={<BoldIcon size={16} />}
+          isActive={f?.bold}
+          disabled={disabled || !editorReady || !f?.canBold}
+          onClick={() => editor?.chain().focus().toggleBold().run()}
+        />
+        <ToolbarButton
+          label={L.italic}
+          icon={<ItalicIcon size={16} />}
+          isActive={f?.italic}
+          disabled={disabled || !editorReady || !f?.canItalic}
+          onClick={() => editor?.chain().focus().toggleItalic().run()}
+        />
+        <ToolbarButton
+          label={L.underline}
+          icon={<UnderlineIcon size={16} />}
+          isActive={f?.underline}
+          disabled={disabled || !editorReady || !f?.canUnderline}
+          onClick={() => editor?.chain().focus().toggleUnderline().run()}
+        />
+        <ToolbarButton
+          label={L.strike}
+          icon={<StrikethroughIcon size={16} />}
+          isActive={f?.strike}
+          disabled={disabled || !editorReady || !f?.canStrike}
+          onClick={() => editor?.chain().focus().toggleStrike().run()}
+        />
+        {!compact && (
+          <ToolbarButton
+            label={L.code}
+            icon={<CodeIcon size={16} />}
+            isActive={f?.code}
+            disabled={disabled || !editorReady || !f?.canCode}
+            onClick={() => editor?.chain().focus().toggleCode().run()}
+          />
+        )}
 
-      <ToolbarSeparator />
+        <ToolbarSeparator />
 
-      <ToolbarButton editor={editor} label="Heading 1" icon={<Heading1Icon size={16} />} isActive={editor?.isActive("heading", { level: 1 })} run={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Heading 2" icon={<Heading2Icon size={16} />} isActive={editor?.isActive("heading", { level: 2 })} run={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Heading 3" icon={<Heading3Icon size={16} />} isActive={editor?.isActive("heading", { level: 3 })} run={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()} disabled={disabled} />
+        <ToolbarButton
+          label={L.textColor}
+          icon={<BaselineIcon size={16} />}
+          isActive={colorActive}
+          disabled={disabled || !editorReady}
+          onClick={() => togglePanel("color")}
+        />
+        <ToolbarButton
+          label={L.link}
+          icon={<LinkIcon size={16} />}
+          isActive={f?.link || panel === "link"}
+          disabled={disabled || !editorReady}
+          onClick={() => togglePanel("link")}
+        />
 
-      <ToolbarSeparator />
+        {!compact && (
+          <>
+            <ToolbarSeparator />
+            <ToolbarButton
+              label={L.h1}
+              icon={<Heading1Icon size={16} />}
+              isActive={f?.h1}
+              disabled={disabled || !editorReady}
+              onClick={() =>
+                editor?.chain().focus().toggleHeading({ level: 1 }).run()
+              }
+            />
+            <ToolbarButton
+              label={L.h2}
+              icon={<Heading2Icon size={16} />}
+              isActive={f?.h2}
+              disabled={disabled || !editorReady}
+              onClick={() =>
+                editor?.chain().focus().toggleHeading({ level: 2 }).run()
+              }
+            />
+            <ToolbarButton
+              label={L.h3}
+              icon={<Heading3Icon size={16} />}
+              isActive={f?.h3}
+              disabled={disabled || !editorReady}
+              onClick={() =>
+                editor?.chain().focus().toggleHeading({ level: 3 }).run()
+              }
+            />
+          </>
+        )}
 
-      <ToolbarButton editor={editor} label="Bulleted list" icon={<ListIcon size={16} />} isActive={editor?.isActive("bulletList")} run={() => editor?.chain().focus().toggleBulletList().run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Ordered list" icon={<ListOrderedIcon size={16} />} isActive={editor?.isActive("orderedList")} run={() => editor?.chain().focus().toggleOrderedList().run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Blockquote" icon={<QuoteIcon size={16} />} isActive={editor?.isActive("blockquote")} run={() => editor?.chain().focus().toggleBlockquote().run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Code block" icon={<Code2Icon size={16} />} isActive={editor?.isActive("codeBlock")} run={() => editor?.chain().focus().toggleCodeBlock().run()} disabled={disabled} />
+        <ToolbarSeparator />
 
-      <ToolbarSeparator />
+        <ToolbarButton
+          label={L.bulletList}
+          icon={<ListIcon size={16} />}
+          isActive={f?.bulletList}
+          disabled={disabled || !editorReady}
+          onClick={() => editor?.chain().focus().toggleBulletList().run()}
+        />
+        {!compact && (
+          <>
+            <ToolbarButton
+              label={L.orderedList}
+              icon={<ListOrderedIcon size={16} />}
+              isActive={f?.orderedList}
+              disabled={disabled || !editorReady}
+              onClick={() => editor?.chain().focus().toggleOrderedList().run()}
+            />
+            <ToolbarButton
+              label={L.blockquote}
+              icon={<QuoteIcon size={16} />}
+              isActive={f?.blockquote}
+              disabled={disabled || !editorReady}
+              onClick={() => editor?.chain().focus().toggleBlockquote().run()}
+            />
+            <ToolbarButton
+              label={L.codeBlock}
+              icon={<Code2Icon size={16} />}
+              isActive={f?.codeBlock}
+              disabled={disabled || !editorReady}
+              onClick={() => editor?.chain().focus().toggleCodeBlock().run()}
+            />
 
-      <ToolbarButton editor={editor} label="Link" icon={<LinkIcon size={16} />} isActive={editor?.isActive("link")} run={promptLink} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Horizontal rule" icon={<MinusIcon size={16} />} run={() => editor?.chain().focus().setHorizontalRule().run()} disabled={disabled} />
+            <ToolbarSeparator />
 
-      <ToolbarSeparator />
+            <ToolbarButton
+              label={L.horizontalRule}
+              icon={<MinusIcon size={16} />}
+              disabled={disabled || !editorReady}
+              onClick={() => editor?.chain().focus().setHorizontalRule().run()}
+            />
+          </>
+        )}
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          label={L.undo}
+          icon={<Undo2Icon size={16} />}
+          disabled={disabled || !editorReady || !f?.canUndo}
+          onClick={() => editor?.chain().focus().undo().run()}
+        />
+        <ToolbarButton
+          label={L.redo}
+          icon={<Redo2Icon size={16} />}
+          disabled={disabled || !editorReady || !f?.canRedo}
+          onClick={() => editor?.chain().focus().redo().run()}
+        />
+      </div>
+
+      {panel === "color" && editor && (
+        <ColorRow
+          editor={editor}
+          current={f?.color}
+          onClose={() => setPanel("none")}
+          labels={L}
+        />
+      )}
+      {panel === "link" && editor && (
+        <LinkRow
+          editor={editor}
+          hasLink={!!f?.link}
+          onClose={() => setPanel("none")}
+          labels={L}
+        />
+      )}
+    </div>
+  );
+}
 
-      <ToolbarButton editor={editor} label="Undo" icon={<Undo2Icon size={16} />} canRun={() => !!editor?.can().undo()} run={() => editor?.chain().focus().undo().run()} disabled={disabled} />
-      <ToolbarButton editor={editor} label="Redo" icon={<Redo2Icon size={16} />} canRun={() => !!editor?.can().redo()} run={() => editor?.chain().focus().redo().run()} disabled={disabled} />
+/** 텍스트 색 선택 행 — 스와치 클릭 시 적용 후 닫힘. mousedown preventDefault 로 에디터 포커스 유지. */
+function ColorRow({
+  editor,
+  current,
+  onClose,
+  labels: L,
+}: {
+  editor: Editor;
+  current: string | undefined;
+  onClose: () => void;
+  labels: RichTextEditorLabels;
+}) {
+  const choose = (value: string | null) => {
+    if (value === null) editor.chain().focus().unsetColor().run();
+    else editor.chain().focus().setColor(value).run();
+    onClose();
+  };
+  return (
+    <div className="border-border flex flex-wrap items-center gap-1 border-t px-[var(--space-2)] py-[var(--space-1)]">
+      <Swatch
+        label={L.colorDefault}
+        onChoose={() => choose(null)}
+        isActive={!current}
+      >
+        <span className="text-foreground-muted text-[10px] font-semibold">
+          A
+        </span>
+      </Swatch>
+      {COLOR_SWATCHES.map((c) => {
+        const value = colorValue(c.cssVar);
+        return (
+          <Swatch
+            key={c.key}
+            label={L[c.labelKey]}
+            color={value}
+            isActive={current === value}
+            onChoose={() => choose(value)}
+          />
+        );
+      })}
     </div>
   );
 }
 
+function Swatch({
+  label,
+  color,
+  isActive,
+  onChoose,
+  children,
+}: {
+  label: string;
+  color?: string;
+  isActive?: boolean;
+  onChoose: () => void;
+  children?: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "focus-visible:outline-ring inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border transition-[border-color,box-shadow] duration-[var(--duration-fast)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-offset-1 motion-reduce:transition-none",
+        isActive
+          ? "border-foreground"
+          : "border-border hover:border-border-strong",
+      )}
+      style={color ? { backgroundColor: color } : undefined}
+      aria-label={label}
+      aria-pressed={isActive || undefined}
+      title={label}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={onChoose}
+    >
+      {children}
+    </button>
+  );
+}
+
+/** 인라인 링크 편집 행 — window.prompt 대체. 적용/제거/취소(아이콘). Enter 적용, Esc 취소. */
+function LinkRow({
+  editor,
+  hasLink,
+  onClose,
+  labels: L,
+}: {
+  editor: Editor;
+  hasLink: boolean;
+  onClose: () => void;
+  labels: RichTextEditorLabels;
+}) {
+  const [url, setUrl] = useState(
+    () =>
+      (editor.getAttributes("link").href as string | undefined) ?? "https://",
+  );
+
+  const apply = () => {
+    applyLink(editor, url);
+    onClose();
+  };
+  const remove = () => {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    onClose();
+  };
+
+  return (
+    <div className="border-border flex items-center gap-1 border-t px-[var(--space-2)] py-[var(--space-1)]">
+      <input
+        type="url"
+        value={url}
+        autoFocus
+        onChange={(e) => setUrl(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            apply();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onClose();
+          }
+        }}
+        placeholder="https://"
+        aria-label={L.linkUrl}
+        className="bg-background text-foreground border-border focus:border-primary focus-visible:outline-ring h-7 min-w-0 flex-1 rounded-[calc(var(--radius)-2px)] border px-[var(--space-2)] text-sm outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-offset-1"
+      />
+      <IconAction label={L.apply} onClick={apply}>
+        <CheckIcon size={16} />
+      </IconAction>
+      {hasLink && (
+        <IconAction label={L.removeLink} onClick={remove}>
+          <UnlinkIcon size={16} />
+        </IconAction>
+      )}
+      <IconAction label={L.cancel} onClick={onClose}>
+        <XIcon size={16} />
+      </IconAction>
+    </div>
+  );
+}
+
+function IconAction({
+  label,
+  onClick,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      className="text-foreground-muted hover:text-foreground hover:bg-background hover:border-border focus-visible:outline-ring inline-flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-[calc(var(--radius)-2px)] border border-transparent bg-transparent transition-[color,background-color,border-color] duration-[var(--duration-fast)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-offset-1 motion-reduce:transition-none"
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
 interface ToolbarButtonProps {
-  editor: Editor | null;
   label: string;
   icon: React.ReactNode;
   isActive?: boolean;
-  canRun?: () => boolean;
-  run: () => void;
-  disabled: boolean;
+  disabled?: boolean;
+  onClick: () => void;
 }
 
-function ToolbarButton({ editor, label, icon, isActive, canRun, run, disabled }: ToolbarButtonProps) {
-  const isDisabled = disabled || !editor || (canRun ? !canRun() : false);
+function ToolbarButton({
+  label,
+  icon,
+  isActive,
+  disabled,
+  onClick,
+}: ToolbarButtonProps) {
   return (
     <button
       type="button"
       className={cn(
-        "inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-1 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none",
+        "text-foreground-muted hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-ring inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-[calc(var(--radius)-2px)] border border-transparent bg-transparent p-0 transition-[color,background-color,border-color] duration-[var(--duration-fast)] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)] motion-reduce:transition-none",
         isActive && "text-foreground bg-background border-border-strong",
       )}
       aria-label={label}
       aria-pressed={isActive || undefined}
       title={label}
-      disabled={isDisabled}
-      onMouseDown={(e) => { e.preventDefault(); }}
-      onClick={run}
+      disabled={disabled}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={onClick}
     >
       {icon}
     </button>
@@ -173,13 +685,24 @@ function ToolbarButton({ editor, label, icon, isActive, canRun, run, disabled }:
 }
 
 function ToolbarSeparator() {
-  return <span aria-hidden className="inline-block w-px h-5 mx-[var(--space-1)] bg-border" />;
+  return (
+    <span
+      aria-hidden
+      className="bg-border mx-[var(--space-1)] inline-block h-5 w-px"
+    />
+  );
 }
 
-if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-rte]")) {
+if (
+  typeof document !== "undefined" &&
+  !document.querySelector("style[data-sh-ui-rte]")
+) {
   const style = document.createElement("style");
   style.setAttribute("data-sh-ui-rte", "");
   style.textContent = `
+:root { --sh-ui-rte-c-moss: #2F5D4F; --sh-ui-rte-c-red: #C0392B; --sh-ui-rte-c-orange: #C2410C; --sh-ui-rte-c-blue: #1D4ED8; }
+.dark { --sh-ui-rte-c-moss: #5BA886; --sh-ui-rte-c-red: #F1736A; --sh-ui-rte-c-orange: #F0935A; --sh-ui-rte-c-blue: #6BA2F2; }
+@media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) { --sh-ui-rte-c-moss: #5BA886; --sh-ui-rte-c-red: #F1736A; --sh-ui-rte-c-orange: #F0935A; --sh-ui-rte-c-blue: #6BA2F2; } }
 .sh-ui-rte__viewport { display: flex; min-height: var(--sh-ui-rte-min-height, 9rem); max-height: var(--sh-ui-rte-max-height, 28rem); overflow-y: auto; }
 .sh-ui-rte__viewport > .ProseMirror { flex: 1; }
 .sh-ui-rte__content { outline: none; padding: var(--space-3) var(--space-4); font-size: 0.9375rem; line-height: 1.65; color: var(--foreground); }
@@ -191,6 +714,8 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
 .sh-ui-rte__content h2 { font-size: 1.25rem; }
 .sh-ui-rte__content h3 { font-size: 1.125rem; }
 .sh-ui-rte__content ul, .sh-ui-rte__content ol { margin: 0 0 var(--space-3); padding-inline-start: var(--space-5); }
+.sh-ui-rte__content ul { list-style: disc; }
+.sh-ui-rte__content ol { list-style: decimal; }
 .sh-ui-rte__content li { margin-bottom: var(--space-1); }
 .sh-ui-rte__content li > p { margin: 0; }
 .sh-ui-rte__content blockquote { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-inline-start: 3px solid var(--border-strong); background: var(--background-subtle); color: var(--foreground-muted); border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0; }
@@ -201,6 +726,7 @@ if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui
 .sh-ui-rte__content hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
 .sh-ui-rte__content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
 .sh-ui-rte__content a:hover { text-decoration-thickness: 2px; }
+.sh-ui-rte__content u { text-decoration: underline; text-underline-offset: 2px; }
 .sh-ui-rte__content p.is-editor-empty:first-child::before, .sh-ui-rte__content .is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--foreground-muted); float: left; pointer-events: none; height: 0; }
 .sh-ui-rte__content del, .sh-ui-rte__content s { color: var(--foreground-muted); }
 .sh-ui-rte__content ::selection { background: var(--background-muted); }