@teriusu/rich-editor 0.9.6 → 0.9.8

package/dist/components/InputModal.svelte

@@ -95,7 +95,7 @@
       </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"
+        class="px-3.5 py-1.5 text-sm rounded-md hce-btn-primary hover:opacity-90 transition-opacity"
         onclick={handleSubmit}
       >
         확인

package/dist/components/MathModal.svelte

@@ -76,6 +76,65 @@
       handleSubmit();
     }
   }
+
+  /*
+   * ── 자주 쓰는 기호 ─────────────────────────────────────────────────────────
+   * LaTeX 를 외우고 있는 사람만 수식을 쓸 수 있으면 기능이 반만 있는 것이다(사용자 제안).
+   *
+   * 고른 기준은 **온라인저지 본문에 실제로 나오는 것** — 복잡도 표기(빅오·log·합),
+   * 제약 조건(부등호·지수), 수열 첨자, 그리고 그리스 문자 몇이다. 미분·적분처럼
+   * 여기서 드문 것은 넣지 않았다. 늘리면 팔레트가 본문보다 커진다.
+   *
+   * `$` 는 커서를 놓을 자리다(아래 `insert` 가 그 자리에 커서를 둔다). 없으면 끝에 놓인다.
+   */
+  const SYMBOLS: { label: string; snippet: string; title: string }[] = [
+    { label: "x²", snippet: "^{$}", title: "위첨자" },
+    { label: "xᵢ", snippet: "_{$}", title: "아래첨자" },
+    { label: "a/b", snippet: "\\frac{$}{}", title: "분수" },
+    { label: "√", snippet: "\\sqrt{$}", title: "제곱근" },
+    { label: "∑", snippet: "\\sum_{i=1}^{n} $", title: "합" },
+    { label: "∏", snippet: "\\prod_{i=1}^{n} $", title: "곱" },
+    { label: "log", snippet: "\\log $", title: "로그" },
+    { label: "O(n)", snippet: "O($)", title: "빅오 표기" },
+    { label: "≤", snippet: "\\le $", title: "작거나 같다" },
+    { label: "≥", snippet: "\\ge $", title: "크거나 같다" },
+    { label: "≠", snippet: "\\ne $", title: "같지 않다" },
+    { label: "×", snippet: "\\times $", title: "곱하기" },
+    { label: "÷", snippet: "\\div $", title: "나누기" },
+    { label: "∈", snippet: "\\in $", title: "원소" },
+    { label: "∞", snippet: "\\infty $", title: "무한대" },
+    { label: "α", snippet: "\\alpha $", title: "알파" },
+    { label: "θ", snippet: "\\theta $", title: "세타" },
+    { label: "π", snippet: "\\pi $", title: "파이" },
+    { label: "→", snippet: "\\to $", title: "화살표" },
+    { label: "⋯", snippet: "\\cdots $", title: "가운데 말줄임" },
+  ];
+
+  /**
+   * 커서 자리에 조각을 끼워 넣는다.
+   *
+   * ⚠️ `value` 를 그냥 이어 붙이면 **커서가 맨 뒤로 튄다** — 수식 가운데를 고치던 중에
+   * 기호를 누르면 엉뚱한 곳에 들어간다. 선택 구간을 직접 다루고, 넣은 뒤 커서를
+   * `$` 자리(없으면 조각 끝)에 되돌려 놓는다.
+   */
+  function insert(snippet: string) {
+    const el = inputEl;
+    if (!el) return;
+
+    const caret = snippet.indexOf("$");
+    const text = snippet.replace("$", "");
+    const start = el.selectionStart ?? value.length;
+    const end = el.selectionEnd ?? start;
+
+    value = value.slice(0, start) + text + value.slice(end);
+
+    const next = start + (caret === -1 ? text.length : caret);
+    /* 값 반영이 DOM 에 적용된 뒤에 커서를 옮겨야 한다. */
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(next, next);
+    });
+  }
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -121,6 +180,24 @@
       onkeydown={handleKeydown}
     ></textarea>
 
