@teriusu/rich-editor 0.10.8 → 0.11.0

package/dist/extensions/CardBlock.js

@@ -1,5 +1,6 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { attachResize } from "../utils/resize";
+import { getEditorTranslator } from "../i18n";
 /**
  * 카드 블록 — 본문 중간에 넣는 **배경 있는 상자**.
  *
@@ -96,6 +97,7 @@ export const CardBlock = Node.create({
     },
     addNodeView() {
         return ({ node, editor, getPos }) => {
+            const t = getEditorTranslator(editor);
             let currentNode = node;
             let detachResize = null;
             const dom = document.createElement("div");
@@ -145,7 +147,7 @@ export const CardBlock = Node.create({
                 titleInput = document.createElement("input");
                 titleInput.type = "text";
                 titleInput.className = "hce-card-title-input";
-                titleInput.placeholder = "카드 제목";
+                titleInput.placeholder = t("cardTitlePlaceholder");
                 titleInput.contentEditable = "false";
                 // ProseMirror 가 입력칸의 키/포인터를 가져가지 않도록 막는다.
                 titleInput.setAttribute("data-card-control", "");
@@ -158,7 +160,7 @@ export const CardBlock = Node.create({
                 pick.className = "hce-card-bg-button";
                 pick.setAttribute("data-card-control", "");
                 pick.contentEditable = "false";
-                pick.textContent = "배경 변경";
+                pick.textContent = t("cardChangeBackground");
                 pick.addEventListener("click", async (e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -171,7 +173,7 @@ export const CardBlock = Node.create({
                     const current = String(currentNode.attrs.background ?? "");
                     const next = prompt
                         ? await prompt(current)
-                        : window.prompt("카드 배경 (CSS background 값)", current);
+                        : window.prompt(t("cardBackgroundPrompt"), current);
                     if (next == null)
                         return;
                     setAttr({ background: next });
@@ -186,7 +188,7 @@ export const CardBlock = Node.create({
                     attr: "height",
                     min: MIN_HEIGHT,
                     max: MAX_HEIGHT,
-                    label: "카드 높이 조절",
+                    label: t("cardResizeHeight"),
                     // 원본과 같은 저장 형식 — 단위 없는 숫자 문자열.
                     format: (v) => String(Math.round(v))
                 });

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

@@ -1 +1 @@
-{"version":3,"file":"FileAttachment.d.ts","sourceRoot":"","sources":["../../src/extensions/FileAttachment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC9E,MAAM,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,cAAc,EAAE;YACd,iBAAiB,EAAE,CAAC,KAAK,EAAE;gBACzB,GAAG,CAAC,EAAE,MAAM,CAAC;gBACb,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,IAAI,EAAE,MAAM,CAAC;gBACb,IAAI,CAAC,EAAE,MAAM,CAAC;aACf,KAAK,UAAU,CAAC;SAClB,CAAC;KACH;CACF;AAkFD,eAAO,MAAM,cAAc,kCAyNzB,CAAC"}
+{"version":3,"file":"FileAttachment.d.ts","sourceRoot":"","sources":["../../src/extensions/FileAttachment.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAGrD,MAAM,MAAM,iBAAiB,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC9E,MAAM,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAE1E,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,cAAc,EAAE;YACd,iBAAiB,EAAE,CAAC,KAAK,EAAE;gBACzB,GAAG,CAAC,EAAE,MAAM,CAAC;gBACb,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,IAAI,EAAE,MAAM,CAAC;gBACb,IAAI,CAAC,EAAE,MAAM,CAAC;aACf,KAAK,UAAU,CAAC;SAClB,CAAC;KACH;CACF;AAkFD,eAAO,MAAM,cAAc,kCAyNzB,CAAC"}

package/dist/extensions/FileAttachment.js

@@ -1,4 +1,5 @@
 import { Node, mergeAttributes } from "@tiptap/core";
+import { getEditorTranslator } from "../i18n";
 function formatFileSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -222,7 +223,7 @@ export const FileAttachment = Node.create({
                 // resolver가 있으면 이름/크기 메타데이터를 채운다.
                 const resolver = editor.storage.fileAttachment?.resolver;
                 if (resolver) {
-                    sizeEl.textContent = "loading...";
+                    sizeEl.textContent = getEditorTranslator(editor)("fileSizeLoading");
                     resolver(node.attrs.fileId)
                         .then((result) => {
                         resolvedSrc = result.src;

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

@@ -1 +1 @@
-{"version":3,"file":"FixedDetails.d.ts","sourceRoot":"","sources":["../../src/extensions/FixedDetails.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,YAAY,sFAyGvB,CAAC"}
+{"version":3,"file":"FixedDetails.d.ts","sourceRoot":"","sources":["../../src/extensions/FixedDetails.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,sFA0GvB,CAAC"}

package/dist/extensions/FixedDetails.js

@@ -9,6 +9,7 @@
  */
 import { Details } from "@tiptap/extension-details";
 import { mergeAttributes } from "@tiptap/core";
