@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/margin.mjs

@@ -0,0 +1,352 @@
+import { OLD_OUTLINE_OPEN_KEY, OLD_PREFERENCES_KEY, OUTLINE_OPEN_KEY, PREFERENCES_KEY } from "../../shared/preferences.mjs";
+
+// The right side of the page while it is edited (docs/editor.md, "The outline and the right side"): the
+// outline (目录, outline/) docked at the window's right edge, the cards of 批注 (annotate/) between it and
+// the column, and where the body column goes beside them. The outline is a panel at the window's right
+// edge, in full (its list, 200px unless the reader dragged its guide wider or narrower: `outlineWidth`;
+// the guide 8px in) or as its strip (36px: a short line a heading, its card shown while the pointer is
+// on it), as the room allows.
+//
+// One rule places the column: in the middle of what the outline leaves of the page, as far from the
+// window's left edge as from the outline (its guide, or its strip). With the outline the rooms at the
+// column's two sides are the same, and they stay the same as the guide is dragged (each gives or takes
+// half of what the list takes or gives) and as the window is resized; without it the column is
+// centered in the page as ever. Each room is the edge room at least (64: the block handle at the left,
+// a section's bar and the annotation markers at the right). The list keeps the width the reader gave it
+// whatever the page's width does (the window resized, the workbench's sidebar dragged or sliding: its
+// guide stays where it is); where the page is short of room for it, the two rooms give (down to the
+// block handle's, 52), and below that the outline takes its strip, the column in the middle of what
+// the strip leaves; only then does the column narrow, as the page narrows on a small window
+// (MARGIN_STYLE, a rule of the page's width, so it holds while the window is resized). A report read
+// full width keeps the rooms at its two sides and gives the outline its own, the list in full only
+// while the column keeps 560px.
+//
+// A form laid out is kept for 16px under the width it needs (a scrollbar coming or a pixel of a
+// resize never flips it back and forth: a full-width report's column, narrower beside the list, can
+// grow taller and bring a scrollbar), the column narrower by what is short (16px at most). A form
+// changes as soon as the width says, while it moves too (the sidebar dragged or sliding): the list
+// comes the moment it fits and goes the moment it does not, never at the end of a drag. Nothing of it
+// depends on the headings, so typing the first heading moves nothing.
+//
+// 批注 take what the outline leaves, never what it has: the outline's form depends on them in nothing.
+// While the page has one (`notes`), their cards stand right of the column where that holds them, as
+// notion-lite's (298292 Vn: a page of 1150 and up, the page going left by max(0, (1500 − width) / 2)),
+// on its numbers read for ours. A card's room right of the column is 388: 60 to the card (clear of the
+// button beside a block), 308 of card, 20 past it. So on what the outline leaves, the column goes left
+// of its middle by max(0, (1488 − width) / 2) (712 + 2 × 388), down to the 52 of the handle's room, at
+// 1152; below that the card gives what is short, down to 240, at 1084 (52 + 712 + 60 + 240 + 20), and
+// below that, or beside a column read full width, which leaves no room at its right, they fold back
+// into markers in the column's right room and move nothing. The move is a page's rule of its width as
+// the rest (`--ge-card-room`, `--ge-floor`), so a window resized holds it; it slides over 200ms only
+// when the page comes to have an annotation or has none left, and each width lays it out at once.
+//
+// Its numbers are custom properties in a sheet of their own (`--ge-outline-room`, what the outline
+// takes of the page's width beside the column's rooms, `--ge-side`, the least room either side of the
+// column keeps, `--ge-card-room` and `--ge-floor` as above), set from the start by the page's head
+// (EARLY_MARGIN, which the edit service puts in it, saying whether the document has 批注: the page's
+// width read again once its content is in, its scrollbar with it, before the kit shows it), so the
+// column stands where it will stay from the first paint, and by setMargin() after that.
+// When they move the column, the page hears a resize, so what stands over the text (the format bar, a
+// selection's strips, a card) is placed again.
+
+/**
+ * The numbers: the edge room (the least room either side of the column keeps), the least it gives up
+ * to (the block handle's: its 38px, its 12px gap, 2px), the column, the least a full-width column
+ * keeps, the outline in full (its default width, the least and the most it is dragged to), its
+ * guide's inset in its panel (the column's right room ends there), how far left of the guide its grip
+ * reaches, its strip, the hysteresis; how far right of the column a card of 批注 stands (the button beside
+ * a block, past a section's strip, ends 52px out, and a card under the pointer comes 5px left: 3px
+ * clear; one focused comes 20px left, and no button shows then), a card's width, the least it gives up
+ * to, and the room past it (clear of the outline's guide and grip).
+ */
+export const MARGIN = Object.freeze({ edge: 64, start: 52, column: 712, least: 560, full: 200, fullMin: 160, fullMax: 360, guide: 8, grip: 4, strip: 36, hysteresis: 16, lane: 60, card: 308, cardLeast: 240, cardEnd: 20 });
+
+/**
+ * The outline's width in full for the reader's choice `chosen` (px; 0 or none: the default), within
+ * its least and most. Written with no outside name, so the page's head can carry it (EARLY_MARGIN).
+ */
+export function outlineWidth(chosen, { full = 200, fullMin = 160, fullMax = 360 } = {}) {
+  return Number.isFinite(chosen) && chosen > 0 ? Math.round(Math.min(fullMax, Math.max(fullMin, chosen))) : full;
+}
+
+/**
+ * Where the right side's parts go on a page `width` px wide (its window less its scrollbar): `outline`,
+ * whether the outline is on, `notes`, whether the page has 批注, `full`, its width in full
+ * (outlineWidth), `wide`, a report read full width, `was`, the layout given last for the same request
+ * (a form it laid out is kept for `hysteresis` px under the width it needs).
+ * Returns { dock: the outline's width at the window's right edge (0, its strip's or its list's),
+ * outline: its form, "full" | "strip" | null, room: what the outline takes of the page's width beside
+ * the column's rooms (the list's less its guide's inset, the strip's, 0), side: the least room either
+ * side of the column keeps, left: the room at the column's left on this page, right: the room right of
+ * it to the window's edge (its own and the outline's), column: its width, cards: the width of a card
+ * of 批注 standing right of it (0: they fold into markers), cardRoom: what the page's rule keeps right of
+ * the column for them (0: none), floor: the least room at its left }. Written with no outside name, so
+ * the page's head can carry it as it is (EARLY_MARGIN).
+ */
+export function marginLayout({ width, outline = false, notes = false, wide = false, was = null, edge = 64, start = 52, column = 712, least = 560, full = 200, guide = 8, strip = 36, hysteresis = 16, lane = 60, card = 308, cardLeast = 240, cardEnd = 20 }) {
+  const body = wide ? least : column;
+  // The column in the middle of what the outline leaves, its rooms `side` at least (narrower only below
+  // that), and left of there as far as a card's room asks, down to `start`, the card giving what is short.
+  const placed = (form, dock, room, side) => {
+    const across = wide ? width - room - 2 * side : Math.min(body, width - room - 2 * side);
+    const middle = wide ? side : Math.max(side, (width - room - across) / 2);
+    const spare = width - room - across - start - lane - cardEnd;
+    const cards = notes && !wide && spare + (was?.cards ? hysteresis : 0) >= cardLeast ? Math.min(card, spare) : 0;
+    const cardRoom = cards ? lane + card + cardEnd : 0;
+    const left = cards ? Math.max(start, Math.min(middle, width - room - across - cardRoom)) : middle;
+    return { dock, outline: form, room, side, left, right: width - left - across, column: across, cards, cardRoom, floor: cards ? start : side };
+  };
+  if (!outline) return placed(null, 0, 0, edge);
+  // In full while the list, as wide as the reader gave it, leaves the column the handle's room at both
+  // sides (its rooms the edge room, less down to the handle's where the page is short); a form kept
+  // under the width it needs (the hysteresis) narrows the column by what is short. Else its strip.
+  const spare = width + guide - body; // the page beside the column, the list's room counted from its guide
+  const kept = was?.outline === "full" ? hysteresis : 0;
+  if (spare + kept >= 2 * start + full) return placed("full", full, full - guide, Math.max(start, Math.min(edge, (spare - full) / 2)));
+  return placed("strip", strip, strip, edge);
+}
+
+const SLIDE = 200; // ms: the column's slide as the page comes to have 批注 or has none left
+
+/** The page's rules for the room: the column placed (and narrowed only when it must), screen only. */
+export const MARGIN_STYLE = `
+  @media screen {
+    :root[data-ge-margin] {
+      /* The least room either side of the column keeps (marginLayout's side: the edge room, less where the page is short of it, down to the handle's). */
+      --ge-margin-side: var(--ge-side, var(--ge-edge-room, 64px));
+      /* The column as wide as the page gives it beside the outline's room and its own two (100% resolves where it is used: the page's width). */
+      --ge-margin-column: min(var(--doc-content-max-width, 712px), calc(100% - var(--ge-outline-room, 0px) - 2 * var(--ge-margin-side)));
+    }
+    :root[data-ge-margin] .doc-page {
+      width: var(--ge-margin-column);
+      /* In the middle of what the outline leaves: as far from the window's left edge as from the outline; left of there as far as the cards of 批注 ask (--ge-card-room), never past --ge-floor. */
+      margin-left: max(var(--ge-floor, var(--ge-margin-side)), min(calc((100% - var(--ge-outline-room, 0px) - var(--ge-margin-column)) / 2), calc(100% - var(--ge-outline-room, 0px) - var(--ge-margin-column) - var(--ge-card-room, 0px))));
+      margin-right: 0;
+      transition: margin-left var(--ge-slide, 0s) ease;
+    }
+    :root[data-ge-margin][data-doc-width="full"] .doc-page {
+      width: calc(100% - var(--ge-outline-room, 0px) - 2 * var(--ge-margin-side));
+      max-width: none;
+      margin-left: var(--ge-margin-side);
+    }
+  }
+  /* The column sliding as the page comes to have 批注 or has none left (setMargin's notes). */
+  @media screen and (prefers-reduced-motion: no-preference) {
+    :root[data-ge-margin-sliding] { --ge-slide: ${SLIDE}ms; }
+  }
+`;
+
+const ROOM = "data-ge-margin-room"; // the sheet holding the numbers
+const EARLY = "data-ge-margin-early"; // on that sheet while the head's script holds it: what it was asked and gave (JSON)
+const SLIDING = "data-ge-margin-sliding"; // on the root while the column slides
+const roomCss = ({ room, side, cardRoom = 0, floor = side }) => `:root[data-ge-margin] { --ge-outline-room: ${room}px; --ge-side: ${side}px; --ge-card-room: ${cardRoom}px; --ge-floor: ${floor}px; }`;
+
+// The head's script (EARLY_MARGIN): the outline's room before the page shows, when the report has it
+// on (`keys.open`: the reports that have it on, shared/preferences.mjs outlineOpen; `slug`: this page's), as
+// wide as the reader's preferences say (`keys.preferences`: outlineWidth, the same for every report),
+// and the cards' room, when it has 批注 (`notes`, the edit service's word).
+// Never on a page opened on its own in a frame (?solo, the 写作偏好 dialog), which has none.
+// In the head the page has no content yet, so no scrollbar: its width is read again at
+// DOMContentLoaded, when the content is in and the kit has not shown it yet (a frame later), unless the
+// editor has taken the room over by then.
+function earlyMargin(layout, widthOf, numbers, keys, slug, notes, room, early, css) {
+  try {
+    if (new URLSearchParams(location.search).has("solo")) return;
+    const read = (key, old) => localStorage.getItem(key) ?? localStorage.getItem(old); // before 2026-10-26 under its old name, not carried yet
+    const open = JSON.parse(read(keys.open, keys.oldOpen) || "[]");
+    const outline = Array.isArray(open) && open.includes(slug);
+    if (!outline && !notes) return;
+    const prefs = JSON.parse(read(keys.preferences, keys.oldPreferences) || "{}") || {};
+    const asked = { outline, notes, outlineWidth: Number(prefs.outlineWidth) || 0 };
+    const root = document.documentElement;
+    const sheet = document.createElement("style");
+    sheet.setAttribute("data-doc-dev", "");
+    sheet.setAttribute(room, "");
+    const lay = () => {
+      const given = layout({ ...numbers, width: root.clientWidth, outline, notes, full: widthOf(asked.outlineWidth, numbers), wide: root.getAttribute("data-doc-width") === "full" });
+      sheet.textContent = css(given);
+      sheet.setAttribute(early, JSON.stringify({ given, asked }));
+    };
+    lay();
+    document.head.append(sheet);
+    root.setAttribute("data-ge-margin", "");
+    document.addEventListener("DOMContentLoaded", () => { if (sheet.hasAttribute(early)) lay(); }, { once: true });
+  } catch {}
+}
+
+/**
+ * The script the edit service puts in the head of report `slug`'s page (the outline's room when that
+ * report has it on: the keys it reads are shared/preferences.mjs's; the cards' room when it has 批注: `notes`).
+ */
+export const earlyMarginScript = (slug, { notes = false } = {}) => {
+  const keys = JSON.stringify({ open: OUTLINE_OPEN_KEY, preferences: PREFERENCES_KEY, oldOpen: OLD_OUTLINE_OPEN_KEY, oldPreferences: OLD_PREFERENCES_KEY });
+  const name = JSON.stringify(String(slug)).replace(/</g, "\\u003c"); // in a <script>: never a tag
+  return `(${earlyMargin})(${marginLayout}, ${outlineWidth}, ${JSON.stringify(MARGIN)}, ${keys}, ${name}, ${JSON.stringify(notes)}, ${JSON.stringify(ROOM)}, ${JSON.stringify(EARLY)}, ${roomCss})`;
+};
+
+// ---------- on the page ----------
+
+const asked = { outline: false, notes: false, outlineWidth: 0 }; // what the outline and 批注 ask for
+const listeners = new Set();
+let now = null; // the layout given last
+let request = null; // what it was given for: { outline, wide } (the outline's width keeps the form laid out)
+let started = false;
+let lastWidth = null;
+let ownResize = false; // the resize this module sends (the column moved) is no width changing
+let sliding = 0; // the timer of the column's slide, while it goes
+
+function pageWidth() {
+  const root = document.documentElement;
+  return root.clientWidth || innerWidth;
+}
+
+const isWide = () => document.documentElement.getAttribute("data-doc-width") === "full";
+
+function numbers() {
+  const style = getComputedStyle(document.documentElement);
+  const edge = parseFloat(style.getPropertyValue("--ge-edge-room")) || MARGIN.edge;
+  const column = parseFloat(style.getPropertyValue("--doc-content-max-width")) || MARGIN.column;
+  return { edge, column };
+}
+
+const layoutFor = (wide, was) => marginLayout({ ...MARGIN, width: pageWidth(), ...numbers(), ...asked, full: outlineWidth(asked.outlineWidth, MARGIN), wide, was });
+
+// The column moved without the window changing: what is placed over the page's text is placed
+// again, as after a resize (this module hears it too, and finds nothing more to change).
+function tell() {
+  ownResize = true;
+  try {
+    dispatchEvent(new Event("resize"));
+  } finally {
+    ownResize = false;
+  }
+}
+
+// `slide`: the column goes over SLIDE, frames.mjs's followers keeping what stands over the text with it
+// (it goes as a transition, so they hear it); else at once, one under way ending there.
+function apply({ slide = false } = {}) {
+  const wide = isWide();
+  const same = request && request.outline === asked.outline && request.wide === wide;
+  const next = layoutFor(wide, same ? now : null);
+  request = { outline: asked.outline, wide };
+  const root = document.documentElement;
+  let sheet = document.head.querySelector(`style[${ROOM}]`);
+  sheet?.removeAttribute(EARLY); // the editor's from now on
+  // The page's rule on, with these numbers: whether that changed anything.
+  const rule = (layout) => {
+    if (!sheet) {
+      sheet = document.createElement("style");
+      sheet.setAttribute("data-doc-dev", "");
+      sheet.setAttribute(ROOM, "");
+      document.head.append(sheet);
+    }
+    const css = roomCss(layout);
+    const written = sheet.textContent !== css;
+    if (written) sheet.textContent = css;
+    const on = root.hasAttribute("data-ge-margin");
+    if (!on) root.setAttribute("data-ge-margin", "");
+    return written || !on;
+  };
+  const page = document.querySelector("main");
+  if (slide && now && page && now.left !== next.left) {
+    // What it slides from is a length, the page's rule on as it stands (a margin of `auto` slides nowhere).
+    rule(now);
+    getComputedStyle(page).marginLeft;
+    root.setAttribute(SLIDING, "");
+    clearTimeout(sliding);
+    sliding = setTimeout(() => {
+      sliding = 0;
+      root.removeAttribute(SLIDING);
+      apply();
+      tell();
+    }, SLIDE + 40);
+  } else if (!slide && sliding) {
+    clearTimeout(sliding);
+    sliding = 0;
+    root.removeAttribute(SLIDING);
+  }
+  let moved = false;
+  if (next.dock || next.cards || sliding) moved = rule(next);
+  else if (sheet || root.hasAttribute("data-ge-margin")) {
+    sheet?.remove();
+    root.removeAttribute("data-ge-margin");
+    moved = true;
+  }
+  const changed = !now || ["dock", "outline", "room", "side", "cards"].some((name) => now[name] !== next[name]);
+  now = next;
+  if (changed) for (const listener of listeners) listener(next);
+  if (moved) tell();
+}
+
+// The page's width changed (the window, or its scrollbar; the workbench's sidebar dragged or sliding):
+// laid out again at once.
+function resized() {
+  if (ownResize) return;
+  const width = pageWidth();
+  if (width === lastWidth) return; // the page grew taller or shorter (the observer sees that too), or the same width told twice: nothing moves
+  lastWidth = width;
+  apply();
+}
+
+function start() {
+  if (started) return;
+  started = true;
+  if (!document.head.querySelector("style[data-ge-margin-style]")) { // the edit service's head has it from the start
+    const style = document.createElement("style");
+    style.setAttribute("data-doc-dev", "");
+    style.setAttribute("data-ge-margin-style", "");
+    style.textContent = MARGIN_STYLE;
+    document.head.append(style);
+  }
+  // What the head gave the page (the outline's form and width), kept as the
+  // layout given last and as what is asked until the tools say otherwise, so the editor keeps it within
+  // the hysteresis: the column does not move as the editor starts.
+  let early = null;
+  try { early = JSON.parse(document.head.querySelector(`style[${ROOM}][${EARLY}]`)?.getAttribute(EARLY) ?? "null"); } catch {}
+  if (early?.given && early.asked) {
+    now = early.given;
+    Object.assign(asked, early.asked);
+    request = { outline: asked.outline, wide: isWide() };
+  }
+  addEventListener("resize", resized);
+  // The page's width changes without the window's too: its scrollbar comes or goes.
+  new ResizeObserver(resized).observe(document.documentElement);
+  // A report read full width, or no longer.
+  new MutationObserver(() => apply()).observe(document.documentElement, { attributes: true, attributeFilter: ["data-doc-width"] });
+}
+
+/**
+ * Ask for room: { outline } (whether it shows), { outlineWidth } (its width in full as the reader
+ * chose it, px; 0: the default), { notes } (whether the page has 批注: the column slides when that
+ * changes it). The layout is given at once and again whenever the page's width changes it.
+ */
+export function setMargin(part) {
+  start();
+  const slide = part.notes !== undefined && part.notes !== asked.notes;
+  Object.assign(asked, part);
+  apply({ slide });
+  return now;
+}
+
+/** The layout given last ({ dock, outline, room, side, left, right, column, cards, cardRoom, floor }; see marginLayout). */
+export const margin = () => now ?? layoutFor(isWide(), null);
+
+/** How far right of the column what stands in its right room may reach, by `layout` (marginLayout): short of the outline's guide and its grip, or of its strip, or of the window's edge. */
+export const rightRoom = ({ right, room } = margin()) => right - room - MARGIN.grip;
+
+/** Call `listener(layout)` whenever the layout changes (the outline's form or width, the column's least rooms, the cards' width). */
+export function onMargin(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+/**
+ * The widest the outline's list can be dragged to on this page now: as wide as leaves the column its
+ * edge room at both sides (the two rooms giving it half each, never the column narrowed), within its
+ * least and most.
+ */
+export function outlineMost() {
+  const { edge, column } = numbers();
+  const body = isWide() ? MARGIN.least : column;
+  return Math.max(MARGIN.fullMin, Math.min(MARGIN.fullMax, pageWidth() + MARGIN.guide - body - 2 * edge));
+}

package/browser/editor/page/markdown/index.mjs

@@ -0,0 +1,88 @@
+import { can, ownHTML } from "../core.mjs";
+import { select } from "../caret.mjs";
+import { typeOf, typedTargets } from "../convert.mjs";
+import { formatRange } from "../marks.mjs";
+import { spaceAround } from "../../../shared/inline-spacing.mjs";
+import { padCaret } from "../pads.mjs";
+import { pageOf, pageOfType } from "../page-objects.mjs";
+import { inlineMark, markdownShortcut } from "./rules.mjs";
+
+// Shortcuts as the reader types (docs/editor.md, "New blocks and conversions"): the Markdown of a
+// type (its `markdown`, tried in rules.mjs) at a block's start converts it at once, what was typed
+// being removed in the same undo step; "**text**" or "`text`" closed at the caret becomes bold or code through
+// marks.mjs formatRange, and what is typed next goes after the new element. A "/" typed into an
+// empty block opens the "/" menu (slash-menu/), and an "@" the "@" menu (at-menu/), each of which then
+// follows what is typed.
+
+/**
+ * slash: the "/" menu (slash-menu/); at: the "@" menu (at-menu/). convert(host, type, typed): turn a text block into another
+ * type as one undo step, `typed` (a range of what was typed) taken away first (editor.mjs
+ * convertHost; a fourth argument, what else that step does to the converted block). recordStep(host,
+ * before): a change of a block's text as its own undo step (history.mjs).
+ */
+export function createMarkdown({ slash, at, convert, recordStep }) {
+  /** Text was typed (or composed) into `host`; `data`: what arrived. */
+  function typed(host, data) {
+    if (slash.host) return slash.update();
+    if (at.host) return at.update();
+    if (pageOf(host)?.shortcut?.(host, data)) return;
+    const selection = getSelection();
+    if (!selection.rangeCount || !selection.isCollapsed || !host.contains(selection.anchorNode)) return;
+    const head = document.createRange();
+    head.setStart(host, 0);
+    head.setEnd(selection.anchorNode, selection.anchorOffset);
+    const before = head.toString();
+    const whole = host.textContent.replace(/ /g, " ").trim();
+    if (slash.typed(host, before, whole) || at.typed(host, before, data)) return;
+    if (head.cloneContents().querySelector("[data-ge-atom]")) return; // Markdown begins a block: no formula before it
+    const alone = before === whole;
+    const shortcut = markdownShortcut(before, { alone, takes: (type) => typeOf(host) !== type && typedTargets(host, alone).includes(type) });
+    if (shortcut) {
+      const { type, props } = shortcut;
+      // A space put between the marker and the text after it (autoSpace: "3" next to Chinese) goes with the marker.
+      const node = selection.anchorNode;
+      let end = selection.anchorOffset;
+      if (node.nodeType === 3 && !shortcut.alone) {
+        while (node.data[end] === " ") end++;
+        head.setEnd(node, end);
+      }
+      // What the shortcut sets (a numbered list's first number, a to-do checked): on the block it made, in the same step.
+      const then = Object.keys(props).length > 0 ? (block) => pageOfType(type).setProps(block, props) : null;
+      return convert(host, type, head, then);
+    }
+    if (data && /[*`]$/.test(data) && !can(host, "plain")) inlineShortcut(host, selection);
+  }
+
+  // "**text**" or "`text`" just closed at the caret, within one run of text: the markers go and
+  // the text between is bold or code; the caret goes on after it, outside the new element.
+  function inlineShortcut(host, selection) {
+    const node = selection.anchorNode;
+    if (node.nodeType !== 3 || node.parentElement.closest("code")) return;
+    const offset = selection.anchorOffset;
+    const found = inlineMark(node.data.slice(0, offset));
+    if (!found) return;
+    const before = ownHTML(host);
+    const marker = found.name === "bold" ? 2 : 1;
+    node.deleteData(offset - marker, marker);
+    node.deleteData(found.start, marker);
+    const range = document.createRange();
+    range.setStart(node, found.start);
+    range.setEnd(node, offset - 2 * marker);
+    const result = formatRange(host, range, found.name, true);
+    const end = result.endContainer.nodeType === 3 ? result.endContainer.parentElement : result.endContainer;
+    const mark = end.closest(found.name === "bold" ? "strong, b" : "code");
+    // Inline code stands a space apart from the words beside it (shared/inline-spacing.mjs spaceAround).
+    const spaces = found.name === "code" && mark && host.contains(mark) ? spaceAround(mark) : { after: null };
+    recordStep(host, before);
+    // The browser puts text typed at the end of an element into it, so what follows would be bold
+    // or code too: the caret goes into a pad after the element (pads.mjs), or after the space put
+    // there.
+    if (!mark || !host.contains(mark)) return select(result);
+    if (!spaces.after) return void padCaret(mark, "after");
+    const caret = document.createRange();
+    caret.setStart(spaces.after, 1);
+    select(caret);
+  }
+
+  return { typed };
+}

package/browser/editor/page/markdown/rules.mjs

@@ -0,0 +1,33 @@
+import { MARKDOWN } from "../../components/registry.mjs";
+
+// What typed Markdown turns into (docs/editor.md, "New blocks and conversions"): pure functions of
+// the text, tested without a browser (tests/unit/editor.mjs). index.mjs applies them as the reader
+// types. A shortcut at a block's start is its type's (`markdown`), the inline marks are no block's.
+
+/**
+ * The shortcut `text`, all that stands before the caret in a block, is, the first in the order of the
+ * definitions (notion-lite's blockShortcut): its rule with what it sets (`props`), or null. alone:
+ * nothing else is written in the block, as a rule that says `alone` asks. takes(type): whether the
+ * block may become the type.
+ */
+export function markdownShortcut(text, { alone = false, takes = () => true } = {}) {
+  for (const rule of MARKDOWN) {
+    const match = rule.match.exec(text);
+    if (!match || (rule.alone && !alone) || !takes(rule.type)) continue;
+    const props = rule.props ? rule.props(match) : {};
+    if (props !== null) return { ...rule, props };
+  }
+  return null;
+}
+
+/**
+ * Inline Markdown closed at the end of `text`: **bold** or `code`. Returns { name, start, end,
+ * inner } (offsets into text; inner excludes the markers), or null.
+ */
+export function inlineMark(text) {
+  const bold = /\*\*([^*\s](?:[^*]*[^*\s])?)\*\*$/.exec(text);
+  if (bold) return { name: "bold", start: bold.index, end: text.length, inner: [bold.index + 2, text.length - 2] };
+  const code = /`([^`\s](?:[^`]*[^`\s])?)`$/.exec(text);
+  if (code) return { name: "code", start: code.index, end: text.length, inner: [code.index + 1, text.length - 1] };
+  return null;
+}