+    <!--
+      기호 팔레트. `textarea` **바로 아래**에 둔다 — 누르면 글자가 들어가는 곳이라
+      입력창과 붙어 있어야 어디로 들어갈지 짐작이 간다.
+    -->
+    <div class="hce-math-symbols mt-2 flex flex-wrap gap-1">
+      {#each SYMBOLS as sym}
+        <button
+          type="button"
+          class="hce-math-sym"
+          title={sym.title}
+          aria-label={sym.title}
+          onclick={() => insert(sym.snippet)}
+        >
+          {sym.label}
+        </button>
+      {/each}
+    </div>
+
     <!--
       ⚠️ 바탕을 `bg-muted/40` 으로 주지 않는다. 호스트가 `--muted` 를 **hex** 로 주는데
       Tailwind 3 의 투명도 변형은 채널 표기를 요구해 그 클래스를 **조용히 만들지 않는다**
@@ -154,7 +231,7 @@
         </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"
+          class="px-3.5 py-1.5 text-sm rounded-md hce-btn-primary hover:opacity-90 transition-opacity"
           onclick={handleSubmit}
         >
           확인
@@ -187,4 +264,37 @@
 	.hce-math-panel textarea {
 		max-width: 100%;
 	}
+
+	/*
+	 * 기호 버튼. 스무 개가 두 줄로 앉으므로 **작고 조용해야** 한다 — 입력창보다 눈에 띄면
+	 * 무엇이 본체인지 흐려진다.
+	 *
+	 * ⚠️ 색·면을 직접 준다. 이 모달은 `.hce-editor-wrapper` 안에 렌더되어 패키지 리셋
+	 * (`background: transparent`, 0,1,1)을 맞는데, Tailwind 유틸리티(0,1,0)로는 못 이긴다
+	 * — 확인 버튼이 통째로 안 보이던 것과 같은 뿌리다(`editor.css` 의 `.hce-btn-primary` 주석).
+	 * 여기는 Svelte 스코프가 붙어 특이도가 더 높으므로 그대로 먹는다.
+	 */
+	.hce-math-sym {
+		box-sizing: border-box;
+		min-width: 30px;
+		padding: 3px 7px;
+		border: 1px solid var(--border);
+		border-radius: 6px;
+		background: var(--background);
+		color: var(--muted-foreground);
+		font-size: 12px;
+		line-height: 1.4;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+		cursor: pointer;
+		transition:
+			background-color 0.12s,
+			color 0.12s,
+			border-color 0.12s;
+	}
+
+	.hce-math-sym:hover {
+		background: var(--muted);
+		color: var(--foreground);
+		border-color: var(--ring, var(--muted-foreground));
+	}
 </style>

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

@@ -1 +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;AAmHJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"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;AAuLJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/MediaPickerModal.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+  /**
+   * 이미지·파일을 넣는 **한 개의 모달**. 탭 두 개(업로드 / 링크)를 갖는다.
+   *
+   * 예전에는 두 길이 완전히 갈려 있었다 — 툴바의 `이미지` 는 URL 입력창만 띄웠고
+   * (그래서 내 컴퓨터의 그림을 넣을 수 없었다), `파일 첨부` 는 곧장 파일 선택창을 열었다
+   * (그래서 이미 올라가 있는 파일의 주소로는 넣을 수 없었다). 넣으려는 것이 같은데
+   * 어느 버튼을 눌렀느냐로 할 수 있는 일이 갈렸다(사용자 요청으로 통합).
+   *
+   * 이 컴포넌트는 **고르기만** 한다. 실제로 문서에 꽂는 일은 부모(`TipTapEditor`)가 한다 —
+   * 업로드 함수도, 노드를 만드는 방법도 거기 있기 때문이다.
+   */
+  import { X } from "lucide-svelte";
+
+  let {
+    title,
+    accept,
+    uploadLabel,
+    linkPlaceholder,
+    linkConfirmLabel,
+    linkHint,
+    onUpload,
+    onLink,
+    onCancel,
+  }: {
+    title: string;
+    /** 파일 선택창에서 거를 확장자. 파일 첨부처럼 아무거나 받는 곳은 비운다. */
+    accept?: string;
+    uploadLabel: string;
+    linkPlaceholder: string;
+    linkConfirmLabel: string;
+    /** 링크 탭 아래 작은 안내문. 없으면 안 그린다. */
+    linkHint?: string;
+    /** 고른 파일을 부모가 올리고 문서에 꽂는다. 끝나면 모달을 닫는 것도 부모 몫. */
+    onUpload: (file: File) => void;
+    onLink: (url: string) => void;
+    onCancel: () => void;
+  } = $props();
+
+  let tab: "upload" | "link" = $state("upload");
+  let url = $state("");
+  let fileInputEl: HTMLInputElement | undefined = $state();
+  let urlInputEl: HTMLInputElement | undefined = $state();
+
+  /* 링크 탭으로 옮기면 바로 붙여넣을 수 있게 커서를 넣어 준다. */
+  $effect(() => {
+    if (tab === "link") urlInputEl?.focus();
+  });
+
+  $effect(() => {
+    function onKeydown(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+    }
+    window.addEventListener("keydown", onKeydown);
+    return () => window.removeEventListener("keydown", onKeydown);
+  });
+
+  function submitLink() {
+    const trimmed = url.trim();
+    if (trimmed) onLink(trimmed);
+  }
+</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/40"
+  onclick={onCancel}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="hce-picker-panel bg-background border border-border rounded-xl shadow-xl w-[420px] max-w-[90vw]"
+    onclick={(e) => e.stopPropagation()}
+  >
+    <div class="flex items-center justify-between px-4 pt-3">
+      <span class="text-sm font-semibold">{title}</span>
+      <button
+        type="button"
+        class="p-1 rounded-md hover:bg-muted text-muted-foreground"
+        onclick={onCancel}
+        aria-label="닫기"
+      >
+        <X size={14} />
+      </button>
+    </div>
+
+    <!--
+      탭 줄. 고른 탭에 **밑줄**을 그어 표시한다 — 알약 버튼으로 하면 그 아래 내용과
+      경계가 겹쳐 보여서, 눌린 것인지 내용의 일부인지 헷갈린다.
+    -->
+    <div class="hce-picker-tabs flex gap-1 px-3 pt-2 border-b border-border" role="tablist">
+      <button
+        type="button"
+        role="tab"
+        aria-selected={tab === "upload"}
+        class="hce-picker-tab px-2.5 py-1.5 text-sm transition-colors"
+        class:hce-picker-tab-on={tab === "upload"}
+        onclick={() => (tab = "upload")}
+      >
+        업로드
+      </button>
+      <button
+        type="button"
+        role="tab"
+        aria-selected={tab === "link"}
+        class="hce-picker-tab px-2.5 py-1.5 text-sm transition-colors"
+        class:hce-picker-tab-on={tab === "link"}
+        onclick={() => (tab = "link")}
+      >
+        링크
+      </button>
+    </div>
+
+    <div class="p-4">
+      {#if tab === "upload"}
+        <!--
+          ⚠️ **강조 버튼이다.** 테두리만 두른 판은 다크에서 배경과 거의 같아 보여
+          "누르는 것"으로 읽히지 않았다(사용자 지적: 버튼 같지가 않다).
+          링크 탭의 `임베드` 와 **같은 위계** — 둘 다 그 탭에서 할 일이 하나뿐이다.
+        -->
+        <button
+          type="button"
+          class="w-full rounded-md px-3 py-2.5 text-sm hce-btn-primary hover:opacity-90 transition-opacity"
+          onclick={() => fileInputEl?.click()}
+        >
+          {uploadLabel}
+        </button>
+        <input
+          bind:this={fileInputEl}
+          type="file"
+          {accept}
+          class="hidden"
+          onchange={(e) => {
+            const target = e.target as HTMLInputElement;
+            const file = target.files?.[0];
+            target.value = "";
+            if (file) onUpload(file);
+          }}
+        />
+      {:else}
+        <input
+          bind:this={urlInputEl}
+          type="text"
+          class="w-full border border-border rounded-md px-3 py-2 text-sm bg-background focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary"
+          placeholder={linkPlaceholder}
+          bind:value={url}
+          onkeydown={(e) => {
+            if (e.key === "Enter") submitLink();
+          }}
+        />
+        <button
+          type="button"
+          class="w-full mt-3 px-3.5 py-2 text-sm rounded-md hce-btn-primary hover:opacity-90 transition-opacity"
+          onclick={submitLink}
+        >
+          {linkConfirmLabel}
+        </button>
+        {#if linkHint}
+          <p class="mt-2 text-center text-xs text-muted-foreground">{linkHint}</p>
+        {/if}
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+	/*
+	 * `w-full` 은 `width: 100%` 일 뿐이라 `box-sizing` 이 `content-box` 면 좌우 패딩·테두리가
+	 * 그대로 더해져 입력창이 판 밖으로 나간다. 이 패키지는 Tailwind preflight 를 끄고
+	 * 배포하고 소비 앱에도 전역 리셋이 없다 — 수식 모달에서 실제로 터진 적이 있다.
+	 */
+	.hce-picker-panel,
+	.hce-picker-panel input,
+	.hce-picker-panel button {
+		box-sizing: border-box;
+	}
+
+	/*
+	 * 고르지 않은 탭은 흐리게, 고른 탭은 본문색 + 밑줄.
+	 * ⚠️ 밑줄은 `border-bottom` 으로 그리고 **꺼진 탭에도 투명한 같은 두께**를 준다.
+	 * 켜질 때만 테두리를 붙이면 그 2px 만큼 글자가 위로 밀려 탭이 덜컥거린다.
+	 */
+	.hce-picker-tab {
+		background: transparent;
+		border: 0;
+		border-bottom: 2px solid transparent;
+		margin-bottom: -1px;
+		color: var(--muted-foreground);
+		cursor: pointer;
+		font: inherit;
+	}
+
+	.hce-picker-tab:hover {
+		color: var(--foreground);
+	}
+
+	.hce-picker-tab-on {
+		color: var(--foreground);
+		border-bottom-color: var(--foreground);
+		font-weight: 600;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    title: string;
+    /** 파일 선택창에서 거를 확장자. 파일 첨부처럼 아무거나 받는 곳은 비운다. */
+    accept?: string;
+    uploadLabel: string;
+    linkPlaceholder: string;
+    linkConfirmLabel: string;
+    /** 링크 탭 아래 작은 안내문. 없으면 안 그린다. */
+    linkHint?: string;
+    /** 고른 파일을 부모가 올리고 문서에 꽂는다. 끝나면 모달을 닫는 것도 부모 몫. */
+    onUpload: (file: File) => void;
+    onLink: (url: string) => void;
+    onCancel: () => void;
+};
+declare const MediaPickerModal: import("svelte").Component<$$ComponentProps, {}, "">;
+type MediaPickerModal = ReturnType<typeof MediaPickerModal>;
+export default MediaPickerModal;
+//# sourceMappingURL=MediaPickerModal.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPickerModal.svelte.d.ts","sourceRoot":"","sources":["../../src/components/MediaPickerModal.svelte.ts"],"names":[],"mappings":"AAgBC,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAkGJ,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/SlashCommandMenu.svelte

@@ -20,9 +20,11 @@
     Columns3,
     Type,
     Tv,
+    Youtube,
     SquareDashed,
     Sigma,
   } from "lucide-svelte";
+  import { insertTableSized } from "../utils/table";
   import type { SlashMenuItem, ToolbarFeature, PromptHandler } from "../types";
   import type { Component } from "svelte";
 
@@ -39,6 +41,7 @@
     h2: "기본",
     h3: "기본",
     mbus: "미디어",
+    video: "미디어",
     card: "블록",
     "bullet-list": "리스트",
     "ordered-list": "리스트",
@@ -59,6 +62,14 @@
     label: string;
     keywords: string;
     icon: Component<{ size?: number }>;
+    /** 항목 오른쪽에 작게 보여 줄 입력 규칙. 없으면 안 그린다. */
+    shortcut?: string;
+    /**
+     * 이 항목이 들어갈 섹션. 없으면 `SECTION_MAP` 이 feature 로 정한다.
+     * ⚠️ 토글 제목처럼 **같은 feature 인데 다른 자리**에 놓아야 하는 것 때문에 필요하다
+     * (셋 다 `toggle` 이지만 토글은 리스트, 토글 제목은 제목 옆이 맞다).
+     */
+    section?: string;
     command: (editor: Editor) => void;
   }[] = [
     {
@@ -73,6 +84,7 @@
       label: "제목 1",
       keywords: "heading h1 제목",
       icon: Heading1,
+      shortcut: "# ",
       command: (editor) =>
         editor.chain().focus().toggleHeading({ level: 1 }).run(),
     },
@@ -81,6 +93,7 @@
       label: "제목 2",
       keywords: "heading h2 제목",
       icon: Heading2,
+      shortcut: "## ",
       command: (editor) =>
         editor.chain().focus().toggleHeading({ level: 2 }).run(),
     },
@@ -89,6 +102,7 @@
       label: "제목 3",
       keywords: "heading h3 제목",
       icon: Heading3,
+      shortcut: "### ",
       command: (editor) =>
         editor.chain().focus().toggleHeading({ level: 3 }).run(),
     },
