@morphemecms/cms 0.5.0 → 0.7.0

package/src/markdown.mjs

@@ -1,12 +1,16 @@
 // The Milkdown setup shared by the editor (/editor/) and packages/editor/scripts/editor-roundtrip.mjs, so the check
 // runs the same Markdown parser and writer as the browser.
 import { Editor, editorViewCtx, rootCtx, defaultValueCtx, remarkStringifyOptionsCtx, serializerCtx } from '@milkdown/kit/core';
-import { commonmark } from '@milkdown/kit/preset/commonmark';
+import { commonmark, headingSchema, strongAttr } from '@milkdown/kit/preset/commonmark';
 import { gfm } from '@milkdown/kit/preset/gfm';
 import { $markSchema, $nodeSchema, $prose, $remark } from '@milkdown/kit/utils';
 import { Plugin } from '@milkdown/kit/prose/state';
 import { blockHtml, parseBlock } from '../lib/blocks.mjs';
 import { COLOR_CLOSE, TEXT_COLORS, colorClass, colorOpen, colorOpened } from '../lib/text-colors.mjs';
+import { SECTION_COLORS, isLabelLine, markerColor, sectionMarker } from '../lib/section-marker.mjs';
+import { EMPHASIZE } from '../lib/rehype-emphasize.mjs';
+import { eyebrowText } from '../lib/eyebrow.mjs';
+import { eyebrowKeeper, eyebrowKeymap, eyebrowSchema } from './eyebrow.mjs';
 
 // Write Markdown the way imported files are written: "-   " bullets and
 // "* * *" rules, so a save changes as few lines as possible.
