@teriusu/rich-editor 0.4.1

package/README.md

@@ -0,0 +1,178 @@
+# @teriusu/rich-editor
+
+TipTap v3 기반 리치 텍스트 에디터. Svelte 5 컴포넌트 라이브러리.
+
+## 설치
+
+```bash
+npm install @teriusu/rich-editor
+```
+
+Tailwind CSS v4 사용 시 `@source` 추가:
+```css
+@import "@teriusu/rich-editor/styles";
+@source "../node_modules/@teriusu/rich-editor/dist";
+```
+
+## 기본 사용법
+
+```svelte
+<script>
+  import { TipTapEditor } from '@teriusu/rich-editor';
+  import '@teriusu/rich-editor/styles';
+
+  let html = $state('');
+</script>
+
+<TipTapEditor
+  content={html}
+  onChange={(h) => html = h}
+  onUploadFile={async (file) => {
+    const form = new FormData();
+    form.append('file', file);
+    const res = await fetch('/api/upload', { method: 'POST', body: form });
+    const { url } = await res.json();
+    return url;
+  }}
+/>
+```
+
+## Props
+
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| `content` | `string` | `""` | HTML 콘텐츠 |
+| `onChange` | `(html: string) => void` | 필수 | 콘텐츠 변경 콜백 |
+| `placeholder` | `string` | `"'/'를 눌러..."` | 플레이스홀더 |
+| `onUploadFile` | `(file: File) => Promise<string>` | - | 파일 업로드 핸들러 (URL 반환) |
+| `onResolveFile` | `(fileId: string) => Promise<{src, name?, size?}>` | - | 파일 ID → URL 변환 |
+| `extensions` | `AnyExtension[]` | `[]` | 추가 TipTap 확장 주입 |
+| `editable` | `boolean` | `true` | 읽기 전용 모드 |
+
+## 파일 저장 방식
+
+### URL 직접 (기본)
+
+`onUploadFile`만 제공하면 파일 URL이 HTML에 직접 저장됩니다.
+
+```html
+<div data-file-src="/files/report.pdf" data-file-name="report.pdf" data-file-size="204800"></div>
+```
+
+### ID 기반 (하이브리드)
+
+`onResolveFile`을 추가하면 파일 ID + 캐시 URL이 함께 저장됩니다.
+
+```svelte
+<TipTapEditor
+  content={html}
+  onChange={(h) => html = h}
+  onUploadFile={async (file) => {
+    const res = await fetch('/api/upload', { method: 'POST', body: file });
+    return await res.json(); // { id, url, name, size }
+  }}
+  onResolveFile={async (fileId) => {
+    const res = await fetch(`/api/files/${fileId}`);
+    return await res.json(); // { src, name, size }
+  }}
+/>
+```
+
+```html
+<div data-file-id="abc123" data-file-src="/files/report.pdf" data-file-name="report.pdf"></div>
+```
+
+ID 기반은 URL이 변경되어도 대응 가능하고, 권한 제어(signed URL)에 활용할 수 있습니다.
+
+## 기능
+
+### 텍스트 서식
+Bold, Italic, Underline, Strikethrough, Highlight, Superscript, Subscript, 텍스트 색상
+
+### 구조
+제목 (H1~H3), 글머리/번호 목록, 체크리스트, 인용문, 구분선, 접기/펼치기 (Details), 들여쓰기 (Tab/Shift-Tab)
+
+### 미디어
+이미지, PDF (PDF.js 캔버스 렌더링), 영상 파일 (mp4/webm), YouTube, 파일 첨부, 드래그 앤 드롭 업로드
+
+### 레이아웃
+2단/3단 컬럼, 텍스트 정렬 (좌/중/우)
+
+### 테이블
+삽입, 행/열 추가/삭제, 헤더 토글, 셀 병합/분할, 셀 배경색, 열 리사이즈
+
+### 입력
+`/` 슬래시 커맨드, 고정 툴바, 테이블 버블 메뉴, Undo/Redo
+
+## 레거시 HTML 호환
+
+TipTap v2 커스텀 태그를 자동 변환합니다. 에디터 로드 시 `transformLegacyHtml`이 자동 호출됩니다.
+
+| 레거시 태그 | 변환 결과 |
+|---|---|
+| `<tiptap-file id="X">` | `<div data-file-id="X">` |
+| `<tiptap-midibus id="X">` | iframe (play.mbus.tv) |
+| `<tiptap-collapsable title="X">` | `<details><summary>` |
+| `<lite-youtube videoid="X">` | YouTube iframe |
+| `<embed type="application/pdf">` | `<div data-pdf-src>` |
+| `<div class="tiptap-columns">` | `<div data-type="columns">` |
+| `margin-left: 40px` | indent level 1 (em 출력) |
+
+게시물 조회 페이지(읽기 전용)에서도 적용:
+
+```js
+import { transformLegacyHtml } from '@teriusu/rich-editor';
+
+const html = transformLegacyHtml(post.content);
+```
+
+## 커스텀 확장 주입
+
+`extensions` prop으로 호스트 앱 전용 확장을 주입할 수 있습니다.
+
+```svelte
+<script>
+  import { TipTapEditor } from '@teriusu/rich-editor';
+  import { Node } from '@tiptap/core';
+
+  const MyExtension = Node.create({ /* ... */ });
+</script>
+
+<TipTapEditor
+  content={html}
+  onChange={handleChange}
+  extensions={[MyExtension]}
+/>
+```
+
+## Exports
+
+### 컴포넌트
+`TipTapEditor`, `FixedToolbar`, `BubbleToolbar`, `SlashCommandMenu`, `TableBubbleMenu`, `InputModal`, `PdfViewer`
+
+### 확장
+`PdfBlock`, `FileAttachment`, `VideoBlock`, `Columns`, `Column`, `Indent`, `FixedDetails`
+
+### 유틸리티
+`transformLegacyHtml`, `sanitizeHtml`, `stripHtmlToExcerpt`, `configurePdfJs`, `getPdfJs`, `cn`
+
+### 타입
+`UploadHandler`, `FileResolver`, `FileResolveResult`, `TipTapEditorProps`, `SlashMenuItem`
+
+## 빌드
+
+```bash
+npm run build          # svelte-package → dist/
+npm version patch      # 버전 올리기
+```
+
+## 기술 스택
+
+| 구분 | 기술 |
+|------|------|
+| 에디터 엔진 | TipTap v3 |
+| UI | Svelte 5 (runes) |
+| 언어 | TypeScript |
+| 빌드 | svelte-package |
+| 아이콘 | lucide-svelte |
+| 스타일 | Tailwind CSS + CSS 변수 |

