@valentinkolb/cloud 0.4.0 → 0.5.1

package/src/ui/input/markdown/Toolbar.tsx

@@ -0,0 +1,90 @@
+/**
+ * Toolbar button strip for the markdown editor. Mouse-only by design:
+ * each button has `tabIndex=-1` so Tab navigates AROUND the editor's
+ * toolbar straight to the textarea body. Keyboard users get the same
+ * actions via `Cmd/Ctrl + B/I/E/K` and the shift-digit shortcuts.
+ *
+ * Buttons display in an active state (blue tint + faint background)
+ * when `activeFormats` contains their `id` — feedback that the caret
+ * currently sits inside a styled span. The set is computed by
+ * `active-formats.ts` and pushed in from the host component.
+ */
+import { For } from "solid-js";
+import {
+  toggleBold,
+  toggleItalic,
+  toggleCode,
+  insertLink,
+  toggleHeading,
+  toggleBulletList,
+  toggleNumberedList,
+  toggleQuote,
+} from "./actions";
+
+type ToolbarProps = {
+  /** Reactive accessor returning the textarea element (or null before mount). */
+  textarea: () => HTMLTextAreaElement | null;
+  /** Reactive set of "currently active" format IDs at the caret. The
+   * button whose `id` is in the set renders in the active visual state
+   * (overtype convention — gives the user feedback that the cursor sits
+   * inside a styled span). */
+  activeFormats?: () => Set<string>;
+  disabled?: boolean;
+};
+
+type Tool =
+  | { kind: "btn"; id: string; icon: string; title: string; run: (ta: HTMLTextAreaElement) => void }
+  | { kind: "sep" };
+
+const TOOLS: Tool[] = [
+  { kind: "btn", id: "bold", icon: "ti ti-bold", title: "Bold (Ctrl/Cmd+B)", run: toggleBold },
+  { kind: "btn", id: "italic", icon: "ti ti-italic", title: "Italic (Ctrl/Cmd+I)", run: toggleItalic },
+  { kind: "btn", id: "code", icon: "ti ti-code", title: "Inline code (Ctrl/Cmd+E)", run: toggleCode },
+  { kind: "btn", id: "link", icon: "ti ti-link", title: "Link (Ctrl/Cmd+K)", run: (ta) => insertLink(ta) },
+  { kind: "sep" },
+  { kind: "btn", id: "h1", icon: "ti ti-h-1", title: "Heading 1 (Ctrl/Cmd+Shift+1)", run: (ta) => toggleHeading(ta, 1) },
+  { kind: "btn", id: "h2", icon: "ti ti-h-2", title: "Heading 2 (Ctrl/Cmd+Shift+2)", run: (ta) => toggleHeading(ta, 2) },
+  { kind: "btn", id: "h3", icon: "ti ti-h-3", title: "Heading 3 (Ctrl/Cmd+Shift+3)", run: (ta) => toggleHeading(ta, 3) },
+  { kind: "sep" },
+  { kind: "btn", id: "bullet", icon: "ti ti-list", title: "Bullet list (Ctrl/Cmd+Shift+8)", run: toggleBulletList },
+  { kind: "btn", id: "ordered", icon: "ti ti-list-numbers", title: "Numbered list (Ctrl/Cmd+Shift+7)", run: toggleNumberedList },
+  { kind: "btn", id: "quote", icon: "ti ti-quote", title: "Quote", run: toggleQuote },
+];
+
+export default function Toolbar(props: ToolbarProps) {
+  return (
+    <div class="md-editor-toolbar" role="toolbar" aria-label="Markdown formatting">
+      <For each={TOOLS}>
+        {(tool) =>
+          tool.kind === "sep" ? (
+            <span class="md-editor-tool-sep" aria-hidden="true" />
+          ) : (
+            <button
+              type="button"
+              class="md-editor-tool"
+              title={tool.title}
+              aria-label={tool.title}
+              aria-pressed={props.activeFormats?.().has(tool.id) ? "true" : undefined}
+              disabled={props.disabled}
+              // tabIndex=-1 so Tab doesn't land on 10 formatting buttons
+              // before reaching the editor body. Keyboard users have all
+              // the same actions available via Cmd/Ctrl shortcuts; the
+              // toolbar stays a mouse-friendly affordance.
+              tabIndex={-1}
+              // Prevent the button from stealing focus from the textarea —
+              // we want the textarea to stay focused so the cursor stays
+              // visible during action.
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => {
+                const ta = props.textarea();
+                if (ta) tool.run(ta);
+              }}
+            >
+              <i class={tool.icon} />
+            </button>
+          )
+        }
+      </For>
+    </div>
+  );
+}

