@ssobig/writer-cli 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssobig/writer-cli",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Official agent CLI for SSOBIG WRITER",
   "type": "commonjs",
   "license": "UNLICENSED",

package/templates/mystery-v1/authoring-view-preference.js

@@ -7,8 +7,31 @@
 
   const STORAGE_KEY = "somi-workbench-authoring-view";
   const DEFAULT_VIEW = "preview";
-  const VIEWS = Object.freeze(["input", "preview"]);
+  const VIEWS = Object.freeze(["input", "preview", "list"]);
   const STORAGE_VERSION = 1;
+  const PANEL_WIDTH_KEY = "somi-workbench-panel-width";
+  const PANEL_TEMPLATES = new Set(["ssobig.basic", "ssobig.progress", "ssobig.common", "ssobig.character", "ssobig.ending", "ssobig.author-notes"]);
+
+  function normalizePanelWidth(value) { return value === "wide" ? "wide" : "default"; }
+  function supportsPanelWidth(templateId) { return PANEL_TEMPLATES.has(templateId); }
+  function readPanelWidth(storage = deviceStorage()) {
+    try { return normalizePanelWidth(storage?.getItem(PANEL_WIDTH_KEY)); }
+    catch (_) { return "default"; }
+  }
+  function writePanelWidth(value, storage = deviceStorage()) {
+    const width = normalizePanelWidth(value);
+    try { storage?.setItem(PANEL_WIDTH_KEY, width); }
+    catch (_) { /* 보기 설정을 저장할 수 없어도 현재 화면에는 적용한다. */ }
+    return width;
+  }
+  function panelWidthControl(value) {
+    const width = normalizePanelWidth(value);
+    const options = [
+      ["default", "기본", "M2 12h7m-4-4 4 4-4 4M22 12h-7m4-4-4 4 4 4"],
+      ["wide", "와이드", "M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4"]
+    ];
+    return `<div class="panel-width-buttons" role="group" aria-label="패널 폭">${options.map(([id, label, icon]) => `<button type="button" data-panel-width="${id}" aria-pressed="${width === id}"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="${icon}"/></svg><span>${label}</span></button>`).join("")}</div>`;
+  }
 
   function normalize(value) {
     return VIEWS.includes(value) ? value : DEFAULT_VIEW;
@@ -47,5 +70,5 @@
     return normalized;
   }
 
-  return Object.freeze({ STORAGE_KEY, STORAGE_VERSION, DEFAULT_VIEW, VIEWS, normalize, read, write });
+  return Object.freeze({ STORAGE_KEY, STORAGE_VERSION, DEFAULT_VIEW, VIEWS, normalize, read, write, PANEL_WIDTH_KEY, normalizePanelWidth, supportsPanelWidth, readPanelWidth, writePanelWidth, panelWidthControl });
 });

package/templates/mystery-v1/component-asset-operations.js

@@ -28,11 +28,12 @@
     const clueInstance = active.find(instance => instance.templateId === "ssobig.clues");
     const clueData = dataFor(clueInstance) || clueInstance?.data;
     for (const [index, clue] of (Array.isArray(clueData?.clues) ? clueData.clues : []).entries()) {
-      const assetId = clueAssetId(clue);
-      if (!assetId) continue;
-      if (!result[assetId]) result[assetId] = [];
       const label = clue.name || clue.title || clue.id || index + 1;
-      result[assetId].push(`단서 · ${label}`);
+      for (const [side, sideLabel] of [["back", "단서 이미지(앞면)"], ["front", "단서 이미지(뒷면)"]]) {
+        const assetId = clueAssetId(clue, side);
+        if (!assetId) continue;
+        (result[assetId] ||= []).push(`단서 · ${label} · ${sideLabel}`);
+      }
     }
     for (const instance of active) {
       if (instance.templateId === "ssobig.assets") continue;

package/templates/mystery-v1/component-catalog-contract.js

@@ -56,7 +56,7 @@
       guide: guide("모든 참가자가 공통으로 읽는 규칙과 배경 정보를 작성합니다.", "프롤로그, 조사 규칙, 사건의 전말과 에필로그를 본문과 펼쳐보기로 구성합니다.", "문서의 제목·본문·노출 순서와 문서별 펼쳐보기 항목을 편집합니다.", "integrated", "공통 문서는 펼쳐보기 항목을 포함해 모든 캐릭터 관점의 통합 미리보기에 함께 표시됩니다.", ["ssobig.progress", "ssobig.character", "ssobig.ending"], "공통 문서 제작 화면 예시"),
       defaultData: { documents: [], deletedDocumentIds: [] },
       view: view("ssobig.view.common-workbench", "common-workbench", "공통정보 작업 화면", "ssobig.common", [
-        binding("primary", "ssobig.common", "read_write")
+        binding("primary", "ssobig.common", "read_write"), binding("assets", "ssobig.assets", "read_write")
       ]),
       importProfiles: [IMPORT_PROFILE]
     },
@@ -125,7 +125,7 @@
       guide: guide("플레이어에게 공개하지 않을 제작·운영 메모를 보관합니다.", "복선 점검, 진행자 주의사항과 다음 수정 목록을 기록합니다.", "제목과 본문으로 된 자유 메모를 추가하고 정리합니다.", "authoring", "작가 전용 Component로 통합 미리보기에 표시되지 않습니다.", [], "작가노트 제작 화면 예시"),
       defaultData: { notes: [] },
       view: view("ssobig.view.author-notes-workbench", "author-notes-workbench", "작가노트 작업 화면", "ssobig.author-notes", [
-        binding("primary", "ssobig.author-notes", "read_write")
+        binding("primary", "ssobig.author-notes", "read_write"), binding("assets", "ssobig.assets", "read_write")
       ]),
       importProfiles: [IMPORT_PROFILE]
     },

package/templates/mystery-v1/component-renderers.js

