@teriusu/rich-editor 0.9.5 → 0.9.7

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

@@ -1 +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;AAwB3C,OAAO,KAAK,EAAiB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEvC,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,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,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAqXJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"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;AA0B3C,OAAO,KAAK,EAAiB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEvC,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,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;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AA0bJ,QAAA,MAAM,gBAAgB,qCAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/TableBubbleMenu.svelte

@@ -18,6 +18,7 @@
   } from "lucide-svelte";
   import { onMount } from "svelte";
   import { cn } from "../utils/cn";
+  import { splitCellPreservingHeaders } from "../utils/splitCell";
 
   const PRESET_COLORS = [
     { label: "없음", value: "" },
@@ -94,11 +95,29 @@
     visible = true;
   }
 
+  /*
+   * ⚠️ **버튼의 활성 여부가 갱신되게 하는 장치.**
+   *
+   * `editor` 는 TipTap 이 만든 평범한 객체라 `$state` 가 아니다. 그래서 `editor.can()` 을
+   * 그냥 부르면 Svelte 가 의존성을 못 보고 **처음 값에 굳는다** — 셀을 여러 개 골라도
+   * `mergeCells()` 가능 여부가 다시 계산되지 않아 **`셀 병합`·`셀 분할` 이 영영 비활성**
+   * 이었다(사용자 지적: "표에서 셀병합 분할이 안되네?").
+   *
+   * 고정 툴바가 같은 이유로 이미 쓰고 있는 방식이다 — 트랜잭션마다 카운터를 올리고
+   * 활성 여부를 읽는 자리에서 그 카운터를 함께 읽는다(쉼표 연산자).
+   */
+  let tick = $state(0);
+  const canDo = (fn: (c: ReturnType<Editor["can"]>) => boolean) =>
+    (tick, fn(editor.can()));
+
   onMount(() => {
+    const bump = () => tick++;
+    editor.on("transaction", bump);
     editor.on("selectionUpdate", updatePosition);
     editor.on("update", updatePosition);
 
     return () => {
+      editor.off("transaction", bump);
       editor.off("selectionUpdate", updatePosition);
       editor.off("update", updatePosition);
     };
@@ -121,21 +140,25 @@
   <div
     bind:this={menuEl}
     class="absolute hce-table-bubble"
+    onmousedown={(e) => e.preventDefault()}
+    role="toolbar"
+    tabindex="-1"
+    aria-label="표 편집"
     style="top: {pos.top}px; left: {pos.left}px; width: {pos.width}px"
   >
     <div
-      class="flex items-center justify-center gap-0.5 px-1.5 py-1 hce-menu-surface rounded-full shadow-xl w-fit mx-auto"
+      class="flex items-center justify-center gap-0.5 px-1.5 py-1 bg-popover border border-border rounded-full shadow-xl w-fit mx-auto"
     >
       <!-- Row/Col buttons -->
       <div class="hce-table-btn-wrap">
         <button
           type="button"
           onclick={() => editor.chain().focus().addRowBefore().run()}
-          disabled={!editor.can().addRowBefore()}
+          disabled={!canDo((c) => c.addRowBefore())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().addRowBefore() && "opacity-30 pointer-events-none",
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.addRowBefore()) && "opacity-30 pointer-events-none",
           )}
         >
           <ArrowUpToLine size={iconSize} />
@@ -147,11 +170,11 @@
         <button
           type="button"
           onclick={() => editor.chain().focus().addRowAfter().run()}
-          disabled={!editor.can().addRowAfter()}
+          disabled={!canDo((c) => c.addRowAfter())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().addRowAfter() && "opacity-30 pointer-events-none",
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.addRowAfter()) && "opacity-30 pointer-events-none",
           )}
         >
           <ArrowDownToLine size={iconSize} />
@@ -163,11 +186,11 @@
         <button
           type="button"
           onclick={() => editor.chain().focus().addColumnBefore().run()}