@@ -97,6 +111,7 @@
       label: "글머리 목록",
       keywords: "bullet list 목록 리스트",
       icon: List,
+      shortcut: "- ",
       command: (editor) => editor.chain().focus().toggleBulletList().run(),
     },
     {
@@ -104,6 +119,7 @@
       label: "번호 목록",
       keywords: "ordered number list 번호 리스트",
       icon: ListOrdered,
+      shortcut: "1. ",
       command: (editor) => editor.chain().focus().toggleOrderedList().run(),
     },
     {
@@ -111,6 +127,7 @@
       label: "체크리스트",
       keywords: "checklist task todo 체크 할일",
       icon: CheckSquare,
+      shortcut: "[] ",
       command: (editor) => editor.chain().focus().toggleTaskList().run(),
     },
     {
@@ -118,6 +135,7 @@
       label: "인용문",
       keywords: "quote blockquote 인용",
       icon: Quote,
+      shortcut: "\" ",
       command: (editor) => editor.chain().focus().toggleBlockquote().run(),
     },
     {
@@ -125,6 +143,7 @@
       label: "구분선",
       keywords: "divider hr horizontal rule 구분",
       icon: Minus,
+      shortcut: "---",
       command: (editor) => editor.chain().focus().setHorizontalRule().run(),
     },
     {
@@ -132,6 +151,7 @@
       label: "코드",
       keywords: "code 코드 블록 cpp c++ python 파이썬",
       icon: Code2,
+      shortcut: "```",
       command: (editor) =>
         editor.chain().focus().setCodeBlock().run(),
     },
