@ssobig/writer-cli 0.3.0 → 0.3.3

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

@@ -1,25 +1,99 @@
 (function (root, factory) {
-  const api = factory(root?.WriterCodeMirror6);
-  if (typeof module === "object" && module.exports) module.exports = api;
+  const commonJs = typeof module === "object" && module.exports;
+  const CodeMirror6 = commonJs ? null : root?.WriterCodeMirror6;
+  const markdownDocumentModel = commonJs ? require("./markdown-document-model.js") : root?.WriterMarkdownDocumentModel;
+  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) {
+})(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: "code" }
+    { marker: "*", type: "emphasis" },
+    { marker: "_", type: "emphasis" }
   ]);
-  function lineStarts(source) {
-    const starts = [0];
-    for (let index = 0; index < source.length; index += 1) {
-      if (source[index] === "\n") starts.push(index + 1);
+  function isEscapedAt(source, index) {
+    let backslashes = 0;
+    for (let cursor = index - 1; cursor >= 0 && source[cursor] === "\\"; cursor -= 1) backslashes += 1;
+    return backslashes % 2 === 1;
+  }
+  function backtickRunLength(source, index) {
+    let cursor = index;
+    while (source[cursor] === "`") cursor += 1;
+    return cursor - index;
+  }
+  function codeTokenAt(source, index) {
+    if (source[index] !== "`" || isEscapedAt(source, index)) return null;
+    const markerLength = backtickRunLength(source, index);
+    const contentFrom = index + markerLength;
+    let cursor = contentFrom;
+    while (cursor < source.length) {
+      if (source[cursor] !== "`") {
+        cursor += 1;
+        continue;
+      }
+      const closeLength = backtickRunLength(source, cursor);
+      if (isEscapedAt(source, cursor)) {
+        cursor += closeLength;
+        continue;
+      }
+      if (closeLength === markerLength) {
+        if (cursor <= contentFrom || /\n[ \t]*\n/.test(source.slice(contentFrom, cursor))) return null;
+        return {
+          type: "code",
+          marker: "`".repeat(markerLength),
+          from: index,
+          openTo: contentFrom,
+          contentFrom,
+          contentTo: cursor,
+          closeFrom: cursor,
+          to: cursor + markerLength
+        };
+      }
+      cursor += closeLength;
     }
-    return starts;
+    return null;
+  }
+  function tableEscapedPipeBackslashes(cell) {
+    const raw = String(cell?.raw ?? "");
+    const rawFrom = Number(cell?.rawFrom);
+    if (!Number.isSafeInteger(rawFrom) || !raw) return [];
+    const ranges = [];
+    let index = 0;
+    while (index < raw.length) {
+      if (raw[index] !== "\\") {
+        index += 1;
+        continue;
+      }
+      let cursor = index;
+      while (raw[cursor] === "\\") cursor += 1;
+      const count = cursor - index;
+      if (raw[cursor] === "|" && count % 2 === 1) {
+        const from = rawFrom + cursor - 1;
+        ranges.push({ from, to: from + 1 });
+      }
+      index = cursor + (raw[cursor] === "|" ? 1 : 0);
+    }
+    return ranges;
+  }
+  function tableCellEdgeWhitespaceRanges(cell) {
+    const rawFrom = Number(cell?.rawFrom);
+    const from = Number(cell?.from);
+    const to = Number(cell?.to);
+    const rawTo = Number(cell?.rawTo);
+    if (![rawFrom, from, to, rawTo].every(Number.isSafeInteger)) return [];
+    const ranges = [];
+    if (rawFrom < from) ranges.push({ from: rawFrom, to: from });
+    if (to < rawTo) ranges.push({ from: to, to: rawTo });
+    return ranges;
   }
-
   function lineAt(starts, offset) {
     let low = 0;
     let high = starts.length - 1;
@@ -35,20 +109,34 @@
     const tokens = [];
     let index = 0;
     while (index < source.length) {
+      if (source[index] === "`" && !isEscapedAt(source, index)) {
+        const token = codeTokenAt(source, index);
+        if (token) {
+          tokens.push(token);
+          index = token.to;
+        } else index += backtickRunLength(source, index);
+        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,
@@ -57,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;
@@ -72,35 +164,94 @@
     });
   }
 
+  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
       : selection.to >= from && selection.from <= to;
   }
 
-  function lineSyntax(text) {
-    const heading = text.match(/^( {0,3})(#{1,4})(?:[ \t]+|$)/);
-    const quote = text.match(/^( {0,3})>[ \t]?/);
-    const unordered = text.match(/^([-*])[ \t]+(.+)$/);
-    const ordered = text.match(/^(\d+[.)])[ \t]+(.+)$/);
+  function offsetInlineToken(token, offset) {
     return {
-      headingLevel: heading ? heading[2].length : 0,
-      headingMarkerFrom: heading ? heading[1].length : -1,
-      headingMarkerTo: heading ? heading[0].length : -1,
-      quoteMarkerFrom: quote ? quote[1].length : -1,
-      quoteMarkerTo: quote ? quote[0].length : -1,
-      listType: unordered ? "unordered" : ordered ? "ordered" : "",
-      empty: !text.trim()
+      ...token,
+      from: token.from + offset,
+      openTo: token.openTo + offset,
+      contentFrom: token.contentFrom + offset,
+      contentTo: token.contentTo + offset,
+      closeFrom: token.closeFrom + offset,
+      to: token.to + offset
     };
   }
 
-  function layoutLines(source, starts) {
-    const lines = source.split("\n").map((text, index) => ({
-      index,
-      text,
-      from: starts[index],
-      to: starts[index] + text.length,
-      ...lineSyntax(text),
+  function tableAwareInlineTokens(source, tableContexts) {
+    const tokens = [];
+    let cursor = 0;
+    [...tableContexts].sort((left, right) => left.from - right.from).forEach(table => {
+      if (cursor < table.from) {
+        tokens.push(...inlineTokens(source.slice(cursor, table.from)).map(token => offsetInlineToken(token, cursor)));
+      }
+      [...table.cells].sort((left, right) => left.from - right.from).forEach(cell => {
+        tokens.push(...inlineTokens(source.slice(cell.from, cell.to)).map(token => ({
+          ...offsetInlineToken(token, cell.from),
+          tableCell: true
+        })));
+      });
+      cursor = Math.max(cursor, table.to);
+    });
+    if (cursor < source.length) {
+      tokens.push(...inlineTokens(source.slice(cursor)).map(token => offsetInlineToken(token, cursor)));
+    }
+    return tokens.sort((left, right) => left.from - right.from || left.to - right.to);
+  }
+
+  function lineSyntax(text) {
+    if (!markdownDocumentModel?.parseLine) throw new Error("Markdown 문서 모델을 초기화하지 못했습니다.");
+    return markdownDocumentModel.parseLine(text);
+  }
+
+  function layoutLines(source) {
+    if (!markdownDocumentModel?.parseDocument) throw new Error("Markdown 문서 모델을 초기화하지 못했습니다.");
+    const documentModel = markdownDocumentModel.parseDocument(source, { preserveBlankLines: true });
+    const lines = documentModel.lines.map(line => ({
+      ...line,
       blockId: -1,
       blockType: "",
       blockStart: false,
@@ -109,83 +260,271 @@
       firstListItem: false
     }));
     const blocks = [];
-    let paragraph = null;
-    let quote = null;
-    let listType = "";
-    let listGroup = 0;
     let nextBlockId = 0;
-    const openBlock = (type, line, extra = {}) => {
-      const block = { id: nextBlockId++, type, lines: [], ...extra };
+    let nextListGroup = 0;
+    const assignBlock = (type, lineIndices, extra = {}) => {
+      const validLineIndices = lineIndices.filter(index => lines[index]);
+      if (!validLineIndices.length) return null;
+      const block = { id: nextBlockId++, type, lines: validLineIndices, ...extra };
       blocks.push(block);
-      line.blockId = block.id;
-      line.blockType = type;
-      line.blockStart = true;
-      block.lines.push(line.index);
+      validLineIndices.forEach((lineIndex, index) => {
+        const line = lines[lineIndex];
+        line.blockId = block.id;
+        line.blockType = type;
+        line.blockStart = index === 0;
+        line.blockEnd = index === validLineIndices.length - 1;
+        Object.assign(line, extra);
+      });
       return block;
     };
-    const appendBlock = (block, line) => {
-      line.blockId = block.id;
-      line.blockType = block.type;
-      block.lines.push(line.index);
-    };
-
-    lines.forEach(line => {
-      if (line.quoteMarkerFrom >= 0) {
-        paragraph = null;
-        const nestedQuote = Boolean(listType);
-        if (!quote || quote.nestedQuote !== nestedQuote || quote.listGroup !== listGroup) {
-          quote = openBlock("quote", line, { nestedQuote, listGroup: nestedQuote ? listGroup : 0 });
-        } else appendBlock(quote, line);
-        line.nestedQuote = nestedQuote;
+    documentModel.blocks.forEach(sourceBlock => {
+      if (sourceBlock.type === "blank") return;
+      if (sourceBlock.type === "horizontalRule") {
+        assignBlock("horizontalRule", [sourceBlock.lineIndex]);
         return;
       }
-      quote = null;
-      if (line.empty) {
-        paragraph = null;
-        listType = "";
+      if (sourceBlock.type === "image") {
+        assignBlock("image", [sourceBlock.lineIndex], { assetId: sourceBlock.assetId });
         return;
       }
-      if (line.headingLevel) {
-        paragraph = null;
-        listType = "";
-        openBlock(`heading${line.headingLevel}`, line);
+      if (sourceBlock.type === "heading") {
+        assignBlock(`heading${sourceBlock.level}`, [sourceBlock.lineIndex]);
         return;
       }
-      if (line.listType) {
-        paragraph = null;
-        const firstListItem = line.listType !== listType;
-        if (firstListItem) listGroup += 1;
-        listType = line.listType;
-        line.firstListItem = firstListItem;
-        openBlock("listItem", line, { listGroup, firstListItem });
+      if (sourceBlock.type === "paragraph" || sourceBlock.type === "quote") {
+        assignBlock(sourceBlock.type, sourceBlock.lineIndices);
         return;
       }
-      listType = "";
-      if (!paragraph) paragraph = openBlock("paragraph", line);
-      else appendBlock(paragraph, line);
+      if (sourceBlock.type === "table") {
+        const tableBlock = assignBlock("table", sourceBlock.lineIndices, {
+          tableColumnCount: sourceBlock.columnCount,
+          tableAlignments: sourceBlock.alignments,
+          tableFrom: sourceBlock.from,
+          tableTo: sourceBlock.to
+        });
+        if (!tableBlock) return;
+        Object.assign(tableBlock, {
+          from: sourceBlock.from,
+          to: sourceBlock.to,
+          columnCount: sourceBlock.columnCount,
+          alignments: sourceBlock.alignments
+        });
+        [sourceBlock.header, sourceBlock.delimiter, ...sourceBlock.rows].forEach(row => {
+          const line = lines[row.lineIndex];
+          if (!line) return;
+          line.tableRole = row.role;
+          line.tableCells = row.cells;
+          line.tablePipes = row.pipes;
+          line.tableRaw = row.raw;
+          line.tableHasLeadingPipe = row.hasLeadingPipe;
+          line.tableHasTrailingPipe = row.hasTrailingPipe;
+          line.tableEscapedPipeBackslashes = row.cells.flatMap(tableEscapedPipeBackslashes);
+          line.tableEmptyCellColumns = row.cells.filter(cell => !cell.synthetic && !cell.text).map(cell => cell.columnIndex);
+          line.tableSyntheticCellColumns = row.cells.filter(cell => cell.synthetic).map(cell => cell.columnIndex);
+        });
+        return;
+      }
+      if (sourceBlock.type !== "list") return;
+      const listGroup = ++nextListGroup;
+      const markerWidth = Math.max(1, Number(sourceBlock.markerWidth) || 1);
+      sourceBlock.items.forEach((item, itemIndex) => {
+        const itemBlock = assignBlock("listItem", [item.lineIndex], {
+          listGroup,
+          listMarkerWidth: markerWidth,
+          firstListItem: itemIndex === 0,
+          listEnd: itemIndex === sourceBlock.items.length - 1
+        });
+        item.children.forEach(child => {
+          if (child.type !== "quote") return;
+          assignBlock("quote", child.lineIndices, { nestedQuote: true, listGroup });
+        });
+        if (itemBlock) itemBlock.children = item.children;
+      });
     });
 
-    blocks.forEach(block => {
-      const lastLine = lines[block.lines.at(-1)];
-      if (lastLine) lastLine.blockEnd = true;
-    });
-    const listGroups = new Map();
-    blocks.forEach(block => {
-      if (!block.listGroup) return;
-      if (!listGroups.has(block.listGroup)) listGroups.set(block.listGroup, []);
-      listGroups.get(block.listGroup).push(block);
-    });
-    listGroups.forEach(group => {
-      const last = group.at(-1);
-      if (last) last.listEnd = true;
+    return { lines, blocks };
+  }
+
+  function tableCellContexts(value) {
+    const source = String(value ?? "").replace(/\r\n?/g, "\n");
+    const layout = layoutLines(source);
+    return layout.blocks.filter(block => block.type === "table").map(block => {
+      const rows = block.lines
+        .map(lineIndex => layout.lines[lineIndex])
+        .filter(line => line && line.tableRole !== "delimiter")
+        .map((line, rowIndex) => ({
+          line,
+          rowIndex,
+          cells: line.tableCells.map(cell => ({ cell, line, rowIndex, columnIndex: cell.columnIndex }))
+        }));
+      const cells = rows.flatMap(row => row.cells);
+      const lines = block.lines.map(lineIndex => layout.lines[lineIndex]).filter(Boolean);
+      return { block, lines, rows, cells };
     });
+  }
 
-    return { lines, blocks };
+  function tableCellContextFromTables(tables, position) {
+    const offset = Math.max(0, Number(position) || 0);
+    for (const table of tables) {
+      for (const context of table.cells) {
+        const { cell, line, columnIndex } = context;
+        const firstCell = columnIndex === 0;
+        const lastCell = columnIndex === line.tableCells.length - 1;
+        const touchesContent = offset >= cell.rawFrom && offset <= cell.rawTo;
+        const touchesLeadingPipe = firstCell && line.tablePipes?.[0]?.from === offset;
+        const trailingPipe = line.tablePipes?.at(-1);
+        const touchesTrailingPipe = lastCell && (
+          trailingPipe?.from === offset || trailingPipe?.to === offset
+        );
+        if (touchesContent || touchesLeadingPipe || touchesTrailingPipe) return { ...context, table };
+      }
+    }
+    return null;
+  }
+
+  function tableCellContextAt(value, position) {
+    return tableCellContextFromTables(tableCellContexts(value), position);
+  }
+
+  function tableSelectionCrossesStructure(value, selection) {
+    const source = String(value ?? "").replace(/\r\n?/g, "\n");
+    const anchor = Math.max(0, Math.min(source.length, Number(selection?.anchor) || 0));
+    const head = Math.max(0, Math.min(source.length, Number(selection?.head) || 0));
+    const from = Math.min(anchor, head);
+    const to = Math.max(anchor, head);
+    if (from === to) return false;
+    const tables = tableCellContexts(source);
+    const start = tableCellContextFromTables(tables, from);
+    const end = tableCellContextFromTables(tables, to);
+    for (const table of tables) {
+      if (to <= table.block.from || from >= table.block.to) continue;
+      if (!start || !end) return true;
+      const sameTable = start.table.block.from === table.block.from && end.table.block.from === table.block.from;
+      const sameCell = start.line.index === end.line.index && start.columnIndex === end.columnIndex;
+      const insideRawCell = from >= start.cell.rawFrom && to <= start.cell.rawTo;
+      if (!sameTable || !sameCell || !insideRawCell) return true;
+    }
+    return false;
+  }
+
+  function tableCellNavigationDestination(value, selection, direction) {
+    const anchor = Math.max(0, Number(selection?.anchor) || 0);
+    const head = Math.max(0, Number(selection?.head) || 0);
+    if (anchor !== head) return null;
+    const tables = tableCellContexts(value);
+    const current = tableCellContextFromTables(tables, head);
+    if (!current) return null;
+    const { table, cell, rowIndex, columnIndex } = current;
+    const cellLength = Math.max(0, cell.to - cell.from);
+    const contentOffset = Math.max(0, Math.min(cellLength, head - cell.from));
+    const flatIndex = table.cells.findIndex(context => (
+      context.line.index === current.line.index && context.columnIndex === columnIndex
+    ));
+    const destination = (targetContext, position) => targetContext
+      ? { position, context: { ...targetContext, table } }
+      : null;
+    let target = null;
+
+    if (direction === "left") {
+      if (head > cell.from) return null;
+      target = table.cells[flatIndex - 1] || null;
+      return destination(target, target?.cell.to);
+    }
+    if (direction === "right") {
+      if (head < cell.to) return null;
+      target = table.cells[flatIndex + 1] || null;
+      return destination(target, target?.cell.from);
+    }
+    if (direction === "previous") {
+      target = table.cells[flatIndex - 1] || null;
+      return destination(target, target?.cell.to);
+    }
+    if (direction === "next") {
+      target = table.cells[flatIndex + 1] || null;
+      return destination(target, target?.cell.from);
+    }
+    if (direction === "up" || direction === "down") {
+      const rowStep = direction === "up" ? -1 : 1;
+      for (let targetRow = rowIndex + rowStep; targetRow >= 0 && targetRow < table.rows.length; targetRow += rowStep) {
+        target = table.rows[targetRow].cells.find(context => context.columnIndex === columnIndex) || null;
+        if (!target) continue;
+        return destination(target, Math.min(target.cell.to, target.cell.from + contentOffset));
+      }
+    }
+    return null;
+  }
+
+  function tableCellNavigationTarget(value, selection, direction) {
+    return tableCellNavigationDestination(value, selection, direction)?.position ?? null;
+  }
+
+  function syntheticTableCellMaterialization(context) {
+    if (!context?.cell?.synthetic || !context.line?.tableCells) return null;
+    const firstSyntheticColumn = context.line.tableCells.findIndex(cell => cell.synthetic);
+    if (firstSyntheticColumn < 0 || context.columnIndex < firstSyntheticColumn) return null;
+    const pipeCount = context.columnIndex - firstSyntheticColumn + (context.line.tableHasTrailingPipe ? 0 : 1);
+    const insert = "|".repeat(Math.max(0, pipeCount));
+    return {
+      from: context.line.to,
+      insert,
+      position: context.line.to + insert.length
+    };
+  }
+
+  function safeTableCellInput(value, precedingBackslashes = 0) {
+    const source = String(value ?? "");
+    let result = "";
+    let trailingBackslashes = Math.max(0, Number(precedingBackslashes) || 0);
+    for (let index = 0; index < source.length; index += 1) {
+      const character = source[index];
+      if (character === "\r") {
+        if (source[index + 1] === "\n") index += 1;
+        result += " ";
+        trailingBackslashes = 0;
+        continue;
+      }
+      if (character === "\n") {
+        result += " ";
+        trailingBackslashes = 0;
+        continue;
+      }
+      if (character === "|") {
+        if (trailingBackslashes % 2 === 0) result += "\\";
+        result += character;
+        trailingBackslashes = 0;
+        continue;
+      }
+      result += character;
+      trailingBackslashes = character === "\\" ? trailingBackslashes + 1 : 0;
+    }
+    return result;
+  }
+
+  function safeTableCellReplacement(value, from, to, insertedValue) {
+    const source = String(value ?? "");
+    const changeFrom = Math.max(0, Math.min(source.length, Number(from) || 0));
+    const changeTo = Math.max(changeFrom, Math.min(source.length, Number(to) || 0));
+    let precedingBackslashes = 0;
+    for (let cursor = changeFrom - 1; cursor >= 0 && source[cursor] === "\\"; cursor -= 1) precedingBackslashes += 1;
+    let safeText = safeTableCellInput(insertedValue, precedingBackslashes);
+    let suffixBackslashes = 0;
+    for (let cursor = changeTo; cursor < source.length && source[cursor] === "\\"; cursor += 1) suffixBackslashes += 1;
+    const suffixPipe = changeTo + suffixBackslashes;
+    if (source[suffixPipe] !== "|") return safeText;
+
+    let originalBackslashes = 0;
+    for (let cursor = suffixPipe - 1; cursor >= 0 && source[cursor] === "\\"; cursor -= 1) originalBackslashes += 1;
+    let insertedBackslashes = 0;
+    for (let cursor = safeText.length - 1; cursor >= 0 && safeText[cursor] === "\\"; cursor -= 1) insertedBackslashes += 1;
+    const keepsPrecedingRun = safeText.length === insertedBackslashes;
+    const resultingBackslashes = suffixBackslashes + insertedBackslashes + (keepsPrecedingRun ? precedingBackslashes : 0);
+    if (resultingBackslashes % 2 !== originalBackslashes % 2) safeText += "\\";
+    return safeText;
   }
 
   function previewModel(value, selections = [{ anchor: 0, head: 0 }]) {
     const source = String(value ?? "").replace(/\r\n?/g, "\n");
-    const starts = lineStarts(source);
+    const starts = markdownDocumentModel.lineStarts(source);
     const normalizedSelections = normalizeSelections(selections, source.length);
     const activeLines = new Set();
     normalizedSelections.forEach(selection => {
@@ -193,12 +532,34 @@
       const last = lineAt(starts, selection.to);
       for (let line = first; line <= last; line += 1) activeLines.add(line);
     });
-    const layout = layoutLines(source, starts);
+    const layout = layoutLines(source);
     layout.lines.forEach(line => { line.active = activeLines.has(line.index); });
-    const tokens = inlineTokens(source).map(token => ({
-      ...token,
-      active: normalizedSelections.some(selection => selectionTouchesRange(selection, token.from, token.to))
+    const tableContexts = layout.blocks.filter(block => block.type === "table").map(block => ({
+      block,
+      from: block.from,
+      to: block.to,
+      cells: block.lines.flatMap(lineIndex => (
+        layout.lines[lineIndex]?.tableCells?.filter(cell => !cell.synthetic) || []
+      ))
     }));
+    tableContexts.forEach(({ block }) => {
+      block.active = normalizedSelections.some(selection => selectionTouchesRange(selection, block.from, block.to));
+      block.lines.forEach(lineIndex => {
+        const line = layout.lines[lineIndex];
+        if (!line) return;
+        line.tableActiveCellColumns = line.tableCells
+          .filter(cell => !cell.synthetic && normalizedSelections.some(selection => (
+            selectionTouchesRange(selection, cell.rawFrom, cell.rawTo)
+          )))
+          .map(cell => cell.columnIndex);
+      });
+    });
+    const tokens = tableAwareInlineTokens(source, tableContexts)
+      .filter(token => !layout.lines.some(line => line.blockType === "image" && token.from < line.to && token.to > line.from))
+      .map(token => ({
+        ...token,
+        active: token.tableCell !== true && normalizedSelections.some(selection => selectionTouchesRange(selection, token.from, token.to))
+      }));
     return { source, starts, lines: layout.lines, blocks: layout.blocks, tokens };
   }
 
@@ -215,11 +576,44 @@
         .toLowerCase();
       values.push(`writer-md-${blockClass}`);
     }
+    if (line.listType) values.push(`writer-md-list-${line.listType}`);
     if (line.nestedQuote) values.push("writer-md-nested-quote");
     if (line.firstListItem) values.push("writer-md-first-list-item");
+    if (line.blockType === "table") {
+      values.push("writer-md-table-preview-row");
+      if (line.tableActiveCellColumns?.length) values.push("writer-md-table-has-active-cell");
+      if (line.tableRole) values.push(`writer-md-table-${line.tableRole}-row`);
+      if (line.tableColumnCount) values.push(`writer-md-table-columns-${line.tableColumnCount}`);
+      if (line.tableEmptyCellColumns?.length) values.push("writer-md-table-has-empty-cells");
+      if (line.tableSyntheticCellColumns?.length) values.push("writer-md-table-has-synthetic-cells");
+    }
     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) {
@@ -227,8 +621,40 @@
     }
     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) {
+        for (const effect of transaction.effects) if (effect.is(editableEffect)) value = effect.value;
+        return value;
+      }
+    });
+    let replacingValue = false;
+    const imageEditor = typeof globalThis !== "undefined" ? globalThis.WriterMarkdownImageEditor : null;
+    const images = imageEditor?.create({
+      cm, model: markdownDocumentModel, assets: options.assets, parent: options.parent,
+      onIdle: () => setTimeout(() => {
+        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)
+    });
     const focusEffect = cm.StateEffect.define();
+    const syntheticCellMaterializationEffect = cm.StateEffect.define();
     const focusField = cm.StateField.define({
       create() { return false; },
       update(focused, transaction) {
@@ -238,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 }))
@@ -248,7 +703,61 @@
         class: active ? "writer-md-syntax" : "writer-md-syntax-hidden"
       });
       model.lines.forEach(line => {
-        ranges.push(cm.Decoration.line({ attributes: { class: classNames(line) } }).range(line.from));
+        if (line.blockType === "image" && images) return;
+        const attributes = { class: classNames(line) };
+        if (!state.doc.length && options.placeholder) attributes["data-placeholder"] = String(options.placeholder);
+        if (line.listType) attributes.style = `--writer-md-list-marker-width:${line.listMarkerWidth || 1}ch`;
+        if (line.blockType === "table") {
+          const columnCount = line.tableColumnCount || 1;
+          const minimumWidth = Math.max(14, Math.min(72, columnCount * 7));
+          const columnWidth = Number((100 / columnCount).toFixed(6));
+          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;
+            const alignment = ["left", "center", "right"].includes(line.tableAlignments?.[columnIndex])
+              ? line.tableAlignments[columnIndex]
+              : "left";
+            const positionClasses = [
+              columnIndex === 0 ? "writer-md-table-cell-first" : "",
+              columnIndex === line.tableCells.length - 1 ? "writer-md-table-cell-last" : "",
+              line.tableActiveCellColumns?.includes(columnIndex) ? "writer-md-table-cell-active" : ""
+            ].filter(Boolean).join(" ");
+            ranges.push(cm.Decoration.mark({
+              class: `writer-md-table-cell writer-md-table-align-${alignment}${positionClasses ? ` ${positionClasses}` : ""}`,
+              attributes: {
+                style: `--writer-md-table-cell-column:${columnIndex + 1}`,
+                "data-writer-md-table-cell-from": String(cell.from),
+                "data-writer-md-table-cell-to": String(cell.to)
+              },
+              inclusiveEnd: false
+            }).range(cell.rawFrom, cell.rawTo));
+            tableCellEdgeWhitespaceRanges(cell).forEach(whitespace => {
+              ranges.push(cm.Decoration.mark({
+                class: "writer-md-table-cell-edge-whitespace",
+                inclusiveEnd: false
+              }).range(whitespace.from, whitespace.to));
+            });
+          });
+          line.tablePipes.forEach(pipe => {
+            ranges.push(cm.Decoration.mark({
+              class: "writer-md-table-pipe",
+              inclusiveEnd: false
+            }).range(pipe.from, pipe.to));
+          });
+          line.tableEscapedPipeBackslashes.forEach(backslash => {
+            ranges.push(cm.Decoration.mark({
+              class: "writer-md-table-escaped-pipe-backslash",
+              inclusiveEnd: false
+            }).range(backslash.from, backslash.to));
+          });
+        }
         if (line.headingMarkerFrom >= 0) {
           const from = line.from + line.headingMarkerFrom;
           const to = line.from + line.headingMarkerTo;
@@ -258,6 +767,25 @@
           const to = line.from + line.quoteMarkerTo;
           ranges.push(syntaxDecoration(line.active).range(from, to));
         }
+        if (line.listIndentTo > 0) {
+          const from = line.from;
+          const to = line.from + line.listIndentTo;
+          ranges.push(cm.Decoration.mark({
+            class: "writer-md-list-leading-indent",
+            inclusiveEnd: false
+          }).range(from, to));
+        }
+        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({
+            class: "writer-md-list-marker",
+            inclusiveEnd: false
+          }).range(from, to));
+        }
       });
       model.tokens.forEach(token => {
         ranges.push(cm.Decoration.mark({ class: `writer-md-${token.type}` }).range(token.contentFrom, token.contentTo));
@@ -273,50 +801,621 @@
       },
       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)
     });
+    const buildAtomicRanges = state => {
+      const model = previewModel(state.doc.toString(), []);
+      const ranges = [];
+      const atomic = cm.Decoration.mark({});
+      model.lines.filter(line => line.blockType === "table").forEach(line => {
+        if (line.tableRole === "delimiter") {
+          if (line.to > line.from) ranges.push(atomic.range(line.from, line.to));
+          return;
+        }
+        line.tablePipes.forEach(pipe => ranges.push(atomic.range(pipe.from, pipe.to)));
+        line.tableCells.forEach(cell => {
+          tableCellEdgeWhitespaceRanges(cell).forEach(whitespace => {
+            ranges.push(atomic.range(whitespace.from, whitespace.to));
+          });
+        });
+        line.tableEscapedPipeBackslashes.forEach(backslash => ranges.push(atomic.range(backslash.from, backslash.to)));
+      });
+      model.tokens.filter(token => token.tableCell === true).forEach(token => {
+        ranges.push(atomic.range(token.from, token.openTo));
+        ranges.push(atomic.range(token.closeFrom, token.to));
+      });
+      return cm.Decoration.set(ranges, true);
+    };
+    const tableAtomicField = cm.StateField.define({
+      create(state) {
+        return buildAtomicRanges(state);
+      },
+      update(ranges, transaction) {
+        return transaction.docChanged ? buildAtomicRanges(transaction.state) : ranges;
+      },
+      provide: field => cm.EditorView.atomicRanges.from(field, ranges => () => ranges)
+    });
+    const tableCellPointerPosition = (view, cellElement, event, from, to) => {
+      const nativePosition = view.posAtCoords({ x: event.clientX, y: event.clientY });
+      const documentRef = cellElement.ownerDocument;
+      const walker = documentRef.createTreeWalker(cellElement, 4);
+      let closestPosition = null;
+      let closestDistance = Number.POSITIVE_INFINITY;
+      for (let textNode = walker.nextNode(); textNode; textNode = walker.nextNode()) {
+        const parent = textNode.parentElement;
+        if (parent?.closest?.(".writer-md-syntax-hidden,.writer-md-table-cell-edge-whitespace,.writer-md-table-escaped-pipe-backslash")) continue;
+        for (let offset = 0; offset <= textNode.nodeValue.length; offset += 1) {
+          let position = null;
+          try {
+            position = view.posAtDOM(textNode, offset);
+          } catch {
+            continue;
+          }
+          if (!Number.isSafeInteger(position) || position < from || position > to) continue;
+          const range = documentRef.createRange();
+          range.setStart(textNode, offset);
+          range.collapse(true);
+          const rect = range.getBoundingClientRect();
+          const verticalDistance = event.clientY < rect.top
+            ? rect.top - event.clientY
+            : event.clientY > rect.bottom
+              ? event.clientY - rect.bottom
+              : 0;
+          const distance = (verticalDistance * 10000) + Math.abs(event.clientX - rect.left);
+          if (distance >= closestDistance) continue;
+          closestDistance = distance;
+          closestPosition = position;
+        }
+      }
+      if (Number.isSafeInteger(closestPosition)) return closestPosition;
+      if (Number.isSafeInteger(nativePosition) && nativePosition >= from && nativePosition <= to) {
+        return nativePosition;
+      }
+
+      const rect = cellElement.getBoundingClientRect();
+      const ratio = rect.width > 0
+        ? Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width))
+        : 0;
+      return Math.max(from, Math.min(to, from + Math.round((to - from) * ratio)));
+    };
+    let tablePointerStart = null;
+    const handleTableCellMouseDown = (event, view) => {
+      tablePointerStart = null;
+      if (event.button !== 0 || event.detail !== 1 || event.shiftKey) return false;
+      const cellElement = event.target?.closest?.(".writer-md-table-cell");
+      if (!cellElement || !view.dom.contains(cellElement)) return false;
+      const from = Number(cellElement.getAttribute("data-writer-md-table-cell-from"));
+      const to = Number(cellElement.getAttribute("data-writer-md-table-cell-to"));
+      if (!Number.isSafeInteger(from) || !Number.isSafeInteger(to) || from > to) return false;
+      const position = tableCellPointerPosition(view, cellElement, event, from, to);
+      view.focus();
+      tablePointerStart = { clientX: event.clientX, clientY: event.clientY, from, to, position };
+      return false;
+    };
+    const tableCellWordSelection = (source, from, to, position) => {
+      const text = source.slice(from, to);
+      const relativePosition = Math.max(0, Math.min(text.length, position - from));
+      if (typeof Intl?.Segmenter === "function") {
+        const segments = new Intl.Segmenter(undefined, { granularity: "word" }).segment(text);
+        for (const segment of segments) {
+          const segmentFrom = segment.index;
+          const segmentTo = segment.index + segment.segment.length;
+          if (relativePosition < segmentFrom || relativePosition > segmentTo || !segment.segment.trim()) continue;
+          return { anchor: from + segmentFrom, head: from + segmentTo };
+        }
+      }
+      let wordFrom = relativePosition;
+      let wordTo = relativePosition;
+      while (wordFrom > 0 && !/\s/u.test(text[wordFrom - 1])) wordFrom -= 1;
+      while (wordTo < text.length && !/\s/u.test(text[wordTo])) wordTo += 1;
+      return wordFrom === wordTo
+        ? { anchor: Math.max(from, Math.min(to, position)), head: Math.max(from, Math.min(to, position)) }
+        : { anchor: from + wordFrom, head: from + wordTo };
+    };
+    const handleTableCellMouseUp = (event, view) => {
+      const start = tablePointerStart;
+      tablePointerStart = null;
+      if (event.button !== 0 || event.shiftKey) return false;
+      if (event.detail === 2) {
+        const cellElement = event.target?.closest?.(".writer-md-table-cell");
+        if (!cellElement || !view.dom.contains(cellElement)) return false;
+        const from = Number(cellElement.getAttribute("data-writer-md-table-cell-from"));
+        const to = Number(cellElement.getAttribute("data-writer-md-table-cell-to"));
+        if (!Number.isSafeInteger(from) || !Number.isSafeInteger(to) || from > to) return false;
+        const position = tableCellPointerPosition(view, cellElement, event, from, to);
+        event.preventDefault();
+        view.dispatch({
+          selection: tableCellWordSelection(view.state.doc.toString(), from, to, position),
+          scrollIntoView: true
+        });
+        return true;
+      }
+      if (!start || event.detail !== 1) return false;
+      if (Math.hypot(event.clientX - start.clientX, event.clientY - start.clientY) > 4) return false;
+      const cellElement = event.target?.closest?.(".writer-md-table-cell");
+      if (!cellElement || !view.dom.contains(cellElement)) return false;
+      const from = Number(cellElement.getAttribute("data-writer-md-table-cell-from"));
+      const to = Number(cellElement.getAttribute("data-writer-md-table-cell-to"));
+      if (from !== start.from || to !== start.to) return false;
+      event.preventDefault();
+      view.dispatch({ selection: { anchor: start.position }, scrollIntoView: true });
+      return true;
+    };
+    const tableViewIsComposing = view => Boolean(view.composing || view.compositionStarted);
+    const continueListMarkup = cm.insertNewlineContinueMarkupCommand({ nonTightLists: false });
+    const moveToTableDestination = (view, destination) => {
+      if (!destination || !Number.isSafeInteger(destination.position)) return false;
+      const materialization = syntheticTableCellMaterialization(destination.context);
+      if (materialization?.insert) {
+        view.dispatch({
+          changes: {
+            from: materialization.from,
+            to: materialization.from,
+            insert: materialization.insert
+          },
+          selection: { anchor: materialization.position },
+          effects: syntheticCellMaterializationEffect.of({
+            tableFrom: destination.context.table.block.from,
+            lineIndex: destination.context.line.index,
+            columnIndex: destination.context.columnIndex,
+            ...materialization
+          }),
+          userEvent: "input.type",
+          scrollIntoView: true
+        });
+        return true;
+      }
+      view.dispatch({ selection: { anchor: destination.position }, scrollIntoView: true });
+      return true;
+    };
+    const moveTableCell = direction => view => {
+      if (tableViewIsComposing(view)) return false;
+      const selection = view.state.selection.main;
+      if (!selection.empty) return false;
+      const source = view.state.doc.toString();
+      const current = tableCellContextAt(source, selection.head);
+      const destination = tableCellNavigationDestination(
+        source,
+        { anchor: selection.anchor, head: selection.head },
+        direction
+      );
+      if (!destination || (destination.position === selection.head && !destination.context.cell.synthetic)) {
+        const atProtectedOuterBoundary = current && (
+          (direction === "left" && selection.head <= current.cell.from && current.columnIndex === 0 && current.rowIndex === 0)
+          || (
+            direction === "right"
+            && selection.head >= current.cell.to
+            && current.rowIndex === current.table.rows.length - 1
+            && current.columnIndex === current.table.rows.at(-1)?.cells.at(-1)?.columnIndex
+          )
+        );
+        return Boolean(atProtectedOuterBoundary);
+      }
+      return moveToTableDestination(view, destination);
+    };
+    const protectTableBoundary = direction => view => {
+      if (tableViewIsComposing(view)) return false;
+      const selection = view.state.selection.main;
+      const source = view.state.doc.toString();
+      if (!selection.empty) {
+        return tableSelectionCrossesStructure(source, { anchor: selection.anchor, head: selection.head });
+      }
+      const current = tableCellContextAt(source, selection.head);
+      if (!current) return false;
+      const pipeOffset = direction === "backward" ? selection.head - 1 : selection.head;
+      const atVisibleBoundary = direction === "backward"
+        ? selection.head <= current.cell.from
+        : selection.head >= current.cell.to;
+      const atStructuralPipe = current.line.tablePipes.some(pipe => pipe.from === pipeOffset);
+      if (!atVisibleBoundary && !atStructuralPipe) return false;
+      const destination = tableCellNavigationDestination(
+        source,
+        { anchor: selection.anchor, head: selection.head },
+        direction === "backward" ? "previous" : "next"
+      );
+      if (destination && (
+        destination.position !== selection.head || destination.context.cell.synthetic
+      )) {
+        moveToTableDestination(view, destination);
+      }
+      return true;
+    };
+    const enterTableCell = view => {
+      if (tableViewIsComposing(view)) return false;
+      const selection = view.state.selection.main;
+      if (!selection.empty || !tableCellContextAt(view.state.doc.toString(), selection.head)) return false;
+      const destination = tableCellNavigationDestination(
+        view.state.doc.toString(),
+        { anchor: selection.anchor, head: selection.head },
+        "down"
+      );
+      if (destination && (destination.position !== selection.head || destination.context.cell.synthetic)) {
+        moveToTableDestination(view, destination);
+      }
+      return true;
+    };
+    const handleEnter = view => enterTableCell(view) || continueListMarkup(view);
+    const replaceWithSafeTableCellInput = (view, from, to, text, userEvent = "input.type") => {
+      if (tableViewIsComposing(view)) return false;
+      const source = view.state.doc.toString();
+      if (tableSelectionCrossesStructure(source, { anchor: from, head: to })) return true;
+      const tables = tableCellContexts(source);
+      const start = tableCellContextFromTables(tables, from);
+      const end = tableCellContextFromTables(tables, to);
+      if (!start || !end || start.line.index !== end.line.index || start.columnIndex !== end.columnIndex) return false;
+      const safeText = safeTableCellReplacement(source, from, to, text);
+      if (safeText === text) return false;
+      view.dispatch({
+        changes: { from, to, insert: safeText },
+        selection: { anchor: from + safeText.length },
+        userEvent,
+        scrollIntoView: true
+      });
+      return true;
+    };
+    const tableInputHandler = cm.EditorView.inputHandler.of((view, from, to, text) => (
+      replaceWithSafeTableCellInput(view, from, to, text)
+    ));
+    const handleTableBeforeInput = (event, view) => {
+      if (event.isComposing || tableViewIsComposing(view)) return false;
+      const selection = view.state.selection.main;
+      const crossesStructure = tableSelectionCrossesStructure(
+        view.state.doc.toString(),
+        { anchor: selection.anchor, head: selection.head }
+      );
+      if (crossesStructure && /^(?:insert|delete)/.test(event.inputType)) {
+        event.preventDefault();
+        return true;
+      }
+      if (!["insertText", "insertReplacementText"].includes(event.inputType) || typeof event.data !== "string") {
+        return false;
+      }
+      if (!replaceWithSafeTableCellInput(view, selection.from, selection.to, event.data, "input.type")) return false;
+      event.preventDefault();
+      return true;
+    };
+    const handleTablePaste = (event, view) => {
+      if (tableViewIsComposing(view)) return false;
+      const text = event.clipboardData?.getData("text/plain");
+      if (typeof text !== "string") return false;
+      const selection = view.state.selection.main;
+      if (!replaceWithSafeTableCellInput(view, selection.from, selection.to, text, "input.paste")) return false;
+      event.preventDefault();
+      return true;
+    };
+    const validatesSyntheticCellMaterialization = (transaction, tables, request, changes) => {
+      if (!request || changes.length !== 1) return false;
+      const table = tables.find(candidate => candidate.block.from === request.tableFrom);
+      const context = table?.cells.find(candidate => (
+        candidate.line.index === request.lineIndex && candidate.columnIndex === request.columnIndex
+      ));
+      const expected = syntheticTableCellMaterialization(context && { ...context, table });
+      const change = changes[0];
+      if (
+        !expected?.insert
+        || request.from !== expected.from
+        || request.insert !== expected.insert
+        || request.position !== expected.position
+        || change.fromA !== expected.from
+        || change.toA !== expected.from
+        || change.insert !== expected.insert
+      ) return false;
+
+      const nextTable = tableCellContexts(transaction.newDoc.toString())
+        .find(candidate => candidate.block.from === table.block.from);
+      const nextLine = nextTable?.lines.find(line => line.index === context.line.index);
+      const nextTarget = nextLine?.tableCells?.[context.columnIndex];
+      if (
+        !nextTable
+        || nextTable.block.columnCount !== table.block.columnCount
+        || nextTable.rows.length !== table.rows.length
+        || nextTable.lines.length !== table.lines.length
+        || nextTable.block.alignments.join("|") !== table.block.alignments.join("|")
+        || !nextTarget?.synthetic
+        || nextTarget.from !== expected.position
+        || nextLine.tableHasLeadingPipe !== context.line.tableHasLeadingPipe
+        || !nextLine.tableHasTrailingPipe
+      ) return false;
+
+      const existingText = context.line.tableCells.filter(cell => !cell.synthetic).map(cell => cell.text);
+      const nextText = nextLine.tableCells.slice(0, existingText.length).map(cell => cell.text);
+      if (existingText.join("\u0000") !== nextText.join("\u0000")) return false;
+      if (nextLine.tableCells.slice(0, context.columnIndex).some(cell => cell.synthetic)) return false;
+      const oldPipes = context.line.tablePipes.map(pipe => pipe.from);
+      const nextPipes = nextLine.tablePipes.map(pipe => pipe.from);
+      const addedPipes = Array.from({ length: expected.insert.length }, (_, index) => expected.from + index);
+      return nextPipes.length === oldPipes.length + addedPipes.length
+        && oldPipes.every((position, index) => nextPipes[index] === position)
+        && addedPipes.every((position, index) => nextPipes[oldPipes.length + index] === position);
+    };
+    const tableStructureChangeFilter = cm.EditorState.changeFilter.of(transaction => {
+      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 = [];
+      transaction.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+        changes.push({ fromA, toA, fromB, toB, insert: inserted.toString() });
+      });
+      const materializationEffects = transaction.effects.filter(effect => (
+        effect.is(syntheticCellMaterializationEffect)
+      ));
+      if (materializationEffects.length) {
+        return materializationEffects.length === 1 && validatesSyntheticCellMaterialization(
+          transaction,
+          tables,
+          materializationEffects[0].value,
+          changes
+        );
+      }
+      const touchedTables = tables.filter(table => {
+        const guardFrom = Math.max(0, table.block.from - 1);
+        let guardTo = Math.min(source.length, table.block.to + 1);
+        const nextLineStart = table.block.to + 1;
+        if (source[table.block.to] === "\n" && nextLineStart < source.length && source[nextLineStart] !== "\n") {
+          const nextBreak = source.indexOf("\n", nextLineStart);
+          guardTo = nextBreak < 0 ? source.length : nextBreak;
+        }
+        return changes.some(change => (
+          change.fromA === change.toA
+            ? change.fromA >= guardFrom && change.fromA <= guardTo
+            : change.fromA < guardTo && change.toA > guardFrom
+        ));
+      });
+      if (!touchedTables.length) return true;
+
+      for (const table of touchedTables) {
+        const delimiter = table.lines.find(line => line.tableRole === "delimiter");
+        for (const change of changes) {
+          if (
+            change.fromA === change.toA
+            && delimiter
+            && change.fromA >= delimiter.from
+            && change.fromA <= delimiter.to
+          ) return false;
+          if (change.fromA === change.toA) continue;
+          const structuralRanges = table.lines.flatMap((line, lineIndex) => {
+            const ranges = line.tableRole === "delimiter"
+              ? [{ from: line.from, to: line.to }]
+              : [...line.tablePipes];
+            if (lineIndex < table.lines.length - 1) ranges.push({ from: line.to, to: line.to + 1 });
+            return ranges;
+          });
+          if (table.block.from > 0 && source[table.block.from - 1] === "\n") {
+            structuralRanges.push({ from: table.block.from - 1, to: table.block.from });
+          }
+          if (table.block.to < source.length && source[table.block.to] === "\n") {
+            structuralRanges.push({ from: table.block.to, to: table.block.to + 1 });
+          }
+          if (structuralRanges.some(range => change.fromA < range.to && change.toA > range.from)) {
+            return false;
+          }
+        }
+      }
+
+      const nextTables = tableCellContexts(transaction.newDoc.toString());
+      return touchedTables.every(table => {
+        const mappedFrom = transaction.changes.mapPos(table.block.from, -1);
+        const mappedTo = transaction.changes.mapPos(table.block.to, 1);
+        const nextTable = nextTables.find(candidate => candidate.block.from === mappedFrom);
+        if (!nextTable) return false;
+        if (nextTable.block.to !== mappedTo) return false;
+        if (nextTable.block.columnCount !== table.block.columnCount) return false;
+        if (nextTable.rows.length !== table.rows.length) return false;
+        if (nextTable.lines.length !== table.lines.length) return false;
+        if (nextTable.block.alignments.join("|") !== table.block.alignments.join("|")) return false;
+        return nextTable.lines.every((line, index) => {
+          const previousLine = table.lines[index];
+          if (line.tableRole !== previousLine?.tableRole) return false;
+          if (line.from !== transaction.changes.mapPos(previousLine.from, -1)) return false;
+          if (line.to !== transaction.changes.mapPos(previousLine.to, 1)) return false;
+          if (line.tableHasLeadingPipe !== previousLine.tableHasLeadingPipe) return false;
+          if (line.tableRole === "delimiter" && line.tableRaw !== previousLine.tableRaw) return false;
+          const mappedPipes = previousLine.tablePipes.map(pipe => transaction.changes.mapPos(pipe.from, 1));
+          return mappedPipes.length === line.tablePipes.length
+            && mappedPipes.every((position, pipeIndex) => position === line.tablePipes[pipeIndex]?.from);
+        });
+      });
+    });
     const state = cm.EditorState.create({
       doc: String(options.value ?? "").replace(/\r\n?/g, "\n"),
       extensions: [
-        cm.EditorView.editorAttributes.of({
-          class: "writer-markdown-live-editor",
-          ...(options.placeholder ? { "data-placeholder": String(options.placeholder) } : {})
+        editableField,
+        cm.EditorState.readOnly.compute([editableField], state => !state.field(editableField)),
+        cm.EditorView.editable.compute([editableField], state => state.field(editableField)),
+        cm.EditorState.changeFilter.of(transaction => !transaction.startState.readOnly),
+        ...(images?.extensions || []),
+        cm.EditorView.editorAttributes.of({ class: "writer-markdown-live-editor" }),
+        tableHistoryBoundary,
+        cm.history({
+          joinToEvent: (transaction, adjacent) => adjacent
+            && !transaction.startState.field(tableHistoryBoundary)
+            && !transaction.effects.some(effect => effect.is(tableOperationEffect))
         }),
-        cm.history(),
         cm.keymap.of([
           { key: "Escape", run() { options.onEscape?.(); return true; } },
+          { key: "Enter", run: handleEnter },
+          { key: "Shift-Enter", run: enterTableCell },
+          { key: "Backspace", run: protectTableBoundary("backward") },
+          { key: "Backspace", run: cm.deleteMarkupBackward },
+          { key: "Delete", run: protectTableBoundary("forward") },
+          { key: "ArrowLeft", run: moveTableCell("left") },
+          { key: "ArrowRight", run: moveTableCell("right") },
+          { key: "ArrowUp", run: moveTableCell("up") },
+          { key: "ArrowDown", run: moveTableCell("down") },
+          { key: "Tab", run: moveTableCell("next"), shift: moveTableCell("previous") },
           ...cm.defaultKeymap,
           ...cm.historyKeymap
         ]),
-        cm.markdown(),
+        cm.markdown({ addKeymap: false }),
         cm.EditorView.lineWrapping,
+        tableInputHandler,
+        tableStructureChangeFilter,
         focusField,
         previewField,
+        tableAtomicField,
         cm.EditorView.contentAttributes.of({
           role: "textbox",
           "aria-multiline": "true",
           "aria-label": String(options.ariaLabel || "Markdown 편집")
         }),
         cm.EditorView.updateListener.of(update => {
-          if (update.docChanged) options.onChange?.(update.state.doc.toString());
+          if (update.docChanged) updateCounter(update.state.doc);
+          if (update.docChanged && !replacingValue) options.onChange?.(update.state.doc.toString());
+          toolbar?.refresh();
         }),
         cm.EditorView.domEventHandlers({
+          mousedown: handleTableCellMouseDown,
+          mouseup: handleTableCellMouseUp,
+          beforeinput: handleTableBeforeInput,
+          paste: handleTablePaste,
           focus() {
-            view.dispatch({ effects: focusEffect.of(true) });
+            if (!view.state.readOnly) view.dispatch({ effects: focusEffect.of(true) });
           },
           blur() {
             view.dispatch({ effects: focusEffect.of(false) });
             setTimeout(() => {
-              if (!destroyed && !view.dom.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) {
+        view.dispatch({ effects: [editableEffect.of(Boolean(editable)), focusEffect.of(Boolean(editable) && view.hasFocus)] });
+        options.parent.toggleAttribute("data-markdown-readonly", !editable);
+      },
+      setValue(value) {
+        const text = String(value ?? "").replace(/\r\n?/g, "\n");
+        if (text === view.state.doc.toString()) return;
+        replacingValue = true;
+        try { view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: text }, filter: false }); }
+        finally { replacingValue = false; }
+      },
+      hasPendingImages: () => images?.hasPending() || false,
       getValue: () => view.state.doc.toString(),
       getSelection: () => view.state.selection.ranges.map(range => ({ anchor: range.anchor, head: range.head })),
       focusAtPosition(position, options = {}) {
@@ -330,21 +1429,58 @@
         view.focus();
       },
       focusAtClientPoint(clientX, clientY) {
-        const position = Number.isFinite(clientX) && Number.isFinite(clientY)
-          ? view.posAtCoords({ x: clientX, y: clientY }, false)
-          : null;
-        const anchor = position == null ? view.state.doc.length : position;
+        const anchor = this.positionAtClientPoint(clientX, clientY);
         view.dispatch({ selection: { anchor } });
         view.focus();
         return anchor;
       },
+      positionAtClientPoint(clientX, clientY) {
+        let position = null;
+        if (Number.isFinite(clientX) && Number.isFinite(clientY)) {
+          const cellElement = ownerDocument.elementFromPoint?.(clientX, clientY)?.closest?.(".writer-md-table-cell");
+          if (cellElement && view.dom.contains(cellElement)) {
+            const from = Number(cellElement.getAttribute("data-writer-md-table-cell-from"));
+            const to = Number(cellElement.getAttribute("data-writer-md-table-cell-to"));
+            if (Number.isSafeInteger(from) && Number.isSafeInteger(to) && from <= to) {
+              position = tableCellPointerPosition(view, cellElement, { clientX, clientY }, from, to);
+            }
+          }
+          if (position == null) position = view.posAtCoords({ x: clientX, y: clientY }, false);
+        }
+        const anchor = position == null ? view.state.doc.length : position;
+        return anchor;
+      },
       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({ inlineTokens, lineSyntax, layoutLines, previewModel, mount });
+  return Object.freeze({
+    characterCount,
+    inlineTokens,
+    tableEscapedPipeBackslashes,
+    tableCellEdgeWhitespaceRanges,
+    lineSyntax,
+    layoutLines,
+    tableCellContexts,
+    tableCellContextAt,
+    tableSelectionCrossesStructure,
+    tableCellNavigationTarget,
+    syntheticTableCellMaterialization,
+    safeTableCellInput,
+    safeTableCellReplacement,
+    tableOperation,
+    previewModel,
+    mount
+  });
 });