-          disabled={!editor.can().addColumnBefore()}
+          disabled={!canDo((c) => c.addColumnBefore())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().addColumnBefore() &&
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.addColumnBefore()) &&
               "opacity-30 pointer-events-none",
           )}
         >
@@ -180,11 +203,11 @@
         <button
           type="button"
           onclick={() => editor.chain().focus().addColumnAfter().run()}
-          disabled={!editor.can().addColumnAfter()}
+          disabled={!canDo((c) => c.addColumnAfter())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().addColumnAfter() &&
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.addColumnAfter()) &&
               "opacity-30 pointer-events-none",
           )}
         >
@@ -193,17 +216,17 @@
         <span class="hce-table-btn-tooltip">열 오른쪽에 추가</span>
       </div>
 
-      <div class="w-px h-5 bg-white/20 mx-0.5"></div>
+      <div class="w-px h-5 bg-border mx-0.5"></div>
 
       <div class="hce-table-btn-wrap">
         <button
           type="button"
           onclick={() => editor.chain().focus().toggleHeaderRow().run()}
-          disabled={!editor.can().toggleHeaderRow()}
+          disabled={!canDo((c) => c.toggleHeaderRow())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().toggleHeaderRow() &&
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.toggleHeaderRow()) &&
               "opacity-30 pointer-events-none",
           )}
         >
@@ -216,11 +239,11 @@
         <button
           type="button"
           onclick={() => editor.chain().focus().toggleHeaderColumn().run()}
-          disabled={!editor.can().toggleHeaderColumn()}
+          disabled={!canDo((c) => c.toggleHeaderColumn())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().toggleHeaderColumn() &&
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.toggleHeaderColumn()) &&
               "opacity-30 pointer-events-none",
           )}
         >
@@ -233,11 +256,11 @@
         <button
           type="button"
           onclick={() => editor.chain().focus().mergeCells().run()}
-          disabled={!editor.can().mergeCells()}
+          disabled={!canDo((c) => c.mergeCells())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().mergeCells() && "opacity-30 pointer-events-none",
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.mergeCells()) && "opacity-30 pointer-events-none",
           )}
         >
           <Combine size={iconSize} />
@@ -248,12 +271,12 @@
       <div class="hce-table-btn-wrap">
         <button
           type="button"
-          onclick={() => editor.chain().focus().splitCell().run()}
-          disabled={!editor.can().splitCell()}
+          onclick={() => splitCellPreservingHeaders(editor)}
+          disabled={!canDo((c) => c.splitCell())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-white hover:bg-white/10",
-            !editor.can().splitCell() && "opacity-30 pointer-events-none",
+            "text-muted-foreground hover:text-foreground hover:bg-muted",
+            !canDo((c) => c.splitCell()) && "opacity-30 pointer-events-none",
           )}
         >
           <SplitSquareHorizontal size={iconSize} />
@@ -261,18 +284,18 @@
         <span class="hce-table-btn-tooltip">셀 분할</span>
       </div>
 
-      <div class="w-px h-5 bg-white/20 mx-0.5"></div>
+      <div class="w-px h-5 bg-border mx-0.5"></div>
 
       <!-- Line height -->
       <div class="relative">
-        <div class="hce-table-btn-wrap">
+        <div class="hce-table-btn-wrap" class:hce-tooltip-off={showLineHeight}>
           <button
             type="button"
             onclick={() => {
               showLineHeight = !showLineHeight;
               showColors = false;
             }}
-            class="p-1.5 rounded-full transition-colors text-white/70 hover:text-white hover:bg-white/10"
+            class="p-1.5 rounded-full transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
           >
             <UnfoldVertical size={iconSize} />
           </button>