package/dist/components/BubbleToolbar.svelte

@@ -0,0 +1,299 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import { BubbleMenuPlugin } from "@tiptap/extension-bubble-menu";
+  import { PluginKey } from "@tiptap/pm/state";
+  import { onMount } from "svelte";
+
+  const bubbleToolbarKey = new PluginKey("bubbleToolbar");
+  import {
+    Bold,
+    Italic,
+    Underline as UnderlineIcon,
+    Strikethrough,
+    Highlighter,
+    LinkIcon,
+    AlignLeft,
+    AlignCenter,
+    AlignRight,
+    Heading1,
+    Heading2,
+    Heading3,
+    Type,
+    Code,
+  } from "lucide-svelte";
+  import { cn } from "../utils/cn";
+
+  let { editor, minimal = false }: { editor: Editor; minimal?: boolean } = $props();
+
+  let showHeadings = $state(false);
+  let menuEl: HTMLDivElement | undefined = $state();
+  const iconSize = 14;
+
+  function getCurrentBlockLabel(): string {
+    if (editor.isActive("heading", { level: 1 })) return "제목 1";
+    if (editor.isActive("heading", { level: 2 })) return "제목 2";
+    if (editor.isActive("heading", { level: 3 })) return "제목 3";
+    return "본문";
+  }
+
+  function addLink() {
+    const previousUrl = editor.getAttributes("link").href || "";
+    const url = window.prompt("링크 URL을 입력하세요", previousUrl);
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    } else {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange("link")
+        .setLink({ href: url })
+        .run();
+    }
+  }
+
+  onMount(() => {
+    if (!menuEl) return;
+
+    const plugin = BubbleMenuPlugin({
+      pluginKey: bubbleToolbarKey,
+      editor,
+      element: menuEl,
+      shouldShow: ({ editor: e, state }) => {
+        const { from, to } = state.selection;
+        if (from === to) return false;
+        if (e.isActive("codeBlock")) return false;
+        if (e.isActive("image")) return false;
+        return true;
+      },
+      tippyOptions: {
+        placement: "top",
+      },
+    });
+
+    editor.registerPlugin(plugin);
+
+    return () => {
+      editor.unregisterPlugin(bubbleToolbarKey);
+    };
+  });
+</script>
+
+<div bind:this={menuEl} class="bubble-toolbar-container" style="visibility: hidden">
+  <div class="flex items-center gap-0.5 px-1.5 py-1 bg-foreground rounded-lg shadow-xl">
+    {#if !minimal}
+      <!-- Block type selector -->
+      <div class="relative">
+        <button
+          type="button"
+          onclick={() => (showHeadings = !showHeadings)}
+          class="flex items-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium text-white/80 hover:text-white hover:bg-white/10 transition-colors"
+        >
+          <Type size={12} />
+          {getCurrentBlockLabel()}
+        </button>
+        {#if showHeadings}
+          <div
+            class="absolute bottom-full left-0 mb-1 bg-foreground rounded-lg shadow-xl border border-white/10 py-1"
+            style="min-width: 120px"
+          >
+            <button
+              type="button"
+              class={cn(
+                "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
+                !editor.isActive("heading")
+                  ? "text-white bg-white/10"
+                  : "text-white/70 hover:text-white hover:bg-white/10",
+              )}
+              onclick={() => {
+                editor.chain().focus().setParagraph().run();
+                showHeadings = false;
+              }}
+            >
+              <Type size={12} /> 본문
+            </button>
+            {#each [1, 2, 3] as level}
+              {@const Icon = level === 1 ? Heading1 : level === 2 ? Heading2 : Heading3}
+              <button
+                type="button"
+                class={cn(
+                  "w-full flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
+                  editor.isActive("heading", { level })
+                    ? "text-white bg-white/10"
+                    : "text-white/70 hover:text-white hover:bg-white/10",
+                )}
+                onclick={() => {
+                  editor
+                    .chain()
+                    .focus()
+                    .toggleHeading({ level: level as 1 | 2 | 3 })
+                    .run();
+                  showHeadings = false;
+                }}
+              >
+                <Icon size={12} /> 제목 {level}
+              </button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+
+      <div class="w-px h-5 bg-white/20 mx-0.5"></div>
+    {/if}
+
+    <!-- Format buttons -->
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleBold().run()}
+      title="굵게"
+      aria-label="굵게"
+      class={cn(
+        "p-1.5 rounded-md transition-colors",
+        editor.isActive("bold")
+          ? "bg-white/20 text-white"
+          : "text-white/70 hover:text-white hover:bg-white/10",
+      )}
+    >
+      <Bold size={iconSize} />
+    </button>
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleItalic().run()}
+      title="기울임"
+      aria-label="기울임"
+      class={cn(
+        "p-1.5 rounded-md transition-colors",
+        editor.isActive("italic")
+          ? "bg-white/20 text-white"
+          : "text-white/70 hover:text-white hover:bg-white/10",
+      )}
+    >
+      <Italic size={iconSize} />
+    </button>
+    {#if !minimal}
+      <button
+        type="button"
+        onclick={() => editor.chain().focus().toggleUnderline().run()}
+        title="밑줄"
+        aria-label="밑줄"
+        class={cn(
+          "p-1.5 rounded-md transition-colors",
+          editor.isActive("underline")
+            ? "bg-white/20 text-white"
+            : "text-white/70 hover:text-white hover:bg-white/10",
+        )}
+      >
+        <UnderlineIcon size={iconSize} />
+      </button>
+    {/if}
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleStrike().run()}
+      title="취소선"
+      aria-label="취소선"
+      class={cn(
+        "p-1.5 rounded-md transition-colors",
+        editor.isActive("strike")
+          ? "bg-white/20 text-white"
+          : "text-white/70 hover:text-white hover:bg-white/10",
+      )}
+    >
+      <Strikethrough size={iconSize} />
+    </button>
+    {#if !minimal}
+      <button
+        type="button"
+        onclick={() => editor.chain().focus().toggleHighlight().run()}
+        title="하이라이트"
+        aria-label="하이라이트"
+        class={cn(
+          "p-1.5 rounded-md transition-colors",
+          editor.isActive("highlight")
+            ? "bg-white/20 text-white"
+            : "text-white/70 hover:text-white hover:bg-white/10",
+        )}
+      >
+        <Highlighter size={iconSize} />
+      </button>
+    {/if}
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleCode().run()}
+      title="코드"
+      aria-label="코드"
+      class={cn(
+        "p-1.5 rounded-md transition-colors",
+        editor.isActive("code")
+          ? "bg-white/20 text-white"
+          : "text-white/70 hover:text-white hover:bg-white/10",
+      )}
+    >
+      <Code size={iconSize} />
+    </button>
+
+    <div class="w-px h-5 bg-white/20 mx-0.5"></div>
+
+    <button
+      type="button"
+      onclick={addLink}
+      title="링크"
+      aria-label="링크"
+      class={cn(
+        "p-1.5 rounded-md transition-colors",
+        editor.isActive("link")
+          ? "bg-white/20 text-white"
+          : "text-white/70 hover:text-white hover:bg-white/10",
+      )}
+    >
+      <LinkIcon size={iconSize} />
+    </button>
+
+    {#if !minimal}
+      <div class="w-px h-5 bg-white/20 mx-0.5"></div>
+
+      <!-- Alignment -->
+      <button
+        type="button"
+        onclick={() => editor.chain().focus().setTextAlign("left").run()}
+        title="왼쪽 정렬"
+        aria-label="왼쪽 정렬"
+        class={cn(
+          "p-1.5 rounded-md transition-colors",
+          editor.isActive({ textAlign: "left" })
+            ? "bg-white/20 text-white"
+            : "text-white/70 hover:text-white hover:bg-white/10",
+        )}
+      >
+        <AlignLeft size={iconSize} />
+      </button>
+      <button
+        type="button"
+        onclick={() => editor.chain().focus().setTextAlign("center").run()}
+        title="가운데 정렬"
+        aria-label="가운데 정렬"
+        class={cn(
+          "p-1.5 rounded-md transition-colors",
+          editor.isActive({ textAlign: "center" })
+            ? "bg-white/20 text-white"
+            : "text-white/70 hover:text-white hover:bg-white/10",
+        )}
+      >
+        <AlignCenter size={iconSize} />
+      </button>
+      <button
+        type="button"
+        onclick={() => editor.chain().focus().setTextAlign("right").run()}
+        title="오른쪽 정렬"
+        aria-label="오른쪽 정렬"
+        class={cn(
+          "p-1.5 rounded-md transition-colors",
+          editor.isActive({ textAlign: "right" })
+            ? "bg-white/20 text-white"
+            : "text-white/70 hover:text-white hover:bg-white/10",
+        )}
+      >
+        <AlignRight size={iconSize} />
+      </button>
+    {/if}
+  </div>
+</div>

package/dist/components/BubbleToolbar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Editor } from "@tiptap/core";
+type $$ComponentProps = {
+    editor: Editor;
+    minimal?: boolean;
+};
+declare const BubbleToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type BubbleToolbar = ReturnType<typeof BubbleToolbar>;
+export default BubbleToolbar;
+//# sourceMappingURL=BubbleToolbar.svelte.d.ts.map

package/dist/components/BubbleToolbar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BubbleToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAsB1C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAqNhE,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}