@@ -140,6 +160,7 @@
       label: "수식",
       keywords: "math latex tex 수식 공식 수학 katex 시그마 분수",
       icon: Sigma,
+      shortcut: "$$",
       // 슬래시 메뉴는 `/수식` 을 지우면서 커맨드를 부른다. 프롬프트는 그 뒤에 열려야
       // 지운 자리에 결과가 들어간다 — `promptMathDisplay` 가 비동기라 순서가 맞는다.
       command: (editor) => editor.chain().focus().promptMathDisplay().run(),
@@ -149,7 +170,40 @@
       label: "토글",
       keywords: "toggle details 접기 펼치기 토글",
       icon: ChevronRight,
-      command: (editor) => editor.chain().focus().setDetails().run(),
+      shortcut: "> ",
+      command: (editor) => editor.chain().focus().setToggleHeading(0).run(),
+    },
+    /*
+     * 토글 제목 — 접히는 제목. 입력 규칙(`# > `)으로도 만들 수 있지만 그것만 있으면
+     * **메뉴에는 없는 기능**이 된다(사용자 요청으로 추가).
+     * 만드는 일은 입력 규칙과 **같은 커맨드**가 한다(`setToggleHeading`).
+     */
+    {
+      feature: "toggle",
+      label: "토글 제목 1",
+      section: "기본",
+      keywords: "toggle heading 접기 제목 토글제목 h1",
+      icon: Heading1,
+      shortcut: "# > ",
+      command: (editor) => editor.chain().focus().setToggleHeading(1).run(),
+    },
+    {
+      feature: "toggle",
+      label: "토글 제목 2",
+      section: "기본",
+      keywords: "toggle heading 접기 제목 토글제목 h2",
+      icon: Heading2,
+      shortcut: "## > ",
+      command: (editor) => editor.chain().focus().setToggleHeading(2).run(),
+    },
+    {
+      feature: "toggle",
+      label: "토글 제목 3",
+      section: "기본",
+      keywords: "toggle heading 접기 제목 토글제목 h3",
+      icon: Heading3,
+      shortcut: "### > ",
+      command: (editor) => editor.chain().focus().setToggleHeading(3).run(),
     },
     {
       feature: "table",
@@ -157,11 +211,7 @@
       keywords: "table 표 테이블",
       icon: TableIcon,
       command: (editor) =>
-        editor
-          .chain()
-          .focus()
-          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
-          .run(),
+        insertTableSized(editor, { rows: 3, cols: 3, withHeaderRow: true }),
     },
     {
       feature: "columns-2",
@@ -187,6 +237,17 @@
         if (url) editor.chain().focus().setImage({ src: url }).run();
       },
     },
