@latentic/live-markdown 0.3.0 → 0.4.0

package/dist/codemirror/code/codeLangAffordance.js

@@ -0,0 +1,80 @@
+import "../../chunk-V6TY7KAL.js";
+import { syntaxTree } from "@codemirror/language";
+import { StateField } from "@codemirror/state";
+import { Decoration, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { fenceAtLoose, showCodeBlockMenu, showLanguageMenu } from "./codeLanguageMenu.js";
+class PlainLangPill extends WidgetType {
+  eq() {
+    return true;
+  }
+  toDOM() {
+    const pill = document.createElement("span");
+    pill.className = "cm-code-info cm-code-info--unset";
+    pill.textContent = "plain";
+    return pill;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+const PILL = Decoration.widget({ widget: new PlainLangPill(), side: 1 });
+function buildPills(state) {
+  const ranges = [];
+  syntaxTree(state).iterate({
+    enter(node) {
+      if (node.name !== "FencedCode") return;
+      const marks = node.node.getChildren("CodeMark");
+      if (marks.length < 2) return;
+      if (node.node.getChildren("CodeInfo").length > 0) return;
+      ranges.push(PILL.range(marks[0].to));
+    }
+  });
+  return Decoration.set(ranges, true);
+}
+const plainPillField = StateField.define({
+  create: buildPills,
+  update(value, tr) {
+    if (tr.docChanged || syntaxTree(tr.state) !== syntaxTree(tr.startState)) {
+      return buildPills(tr.state);
+    }
+    return value;
+  },
+  provide: (f) => EditorView.decorations.from(f)
+});
+function fenceAtEvent(view, event) {
+  const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+  if (pos === null) return null;
+  const node = fenceAtLoose(view.state, pos);
+  return node ? node.from : null;
+}
+const interactionPlugin = ViewPlugin.define((view) => {
+  const onMouseDown = (event) => {
+    if (event.button !== 0) return;
+    const target = event.target;
+    if (!target.closest?.(".cm-code-info")) return;
+    const fencePos = fenceAtEvent(view, event);
+    if (fencePos === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    showLanguageMenu({ view, x: event.clientX, y: event.clientY, fencePos });
+  };
+  const onContextMenu = (event) => {
+    const fencePos = fenceAtEvent(view, event);
+    if (fencePos === null) return;
+    event.preventDefault();
+    showCodeBlockMenu({ view, x: event.clientX, y: event.clientY, fencePos });
+  };
+  view.dom.addEventListener("mousedown", onMouseDown, true);
+  view.dom.addEventListener("contextmenu", onContextMenu);
+  return {
+    destroy() {
+      view.dom.removeEventListener("mousedown", onMouseDown, true);
+      view.dom.removeEventListener("contextmenu", onContextMenu);
+    }
+  };
+});
+const codeLanguageUI = [plainPillField, interactionPlugin];
+export {
+  codeLanguageUI
+};
+//# sourceMappingURL=codeLangAffordance.js.map

package/dist/codemirror/code/codeLangAffordance.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/codemirror/code/codeLangAffordance.ts"],"sourcesContent":["/**\n * The opener-row language affordance (ADR 0002).\n *\n * A CLOSED fence with a language shows its styled CodeInfo text (the pill);\n * one without gets a \"plain\" placeholder pill widget so every block has a\n * click target. Clicking either opens the searchable language chooser;\n * right-clicking anywhere in a block opens the block menu (set language,\n * copy code). Pointer handling is delegated — one listener per editor — and\n * clicks are swallowed on mousedown so the fence caret guard (§12.9) never\n * sees them.\n */\n\nimport { syntaxTree } from \"@codemirror/language\";\nimport { type EditorState, type Extension, type Range, StateField } from \"@codemirror/state\";\nimport { Decoration, type DecorationSet, EditorView, ViewPlugin, WidgetType } from \"@codemirror/view\";\n\nimport { fenceAtLoose, showCodeBlockMenu, showLanguageMenu } from \"./codeLanguageMenu\";\n\nclass PlainLangPill extends WidgetType {\n  override eq(): boolean {\n    return true;\n  }\n\n  override toDOM(): HTMLElement {\n    const pill = document.createElement(\"span\");\n    pill.className = \"cm-code-info cm-code-info--unset\";\n    pill.textContent = \"plain\";\n    return pill;\n  }\n\n  override ignoreEvent(): boolean {\n    return false;\n  }\n}\n\nconst PILL = Decoration.widget({ widget: new PlainLangPill(), side: 1 });\n\nfunction buildPills(state: EditorState): DecorationSet {\n  const ranges: Range<Decoration>[] = [];\n  syntaxTree(state).iterate({\n    enter(node) {\n      if (node.name !== \"FencedCode\") return;\n      const marks = node.node.getChildren(\"CodeMark\");\n      if (marks.length < 2) return; // unclosed: the language flow is typing\n      if (node.node.getChildren(\"CodeInfo\").length > 0) return;\n      ranges.push(PILL.range(marks[0].to));\n    },\n  });\n  return Decoration.set(ranges, true);\n}\n\nconst plainPillField = StateField.define<DecorationSet>({\n  create: buildPills,\n  update(value, tr) {\n    if (tr.docChanged || syntaxTree(tr.state) !== syntaxTree(tr.startState)) {\n      return buildPills(tr.state);\n    }\n    return value;\n  },\n  provide: (f) => EditorView.decorations.from(f),\n});\n\n/** The fence containing the event point, resolved through the view. */\nfunction fenceAtEvent(view: EditorView, event: MouseEvent): number | null {\n  const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });\n  if (pos === null) return null;\n  const node = fenceAtLoose(view.state, pos);\n  return node ? node.from : null;\n}\n\nconst interactionPlugin = ViewPlugin.define((view) => {\n  const onMouseDown = (event: MouseEvent): void => {\n    if (event.button !== 0) return;\n    const target = event.target as HTMLElement;\n    if (!target.closest?.(\".cm-code-info\")) return;\n    const fencePos = fenceAtEvent(view, event);\n    if (fencePos === null) return;\n    // Swallow the press: the pill is a control, not text — the caret must\n    // not move (and §12.9 must not re-site it).\n    event.preventDefault();\n    event.stopPropagation();\n    showLanguageMenu({ view, x: event.clientX, y: event.clientY, fencePos });\n  };\n\n  const onContextMenu = (event: MouseEvent): void => {\n    const fencePos = fenceAtEvent(view, event);\n    if (fencePos === null) return;\n    event.preventDefault();\n    showCodeBlockMenu({ view, x: event.clientX, y: event.clientY, fencePos });\n  };\n\n  view.dom.addEventListener(\"mousedown\", onMouseDown, true);\n  view.dom.addEventListener(\"contextmenu\", onContextMenu);\n  return {\n    destroy() {\n      view.dom.removeEventListener(\"mousedown\", onMouseDown, true);\n      view.dom.removeEventListener(\"contextmenu\", onContextMenu);\n    },\n  };\n});\n\nexport const codeLanguageUI: Extension = [plainPillField, interactionPlugin];\n"],"mappings":";AAYA,SAAS,kBAAkB;AAC3B,SAAuD,kBAAkB;AACzE,SAAS,YAAgC,YAAY,YAAY,kBAAkB;AAEnF,SAAS,cAAc,mBAAmB,wBAAwB;AAElE,MAAM,sBAAsB,WAAW;AAAA,EAC5B,KAAc;AACrB,WAAO;AAAA,EACT;AAAA,EAES,QAAqB;AAC5B,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,YAAY;AACjB,SAAK,cAAc;AACnB,WAAO;AAAA,EACT;AAAA,EAES,cAAuB;AAC9B,WAAO;AAAA,EACT;AACF;AAEA,MAAM,OAAO,WAAW,OAAO,EAAE,QAAQ,IAAI,cAAc,GAAG,MAAM,EAAE,CAAC;AAEvE,SAAS,WAAW,OAAmC;AACrD,QAAM,SAA8B,CAAC;AACrC,aAAW,KAAK,EAAE,QAAQ;AAAA,IACxB,MAAM,MAAM;AACV,UAAI,KAAK,SAAS,aAAc;AAChC,YAAM,QAAQ,KAAK,KAAK,YAAY,UAAU;AAC9C,UAAI,MAAM,SAAS,EAAG;AACtB,UAAI,KAAK,KAAK,YAAY,UAAU,EAAE,SAAS,EAAG;AAClD,aAAO,KAAK,KAAK,MAAM,MAAM,CAAC,EAAE,EAAE,CAAC;AAAA,IACrC;AAAA,EACF,CAAC;AACD,SAAO,WAAW,IAAI,QAAQ,IAAI;AACpC;AAEA,MAAM,iBAAiB,WAAW,OAAsB;AAAA,EACtD,QAAQ;AAAA,EACR,OAAO,OAAO,IAAI;AAChB,QAAI,GAAG,cAAc,WAAW,GAAG,KAAK,MAAM,WAAW,GAAG,UAAU,GAAG;AACvE,aAAO,WAAW,GAAG,KAAK;AAAA,IAC5B;AACA,WAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC,MAAM,WAAW,YAAY,KAAK,CAAC;AAC/C,CAAC;AAGD,SAAS,aAAa,MAAkB,OAAkC;AACxE,QAAM,MAAM,KAAK,YAAY,EAAE,GAAG,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC;AACnE,MAAI,QAAQ,KAAM,QAAO;AACzB,QAAM,OAAO,aAAa,KAAK,OAAO,GAAG;AACzC,SAAO,OAAO,KAAK,OAAO;AAC5B;AAEA,MAAM,oBAAoB,WAAW,OAAO,CAAC,SAAS;AACpD,QAAM,cAAc,CAAC,UAA4B;AAC/C,QAAI,MAAM,WAAW,EAAG;AACxB,UAAM,SAAS,MAAM;AACrB,QAAI,CAAC,OAAO,UAAU,eAAe,EAAG;AACxC,UAAM,WAAW,aAAa,MAAM,KAAK;AACzC,QAAI,aAAa,KAAM;AAGvB,UAAM,eAAe;AACrB,UAAM,gBAAgB;AACtB,qBAAiB,EAAE,MAAM,GAAG,MAAM,SAAS,GAAG,MAAM,SAAS,SAAS,CAAC;AAAA,EACzE;AAEA,QAAM,gBAAgB,CAAC,UAA4B;AACjD,UAAM,WAAW,aAAa,MAAM,KAAK;AACzC,QAAI,aAAa,KAAM;AACvB,UAAM,eAAe;AACrB,sBAAkB,EAAE,MAAM,GAAG,MAAM,SAAS,GAAG,MAAM,SAAS,SAAS,CAAC;AAAA,EAC1E;AAEA,OAAK,IAAI,iBAAiB,aAAa,aAAa,IAAI;AACxD,OAAK,IAAI,iBAAiB,eAAe,aAAa;AACtD,SAAO;AAAA,IACL,UAAU;AACR,WAAK,IAAI,oBAAoB,aAAa,aAAa,IAAI;AAC3D,WAAK,IAAI,oBAAoB,eAAe,aAAa;AAAA,IAC3D;AAAA,EACF;AACF,CAAC;AAEM,MAAM,iBAA4B,CAAC,gBAAgB,iBAAiB;","names":[]}

package/dist/codemirror/code/codeLanguageMenu.d.ts

@@ -0,0 +1,40 @@
+import { FenceNode } from './fenceAutoClose.js';
+import { EditorState, ChangeSpec } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+
+/** `fenceAt` resolves side -1 and misses the fence's own from-boundary — the
+ *  very position callers naturally pass (node.from). Probe one step in. */
+declare function fenceAtLoose(state: EditorState, pos: number): FenceNode | null;
+/** Replace the fence's info string (everything after the opening marks on the
+ *  opener line) with `info`; null clears it. Null result = no fence at pos. */
+declare function setFenceInfo(state: EditorState, fencePos: number, info: string | null): ChangeSpec | null;
+/** The block's code content (between opener and closer lines). */
+declare function fenceContent(state: EditorState, fencePos: number): string | null;
+/** Write the block's content to the clipboard; returns it (for tests). */
+declare function copyFenceCode(view: EditorView, fencePos: number): string | null;
+/** The markdown info string we write for a chosen language: its shortest
+ *  alias (`ts`, `js`, `py`) — the idiomatic fence tag. */
+declare function infoFor(name: string): string | null;
+interface LanguageEntry {
+    label: string;
+    hint?: string;
+    info: string | null;
+    haystack: string;
+}
+/** Every choosable entry: Plain text first, then grammars and rendered tags
+ *  merged A→Z. */
+declare function languageEntries(): LanguageEntry[];
+interface LanguageMenuArgs {
+    view: EditorView;
+    x: number;
+    y: number;
+    /** Any position inside the target fence. */
+    fencePos: number;
+}
+/** Searchable language chooser; picking dispatches the info-string change as
+ *  one undo step. */
+declare function showLanguageMenu(args: LanguageMenuArgs): void;
+/** Right-click menu for a code block: set language, copy content. */
+declare function showCodeBlockMenu(args: LanguageMenuArgs): void;
+
+export { type LanguageEntry, type LanguageMenuArgs, copyFenceCode, fenceAtLoose, fenceContent, infoFor, languageEntries, setFenceInfo, showCodeBlockMenu, showLanguageMenu };

package/dist/codemirror/code/codeLanguageMenu.js

@@ -0,0 +1,184 @@
+import "../../chunk-V6TY7KAL.js";
+import { EditorSelection } from "@codemirror/state";
+import { languages } from "@codemirror/language-data";
+import { fenceAt } from "./fenceAutoClose.js";
+function fenceAtLoose(state, pos) {
+  return fenceAt(state, pos) ?? fenceAt(state, Math.min(pos + 1, state.doc.length));
+}
+function setFenceInfo(state, fencePos, info) {
+  const node = fenceAtLoose(state, fencePos);
+  if (!node) return null;
+  const opener = node.getChildren("CodeMark")[0];
+  if (!opener) return null;
+  const openerLine = state.doc.lineAt(node.from);
+  return { from: opener.to, to: openerLine.to, insert: info ?? "" };
+}
+function fenceContent(state, fencePos) {
+  const node = fenceAtLoose(state, fencePos);
+  if (!node) return null;
+  const marks = node.getChildren("CodeMark");
+  if (marks.length < 2) return null;
+  const openerLine = state.doc.lineAt(node.from);
+  const closerLine = state.doc.lineAt(marks[marks.length - 1].from);
+  if (closerLine.from - 1 <= openerLine.to) return "";
+  return state.sliceDoc(openerLine.to + 1, closerLine.from - 1);
+}
+function copyFenceCode(view, fencePos) {
+  const content = fenceContent(view.state, fencePos);
+  if (content === null) return null;
+  void navigator.clipboard?.writeText(content).catch(() => {
+    const area = document.createElement("textarea");
+    area.value = content;
+    document.body.appendChild(area);
+    area.select();
+    document.execCommand("copy");
+    area.remove();
+  });
+  return content;
+}
+function mountMenu(x, y) {
+  const root = document.createElement("div");
+  root.className = "cm-code-menu";
+  root.setAttribute("role", "menu");
+  root.style.cssText = "position:fixed;z-index:1000;min-width:12rem;padding:0.25rem;background:var(--cds-layer-01,#ffffff);border:0.0625rem solid var(--cds-border-subtle-01,#e0e0e0);border-radius:0.375rem;box-shadow:0 0.125rem 0.75rem rgba(0,0,0,0.18);font-size:0.875rem;";
+  root.style.left = `${x}px`;
+  root.style.top = `${y}px`;
+  document.body.appendChild(root);
+  const onOutside = (event) => {
+    if (!root.contains(event.target)) destroy();
+  };
+  const onEscape = (event) => {
+    if (event.key === "Escape") destroy();
+  };
+  function destroy() {
+    root.remove();
+    document.removeEventListener("mousedown", onOutside, true);
+    document.removeEventListener("keydown", onEscape, true);
+  }
+  setTimeout(() => {
+    document.addEventListener("mousedown", onOutside, true);
+    document.addEventListener("keydown", onEscape, true);
+  }, 0);
+  const clamp = () => {
+    const rect = root.getBoundingClientRect();
+    if (rect.right > window.innerWidth) root.style.left = `${x - rect.width}px`;
+    if (rect.bottom > window.innerHeight) root.style.top = `${Math.max(0, y - rect.height)}px`;
+  };
+  queueMicrotask(clamp);
+  return { root, destroy };
+}
+function itemButton(label, hint) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "cm-code-menu__item";
+  button.style.cssText = "display:flex;justify-content:space-between;gap:1rem;width:100%;padding:0.3rem 0.6rem;border:none;background:none;text-align:left;cursor:pointer;border-radius:0.25rem;color:inherit;";
+  button.addEventListener("mouseenter", () => button.style.background = "var(--cds-layer-hover-01,#e8e8e8)");
+  button.addEventListener("mouseleave", () => button.style.background = "none");
+  const name = document.createElement("span");
+  name.textContent = label;
+  button.appendChild(name);
+  if (hint) {
+    const alias = document.createElement("span");
+    alias.textContent = hint;
+    alias.style.cssText = "color:var(--cds-text-secondary,#6f6f6f);font-size:0.75rem;";
+    button.appendChild(alias);
+  }
+  return button;
+}
+function infoFor(name) {
+  const lang = languages.find((l) => l.name === name);
+  if (!lang) return null;
+  return [...lang.alias, lang.name.toLowerCase()].sort((a, b) => a.length - b.length)[0];
+}
+const RENDERED_FENCE_TAGS = [
+  {
+    label: "Mermaid",
+    hint: "diagram",
+    info: "mermaid",
+    haystack: "mermaid diagram flowchart sequence graph chart"
+  }
+];
+function languageEntries() {
+  return [
+    { label: "Plain text", info: null, haystack: "plain text none" },
+    ...[
+      ...languages.map((l) => ({
+        label: l.name,
+        hint: infoFor(l.name) ?? void 0,
+        info: infoFor(l.name),
+        haystack: `${l.name} ${l.alias.join(" ")}`.toLowerCase()
+      })),
+      ...RENDERED_FENCE_TAGS
+    ].sort((a, b) => a.label.localeCompare(b.label))
+  ];
+}
+function showLanguageMenu(args) {
+  const menu = mountMenu(args.x, args.y);
+  const search = document.createElement("input");
+  search.type = "text";
+  search.placeholder = "Search languages\u2026";
+  search.className = "cm-code-menu__search";
+  search.style.cssText = "width:100%;box-sizing:border-box;margin-bottom:0.25rem;padding:0.3rem 0.5rem;border:0.0625rem solid var(--cds-border-subtle-01,#e0e0e0);border-radius:0.25rem;font:inherit;outline-color:var(--cds-focus,#0f62fe);";
+  menu.root.appendChild(search);
+  const list = document.createElement("div");
+  list.style.cssText = "max-height:16rem;overflow-y:auto;";
+  menu.root.appendChild(list);
+  const apply = (info) => {
+    const change = setFenceInfo(args.view.state, args.fencePos, info);
+    menu.destroy();
+    if (change) {
+      const newLength = args.view.state.doc.length - (change.to - change.from) + change.insert.length;
+      const anchor = Math.min(change.from + change.insert.length + 1, newLength);
+      args.view.dispatch({
+        changes: change,
+        selection: EditorSelection.cursor(anchor),
+        userEvent: "input.code.language"
+      });
+    }
+    args.view.focus();
+  };
+  const entries = languageEntries();
+  const render = (filter) => {
+    list.textContent = "";
+    const needle = filter.trim().toLowerCase();
+    for (const entry of entries.filter((e) => !needle || e.haystack.includes(needle))) {
+      const button = itemButton(entry.label, entry.hint);
+      button.addEventListener("click", () => apply(entry.info));
+      list.appendChild(button);
+    }
+  };
+  render("");
+  search.addEventListener("input", () => render(search.value));
+  search.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    list.querySelector("button")?.click();
+  });
+  search.focus();
+}
+function showCodeBlockMenu(args) {
+  const menu = mountMenu(args.x, args.y);
+  const language = itemButton("Set language\u2026");
+  language.addEventListener("click", () => {
+    menu.destroy();
+    showLanguageMenu(args);
+  });
+  const copy = itemButton("Copy code");
+  copy.addEventListener("click", () => {
+    copyFenceCode(args.view, args.fencePos);
+    menu.destroy();
+    args.view.focus();
+  });
+  menu.root.append(language, copy);
+}
+export {
+  copyFenceCode,
+  fenceAtLoose,
+  fenceContent,
+  infoFor,
+  languageEntries,
+  setFenceInfo,
+  showCodeBlockMenu,
+  showLanguageMenu
+};
+//# sourceMappingURL=codeLanguageMenu.js.map

