sh-ui-cli 0.45.3 → 0.47.0

package/data/registry/react/components/rich-text-editor/index.module.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 styles from "./styles.module.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: styles["rte__is-empty"],
+      }),
+      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: styles.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(styles.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={styles.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={styles.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(styles.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={styles.rte__sep} />;
+}

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

@@ -0,0 +1,196 @@
+.rte {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  overflow: hidden;
+  transition: border-color var(--duration-fast);
+}
+.rte:focus-within {
+  border-color: var(--foreground);
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.rte[data-readonly] {
+  background: var(--background-subtle);
+}
+
+/* ─── Toolbar ─── */
+.rte__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.125rem;
+  padding: var(--space-1) var(--space-2);
+  background: var(--background-muted);
+  border-bottom: 1px solid var(--border);
+}
+.rte__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  padding: 0;
+  background: transparent;
+  color: var(--foreground-muted);
+  border: 1px solid transparent;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  transition:
+    color var(--duration-fast),
+    background-color var(--duration-fast),
+    border-color var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+.rte__btn:hover:not(:disabled) {
+  color: var(--foreground);
+  background: var(--background);
+  border-color: var(--border);
+}
+.rte__btn:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 1px;
+}
+.rte__btn.is-active {
+  color: var(--foreground);
+  background: var(--background);
+  border-color: var(--border-strong);
+}
+.rte__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.rte__sep {
+  display: inline-block;
+  width: 1px;
+  height: 1.25rem;
+  margin: 0 var(--space-1);
+  background: var(--border);
+}
+
+/* ─── Content ─── */
+.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;
+}
+.rte__viewport > .ProseMirror {
+  flex: 1;
+}
+.rte__content {
+  outline: none;
+  padding: var(--space-3) var(--space-4);
+  font-size: 0.9375rem;
+  line-height: 1.65;
+  color: var(--foreground);
+}
+
+.rte__content > :first-child {
+  margin-top: 0;
+}
+.rte__content > :last-child {
+  margin-bottom: 0;
+}
+
+.rte__content p {
+  margin: 0 0 var(--space-3);
+}
+.rte__content h1,
+.rte__content h2,
+.rte__content h3,
+.rte__content h4,
+.rte__content h5,
+.rte__content h6 {
+  margin: var(--space-4) 0 var(--space-2);
+  font-weight: 600;
+  line-height: 1.3;
+}
+.rte__content h1 { font-size: 1.5rem; }
+.rte__content h2 { font-size: 1.25rem; }
+.rte__content h3 { font-size: 1.125rem; }
+
+.rte__content ul,
+.rte__content ol {
+  margin: 0 0 var(--space-3);
+  padding-left: var(--space-5);
+}
+.rte__content li {
+  margin-bottom: var(--space-1);
+}
+.rte__content li > p {
+  margin: 0;
+}
+
+.rte__content blockquote {
+  margin: 0 0 var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border-left: 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;
+}
+.rte__content blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.rte__content code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 0.125rem 0.375rem;
+  border-radius: calc(var(--radius) - 4px);
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+.rte__content pre {
+  margin: 0 0 var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background-subtle);
+  overflow-x: auto;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+.rte__content pre code {
+  padding: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+.rte__content hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: var(--space-4) 0;
+}
+
+.rte__content a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rte__content a:hover {
+  text-decoration-thickness: 2px;
+}
+
+/* Placeholder (Tiptap extension) */
+.rte__content p.is-editor-empty:first-child::before,
+.rte__content .is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--foreground-muted);
+  float: left;
+  pointer-events: none;
+  height: 0;
+}
+
+.rte__content del,
+.rte__content s {
+  color: var(--foreground-muted);
+}
+
+/* ProseMirror selection */
+.rte__content ::selection {
+  background: var(--background-muted);
+}