+    {
+      feature: "video",
+      label: "영상",
+      keywords: "video 영상 유튜브 youtube vimeo 동영상",
+      icon: Youtube,
+      command: (editor) => {
+        // 붙여넣은 주소는 `setVideoEmbed` 가 임베드용으로 바꿔 준다.
+        const url = window.prompt("영상 URL을 입력하세요 (유튜브·Vimeo 등)");
+        if (url) editor.chain().focus().setVideoEmbed({ src: url }).run();
+      },
+    },
     {
       feature: "mbus",
       label: "미디버스 영상",
@@ -231,9 +292,10 @@
     onClose,
     onPdfUpload,
     onFileUpload,
+    onImagePick,
     onPromptLink,
-    onPromptImage,
     onPromptMbus,
+    onPromptVideo,
   }: {
     editor: Editor;
     features: Set<ToolbarFeature>;
@@ -241,9 +303,18 @@
     onClose: () => void;
     onPdfUpload?: () => void;
     onFileUpload?: () => void;
+    /**
+     * 이미지 넣기 — 툴바의 `이미지` 와 **같은 모달**을 연다(에디터가 띄운다).
+     * 없으면 아래 항목의 기본 동작(`window.prompt`)으로 떨어진다.
+     */
+    onImagePick?: () => void;
     onPromptLink?: PromptHandler;
-    onPromptImage?: PromptHandler;
     onPromptMbus?: PromptHandler;
+    /**
+     * 영상 URL 프롬프트. 없으면 아래 항목의 `window.prompt` 로 떨어지는데, 그건 브라우저
+     * 기본 대화상자라 화면이 멈추고 앱과 모양이 따로 논다(사용자 지적).
+     */
+    onPromptVideo?: PromptHandler;
   } = $props();
 
   async function runItem(item: (typeof SLASH_MENU_ITEMS_DATA)[number]) {
@@ -258,9 +329,13 @@
           .run();
       return;
     }