package/src/ui/input/markdown/actions.ts

@@ -0,0 +1,233 @@
+/**
+ * Text manipulations for the markdown editor toolbar / shortcuts.
+ *
+ * Every action operates on a real `<textarea>` element and uses
+ * `document.execCommand("insertText", …)` for the actual replacement.
+ * Although `execCommand` is technically deprecated, it remains the only
+ * way to mutate a textarea while keeping the browser's NATIVE undo
+ * stack intact — replacing `.value` directly clears the user's undo
+ * history, which is hostile to non-technical users editing prose. All
+ * actions are otherwise pure DOM ops with no Solid involvement, so they
+ * can be called from event handlers in any framework.
+ *
+ * Selection handling principles:
+ *   - Read `selectionStart` / `selectionEnd` to capture state.
+ *   - Compute the replacement string.
+ *   - `textarea.setSelectionRange(start, end)` to widen the selection
+ *     to cover what we want to replace.
+ *   - `document.execCommand("insertText", false, replacement)`.
+ *   - Set the cursor / selection to the desired final position.
+ *   - Dispatch an `input` event so the host component re-renders the
+ *     preview and notifies its `onInput` listener.
+ */
+
+const replaceRange = (ta: HTMLTextAreaElement, start: number, end: number, replacement: string): void => {
+  ta.focus();
+  ta.setSelectionRange(start, end);
+  // `document.execCommand("insertText", …)` fires an `input` event on
+  // all major browsers — no manual dispatch needed on the happy path.
+  // It also keeps the textarea's native undo history intact.
+  const ok = document.execCommand("insertText", false, replacement);
+  if (!ok) {
+    // Fallback: direct assignment loses undo history AND does NOT
+    // fire input on its own, so we synthesise the event so consumers
+    // and the editor's onInput listener still see the change.
+    const before = ta.value.slice(0, start);
+    const after = ta.value.slice(end);
+    ta.value = before + replacement + after;
+    const caret = start + replacement.length;
+    ta.setSelectionRange(caret, caret);
+    ta.dispatchEvent(new Event("input", { bubbles: true }));
+  }
+};
+
+type LineInfo = { lineStart: number; lineEnd: number; line: string };
+
+const lineAt = (value: string, pos: number): LineInfo => {
+  const lineStart = value.lastIndexOf("\n", pos - 1) + 1;
+  const nlAfter = value.indexOf("\n", pos);
+  const lineEnd = nlAfter === -1 ? value.length : nlAfter;
+  return { lineStart, lineEnd, line: value.slice(lineStart, lineEnd) };
+};
+
+/** Expand the selection to cover full lines for line-level toggles. */
+const selectedLineRange = (ta: HTMLTextAreaElement): { start: number; end: number; lines: string[] } => {
+  const value = ta.value;
+  const selStart = ta.selectionStart;
+  const selEnd = ta.selectionEnd;
+  const startLine = lineAt(value, selStart);
+  // If selEnd is exactly at a line start (just after \n), don't expand
+  // forward to the next line — selecting "line1\n" then toggling should
+  // affect only line1.
+  const adjustedEnd = selEnd > selStart && selEnd > 0 && value[selEnd - 1] === "\n" ? selEnd - 1 : selEnd;
+  const endLine = lineAt(value, adjustedEnd);
+  const block = value.slice(startLine.lineStart, endLine.lineEnd);
+  return { start: startLine.lineStart, end: endLine.lineEnd, lines: block.split("\n") };
+};
+
+/* ────────────────────────────────────────────────────────────────────
+ * Inline wrappers (bold / italic / code)
+ * ──────────────────────────────────────────────────────────────────── */
+
+const toggleInlineWrap = (ta: HTMLTextAreaElement, marker: string, placeholder: string): void => {
+  const value = ta.value;
+  const selStart = ta.selectionStart;
+  const selEnd = ta.selectionEnd;
+  const mlen = marker.length;
+
+  // Already wrapped? Check chars just outside the selection.
+  const outsideBefore = value.slice(Math.max(0, selStart - mlen), selStart);
+  const outsideAfter = value.slice(selEnd, selEnd + mlen);
+  if (outsideBefore === marker && outsideAfter === marker) {
+    // Unwrap: remove the marker on each side
+    replaceRange(ta, selStart - mlen, selEnd + mlen, value.slice(selStart, selEnd));
+    const newStart = selStart - mlen;
+    const newEnd = selEnd - mlen;
+    ta.setSelectionRange(newStart, newEnd);
+    return;
+  }
+
+  // Or inside-wrapped: selection contains the markers (e.g. user
+  // selected `**bold**` itself). Strip if the selection starts and
+  // ends with the marker.
+  const sel = value.slice(selStart, selEnd);
+  if (sel.length >= mlen * 2 && sel.startsWith(marker) && sel.endsWith(marker)) {
+    const stripped = sel.slice(mlen, sel.length - mlen);
+    replaceRange(ta, selStart, selEnd, stripped);
+    ta.setSelectionRange(selStart, selStart + stripped.length);
+    return;
+  }
+
+  // Wrap. If the selection is empty, insert `marker + placeholder +
+  // marker` and select the placeholder so the user can type to replace.
+  if (selStart === selEnd) {
+    const insert = `${marker}${placeholder}${marker}`;
+    replaceRange(ta, selStart, selEnd, insert);
+    ta.setSelectionRange(selStart + mlen, selStart + mlen + placeholder.length);
+  } else {
+    const wrapped = `${marker}${sel}${marker}`;
+    replaceRange(ta, selStart, selEnd, wrapped);
+    ta.setSelectionRange(selStart + mlen, selStart + mlen + sel.length);
+  }
+};
+
+export const toggleBold = (ta: HTMLTextAreaElement): void => toggleInlineWrap(ta, "**", "bold text");
+export const toggleItalic = (ta: HTMLTextAreaElement): void => toggleInlineWrap(ta, "*", "italic text");
+export const toggleCode = (ta: HTMLTextAreaElement): void => toggleInlineWrap(ta, "`", "code");
+
+/* ────────────────────────────────────────────────────────────────────
+ * Links
+ * ──────────────────────────────────────────────────────────────────── */
+
+/**
+ * Insert `[selection](url)` — or `[label](url)` when nothing's selected.
+ * After insertion the cursor lands inside the URL parens so the user
+ * can immediately paste / type the destination.
+ */
+export const insertLink = (ta: HTMLTextAreaElement, url?: string): void => {
+  const value = ta.value;
+  const selStart = ta.selectionStart;
+  const selEnd = ta.selectionEnd;
+  const sel = value.slice(selStart, selEnd);
+  const label = sel || "link";
+  const finalUrl = url ?? "";
+  const insert = `[${label}](${finalUrl})`;
+  replaceRange(ta, selStart, selEnd, insert);
+  // Land the cursor inside the parens — between `(` and `)`.
+  const caret = selStart + label.length + 3 + finalUrl.length;
+  if (finalUrl) {
+    // URL was provided (e.g. from smart paste). Select the label so
+    // the user can keep typing if they want to rename it.
+    ta.setSelectionRange(selStart + 1, selStart + 1 + label.length);
+  } else {
+    ta.setSelectionRange(caret, caret);
+  }
+};
+
+/* ────────────────────────────────────────────────────────────────────
+ * Line-level toggles (headers, lists, quote)
+ * ──────────────────────────────────────────────────────────────────── */
+
+/**
+ * Toggle a single-prefix line marker (`> `, `# `, etc.).
+ *  - If every selected line already has the marker (after its indent),
+ *    strip the marker but keep the indent.
+ *  - Otherwise, insert the marker AFTER each line's leading whitespace
+ *    so indented lines stay indented.
+ */
+const togglePrefix = (ta: HTMLTextAreaElement, prefix: string): void => {
+  const { start, end, lines } = selectedLineRange(ta);
+  const splitIndent = (l: string): [string, string] => {
+    const m = /^(\s*)(.*)$/.exec(l)!;
+    return [m[1]!, m[2]!];
+  };
+  const allHave = lines.every((l) => {
+    const [, body] = splitIndent(l);
+    return body.startsWith(prefix);
+  });
+  const transformed = lines.map((l) => {
+    const [indent, body] = splitIndent(l);
+    return allHave ? indent + body.slice(prefix.length) : indent + prefix + body;
+  });
+  const replacement = transformed.join("\n");
+  replaceRange(ta, start, end, replacement);
+  ta.setSelectionRange(start, start + replacement.length);
+};
+
+/**
+ * Toggle a heading at the current line. `level` is 1, 2, or 3. If the
+ * line already has the exact level, strip it (toggle off). If it has a
+ * different heading level, replace it. Else prepend.
+ */
+export const toggleHeading = (ta: HTMLTextAreaElement, level: 1 | 2 | 3): void => {
+  const value = ta.value;
+  const oldCaret = ta.selectionStart;
+  const { lineStart, lineEnd, line } = lineAt(value, oldCaret);
+  const want = "#".repeat(level) + " ";
+  const headerRe = /^(#{1,6})\s/;
+  const existing = headerRe.exec(line);
+  let newLine: string;
+  if (existing && existing[1]!.length === level) {
+    newLine = line.slice(existing[0].length);
+  } else if (existing) {
+    newLine = want + line.slice(existing[0].length);
+  } else {
+    newLine = want + line;
+  }
+  replaceRange(ta, lineStart, lineEnd, newLine);
+  // Caret math must use the PRE-mutation caret. `replaceRange` moves
+  // the selection to the end of the inserted text; reading
+  // selectionStart now would lose the user's original position. Clamp
+  // to the new line bounds so we never end up before the line start.
+  const delta = newLine.length - line.length;
+  const desired = Math.max(lineStart, oldCaret + delta);
+  const newCaret = Math.min(desired, lineStart + newLine.length);
+  ta.setSelectionRange(newCaret, newCaret);
+};
+
+export const toggleBulletList = (ta: HTMLTextAreaElement): void => togglePrefix(ta, "- ");
+export const toggleQuote = (ta: HTMLTextAreaElement): void => togglePrefix(ta, "> ");
+
+/**
+ * Numbered list toggle. Renumber from 1 across the selection when adding;
+ * strip the `N. ` prefix when removing. Leading indent is preserved on
+ * both code paths so indented lists keep their nesting.
+ */
+export const toggleNumberedList = (ta: HTMLTextAreaElement): void => {
+  const { start, end, lines } = selectedLineRange(ta);
+  const lineRe = /^(\s*)(\d+\.\s)?(.*)$/;
+  const parts = lines.map((l) => {
+    const m = lineRe.exec(l)!;
+    return { indent: m[1] ?? "", existingMarker: m[2], rest: m[3] ?? "" };
+  });
+  const allNumbered = parts.every((p) => !!p.existingMarker);
+  let transformed: string[];
+  if (allNumbered) {
+    transformed = parts.map((p) => p.indent + p.rest);
+  } else {
+    transformed = parts.map((p, i) => `${p.indent}${i + 1}. ${p.rest}`);
+  }
+  const replacement = transformed.join("\n");
+  replaceRange(ta, start, end, replacement);
+  ta.setSelectionRange(start, start + replacement.length);
+};

package/src/ui/input/markdown/active-formats.ts

@@ -0,0 +1,94 @@
+/**
+ * Inspect the textarea's current line and cursor position, return the
+ * set of markdown formats currently "active" at the caret. The toolbar
+ * uses this to highlight matching buttons (overtype convention: blue
+ * tint on the icon when the cursor sits inside a styled span).
+ *
+ * Format IDs match the toolbar button IDs: `bold`, `italic`, `code`,
+ * `h1`, `h2`, `h3`, `bullet`, `ordered`, `quote`.
+ *
+ * Inline detection is heuristic — we count delimiter occurrences on
+ * the current line up to the caret. An odd count means we're "inside"
+ * that delimiter. This works for typical markdown but won't catch
+ * every CommonMark edge case (escaped asterisks, intra-word
+ * underscores, etc.). Good enough for live UI feedback.
+ */
+/** True if the caret on this line sits inside an unclosed inline-code
+ *  span (odd number of backticks before it). */
+const inOpenCode = (beforeOnLine: string): boolean => (beforeOnLine.match(/`/g) ?? []).length % 2 !== 0;
+
+/** True if the caret sits between `](` and `)` of a markdown link, i.e.
+ *  inside the URL parens. We don't want to report bold/italic/code as
+ *  active while editing a URL. */
+const inLinkUrl = (beforeOnLine: string): boolean => {
+  // Scan from right-to-left for the first unbalanced "](" with no `)`
+  // between it and the caret.
+  const lastUrlOpen = beforeOnLine.lastIndexOf("](");
+  if (lastUrlOpen === -1) return false;
+  const afterOpen = beforeOnLine.slice(lastUrlOpen + 2);
+  return !afterOpen.includes(")");
+};
+
+/** Replace ranges between paired delimiters with spaces of equal length
+ *  so the remaining string preserves character offsets but no longer
+ *  contains "active" delimiter chars. Used to neutralise inline code
+ *  spans and link URLs before counting bold/italic delimiters. */
+const scrub = (s: string): string =>
+  s
+    // Inline code: closed spans (paired backtick runs)
+    .replace(/(?<!`)(`+)(?!`)([^\n]+?)\1(?!`)/g, (m) => " ".repeat(m.length))
+    // Link URL section `](…)` — keep `[label` intact so its asterisks
+    // are still counted; only the URL is scrubbed.
+    .replace(/\]\(([^)\n]*?)\)/g, (m) => " ".repeat(m.length));
+
+export const computeActiveFormats = (textarea: HTMLTextAreaElement): Set<string> => {
+  const value = textarea.value;
+  const caret = textarea.selectionStart;
+  const active = new Set<string>();
+
+  const lineStart = value.lastIndexOf("\n", caret - 1) + 1;
+  const nextNl = value.indexOf("\n", caret);
+  const lineEnd = nextNl === -1 ? value.length : nextNl;
+  const line = value.slice(lineStart, lineEnd);
+  const beforeOnLine = value.slice(lineStart, caret);
+
+  // Line-level — at most one block format per line.
+  const header = /^(#{1,3})\s/.exec(line);
+  if (header) active.add(`h${header[1]!.length}`);
+  else if (/^\s*[-*+]\s/.test(line)) active.add("bullet");
+  else if (/^\s*\d+\.\s/.test(line)) active.add("ordered");
+  else if (/^>\s/.test(line)) active.add("quote");
+
+  // Caret inside an OPEN inline-code span — only "code" is meaningful;
+  // everything else inside code is verbatim text, not active markdown.
+  if (inOpenCode(beforeOnLine)) {
+    active.add("code");
+    return active;
+  }
+  // Caret inside a link URL — nothing inline is "active". The user is
+  // editing the URL, not styled prose.
+  if (inLinkUrl(beforeOnLine)) return active;
+
+  // Scrub closed code spans + link URLs so we don't count their inner
+  // asterisks/underscores as styling delimiters on this line.
+  const scrubbed = scrub(beforeOnLine);
+
+  // Bold (`**`): count occurrences; strip then count single asterisks
+  // for italic, so `**bold**` doesn't double-count its inner stars.
+  const boldPairs = (scrubbed.match(/\*\*/g) ?? []).length;
+  if (boldPairs % 2 !== 0) active.add("bold");
+
+  const scrubbedNoBold = scrubbed.replace(/\*\*/g, "");
+  const italicStars = (scrubbedNoBold.match(/\*/g) ?? []).length;
+  if (italicStars % 2 !== 0) active.add("italic");
+
+  // Underscore-bold (`__`) and underscore-italic (`_…_`). Mirror the
+  // highlighter so the toolbar reports active state for both delimiter
+  // styles. We strip `__` first to disambiguate single vs double, same
+  // as the asterisk branch.
+  if ((scrubbed.match(/__/g) ?? []).length % 2 !== 0) active.add("bold");
+  const scrubbedNoDouble = scrubbed.replace(/__/g, "");
+  if ((scrubbedNoDouble.match(/_/g) ?? []).length % 2 !== 0) active.add("italic");
+
+  return active;
+};

package/src/ui/input/markdown/behaviors.ts

@@ -0,0 +1,193 @@
+/**
+ * Editor input behaviours — pure event handlers that translate user
+ * gestures (keystrokes, paste) into the textarea-manipulation actions
+ * defined in `actions.ts`. None of these own state of their own; each
+ * is a small function the host component wires into the matching DOM
+ * event.
+ *
+ * Conventions:
+ *
+ *   - Each handler returns `true` when it has consumed the event;
+ *     the caller should then `preventDefault()` and stop further
+ *     processing. `false` means "I'm not interested — fall through to
+ *     the next handler or to the browser default".
+ *   - All mutations go through `actions.ts` or `execCommand("insertText")`
+ *     so the textarea's native undo history stays usable. We never
+ *     assign `textarea.value` directly.
+ */
+import {
+  toggleBold,
+  toggleItalic,
+  toggleCode,
+  toggleBulletList,
+  toggleNumberedList,
+  toggleHeading,
+  insertLink,
+} from "./actions";
+
+/* ────────────────────────────────────────────────────────────────────
+ * Keyboard shortcuts
+ * ──────────────────────────────────────────────────────────────────── */
+
+const isMac = (): boolean => typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
+
+/**
+ * Cmd/Ctrl + (B/I/E/K) + (Shift+1/2/3 for headings, Shift+7/8 for
+ * lists). Mac-aware (metaKey vs ctrlKey). Skips firing during IME
+ * composition (overtype issue #80 lesson). Layout-independent digit
+ * detection via `e.code === "DigitN"` so Shift+1 works on QWERTY,
+ * AZERTY, German, etc.
+ */
+export const handleShortcut = (e: KeyboardEvent, ta: HTMLTextAreaElement): boolean => {
+  if (e.isComposing) return false;
+  // AltGr on Windows / Linux raises `altKey + ctrlKey` together to
+  // produce keys like `@`. Skip Ctrl-shortcuts when Alt is held so we
+  // don't hijack AltGr character entry.
+  if (e.altKey) return false;
+  const mod = isMac() ? e.metaKey : e.ctrlKey;
+  if (!mod) return false;
+
+  if (!e.shiftKey) {
+    switch (e.key.toLowerCase()) {
+      case "b":
+        toggleBold(ta);
+        return true;
+      case "i":
+        toggleItalic(ta);
+        return true;
+      case "e":
+        // GitHub / Slack / Notion convention for inline code.
+        toggleCode(ta);
+        return true;
+      case "k":
+        insertLink(ta);
+        return true;
+    }
+  }
+
+  if (e.shiftKey) {
+    // We check `e.code` (layout-independent physical key) rather than
+    // `e.key` (the produced character), so US Shift+1 (`!`),
+    // German Shift+1 (`!`), and AZERTY Shift+1 (`1`) all map to H1.
+    switch (e.code) {
+      case "Digit1":
+        toggleHeading(ta, 1);
+        return true;
+      case "Digit2":
+        toggleHeading(ta, 2);
+        return true;
+      case "Digit3":
+        toggleHeading(ta, 3);
+        return true;
+      case "Digit7":
+        toggleNumberedList(ta);
+        return true;
+      case "Digit8":
+        toggleBulletList(ta);
+        return true;
+    }
+  }
+
+  return false;
+};
+
+/* ────────────────────────────────────────────────────────────────────
+ * Smart list continuation on Enter
+ * ──────────────────────────────────────────────────────────────────── */
+
+// `(\s*)` indent, marker (`-`, `*`, `+`, or `N.`), required whitespace,
+// then the rest of the line content.
+const LIST_RE = /^(\s*)([-*+]|\d+\.)(\s+)(.*)$/;
+
+const insertViaExecCommand = (ta: HTMLTextAreaElement, start: number, end: number, replacement: string): void => {
+  ta.focus();
+  ta.setSelectionRange(start, end);
+  document.execCommand("insertText", false, replacement);
+};
+
+/**
+ * Enter inside a list item:
+ *   - Non-empty item + caret at-or-after the marker → insert a new
+ *     line with the same indent + marker (numbered lists bump by 1).
+ *   - Empty item (marker only) → strip the marker, exit the list.
+ *   - Caret BEFORE the marker (e.g. column 0) → defer to native Enter
+ *     so we don't produce `\n- - item` nonsense.
+ */
+export const handleListContinuation = (ta: HTMLTextAreaElement): boolean => {
+  const value = ta.value;
+  const caret = ta.selectionStart;
+  if (caret !== ta.selectionEnd) return false; // selection → defer to native
+
+  const lineStart = value.lastIndexOf("\n", caret - 1) + 1;
+  const nextNl = value.indexOf("\n", caret);
+  const lineEnd = nextNl === -1 ? value.length : nextNl;
+  const line = value.slice(lineStart, lineEnd);
+
+  const m = LIST_RE.exec(line);
+  if (!m) return false;
+
+  const [, indent, marker, spaces, content] = m;
+  const markerEndPos = lineStart + indent!.length + marker!.length + spaces!.length;
+
+  // Caret must be at or past the marker. Editing the indent itself
+  // (caret < markerEndPos) gets native Enter.
+  if (caret < markerEndPos) return false;
+
+  // Empty item → exit the list by clearing this line.
+  if (content!.trim() === "") {
+    insertViaExecCommand(ta, lineStart, lineEnd, "");
+    ta.dispatchEvent(new Event("input", { bubbles: true }));
+    return true;
+  }
+
+  // Non-empty item → continue with same indent + (renumbered) marker.
+  const numbered = /^(\d+)\.$/.exec(marker!);
+  const nextMarker = numbered ? `${parseInt(numbered[1]!, 10) + 1}.` : marker!;
+  const insert = `\n${indent}${nextMarker}${spaces}`;
+  insertViaExecCommand(ta, caret, caret, insert);
+  ta.dispatchEvent(new Event("input", { bubbles: true }));
+  return true;
+};
+
+/* ────────────────────────────────────────────────────────────────────
+ * Smart paste — URL on selection becomes a markdown link
+ * ──────────────────────────────────────────────────────────────────── */
+
+const URL_RE = /^https?:\/\/\S+$/;
+
+/** Markdown link destinations end at the first unescaped `)`. URLs in
+ *  the wild often contain literal parens (Wikipedia disambiguation
+ *  pages, Microsoft Docs, etc.). Percent-encode them before insertion
+ *  so the rendered link syntax stays unambiguous. */
+const escapeUrlForMarkdown = (url: string): string => url.replace(/\(/g, "%28").replace(/\)/g, "%29");
+
+/** Reject strings that the loose regex accepts but `new URL()` can't
+ *  parse (typos, mismatched-paren pastes, etc.). */
+const isValidUrl = (raw: string): boolean => {
+  try {
+    new URL(raw);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * If the clipboard contains a single URL AND there's a non-empty
+ * selection, replace the selection with `[selection](escapedUrl)`.
+ * Otherwise, defer to the browser's native paste.
+ */
+export const handleSmartPaste = (e: ClipboardEvent, ta: HTMLTextAreaElement): boolean => {
+  const clip = e.clipboardData;
+  if (!clip) return false;
+
+  const text = clip.getData("text/plain");
+  if (!text) return false;
+  const trimmed = text.trim();
+  if (!URL_RE.test(trimmed)) return false;
+  if (!isValidUrl(trimmed)) return false;
+  if (ta.selectionStart === ta.selectionEnd) return false;
+
+  insertLink(ta, escapeUrlForMarkdown(trimmed));
+  return true;
+};

package/src/ui/input/markdown/code-zone.ts

@@ -0,0 +1,23 @@
+/**
+ * Markdown-only: detect whether a position in the text falls inside
+ * an inline-code span (between backticks) or a fenced code block
+ * (between triple-backtick lines).
+ *
+ * Used by the MarkdownEditor to suppress completions and
+ * auto-expansion inside code regions — code content is supposed to
+ * be verbatim. Lives here (and not in the generic completion engine)
+ * because the rule is markdown-specific.
+ */
+export const isInCodeZone = (text: string, pos: number): boolean => {
+  const before = text.slice(0, pos);
+
+  // Fenced code block: count "```" at line starts. Odd count → open.
+  const fenceMatches = before.match(/^```/gm);
+  if (fenceMatches && fenceMatches.length % 2 !== 0) return true;
+
+  // Inline code: odd number of `` ` `` on the current line before pos.
+  const lineStart = before.lastIndexOf("\n") + 1;
+  const lineBefore = before.slice(lineStart);
+  const tickCount = (lineBefore.match(/`/g) || []).length;
+  return tickCount % 2 !== 0;
+};