@@ -88,7 +88,7 @@
   }
   function applyRendererView(markup, view) {
     return String(markup)
-      .replace(/data-renderer-view="(?:input|preview)"/, `data-renderer-view="${view}"`);
+      .replace(/data-renderer-view="(?:input|preview|list)"/, `data-renderer-view="${view}"`);
   }
   function renderAuthoring(instance, data, extra) {
     const renderer = resolve(instance);

package/templates/mystery-v1/markdown-document-model.js

@@ -34,6 +34,7 @@
 
   function parseLine(text, index = 0, from = 0) {
     const source = String(text ?? "");
+    const horizontalRule = /^ {0,3}-(?:[ \t]*-){2,}[ \t]*$/.test(source);
     const heading = source.match(/^( {0,3})(#{1,4})(?:[ \t]+)(.*)$/);
     const quote = source.match(/^( {0,3})>[ \t]?(.*)$/);
     const unordered = source.match(/^( {0,3})([-*])([ \t]+)(.*)$/);
@@ -46,6 +47,7 @@
     const body = unordered ? unordered[4] : ordered ? ordered[5] : "";
     const markerFrom = list ? indent.length : -1;
     const markerTo = list ? markerFrom + marker.length : -1;
+    const task = unordered ? body.match(/^\[([ xX])\](?:[ \t]+|$)/) : null;
 
     return Object.freeze({
       index,
@@ -53,6 +55,7 @@
       from,
       to: from + source.length,
       empty: !source.trim(),
+      horizontalRule,
       headingLevel: heading ? heading[2].length : 0,
       headingMarkerFrom: heading ? heading[1].length : -1,
       headingMarkerTo: heading ? source.length - heading[3].length : -1,
@@ -68,7 +71,10 @@
       listMarkerTo: markerTo,
       listPrefixTo: list ? markerTo + separator.length : -1,
       listSeparator: separator,
-      listBody: body,
+      listBody: task ? body.slice(task[0].length) : body,
+      taskChecked: task ? task[1].toLowerCase() === "x" : null,
+      taskStateFrom: task ? markerTo + separator.length + 1 : -1,
+      taskMarkerTo: task ? markerTo + separator.length + 3 : -1,
       listNumberText: ordered ? ordered[2] : "",
       listNumber: ordered ? Number.parseInt(ordered[2], 10) : null,
       listDelimiter: ordered ? ordered[3] : unordered ? unordered[2] : ""
@@ -360,6 +366,13 @@
         continue;
       }
 
+      if (line.horizontalRule) {
+        closeAll();
+        blocks.push({ type: "horizontalRule", lineIndex: line.index });
+        lineIndex += 1;
+        continue;
+      }
+
       if (line.quoteMarkerFrom >= 0) {
         closeParagraph();
         if (list?.items.length) {
@@ -408,6 +421,7 @@
           indent: line.listIndent,
           separator: line.listSeparator,
           body: line.listBody,
+          taskChecked: line.taskChecked,
           numberText: line.listNumberText,
           lineIndex: line.index,
           children: []

package/templates/mystery-v1/markdown-image-editor.js

@@ -18,6 +18,7 @@
     const doc = parent.ownerDocument;
     let view = null;
     let disposed = false;
+    let picker = null;
     let serial = Promise.resolve();
     const jobs = new Map();
     const fileInputs = new Set();
@@ -243,13 +244,24 @@
       input.click();
     }
     function chooseAsset() {
+      if (picker || disposed) return;
       const mark = { from: view.state.selection.main.head, to: view.state.selection.main.head };
       if (!allowed(mark)) return;
       const id = addBookmark(mark);
       const dialog = doc.createElement("dialog");
+      picker = dialog;
       dialog.className = "writer-md-image-picker";
-      dialog.setAttribute("aria-label", "에셋 이미지 선택");
-      const heading = doc.createElement("h3"); heading.textContent = "에셋에서 이미지 선택";
+      dialog.setAttribute("aria-label", "이미지 삽입");
+      if (assets?.upload) {
+        const find = button("이미지 찾기", () => {
+          const current = view.state.field(bookmarks).get(id);
+          if (current) chooseFiles(current);
+          dialog.close();
+        });
+        find.className = "writer-md-image-picker-upload";
+        dialog.append(find);
+      }
+      const heading = doc.createElement("h3"); heading.textContent = "에셋 리스트";
       dialog.append(heading);
       const list = doc.createElement("div"); list.className = "writer-md-image-picker-list";
       const entries = (assets.list?.() || []).filter(entry => IMAGE_TYPES.includes(entry.type));
@@ -262,9 +274,9 @@
         if (url) { const image = doc.createElement("img"); image.src = url; image.alt = ""; item.prepend(image); }
         list.append(item);
       });
-      if (!entries.length) list.textContent = "등록된 이미지가 없습니다. 이미지 업로드를 이용해주세요.";
+      if (!entries.length) list.textContent = "등록된 이미지가 없습니다. 위의 이미지 찾기로 추가해주세요.";
       dialog.append(list, button("닫기", () => dialog.close()));
-      dialog.addEventListener("close", () => { dialog.remove(); if (!disposed) { view.dispatch({ effects: bookmarkEffect.of({ id }) }); view.focus(); } }, { once: true });
+      dialog.addEventListener("close", () => { picker = null; dialog.remove(); if (!disposed) { view.dispatch({ effects: bookmarkEffect.of({ id }) }); view.focus(); onIdle?.(); } }, { once: true });
       parent.append(dialog);
       dialog.showModal();
     }
@@ -300,7 +312,9 @@
       };
     }
     return {
-      hasPending: () => jobs.size > 0 || fileInputs.size > 0,
+      chooseFiles,
+      chooseAsset,
+      hasPending: () => jobs.size > 0 || fileInputs.size > 0 || picker !== null,
       extensions: [bookmarks, decorations, events, cm.keymap.of([
         { key: "Backspace", run: protectBoundary(true) },
         { key: "Delete", run: protectBoundary(false) }
@@ -308,12 +322,14 @@
       attach(editor) {
         view = editor;
         if (assets?.upload) {
-          toolbar.append(button("이미지 업로드", () => chooseFiles()), button("에셋에서 선택", chooseAsset));
-          parent.prepend(toolbar);
+          if (!doc.defaultView.WriterMarkdownToolbar) {
+            toolbar.append(button("이미지 업로드", () => chooseFiles()), button("에셋에서 선택", chooseAsset));
+            parent.prepend(toolbar);
+          }
           parent.append(feedback);
         }
       },
-      destroy() { disposed = true; jobs.clear(); fileInputs.forEach(input => input.remove()); fileInputs.clear(); toolbar.remove(); feedback.remove(); parent.querySelectorAll(".writer-md-image-picker").forEach(dialog => dialog.remove()); }
+      destroy() { disposed = true; picker = null; jobs.clear(); fileInputs.forEach(input => input.remove()); fileInputs.clear(); toolbar.remove(); feedback.remove(); parent.querySelectorAll(".writer-md-image-picker").forEach(dialog => dialog.remove()); }
     };
   }
   return Object.freeze({ create, insertion });

package/templates/mystery-v1/markdown-live-editor.js

@@ -2,17 +2,22 @@
   const commonJs = typeof module === "object" && module.exports;
   const CodeMirror6 = commonJs ? null : root?.WriterCodeMirror6;
   const markdownDocumentModel = commonJs ? require("./markdown-document-model.js") : root?.WriterMarkdownDocumentModel;
-  const api = factory(CodeMirror6, markdownDocumentModel);
+  const toolbarApi = commonJs ? require("./markdown-toolbar.js") : root?.WriterMarkdownToolbar;
+  const api = factory(CodeMirror6, markdownDocumentModel, toolbarApi);
   if (commonJs) module.exports = api;
   if (root) root.WriterMarkdownLiveEditor = api;
-})(typeof globalThis !== "undefined" ? globalThis : this, function (CodeMirror6, markdownDocumentModel) {
+})(typeof globalThis !== "undefined" ? globalThis : this, function (CodeMirror6, markdownDocumentModel, toolbarApi) {
   "use strict";
 
   const INLINE_MARKERS = Object.freeze([
+    { marker: "<u>", close: "</u>", type: "underline" },
+    { marker: "***", type: "strong-emphasis" },
     { marker: "++", type: "brand" },
     { marker: "**", type: "strong" },
     { marker: "~~", type: "strikethrough" },
-    { marker: "==", type: "highlight" }
+    { marker: "==", type: "highlight" },
+    { marker: "*", type: "emphasis" },
+    { marker: "_", type: "emphasis" }
   ]);
   function isEscapedAt(source, index) {
     let backslashes = 0;
@@ -113,19 +118,25 @@
         continue;
       }
       const definition = INLINE_MARKERS.find(item => source.startsWith(item.marker, index));
-      if (!definition || (index > 0 && source[index - 1] === "\\")) {
+      if (definition?.marker === "_" && /[\p{L}\p{N}_]/u.test(source[index - 1] || "")) { index++; continue; }
+      if (definition?.marker === "*" && (source[index-1] === "*" || source[index+1] === "*")) { index++; continue; }
+      if (!definition || isEscapedAt(source, index)) {
         index += 1;
         continue;
       }
       const contentFrom = index + definition.marker.length;
-      const closeFrom = source.indexOf(definition.marker, contentFrom);
+      const closeMarker = definition.close || definition.marker;
+      let closeFrom = source.indexOf(closeMarker, contentFrom);
+      while (closeFrom >= 0 && (isEscapedAt(source, closeFrom) || (definition.marker === "_" && /[\p{L}\p{N}_]/u.test(source[closeFrom + 1] || "")))) {
+        closeFrom = source.indexOf(closeMarker, closeFrom + closeMarker.length);
+      }
       const crossesBlockBoundary = closeFrom > contentFrom && /\n[ \t]*\n/.test(source.slice(contentFrom, closeFrom));
       if (closeFrom <= contentFrom || crossesBlockBoundary || (closeFrom > 0 && source[closeFrom - 1] === "\\")) {
         index += definition.marker.length;
         continue;
       }
-      const to = closeFrom + definition.marker.length;
-      tokens.push({
+      const to = closeFrom + closeMarker.length;
+      const token = {
         type: definition.type,
         marker: definition.marker,
         from: index,
@@ -134,7 +145,11 @@
         contentTo: closeFrom,
         closeFrom,
         to
-      });
+      };
+      if (definition.type === "strong-emphasis") {
+        tokens.push({ ...token, type: "strong", marker: "**", openTo: index + 2, contentFrom: index + 2, contentTo: to - 2, closeFrom: to - 2 });
+        tokens.push({ ...token, type: "emphasis", marker: "*", from: index + 2, to: to - 2 });
+      } else tokens.push(token);
       index = to;
     }
     return tokens;
@@ -149,6 +164,45 @@
     });
   }
 
+  const characterSegmenter = typeof Intl.Segmenter === "function"
+    ? new Intl.Segmenter("ko", { granularity: "grapheme" }) : null;
+
+  // Count the document model, never CodeMirror's virtualized/selected DOM.
+  function characterCount(value) {
+    const documentModel = markdownDocumentModel.parseDocument(value, { preserveBlankLines: true });
+    const fragments = [];
+    const visit = blocks => blocks.forEach(block => {
+      if (block.type === "paragraph" || block.type === "quote") fragments.push(block.lines.join("\n"));
+      else if (block.type === "heading") fragments.push(block.text);
+      else if (block.type === "blank") fragments.push(documentModel.lines[block.lineIndex].text);
+      else if (block.type === "list") block.items.forEach(item => {
+        fragments.push(item.body);
+        visit(item.children);
+      });
+      else if (block.type === "table") [block.header, ...block.rows].forEach(row => {
+        row.cells.forEach(cell => fragments.push(cell.text));
+      });
+      // Images and horizontal rules contain no manuscript characters.
+    });
+    visit(documentModel.blocks);
+    return fragments.reduce((total, text) => {
+      const hidden = inlineTokens(text).flatMap(token => [
+        { from: token.from, to: token.openTo },
+        { from: token.closeFrom, to: token.to }
+      ]).sort((a, b) => a.from - b.from);
+      let cursor = 0;
+      let visible = "";
+      hidden.forEach(range => {
+        if (range.from > cursor) visible += text.slice(cursor, range.from);
+        cursor = Math.max(cursor, range.to);
+      });
+      visible = (visible + text.slice(cursor)).replace(/\r?\n/g, "");
+      let count = 0;
+      for (const ignored of characterSegmenter ? characterSegmenter.segment(visible) : visible) count++;
+      return total + count;
+    }, 0);
+  }
+
   function selectionTouchesRange(selection, from, to) {
     return selection.from === selection.to
       ? selection.head >= from && selection.head <= to
@@ -225,6 +279,10 @@
     };
     documentModel.blocks.forEach(sourceBlock => {
       if (sourceBlock.type === "blank") return;
+      if (sourceBlock.type === "horizontalRule") {
+        assignBlock("horizontalRule", [sourceBlock.lineIndex]);
+        return;
+      }
       if (sourceBlock.type === "image") {
         assignBlock("image", [sourceBlock.lineIndex], { assetId: sourceBlock.assetId });
         return;
@@ -532,6 +590,30 @@
     return values.join(" ");
   }
 
+  function tableOperation(value, selection, command, dimensions = {}) {
+    const source = String(value);
+    const from = Math.min(selection.anchor, selection.head);
+    const to = Math.max(selection.anchor, selection.head);
+    const blocks = markdownDocumentModel.parseDocument(source).blocks;
+    const table = blocks.find(block => block.type === "table" && from >= block.from && to <= block.to);
+    if (command === "table-delete") {
+      if (!table) return null;
+      // Replace only the table, never adjacent paragraphs or blank lines.
+      return { changes: { from: table.from, to: table.to, insert: "" }, selection: { anchor: table.from } };
+    }
+    if (command !== "table") return null;
+    if (!table && blocks.some(block => ["table", "code", "image"].includes(block.type) && from <= block.to && to >= block.from)) return null;
+    const columns = dimensions.columns ?? 2;
+    const rows = dimensions.rows ?? 3;
+    if (!Number.isInteger(columns) || columns < 1 || columns > 12 || !Number.isInteger(rows) || rows < 1 || rows > 30) return null;
+    const row = values => `| ${values.join(" | ")} |`;
+    const text = [row(Array.from({ length: columns }, (_, index) => `제목 ${index + 1}`)), row(Array(columns).fill("---")), ...Array.from({ length: rows }, () => row(Array(columns).fill("")))].join("\n");
+    const position = table ? table.to : to;
+    const prefix = position && !source.slice(0, position).endsWith("\n\n") ? (source[position - 1] === "\n" ? "\n" : "\n\n") : "";
+    const suffix = source.slice(position).startsWith("\n\n") ? "" : source[position] === "\n" ? "\n" : "\n\n";
+    return { changes: { from: position, to: position, insert: prefix + text + suffix }, selection: { anchor: position + prefix.length + 2 } };
+  }
+
   function mount(options = {}) {
     const cm = CodeMirror6;
     if (!cm?.EditorState || !cm?.StateEffect || !cm?.EditorView || !cm?.Decoration || !cm?.StateField) {
@@ -539,8 +621,22 @@
     }
     if (!options.parent) throw new Error("Markdown 편집기 표시 영역이 없습니다.");
     let destroyed = false;
+    let toolbar = null;
     const ownerDocument = options.parent.ownerDocument || document;
+    const counter = ownerDocument.createElement("div");
+    counter.className = "writer-markdown-character-count";
+    const updateCounter = doc => {
+      const label = `${characterCount(doc.toString()).toLocaleString("ko-KR")}자`;
+      if (counter.textContent !== label) counter.textContent = label;
+    };
     const editableEffect = cm.StateEffect.define();
+    const tableOperationEffect = cm.StateEffect.define();
+    const tableHistoryBoundary = cm.StateField.define({
+      create: () => false,
+      update(value, transaction) {
+        return transaction.docChanged ? transaction.effects.some(effect => effect.is(tableOperationEffect)) : value;
+      }
+    });
     const editableField = cm.StateField.define({
       create: () => options.readOnly !== true,
       update(value, transaction) {
@@ -553,7 +649,7 @@
     const images = imageEditor?.create({
       cm, model: markdownDocumentModel, assets: options.assets, parent: options.parent,
       onIdle: () => setTimeout(() => {
-        if (!destroyed && !images?.hasPending() && !options.parent.contains(ownerDocument.activeElement)) options.onBlur?.();
+        if (!destroyed && !images?.hasPending() && !toolbar?.ownsFocus() && !options.parent.contains(ownerDocument.activeElement)) options.onBlur?.();
       }, 0),
       canInsert: (source, from, to) => !markdownDocumentModel.parseDocument(source).blocks.some(block => block.type === "table" && from <= block.to && to >= block.from)
     });
@@ -568,6 +664,35 @@
         return focused;
       }
     });
+    class TaskCheckbox {
+      constructor(from, checked, disabled) { this.from = from; this.checked = checked; this.disabled = disabled; }
+      eq(other) { return this.from === other.from && this.checked === other.checked && this.disabled === other.disabled; }
+      compare(other) { return this === other || this.eq(other); }
+      get estimatedHeight() { return -1; }
+      get lineBreaks() { return 0; }
+      updateDOM() { return false; }
+      coordsAt() { return null; }
+      destroy() {}
+      toDOM(view) {
+        const marker = ownerDocument.createElement("span");
+        marker.className = "writer-md-list-marker";
+        const input = ownerDocument.createElement("input");
+        input.type = "checkbox";
+        input.className = "writer-md-task-checkbox";
+        input.setAttribute("aria-label", "할 일 완료");
+        input.checked = this.checked;
+        input.disabled = this.disabled;
+        input.addEventListener("mousedown", event => event.preventDefault());
+        input.addEventListener("change", () => {
+          if (view.state.readOnly || view.composing || view.compositionStarted) { input.checked = this.checked; return; }
+          view.dispatch({ changes: { from: this.from, to: this.from + 1, insert: input.checked ? "x" : " " }, userEvent: "input.task" });
+          view.focus();
+        });
+        marker.append(input);
+        return marker;
+      }
+      ignoreEvent() { return true; }
+    }
     const buildDecorations = state => {
       const selections = state.field(focusField)
         ? state.selection.ranges.map(range => ({ anchor: range.anchor, head: range.head }))
@@ -589,6 +714,10 @@
           attributes.style = `--writer-md-table-column-count:${columnCount};--writer-md-table-column-width:${columnWidth}%;--writer-md-table-min-width:${minimumWidth}em`;
         }
         ranges.push(cm.Decoration.line({ attributes }).range(line.from));
+        if (line.blockType === "horizontalRule") {
+          ranges.push(syntaxDecoration(line.active).range(line.from, line.to));
+          return;
+        }
         if (line.blockType === "table") {
           line.tableCells.forEach((cell, columnIndex) => {
             if (cell.rawFrom >= cell.rawTo) return;
@@ -646,7 +775,10 @@
             inclusiveEnd: false
           }).range(from, to));
         }
-        if (line.listMarkerFrom >= 0) {
+        if (line.taskStateFrom >= 0 && line.blockType === "listItem") {
+          ranges.push(cm.Decoration.widget({ widget: new TaskCheckbox(line.from + line.taskStateFrom, line.taskChecked, state.readOnly), side: -1 }).range(line.from + line.listMarkerFrom));
+          ranges.push(syntaxDecoration(false).range(line.from + line.listMarkerFrom, line.from + line.taskMarkerTo));
+        } else if (line.listMarkerFrom >= 0) {
           const from = line.from + line.listMarkerFrom;
           const to = line.from + line.listMarkerTo;
           ranges.push(cm.Decoration.mark({
@@ -669,7 +801,8 @@
       },
       update(decorations, transaction) {
         const focusChanged = transaction.effects.some(effect => effect.is(focusEffect));
-        return transaction.docChanged || transaction.selection || focusChanged ? buildDecorations(transaction.state) : decorations;
+        const editableChanged = transaction.effects.some(effect => effect.is(editableEffect));
+        return transaction.docChanged || transaction.selection || focusChanged || editableChanged ? buildDecorations(transaction.state) : decorations;
       },
       provide: field => cm.EditorView.decorations.from(field)
     });
@@ -1002,6 +1135,16 @@
       if (!transaction.docChanged) return true;
       if (transaction.isUserEvent?.("undo") || transaction.isUserEvent?.("redo")) return true;
       const source = transaction.startState.doc.toString();
+      const tableOperations = transaction.effects.filter(effect => effect.is(tableOperationEffect));
+      if (tableOperations.length) {
+        if (tableOperations.length !== 1 || transaction.startState.readOnly) return false;
+        const request = tableOperations[0].value;
+        const expected = tableOperation(source, transaction.startState.selection.main, request.command, request.dimensions);
+        if (!expected) return false;
+        const actual = [];
+        transaction.changes.iterChanges((from, to, _fromB, _toB, inserted) => actual.push({ from, to, insert: inserted.toString() }));
+        return actual.length === 1 && actual[0].from === expected.changes.from && actual[0].to === expected.changes.to && actual[0].insert === expected.changes.insert;
+      }
       const tables = tableCellContexts(source);
       if (!tables.length) return true;
       const changes = [];
@@ -1097,7 +1240,12 @@
         cm.EditorState.changeFilter.of(transaction => !transaction.startState.readOnly),
         ...(images?.extensions || []),
         cm.EditorView.editorAttributes.of({ class: "writer-markdown-live-editor" }),
-        cm.history(),
+        tableHistoryBoundary,
+        cm.history({
+          joinToEvent: (transaction, adjacent) => adjacent
+            && !transaction.startState.field(tableHistoryBoundary)
+            && !transaction.effects.some(effect => effect.is(tableOperationEffect))
+        }),
         cm.keymap.of([
           { key: "Escape", run() { options.onEscape?.(); return true; } },
           { key: "Enter", run: handleEnter },
@@ -1126,7 +1274,9 @@
           "aria-label": String(options.ariaLabel || "Markdown 편집")
         }),
         cm.EditorView.updateListener.of(update => {
+          if (update.docChanged) updateCounter(update.state.doc);
           if (update.docChanged && !replacingValue) options.onChange?.(update.state.doc.toString());
+          toolbar?.refresh();
         }),
         cm.EditorView.domEventHandlers({
           mousedown: handleTableCellMouseDown,
@@ -1139,14 +1289,119 @@
           blur() {
             view.dispatch({ effects: focusEffect.of(false) });
             setTimeout(() => {
-              if (!destroyed && !images?.hasPending() && !options.parent.contains(ownerDocument.activeElement)) options.onBlur?.();
+              if (!destroyed && !images?.hasPending() && !toolbar?.ownsFocus() && !options.parent.contains(ownerDocument.activeElement)) options.onBlur?.();
             }, 0);
           }
         })
       ]
     });
     const view = new cm.EditorView({ state, parent: options.parent });
+    updateCounter(state.doc);
+    options.parent.appendChild(counter);
     images?.attach(view);
+    let toolbarDocument = null;
+    let toolbarParsed = null;
+    let toolbarState = null;
+    let toolbarContext = null;
+    const historyCommands = {
+      undo: cm.historyKeymap.find(binding => binding.key === "Mod-z")?.run,
+      redo: cm.historyKeymap.find(binding => binding.key === "Mod-y")?.run
+        || cm.historyKeymap.find(binding => binding.key === "Mod-z")?.shift
+    };
+    const formatContext = () => {
+      if (destroyed || view.state.readOnly) return null;
+      if (toolbarState === view.state) return toolbarContext;
+      // Share one parse across buttons and reuse it while only the selection moves.
+      if (toolbarDocument !== view.state.doc) {
+        toolbarDocument = view.state.doc;
+        const source = toolbarDocument.toString();
+        toolbarParsed = { source, tokens: inlineTokens(source), blocks: markdownDocumentModel.parseDocument(source).blocks };
+      }
+      const selection = view.state.selection.main;
+      const multiline = toolbarParsed.source.slice(selection.from, selection.to).includes("\n");
+      const parts = multiline ? toolbarApi.inlineSelectionParts(toolbarParsed.source, selection.from, selection.to, toolbarParsed.tokens) : [];
+      toolbarState = view.state;
+      toolbarContext = {
+        ...toolbarParsed,
+        selection,
+        hasInlineText: !multiline || parts.length > 0,
+        // Probe public state commands without dispatching their transactions.
+        // Cache per EditorState so rendering button states never changes history.
+        history: Object.fromEntries(Object.entries(historyCommands).map(([command, run]) => [
+          command, Boolean(run?.({ state: view.state, dispatch() {} }))
+        ])),
+        cell: tableCellContextAt(toolbarParsed.source, selection.head),
+        label: options.ariaLabel || "본문 편집",
+        marks: Object.entries(toolbarApi?.marks || {})
+          .filter(([name, marker]) => multiline
+            ? parts.length > 0 && parts.every(part => toolbarApi.partMark(part, name, toolbarParsed.tokens))
+            : toolbarParsed.tokens.some(token => (token.marker === marker || (name === "italic" && token.marker === "_")) && selection.from >= token.contentFrom && selection.to <= token.contentTo))
+          .map(([name]) => name)
+      };
+      return toolbarContext;
+    };
+    const formatDisabledReason = command => {
+      const context = formatContext();
+      if (!context) return "본문을 먼저 선택하세요";
+      if (view.composing || view.compositionStarted) return "한글 입력을 마친 뒤 사용하세요";
+      if (view.state.selection.ranges.length !== 1) return "하나의 영역을 선택하세요";
+      if (command === "undo" || command === "redo") return context.history[command]
+        ? "" : command === "undo" ? "실행 취소할 변경이 없습니다" : "다시 실행할 변경이 없습니다";
+      const { source, selection, tokens, blocks, cell } = context;
+      if (toolbarApi.marks[command] && selection.empty) return "꾸밀 텍스트를 먼저 선택하세요";
+      if (toolbarApi.marks[command] && !context.hasInlineText) return "꾸밀 텍스트를 먼저 선택하세요";
+      if (command === "table-delete") return tableOperation(source, selection, command) ? "" : "삭제할 표 안을 먼저 선택하세요";
+      if (command === "table") return tableOperation(source, selection, command) ? "" : "한 표 안이나 일반 본문을 선택하세요";
+      if (tokens.some(token => token.type === "code" && selection.from >= token.contentFrom && selection.to <= token.contentTo)) return "코드 밖에서 사용하세요";
+      const touches = block => selection.from <= block.to && selection.to >= block.from;
+      if (blocks.some(block => ["image", "code"].includes(block.type) && touches(block))) return "이미지·코드 블록 밖에서 사용하세요";
+      const tableTouched = blocks.some(block => block.type === "table" && touches(block));
+      if (tableTouched && (!toolbarApi.marks[command] || !cell || selection.from < cell.cell.from || selection.to > cell.cell.to || cell.cell.synthetic)) return "표 안에서는 한 셀의 글자 서식만 바꿀 수 있습니다";
+      if (command === "image") return options.assets?.upload ? "" : "이 입력란에는 이미지 에셋 연결이 아직 없습니다";
+      return "";
+    };
+    toolbar = toolbarApi?.register(ownerDocument, {
+      contains: node => options.parent.contains(node),
+      context: formatContext,
+      disabledReason: formatDisabledReason,
+      focus: () => view.focus(),
+      blur: () => { if (!destroyed && !images?.hasPending()) options.onBlur?.(); },
+      run(command, dimensions) {
+        if (formatDisabledReason(command)) return false;
+        if (command === "table" || command === "table-delete") {
+          const { source, selection } = formatContext();
+          const edit = tableOperation(source, selection, command, dimensions);
+          if (!edit) return false;
+          view.dispatch({ ...edit, effects: tableOperationEffect.of({ command, dimensions }), userEvent: command === "table" ? "input.table" : "delete.table", scrollIntoView: true });
+          view.focus();
+          return true;
+        }
+        if (command === "image") {
+          images?.chooseAsset();
+          return true;
+        }
+        if (command === "undo" || command === "redo") {
+          const run = historyCommands[command];
+          run?.(view);
+          view.focus();
+          return true;
+        }
+        const { source, selection, tokens } = formatContext();
+        const edit = toolbarApi.change(source, selection.anchor, selection.head, command, tokens);
+        if (!edit) return false;
+        view.dispatch({ ...edit, userEvent: "input.format" });
+        view.focus();
+        return true;
+      }
+    });
+    const onToolbarKey = event => {
+      if (event.altKey && event.key === "F10") { event.preventDefault(); toolbar?.focus(); }
+    };
+    const onComposition = () => { toolbar?.refresh(); };
+    const onCompositionEnd = () => { setTimeout(onComposition, 0); };
+    options.parent.addEventListener("keydown", onToolbarKey);
+    options.parent.addEventListener("compositionstart", onComposition);
+    options.parent.addEventListener("compositionend", onCompositionEnd);
     options.parent.toggleAttribute("data-markdown-readonly", view.state.readOnly);
     return Object.freeze({
       setEditable(editable) {
@@ -1198,14 +1453,20 @@
       destroy() {
         if (destroyed) return;
         destroyed = true;
+        toolbar?.destroy();
+        options.parent.removeEventListener("keydown",onToolbarKey);
+        options.parent.removeEventListener("compositionstart",onComposition);
+        options.parent.removeEventListener("compositionend",onCompositionEnd);
         options.parent.removeAttribute("data-markdown-readonly");
         images?.destroy();
         view.destroy();
+        counter.remove();
       }
     });
   }
 
   return Object.freeze({
+    characterCount,
     inlineTokens,
     tableEscapedPipeBackslashes,
     tableCellEdgeWhitespaceRanges,
@@ -1218,6 +1479,7 @@
     syntheticTableCellMaterialization,
     safeTableCellInput,
     safeTableCellReplacement,
+    tableOperation,
     previewModel,
     mount
   });

package/templates/mystery-v1/markdown-toolbar.js

@@ -0,0 +1,514 @@
+(function (root, factory) {
+  const api = factory(typeof module === "object" && module.exports
+    ? require("./markdown-document-model.js") : root?.WriterMarkdownDocumentModel);
+  if (typeof module === "object" && module.exports) module.exports = api;
+  if (root) root.WriterMarkdownToolbar = api;
+})(typeof globalThis !== "undefined" ? globalThis : this, function (documentModel) {
+  "use strict";
+  const marks = Object.freeze({
+    bold: "**",
+    italic: "*",
+    underline: "<u>",
+    strike: "~~",
+    highlight: "==",
+    brand: "++",
+  });
+  const tools = [
+    ["undo", "실행 취소"],
+    ["redo", "다시 실행"],
+    ["bold", "굵게"],
+    ["italic", "기울임"],
+    ["underline", "밑줄"],
+    ["strike", "취소선"],
+    ["highlight", "형광펜"],
+    ["brand", "색글씨"],
+    ["paragraph", "일반 본문"],
+    ["h1", "제목 1"],
+    ["h2", "제목 2"],
+    ["h3", "제목 3"],
+    ["bullet", "글머리 목록"],
+    ["number", "숫자 목록"],
+    ["task", "체크박스 목록"],
+    ["quote", "인용"],
+    ["image", "이미지 삽입"],
+    ["divider", "구분선"],
+    ["table", "표 만들기"],
+    ["table-delete", "현재 표 삭제"],
+  ];
+  // Local vector icons share one stroke style and need no font or network asset.
+  const iconPaths = Object.freeze({
+    bold: "M6 4h7a4 4 0 0 1 0 8H6V4m0 8h8a4 4 0 0 1 0 8H6v-8",
+    italic: "M10 4h10M4 20h10M15 4 9 20",
+    underline: "M6 3v8a6 6 0 0 0 12 0V3M4 21h16",
+    strike: "M18 6c-1-2-3-3-6-3-4 0-6 2-6 5 0 2 2 3 6 4M6 18c1 2 3 3 6 3 4 0 6-2 6-5 0-1-1-2-2-3M3 12h18",
+    highlight: "m10 10 8-8 4 4-8 8-4-4ZM10 10l-3 3 4 4 3-3M7 13l-3 5h5l2-1",
+    brand: "m4 14 9-11a2 2 0 0 1 3 0l2 2a2 2 0 0 1 0 3L7 17l-3-3ZM4 14l-2 6 5-3M11 5l5 5M19 13c-1 2-3 4-3 5.5a3 3 0 0 0 6 0C22 17 20 15 19 13Z",
+    image: "M13 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8M3 16l5-5 8 10M12 17l3-3 6 6M18 2v6M15 5h6M8 7h.01",
+    paragraph: "M4 4h16M12 4v16",
+    h1: "M3 5v14M12 5v14M3 12h9M16 12l3-2v9M16 19h6",
+    h2: "M3 5v14M12 5v14M3 12h9M16 12a3 3 0 0 1 6 0c0 2-6 4-6 7h6",
+    h3: "M3 5v14M12 5v14M3 12h9M16 10h6l-4 4c5-1 5 6 1 6-2 0-3-1-3-2",
+    bullet: "M9 5h12M9 12h12M9 19h12M3 5h1M3 12h1M3 19h1",
+    task: "M3 3h18v18H3V3m4 9 3 3 7-7",
+    number: "M10 5h11M10 12h11M10 19h11M3 3h1v4M2 7h4M2 11c0-2 4-2 4 0 0 1-4 2-4 4h4M2 18h4l-2 2c3-1 3 3 0 3H2",
+    quote: "M3 5h7v7H3V5m7 7c0 4-2 6-5 7M14 5h7v7h-7V5m7 7c0 4-2 6-5 7",
+    divider: "M3 12h18M8 5h8M8 19h8",
+    table: "M12 3H3v18h18v-9M3 9h9M3 15h18M9 3v18M18 2v8M14 6h8",
+    "table-delete": "M12 3H3v18h18v-9M3 9h9M3 15h18M9 3v18m6-16 7 7m0-7-7 7",
+    undo: "M9 4 3 10l6 6M3 10h11a5 5 0 0 1 0 10h-3",
+    redo: "m15 4 6 6-6 6M21 10H10a5 5 0 0 0 0 10h3",
+  });
+  function createIcon(doc, command) {
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = doc.createElementNS(ns, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    if (command === "highlight") {
+      const swatch = doc.createElementNS(ns, "rect");
+      for (const [key, value] of Object.entries({ x: "2", y: "20", width: "20", height: "4", rx: "1", class: "writer-format-highlight-swatch" })) {
+        swatch.setAttribute(key, value);
+      }
+      svg.append(swatch);
+    }
+    const path = doc.createElementNS(ns, "path");
+    path.setAttribute("d", iconPaths[command]);
+    svg.append(path);
+    return svg;
+  }
+  // Pure source edits. The editor remains the sole selection/history/save owner.
+  function inlineSelectionParts(source, from, to, tokens = []) {
+    const parsed = documentModel.parseDocument(source, { preserveBlankLines: true });
+    const excluded = new Set(parsed.blocks.flatMap(block => block.type === "table"
+      ? block.lineIndices : ["horizontalRule", "image"].includes(block.type) ? [block.lineIndex] : []));
+    return parsed.lines.flatMap(line => {
+      if (excluded.has(line.index)) return [];
+      const prefix = Math.max(0, line.headingMarkerTo, line.quoteMarkerTo, line.taskMarkerTo, line.listPrefixTo);
+      let parts = [{from:Math.max(from, line.from + prefix), to:Math.min(to, line.to)}];
+      for (const token of tokens.filter(token => token.type === "code")) {
+        parts = parts.flatMap(part => token.to <= part.from || token.from >= part.to ? [part] : [
+          {from:part.from, to:Math.min(part.to, token.from)},
+          {from:Math.max(part.from, token.to), to:part.to}
+        ]);
+      }
+      return parts.flatMap(part => {
+        if (part.to <= part.from) return [];
+        const text = source.slice(part.from, part.to);
+        const start = part.from + text.length - text.trimStart().length;
+        const end = part.to - (text.length - text.trimEnd().length);
+        return end > start ? [{from:start, to:end}] : [];
+      });
+    });
+  }
+  function partMark(part, command, tokens) {
+    return tokens.find(token => (token.marker === marks[command] || (command === "italic" && token.marker === "_"))
+      && part.from >= token.from && part.to <= token.to
+      && part.to > token.contentFrom && part.from < token.contentTo);
+  }
+  function multilineChange(source, anchor, head, command, tokens) {
+    const from = Math.min(anchor, head), to = Math.max(anchor, head);
+    const parts = inlineSelectionParts(source, from, to, tokens);
+    if (!parts.length) return null;
+    const marked = parts.map(part => partMark(part, command, tokens));
+    const remove = marked.every(Boolean);
+    const edits = [];
+    parts.forEach((part, index) => {
+      const token = marked[index];
+      if (remove) {
+        edits.push({from:token.from, to:token.contentFrom, insert:""}, {from:token.contentTo, to:token.to, insert:""});
+      } else if (!token) {
+        edits.push({from:part.from, to:part.from, insert:marks[command]},
+          {from:part.to, to:part.to, insert:command === "underline" ? "</u>" : marks[command]});
+      }
+    });
+    const changes = [...new Map(edits.map(edit => [`${edit.from}:${edit.to}`, edit])).values()].sort((a,b) => a.from - b.from);
+    const mapPosition = (position, side) => {
+      let delta = 0;
+      for (const edit of changes) {
+        if (position < edit.from || (position === edit.from && side < 0)) break;
+        if (position < edit.to) return edit.from + delta;
+        delta += edit.insert.length - (edit.to - edit.from);
+      }
+      return position + delta;
+    };
+    const start = mapPosition(from, 1), end = mapPosition(to, -1);
+    return {changes, selection:anchor <= head ? {anchor:start,head:end} : {anchor:end,head:start}};
+  }
+  function change(source, anchor, head, command, tokens = []) {
+    const from = Math.min(anchor, head),
+      to = Math.max(anchor, head);
+    const selected = source.slice(from, to),
+      marker = marks[command];
+    if (marker) {
+      const closeMarker = command === "underline" ? "</u>" : marker;
+      if (selected.includes("\n")) return multilineChange(source, anchor, head, command, tokens);
+      const token = tokens.find(
+        (t) =>
+          (t.marker === marker || (command === "italic" && t.marker === "_")) && from >= t.contentFrom && to <= t.contentTo,
+      );
+      if (token) {
+        return {
+          changes: [
+            { from: token.from, to: token.contentFrom },
+            { from: token.contentTo, to: token.to },
+          ],
+          selection: {
+            anchor: anchor - (token.contentFrom - token.from),
+            head: head - (token.contentFrom - token.from),
+          },
+        };
+      }
+      if (
+        selected.length >= marker.length + closeMarker.length &&
+        selected.startsWith(marker) &&
+        selected.endsWith(closeMarker)
+      ) {
+        const text = selected.slice(marker.length, -closeMarker.length);
+        return {
+          changes: { from, to, insert: text },
+          selection: { anchor: from, head: from + text.length },
+        };
+      }
+      if (
+        source.slice(Math.max(0, from - marker.length), from) === marker &&
+        source.slice(to, to + closeMarker.length) === closeMarker
+      ) {
+        return {
+          changes: [
+            { from: from - marker.length, to: from },
+            { from: to, to: to + closeMarker.length },
+          ],
+          selection: {
+            anchor: anchor - marker.length,
+            head: head - marker.length,
+          },
+        };
+      }
+      return {
+        changes: { from, to, insert: marker + selected + closeMarker },
+        selection: {
+          anchor: anchor + marker.length,
+          head: head + marker.length,
+        },
+      };
+    }
+    if (command === "divider" || command === "table") {
+      const text =
+        command === "divider"
+          ? "---"
+          : "| 제목 | 내용 |\n| --- | --- |\n|  |  |";
+      const prefix =
+        from && !source.slice(0, from).endsWith("\n\n")
+          ? source[from - 1] === "\n"
+            ? "\n"
+            : "\n\n"
+          : "";
+      const suffix = source.slice(to).startsWith("\n\n")
+        ? ""
+        : source[to] === "\n"
+          ? "\n"
+          : "\n\n";
+      const position =
+        from +
+        prefix.length +
+        (command === "table" ? 2 : text.length + suffix.length);
+      return {
+        changes: { from, to, insert: prefix + text + suffix },
+        selection: { anchor: position },
+      };
+    }
+    if (
+      !["paragraph", "h1", "h2", "h3", "bullet", "number", "task", "quote"].includes(
+        command,
+      )
+    )
+      return null;
+    const start = from === 0 ? 0 : source.lastIndexOf("\n", from - 1) + 1;
+    const endPosition = to > from && source[to - 1] === "\n" ? to - 1 : to;
+    const nextBreak = source.indexOf("\n", endPosition),
+      end = nextBreak < 0 ? source.length : nextBreak;
+    const lines = source.slice(start, end).split("\n");
+    const pattern = /^(\s*)(?:[-*] \[[ xX]\](?:[ \t]+|$)|#{1,6} |[-+*] |\d+[.)] |> )/;
+    const prefixFor = (index) =>
+      command === "paragraph"
+        ? ""
+        : command[0] === "h"
+          ? "#".repeat(Number(command[1])) + " "
+          : command === "bullet"
+            ? "- "
+            : command === "task"
+              ? "- [ ] "
+            : command === "number"
+              ? `${index + 1}. `
+              : "> ";
+    const same =
+      command !== "paragraph" &&
+      lines.every((line) => {
+        const prefix = line.match(pattern)?.[0]?.trim() || "";
+        return command === "task" ? /^[-*] \[[ xX]\]$/.test(prefix) : command === "number"
+          ? /^\d+[.)]$/.test(prefix)
+          : prefix === prefixFor(0).trim();
+      });
+    let offset = start;
+    const changes = lines.map((line, index) => {
+      const match = line.match(pattern),
+        indentation = match?.[1] || line.match(/^\s*/)[0];
+      const removed = match ? match[0].length : indentation.length;
+      const result = {
+        from: offset,
+        to: offset + removed,
+        insert: indentation + (same ? "" : prefixFor(index)),
+      };
+      offset += line.length + 1;
+      return result;
+    });
+    const map = (position) => {
+      let delta = 0;
+      for (const edit of changes) {
+        if (position < edit.from) break;
+        if (position <= edit.to) return edit.from + delta + edit.insert.length;
+        delta += edit.insert.length - (edit.to - edit.from);
+      }
+      return position + delta;
+    };
+    return { changes, selection: { anchor: map(anchor), head: map(head) } };
+  }
+
+  const documents = new WeakMap();
+  function openTableDialog(doc, manager, command) {
+    if (manager.dialog) return;
+    const current = manager.active;
+    const original = current?.context();
+    if (!original || current.disabledReason(command)) return;
+    const creating = command === "table";
+    const dialog = doc.createElement("dialog");
+    dialog.className = "writer-format-dialog";
+    dialog.setAttribute("aria-label", creating ? "표 만들기" : "현재 표 삭제");
+    const heading = doc.createElement("h3");
+    heading.textContent = creating ? "표 만들기" : "현재 표를 삭제할까요?";
+    const description = doc.createElement("p");
+    description.textContent = creating ? "제목 행은 따로 추가됩니다. 표 안에서는 현재 표 바로 뒤에 만듭니다." : "이 표의 모든 셀 내용이 삭제됩니다. 삭제 후 실행 취소로 복원할 수 있습니다.";
+    const form = doc.createElement("form");
+    const inputs = {};
+    if (creating) {
+      for (const [name, label, value, max] of [["columns", "열 수", 2, 12], ["rows", "내용 행 수", 3, 30]]) {
+        const field = doc.createElement("label");
+        field.textContent = label;
+        const input = doc.createElement("input");
+        Object.assign(input, { type: "number", min: "1", max: String(max), step: "1", value: String(value), required: true });
+        input.setAttribute("aria-label", label);
+        field.append(input); form.append(field); inputs[name] = input;
+      }
+    }
+    const actions = doc.createElement("div");
+    actions.className = "writer-format-dialog-actions";
+    const cancel = doc.createElement("button");
+    cancel.type = "button"; cancel.textContent = "취소";
+    const submit = doc.createElement("button");
+    submit.type = "submit"; submit.textContent = creating ? "표 만들기" : "표 삭제";
+    submit.className = creating ? "primary" : "danger";
+    actions.append(cancel, submit); form.append(actions); dialog.append(heading, description, form);
+    let settled = false;
+    const finish = apply => {
+      if (settled) return;
+      settled = true;
+      const context = current.context();
+      const unchanged = context && context.source === original.source && context.selection.anchor === original.selection.anchor && context.selection.head === original.selection.head;
+      dialog.close(); dialog.remove(); manager.dialog = null;
+      if (context) current.focus();
+      if (apply && unchanged) current.run(command, creating ? { columns: Number(inputs.columns.value), rows: Number(inputs.rows.value) } : undefined);
+      manager.update();
+    };
+    cancel.addEventListener("click", () => finish(false));
+    dialog.addEventListener("cancel", event => { event.preventDefault(); finish(false); });
+    form.addEventListener("submit", event => { event.preventDefault(); if (form.reportValidity()) finish(true); });
+    manager.dialog = dialog;
+    manager.bar.append(dialog);
+    dialog.showModal();
+    (creating ? inputs.columns : cancel).focus();
+  }
+  function viewportInset(frameHeight, visibleBottom, frameTop = 0, scale = 1) {
+    return Math.max(0, frameHeight - Math.max(0, (visibleBottom - frameTop) / scale));
+  }
+  function register(doc, target) {
+    let manager = documents.get(doc);
+    if (!manager) {
+      const win = doc.defaultView;
+      const bar = doc.createElement("div");
+      bar.className = "writer-format-toolbar";
+      bar.dataset.editing = "false";
+      bar.inert = true;
+      bar.setAttribute("aria-hidden", "true");
+      bar.setAttribute("role", "toolbar");
+      bar.setAttribute("aria-label", "텍스트 편집 도구");
+      const strip = doc.createElement("div");
+      strip.className = "writer-format-tools";
+      const buttons = new Map();
+      manager = { bar, targets: new Set(), active: null };
+      for (const [command, label] of tools) {
+        const button = doc.createElement("button");
+        button.type = "button";
+        button.setAttribute("aria-label", label);
+        button.append(createIcon(doc, command));
+        button.dataset.formatCommand = command;
+        if (["bold", "paragraph", "bullet", "image"].includes(command)) {
+          const separator = doc.createElement("span");
+          separator.className = "writer-format-separator";
+          separator.setAttribute("aria-hidden", "true");
+          strip.append(separator);
+        }
+        button.addEventListener("click", () => {
+          const current = manager.active;
+          if (!current || button.disabled) return;
+          if (command === "table" || command === "table-delete") openTableDialog(doc, manager, command);
+          else current.run(command);
+          manager.update();
+        });
+        buttons.set(command, button);
+        strip.append(button);
+      }
+      bar.append(strip);
+      doc.body.append(bar);
+      doc.body.classList.add("writer-has-format-toolbar");
+      // Keep pointer/touch actions from moving focus out of the editor.
+      bar.addEventListener("pointerdown", (event) => {
+        if (!event.target.closest("dialog") && event.target.closest("button") && event.button === 0)
+          event.preventDefault();
+      });
+      bar.addEventListener("keydown", (event) => {
+        if (event.target.closest("dialog")) return;
+        if (event.key === "Escape") {
+          event.preventDefault();
+          manager.active?.focus();
+        }
+      });
+      manager.focus = () =>
+        [...buttons.values()].find((button) => !button.disabled)?.focus();
+      manager.update = () => {
+        const current = manager.active;
+        const context = current?.context();
+        const editing = String(Boolean(context));
+        if (bar.dataset.editing !== editing) {
+          bar.dataset.editing = editing;
+          bar.inert = !context;
+          bar.setAttribute("aria-hidden", String(!context));
+          manager.position?.();
+        }
+        for (const [command, button] of buttons) {
+          const reason = context
+            ? current.disabledReason(command)
+            : "본문을 먼저 선택하세요";
+          button.disabled = Boolean(reason);
+          button.title = reason || button.getAttribute("aria-label");
+          if (marks[command])
+            button.setAttribute(
+              "aria-pressed",
+              String(Boolean(context?.marks?.includes(command))),
+            );
+        }
+      };
+      const onFocus = (event) => {
+        if (bar.contains(event.target)) return;
+        const current = [...manager.targets].find(
+          (item) => item.contains(event.target) && item.context(),
+        );
+        if (manager.active && manager.active !== current)
+          manager.active.blur?.();
+        manager.active = current || null;
+        manager.update();
+      };
+      const onBlur = () =>
+        setTimeout(() => {
+          if (bar.contains(doc.activeElement)) return;
+          if (manager.active && !manager.active.contains(doc.activeElement)) {
+            manager.active.blur?.();
+            manager.active = null;
+            manager.update();
+          }
+        }, 0);
+      // Convert the parent's visible bottom into this iframe's coordinates.
+      // A keyboard inset alone is wrong when 100vh exceeds the visible viewport.
+      let viewportWindow = win;
+      let frame = null;
+      try {
+        if (
+          win.parent !== win &&
+          win.parent.location.origin === win.location.origin
+        ) {
+          viewportWindow = win.parent;
+          frame = win.frameElement;
+        }
+      } catch (_) {}
+      const viewport = viewportWindow.visualViewport;
+      const position = () => {
+        const visibleBottom = viewport ? viewport.height + viewport.offsetTop : viewportWindow.innerHeight;
+        const rect = frame?.getBoundingClientRect();
+        const scale = rect && frame.offsetHeight ? rect.height / frame.offsetHeight : 1;
+        const top = rect ? rect.top + frame.clientTop * scale : 0;
+        const inset = viewportInset(win.innerHeight, visibleBottom, top, scale || 1);
+        bar.style.bottom = `${inset}px`;
+        doc.body.style.setProperty("--writer-visible-bottom-inset", `${inset}px`);
+        doc.body.style.setProperty("--writer-toolbar-clearance", `${inset + bar.offsetHeight}px`);
+      };
+      manager.position = position;
+      doc.addEventListener("focusin", onFocus);
+      doc.addEventListener("focusout", onBlur);
+      viewport?.addEventListener("resize", position);
+      viewport?.addEventListener("scroll", position);
+      win.addEventListener("resize", position);
+      viewportWindow.addEventListener("scroll", position, true);
+      if (viewportWindow !== win) viewportWindow.addEventListener("resize", position);
+      const sizeObserver = new win.ResizeObserver(position);
+      sizeObserver.observe(bar, { box: "border-box" });
+      position();
+      manager.dispose = () => {
+        sizeObserver.disconnect();
+        doc.removeEventListener("focusin", onFocus);
+        doc.removeEventListener("focusout", onBlur);
+        viewport?.removeEventListener("resize", position);
+        viewport?.removeEventListener("scroll", position);
+        win.removeEventListener("resize", position);
+        viewportWindow.removeEventListener("scroll", position, true);
+        if (viewportWindow !== win) viewportWindow.removeEventListener("resize", position);
+        bar.remove();
+        doc.body.style.removeProperty("--writer-visible-bottom-inset");
+        doc.body.style.removeProperty("--writer-toolbar-clearance");
+        doc.body.classList.remove("writer-has-format-toolbar");
+        documents.delete(doc);
+      };
+      documents.set(doc, manager);
+      manager.update();
+    }
+    manager.targets.add(target);
+    return {
+      ownsFocus: () =>
+        manager.active === target && manager.bar.contains(doc.activeElement),
+      focus() {
+        if (manager.active === target) manager.focus();
+      },
+      refresh() {
+        // Touch can focus a readonly editor before it becomes editable, without
+        // firing another focusin. Reconnect from the current focus on that update.
+        if (manager.active !== target && target.contains(doc.activeElement) && target.context()) {
+          manager.active?.blur?.();
+          manager.active = target;
+        }
+        if (manager.active === target) {
+          if (!target.context()) manager.active = null;
+          manager.update();
+        }
+      },
+      destroy() {
+        manager.targets.delete(target);
+        if (manager.active === target) {
+          manager.dialog?.remove();
+          manager.dialog = null;
+          manager.active = null;
+        }
+        if (!manager.targets.size) manager.dispose();
+        else manager.update();
+      },
+    };
+  }
+  return Object.freeze({ change, register, marks, viewportInset, inlineSelectionParts, partMark });
+});

package/tools/writer-cli/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@ssobig/writer-cli",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ssobig/writer-cli",
-      "version": "0.3.2",
+      "version": "0.3.3",
       "dependencies": {
         "@supabase/supabase-js": "2.110.9"
       },

package/tools/writer-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssobig/writer-cli",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "private": true,
   "description": "Internal agent-safe CLI for SSOBIG WRITER manuscript and asset operations",
   "type": "commonjs",