+import { getEditorTranslator } from "../i18n";
 export const FixedDetails = Details.extend({
     addOptions() {
         return {
@@ -19,6 +20,7 @@ export const FixedDetails = Details.extend({
     },
     addNodeView() {
         return ({ editor, getPos, node: initialNode, HTMLAttributes }) => {
+            const t = getEditorTranslator(editor);
             let currentNode = initialNode;
             const dom = document.createElement("div");
             const attributes = mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
@@ -28,7 +30,7 @@ export const FixedDetails = Details.extend({
             // 토글 버튼
             const toggle = document.createElement("button");
             toggle.type = "button";
-            toggle.setAttribute("aria-label", "Expand details content");
+            toggle.setAttribute("aria-label", t("detailsExpand"));
             dom.append(toggle);
             // 콘텐츠 래퍼
             const content = document.createElement("div");
@@ -37,11 +39,11 @@ export const FixedDetails = Details.extend({
             const applyState = () => {
                 if (isOpen) {
                     dom.classList.add(this.options.openClassName);
-                    toggle.setAttribute("aria-label", "Collapse details content");
+                    toggle.setAttribute("aria-label", t("detailsCollapse"));
                 }
                 else {
                     dom.classList.remove(this.options.openClassName);
-                    toggle.setAttribute("aria-label", "Expand details content");
+                    toggle.setAttribute("aria-label", t("detailsExpand"));
                 }
                 const detailsContent = content.querySelector(':scope > div[data-type="detailsContent"]');
                 if (detailsContent) {

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

@@ -1 +1 @@
-{"version":3,"file":"LegacyBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/LegacyBlock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAiB,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/E,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,iBAAiB,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;AAElF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACxC,mDAAmD;IACnD,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,+CAA+C;IAC/C,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf;AAED,iDAAiD;AACjD,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;AAClE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,wBAAwB,KAAK,uBAAuB,CAAC;AAEjG,MAAM,WAAW,kBAAkB;IAClC;;;;;OAKG;IACH,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACrC;AAWD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,iBAAiB,CAqB5D;AA6DD,eAAO,MAAM,WAAW,+BA6GtB,CAAC"}
+{"version":3,"file":"LegacyBlock.d.ts","sourceRoot":"","sources":["../../src/extensions/LegacyBlock.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,IAAI,EAAE,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAEjD,OAAO,KAAK,EAAiB,IAAI,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAE/E,mEAAmE;AACnE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,iBAAiB,CAAC;AACpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;AAElF,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACxC,mDAAmD;IACnD,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,+CAA+C;IAC/C,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC/B,IAAI,EAAE,eAAe,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;CACf;AAED,iDAAiD;AACjD,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC;AAClE,MAAM,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,wBAAwB,KAAK,uBAAuB,CAAC;AAEjG,MAAM,WAAW,kBAAkB;IAClC;;;;;OAKG;IACH,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAC;CACrC;AAWD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,EAAE,OAAO,GAAG,iBAAiB,CAqB5D;AA6DD,eAAO,MAAM,WAAW,+BA8GtB,CAAC"}

package/dist/extensions/LegacyBlock.js

@@ -21,6 +21,7 @@
  * 같은 경로(`getHTML()`)로 만들어져 이미 `=""` 꼴이라 실사용에서는 어긋나지 않는다.
  */
 import { Node } from "@tiptap/core";
+import { getEditorTranslator } from "../i18n";
 /** 되쓸 이유가 없는(그리고 되쓰면 위험한) 것들. prod 저장본에는 원래 들어 있지 않다. */
 const SKIP_TAGS = new Set(["script", "style", "noscript", "template"]);
 /** `Columns`/`Column` 의 같은 셀렉터보다 먼저 잡혀야 한다(기본 50). */
@@ -96,10 +97,10 @@ function detectKind(el) {
         return "columns";
     return "iframe";
 }
-const KIND_LABEL = {
-    youtube: "유튜브 영상",
-    iframe: "임베드",
-    columns: "단 나누기"
+const KIND_LABEL_KEY = {
+    youtube: "legacyYoutube",
+    iframe: "legacyIframe",
+    columns: "legacyColumns"
 };
 /** 자리표시자의 "새 탭에서 보기" 주소. 없으면 링크를 안 만든다. */
 function outboundUrl(kind, spec) {
@@ -156,6 +157,7 @@ export const LegacyBlock = Node.create({
     },
     addNodeView() {
         return ({ node, editor }) => {
+            const t = getEditorTranslator(editor);
             const kind = (node.attrs.kind ?? "iframe");
             const spec = node.attrs.spec;
             const dom = document.createElement("div");
@@ -189,7 +191,7 @@ export const LegacyBlock = Node.create({
             dom.style.cssText =
                 "margin:8px 0;padding:16px;border:1px dashed rgba(120,130,150,0.5);border-radius:8px;background:rgba(120,130,150,0.06);box-sizing:border-box;max-width:100%;display:flex;flex-direction:column;gap:6px;align-items:flex-start;";
             const label = document.createElement("span");
-            label.textContent = `${KIND_LABEL[kind]} (옛 형식 · 편집 불가)`;
+            label.textContent = t("legacyNotice", { kind: t(KIND_LABEL_KEY[kind]) });
             label.style.cssText = "font-size:13px;font-weight:600;opacity:0.8;";
             dom.appendChild(label);
             /*
@@ -209,7 +211,7 @@ export const LegacyBlock = Node.create({
                 open.href = url;
                 open.target = "_blank";
                 open.rel = "noopener noreferrer";
-                open.textContent = "새 탭에서 보기";
+                open.textContent = t("openInNewTab");
                 open.style.cssText = "font-size:13px;font-weight:600;text-decoration:underline;";
                 dom.appendChild(open);
             }

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

@@ -1 +1 @@
-{"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"}
+{"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;AAM7E,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;AAoZD,eAAO,MAAM,UAAU,wBA4GrB,CAAC;AAEH,eAAO,MAAM,WAAW,wBA8EtB,CAAC"}

package/dist/extensions/Math.js

@@ -34,6 +34,7 @@ import { InputRule, Node, mergeAttributes } from "@tiptap/core";
 import { Fragment, Slice } from "@tiptap/pm/model";
 import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
 import katex from "katex";
+import { getEditorTranslator } from "../i18n";
 const INLINE_NAME = "math_inline";
 const DISPLAY_NAME = "math_display";
 /**
@@ -97,7 +98,8 @@ async function askMath(editor, current, displayMode) {
     const prompt = getPrompt(editor);
     if (prompt)
         return prompt(current, displayMode);
-    return window.prompt(displayMode ? "수식 (LaTeX)" : "인라인 수식 (LaTeX)", current);
+    const t = getEditorTranslator(editor);
+    return window.prompt(t(displayMode ? "mathPromptDisplay" : "mathPromptInline"), current);
 }
 /** 프롬프트를 띄워 새 수식을 넣는다. 취소·빈 입력이면 아무것도 하지 않는다. */
 async function promptInsert(editor, displayMode) {
@@ -159,7 +161,8 @@ function buildNodeView(displayMode) {
             const latex = current.textContent.trim();
             if (!latex) {
                 dom.classList.add("empty-math");
-                dom.innerHTML = `<span class="math-placeholder">${displayMode ? "수식 입력" : "수식"}</span>`;
+                const t = getEditorTranslator(editor);
+                dom.innerHTML = `<span class="math-placeholder">${t(displayMode ? "mathEmpty" : "math")}</span>`;
                 return;
             }
             dom.classList.remove("empty-math");

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

@@ -1 +1 @@
-{"version":3,"file":"MbusVideo.d.ts","sourceRoot":"","sources":["../../src/extensions/MbusVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAGrD,MAAM,WAAW,gBAAgB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,SAAS,EAAE;YACV,YAAY,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;SACrE,CAAC;KACF;CACD;AAED,eAAO,MAAM,SAAS,6BAwHpB,CAAC"}
+{"version":3,"file":"MbusVideo.d.ts","sourceRoot":"","sources":["../../src/extensions/MbusVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,cAAc,CAAC;AAUrD,MAAM,WAAW,gBAAgB;IAChC,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACxC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC7B,UAAU,QAAQ,CAAC,UAAU;QAC5B,SAAS,EAAE;YACV,YAAY,EAAE,CAAC,KAAK,EAAE;gBAAE,GAAG,EAAE,MAAM,CAAC;gBAAC,KAAK,CAAC,EAAE,MAAM,CAAA;aAAE,KAAK,UAAU,CAAC;SACrE,CAAC;KACF;CACD;AAED,eAAO,MAAM,SAAS,6BAmLpB,CAAC"}

package/dist/extensions/MbusVideo.js

@@ -1,5 +1,7 @@
 import { Node, mergeAttributes } from "@tiptap/core";
 import { attachResize } from "../utils/resize";
+import { getEditorTranslator } from "../i18n";
+import { mediaRatioCss, normalizeMediaAlign, normalizeMediaHeight, normalizeMediaRatio } from "../utils/media-size";
 export const MbusVideo = Node.create({
     name: "mbusVideo",
     group: "block",
@@ -8,10 +10,17 @@ export const MbusVideo = Node.create({
     addOptions() {
         return { HTMLAttributes: {} };
     },
+    /*
+     * 크기·정렬 저장 규칙은 `VideoEmbed` 와 같다 — 정본은 `data-*` 속성, `style` 은
+     * 폭·정렬의 거울. 이름만 `data-mbus-*` 로 다르다(저장 형식이 곧 계약이라 섞지 않는다).
+     */
     addAttributes() {
         return {
             src: { default: null },
-            width: { default: null }
+            width: { default: null },
+            height: { default: null },
+            ratio: { default: null },
+            align: { default: null }
         };
     },
     parseHTML() {
@@ -22,7 +31,10 @@ export const MbusVideo = Node.create({
                     const el = dom;
                     return {
                         src: el.getAttribute("data-mbus-src"),
-                        width: el.getAttribute("data-mbus-width") || el.style?.width || null
+                        width: el.getAttribute("data-mbus-width") || el.style?.width || null,
+                        height: normalizeMediaHeight(el.getAttribute("data-mbus-height")),
+                        ratio: normalizeMediaRatio(el.getAttribute("data-mbus-ratio")),
+                        align: normalizeMediaAlign(el.getAttribute("data-mbus-align"))
                     };
                 }
             }
@@ -32,27 +44,61 @@ export const MbusVideo = Node.create({
         const attrs = {
             "data-mbus-src": HTMLAttributes.src
         };
+        const styles = [];
         if (HTMLAttributes.width) {
             attrs["data-mbus-width"] = HTMLAttributes.width;
-            attrs["style"] = `width: ${HTMLAttributes.width}`;
+            styles.push(`width: ${HTMLAttributes.width}`);
         }
+        const height = normalizeMediaHeight(HTMLAttributes.height);
+        if (height != null)
+            attrs["data-mbus-height"] = String(height);
+        const ratio = normalizeMediaRatio(HTMLAttributes.ratio);
+        if (height == null && ratio)
+            attrs["data-mbus-ratio"] = ratio;
+        const align = normalizeMediaAlign(HTMLAttributes.align);
+        if (align) {
+            attrs["data-mbus-align"] = align;
+            if (align === "center")
+                styles.push("margin-left: auto", "margin-right: auto");
+            else if (align === "right")
+                styles.push("margin-left: auto");
+        }
+        if (styles.length)
+            attrs["style"] = styles.join("; ");
         return ["div", mergeAttributes(this.options.HTMLAttributes, attrs)];
     },
     addNodeView() {
         return ({ node, editor, getPos }) => {
+            const t = getEditorTranslator(editor);
             // 리사이즈가 attrs 를 되쓰므로 **항상 최신 노드**여야 한다(복붙 시절의 stale 버그).
             let currentNode = node;
             let detachResize = null;
+            let detachHeightResize = null;
             const dom = document.createElement("div");
             dom.setAttribute("data-type", "mbusVideo");
             dom.setAttribute("data-node-view-wrapper", "");
             dom.style.cssText = "margin:8px 0;position:relative;box-sizing:border-box;max-width:100%;";
-            if (node.attrs.width)
-                dom.style.width = node.attrs.width;
+            /* `padding-top:56.25%` → `aspect-ratio` 로 바꾼 이유는 `VideoEmbed` 주석 참조. */
             const aspect = document.createElement("div");
             aspect.style.cssText =
-                "position:relative;width:100%;padding-top:56.25%;background:#0b1020;border-radius:8px;overflow:hidden;";
+                "position:relative;width:100%;aspect-ratio:16 / 9;background:#0b1020;border-radius:8px;overflow:hidden;";
             dom.appendChild(aspect);
+            const applyLayout = (attrs) => {
+                dom.style.width = typeof attrs.width === "string" && attrs.width ? attrs.width : "";
+                const height = normalizeMediaHeight(attrs.height);
+                if (height != null) {
+                    aspect.style.height = `${height}px`;
+                    aspect.style.removeProperty("aspect-ratio");
+                }
+                else {
+                    aspect.style.removeProperty("height");
+                    aspect.style.aspectRatio = mediaRatioCss(attrs.ratio) ?? "16 / 9";
+                }
+                const align = normalizeMediaAlign(attrs.align);
+                dom.style.marginLeft = align === "center" || align === "right" ? "auto" : "";
+                dom.style.marginRight = align === "center" ? "auto" : "";
+            };
+            applyLayout(node.attrs);
             if (node.attrs.src) {
                 const iframe = document.createElement("iframe");
                 iframe.src = node.attrs.src;
@@ -82,7 +128,25 @@ export const MbusVideo = Node.create({
                     getPos: () => (typeof getPos === "function" ? getPos() : undefined),
                     getNode: () => currentNode,
                     axis: "x",
-                    label: "영상 너비 조절"
+                    label: t("videoResizeWidth")
+                });
+                /* 높이 드래그 — 크기는 비율 박스, 손잡이는 래퍼(`VideoEmbed` 주석 참조). */
+                detachHeightResize = attachResize({
+                    dom: aspect,
+                    handleParent: dom,
+                    editor,
+                    getPos: () => (typeof getPos === "function" ? getPos() : undefined),
+                    getNode: () => currentNode,
+                    axis: "y",
+                    attr: "height",
+                    min: 120,
+                    max: 1600,
+                    label: t("videoResizeHeight"),
+                    buildAttrs: (current, value) => ({
+                        ...current.attrs,
+                        height: String(Math.round(value)),
+                        ratio: null
+                    })
                 });
             }
             return {
@@ -90,13 +154,13 @@ export const MbusVideo = Node.create({
                 update: (updated) => {
                     if (updated.type !== currentNode.type)
                         return false;
-                    const w = updated.attrs.width;
-                    dom.style.width = w || "";
+                    applyLayout(updated.attrs);
                     currentNode = updated;
                     return true;
                 },
                 destroy: () => {
                     detachResize?.();
+                    detachHeightResize?.();
                 }
             };
         };

package/dist/extensions/MediaToolbar.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 미디어 리사이즈 툴바 — 미디어 블록을 **선택하면** 그 아래에 뜨는 프리셋 칩 줄.
+ * (main 정올 `plugin/resize/index.ts` 1343줄 참조 — 의미 있는 로직만 재작성.)
+ *
+ * main 에서 가져온 것: 비율 프리셋(16:9·4:3·1:1), 좌/중/우 정렬, 폭 프리셋(100%·50%),
+ * "비율을 고르면 고정 높이를 풀고, 높이를 드래그하면 비율을 푼다" 는 배타 규칙.
+ * main 에서 **뺀 것**: hover 앵커 + 열고 닫는 상태 기계(여기서는 선택 = 표시라 상태가
+ * 필요 없다), 손잡이 겸 토글 버튼(높이 드래그는 각 노드뷰의 `attachResize` 가 맡는다),
+ * 드래그 프록시, `data-resize-handler` 로 아무 노드나 끼워 주는 범용 attr 경로,
+ * 이미지 전용 rAF 위치 보정. 전부 "코드 크기 대비 얻는 것" 이 없어서다.
+ *
+ * UI 는 ProseMirror **widget decoration** 으로 세운다 — NodeView 안에 넣으면 노드마다
+ * 툴바 DOM 이 상주하지만, 데코레이션은 선택된 하나에만 붙었다 떨어진다.
+ *
+ * ⚠️ **편집 모드 전용.** `decorations`/`mousedown` 양쪽에서 `editor.isEditable` 을 보고,
+ * `TipTapEditor` 도 편집일 때만 이 확장을 싣는다(이중 안전).
+ *
+ * ⚠️ 크기·정렬은 전부 **노드 속성**으로 저장된다(각 노드의 `renderHTML`/`parseHTML` 이
+ * 왕복을 책임진다). 여기서는 `setNodeMarkup` 으로 속성만 바꾼다 — DOM 을 직접 만지면
+ * 저장본과 화면이 갈라진다.
+ */
+import { Extension } from "@tiptap/core";
+export interface MediaToolbarTypeConfig {
+    /** 비율 프리셋 칩(16:9 등)을 보여줄지. 비율 박스를 그리는 노드뷰에만 켠다. */
+    ratio?: boolean;
+    /** 좌/중/우 정렬 칩. */
+    align?: boolean;
+    /** 폭 프리셋 칩(100%·50%). `width` 속성이 CSS 크기 문자열인 노드에만 켠다. */
+    widthPresets?: boolean;
+}
+export interface MediaResizeToolbarOptions {
+    /** 노드 타입 이름 → 보여줄 칩 구성. */
+    types: Record<string, MediaToolbarTypeConfig>;
+}
+/**
+ * 칩 하나가 만드는 속성 변경. **순수 함수** — 테스트가 이걸 직접 두드린다.
+ * 이미 켜진 칩을 다시 누르면 해제(`null`)다. main 의 `Auto` 칩을 재클릭-해제로 접었다.
+ */
+export declare function applyMediaToolbarAction(attrs: Record<string, unknown>, action: string, value: string, config: MediaToolbarTypeConfig): Record<string, unknown> | null;
+export declare const MediaResizeToolbar: Extension<MediaResizeToolbarOptions, any>;
+//# sourceMappingURL=MediaToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaToolbar.d.ts","sourceRoot":"","sources":["../../src/extensions/MediaToolbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAOzC,MAAM,WAAW,sBAAsB;IACtC,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,yBAAyB;IACzC,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;CAC9C;AAsBD;;;GAGG;AACH,wBAAgB,uBAAuB,CACtC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,sBAAsB,GAC5B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAmBhC;AAuFD,eAAO,MAAM,kBAAkB,2CAiF7B,CAAC"}

package/dist/extensions/MediaToolbar.js

@@ -0,0 +1,196 @@
+/**
+ * 미디어 리사이즈 툴바 — 미디어 블록을 **선택하면** 그 아래에 뜨는 프리셋 칩 줄.
+ * (main 정올 `plugin/resize/index.ts` 1343줄 참조 — 의미 있는 로직만 재작성.)
+ *
+ * main 에서 가져온 것: 비율 프리셋(16:9·4:3·1:1), 좌/중/우 정렬, 폭 프리셋(100%·50%),
+ * "비율을 고르면 고정 높이를 풀고, 높이를 드래그하면 비율을 푼다" 는 배타 규칙.
+ * main 에서 **뺀 것**: hover 앵커 + 열고 닫는 상태 기계(여기서는 선택 = 표시라 상태가
+ * 필요 없다), 손잡이 겸 토글 버튼(높이 드래그는 각 노드뷰의 `attachResize` 가 맡는다),
+ * 드래그 프록시, `data-resize-handler` 로 아무 노드나 끼워 주는 범용 attr 경로,
+ * 이미지 전용 rAF 위치 보정. 전부 "코드 크기 대비 얻는 것" 이 없어서다.
+ *
+ * UI 는 ProseMirror **widget decoration** 으로 세운다 — NodeView 안에 넣으면 노드마다
+ * 툴바 DOM 이 상주하지만, 데코레이션은 선택된 하나에만 붙었다 떨어진다.
+ *
+ * ⚠️ **편집 모드 전용.** `decorations`/`mousedown` 양쪽에서 `editor.isEditable` 을 보고,
+ * `TipTapEditor` 도 편집일 때만 이 확장을 싣는다(이중 안전).
+ *
+ * ⚠️ 크기·정렬은 전부 **노드 속성**으로 저장된다(각 노드의 `renderHTML`/`parseHTML` 이
+ * 왕복을 책임진다). 여기서는 `setNodeMarkup` 으로 속성만 바꾼다 — DOM 을 직접 만지면
+ * 저장본과 화면이 갈라진다.
+ */
+import { Extension } from "@tiptap/core";
+import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { normalizeMediaAlign, normalizeMediaRatio } from "../utils/media-size";
+import { getEditorTranslator } from "../i18n";
+const RATIO_PRESETS = ["16:9", "4:3", "1:1"];
+const ALIGN_PRESETS = [
+    { value: "left", labelKey: "alignLeftShort" },
+    { value: "center", labelKey: "alignCenterShort" },
+    { value: "right", labelKey: "alignRightShort" }
+];
+const WIDTH_PRESETS = ["100%", "50%"];
+/*
+ * ⚠️ 이미지의 `width` 는 단위 없는 px 정수 계약이라(`ResizableImage` 주석) `%` 프리셋을
+ * 주면 파싱에서 조용히 버려진다 — 그래서 이미지는 `widthPresets` 를 켜지 않는다.
+ * `tiptapMidibus`(정올 prod 강의영상)는 main 과 같게 높이 드래그만 갖고 툴바는 없다 —
+ * 저장이 `rawAttrs` 바이트 보존이라 칩이 만드는 속성 변경과 궁합이 나쁘다.
+ */
+const DEFAULT_TYPES = {
+    image: { align: true },
+    videoEmbed: { ratio: true, align: true, widthPresets: true },
+    mbusVideo: { ratio: true, align: true, widthPresets: true }
+};
+/**
+ * 칩 하나가 만드는 속성 변경. **순수 함수** — 테스트가 이걸 직접 두드린다.
+ * 이미 켜진 칩을 다시 누르면 해제(`null`)다. main 의 `Auto` 칩을 재클릭-해제로 접었다.
+ */
+export function applyMediaToolbarAction(attrs, action, value, config) {
+    if (action === "ratio" && config.ratio) {
+        const ratio = normalizeMediaRatio(value);
+        if (!ratio)
+            return null;
+        const current = normalizeMediaRatio(attrs.ratio);
+        /* 비율을 고르면 고정 높이를 푼다 — 높이가 남아 있으면 비율이 안 먹는다(노드뷰 규칙). */
+        return { ...attrs, ratio: ratio === current ? null : ratio, height: null };
+    }
+    if (action === "align" && config.align) {
+        const align = normalizeMediaAlign(value);
+        if (!align)
+            return null;
+        const current = normalizeMediaAlign(attrs.align);
+        return { ...attrs, align: align === current ? null : align };
+    }
+    if (action === "width" && config.widthPresets) {
+        if (!WIDTH_PRESETS.includes(value))
+            return null;
+        return { ...attrs, width: attrs.width === value ? null : value };
+    }
+    return null;
+}
+function chip(pos, action, value, label, active) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "hce-media-toolbar-chip";
+    button.dataset.pos = String(pos);
+    button.dataset.action = action;
+    button.dataset.value = value;
+    button.textContent = label;
+    button.setAttribute("aria-pressed", active ? "true" : "false");
+    return button;
+}
+function separator() {
+    const span = document.createElement("span");
+    span.className = "hce-media-toolbar-separator";
+    span.setAttribute("aria-hidden", "true");
+    return span;
+}
+function buildToolbar(pos, node, config, t) {
+    /* 높이 0 앵커 — 문서 흐름을 밀지 않고 노드 바로 아래에 띄우기 위한 기준점. */
+    const anchor = document.createElement("div");
+    anchor.className = "hce-media-toolbar-anchor";
+    anchor.contentEditable = "false";
+    const toolbar = document.createElement("div");
+    toolbar.className = "hce-media-toolbar";
+    toolbar.setAttribute("role", "toolbar");
+    toolbar.setAttribute("aria-label", t("mediaToolbar"));
+    anchor.appendChild(toolbar);
+    const groups = [];
+    if (config.ratio) {
+        const currentRatio = normalizeMediaRatio(node.attrs.ratio);
+        groups.push(RATIO_PRESETS.map((preset) => chip(pos, "ratio", preset, preset, currentRatio === preset)));
+    }
+    if (config.align) {
+        const currentAlign = normalizeMediaAlign(node.attrs.align);
+        groups.push(ALIGN_PRESETS.map((preset) => chip(pos, "align", preset.value, t(preset.labelKey), currentAlign === preset.value)));
+    }
+    if (config.widthPresets) {
+        groups.push(WIDTH_PRESETS.map((preset) => chip(pos, "width", preset, preset, node.attrs.width === preset)));
+    }
+    groups.forEach((buttons, index) => {
+        if (index > 0)
+            toolbar.appendChild(separator());
+        buttons.forEach((button) => toolbar.appendChild(button));
+    });
+    return anchor;
+}
+/** 속성이 바뀌면 위젯을 다시 그리게 하는 키 — 같은 키면 ProseMirror 가 DOM 을 재사용한다. */
+function toolbarKey(pos, node) {
+    return `media-toolbar-${pos}-${node.type.name}-${String(node.attrs.width ?? "")}-${String(node.attrs.height ?? "")}-${String(node.attrs.ratio ?? "")}-${String(node.attrs.align ?? "")}`;
+}
+export const MediaResizeToolbar = Extension.create({
+    name: "mediaResizeToolbar",
+    addOptions() {
+        return { types: DEFAULT_TYPES };
+    },
+    addProseMirrorPlugins() {
+        const getConfig = (node) => this.options.types[node.type.name] ?? null;
+        return [
+            new Plugin({
+                key: new PluginKey("mediaResizeToolbar"),
+                props: {
+                    decorations: (state) => {
+                        /* 읽기 전용에는 절대 안 뜬다. */
+                        if (!this.editor.isEditable)
+                            return DecorationSet.empty;
+                        const { selection } = state;
+                        if (!(selection instanceof NodeSelection))
+                            return DecorationSet.empty;
+                        const config = getConfig(selection.node);
+                        if (!config)
+                            return DecorationSet.empty;
+                        const pos = selection.from;
+                        const node = selection.node;
+                        return DecorationSet.create(state.doc, [
+                            Decoration.widget(pos + node.nodeSize, () => buildToolbar(pos, node, config, getEditorTranslator(this.editor)), { side: 1, key: toolbarKey(pos, node) })
+                        ]);
+                    },
+                    handleDOMEvents: {
+                        /*
+                         * click 이 아니라 mousedown 이다 — 에디터가 mousedown 에서 선택을
+                         * 옮기면 데코레이션이 사라져 click 이 영영 도착하지 않는다.
+                         */
+                        mousedown: (view, event) => {
+                            if (!this.editor.isEditable)
+                                return false;
+                            if (!(event.target instanceof HTMLElement))
+                                return false;
+                            const button = event.target.closest(".hce-media-toolbar-chip");
+                            if (!button)
+                                return false;
+                            event.preventDefault();
+                            event.stopPropagation();
+                            const pos = Number.parseInt(button.dataset.pos || "", 10);
+                            if (!Number.isFinite(pos))
+                                return true;
+                            const node = view.state.doc.nodeAt(pos);
+                            if (!node)
+                                return true;
+                            const config = getConfig(node);
+                            if (!config)
+                                return true;
+                            const nextAttrs = applyMediaToolbarAction(node.attrs, button.dataset.action || "", button.dataset.value || "", config);
+                            if (!nextAttrs)
+                                return true;
+                            const tr = view.state.tr.setNodeMarkup(pos, undefined, nextAttrs);
+                            /* 선택을 유지해야 툴바가 새 상태로 다시 그려진다. */
+                            const nodeSelection = (() => {
+                                try {
+                                    return NodeSelection.create(tr.doc, pos);
+                                }
+                                catch {
+                                    return null;
+                                }
+                            })();
+                            if (nodeSelection)
+                                tr.setSelection(nodeSelection);
+                            view.dispatch(tr);
+                            return true;
+                        }
+                    }
+                }
+            })
+        ];
+    }
+});

package/dist/extensions/MediaToolbar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MediaToolbar.test.d.ts.map

package/dist/extensions/MediaToolbar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaToolbar.test.d.ts","sourceRoot":"","sources":["../../src/extensions/MediaToolbar.test.ts"],"names":[],"mappings":""}