package/dist/codemirror/code/codeLanguageMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/codemirror/code/codeLanguageMenu.ts"],"sourcesContent":["/**\n * Language + block menus for fenced code (ADR 0002).\n *\n * Typing the language right after ``` works while the block is still empty\n * (§12.4 keeps the caret on the opener) — these menus are the POINTER path,\n * and the only path once a block has content: the opener-row pill (real or\n * \"plain\" placeholder) opens a searchable chooser, and right-click anywhere\n * in a block offers \"Set language…\" and \"Copy code\". Menus mount on\n * document.body with inline styles (outside the editor's scoped theme), the\n * same pattern as the table menu.\n */\n\nimport { EditorSelection, type ChangeSpec, type EditorState } from \"@codemirror/state\";\nimport { type EditorView } from \"@codemirror/view\";\nimport { languages } from \"@codemirror/language-data\";\n\nimport { fenceAt } from \"./fenceAutoClose\";\n\n/** `fenceAt` resolves side -1 and misses the fence's own from-boundary — the\n *  very position callers naturally pass (node.from). Probe one step in. */\nexport function fenceAtLoose(state: EditorState, pos: number) {\n  return fenceAt(state, pos) ?? fenceAt(state, Math.min(pos + 1, state.doc.length));\n}\n\n/** Replace the fence's info string (everything after the opening marks on the\n *  opener line) with `info`; null clears it. Null result = no fence at pos. */\nexport function setFenceInfo(\n  state: EditorState,\n  fencePos: number,\n  info: string | null,\n): ChangeSpec | null {\n  const node = fenceAtLoose(state, fencePos);\n  if (!node) return null;\n  const opener = node.getChildren(\"CodeMark\")[0];\n  if (!opener) return null;\n  const openerLine = state.doc.lineAt(node.from);\n  return { from: opener.to, to: openerLine.to, insert: info ?? \"\" };\n}\n\n/** The block's code content (between opener and closer lines). */\nexport function fenceContent(state: EditorState, fencePos: number): string | null {\n  const node = fenceAtLoose(state, fencePos);\n  if (!node) return null;\n  const marks = node.getChildren(\"CodeMark\");\n  if (marks.length < 2) return null;\n  const openerLine = state.doc.lineAt(node.from);\n  const closerLine = state.doc.lineAt(marks[marks.length - 1].from);\n  if (closerLine.from - 1 <= openerLine.to) return \"\";\n  return state.sliceDoc(openerLine.to + 1, closerLine.from - 1);\n}\n\n/** Write the block's content to the clipboard; returns it (for tests). */\nexport function copyFenceCode(view: EditorView, fencePos: number): string | null {\n  const content = fenceContent(view.state, fencePos);\n  if (content === null) return null;\n  void navigator.clipboard?.writeText(content).catch(() => {\n    // Clipboard API denied (rare in the webview): execCommand fallback.\n    const area = document.createElement(\"textarea\");\n    area.value = content;\n    document.body.appendChild(area);\n    area.select();\n    document.execCommand(\"copy\");\n    area.remove();\n  });\n  return content;\n}\n\ninterface MenuHandle {\n  root: HTMLElement;\n  destroy(): void;\n}\n\nfunction mountMenu(x: number, y: number): MenuHandle {\n  const root = document.createElement(\"div\");\n  root.className = \"cm-code-menu\";\n  root.setAttribute(\"role\", \"menu\");\n  root.style.cssText =\n    \"position:fixed;z-index:1000;min-width:12rem;padding:0.25rem;\" +\n    \"background:var(--cds-layer-01,#ffffff);border:0.0625rem solid var(--cds-border-subtle-01,#e0e0e0);\" +\n    \"border-radius:0.375rem;box-shadow:0 0.125rem 0.75rem rgba(0,0,0,0.18);font-size:0.875rem;\";\n  root.style.left = `${x}px`;\n  root.style.top = `${y}px`;\n  document.body.appendChild(root);\n\n  const onOutside = (event: MouseEvent): void => {\n    if (!root.contains(event.target as Node)) destroy();\n  };\n  const onEscape = (event: KeyboardEvent): void => {\n    if (event.key === \"Escape\") destroy();\n  };\n  function destroy(): void {\n    root.remove();\n    document.removeEventListener(\"mousedown\", onOutside, true);\n    document.removeEventListener(\"keydown\", onEscape, true);\n  }\n  // Defer registration past the event that opened the menu.\n  setTimeout(() => {\n    document.addEventListener(\"mousedown\", onOutside, true);\n    document.addEventListener(\"keydown\", onEscape, true);\n  }, 0);\n\n  const clamp = () => {\n    const rect = root.getBoundingClientRect();\n    if (rect.right > window.innerWidth) root.style.left = `${x - rect.width}px`;\n    if (rect.bottom > window.innerHeight) root.style.top = `${Math.max(0, y - rect.height)}px`;\n  };\n  queueMicrotask(clamp);\n  return { root, destroy };\n}\n\nfunction itemButton(label: string, hint?: string): HTMLButtonElement {\n  const button = document.createElement(\"button\");\n  button.type = \"button\";\n  button.className = \"cm-code-menu__item\";\n  button.style.cssText =\n    \"display:flex;justify-content:space-between;gap:1rem;width:100%;padding:0.3rem 0.6rem;\" +\n    \"border:none;background:none;text-align:left;cursor:pointer;border-radius:0.25rem;color:inherit;\";\n  button.addEventListener(\"mouseenter\", () => (button.style.background = \"var(--cds-layer-hover-01,#e8e8e8)\"));\n  button.addEventListener(\"mouseleave\", () => (button.style.background = \"none\"));\n  const name = document.createElement(\"span\");\n  name.textContent = label;\n  button.appendChild(name);\n  if (hint) {\n    const alias = document.createElement(\"span\");\n    alias.textContent = hint;\n    alias.style.cssText = \"color:var(--cds-text-secondary,#6f6f6f);font-size:0.75rem;\";\n    button.appendChild(alias);\n  }\n  return button;\n}\n\n/** The markdown info string we write for a chosen language: its shortest\n *  alias (`ts`, `js`, `py`) — the idiomatic fence tag. */\nexport function infoFor(name: string): string | null {\n  const lang = languages.find((l) => l.name === name);\n  if (!lang) return null;\n  return [...lang.alias, lang.name.toLowerCase()].sort((a, b) => a.length - b.length)[0];\n}\n\nexport interface LanguageEntry {\n  label: string;\n  hint?: string;\n  info: string | null;\n  haystack: string;\n}\n\n/** Fence tags Compose RENDERS rather than parses — no CodeMirror grammar\n *  exists for them, so they'd otherwise be absent from the chooser, and\n *  type-time auto-close (§12.4) makes this menu the only way to give a\n *  from-scratch fence its language. */\nconst RENDERED_FENCE_TAGS: LanguageEntry[] = [\n  {\n    label: \"Mermaid\",\n    hint: \"diagram\",\n    info: \"mermaid\",\n    haystack: \"mermaid diagram flowchart sequence graph chart\",\n  },\n];\n\n/** Every choosable entry: Plain text first, then grammars and rendered tags\n *  merged A→Z. */\nexport function languageEntries(): LanguageEntry[] {\n  return [\n    { label: \"Plain text\", info: null, haystack: \"plain text none\" },\n    ...[\n      ...languages.map((l) => ({\n        label: l.name,\n        hint: infoFor(l.name) ?? undefined,\n        info: infoFor(l.name),\n        haystack: `${l.name} ${l.alias.join(\" \")}`.toLowerCase(),\n      })),\n      ...RENDERED_FENCE_TAGS,\n    ].sort((a, b) => a.label.localeCompare(b.label)),\n  ];\n}\n\nexport interface LanguageMenuArgs {\n  view: EditorView;\n  x: number;\n  y: number;\n  /** Any position inside the target fence. */\n  fencePos: number;\n}\n\n/** Searchable language chooser; picking dispatches the info-string change as\n *  one undo step. */\nexport function showLanguageMenu(args: LanguageMenuArgs): void {\n  const menu = mountMenu(args.x, args.y);\n\n  const search = document.createElement(\"input\");\n  search.type = \"text\";\n  search.placeholder = \"Search languages…\";\n  search.className = \"cm-code-menu__search\";\n  search.style.cssText =\n    \"width:100%;box-sizing:border-box;margin-bottom:0.25rem;padding:0.3rem 0.5rem;\" +\n    \"border:0.0625rem solid var(--cds-border-subtle-01,#e0e0e0);border-radius:0.25rem;font:inherit;outline-color:var(--cds-focus,#0f62fe);\";\n  menu.root.appendChild(search);\n\n  const list = document.createElement(\"div\");\n  list.style.cssText = \"max-height:16rem;overflow-y:auto;\";\n  menu.root.appendChild(list);\n\n  const apply = (info: string | null): void => {\n    const change = setFenceInfo(args.view.state, args.fencePos, info) as {\n      from: number;\n      to: number;\n      insert: string;\n    } | null;\n    menu.destroy();\n    if (change) {\n      // Language chosen → drop the caret at the start of the first content\n      // line, ready to type the code (or diagram) itself.\n      const newLength = args.view.state.doc.length - (change.to - change.from) + change.insert.length;\n      const anchor = Math.min(change.from + change.insert.length + 1, newLength);\n      args.view.dispatch({\n        changes: change,\n        selection: EditorSelection.cursor(anchor),\n        userEvent: \"input.code.language\",\n      });\n    }\n    args.view.focus();\n  };\n\n  const entries = languageEntries();\n\n  const render = (filter: string): void => {\n    list.textContent = \"\";\n    const needle = filter.trim().toLowerCase();\n    for (const entry of entries.filter((e) => !needle || e.haystack.includes(needle))) {\n      const button = itemButton(entry.label, entry.hint);\n      button.addEventListener(\"click\", () => apply(entry.info));\n      list.appendChild(button);\n    }\n  };\n  render(\"\");\n  search.addEventListener(\"input\", () => render(search.value));\n  // Enter picks the top visible match.\n  search.addEventListener(\"keydown\", (event) => {\n    if (event.key !== \"Enter\") return;\n    event.preventDefault();\n    list.querySelector(\"button\")?.click();\n  });\n  search.focus();\n}\n\n/** Right-click menu for a code block: set language, copy content. */\nexport function showCodeBlockMenu(args: LanguageMenuArgs): void {\n  const menu = mountMenu(args.x, args.y);\n  const language = itemButton(\"Set language…\");\n  language.addEventListener(\"click\", () => {\n    menu.destroy();\n    showLanguageMenu(args);\n  });\n  const copy = itemButton(\"Copy code\");\n  copy.addEventListener(\"click\", () => {\n    copyFenceCode(args.view, args.fencePos);\n    menu.destroy();\n    args.view.focus();\n  });\n  menu.root.append(language, copy);\n}\n"],"mappings":"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","names":[]}

