@teriusu/rich-editor 0.4.1

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FixedToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/components/FixedToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AA6C1C,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAiiBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/InputModal.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { X } from "lucide-svelte";
+
+  let {
+    title,
+    placeholder = "",
+    defaultValue = "",
+    onConfirm,
+    onCancel,
+  }: {
+    title: string;
+    placeholder?: string;
+    defaultValue?: string;
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+  } = $props();
+
+  let value = $state(defaultValue);
+  let inputEl: HTMLInputElement | undefined = $state();
+
+  $effect(() => {
+    if (inputEl) {
+      inputEl.focus();
+      inputEl.select();
+    }
+  });
+
+  // Window-level Escape key handler
+  $effect(() => {
+    function onKeydown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    }
+    window.addEventListener("keydown", onKeydown);
+    return () => window.removeEventListener("keydown", onKeydown);
+  });
+
+  function handleSubmit() {
+    const trimmed = value.trim();
+    if (trimmed) onConfirm(trimmed);
+    else onCancel();
+  }
+
+  function handleBackdropClick() {
+    onCancel();
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Enter") handleSubmit();
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="fixed inset-0 z-50 flex items-center justify-center bg-black/30"
+  onclick={handleBackdropClick}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="bg-background border border-border rounded-lg shadow-lg p-4 w-80"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <div class="flex items-center justify-between mb-3">
+      <span class="text-sm font-medium">{title}</span>
+      <button
+        type="button"
+        class="p-0.5 rounded hover:bg-muted text-muted-foreground"
+        onclick={onCancel}
+      >
+        <X size={14} />
+      </button>
+    </div>
+    <input
+      bind:this={inputEl}
+      type="text"
+      class="w-full border border-border rounded px-3 py-1.5 text-sm bg-background focus:outline-none focus:ring-1 focus:ring-primary"
+      {placeholder}
+      bind:value
+      onkeydown={handleKeydown}
+    />
+    <div class="flex justify-end gap-2 mt-3">
+      <button
+        type="button"
+        class="px-3 py-1 text-sm rounded border border-border hover:bg-muted"
+        onclick={onCancel}
+      >
+        취소
+      </button>
+      <button
+        type="button"
+        class="px-3 py-1 text-sm rounded bg-primary text-primary-foreground hover:opacity-90"
+        onclick={handleSubmit}
+      >
+        확인
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    title: string;
+    placeholder?: string;
+    defaultValue?: string;
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+};
+declare const InputModal: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputModal = ReturnType<typeof InputModal>;
+export default InputModal;
+//# sourceMappingURL=InputModal.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/InputModal.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AA2EJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/PdfViewer.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { ChevronLeft, ChevronRight } from "lucide-svelte";
+  import { getPdfJs } from "../utils/pdf";
+
+  let { src, fileName }: { src: string; fileName?: string } = $props();
+
+  let canvasEl: HTMLCanvasElement | undefined = $state();
+  let containerEl: HTMLDivElement | undefined = $state();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let pdf: any = $state(null);
+  let page = $state(1);
+  let total = $state(0);
+  let loading = $state(true);
+  let error = $state(false);
+  let rendering = false;
+
+  async function renderPage() {
+    if (!pdf || !canvasEl || !containerEl || rendering) return;
+    rendering = true;
+    try {
+      const pageObj = await pdf.getPage(page);
+      const unscaledViewport = pageObj.getViewport({ scale: 1 });
+      const availableWidth = containerEl.clientWidth - 32;
+      if (availableWidth <= 0) return;
+      const scale = availableWidth / unscaledViewport.width;
+      const viewport = pageObj.getViewport({ scale });
+      const dpr = window.devicePixelRatio || 1;
+      canvasEl.width = viewport.width * dpr;
+      canvasEl.height = viewport.height * dpr;
+      canvasEl.style.width = `${viewport.width}px`;
+      canvasEl.style.height = `${viewport.height}px`;
+      const ctx = canvasEl.getContext("2d");
+      if (!ctx) return;
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+      ctx.scale(dpr, dpr);
+      await pageObj.render({ canvasContext: ctx, viewport }).promise;
+    } finally {
+      rendering = false;
+    }
+  }
+
+  $effect(() => {
+    if (pdf && page) renderPage();
+  });
+
+  onMount(() => {
+    let cancelled = false;
+
+    (async () => {
+      try {
+        loading = true;
+        error = false;
+        const pdfjsLib = await getPdfJs();
+        const loadingTask = pdfjsLib.getDocument(src);
+        const pdfDoc = await loadingTask.promise;
+        if (!cancelled) {
+          pdf = pdfDoc;
+          total = pdfDoc.numPages;
+          loading = false;
+        }
+      } catch (e) {
+        console.error("[PdfViewer] PDF 로드 실패:", src, e);
+        if (!cancelled) {
+          error = true;
+          loading = false;
+        }
+      }
+    })();
+
+    // ResizeObserver
+    let timeout: ReturnType<typeof setTimeout>;
+    const observer = new ResizeObserver(() => {
+      clearTimeout(timeout);
+      timeout = setTimeout(renderPage, 100);
+    });
+    if (containerEl) observer.observe(containerEl);
+
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+      clearTimeout(timeout);
+    };
+  });
+</script>
+
+{#if error}
+  <div class="border border-border rounded-lg p-4 text-center">
+    <p class="text-sm text-muted-foreground">PDF를 불러올 수 없습니다.</p>
+    <a
+      href={src}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-sm text-primary hover:underline"
+    >
+      직접 다운로드
+    </a>
+  </div>
+{:else if loading}
+  <div class="border border-border rounded-lg p-8 text-center">
+    <p class="text-sm text-muted-foreground animate-pulse">PDF 로딩 중...</p>
+  </div>
+{:else}
+  <div class="border border-border rounded-lg overflow-hidden bg-muted/30 my-4">
+    <div
+      class="flex items-center justify-between px-4 py-2 border-b border-border bg-background"
+    >
+      <span class="text-xs text-muted-foreground truncate">
+        {fileName || "PDF 문서"}
+      </span>
+      <span class="text-xs text-muted-foreground tabular-nums">
+        {page} / {total}
+      </span>
+    </div>
+
+    <div
+      bind:this={containerEl}
+      class="flex items-center justify-center p-4 bg-neutral-100 dark:bg-neutral-900"
+    >
+      <canvas bind:this={canvasEl} class="shadow-sm"></canvas>
+    </div>
+
+    {#if total > 1}
+      <div
+        class="flex items-center justify-center gap-4 px-4 py-2 border-t border-border bg-background"
+      >
+        <button
+          type="button"
+          onclick={() => (page = Math.max(1, page - 1))}
+          disabled={page <= 1}
+          class="p-1.5 rounded hover:bg-muted transition-colors disabled:opacity-30"
+          title="이전 페이지"
+        >
+          <ChevronLeft class="w-4 h-4" />
+        </button>
+        <span class="text-sm tabular-nums">
+          {page} / {total}
+        </span>
+        <button
+          type="button"
+          onclick={() => (page = Math.min(total, page + 1))}
+          disabled={page >= total}
+          class="p-1.5 rounded hover:bg-muted transition-colors disabled:opacity-30"
+          title="다음 페이지"
+        >
+          <ChevronRight class="w-4 h-4" />
+        </button>
+      </div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    src: string;
+    fileName?: string;
+};
+declare const PdfViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type PdfViewer = ReturnType<typeof PdfViewer>;
+export default PdfViewer;
+//# sourceMappingURL=PdfViewer.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdfViewer.svelte.d.ts","sourceRoot":"","sources":["../../src/components/PdfViewer.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAoI7D,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/SlashCommandMenu.svelte

@@ -0,0 +1,315 @@
+<script lang="ts">
+  import type { Editor } from "@tiptap/core";
+  import {
+    Heading1,
+    Heading2,
+    Heading3,
+    List,
+    ListOrdered,
+    CheckSquare,
+    Quote,
+    Minus,
+    Code2,
+    ImageIcon,
+    LinkIcon,
+    Table as TableIcon,
+    FileText,
+    Video,
+    ChevronRight,
+    Paperclip,
+    Film,
+    Columns2,
+    Columns3,
+  } from "lucide-svelte";
+  import type { SlashMenuItem } from "../types";
+  import type { Component } from "svelte";
+
+  const SI = 14;
+
+  const SLASH_MENU_ITEMS_DATA: {
+    label: string;
+    keywords: string;
+    icon: Component<{ size?: number }>;
+    command: (editor: Editor) => void;
+  }[] = [
+    {
+      label: "제목 1",
+      keywords: "heading h1 제목",
+      icon: Heading1,
+      command: (editor) =>
+        editor.chain().focus().toggleHeading({ level: 1 }).run(),
+    },
+    {
+      label: "제목 2",
+      keywords: "heading h2 제목",
+      icon: Heading2,
+      command: (editor) =>
+        editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    },
+    {
+      label: "제목 3",
+      keywords: "heading h3 제목",
+      icon: Heading3,
+      command: (editor) =>
+        editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    },
+    {
+      label: "글머리 목록",
+      keywords: "bullet list 목록 리스트",
+      icon: List,
+      command: (editor) => editor.chain().focus().toggleBulletList().run(),
+    },
+    {
+      label: "번호 목록",
+      keywords: "ordered number list 번호 리스트",
+      icon: ListOrdered,
+      command: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    },
+    {
+      label: "체크리스트",
+      keywords: "checklist task todo 체크 할일",
+      icon: CheckSquare,
+      command: (editor) => editor.chain().focus().toggleTaskList().run(),
+    },
+    {
+      label: "인용문",
+      keywords: "quote blockquote 인용",
+      icon: Quote,
+      command: (editor) => editor.chain().focus().toggleBlockquote().run(),
+    },
+    {
+      label: "구분선",
+      keywords: "divider hr horizontal rule 구분",
+      icon: Minus,
+      command: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    },
+    {
+      label: "C++ 코드",
+      keywords: "code cpp c++ 코드 블록",
+      icon: Code2,
+      command: (editor) =>
+        editor.chain().focus().setCodeBlock({ language: "cpp" }).run(),
+    },
+    {
+      label: "Python 코드",
+      keywords: "code python 파이썬 코드 블록",
+      icon: Code2,
+      command: (editor) =>
+        editor.chain().focus().setCodeBlock({ language: "python" }).run(),
+    },
+    {
+      label: "토글",
+      keywords: "toggle details 접기 펼치기 토글",
+      icon: ChevronRight,
+      command: (editor) => editor.chain().focus().setDetails().run(),
+    },
+    {
+      label: "표",
+      keywords: "table 표 테이블",
+      icon: TableIcon,
+      command: (editor) =>
+        editor
+          .chain()
+          .focus()
+          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+          .run(),
+    },
+    {
+      label: "2단 컬럼",
+      keywords: "column 컬럼 2단 분할",
+      icon: Columns2,
+      command: (editor) => editor.chain().focus().setColumns(2).run(),
+    },
+    {
+      label: "3단 컬럼",
+      keywords: "column 컬럼 3단 분할",
+      icon: Columns3,
+      command: (editor) => editor.chain().focus().setColumns(3).run(),
+    },
+    {
+      label: "YouTube 영상",
+      keywords: "youtube video 영상 동영상 유튜브",
+      icon: Video,
+      command: (editor) => {
+        const url = window.prompt("YouTube URL을 입력하세요");
+        if (url) editor.chain().focus().setYoutubeVideo({ src: url }).run();
+      },
+    },
+    {
+      label: "이미지",
+      keywords: "image 이미지 사진 img",
+      icon: ImageIcon,
+      command: (editor) => {
+        const url = window.prompt("이미지 URL을 입력하세요");
+        if (url) editor.chain().focus().setImage({ src: url }).run();
+      },
+    },
+    {
+      label: "링크",
+      keywords: "link url 링크 하이퍼",
+      icon: LinkIcon,
+      command: (editor) => {
+        const url = window.prompt("링크 URL을 입력하세요");
+        if (url)
+          editor
+            .chain()
+            .focus()
+            .extendMarkRange("link")
+            .setLink({ href: url })
+            .run();
+      },
+    },
+  ];
+
+  let {
+    editor,
+    query,
+    onClose,
+    onPdfUpload,
+    onFileUpload,
+    onVideoUpload,
+  }: {
+    editor: Editor;
+    query: string;
+    onClose: () => void;
+    onPdfUpload?: () => void;
+    onFileUpload?: () => void;
+    onVideoUpload?: () => void;
+  } = $props();
+
+  let selectedIndex = $state(0);
+  let menuEl: HTMLDivElement | undefined = $state();
+  let mouseMovedSinceKeyboard = $state(true);
+
+  const allItems = $derived.by(() => {
+    const items = [...SLASH_MENU_ITEMS_DATA];
+    if (onPdfUpload) {
+      items.push({
+        label: "PDF 파일",
+        keywords: "pdf 파일 문서",
+        icon: FileText,
+        command: () => onPdfUpload!(),
+      });
+    }
+    if (onVideoUpload) {
+      items.push({
+        label: "영상 파일",
+        keywords: "video 영상 동영상 비디오 메타버스",
+        icon: Film,
+        command: () => onVideoUpload!(),
+      });
+    }
+    if (onFileUpload) {
+      items.push({
+        label: "파일 첨부",
+        keywords: "file attach 파일 첨부",
+        icon: Paperclip,
+        command: () => onFileUpload!(),
+      });
+    }
+    return items;
+  });
+
+  const filtered = $derived.by(() => {
+    const q = query.toLowerCase();
+    return q
+      ? allItems.filter(
+          (item) =>
+            item.label.toLowerCase().includes(q) ||
+            item.keywords.toLowerCase().includes(q),
+        )
+      : allItems;
+  });
+
+  $effect(() => {
+    // Reset index when query changes
+    query;
+    selectedIndex = 0;
+  });
+
+  $effect(() => {
+    // Scroll selected into view
+    if (menuEl) {
+      const el = menuEl.querySelector(`[data-index="${selectedIndex}"]`);
+      el?.scrollIntoView({ block: "nearest" });
+    }
+  });
+
+  $effect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (filtered.length === 0) return;
+        mouseMovedSinceKeyboard = false;
+        selectedIndex = (selectedIndex + 1) % filtered.length;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (filtered.length === 0) return;
+        mouseMovedSinceKeyboard = false;
+        selectedIndex =
+          selectedIndex <= 0 ? filtered.length - 1 : selectedIndex - 1;
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (filtered[selectedIndex]) {
+          onClose();
+          filtered[selectedIndex].command(editor);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  });
+</script>
+
+{#if filtered.length === 0}
+  <div
+    bind:this={menuEl}
+    class="z-50 bg-popover border border-border rounded-lg shadow-lg p-2"
+    style="width: 180px"
+  >
+    <p class="text-xs text-muted-foreground px-2 py-1">결과 없음</p>
+  </div>
+{:else}
+  <div
+    bind:this={menuEl}
+    class="z-50 bg-popover border border-border rounded-lg shadow-lg overflow-y-auto py-1"
+    style="width: 180px; max-height: 200px"
+  >
+    <p
+      class="text-[10px] font-medium text-muted-foreground uppercase tracking-wider px-3 py-1.5"
+    >
+      블록
+    </p>
+    {#each filtered as item, i}
+      <button
+        type="button"
+        data-index={i}
+        class="w-full flex items-center gap-2 px-2 py-1.5 text-left transition-colors rounded-md mx-0 {i ===
+        selectedIndex
+          ? 'bg-accent text-accent-foreground'
+          : 'hover:bg-muted text-foreground'}"
+        onmousemove={() => {
+          if (!mouseMovedSinceKeyboard) {
+            mouseMovedSinceKeyboard = true;
+            return;
+          }
+          selectedIndex = i;
+        }}
+        onclick={() => {
+          onClose();
+          item.command(editor);
+        }}
+      >
+        <span
+          class="flex items-center justify-center w-6 h-6 rounded border border-border bg-background text-muted-foreground shrink-0"
+        >
+          <item.icon size={SI} />
+        </span>
+        <span class="text-sm font-medium">{item.label}</span>
+      </button>
+    {/each}
+  </div>
+{/if}

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

@@ -0,0 +1,14 @@
+import type { Editor } from "@tiptap/core";
+import type { Component } from "svelte";
+type $$ComponentProps = {
+    editor: Editor;
+    query: string;
+    onClose: () => void;
+    onPdfUpload?: () => void;
+    onFileUpload?: () => void;
+    onVideoUpload?: () => void;
+};
+declare const SlashCommandMenu: Component<$$ComponentProps, {}, "">;
+type SlashCommandMenu = ReturnType<typeof SlashCommandMenu>;
+export default SlashCommandMenu;
+//# sourceMappingURL=SlashCommandMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlashCommandMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/SlashCommandMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAuB3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEvC,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAkRJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}