@aeriz/wysiwyg 1.0.4 → 1.0.5

package/dist/aeriz-wysiwyg.js

@@ -2425,8 +2425,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     for (const l of LANGUAGES) m.set(l.id, l);
     return m;
   })();
+  const PLAIN_TEXT_ID = "plaintext";
   function highlightCode(code, langId) {
-    if (!langId) return escapeHtml$2(code);
+    if (!langId || langId === PLAIN_TEXT_ID) return escapeHtml$2(code);
     const lang = LANG_BY_ID.get(langId);
     if (!lang) return escapeHtml$2(code);
     if (lang.custom) return lang.custom(code);
@@ -3485,6 +3486,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       const pre = document.createElement("pre");
       const code = document.createElement("code");
       if (attrs == null ? void 0 : attrs.language) code.setAttribute("data-language", attrs.language);
+      fillEmpty(code);
       pre.appendChild(code);
       return pre;
     },
@@ -3990,9 +3992,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         fig.appendChild(makeResizeHandle());
       }
     }
+    ensureCodeCarets(root);
     dropEmptyCaptions(root);
     if (options.writableTail !== false) ensureWritableTail(root);
   }
+  function ensureCodeCarets(root) {
+    for (const code of Array.from(root.querySelectorAll("pre > code"))) {
+      if (code.childNodes.length === 0) code.appendChild(document.createElement("br"));
+    }
+  }
   function dropEmptyCaptions(root) {
     var _a;
     const captions = root.querySelectorAll("figure > figcaption");
@@ -5619,7 +5627,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const DRAG_MIME = "application/x-aeriz-block";
   const MIN_BLOCK_WIDTH = 80;
-  class AerizEditor {
+  const _AerizEditor = class _AerizEditor {
     constructor(options) {
       __publicField(this, "root");
       __publicField(this, "content");
@@ -5657,6 +5665,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       __publicField(this, "hoverRaf", null);
       /** 라벨 pill 의 등장 애니메이션을 블록이 **바뀔 때만** 다시 재생하기 위한 표식. */
       __publicField(this, "pillBlockId", null);
+      /**
+       * IME 조합이 진행 중인지. 한글 · 일본어 · 중국어 입력은 글자 하나가 여러
+       * 입력에 걸쳐 만들어지는데, 그 사이에 DOM 을 다시 쓰면 조합이 끊긴다.
+       */
+      __publicField(this, "composing", false);
       /**
        * 편집 이력. 브라우저 기본 undo 는 우리가 직접 한 DOM 조작(블록 이동 · 표
        * 편집 · 유형 변경) 을 모르기 때문에 자체 스택을 둔다.
@@ -5820,6 +5833,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       document.addEventListener("mouseup", this.handleDocumentMouseUp);
       this.content.addEventListener("input", () => this.scheduleCodeHighlight());
       this.content.addEventListener("input", (e) => this.handleInputRule(e));
+      this.content.addEventListener("compositionstart", () => {
+        this.composing = true;
+      });
+      this.content.addEventListener("compositionend", () => {
+        this.composing = false;
+        this.scheduleCodeHighlight();
+      });
       this.content.addEventListener("dragstart", (e) => {
         const t2 = e.target;
         if (!t2) return;
@@ -6486,6 +6506,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       }
       this.codeHighlightTimer = window.setTimeout(() => {
         this.codeHighlightTimer = null;
+        if (this.composing) return;
         const active = this.getActiveBlock();
         if ((active == null ? void 0 : active.kind) !== "codeBlock") return;
         const code = active.element.querySelector(":scope > code");
@@ -6515,7 +6536,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
      * code 안에 있다면 textContent offset 으로 caret 위치 보존.
      */
     rehighlightCode(code, langId) {
-      const text = code.textContent ?? "";
+      const text = codeTextOf(code);
       const sel = saveCodeSelection(code);
       code.innerHTML = highlightCode(text, langId);
       if (sel) restoreCodeSelection(code, sel);
@@ -7229,6 +7250,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (e.key === "Backspace" && !e.isComposing) {
         if (this.handleBackspaceKey(e)) return;
       }
+      if (e.key === "Enter" && e.shiftKey && !e.isComposing) {
+        const active2 = this.getActiveBlock();
+        if ((active2 == null ? void 0 : active2.kind) === "codeBlock") this.insertCodeLineBreak(e, active2);
+        return;
+      }
       if (e.key !== "Enter" || e.shiftKey || e.isComposing) return;
       const sel = document.getSelection();
       if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return;
@@ -7405,8 +7431,72 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         this.queueSync();
         return true;
       }
+      if (active.kind === "codeBlock") {
+        return this.indentCode(e, active, e.shiftKey);
+      }
       return false;
     }
+    /**
+     * 코드 블록 들여쓰기 / 내어쓰기 (Tab · Shift+Tab).
+     *
+     * 코드를 쓰는 자리에서 Tab 이 포커스를 툴바로 옮겨 버리면 들여쓰기를 할
+     * 방법이 없다. 다른 블록에서는 그 탈출구가 필요하지만(§7.5) 코드 블록은
+     * 예외다.
+     *
+     * 선택 영역이 여러 줄에 걸치면 **걸친 줄 전체**를 옮긴다. 한 줄 안에 캐럿만
+     * 있으면 그 자리에 들여쓰기를 넣는다 — 편집기들이 공통으로 하는 동작이다.
+     *
+     * 텍스트를 통째로 다시 쓰고 캐럿은 문자 오프셋으로 되돌린다. 하이라이트가
+     * 이미 같은 방식으로 동작하므로 경로가 하나로 모인다.
+     */
+    indentCode(e, active, outdent) {
+      const code = active.element.querySelector(":scope > code");
+      if (!code) return false;
+      const offsets = captureSelectionOffsets(code) ?? { start: 0, end: 0 };
+      const text = codeTextOf(code);
+      const indent = _AerizEditor.CODE_INDENT;
+      let next;
+      let start;
+      let end;
+      if (!outdent && offsets.start === offsets.end) {
+        next = text.slice(0, offsets.start) + indent + text.slice(offsets.start);
+        start = end = offsets.start + indent.length;
+      } else {
+        const from = text.lastIndexOf("\n", offsets.start - 1) + 1;
+        const toRaw = text.indexOf("\n", offsets.end);
+        const to = toRaw === -1 ? text.length : toRaw;
+        let firstDelta = 0;
+        let totalDelta = 0;
+        const moved = text.slice(from, to).split("\n").map((line, i) => {
+          if (outdent) {
+            const m = /^(\t| {1,2})/.exec(line);
+            const removed = (m == null ? void 0 : m[0].length) ?? 0;
+            if (i === 0) firstDelta = -removed;
+            totalDelta -= removed;
+            return line.slice(removed);
+          }
+          if (line === "") return line;
+          if (i === 0) firstDelta = indent.length;
+          totalDelta += indent.length;
+          return indent + line;
+        }).join("\n");
+        if (totalDelta === 0) {
+          e.preventDefault();
+          return true;
+        }
+        next = text.slice(0, from) + moved + text.slice(to);
+        start = Math.max(from, offsets.start + firstDelta);
+        end = Math.max(start, offsets.end + totalDelta);
+      }
+      e.preventDefault();
+      this.markStructuralChange();
+      const langId = code.getAttribute("data-language") ?? void 0;
+      code.innerHTML = highlightCode(next, langId);
+      this.content.focus();
+      restoreSelectionOffsets(code, { start, end });
+      this.flush();
+      return true;
+    }
     /**
      * Backspace 처리. 처리했으면 `true`.
      *
@@ -7432,6 +7522,43 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       placeCaretAtStart(p);
       return true;
     }
+    /**
+     * 코드 블록 안에 줄바꿈을 넣는다 (Shift+Enter).
+     *
+     * `<pre>` 는 개행 문자를 그대로 보존하므로 줄바꿈은 **문자 하나**여야 한다.
+     * `<br>` 을 쓰면 `textContent` 가 그 자리를 빈 것으로 읽어, 하이라이트가
+     * 다시 그려지는 순간(타이핑 멈춘 뒤 300ms) 줄이 사라진다.
+     *
+     * 맨 끝에서는 개행을 **하나 더** 넣는다. `<pre>` 는 마지막 개행 하나를
+     * 접어 버려서, 하나만 넣으면 새 줄이 화면에 나타나지 않고 캐럿도 앞 줄에
+     * 머문 것처럼 보인다. 뒤쪽 개행은 자리를 만드는 용도이고, 이어서 글자를
+     * 치면 자연스럽게 그 줄의 내용이 된다.
+     */
+    insertCodeLineBreak(e, active) {
+      const code = active.element.querySelector(":scope > code");
+      if (!code) return;
+      const sel = document.getSelection();
+      if (!sel || sel.rangeCount === 0) return;
+      e.preventDefault();
+      if (!code.contains(sel.getRangeAt(0).commonAncestorContainer)) {
+        placeCaretAtStart(active.element);
+      }
+      const range = sel.getRangeAt(0);
+      if (!code.contains(range.commonAncestorContainer)) return;
+      range.deleteContents();
+      const after = document.createRange();
+      after.selectNodeContents(code);
+      after.setStart(range.endContainer, range.endOffset);
+      const atEnd = after.toString() === "";
+      const inserted = document.createTextNode(atEnd ? "\n\n" : "\n");
+      range.insertNode(inserted);
+      const caret = document.createRange();
+      caret.setStart(inserted, 1);
+      caret.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(caret);
+      this.flush();
+    }
     /**
      * 활성 블록 뒤에 새 빈 **본문 블록**을 만들고 캐럿을 그 안에 둔다.
      * 인용구 / 코드 블록의 Enter 탈출, 제목 끝 Enter 에 사용.
@@ -7775,6 +7902,29 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       this.toolbar.setVisible("codeLang", (active == null ? void 0 : active.kind) === "codeBlock");
       this.toolbar.syncGroupVisibility();
     }
+  };
+  /** 코드 블록의 들여쓰기 한 단계. 공백 두 칸 — 이 저장소의 코드 스타일과 같다. */
+  __publicField(_AerizEditor, "CODE_INDENT", "  ");
+  let AerizEditor = _AerizEditor;
+  function codeTextOf(code) {
+    var _a;
+    if (code.childNodes.length === 1 && ((_a = code.firstChild) == null ? void 0 : _a.nodeName) === "BR") {
+      return "";
+    }
+    let out = "";
+    const walk = (node) => {
+      for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+          out += child.textContent ?? "";
+        } else if (child.nodeName === "BR") {
+          out += "\n";
+        } else {
+          walk(child);
+        }
+      }
+    };
+    walk(code);
+    return out;
   }
   function parseYouTubeId(input) {
     const trimmed = input.trim();