package/dist/codemirror/code/codePalette.d.ts

@@ -0,0 +1,39 @@
+import { Tag } from '@lezer/highlight';
+
+/**
+ * The one code-syntax palette (One Light values — ADR 0002), consumed by both
+ * renderers so code looks the same everywhere it appears:
+ *
+ * - the EDITOR, via `codeHighlight.ts` (a CodeMirror `HighlightStyle` built
+ *   from these specs), and
+ * - the CLIPBOARD, via `highlightFence.ts` (inline-styled spans — pasted HTML
+ *   carries no stylesheet, so classes would be dead weight there).
+ *
+ * Each entry carries both a CSS custom property and a literal colour, because
+ * the two renderers cannot use the same one:
+ *
+ * - the editor emits a stylesheet, so it can read `var(--md-code-…)` and let a
+ *   host restyle code for a dark theme;
+ * - the clipboard cannot. Pasted HTML arrives with no stylesheet, so a `var()`
+ *   would resolve to nothing and paste colourless code into Google Docs or
+ *   Word. It keeps the literal — which is also right on the merits, since the
+ *   document being pasted into is white whatever theme the editor was in.
+ *
+ * So `color` is the light value AND the fallback; a host that sets no variables
+ * gets exactly the palette it got before.
+ */
+
+interface CodeStyleSpec {
+    tag: Tag | readonly Tag[];
+    /** Literal colour: the light value, the `var()` fallback, and what the
+     *  clipboard uses verbatim. */
+    color: string;
+    /** Custom property a host can set to restyle this role. */
+    cssVar: string;
+    fontStyle?: string;
+}
+declare const CODE_PALETTE: readonly CodeStyleSpec[];
+/** What the editor paints with: themeable, falling back to the light value. */
+declare function themedColor(spec: CodeStyleSpec): string;
+
+export { CODE_PALETTE, type CodeStyleSpec, themedColor };

