@teriusu/rich-editor 0.9.1 → 0.9.2

package/dist/components/BubbleToolbar.svelte

@@ -22,6 +22,7 @@
     ListChecks,
     Quote,
     ChevronDown,
+    Sigma,
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
   import type { ToolbarFeature, PromptHandler } from "../types";
@@ -380,6 +381,28 @@
     </button>
     {/if}
 
+    {#if has('math')}
+    <!--
+      버블 툴바는 **뭔가 선택돼 있을 때만** 뜨므로 여기서는 감싸기/풀기만 하면 된다
+      (고정 툴바처럼 "빈 선택이면 새로 넣기" 로 떨어질 일이 없다).
+      `minimal` 프리셋에는 고정 툴바가 없어서, 댓글에서 수식을 만드는 유일한 버튼이 이것이다.
+    -->
+    <button
+      type="button"
+      onclick={() => editor.chain().focus().toggleMathInline().run()}
+      title="인라인 수식"
+      aria-label="인라인 수식"
+      class={cn(
+        "p-1.5 rounded-full transition-colors",
+        isActive("math_inline")
+          ? "bg-white/20 text-white"
+          : "text-white/70 hover:text-white hover:bg-white/10",
+      )}
+    >
+      <Sigma size={iconSize} />
+    </button>
+    {/if}
+
     {#if has('highlight') || has('text-color')}
       <div class="w-px h-5 bg-white/20 mx-0.5"></div>
     {/if}

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

@@ -1 +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;AAuB3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAoXJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"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;AAwB3C,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B,CAAC;AAgYJ,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/FixedToolbar.svelte

@@ -34,6 +34,7 @@
     Plus,
     Pilcrow,
     Palette,
+    Sigma,
   } from "lucide-svelte";
   import { cn } from "../utils/cn";
   import InputModal from "./InputModal.svelte";
@@ -249,7 +250,8 @@
       has("columns-2") ||
       has("columns-3") ||
       has("horizontal-rule") ||
-      has("code-block"),
+      has("code-block") ||
+      has("math"),
   );
 
   const hasBlockItems = $derived(
@@ -533,6 +535,37 @@
       <Strikethrough size={iconSize} />
     </button>
     {/if}
+    {#if has('math')}
+    <!--
+      선택한 텍스트를 인라인 수식으로 감싸고, 이미 수식인 자리에서 누르면 원문으로 되돌린다
+      (구세대 `setMath.js` 와 같은 토글). 선택이 없으면 감쌀 게 없으니 프롬프트로 새로 넣는다.
+
+      ⚠️ **`run()` 의 반환값으로 갈라지면 안 된다.** `chain().focus().toggleMathInline().run()`
+      은 감싸기가 실제로 성공해도 false 를 돌려주는 경우가 있어(체인의 다른 단계가 false 를
+      섞는다), 감싸 놓고 프롬프트까지 같이 여는 걸 브라우저에서 확인했다.
+      **무엇을 할지는 실행 전에 상태로 정한다.**
+    -->
+    <button
+      type="button"
+      onclick={() => {
+        if (editor.state.selection.empty && !editor.isActive('math_inline')) {
+          editor.chain().focus().promptMathInline().run();
+        } else {
+          editor.chain().focus().toggleMathInline().run();
+        }
+      }}
+      data-tooltip="인라인 수식"
+      aria-label="인라인 수식"
+      class={cn(
+        "p-1.5 rounded-md transition-colors",
+        isActive("math_inline")
+          ? "hce-active"
+          : "text-muted-foreground hover:bg-muted hover:text-foreground",
+      )}
+    >
+      <Sigma size={iconSize} />
+    </button>
+    {/if}
     {#if has('text-color')}
     <div bind:this={colorMenuEl} class="relative">
       <button
@@ -687,6 +720,16 @@
             <Code2 size={14} /> 코드 블록
           </button>
           {/if}
+          {#if has('math')}
+          <button
+            type="button"
+            class="w-full text-left px-2.5 py-1.5 text-xs transition-colors flex items-center gap-2 hover:bg-muted"
+            onclick={() =>
+              runInsert(() => editor.chain().focus().promptMathDisplay().run())}
+          >
+            <Sigma size={14} /> 수식 블록
+          </button>
+          {/if}
           {#if has('pdf')}
           <button
             type="button"

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

@@ -1 +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;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAqCtC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA6lBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"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;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAsCtC,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE7D,KAAK,gBAAgB,GAAI;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAqnBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/MathModal.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  /**
+   * LaTeX 수식 편집 모달.
+   *
+   * `InputModal` 을 재사용하지 않고 따로 둔 이유는 둘이다:
+   *   1. 수식은 한 줄로 안 끝난다(행렬·정렬 환경) → `textarea`
+   *   2. LaTeX 는 눈으로 확인하지 않으면 맞게 썼는지 알 수 없다 → **실시간 미리보기**
+   *
+   * 렌더는 편집기 NodeView 와 같은 KaTeX 옵션(`throwOnError:false`)을 쓴다. 그래서
+   * 여기서 보이는 모양이 곧 본문에 들어갈 모양이다.
+   */
+  import { X } from "lucide-svelte";
+  import katex from "katex";
+
+  let {
+    latex = "",
+    displayMode = false,
+    onConfirm,
+    onCancel,
+  }: {
+    latex?: string;
+    displayMode?: boolean;
+    /** 빈 문자열로 확인하면 호출부가 노드를 지운다(편집 중일 때). */
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+  } = $props();
+
+  let value = $state(latex);
+  let inputEl: HTMLTextAreaElement | undefined = $state();
+
+  const preview = $derived.by(() => {
+    const source = value.trim();
+    if (!source) return { html: "", error: "" };
+    try {
+      return {
+        html: katex.renderToString(source, {
+          displayMode,
+          throwOnError: true,
+          strict: false,
+          output: "html",
+        }),
+        error: "",
+      };
+    } catch (err) {
+      return { html: "", error: err instanceof Error ? err.message : String(err) };
+    }
+  });
+
+  $effect(() => {
+    if (inputEl) {
+      inputEl.focus();
+      inputEl.select();
+    }
+  });
+
+  $effect(() => {
+    function onKeydown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    }
+    window.addEventListener("keydown", onKeydown);
+    return () => window.removeEventListener("keydown", onKeydown);
+  });
+
+  function handleSubmit() {
+    onConfirm(value.trim());
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    // 줄바꿈이 필요한 문법(행렬 등)이 있으므로 Enter 는 그대로 두고,
+    // 확인은 Ctrl/⌘+Enter 로 받는다.
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!--
+  ⚠️ z-index 를 Tailwind `z-50` 으로 두면 **호스트 앱 밑에 깔린다.** 정올은 헤더가 98,
+  레이아웃 오버레이가 1000, 다이얼로그 스크림이 99999999 다(`apps/jungol/src/routes/layout.css`).
+  이 모달은 본문 클릭으로도 열리므로 다이얼로그 안의 에디터에서 열릴 수 있다 — 스크림보다 위여야 한다.
+  Tailwind 임의값 클래스 대신 인라인 style 로 준다(`.claude/rules/rich-editor.md`: 동적 클래스 금지).
+-->
+<div
+  class="fixed inset-0 flex items-center justify-center bg-black/40"
+  style="z-index: 100000001"
+  onclick={onCancel}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="bg-background border border-border rounded-xl shadow-xl p-5 w-[440px] max-w-[90vw]"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <div class="flex items-center justify-between mb-3">
+      <span class="text-sm font-semibold">
+        {displayMode ? "수식 블록" : "인라인 수식"}
+      </span>
+      <button
+        type="button"
+        class="p-1 rounded-md hover:bg-muted text-muted-foreground"
+        onclick={onCancel}
+        aria-label="닫기"
+      >
+        <X size={14} />
+      </button>
+    </div>
+
+    <textarea
+      bind:this={inputEl}
+      rows="3"
+      spellcheck="false"
+      class="w-full border border-border rounded-md px-3 py-2 text-sm font-mono bg-background resize-y focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary"
+      placeholder={"\\frac{a}{b} \\le c"}
+      bind:value
+      onkeydown={handleKeydown}
+    ></textarea>
+
+    <!--
+      ⚠️ 바탕을 `bg-muted/40` 으로 주지 않는다. 호스트가 `--muted` 를 **hex** 로 주는데
+      Tailwind 3 의 투명도 변형은 채널 표기를 요구해 그 클래스를 **조용히 만들지 않는다**
+      (빌드된 CSS 에 규칙이 아예 없다 — 실제로 확인했다). `.claude/rules/rich-editor.md` 대로
+      `color-mix` 를 인라인으로 준다. `editor.css` 의 `.hce-active` 가 같은 이유로 같은 처방을 쓴다.
+    -->
+    <div
+      class="mt-3 min-h-[52px] flex items-center justify-center rounded-md border border-border px-3 py-2 overflow-x-auto"
+      style="background-color: color-mix(in srgb, var(--muted) 40%, transparent)"
+    >
+      {#if preview.error}
+        <span class="text-xs text-destructive break-all">{preview.error}</span>
+      {:else if preview.html}
+        <!-- katex.renderToString 산출물. 사용자 입력은 KaTeX 가 이스케이프한다. -->
+        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+        {@html preview.html}
+      {:else}
+        <span class="text-xs text-muted-foreground">미리보기</span>
+      {/if}
+    </div>
+
+    <div class="flex items-center justify-between gap-2 mt-4">
+      <span class="text-[11px] text-muted-foreground">⌘/Ctrl + Enter 로 확인</span>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="px-3.5 py-1.5 text-sm rounded-md border border-border hover:bg-muted transition-colors"
+          onclick={onCancel}
+        >
+          취소
+        </button>
+        <button
+          type="button"
+          class="px-3.5 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
+          onclick={handleSubmit}
+        >
+          확인
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    latex?: string;
+    displayMode?: boolean;
+    /** 빈 문자열로 확인하면 호출부가 노드를 지운다(편집 중일 때). */
+    onConfirm: (value: string) => void;
+    onCancel: () => void;
+};
+declare const MathModal: import("svelte").Component<$$ComponentProps, {}, "">;
+type MathModal = ReturnType<typeof MathModal>;
+export default MathModal;
+//# sourceMappingURL=MathModal.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MathModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MathModal.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAiHJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/SlashCommandMenu.svelte

@@ -21,6 +21,7 @@
     Type,
     Tv,
     SquareDashed,
+    Sigma,
   } from "lucide-svelte";
   import type { SlashMenuItem, ToolbarFeature, PromptHandler } from "../types";
   import type { Component } from "svelte";
@@ -30,6 +31,7 @@
   /** 각 feature가 속하는 섹션 라벨 */
   const SECTION_MAP: Record<string, string> = {
     "code-block": "자주 쓰는",
+    math: "자주 쓰는",
     file: "미디어",
     pdf: "미디어",
     paragraph: "기본",
@@ -133,6 +135,15 @@
       command: (editor) =>
         editor.chain().focus().setCodeBlock().run(),
     },
+    {
+      feature: "math",
+      label: "수식",
+      keywords: "math latex tex 수식 공식 수학 katex 시그마 분수",
+      icon: Sigma,
+      // 슬래시 메뉴는 `/수식` 을 지우면서 커맨드를 부른다. 프롬프트는 그 뒤에 열려야
+      // 지운 자리에 결과가 들어간다 — `promptMathDisplay` 가 비동기라 순서가 맞는다.
+      command: (editor) => editor.chain().focus().promptMathDisplay().run(),
+    },
     {
       feature: "toggle",
       label: "토글",

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;AAuB3C,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;AA2WJ,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;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"}

package/dist/components/TipTapEditor.svelte

@@ -38,11 +38,12 @@
   import { FileAttachment } from "../extensions/FileAttachment";
   import { MbusVideo } from "../extensions/MbusVideo";
   import { CardBlock } from "../extensions/CardBlock";
-  import { MathInline, MathDisplay } from "../extensions/Math";
+  import { MathInline, MathDisplay, type MathPrompt } from "../extensions/Math";
   import FixedToolbar from "./FixedToolbar.svelte";
   import BubbleToolbar from "./BubbleToolbar.svelte";
   import SlashCommandMenu from "./SlashCommandMenu.svelte";
   import TableBubbleMenu from "./TableBubbleMenu.svelte";
+  import MathModal from "./MathModal.svelte";
   import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
   import { resolveFeatures } from "../types";
   import type { FileResolver } from "../extensions/FileAttachment";
@@ -120,6 +121,7 @@
     onPromptImage,
     onPromptMbus,
     onPromptCardBackground,
+    onPromptMath,
     toolbarEnd,
     extensions: extraExtensions = [],
     editable = true,
@@ -137,6 +139,8 @@
     onPromptMbus?: PromptHandler;
     /** 카드 배경 고르기. 미제공 시 window.prompt 폴백 */
     onPromptCardBackground?: PromptHandler;
+    /** LaTeX 수식 편집. 미제공 시 내장 MathModal(실시간 미리보기) 폴백 */
+    onPromptMath?: MathPrompt;
     /** 고정 툴바 오른쪽 끝에 끼워 넣을 조각 */
     toolbarEnd?: Snippet;
     extensions?: AnyExtension[];
@@ -161,6 +165,36 @@
     const cc = editor?.storage?.characterCount;
     return { chars: cc?.characters?.() ?? 0, words: cc?.words?.() ?? 0 };
   });
+  /*
+   * 수식 프롬프트 다리.
+   *
+   * 확장(vanilla NodeView·입력 규칙)은 Svelte 를 모르므로 **약속된 함수 하나**만 받는다.
+   * 그 함수가 여기서 `MathModal` 을 띄우고 사용자가 확인/취소할 때 resolve 한다.
+   * 링크·이미지가 `InputModal` 로 하는 것과 같은 구조인데, 저쪽은 툴바가 열고 이쪽은
+   * 본문 클릭·입력 규칙·슬래시가 열기 때문에 상태를 에디터 최상단에 둬야 한다.
+   *
+   * ⚠️ 이 함수는 확장을 만들 때 한 번만 캡처된다. 그래서 `onPromptMath` 를 직접 넘기지 않고
+   *    호출 시점에 읽는다 — 호스트가 나중에 핸들러를 붙여도 따라간다.
+   */
+  let mathPrompt = $state<{
+    latex: string;
+    displayMode: boolean;
+    resolve: (value: string | null) => void;
+  } | null>(null);
+
+  const promptMath: MathPrompt = (latex, displayMode) => {
+    if (onPromptMath) return onPromptMath(latex, displayMode);
+    return new Promise<string | null>((resolve) => {
+      mathPrompt = { latex, displayMode, resolve };
+    });
+  };
+
+  function closeMathPrompt(value: string | null) {
+    const pending = mathPrompt;
+    mathPrompt = null;
+    pending?.resolve(value);
+  }
+
   let uploading = $state(false);
   let pdfInputEl: HTMLInputElement | undefined = $state();
   let fileInputEl: HTMLInputElement | undefined = $state();
@@ -413,10 +447,10 @@
          */
         ...(extraExtensions.some((ext) => (ext as any).name === "math_inline")
           ? []
-          : [MathInline]),
+          : [MathInline.configure({ promptMath })]),
         ...(extraExtensions.some((ext) => (ext as any).name === "math_display")
           ? []
-          : [MathDisplay]),
+          : [MathDisplay.configure({ promptMath })]),
         Columns,
         Column,
         CodeBlockTopEscape,
@@ -660,6 +694,20 @@
 			</div>
 		{/if}
 
+		<!--
+			수식 프롬프트. `onPromptMath` 를 준 호스트에겐 열리지 않는다(그쪽이 직접 띄운다).
+			`features` 로 막지 않는다 — `$…$` 입력 규칙과 붙여넣기 변환은 feature 와 무관하게
+			항상 살아 있어서, 그렇게 만든 수식을 고치려면 이 모달이 필요하다.
+		-->
+		{#if mathPrompt}
+			<MathModal
+				latex={mathPrompt.latex}
+				displayMode={mathPrompt.displayMode}
+				onConfirm={(value) => closeMathPrompt(value)}
+				onCancel={() => closeMathPrompt(null)}
+			/>
+		{/if}
+
 		{#if features.has('character-count')}
 			<div
 				class="flex justify-end px-4 py-2 text-xs text-muted-foreground border-t border-border"

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

@@ -1,5 +1,6 @@
 import type { Snippet } from "svelte";
 import { type AnyExtension } from "@tiptap/core";
+import { type MathPrompt } from "../extensions/Math";
 import type { UploadHandler, PromptHandler, ToolbarMode, ToolbarFeature } from "../types";
 import type { FileResolver } from "../extensions/FileAttachment";
 type $$ComponentProps = {
@@ -14,6 +15,8 @@ type $$ComponentProps = {
     onPromptMbus?: PromptHandler;
     /** 카드 배경 고르기. 미제공 시 window.prompt 폴백 */
     onPromptCardBackground?: PromptHandler;
+    /** LaTeX 수식 편집. 미제공 시 내장 MathModal(실시간 미리보기) 폴백 */
+    onPromptMath?: MathPrompt;
     /** 고정 툴바 오른쪽 끝에 끼워 넣을 조각 */
     toolbarEnd?: Snippet;
     extensions?: AnyExtension[];

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":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA6BtC,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAe5D,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,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;AA8nBJ,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":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA6BtC,OAAO,EAAa,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAU5D,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;AAmqBJ,QAAA,MAAM,YAAY,sDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/extensions/Math.d.ts

@@ -7,22 +7,52 @@
  *
  * 노드는 atom이며 텍스트 콘텐츠(LaTeX 원문)를 자식 텍스트 노드로 보관한다.
  * NodeView가 KaTeX로 렌더링한다.
+ *
+ * ## 입력 경로 — 구세대(@seorii/tiptap)와 맞춘 것
+ *
+ * 이전할 때 **렌더만 옮기고 넣는 길이 통째로 빠져 있었다.** 문서는 열리는데 새 수식을
+ * 만들 방법이 없었다는 뜻이다. 구세대가 갖고 있던 네 경로를 여기로 되살렸다:
+ *
+ * | 경로 | 구세대 | 여기 |
+ * |---|---|---|
+ * | `$…$` | `makeInlineMathInputRule(/\$(.+)\$/)` | `addInputRules` (MathInline) |
+ * | `$$…$$` / `$$`+스페이스 | `makeBlockMathInputRule(/\$\$\s+$/)` | `addInputRules` (MathDisplay) |
+ * | 붙여넣기 `$…$` 자동 변환 | `plugin/mathPaste.js` | `mathPastePlugin` (아래) |
+ * | 선택 영역 감싸기/풀기 | `tiptap/setMath.js` | `toggleMathInline` 커맨드 |
+ *
+ * ## 편집은 모달로 — 구세대와 다른 유일한 지점
+ *
+ * 구세대는 노드 안에 **중첩 EditorView**를 띄워 LaTeX 원문을 그 자리에서 고치게 했다
+ * (`MathView` + `mathPlugin`/`mathSelectPlugin`, vanilla ProseMirror 400줄 남짓).
+ * 여기서는 그 대신 **호스트가 주는 프롬프트 훅**을 부른다 — 링크·이미지·카드 배경이
+ * 이미 쓰는 규약(`onPromptLink`, `promptBackground`)과 같은 모양이고, ProseMirror
+ * 내부(중첩 뷰·커서 브리지·backspace 체인)에 손대지 않아 유지비가 훨씬 싸다.
+ *
+ * 호스트가 `promptMath`를 안 주면 `window.prompt`로 떨어진다.
  */
 import { Node } from "@tiptap/core";
-interface MathOptions {
+/** 현재 LaTeX 원문을 받아 새 값(취소면 null)을 돌려주는 호스트 훅. */
+export type MathPrompt = (latex: string, displayMode: boolean) => Promise<string | null>;
+export interface MathOptions {
     HTMLAttributes: Record<string, unknown>;
+    promptMath: MathPrompt | null;
 }
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         mathInline: {
             insertMathInline: (latex: string) => ReturnType;
+            /** 선택 영역을 인라인 수식으로 감싼다. 이미 수식이면 원문 텍스트로 되돌린다. */
+            toggleMathInline: () => ReturnType;
+            /** 프롬프트를 띄워 인라인 수식을 새로 넣는다. */
+            promptMathInline: () => ReturnType;
         };
         mathDisplay: {
             insertMathDisplay: (latex: string) => ReturnType;
+            /** 프롬프트를 띄워 수식 블록을 새로 넣는다. */
+            promptMathDisplay: () => ReturnType;
         };
     }
 }
 export declare const MathInline: Node<MathOptions, any>;
 export declare const MathDisplay: Node<MathOptions, any>;
-export {};
 //# sourceMappingURL=Math.d.ts.map

package/dist/extensions/Math.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Math.d.ts","sourceRoot":"","sources":["../../src/extensions/Math.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,EAAmB,IAAI,EAAE,MAAM,cAAc,CAAC;AAGrD,UAAU,WAAW;IACnB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;SACjD,CAAC;QACF,WAAW,EAAE;YACX,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;SAClD,CAAC;KACH;CACF;AA2BD,eAAO,MAAM,UAAU,wBAsCrB,CAAC;AAEH,eAAO,MAAM,WAAW,wBAuCtB,CAAC"}
+{"version":3,"file":"Math.d.ts","sourceRoot":"","sources":["../../src/extensions/Math.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,OAAO,EAAa,IAAI,EAAgC,MAAM,cAAc,CAAC;AAK7E,iDAAiD;AACjD,MAAM,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;AAEzF,MAAM,WAAW,WAAW;IAC1B,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;CAC/B;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;YAChD,iDAAiD;YACjD,gBAAgB,EAAE,MAAM,UAAU,CAAC;YACnC,+BAA+B;YAC/B,gBAAgB,EAAE,MAAM,UAAU,CAAC;SACpC,CAAC;QACF,WAAW,EAAE;YACX,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;YACjD,8BAA8B;YAC9B,iBAAiB,EAAE,MAAM,UAAU,CAAC;SACrC,CAAC;KACH;CACF;AAkZD,eAAO,MAAM,UAAU,wBA4GrB,CAAC;AAEH,eAAO,MAAM,WAAW,wBA8EtB,CAAC"}