sh-ui-cli 0.52.1 → 0.52.2

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

@@ -1,348 +0,0 @@
-"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

@@ -1,243 +0,0 @@
-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,
-};