package/dist/codemirror/code/codePalette.js

@@ -0,0 +1,53 @@
+import "../../chunk-V6TY7KAL.js";
+import { tags } from "@lezer/highlight";
+const CODE_PALETTE = [
+  {
+    tag: [tags.keyword, tags.modifier, tags.operatorKeyword],
+    color: "#a626a4",
+    cssVar: "--md-code-keyword"
+  },
+  {
+    tag: [tags.string, tags.special(tags.string)],
+    color: "#50a14f",
+    cssVar: "--md-code-string"
+  },
+  {
+    tag: tags.comment,
+    color: "#a0a1a7",
+    cssVar: "--md-code-comment",
+    fontStyle: "italic"
+  },
+  {
+    tag: [tags.number, tags.bool, tags.null, tags.atom],
+    color: "#986801",
+    cssVar: "--md-code-literal"
+  },
+  {
+    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+    color: "#4078f2",
+    cssVar: "--md-code-function"
+  },
+  {
+    tag: [tags.typeName, tags.className, tags.namespace],
+    color: "#c18401",
+    cssVar: "--md-code-type"
+  },
+  {
+    tag: tags.definition(tags.variableName),
+    color: "#e45649",
+    cssVar: "--md-code-variable"
+  },
+  { tag: tags.propertyName, color: "#4078f2", cssVar: "--md-code-property" },
+  { tag: [tags.tagName, tags.self], color: "#e45649", cssVar: "--md-code-tag" },
+  { tag: tags.attributeName, color: "#986801", cssVar: "--md-code-attribute" },
+  { tag: [tags.regexp, tags.escape], color: "#0184bc", cssVar: "--md-code-regexp" },
+  { tag: tags.invalid, color: "#ca1243", cssVar: "--md-code-invalid" }
+];
+function themedColor(spec) {
+  return `var(${spec.cssVar}, ${spec.color})`;
+}
+export {
+  CODE_PALETTE,
+  themedColor
+};
+//# sourceMappingURL=codePalette.js.map

