@ssobig/writer-cli 0.3.2 → 0.3.4

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
   });