@aeriz/wysiwyg 1.0.4 → 1.0.5

package/README.md

@@ -71,18 +71,18 @@ editor.onStateChange(() => viewer.setBlocks(editor.serialize()));
 <!-- ✓ 프로덕션 — 특정 버전 고정 (immutable, 가장 긴 캐시) -->
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.min.css"
+  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.min.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.min.js"></script>
 
 <!-- 1.x 트랙 — 패치만 자동 수신 -->
-<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@^1.0.4/dist/aeriz-wysiwyg.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@^1.0.5/dist/aeriz-wysiwyg.min.js"></script>
 
 <!-- 항상 최신 — 프로토타이핑용 (프로덕션 권장 X) -->
 <script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@latest/dist/aeriz-wysiwyg.min.js"></script>
 
 <!-- unpkg 미러 -->
-<script src="https://unpkg.com/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.min.js"></script>
+<script src="https://unpkg.com/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.min.js"></script>
 
 <div id="editor"></div>
 <script>
@@ -99,13 +99,13 @@ editor.onStateChange(() => viewer.setBlocks(editor.serialize()));
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.min.css"
+  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.min.css"
 />
 <script type="module">
   import {
     AerizEditor,
     AerizViewer,
-  } from 'https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.esm.min.js';
+  } from 'https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.esm.min.js';
 
   new AerizEditor({ element: document.querySelector('#editor') });
 </script>
@@ -130,12 +130,12 @@ editor.onStateChange(() => viewer.setBlocks(editor.serialize()));
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.min.css"
+  href="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.min.css"
 />
 <!-- 1) 코어 먼저 -->
-<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.min.js"></script>
 <!-- 2) 필요한 어댑터 -->
-<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg-wc.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg-wc.min.js"></script>
 
 <aeriz-editor theme="dark" placeholder="내용을 입력하세요"></aeriz-editor>
 ```
@@ -144,8 +144,8 @@ jQuery 는 jQuery 자체를 먼저 로드해야 자동 등록됩니다.
 
 ```html
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg-jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg-jquery.min.js"></script>
 <script>
   $('#editor').aerizEditor({ value: '<p>안녕하세요</p>' });
 </script>
@@ -162,8 +162,8 @@ React / Vue 어댑터는 IIFE 로 제공하지 않습니다. 소비자 앱의
   {
     "imports": {
       "vue": "https://esm.sh/vue@3",
-      "@aeriz/wysiwyg": "https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/aeriz-wysiwyg.esm.min.js",
-      "@aeriz/wysiwyg/vue": "https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.4/dist/adapters/vue.js"
+      "@aeriz/wysiwyg": "https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/aeriz-wysiwyg.esm.min.js",
+      "@aeriz/wysiwyg/vue": "https://cdn.jsdelivr.net/npm/@aeriz/wysiwyg@1.0.5/dist/adapters/vue.js"
     }
   }
 </script>

package/dist/aeriz-wysiwyg.cjs

@@ -2425,8 +2425,9 @@ const LANG_BY_ID = (() => {
   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 @@ const CODE_BLOCK = {
     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 @@ function normalizeContent(root, options = {}) {
       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 @@ const BLOCK_TOGGLE_MAP = {
 };
 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 @@ class AerizEditor {
     __publicField(this, "hoverRaf", null);
     /** 라벨 pill 의 등장 애니메이션을 블록이 **바뀔 때만** 다시 재생하기 위한 표식. */
     __publicField(this, "pillBlockId", null);
+    /**
+     * IME 조합이 진행 중인지. 한글 · 일본어 · 중국어 입력은 글자 하나가 여러
+     * 입력에 걸쳐 만들어지는데, 그 사이에 DOM 을 다시 쓰면 조합이 끊긴다.
+     */
+    __publicField(this, "composing", false);
     /**
      * 편집 이력. 브라우저 기본 undo 는 우리가 직접 한 DOM 조작(블록 이동 · 표
      * 편집 · 유형 변경) 을 모르기 때문에 자체 스택을 둔다.
@@ -5820,6 +5833,13 @@ class AerizEditor {
     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 @@ class AerizEditor {
     }
     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 @@ class AerizEditor {
    * 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 @@ class AerizEditor {
     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 @@ class AerizEditor {
       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 @@ class AerizEditor {
     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 @@ class AerizEditor {
     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();

package/dist/aeriz-wysiwyg.esm.js

@@ -2423,8 +2423,9 @@ const LANG_BY_ID = (() => {
   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);
@@ -3483,6 +3484,7 @@ const CODE_BLOCK = {
     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;
   },
@@ -3988,9 +3990,15 @@ function normalizeContent(root, options = {}) {
       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");
@@ -5617,7 +5625,7 @@ const BLOCK_TOGGLE_MAP = {
 };
 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");
@@ -5655,6 +5663,11 @@ class AerizEditor {
     __publicField(this, "hoverRaf", null);
     /** 라벨 pill 의 등장 애니메이션을 블록이 **바뀔 때만** 다시 재생하기 위한 표식. */
     __publicField(this, "pillBlockId", null);
+    /**
+     * IME 조합이 진행 중인지. 한글 · 일본어 · 중국어 입력은 글자 하나가 여러
+     * 입력에 걸쳐 만들어지는데, 그 사이에 DOM 을 다시 쓰면 조합이 끊긴다.
+     */
+    __publicField(this, "composing", false);
     /**
      * 편집 이력. 브라우저 기본 undo 는 우리가 직접 한 DOM 조작(블록 이동 · 표
      * 편집 · 유형 변경) 을 모르기 때문에 자체 스택을 둔다.
@@ -5818,6 +5831,13 @@ class AerizEditor {
     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;
@@ -6484,6 +6504,7 @@ class AerizEditor {
     }
     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");
@@ -6513,7 +6534,7 @@ class AerizEditor {
    * 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);
@@ -7227,6 +7248,11 @@ class AerizEditor {
     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;
@@ -7403,8 +7429,72 @@ class AerizEditor {
       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`.
    *
@@ -7430,6 +7520,43 @@ class AerizEditor {
     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 에 사용.
@@ -7773,6 +7900,29 @@ class AerizEditor {
     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();