package/dist/codemirror/code/codePalette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/codemirror/code/codePalette.ts"],"sourcesContent":["/**\n * The one code-syntax palette (One Light values — ADR 0002), consumed by both\n * renderers so code looks the same everywhere it appears:\n *\n * - the EDITOR, via `codeHighlight.ts` (a CodeMirror `HighlightStyle` built\n *   from these specs), and\n * - the CLIPBOARD, via `highlightFence.ts` (inline-styled spans — pasted HTML\n *   carries no stylesheet, so classes would be dead weight there).\n *\n * Each entry carries both a CSS custom property and a literal colour, because\n * the two renderers cannot use the same one:\n *\n * - the editor emits a stylesheet, so it can read `var(--md-code-…)` and let a\n *   host restyle code for a dark theme;\n * - the clipboard cannot. Pasted HTML arrives with no stylesheet, so a `var()`\n *   would resolve to nothing and paste colourless code into Google Docs or\n *   Word. It keeps the literal — which is also right on the merits, since the\n *   document being pasted into is white whatever theme the editor was in.\n *\n * So `color` is the light value AND the fallback; a host that sets no variables\n * gets exactly the palette it got before.\n */\n\nimport { tags, type Tag } from \"@lezer/highlight\";\n\nexport interface CodeStyleSpec {\n  tag: Tag | readonly Tag[];\n  /** Literal colour: the light value, the `var()` fallback, and what the\n   *  clipboard uses verbatim. */\n  color: string;\n  /** Custom property a host can set to restyle this role. */\n  cssVar: string;\n  fontStyle?: string;\n}\n\nexport const CODE_PALETTE: readonly CodeStyleSpec[] = [\n  {\n    tag: [tags.keyword, tags.modifier, tags.operatorKeyword],\n    color: \"#a626a4\",\n    cssVar: \"--md-code-keyword\",\n  },\n  {\n    tag: [tags.string, tags.special(tags.string)],\n    color: \"#50a14f\",\n    cssVar: \"--md-code-string\",\n  },\n  {\n    tag: tags.comment,\n    color: \"#a0a1a7\",\n    cssVar: \"--md-code-comment\",\n    fontStyle: \"italic\",\n  },\n  {\n    tag: [tags.number, tags.bool, tags.null, tags.atom],\n    color: \"#986801\",\n    cssVar: \"--md-code-literal\",\n  },\n  {\n    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],\n    color: \"#4078f2\",\n    cssVar: \"--md-code-function\",\n  },\n  {\n    tag: [tags.typeName, tags.className, tags.namespace],\n    color: \"#c18401\",\n    cssVar: \"--md-code-type\",\n  },\n  {\n    tag: tags.definition(tags.variableName),\n    color: \"#e45649\",\n    cssVar: \"--md-code-variable\",\n  },\n  { tag: tags.propertyName, color: \"#4078f2\", cssVar: \"--md-code-property\" },\n  { tag: [tags.tagName, tags.self], color: \"#e45649\", cssVar: \"--md-code-tag\" },\n  { tag: tags.attributeName, color: \"#986801\", cssVar: \"--md-code-attribute\" },\n  { tag: [tags.regexp, tags.escape], color: \"#0184bc\", cssVar: \"--md-code-regexp\" },\n  { tag: tags.invalid, color: \"#ca1243\", cssVar: \"--md-code-invalid\" },\n];\n\n/** What the editor paints with: themeable, falling back to the light value. */\nexport function themedColor(spec: CodeStyleSpec): string {\n  return `var(${spec.cssVar}, ${spec.color})`;\n}\n"],"mappings":";AAuBA,SAAS,YAAsB;AAYxB,MAAM,eAAyC;AAAA,EACpD;AAAA,IACE,KAAK,CAAC,KAAK,SAAS,KAAK,UAAU,KAAK,eAAe;AAAA,IACvD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,KAAK,CAAC,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,CAAC;AAAA,IAC5C,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,KAAK,KAAK;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA;AAAA,IACE,KAAK,CAAC,KAAK,QAAQ,KAAK,MAAM,KAAK,MAAM,KAAK,IAAI;AAAA,IAClD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,KAAK,CAAC,KAAK,SAAS,KAAK,YAAY,GAAG,KAAK,SAAS,KAAK,YAAY,CAAC;AAAA,IACxE,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,KAAK,CAAC,KAAK,UAAU,KAAK,WAAW,KAAK,SAAS;AAAA,IACnD,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,KAAK,KAAK,WAAW,KAAK,YAAY;AAAA,IACtC,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,EAAE,KAAK,KAAK,cAAc,OAAO,WAAW,QAAQ,qBAAqB;AAAA,EACzE,EAAE,KAAK,CAAC,KAAK,SAAS,KAAK,IAAI,GAAG,OAAO,WAAW,QAAQ,gBAAgB;AAAA,EAC5E,EAAE,KAAK,KAAK,eAAe,OAAO,WAAW,QAAQ,sBAAsB;AAAA,EAC3E,EAAE,KAAK,CAAC,KAAK,QAAQ,KAAK,MAAM,GAAG,OAAO,WAAW,QAAQ,mBAAmB;AAAA,EAChF,EAAE,KAAK,KAAK,SAAS,OAAO,WAAW,QAAQ,oBAAoB;AACrE;AAGO,SAAS,YAAY,MAA6B;AACvD,SAAO,OAAO,KAAK,MAAM,KAAK,KAAK,KAAK;AAC1C;","names":[]}

