feat: 하이브리드 파일 저장, 컬럼 확장, 레거시 HTML 호환 (v0.4.0)

- FileAttachment: data-file-id + data-file-src 하이브리드 지원
- PdfBlock: data-pdf-id + data-pdf-src 하이브리드 지원
- onResolveFile prop: 호스트 앱이 파일 ID → URL 변환 제공
- Columns/Column 확장: 2단/3단 컬럼 레이아웃
- Indent: px 단위 파싱 추가 (em 출력 유지)
- transformLegacyHtml: tiptap-file, tiptap-midibus, collapsable, lite-youtube, embed pdf, columns 변환
- 레거시 <tiptap-file> parseHTML 지원
- 레거시 <embed type="application/pdf"> parseHTML 지원

Author: teriusu-ko

dist/components/FixedToolbar.svelte

@@ -39,6 +39,8 @@
     ChevronRight,
     Paperclip,
     Film,
+    Columns2,
+    Columns3,
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
   import InputModal from "./InputModal.svelte";
@@ -462,6 +464,31 @@
     </button>
   {/if}
 
+  <!-- Columns -->
+  <button
+    type="button"
+    onclick={() => editor.chain().focus().setColumns(2).run()}
+    data-tooltip="2단 컬럼"
+    aria-label="2단 컬럼"
+    class={cn(
+      "p-1.5 rounded-md transition-colors",
+      editor.isActive("columns")
+        ? "bg-primary/10 text-primary"
+        : "text-muted-foreground hover:bg-muted hover:text-foreground",
+    )}
+  >
+    <Columns2 size={iconSize} />
+  </button>
+  <button
+    type="button"
+    onclick={() => editor.chain().focus().setColumns(3).run()}
+    data-tooltip="3단 컬럼"
+    aria-label="3단 컬럼"
+    class="p-1.5 rounded-md transition-colors text-muted-foreground hover:bg-muted hover:text-foreground"
+  >
+    <Columns3 size={iconSize} />
+  </button>
+
   <!-- Table menu -->
   <div bind:this={tableMenuEl} class="relative">
     <button

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

@@ -18,6 +18,8 @@
     ChevronRight,
     Paperclip,
     Film,
+    Columns2,
+    Columns3,
   } from "lucide-svelte";
   import type { SlashMenuItem } from "../types";
   import type { Component } from "svelte";
@@ -112,6 +114,18 @@
           .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 영상 동영상 유튜브",

dist/components/SlashCommandMenu.svelte

@@ -31,6 +31,9 @@
   import { Extension, type AnyExtension } from "@tiptap/core";
   import { TextSelection } from "@tiptap/pm/state";
   import { PdfBlock } from "../extensions/PdfBlock";
+  import { Columns } from "../extensions/Columns";
+  import { Column } from "../extensions/Column";
+  import { transformLegacyHtml } from "../utils/sanitize";
   import { Indent } from "../extensions/Indent";
   import { FileAttachment } from "../extensions/FileAttachment";
   import { VideoBlock } from "../extensions/VideoBlock";
@@ -39,6 +42,7 @@
   import SlashCommandMenu from "./SlashCommandMenu.svelte";
   import TableBubbleMenu from "./TableBubbleMenu.svelte";
   import type { UploadHandler } from "../types";
+  import type { FileResolver } from "../extensions/FileAttachment";
 
   const cellAttrs = {
     backgroundColor: {
@@ -107,13 +111,15 @@
     onChange,
     placeholder = "'/'를 눌러 명령어를 입력하세요...",
     onUploadFile,
+    onResolveFile,
     extensions: extraExtensions = [],
     editable = true,
   }: {
     content: string;
     onChange: (html: string) => void;
     placeholder?: string;
     onUploadFile?: UploadHandler;
+    onResolveFile?: FileResolver;
     extensions?: AnyExtension[];
     editable?: boolean;
   } = $props();
@@ -345,6 +351,8 @@
         PdfBlock,
         FileAttachment,
         VideoBlock,
+        Columns,
+        Column,
         CodeBlockTopEscape,
         Indent,
         FixedDetails,
@@ -444,7 +452,7 @@
             ]
           : []),
       ],
-      content,
+      content: transformLegacyHtml(content),
       editable,
       onUpdate: ({ editor: e }) => {
         const html = e
@@ -467,6 +475,11 @@
       },
     });
 
+    // File resolver를 storage에 등록
+    if (onResolveFile) {
+      editor.storage.fileAttachment = { resolver: onResolveFile };
+    }
+
     editor.on("update", handleUpdate);
     editor.on("selectionUpdate", handleSelectionUpdate);
 
@@ -511,7 +524,8 @@
     if (!editor) return;
     // 에디터 자체 onChange에서 나온 값이면 무시 (무한 루프 방지)
     if (content === lastEmittedHtml) return;
-    editor.commands.setContent(content, { emitUpdate: false });
+    const transformed = transformLegacyHtml(content);
+    editor.commands.setContent(transformed, { emitUpdate: false });
     lastEmittedHtml = content;
     editor.commands.fixTables();
   });

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

@@ -1,10 +1,12 @@
 import { type AnyExtension } from "@tiptap/core";
 import type { UploadHandler } from "../types";
+import type { FileResolver } from "../extensions/FileAttachment";
 type $$ComponentProps = {
     content: string;
     onChange: (html: string) => void;
     placeholder?: string;
     onUploadFile?: UploadHandler;
+    onResolveFile?: FileResolver;
     extensions?: AnyExtension[];
     editable?: boolean;
 };

dist/components/TipTapEditor.svelte

@@ -0,0 +1,3 @@
+import { Node as TiptapNode } from "@tiptap/core";
+export declare const Column: TiptapNode<any, any>;
+//# sourceMappingURL=Column.d.ts.map

dist/components/TipTapEditor.svelte.d.ts

@@ -0,0 +1,20 @@
+import { Node as TiptapNode, mergeAttributes } from "@tiptap/core";
+export const Column = TiptapNode.create({
+    name: "column",
+    group: "",
+    content: "block+",
+    isolating: true,
+    parseHTML() {
+        return [
+            { tag: 'div[data-type="column"]' },
+            { tag: "div.tiptap-column" },
+        ];
+    },
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, { "data-type": "column" }),
+            0,
+        ];
+    },
+});