-    if (item.feature === "image" && onPromptImage) {
-      const url = await onPromptImage("");
-      if (url) editor.chain().focus().setImage({ src: url }).run();
+    if (item.feature === "image" && onImagePick) {
+      onImagePick();
+      return;
+    }
+    if (item.feature === "video" && onPromptVideo) {
+      const url = await onPromptVideo("");
+      if (url) editor.chain().focus().setVideoEmbed({ src: url }).run();
       return;
     }
     if (item.feature === "mbus" && onPromptMbus) {
@@ -377,7 +452,7 @@
   >
     {#each SECTION_ORDER as section}
       {@const sectionItems = filtered.filter(
-        (it) => (SECTION_MAP[it.feature] ?? '기본') === section,
+        (it) => (it.section ?? SECTION_MAP[it.feature] ?? '기본') === section,
       )}
       {#if sectionItems.length > 0}
         <p class="slash-section">{section}</p>
@@ -403,6 +478,14 @@
               <item.icon size={SI} />
             </span>
             <span class="slash-label">{item.label}</span>
+            {#if item.shortcut}
+              <!--
+                쳐서 만드는 법을 항목 옆에 적어 둔다(사용자 요청). 메뉴를 한 번 쓰고 나면
+                다음부터는 메뉴를 안 열게 되는 게 목적이라, 눈에 띄되 이름을 가리지 않을
+                만큼만 흐리게 둔다.
+              -->
+              <span class="slash-shortcut">{item.shortcut}</span>
+            {/if}
           </button>
         {/each}
       {/if}
@@ -412,7 +495,8 @@
 
 <style>
   .slash-menu {
-    width: 200px;
+    /* 단축키 표시가 오른쪽에 붙으면서 200px 로는 이름이 잘렸다. */
+    width: 244px;
     max-height: 280px;
   }
 
@@ -489,4 +573,21 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  /*
+   * 오른쪽 끝에 붙는 입력 규칙 표시.
+   * ⚠️ `flex-shrink: 0` — 이름이 길어지면 이쪽이 먼저 찌그러져 `# >` 가 `#…` 이 된다.
+   * 줄이는 쪽은 위 `.slash-label`(말줄임 처리가 되어 있다)이어야 한다.
+   */
+  .slash-shortcut {
+    flex-shrink: 0;
+    margin-left: auto;
+    padding-left: 8px;
+    font-size: 11px;
+    font-weight: 400;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    color: var(--muted-foreground);
+    opacity: 0.75;
+    white-space: pre;
+  }
 </style>

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

@@ -8,9 +8,18 @@ type $$ComponentProps = {
     onClose: () => void;
     onPdfUpload?: () => void;
     onFileUpload?: () => void;
+    /**
+     * 이미지 넣기 — 툴바의 `이미지` 와 **같은 모달**을 연다(에디터가 띄운다).
+     * 없으면 아래 항목의 기본 동작(`window.prompt`)으로 떨어진다.
+     */
+    onImagePick?: () => void;
     onPromptLink?: PromptHandler;
-    onPromptImage?: PromptHandler;
     onPromptMbus?: PromptHandler;
+    /**
+     * 영상 URL 프롬프트. 없으면 아래 항목의 `window.prompt` 로 떨어지는데, 그건 브라우저
+     * 기본 대화상자라 화면이 멈추고 앱과 모양이 따로 논다(사용자 지적).
+     */
+    onPromptVideo?: PromptHandler;
 };
 declare const SlashCommandMenu: Component<$$ComponentProps, {}, "">;
 type SlashCommandMenu = ReturnType<typeof SlashCommandMenu>;