package/dist/codemirror/code/fenceAutoClose.d.ts

@@ -0,0 +1,30 @@
+import * as _codemirror_state from '@codemirror/state';
+import { EditorState } from '@codemirror/state';
+import { Command } from '@codemirror/view';
+
+/** The FencedCode syntax node, as a structural stand-in (`@lezer/common` stays
+ *  a transitive dep). Exported because `fenceAt` returns it. */
+type FenceNode = {
+    readonly name: string;
+    readonly from: number;
+    readonly to: number;
+    readonly parent: FenceNode | null;
+    getChildren(type: string): readonly FenceNode[];
+};
+/** The keystroke that completes a ```/~~~ opener at a line's content start
+ * closes the fence below, before the unclosed state can swallow the rest of
+ * the document; a keystroke on a closed fence's closing line re-sites onto a
+ * fresh content line (§12.7). */
+declare const fenceTypeAutoClose: _codemirror_state.Extension;
+/** The FencedCode ancestor at `pos`, or null.
+ *
+ * Resolves from {@link treeAt}, not `syntaxTree`: a tree that stops short of
+ * `pos` reports it as bare `Document`, and the delete guards then merge a code
+ * block into the prose above it. */
+declare function fenceAt(state: EditorState, pos: number): FenceNode | null;
+declare const fenceAutoClose: Command;
+/** Enter on the block's empty last content line exits below the fence. */
+declare const fenceExitBlock: Command;
+declare const fenceAutoCloseKeymap: _codemirror_state.Extension;
+
+export { type FenceNode, fenceAt, fenceAutoClose, fenceAutoCloseKeymap, fenceExitBlock, fenceTypeAutoClose };