@@ -280,13 +303,13 @@
         </div>
         {#if showLineHeight}
           <div
-            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hce-menu-surface rounded-lg shadow-xl border border-white/10 py-1"
+            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-popover border border-border rounded-lg shadow-xl py-1"
             style="min-width: 100px"
           >
             {#each LINE_HEIGHTS as lh}
               <button
                 type="button"
-                class="w-full text-left px-3 py-1.5 text-xs text-white/80 hover:text-white hover:bg-white/10 transition-colors"
+                class="w-full text-left px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
                 onclick={() => {
                   const { tr } = editor.state;
                   const { tableNode, tablePos } = findTableNode();
@@ -325,7 +348,7 @@
       <div class="hce-table-btn-wrap">
         <button
           type="button"
-          class="p-1.5 rounded-full transition-colors text-white/70 hover:text-white hover:bg-white/10"
+          class="p-1.5 rounded-full transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
           onclick={() => {
             const { tableNode, tablePos } = findTableNode();
             if (!tableNode || tablePos < 0) return;
@@ -369,14 +392,14 @@
 
       <!-- Background color -->
       <div class="relative">
-        <div class="hce-table-btn-wrap">
+        <div class="hce-table-btn-wrap" class:hce-tooltip-off={showColors}>
           <button
             type="button"
             onclick={() => {
               showColors = !showColors;
               showLineHeight = false;
             }}
-            class="p-1.5 rounded-full transition-colors text-white/70 hover:text-white hover:bg-white/10"
+            class="p-1.5 rounded-full transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
           >
             <Paintbrush size={iconSize} />
           </button>
@@ -384,11 +407,11 @@
         </div>
         {#if showColors}
           <div
-            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hce-menu-surface rounded-lg shadow-xl border border-white/10 p-2"
+            class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-popover border border-border rounded-lg shadow-xl p-2"
             style="min-width: 160px"
           >
             <p
-              class="text-xs font-medium text-white/60 mb-1.5 px-1"
+              class="text-xs font-medium text-muted-foreground mb-1.5 px-1"
             >
               배경색
             </p>
@@ -397,7 +420,7 @@
                 <button
                   type="button"
                   title={c.label}
-                  class="w-full h-7 rounded-md border border-white/20 transition-transform hover:scale-110"
+                  class="w-full h-7 rounded-md border border-border transition-transform hover:scale-110"
                   style="background: {c.value ||
                     'transparent'}; {!c.value
                     ? 'background-image: linear-gradient(135deg, transparent 45%, #ef4444 45%, #ef4444 55%, transparent 55%)'
@@ -417,18 +440,18 @@
         {/if}
       </div>
 
-      <div class="w-px h-5 bg-white/20 mx-0.5"></div>
+      <div class="w-px h-5 bg-border mx-0.5"></div>
 
       <!-- Delete buttons -->
       <div class="hce-table-btn-wrap">
         <button
           type="button"
           onclick={() => editor.chain().focus().deleteRow().run()}
-          disabled={!editor.can().deleteRow()}
+          disabled={!canDo((c) => c.deleteRow())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-red-300 hover:bg-white/10",
-            !editor.can().deleteRow() && "opacity-30 pointer-events-none",
+            "text-muted-foreground hover:text-red-300 hover:bg-muted",
+            !canDo((c) => c.deleteRow()) && "opacity-30 pointer-events-none",
           )}
         >
           <RowsIcon size={iconSize} />
@@ -440,11 +463,11 @@
         <button
           type="button"
           onclick={() => editor.chain().focus().deleteColumn().run()}
-          disabled={!editor.can().deleteColumn()}
+          disabled={!canDo((c) => c.deleteColumn())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-red-300 hover:bg-white/10",
-            !editor.can().deleteColumn() && "opacity-30 pointer-events-none",
+            "text-muted-foreground hover:text-red-300 hover:bg-muted",
+            !canDo((c) => c.deleteColumn()) && "opacity-30 pointer-events-none",
           )}
         >
           <ColumnsIcon size={iconSize} />
@@ -456,11 +479,11 @@
         <button
           type="button"
           onclick={() => editor.chain().focus().deleteTable().run()}
-          disabled={!editor.can().deleteTable()}
+          disabled={!canDo((c) => c.deleteTable())}
           class={cn(
             "p-1.5 rounded-full transition-colors",
-            "text-white/70 hover:text-red-300 hover:bg-white/10",
-            !editor.can().deleteTable() && "opacity-30 pointer-events-none",
+            "text-muted-foreground hover:text-red-300 hover:bg-muted",
+            !canDo((c) => c.deleteTable()) && "opacity-30 pointer-events-none",
           )}
         >
           <Trash2 size={iconSize} />

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

@@ -1 +1 @@
-{"version":3,"file":"TableBubbleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TableBubbleMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAoB1C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAkX7C,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TableBubbleMenu.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TableBubbleMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAqB1C,KAAK,gBAAgB,GAAI;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAqY7C,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/TipTapEditor.svelte

@@ -4,24 +4,7 @@
   import { TableCell } from "@tiptap/extension-table-cell";
   import { Extension } from "@tiptap/core";
   import { TextSelection } from "@tiptap/pm/state";
-  import { common, createLowlight } from "lowlight";
-  import cpp from "highlight.js/lib/languages/cpp";
-  import python from "highlight.js/lib/languages/python";
-
-  /*
-   * 문법 하이라이터는 **모듈에 한 벌만** 둔다.
-   *
-   * `common` 은 언어 37종이고, 예전엔 이 등록이 인스턴스 스크립트에 있어 에디터를 세울
-   * 때마다 통째로 다시 돌았다. 정올 기출 퀴즈처럼 한 화면에 에디터가 26~27개 서는
-   * 곳에서는 그게 1000번 가까이 반복된다.
-   *
-   * lowlight 는 문법을 담아 두는 레지스트리일 뿐 편집기별 상태를 갖지 않으므로 공유해도
-   * 안전하다. (측정해 보면 이 항목 자체는 27개 기준 13ms 수준이라 큰 몫은 아니다 —
-   * 다만 공짜로 없앨 수 있는 반복이라 남겨 둘 이유가 없다.)
-   */
-  const lowlight = createLowlight(common);
-  lowlight.register("cpp", cpp);
-  lowlight.register("python", python);
+  import { lowlight } from "../utils/lowlight";
 
   /*
    * 읽기 전용용 표 확장도 **한 벌만** 만든다.
@@ -128,8 +111,13 @@
   import Typography from "@tiptap/extension-typography";
   import CharacterCount from "@tiptap/extension-character-count";
   import { TableRow } from "@tiptap/extension-table-row";
-  import { DetailsContent, DetailsSummary } from "@tiptap/extension-details";
+  import { DetailsContent } from "@tiptap/extension-details";
   import { FixedDetails } from "../extensions/FixedDetails";
+  import {
+    NotionBlockquote,
+    LeveledDetailsSummary,
+    NotionToggleInputRule,
+  } from "../extensions/NotionInputRules";
   import FileHandler from "@tiptap/extension-file-handler";
   import type { AnyExtension } from "@tiptap/core";
   import { PdfBlock } from "../extensions/PdfBlock";
@@ -139,6 +127,7 @@
   import { Indent } from "../extensions/Indent";
   import { FileAttachment } from "../extensions/FileAttachment";
   import { MbusVideo } from "../extensions/MbusVideo";
+  import { VideoEmbed } from "../extensions/VideoEmbed";
   import { CardBlock } from "../extensions/CardBlock";
   import { MathInline, MathDisplay, type MathPrompt } from "../extensions/Math";
   import FixedToolbar from "./FixedToolbar.svelte";
@@ -146,6 +135,8 @@
   import SlashCommandMenu from "./SlashCommandMenu.svelte";
   import TableBubbleMenu from "./TableBubbleMenu.svelte";
   import MathModal from "./MathModal.svelte";
+  import MediaPickerModal from "./MediaPickerModal.svelte";
+  import InputModal from "./InputModal.svelte";
   import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
   import { resolveFeatures } from "../types";
   import type { FileResolver } from "../extensions/FileAttachment";
@@ -160,6 +151,7 @@
     onPromptLink,
     onPromptImage,
     onPromptMbus,
+    onPromptVideo,
     onPromptCardBackground,
     onPromptMath,
     toolbarEnd,
@@ -177,6 +169,8 @@
     onPromptLink?: PromptHandler;
     onPromptImage?: PromptHandler;
     onPromptMbus?: PromptHandler;
+    /** 영상(유튜브·Vimeo 등) URL 프롬프트. 미제공 시 내장 InputModal 폴백 */
+    onPromptVideo?: PromptHandler;
     /** 카드 배경 고르기. 미제공 시 window.prompt 폴백 */
     onPromptCardBackground?: PromptHandler;
     /** LaTeX 수식 편집. 미제공 시 내장 MathModal(실시간 미리보기) 폴백 */
@@ -238,6 +232,93 @@
   let uploading = $state(false);
   let pdfInputEl: HTMLInputElement | undefined = $state();
   let fileInputEl: HTMLInputElement | undefined = $state();
+
+  /*
+   * ── 이미지·파일 고르기 모달 ──────────────────────────────────────────────
+   * **에디터가 갖는다.** 툴바에서도 슬래시 메뉴에서도 같은 것이 열려야 하고, 실제로 넣는 데
+   * 필요한 것(`onUploadFile`, 노드 만드는 법)이 전부 여기 있기 때문이다. 툴바에 두면
+   * 슬래시 메뉴가 자기 것을 또 만들어야 한다.
+   *
+   * ⚠️ **업로드 함수를 준 호스트에게만 연다.** 못 올리는 곳에서 `업로드` 탭을 보여 주면
+   * 눌러도 아무 일이 없다. 그런 곳은 예전처럼 URL 입력만 받는다(아래 `pickImage`).
+   */
+  let mediaPicker = $state<"image" | "file" | null>(null);
+
+  /** URL 에서 파일 이름을 뽑는다. 링크로 첨부할 때 표시할 이름이 필요하다. */
+  function fileNameFromUrl(raw: string): string {
+    try {
+      const path = new URL(raw, "http://x").pathname;
+      const last = decodeURIComponent(path.split("/").filter(Boolean).pop() || "");
+      return last || "파일";
+    } catch {
+      return "파일";
+    }
+  }
+
+  function pickImage() {
+    if (onUploadFile) {
+      mediaPicker = "image";
+      return;
+    }
+    // 못 올리는 호스트 — 예전 경로(호스트 프롬프트 → 없으면 내장 입력창) 그대로.
+    if (onPromptImage) {
+      onPromptImage("").then((url) => {
+        if (url) editor?.chain().focus().setImage({ src: url }).run();
+      });
+      return;
+    }
+    imageUrlPrompt = true;
+  }
+
+  function pickFile() {
+    if (!onUploadFile) return;
+    mediaPicker = "file";
+  }
+
+  /** 업로드 없이 URL 만 받던 시절의 내장 입력창. 위 폴백에서만 쓴다. */
+  let imageUrlPrompt = $state(false);
+
+  /*
+   * 모달이 돌려주는 네 가지 결말. 모달을 닫는 것도 여기서 한다 —
+   * 모달은 "무엇을 골랐는지"만 알리고 그 뒤는 모른다.
+   *
+   * ⚠️ 업로드는 **실패해도 모달을 닫는다.** 열어 둔 채로 두면 `업로드 중...` 오버레이가
+   * 모달 뒤에 깔려 무슨 일이 일어나는지 안 보인다. 실패는 아래 `catch` 가 알린다.
+   */
+  function insertImageFile(file: File) {
+    mediaPicker = null;
+    if (!editor || !onUploadFile) return;
+    uploading = true;
+    onUploadFile(file)
+      .then((url) => {
+        editor!.chain().focus().setImage({ src: url }).run();
+      })
+      .catch(() => {
+        alert("이미지 업로드에 실패했습니다.");
+      })
+      .finally(() => {
+        uploading = false;
+      });
+  }
+
+  function insertImageUrl(url: string) {
+    mediaPicker = null;
+    editor?.chain().focus().setImage({ src: url }).run();
+  }
+
+  function insertFileUpload(file: File) {
+    mediaPicker = null;
+    uploadFile(file);
+  }
+
+  function insertFileUrl(url: string) {
+    mediaPicker = null;
+    editor
+      ?.chain()
+      .focus()
+      .setFileAttachment({ src: url, name: fileNameFromUrl(url) })
+      .run();
+  }
   let lastEmittedHtml = content;  // onChange로 내보낸 마지막 HTML (외부→내부 변경만 감지용)
   let tableObserver: MutationObserver | undefined;
 
@@ -413,10 +494,38 @@
     editor = new Editor({
       element: editorElement,
       extensions: [
+        /*
+         * `link`·`underline` 을 끄는 것은 **v3 이전의 뒷정리**다.
+         *
+         * ⚠️ StarterKit v2 에는 이 둘이 없어서 아래에 `Link`·`Underline` 을 따로 달았다.
+         * v3(3.22.x)부터 StarterKit 이 그것을 품으면서 같은 이름이 두 번 등록되고
+         * `Duplicate extension names found: ['link', 'underline']` 경고가 뜬다.
+         *
+         * 지금은 나중에 등록한 아래 `Link.configure` 가 이긴다 — 실측으로 `target=_blank`
+         * 와 `rel=noopener noreferrer` 가 붙는 것을 확인했다. 하지만 **그 우선순위는 계약이
+         * 아니다.** TipTap 의 해결 순서가 바뀌면 `openOnClick: false` 와 rel/target 이
+         * 조용히 빠진다. 읽기 전용 인스턴스가 한 화면에 26~27 개 서는 곳도 있어서(아래
+         * 안내문 주석 참고) 중복 등록과 경고가 그만큼 쌓인다.
+         *
+         * `codeBlock: false` 와 같은 꼴 — **StarterKit 에서는 끄고 자기 것을 단다** — 로 맞춘다.
+         */
+        /*
+         * `blockquote: false` 인 이유는 위 셋과 같다 — **끄고 자기 것을 단다.**
+         * StarterKit 의 인용문은 `> ` 로 만들어지는데, 노션에 맞춰 `> ` 는 토글에 내주고
+         * 인용문은 `" ` 로 옮겼다(`NotionBlockquote`). 입력 규칙은 `configure` 로 바꿀 수
+         * 없어서 확장을 갈아 끼우는 것 말고는 방법이 없다.
+         *
+         * ⚠️ 두 규칙이 같은 `> ` 를 노리게 두면 안 된다. 어느 쪽이 이길지는 확장 등록
+         * 순서에 달리게 되어, 같은 키를 쳤는데 인용문이 나올 때와 토글이 나올 때가 갈린다.
+         */
         StarterKit.configure({
           heading: { levels: [1, 2, 3] },
           codeBlock: false,
+          blockquote: false,
+          link: false,
+          underline: false,
         }),
+        NotionBlockquote,
         ...(extraExtensions.some((ext) => (ext as any).name === 'codeBlock')
           ? []
           : [CodeBlockLowlight.configure({
@@ -483,6 +592,7 @@
           ...(fileDownloadBaseUrl ? { downloadBaseUrl: fileDownloadBaseUrl } : {}),
         }),
         MbusVideo,
+        VideoEmbed,
         CardBlock.configure({ promptBackground: onPromptCardBackground ?? null }),
         /*
          * ⚠️ **수학은 여기서 등록한다.** 예전엔 `MathInline`/`MathDisplay` 를 내보내기만 하고
@@ -505,7 +615,9 @@
         Indent,
         FixedDetails,
         DetailsContent,
-        DetailsSummary,
+        /* 토글 제목(`# > `)을 위해 `level` 을 붙인 판본. 옛 문서는 level 0 으로 읽힌다. */
+        LeveledDetailsSummary,
+        NotionToggleInputRule,
         ...extraExtensions,
         ...(onUploadFile
           ? [
@@ -685,11 +797,12 @@
 			{editor}
 			{features}
 			{onPromptLink}
-			{onPromptImage}
 			{onPromptMbus}
+			{onPromptVideo}
 			{toolbarEnd}
 			onPdfClick={() => pdfInputEl?.click()}
-			onFileClick={onUploadFile ? () => fileInputEl?.click() : undefined}
+			onImageClick={pickImage}
+			onFileClick={onUploadFile ? pickFile : undefined}
 		/>
 	{/if}
 
@@ -728,15 +841,16 @@
 					{editor}
 					{features}
 					{onPromptLink}
-					{onPromptImage}
 					{onPromptMbus}
+					{onPromptVideo}
 					query={slashQuery}
 					onClose={closeSlashMenu}
+					onImagePick={pickImage}
 					onPdfUpload={onUploadFile && features.has('pdf')
 						? () => pdfInputEl?.click()
 						: undefined}
 					onFileUpload={onUploadFile && features.has('file')
-						? () => fileInputEl?.click()
+						? pickFile
 						: undefined}
 				/>
 			</div>
@@ -747,6 +861,48 @@
 			`features` 로 막지 않는다 — `$…$` 입력 규칙과 붙여넣기 변환은 feature 와 무관하게
 			항상 살아 있어서, 그렇게 만든 수식을 고치려면 이 모달이 필요하다.
 		-->
+		<!--
+			이미지·파일 고르기. 둘이 **같은 모달**을 쓰고 문구만 다르다
+			(`MediaPickerModal` 주석 참고).
+		-->
+		{#if mediaPicker === 'image'}
+			<MediaPickerModal
+				title="이미지 추가"
+				accept="image/*"
+				uploadLabel="파일 업로드"
+				linkPlaceholder="이미지 링크 붙여넣기"
+				linkConfirmLabel="이미지 임베드"
+				linkHint="웹에 있는 모든 이미지와 호환됨"
+				onUpload={insertImageFile}
+				onLink={insertImageUrl}
+				onCancel={() => (mediaPicker = null)}
+			/>
+		{/if}
+		{#if mediaPicker === 'file'}
+			<MediaPickerModal
+				title="파일 추가"
+				uploadLabel="파일을 선택하세요"
+				linkPlaceholder="파일 링크 붙여넣기"
+				linkConfirmLabel="파일 임베드"
+				onUpload={insertFileUpload}
+				onLink={insertFileUrl}
+				onCancel={() => (mediaPicker = null)}
+			/>
+		{/if}
+
+		<!-- 업로드를 못 하는 호스트용 폴백(URL 만 받는다). 위 `pickImage` 참고. -->
+		{#if imageUrlPrompt}
+			<InputModal
+				title="이미지 URL 입력"
+				placeholder="https://example.com/image.png"
+				onConfirm={(url) => {
+					imageUrlPrompt = false;
+					editor?.chain().focus().setImage({ src: url }).run();
+				}}
+				onCancel={() => (imageUrlPrompt = false)}
+			/>
+		{/if}
+
 		{#if mathPrompt}
 			<MathModal
 				latex={mathPrompt.latex}

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

@@ -13,6 +13,8 @@ type $$ComponentProps = {
     onPromptLink?: PromptHandler;
     onPromptImage?: PromptHandler;
     onPromptMbus?: PromptHandler;
+    /** 영상(유튜브·Vimeo 등) URL 프롬프트. 미제공 시 내장 InputModal 폴백 */
+    onPromptVideo?: PromptHandler;
     /** 카드 배경 고르기. 미제공 시 window.prompt 폴백 */
     onPromptCardBackground?: PromptHandler;
     /** LaTeX 수식 편집. 미제공 시 내장 MathModal(실시간 미리보기) 폴백 */

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

@@ -1 +1 @@
-{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AA+GA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAuBtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AASjD,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAM9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAwmBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"TipTapEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/components/TipTapEditor.svelte.ts"],"names":[],"mappings":"AA8FA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA4BtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAUjD,OAAO,EAA2B,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAQ9E,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1F,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEhE,KAAK,gBAAgB,GAAI;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,uDAAuD;IACvD,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,wCAAwC;IACxC,sBAAsB,CAAC,EAAE,aAAa,CAAC;IACvC,mDAAmD;IACnD,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,4BAA4B;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAmvBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}