@@ -18,11 +22,15 @@ const stringify = { bullet: '-', listItemIndent: 'tab', rule: '*', ruleSpaces: t
 // of the fixed pages are blocks too (sections.mjs); the site shows only its own (RichText.astro).
 // Other HTML on a line of its own (YouTube, Vimeo, Calendly, an imported table) is a block too, of the
 // type HTML, with the HTML as it is as its `code`, and written back as it was.
+// A label above a heading is read here too (eyebrow.mjs).
 export const HTML = 'html';
 const remarkSiteBlocks = $remark('remarkSiteBlocks', () => () => (tree) => {
-  tree.children = tree.children.map((child) => {
+  tree.children = tree.children.map((child, i) => {
     const only = child.type === 'paragraph' && child.children?.length === 1 ? child.children[0] : child;
     if (only.type !== 'html') return child;
+    // A label right before a heading (lib/eyebrow.mjs) is the node eyebrow (eyebrow.mjs), not a block.
+    const label = tree.children[i + 1]?.type === 'heading' ? eyebrowText(String(only.value)) : null;
+    if (label !== null) return { type: 'eyebrow', value: label };
     const block = parseBlock(String(only.value), null);
     return block
       ? { type: 'siteBlock', blockType: block.type, props: block.props }
@@ -122,6 +130,56 @@ export const textColorSchema = $markSchema('textColor', () => ({
   },
 }));
 
+// The colour of a section (packages/editor/lib/section-marker.mjs): the marker line before an H2, or before the label above it
+// (eyebrow), is read into the H2's attribute `section` and written back before it. It must be read before remarkSiteBlocks
+// sees it, so it is the first plugin of that kind in makeEditor. A marker with nothing to colour is dropped.
+const htmlOf = (node) => {
+  const only = node?.type === 'paragraph' && node.children?.length === 1 ? node.children[0] : node;
+  return only?.type === 'html' ? String(only.value) : '';
+};
+const remarkSectionMarkers = $remark('remarkSectionMarkers', () => () => (tree) => {
+  const parts = tree.children;
+  tree.children = parts.filter((child, i) => {
+    const color = markerColor(htmlOf(child));
+    if (color === null) return true;
+    const next = isLabelLine(htmlOf(parts[i + 1])) ? parts[i + 2] : parts[i + 1];
+    if (next?.type === 'heading' && next.depth === 2) next.section = color;
+    return false;
+  });
+});
+
+// The commonmark heading with the section colour as an attribute (only an H2 has one). Written back before the heading, or
+// before its label, which is already the last thing written (a line of HTML).
+/** @type {import('@milkdown/kit/utils').$NodeSchema<'heading'>} */
+export const headingWithSection = headingSchema.extendSchema((prev) => (ctx) => {
+  const base = prev(ctx);
+  return {
+    ...base,
+    attrs: { ...base.attrs, section: { default: null, validate: 'string|null' } },
+    parseMarkdown: {
+      match: base.parseMarkdown.match,
+      runner: (state, node, type) => {
+        state.openNode(type, { level: node.depth, section: node.depth === 2 ? (node.section ?? null) : null });
+        state.next(node.children);
+        state.closeNode();
+      },
+    },
+    toMarkdown: {
+      match: base.toMarkdown.match,
+      runner: (state, node) => {
+        const { level, section } = node.attrs;
+        const written = state.top()?.children;
+        if (level === 2 && SECTION_COLORS.includes(section) && Array.isArray(written)) {
+          const last = written.at(-1);
+          const at = last?.type === 'html' && isLabelLine(last.value) ? written.length - 1 : written.length;
+          written.splice(at, 0, { type: 'html', value: sectionMarker(section) });
+        }
+        base.toMarkdown.runner(state, node);
+      },
+    },
+  };
+});
+
 /** A Milkdown editor of the text, in root (not created yet). @param {HTMLElement | null} root @param {string} markdown
  * @returns {import('@milkdown/kit/core').Editor} */
 export function makeEditor(root, markdown) {
@@ -130,19 +188,27 @@ export function makeEditor(root, markdown) {
       ctx.set(rootCtx, root);
       ctx.set(defaultValueCtx, markdown);
       ctx.update(remarkStringifyOptionsCtx, (options) => ({ ...options, ...stringify }));
+      // Bold as on the site (lib/rehype-emphasize.mjs).
+      ctx.set(strongAttr.key, () => ({ class: EMPHASIZE }));
     })
     .use(commonmark)
     .use(gfm)
+    .use(headingWithSection)
+    .use(remarkSectionMarkers)
     .use(remarkSiteBlocks)
     .use(siteBlockSchema)
     .use(remarkTextColors)
-    .use(textColorSchema);
+    .use(textColorSchema)
+    .use(eyebrowSchema)
+    .use(eyebrowKeeper)
+    .use(eyebrowKeymap);
 }
 
 // The text in parts, for a fixed page's sections (sections.mjs): each block, each heading at the top
 // level ("Overskrift", H2), and the Markdown of the text between them. Empty paragraphs (the lines
 // kept free between two blocks to write in), empty headings (left when one is deleted) and the page's H1
 // (no section's) are left out.
+// An H2's colour (its `section`) is the part's `color`.
 export function partsOf(ctx) {
   const doc = ctx.get(editorViewCtx).state.doc;
   const serialize = ctx.get(serializerCtx);
@@ -160,7 +226,7 @@ export function partsOf(ctx) {
       parts.push({ block: { type: node.attrs.type, props: node.attrs.props } });
     } else if (node.type.name === 'heading' && node.attrs.level === 2) {
       flush();
-      parts.push({ heading: node.textContent.trim() });
+      parts.push({ heading: node.textContent.trim(), ...(node.attrs.section ? { color: node.attrs.section } : {}) });
     } else if (node.type.name === 'heading' && node.attrs.level === 1) {
       flush();
     } else if (!((node.type.name === 'paragraph' || node.type.name === 'heading') && !node.textContent.trim() && !node.childCount))
@@ -198,7 +264,9 @@ export function markdownOf(ctx) {
   const doc = ctx.get(editorViewCtx).state.doc;
   const kept = [];
   doc.forEach((node) => {
-    if (!(node.type.name === 'paragraph' && node.content.size === 0)) kept.push(node);
+    // Nor an empty label (added, then left without a text).
+    const empty = node.content.size === 0 && (node.type.name === 'paragraph' || node.type.name === 'eyebrow');
+    if (!empty) kept.push(node);
   });
   return ctx.get(serializerCtx)(doc.type.create(null, kept));
 }

package/src/markdown.test.mjs

@@ -0,0 +1,74 @@
+// Tests for src/markdown.mjs: the section colour marker is read into the H2's `section` attribute and written back as it was
+// (before the label, if any). Milkdown needs a DOM; jsdom stands in. Run: node --test packages/editor/src/markdown.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { JSDOM } from 'jsdom';
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>', { pretendToBeVisual: true });
+globalThis.window = dom.window;
+for (const key of [
+  'document',
+  'Node',
+  'Element',
+  'HTMLElement',
+  'MutationObserver',
+  'getComputedStyle',
+  'requestAnimationFrame',
+  'DOMParser',
+  'Event',
+  'CustomEvent',
+])
+  globalThis[key] = dom.window[key];
+for (const key of ['addEventListener', 'removeEventListener', 'dispatchEvent']) globalThis[key] = dom.window[key].bind(dom.window);
+
+const { editorViewCtx } = await import('@milkdown/kit/core');
+const { makeEditor, markdownOf } = await import('./markdown.mjs');
+
+// The text loaded and written back, and the nodes it was read as ("heading:tint", "siteBlock", …).
+async function through(markdown) {
+  const editor = await makeEditor(document.createElement('div'), markdown).create();
+  const nodes = [];
+  editor.action((ctx) =>
+    ctx
+      .get(editorViewCtx)
+      .state.doc.forEach((n) => nodes.push(n.type.name === 'heading' && n.attrs.section ? `heading:${n.attrs.section}` : n.type.name)),
+  );
+  const saved = editor.action(markdownOf);
+  await editor.destroy();
+  return { saved, nodes };
+}
+const marked = (color, rest) => `<div data-section="${color}"></div>\n\n${rest}`;
+
+test('a coloured section comes back byte for byte', async () => {
+  const text = `# Title\n\nIntro\n\n${marked('tint', '## Opening hours\n\nText\n\n')}${marked('accent', '## Prices\n\nMore\n')}`;
+  const { saved, nodes } = await through(text);
+  assert.equal(saved, text);
+  assert.deepEqual(nodes, ['heading', 'paragraph', 'heading:tint', 'paragraph', 'heading:accent', 'paragraph']);
+});
+
+test('a text without markers is written as before', async () => {
+  const text = '# Title\n\n## One\n\nText\n';
+  assert.equal((await through(text)).saved, text);
+});
+
+test('the marker comes before a label above the H2', async () => {
+  const text = marked('surface', '<p class="block-eyebrow">Step by step</p>\n\n## Hours\n\nText\n');
+  const { saved, nodes } = await through(text);
+  assert.equal(saved, text);
+  assert.ok(nodes.includes('heading:surface'));
+});
+
+test('a marker not followed by an H2 is dropped', async () => {
+  assert.deepEqual(await through(marked('tint', 'Plain text\n\n## B\n')), {
+    saved: 'Plain text\n\n## B\n',
+    nodes: ['paragraph', 'heading'],
+  });
+  assert.equal((await through(marked('tint', '### Sub\n'))).saved, '### Sub\n');
+});
+
+test('an unknown colour stays the HTML it is', async () => {
+  const text = marked('red', '## B\n');
+  const { saved, nodes } = await through(text);
+  assert.equal(saved, text);
+  assert.deepEqual(nodes, ['siteBlock', 'heading']);
+});

package/src/materialIcons.ts

@@ -0,0 +1,8 @@
+// All of Material Symbols (Outlined, regular and filled) as text, by their file, for the icons icon.tsx draws that are not on
+// its list: one lazy chunk, loaded in the browser the first time one is drawn (the server render has them from
+// virtual:material-symbols-ssr instead, packages/editor/site/materialSymbols.mjs). Imported by icon.tsx only dynamically.
+export const materialIcons = import.meta.glob<string>('/node_modules/@material-symbols/svg-400/outlined/*.svg', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+});

package/src/menuChildren.ts

@@ -0,0 +1,36 @@
+// The second level of the main menu (MainMenu.tsx, lib/menu.mjs menuTree): the lists under Lists, the menus under Header,
+// the parts under Business, the apps installed under Apps and the two lists under Redirects. Exposes childrenOf.
+// Uses site.ts (collections, apps, companyParts), Library.tsx (hrefOf, listsShown) and Redirects.tsx (TAB_ROUTES).
+import { header } from '@site/editor';
+import { installedApps } from './apps';
+import { t } from './i18n';
+import { hrefOf } from './Library';
+import { TAB_ROUTES } from './Redirects';
+import type { RepoFile } from './github';
+import { apps, collections, companyParts, listsShown } from './site';
+
+export type MenuChild = { id: string; label: string; href: string };
+
+const listOf = (ids: string[]): MenuChild[] =>
+  ids.flatMap((id) => {
+    const c = collections.find((x) => x.id === id);
+    return c ? [{ id, label: c.label, href: hrefOf(c) }] : [];
+  });
+
+/** The sub-items of a menu item, in their order: none for most. */
+export function childrenOf(id: string, files: RepoFile[]): MenuChild[] {
+  if (id === 'lister') return listOf(listsShown(files));
+  if (id === 'header') return listOf(header);
+  if (id === 'virksomheden') return companyParts.map((p) => ({ id: p.id, label: p.label, href: `#virksomheden/${p.id}` }));
+  if (id === 'apps') {
+    const installed = installedApps(files);
+    return apps.filter((a) => installed.includes(a.id)).map((a) => ({ id: a.id, label: a.label, href: `#apps/${a.id}` }));
+  }
+  if (id === 'videresendelser') {
+    return [
+      { id: 'alle', label: t.redirects.all, href: `#${TAB_ROUTES.redirects}` },
+      { id: 'ikke-fundet', label: t.redirects.missing.title, href: `#${TAB_ROUTES.missing}` },
+    ];
+  }
+  return [];
+}

package/src/menuOpen.ts

@@ -0,0 +1,34 @@
+// Whether the main menu's drawer is open, for the drawer (MainMenu.tsx) and the menu buttons (Screen.tsx, the rail): at expanded
+// and wider the standard drawer's remembered state (sidebar.ts), below it the modal drawer's, which is not remembered.
+// Which one is on screen is lib/menu-layout.mjs. Exposes useMenuOpen.
+import { useCallback, useSyncExternalStore } from 'react';
+import { setSidebar, useSidebar } from './sidebar';
+import { useMenuLayout } from './ui';
+
+let modalOpen = false;
+const listeners = new Set<() => void>();
+
+function setModal(next: boolean) {
+  modalOpen = next;
+  listeners.forEach((l) => l());
+}
+
+const useModalOpen = () =>
+  useSyncExternalStore(
+    (changed) => {
+      listeners.add(changed);
+      return () => listeners.delete(changed);
+    },
+    () => modalOpen,
+    () => false,
+  );
+
+/** The menu's open state for the drawer that is on screen now, and how to change it. */
+export function useMenuOpen() {
+  const wide = useMenuLayout().expanded === 'standard';
+  const standard = useSidebar();
+  const modal = useModalOpen();
+  const open = wide ? standard : modal;
+  const setOpen = useCallback((next: boolean) => (wide ? setSidebar(next) : setModal(next)), [wide]);
+  return { open, setOpen, toggle: () => setOpen(!open) };
+}

package/src/pagePreview.tsx

@@ -1,5 +1,6 @@
 // "Forhåndsvis" (FormFrame.tsx): a page or a blog post as it looks on the site with what is in its form
-// now, at once and without saving, in a sheet, as wide as a phone or a computer.
+// now, at once and without saving, in a sheet, at each of Material 3's window sizes
+// (lib/breakpoints.mjs).
 //
 // The page as it is on the site gives everything around what the form changes: the header, the footer,
 // the layout and the site's CSS. The site's layouts mark what the form changes (data-editor): the
@@ -7,7 +8,7 @@
 // puts a block that ends the text (data-editor="end", with its type in data-editor-block). Only what
 // was changed is put in, so the rest is exactly as on the site. The text is the site's Markdown
 // (Astro's pipeline, with the HTML written in it), and its blocks are drawn as in the editor
-// (registry.tsx preview), with the site's classes.
+// (registry.tsx preview), with the site's classes; a coloured section is a panel as on the site (lib/text-sections.mjs).
 //
 // The page is shown in a frame without scripts (sandbox), so nothing of the site runs on the editor's
 // address, where its login is kept, and its links lead nowhere. A new page or post is shown in the
@@ -17,8 +18,9 @@
 import { useRef, useState, type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { flushSync } from 'react-dom';
-import { DeviceMobile, Desktop } from '@phosphor-icons/react';
 import { parseBlock, splitBlocks } from '../lib/blocks.mjs';
+import { sectionClass, sectionsOf } from '../lib/text-sections.mjs';
+import { BREAKPOINTS, breakpointOf, type Breakpoint } from '../lib/breakpoints.mjs';
 import { processor } from '../lib/markdown';
 import { splitPicture } from '../lib/crop.mjs';
 import { preview as drawBlock, siteBlocks } from './registry';
@@ -134,11 +136,14 @@ export async function pageDocument(draft: PageDraft): Promise<string> {
       end.innerHTML = blockHtml(block.type, block.props, draft.data);
     } else end?.remove();
     const text = doc.querySelector('[data-editor="text"]')!;
-    text.innerHTML = splitBlocks(
-      html,
-      siteBlocks.map((b) => b.type),
-    )
-      .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))
+    const types = siteBlocks.map((b) => b.type);
+    text.innerHTML = sectionsOf(html)
+      .map((run) => {
+        const inner = splitBlocks(run.html, types)
+          .map((p) => ('html' in p ? p.html : blockHtml(p.type, p.props, draft.data)))
+          .join('');
+        return run.color ? `<section class="${sectionClass(run.color)}">${inner}</section>` : inner;
+      })
       .join('');
   }
 
@@ -148,15 +153,17 @@ export async function pageDocument(draft: PageDraft): Promise<string> {
   return `<!doctype html>\n${doc.documentElement.outerHTML}`;
 }
 
-type Device = 'phone' | 'computer';
-const WIDTH: Record<Device, number> = { phone: 390, computer: 1280 };
+// The widths the page is shown at: Material 3's breakpoints, each at the narrowest window it has, so its tightest
+// layout is seen; compact at a common phone's.
+const SIZES: Breakpoint[] = ['compact', 'medium', 'expanded', 'large', 'extraLarge'];
+const WIDTH: Record<Breakpoint, number> = { ...BREAKPOINTS, compact: 390 };
 
 /** The sheet with the preview, and how to open it with a draft (made when it opens). */
 export function usePagePreview(): [(draft: () => PageDraft | null) => void, ReactNode] {
   const dialog = useRef<HTMLDialogElement>(null);
   const [html, setHtml] = useState<string | null>(null);
   const [problem, setProblem] = useState('');
-  const [device, setDevice] = useState<Device>(() => (matchMedia('(min-width: 48rem)').matches ? 'computer' : 'phone'));
+  const [size, setSize] = useState<Breakpoint>(() => breakpointOf(innerWidth));
   const run = useRef(0);
 
   function open(make: () => PageDraft | null) {
@@ -184,17 +191,14 @@ export function usePagePreview(): [(draft: () => PageDraft | null) => void, Reac
       <SheetTitle title={t.preview.title} onClose={close} />
       <div className="px-5 pb-3">
         <SegmentedButton
-          label={t.preview.device}
-          value={device}
-          options={[
-            { value: 'phone', label: t.preview.phone, icon: DeviceMobile },
-            { value: 'computer', label: t.preview.computer, icon: Desktop },
-          ]}
-          onChange={setDevice}
+          label={t.preview.size}
+          value={size}
+          options={SIZES.map((s) => ({ value: s, label: t.preview.sizes[s] }))}
+          onChange={setSize}
         />
       </div>
       {html ? (
-        <PageFrame html={html} width={WIDTH[device]} title={t.preview.title} />
+        <PageFrame html={html} width={WIDTH[size]} title={t.preview.title} />
       ) : (
         <p className="px-5 text-muted">{problem || t.preview.making}</p>
       )}

package/src/r2Caching.ts

@@ -1,3 +1,4 @@
+// Also here: planStatus, whether the account has Workers Paid (/api/plan, packages/editor/worker/plan-status.js), asked for "Betalt bygning".
 // R2 caching: the Worker's copy of the site's files in R2 (packages/editor/worker/files.js), turned on and off under "Indstillinger" ›
 // "Avanceret" (Advanced.tsx). It is the line of its bucket (`"r2_buckets": …`, the binding FILES) in the Worker's settings
 // (config.wrangler): there when it is on, there as a comment ("// …") when it is off, so a deploy never asks for a bucket
@@ -39,6 +40,19 @@ export const withJurisdiction = (text: string, jurisdiction: string | null): str
 /** A jurisdiction's name, as Cloudflare writes it. */
 export const jurisdictionName = (jurisdiction: string): string => ({ eu: 'EU', fedramp: 'FedRAMP' })[jurisdiction] ?? jurisdiction;
 
+/** Whether the account has Workers Paid, as the Worker says (packages/editor/worker/plan-status.js); 'failed' when it can't be asked. */
+export type PaidState = 'yes' | 'no' | 'no-key' | 'refused' | 'failed';
+
+export async function planStatus(): Promise<PaidState> {
+  try {
+    const res = await fetch('/api/plan', { cache: 'no-store' });
+    if (!res.ok || !res.headers.get('content-type')?.includes('application/json')) return 'failed';
+    return (await res.json()).paid;
+  } catch {
+    return 'failed';
+  }
+}
+
 /** The bucket at Cloudflare, as the Worker says (packages/editor/worker/r2-status.js). */
 export type BucketState = 'ready' | 'no-bucket' | 'no-r2' | 'no-key' | 'refused' | 'failed';
 

package/src/sectionFrame.ts

@@ -0,0 +1,39 @@
+// The dotted frame round each H2 section of a page or blog post: sets data-section-part (start, middle, end, only) and
+// data-section-color (the H2's section colour) on the top-level nodes of a section, which editor.css draws. Exposes
+// sectionFrame (a Milkdown plugin). Uses lib/section-ranges.mjs and src/sectionState.mjs.
+import { $prose } from '@milkdown/kit/utils';
+import type { Node } from '@milkdown/kit/prose/model';
+import { Plugin } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { partKind, sectionPart, sectionRanges } from '../lib/section-ranges.mjs';
+import { sectionColorOf } from './sectionState.mjs';
+
+type Range = { from: number; to: number };
+
+// The attributes of the part at `index` in a section: its place in the frame, and the section's colour (its H2's `section`).
+function sectionAttrs(nodes: Node[], range: Range, index: number): Record<string, string> {
+  const color = sectionColorOf(nodes, range);
+  return { 'data-section-part': sectionPart(index, range), ...(color ? { 'data-section-color': color } : {}) };
+}
+
+/** The decorations of a document's sections. */
+function sectionDecorations(doc: Node): Decoration[] {
+  const parts: { node: Node; pos: number }[] = [];
+  doc.forEach((node, pos) => void parts.push({ node, pos }));
+  const nodes = parts.map(({ node }) => node);
+  const ranges: Range[] = sectionRanges(nodes.map((node) => ({ kind: partKind(node.type.name, node.attrs.level) })));
+  return ranges.flatMap((range) =>
+    parts
+      .slice(range.from, range.to + 1)
+      .map(({ node, pos }, i) => Decoration.node(pos, pos + node.nodeSize, sectionAttrs(nodes, range, range.from + i))),
+  );
+}
+
+/** on: false for a fixed page's text (MarkdownEditor's `sections`), whose H2s are the names of its sections: no frame. */
+export const sectionFrame = (on: boolean) =>
+  $prose(
+    () =>
+      new Plugin({
+        props: { decorations: on ? ({ doc }) => DecorationSet.create(doc, sectionDecorations(doc)) : () => null },
+      }),
+  );

package/src/sectionState.d.mts

@@ -0,0 +1,19 @@
+/** The top-level H2 the cursor is in, with its colour, or null. @param {import('@milkdown/kit/prose/state').EditorState} state
+ * @returns {{ pos: number, color: string | null } | null} */
+export function sectionHeading(state: import("@milkdown/kit/prose/state").EditorState): {
+    pos: number;
+    color: string | null;
+} | null;
+/** Gives the H2 the cursor is in this colour (null: none). False when it is not in an H2, or the colour is not one of the theme's.
+ * @param {{ state: import('@milkdown/kit/prose/state').EditorState, dispatch: (tr: import('@milkdown/kit/prose/state').Transaction) => void }} view
+ * @param {string | null} color */
+export function setSectionColor(view: {
+    state: import("@milkdown/kit/prose/state").EditorState;
+    dispatch: (tr: import("@milkdown/kit/prose/state").Transaction) => void;
+}, color: string | null): boolean;
+/** The colour of the section made of nodes[range.from..range.to] (sectionRanges): its H2's, null without one.
+ * @param {import('@milkdown/kit/prose/model').Node[]} nodes @param {{ from: number, to: number }} range @returns {string | null} */
+export function sectionColorOf(nodes: import("@milkdown/kit/prose/model").Node[], range: {
+    from: number;
+    to: number;
+}): string | null;

package/src/sectionState.mjs

@@ -0,0 +1,31 @@
+// The section colour in the editor's document (the *Sektionsfarve* button, MarkdownEditor.tsx; the frame, sectionFrame.ts): the
+// top-level H2 the cursor is in (sectionHeading), setting its colour (setSectionColor) and the colour of a section (sectionColorOf).
+// Only ProseMirror's state; depends on lib/section-marker.mjs. No Milkdown, no browser.
+import { SECTION_COLORS } from '../lib/section-marker.mjs';
+
+/** The top-level H2 the cursor is in, with its colour, or null. @param {import('@milkdown/kit/prose/state').EditorState} state
+ * @returns {{ pos: number, color: string | null } | null} */
+export function sectionHeading(state) {
+  const { $from } = state.selection;
+  const node = $from.parent;
+  if ($from.depth !== 1 || node.type.name !== 'heading' || node.attrs.level !== 2) return null;
+  return { pos: $from.before(1), color: node.attrs.section ?? null };
+}
+
+/** Gives the H2 the cursor is in this colour (null: none). False when it is not in an H2, or the colour is not one of the theme's.
+ * @param {{ state: import('@milkdown/kit/prose/state').EditorState, dispatch: (tr: import('@milkdown/kit/prose/state').Transaction) => void }} view
+ * @param {string | null} color */
+export function setSectionColor(view, color) {
+  const at = sectionHeading(view.state);
+  if (!at || (color !== null && !SECTION_COLORS.includes(color))) return false;
+  const heading = view.state.doc.nodeAt(at.pos);
+  if (at.color !== color) view.dispatch(view.state.tr.setNodeMarkup(at.pos, undefined, { ...heading.attrs, section: color }));
+  return true;
+}
+
+/** The colour of the section made of nodes[range.from..range.to] (sectionRanges): its H2's, null without one.
+ * @param {import('@milkdown/kit/prose/model').Node[]} nodes @param {{ from: number, to: number }} range @returns {string | null} */
+export function sectionColorOf(nodes, range) {
+  const heading = nodes.slice(range.from, range.to + 1).find((n) => n.type.name === 'heading' && n.attrs.level === 2);
+  return heading?.attrs.section ?? null;
+}

package/src/sectionState.test.mjs

@@ -0,0 +1,59 @@
+// Tests for src/sectionState.mjs: the H2 the cursor is in, setting its section colour, and the colour of a section.
+// Run: node --test packages/editor/src/sectionState.test.mjs
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { Schema } from '@milkdown/kit/prose/model';
+import { EditorState, TextSelection } from '@milkdown/kit/prose/state';
+import { sectionColorOf, sectionHeading, setSectionColor } from './sectionState.mjs';
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: 'block+' },
+    paragraph: { group: 'block', content: 'text*' },
+    heading: { group: 'block', content: 'text*', attrs: { level: { default: 2 }, section: { default: null } } },
+    eyebrow: { group: 'block', content: 'text*' },
+    text: {},
+  },
+});
+const node = (type, text, attrs) => schema.node(type, attrs, text ? [schema.text(text)] : []);
+// An H2 "Hours" (0-7, coloured tint), a paragraph (7-10), an H3 (10-14).
+const doc = schema.node('doc', null, [
+  node('heading', 'Hours', { level: 2, section: 'tint' }),
+  node('paragraph', 'x'),
+  node('heading', 'Sub', { level: 3 }),
+]);
+const viewAt = (pos) => ({
+  state: EditorState.create({ doc, selection: TextSelection.create(doc, pos) }),
+  dispatch(tr) {
+    this.state = this.state.apply(tr);
+  },
+});
+
+test('the H2 the cursor is in', () => assert.deepEqual(sectionHeading(viewAt(3).state), { pos: 0, color: 'tint' }));
+test('none in a paragraph or an H3', () => {
+  assert.equal(sectionHeading(viewAt(8).state), null);
+  assert.equal(sectionHeading(viewAt(12).state), null);
+});
+test('sets another colour', () => {
+  const view = viewAt(3);
+  assert.equal(setSectionColor(view, 'accent'), true);
+  assert.equal(view.state.doc.child(0).attrs.section, 'accent');
+  assert.equal(view.state.doc.child(0).attrs.level, 2);
+});
+test('null takes the colour away', () => {
+  const view = viewAt(3);
+  setSectionColor(view, null);
+  assert.equal(view.state.doc.child(0).attrs.section, null);
+});
+test('a colour the theme has not is refused, and nothing happens outside an H2', () => {
+  const view = viewAt(3);
+  assert.equal(setSectionColor(view, 'red'), false);
+  assert.equal(view.state.doc.child(0).attrs.section, 'tint');
+  assert.equal(setSectionColor(viewAt(8), 'tint'), false);
+});
+test('the colour of a section is its H2’s, also after a label', () => {
+  const kids = [node('eyebrow', 'Label'), node('heading', 'Hours', { level: 2, section: 'surface' }), node('paragraph', 'x')];
+  assert.equal(sectionColorOf(kids, { from: 0, to: 2 }), 'surface');
+  assert.equal(sectionColorOf(kids, { from: 1, to: 2 }), 'surface');
+  assert.equal(sectionColorOf([node('heading', 'A', { level: 2 })], { from: 0, to: 0 }), null);
+});

package/src/sections.d.mts

@@ -3,8 +3,9 @@
 export function sectionsToMarkdown(sections: any, leads: {} | undefined, intro: any): string;
 /** The page's introduction (the text before the first heading or card) and the parts after it. */
 export function introOf(parts: any): any[];
-/** The sections for the parts of the text (partsOf in markdown.mjs); leads as for sectionsToMarkdown. */
-export function sectionsFromParts(parts: any, leads?: {}): any;
+/** The sections for the parts of the text (partsOf in markdown.mjs); leads as for sectionsToMarkdown. `colors`: the front
+ * page: each section also has the colour of its H2 as `sectionColor` (the top, the "Banner", has none). */
+export function sectionsFromParts(parts: any, leads?: {}, options?: {}): any;
 /** The look of each part of the text (null: as text), from its parts in order: { kind: 'block', type }
  * for a card, 'heading' (H2), 'p' (with image: a picture), 'gap' (a free line) or 'other'. The text a
  * section takes as its own is found as in sectionsFromParts. A text after the first is marked "rest". */
@@ -15,9 +16,10 @@ export function looksOf(items: any, { file, leads, intro, sectionLooks, headingL
     sectionLooks?: {} | undefined;
     headingLooks?: {} | undefined;
 }): any;
-/** A page's H1: the heading "# …" on the first line of its text that is not empty (the page's own heading, written
- * at the top of its text), as text, and the text without it. Without one: no heading, and the text as it is. With a
- * word or more in colour, `html` is the heading as HTML with its colours (coloredHtml), for the layout to draw. */
+/** A page's H1: the first heading "# …" of its text outside fenced code, wherever it stands (the editor makes the first
+ * heading of a page its H1, src/firstHeading.mjs, but text may stand above it), as text, and the text without that line
+ * (what stood above it first, a blank line, then what stood below). Without one: no heading, and the text as it is.
+ * With a word or more in colour, `html` is the heading as HTML with its colours (coloredHtml), for the layout to draw. */
 export function pageH1(markdown: any): {
     heading: undefined;
     rest: string;
@@ -30,11 +32,11 @@ export function pageH1(markdown: any): {
 /** The parts of a page's Markdown as the editor reads them (partsOf in markdown.mjs), without the editor: each block,
  * each heading at the top level (H2), and the Markdown between them; for the site, which reads the front page into
  * sections (packages/editor/site/home.ts). The page's H1 ("# …") is no section's and is left out. `npm run check:editor` checks
- * that it gives the editor's sections for every page. */
+ * that it gives the editor's sections for every page. A colour marker before an H2 is its part's `color`. */
 export function partsOfMarkdown(markdown: any): ({
     block: any;
-    heading?: undefined;
 } | {
+    color?: string | undefined;
     heading: any;
     block?: undefined;
 })[];