package/dist/codemirror/code/fenceAutoClose.js

@@ -0,0 +1,171 @@
+import "../../chunk-V6TY7KAL.js";
+import { EditorSelection, EditorState, Prec } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { lineStructure } from "../core/lineStructure.js";
+import { treeAt } from "../core/treeAt.js";
+function containerPrefix(text) {
+  return [...text].map((c) => c === ">" ? ">" : " ").join("");
+}
+function resiteFenceLineTyping(tr, from, text) {
+  const state = tr.startState;
+  let node = fenceAt(state, from);
+  if (!node) {
+    const line = state.doc.lineAt(from);
+    if (from !== line.from || line.to === line.from) return null;
+    const probed = fenceAt(state, line.to);
+    if (!probed || state.doc.lineAt(probed.from).from !== line.from) return null;
+    node = probed;
+  }
+  const marks = node.getChildren("CodeMark");
+  if (marks.length < 2) return null;
+  const openerLine = state.doc.lineAt(node.from);
+  const closer = marks[marks.length - 1];
+  const closerLine = state.doc.lineAt(closer.from);
+  if (from >= openerLine.from && from <= openerLine.to) {
+    const bodyIsEmpty = closerLine.number - openerLine.number < 2 || state.doc.sliceString(openerLine.to, closerLine.from).split("\n").every((lineText) => /^[>\s]*$/.test(lineText));
+    if (bodyIsEmpty && from >= marks[0].to && from <= openerLine.to && text !== "`" && text !== "~") {
+      return null;
+    }
+    if (openerLine.to + 1 <= closerLine.from - 1) {
+      const contentStart = openerLine.to + 1;
+      return {
+        changes: { from: contentStart, insert: text },
+        selection: EditorSelection.cursor(contentStart + text.length),
+        userEvent: "input.type"
+      };
+    }
+    const prefix2 = containerPrefix(state.doc.sliceString(openerLine.from, node.from));
+    const insert2 = `${state.lineBreak}${prefix2}${text}`;
+    return {
+      changes: { from: openerLine.to, insert: insert2 },
+      selection: EditorSelection.cursor(openerLine.to + insert2.length),
+      userEvent: "input.type"
+    };
+  }
+  if (from < closerLine.from || from > closerLine.to) return null;
+  const prefix = containerPrefix(state.doc.sliceString(closerLine.from, closer.from));
+  const insert = `${state.lineBreak}${prefix}${text}`;
+  const at = closerLine.from - 1;
+  return {
+    changes: { from: at, insert },
+    selection: EditorSelection.cursor(at + insert.length),
+    userEvent: "input.type"
+  };
+}
+const fenceTypeAutoClose = EditorState.transactionFilter.of((tr) => {
+  if (!tr.docChanged || !tr.isUserEvent("input.type") || tr.isUserEvent("input.type.compose")) {
+    return tr;
+  }
+  let single = null;
+  let eligible = true;
+  tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted) => {
+    const ch = inserted.toString();
+    if (single || fromA !== toA || ch.includes("\n")) eligible = false;
+    else single = { from: fromA, ch };
+  });
+  if (!eligible || !single) return tr;
+  const resited = resiteFenceLineTyping(tr, single.from, single.ch);
+  if (resited) return [resited];
+  const { ch: typed } = single;
+  if (typed !== "`" && typed !== "~") return tr;
+  const { from } = single;
+  const oldLine = tr.startState.doc.lineAt(from);
+  const info = lineStructure(tr.startState, oldLine);
+  if (info.inCode) return tr;
+  const contentStart = info.list ? info.list.markTo : info.contentFrom;
+  const newLine = tr.newDoc.lineAt(from + 1);
+  const content = tr.newDoc.sliceString(contentStart, newLine.to);
+  if (!/^(`{3,}|~{3,})$/.test(content) || from + 1 !== newLine.to) return tr;
+  const prefix = containerPrefix(tr.newDoc.sliceString(newLine.from, contentStart));
+  const brk = tr.startState.lineBreak;
+  return [
+    tr,
+    {
+      changes: { from: newLine.to, insert: `${brk}${prefix}${brk}${prefix}${content}` },
+      // The caret STAYS at the end of the opener: typing continues the
+      // language tag (```mermaid), Enter steps into the body (§12.5).
+      selection: EditorSelection.cursor(newLine.to),
+      sequential: true
+    }
+  ];
+});
+function fenceAt(state, pos) {
+  let node = treeAt(state, pos).resolveInner(pos, -1);
+  while (node && node.name !== "FencedCode") node = node.parent;
+  return node;
+}
+const fenceAutoClose = (view) => {
+  const { state } = view;
+  const { main } = state.selection;
+  if (!main.empty) return false;
+  const line = state.doc.lineAt(main.head);
+  if (main.head !== line.to) return false;
+  const node = fenceAt(state, main.head);
+  if (!node || node.from < line.from) return false;
+  const marks = node.getChildren("CodeMark");
+  const open = marks[0];
+  if (!open) return false;
+  if (marks.length >= 2) {
+    if (line.to < state.doc.length) {
+      const next = state.doc.lineAt(line.to + 1);
+      const closerLine = state.doc.lineAt(marks[marks.length - 1].from);
+      if (next.number < closerLine.number && /^[>\s]*$/.test(next.text)) {
+        view.dispatch({
+          selection: EditorSelection.cursor(next.to),
+          scrollIntoView: true,
+          userEvent: "select"
+        });
+        return true;
+      }
+    }
+    return false;
+  }
+  const fence = state.sliceDoc(open.from, open.to);
+  const indent = state.sliceDoc(line.from, open.from);
+  view.dispatch({
+    changes: { from: line.to, insert: `${state.lineBreak}${state.lineBreak}${indent}${fence}` },
+    selection: EditorSelection.cursor(line.to + state.lineBreak.length),
+    scrollIntoView: true,
+    userEvent: "input"
+  });
+  return true;
+};
+const fenceExitBlock = (view) => {
+  const { state } = view;
+  const { main } = state.selection;
+  if (!main.empty) return false;
+  const line = state.doc.lineAt(main.head);
+  if (line.from !== line.to) return false;
+  const node = fenceAt(state, main.head);
+  if (!node || node.from >= line.from) return false;
+  const marks = node.getChildren("CodeMark");
+  if (marks.length < 2) return false;
+  const closing = marks[marks.length - 1];
+  if (state.doc.lineAt(closing.from).number !== line.number + 1) return false;
+  const docLen = state.doc.length;
+  const changes = [{ from: line.from - 1, to: line.to, insert: "" }];
+  if (node.to === docLen) changes.push({ from: docLen, insert: state.lineBreak });
+  const removed = line.to - line.from + 1;
+  view.dispatch({
+    changes,
+    // Just past the (shifted) closing fence's newline — the line below.
+    selection: EditorSelection.cursor(node.to - removed + 1),
+    scrollIntoView: true,
+    userEvent: "input"
+  });
+  return true;
+};
+const fenceAutoCloseKeymap = Prec.highest(
+  keymap.of([
+    { key: "Enter", run: fenceAutoClose },
+    { key: "Enter", run: fenceExitBlock }
+  ])
+);
+export {
+  fenceAt,
+  fenceAutoClose,
+  fenceAutoCloseKeymap,
+  fenceExitBlock,
+  fenceTypeAutoClose
+};
+//# sourceMappingURL=fenceAutoClose.js.map