sh-ui-cli 0.49.0 → 0.50.0

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

@@ -0,0 +1,348 @@
+"use client";
+
+import { useCallback, useEffect } from "react";
+import { useEditor, 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 { cn } from "@SH_UI_UTILS@";
+import {
+  BoldIcon,
+  ItalicIcon,
+  StrikethroughIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ListIcon,
+  ListOrderedIcon,
+  QuoteIcon,
+  CodeIcon,
+  Code2Icon,
+  LinkIcon,
+  MinusIcon,
+  Undo2Icon,
+  Redo2Icon,
+} from "lucide-react";
+import { byKey, rte, rte__toolbar, rte__btn, rte__sep, rte__viewport, rte__content, rteIsEmpty } from "./styles.css";
+
+export interface RichTextEditorProps {
+  /**
+   * Controlled — 현재 HTML. 명시 시 외부 상태가 진실원천이 되고 onChange 로 갱신한다.
+   * 미지정이면 uncontrolled — Tiptap editor 가 자체 doc 으로 동작.
+   */
+  value?: string;
+  /**
+   * Uncontrolled 초기 HTML. value 미지정 시에만 사용.
+   * @default ""
+   */
+  defaultValue?: string;
+  /** 본문이 바뀔 때마다 호출 (controlled · uncontrolled 모두). HTML 문자열을 그대로 넘긴다. */
+  onChange?: (html: string) => void;
+  /** 비어 있을 때 표시할 placeholder. */
+  placeholder?: string;
+  /** 읽기 전용. 키 입력·툴바 차단. */
+  readOnly?: boolean;
+  /** 상단 툴바 숨기기. 본문 영역만 렌더. */
+  hideToolbar?: boolean;
+  /** 본문 영역의 최소 높이. */
+  minHeight?: string;
+  /** 본문 영역의 최대 높이. 초과 시 내부 스크롤. */
+  maxHeight?: string;
+  className?: string;
+  "aria-label"?: string;
+}
+
+
+/**
+ * Tiptap 기반 리치 텍스트 에디터.
+ *
+ * Controlled (value/onChange) · Uncontrolled (defaultValue) 모두 지원. 라우터·외부 상태와
+ * 동기화할 게 없는 단일 입력 폼이라면 defaultValue 한 줄로 끝 — useState 불필요.
+ *
+ * 기본 toolbar 는 StarterKit 의 표준 마크업(헤딩·리스트·인용·코드·링크 등) 을 다룬다.
+ */
+export function RichTextEditor({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder,
+  readOnly = false,
+  hideToolbar = false,
+  minHeight,
+  maxHeight,
+  className,
+  "aria-label": ariaLabel = "Rich text editor",
+}: RichTextEditorProps) {
+  const isControlled = valueProp !== undefined;
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Placeholder.configure({
+        placeholder: placeholder ?? "",
+        emptyEditorClass: rteIsEmpty,
+      }),
+      Link.configure({
+        openOnClick: false,
+        autolink: true,
+        HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
+      }),
+    ],
+    content: valueProp ?? defaultValue ?? "",
+    editable: !readOnly,
+    immediatelyRender: false,
+    onUpdate: ({ editor }) => {
+      onChange?.(editor.getHTML());
+    },
+    editorProps: {
+      attributes: {
+        class: rte__content,
+        "aria-label": ariaLabel,
+      },
+    },
+  });
+
+  // controlled 모드에서만 외부 value 를 에디터 doc 에 동기화
+  useEffect(() => {
+    if (!isControlled) return;
+    if (!editor) return;
+    if (editor.getHTML() === valueProp) return;
+    editor.commands.setContent(valueProp ?? "", { emitUpdate: false });
+  }, [isControlled, valueProp, editor]);
+
+  useEffect(() => {
+    editor?.setEditable(!readOnly);
+  }, [readOnly, editor]);
+
+  return (
+    <div
+      className={cn(rte, className)}
+      data-readonly={readOnly || undefined}
+      style={
+        {
+          "--sh-ui-rte-min-height": minHeight,
+          "--sh-ui-rte-max-height": maxHeight,
+        } as React.CSSProperties
+      }
+    >
+      {!hideToolbar && <Toolbar editor={editor} disabled={readOnly} />}
+      <EditorContent editor={editor} className={rte__viewport} />
+    </div>
+  );
+}
+
+interface ToolbarProps {
+  editor: Editor | null;
+  disabled: boolean;
+}
+
+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) {
+      // 선택 없이 호출되면 URL 자체를 anchor 텍스트로 삽입 — 빈 링크 마크가 남는 걸 방지
+      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]);
+
+  return (
+    <div className={rte__toolbar} 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}
+      />
+
+      <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}
+      />
+
+      <ToolbarSeparator />
+
+      <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 />
+
+      <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 />
+
+      <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}
+      />
+    </div>
+  );
+}
+
+interface ToolbarButtonProps {
+  editor: Editor | null;
+  label: string;
+  icon: React.ReactNode;
+  isActive?: boolean;
+  /** false 를 반환하면 비활성. */
+  canRun?: () => boolean;
+  run: () => void;
+  disabled: boolean;
+}
+
+function ToolbarButton({
+  editor,
+  label,
+  icon,
+  isActive,
+  canRun,
+  run,
+  disabled,
+}: ToolbarButtonProps) {
+  const isDisabled = disabled || !editor || (canRun ? !canRun() : false);
+  return (
+    <button
+      type="button"
+      className={cn(rte__btn, isActive && "is-active")}
+      aria-label={label}
+      aria-pressed={isActive || undefined}
+      title={label}
+      disabled={isDisabled}
+      onMouseDown={(e) => {
+        e.preventDefault();
+      }}
+      onClick={run}
+    >
+      {icon}
+    </button>
+  );
+}
+
+function ToolbarSeparator() {
+  return <span aria-hidden className={rte__sep} />;
+}

package/data/registry/react/components/rich-text-editor/styles.css.ts

@@ -0,0 +1,243 @@
+import { style } from "@vanilla-extract/css";
+
+export const rte = style({
+  display: "flex",
+  flexDirection: "column",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius)",
+  background: "var(--background)",
+  overflow: "hidden",
+  transition: "border-color var(--duration-fast)",
+  selectors: {
+    "&:focus-within": {
+      borderColor: "var(--foreground)",
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "2px",
+    },
+    "&[data-readonly]": {
+      background: "var(--background-subtle)",
+    },
+  },
+});
+
+export const rte__toolbar = style({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "0.125rem",
+  padding: "var(--space-1) var(--space-2)",
+  background: "var(--background-muted)",
+  borderBottom: "1px solid var(--border)",
+});
+
+export const rte__btn = style({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "1.875rem",
+  height: "1.875rem",
+  padding: 0,
+  background: "transparent",
+  color: "var(--foreground-muted)",
+  border: "1px solid transparent",
+  borderRadius: "calc(var(--radius) - 2px)",
+  cursor: "pointer",
+  transition: "color var(--duration-fast),\n    background-color var(--duration-fast),\n    border-color var(--duration-fast)",
+  WebkitTapHighlightColor: "transparent",
+  selectors: {
+    "&:hover:not(:disabled)": {
+      color: "var(--foreground)",
+      background: "var(--background)",
+      borderColor: "var(--border)",
+    },
+    "&:focus-visible": {
+      outline: "var(--border-width-strong) solid var(--foreground)",
+      outlineOffset: "1px",
+    },
+    "&.is-active": {
+      color: "var(--foreground)",
+      background: "var(--background)",
+      borderColor: "var(--border-strong)",
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
+  },
+});
+
+export const rte__sep = style({
+  display: "inline-block",
+  width: "1px",
+  height: "1.25rem",
+  margin: "0 var(--space-1)",
+  background: "var(--border)",
+});
+
+export const rte__viewport = style({
+  display: "flex",
+  minHeight: "var(--sh-ui-rte-min-height, 9rem)",
+  maxHeight: "var(--sh-ui-rte-max-height, 28rem)",
+  overflowY: "auto",
+  selectors: {
+    "& > .ProseMirror": {
+      flex: 1,
+    },
+  },
+});
+
+export const rte__content = style({
+  outline: "none",
+  padding: "var(--space-3) var(--space-4)",
+  fontSize: "0.9375rem",
+  lineHeight: 1.65,
+  color: "var(--foreground)",
+  selectors: {
+    "& > :first-child": {
+      marginTop: 0,
+    },
+    "& > :last-child": {
+      marginBottom: 0,
+    },
+    "& p": {
+      margin: "0 0 var(--space-3)",
+    },
+    "& h1": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h2": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h3": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h4": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h5": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h6": {
+      margin: "var(--space-4) 0 var(--space-2)",
+      fontWeight: 600,
+      lineHeight: 1.3,
+    },
+    "& h1": {
+      fontSize: "1.5rem",
+    },
+    "& h2": {
+      fontSize: "1.25rem",
+    },
+    "& h3": {
+      fontSize: "1.125rem",
+    },
+    "& ul": {
+      margin: "0 0 var(--space-3)",
+      paddingLeft: "var(--space-5)",
+    },
+    "& ol": {
+      margin: "0 0 var(--space-3)",
+      paddingLeft: "var(--space-5)",
+    },
+    "& li": {
+      marginBottom: "var(--space-1)",
+    },
+    "& li > p": {
+      margin: 0,
+    },
+    "& blockquote": {
+      margin: "0 0 var(--space-3)",
+      padding: "var(--space-2) var(--space-3)",
+      borderLeft: "3px solid var(--border-strong)",
+      background: "var(--background-subtle)",
+      color: "var(--foreground-muted)",
+      borderRadius: "0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0",
+    },
+    "& blockquote > :last-child": {
+      marginBottom: 0,
+    },
+    "& code": {
+      fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      fontSize: "0.875em",
+      padding: "0.125rem 0.375rem",
+      borderRadius: "calc(var(--radius) - 4px)",
+      background: "var(--background-muted)",
+      color: "var(--foreground)",
+    },
+    "& pre": {
+      margin: "0 0 var(--space-3)",
+      padding: "var(--space-3)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius)",
+      background: "var(--background-subtle)",
+      overflowX: "auto",
+      fontSize: "0.8125rem",
+      lineHeight: 1.6,
+    },
+    "& pre code": {
+      padding: 0,
+      background: "transparent",
+      fontSize: "inherit",
+    },
+    "& hr": {
+      border: 0,
+      borderTop: "1px solid var(--border)",
+      margin: "var(--space-4) 0",
+    },
+    "& a": {
+      color: "var(--primary)",
+      textDecoration: "underline",
+      textUnderlineOffset: "2px",
+    },
+    "& a:hover": {
+      textDecorationThickness: "2px",
+    },
+    "& p.is-editor-empty:first-child::before": {
+      content: "attr(data-placeholder)",
+      color: "var(--foreground-muted)",
+      float: "left",
+      pointerEvents: "none",
+      height: 0,
+    },
+    "& .is-editor-empty:first-child::before": {
+      content: "attr(data-placeholder)",
+      color: "var(--foreground-muted)",
+      float: "left",
+      pointerEvents: "none",
+      height: 0,
+    },
+    "& del": {
+      color: "var(--foreground-muted)",
+    },
+    "& s": {
+      color: "var(--foreground-muted)",
+    },
+    "& ::selection": {
+      background: "var(--background-muted)",
+    },
+  },
+});
+
+export const rteIsEmpty = style({
+});
+
+/** 동적 키로 클래스 참조용 — `byKey[\`badge--${variant}\`]` 같은 패턴 지원. */
+export const byKey: Record<string, string> = {
+  "rte": rte,
+  "rte__toolbar": rte__toolbar,
+  "rte__btn": rte__btn,
+  "rte__sep": rte__sep,
+  "rte__viewport": rte__viewport,
+  "rte__content": rte__content,
+  "rte__is-empty": rteIsEmpty,
+};