caracms 0.0.0-stage → 0.2.0

package/src/editor/client/nav/DocRow.tsx

@@ -0,0 +1,122 @@
+/**
+ * One document's row (the mockup's `.drow`), wherever documents are listed: the
+ * Pages tree, a collection's level, "Find a document" and the switcher.
+ *
+ * A file that can't be opened (invalid JSON, no title, a nested `index.json`;
+ * Decisions 8–9) is listed with a warning mark and doesn't open: clicking it shows
+ * why, in a note under the row (`aria-expanded`), and never opens it. No side rails (M2 Decision 10): the current row is a
+ * wash with a full thin ring, a warned one an icon.
+ *
+ * M4 (live mode): the merge notice's mark, someone's lock ("Aoife is editing"),
+ * presence (avatars) and the waiting dot go in the row's meta (live/marks.tsx). In
+ * local mode the slot stays empty (`data-slot="presence"`).
+ */
+import { useState, type CSSProperties, type ReactNode } from 'react';
+import { useEditor, useStore } from '../context.tsx';
+import { Icon } from '../shell/Icons.tsx';
+import { docId, sameDoc, type ListedDocument } from '../../types.ts';
+import { DocMarksView } from '../live/marks.tsx';
+
+/** A document's icon by its collection: a page, a case study (any list-of-fields document), a shared block, Site Settings, else a post. */
+export function docIcon(collection: { nested: boolean; kind?: string } | undefined): string {
+	if (collection?.nested) return 'page';
+	if (collection?.kind === 'fields') return 'case';
+	if (collection?.kind === 'shared') return 'shared';
+	if (collection?.kind === 'settings') return 'gear';
+	return 'journal';
+}
+
+export function DocRow(props: {
+	doc: ListedDocument;
+	crumb?: string;
+	className?: string;
+	style?: CSSProperties;
+	/** Before the icon: the tree's chevron column. */
+	lead?: ReactNode;
+	/** After the meta: a bubbled mark for a closed parent. */
+	extra?: ReactNode;
+	/** Called after the document starts opening (the switcher closes itself). */
+	onOpen?: () => void;
+	/** The switcher's keyboard highlight. */
+	active?: boolean;
+	id?: string;
+}) {
+	const editor = useEditor();
+	const { doc } = props;
+	const id = docId(doc);
+	const current = useStore(editor.doc.state, (s) => docId(s.ref) === id);
+	// The open document with a lockup too long for mobile says so in its row (the mockup's metaFor).
+	const tooLong = useTooLong(current);
+	const [why, setWhy] = useState(false);
+	const collection = editor.site.collections.find((c) => c.name === doc.collection);
+	const classes = ['drow', props.className, current ? 'is-current' : '', doc.warning ? 'is-warned' : '', props.active ? 'is-active' : ''].filter(Boolean).join(' ');
+	const open = () => {
+		if (doc.warning) {
+			setWhy((w) => !w);
+			editor.announce(`${doc.label} can't be opened. ${doc.warning.message}`);
+			return;
+		}
+		void editor.openDocument({ collection: doc.collection, path: doc.path });
+		props.onOpen?.();
+	};
+	return (
+		<>
+			<button
+				type="button"
+				id={props.id}
+				className={classes}
+				style={props.style}
+				data-doc={id}
+				aria-current={current ? 'page' : undefined}
+				aria-expanded={doc.warning ? why : undefined}
+				title={doc.warning?.message}
+				onClick={open}
+			>
+				{props.lead}
+				<Icon name={docIcon(collection)} />
+				<span className="nm">
+					{props.crumb ? <span className="crumb">{props.crumb} / </span> : null}
+					{doc.label}
+				</span>
+				<span className="meta">
+					{doc.warning ? (
+						<span className="wmark" data-warning={doc.warning.code}>
+							<Icon name="warn" size="xs" />
+							<span className="sr">, can't be opened</span>
+						</span>
+					) : null}
+					{/* M9 Decision 7: hidden from the site (or under a hidden page). */}
+					{doc.hidden ? (
+						<span className="hmark" data-mark="hidden" title={doc.hiddenBy ? 'Hidden from the site with the page it’s under' : 'Hidden from the site'}>
+							Hidden
+						</span>
+					) : null}
+					{tooLong ? (
+						<span className="wmark" title="Too long for mobile" data-mark="too-long">
+							<Icon name="phone" size="xs" />
+							<span className="sr">, too long for mobile</span>
+						</span>
+					) : null}
+					{editor.mode === 'live' ? <DocMarksView file={doc.file} /> : <span data-slot="presence" hidden />}
+					{props.extra}
+				</span>
+			</button>
+			{doc.warning && why ? (
+				<div className="note warn tight doc-why" role="note" data-why={id}>
+					<Icon name="warn" />
+					<div>
+						<b>{doc.label} can't be opened</b>
+						<p>{doc.warning.message}</p>
+						<p className="mono">{doc.file}</p>
+					</div>
+				</div>
+			) : null}
+		</>
+	);
+}
+
+/** Whether the open document (when `current`) has a lockup too long for mobile, as the preview measured it. */
+export function useTooLong(current: boolean): boolean {
+	const editor = useEditor();
+	return useStore(editor.previewStatus, (s) => current && sameDoc(s.showing, editor.doc.get().ref) && s.warnings.some((w) => w.tooLong));
+}

package/src/editor/client/nav/search.ts

@@ -0,0 +1,71 @@
+/**
+ * "Find a document" and the ⌘K switcher (Decision 9): **every document's title and
+ * address, collections included, grouped by collection.** A nested page shows its
+ * parent in front ("Services / Branding") and matches on its parent's name too (the
+ * mockup revision's accepted reading). Pure, for the unit tests.
+ */
+import type { EditorCollection, ListedDocument } from '../../types.ts';
+
+export interface SearchHit {
+	doc: ListedDocument;
+	/** The parent page's or folder's label for a nested page (`Services`), else ''. */
+	crumb: string;
+}
+
+export interface SearchGroup {
+	collection: EditorCollection;
+	hits: SearchHit[];
+	/** How many documents the collection has in all (for "2 of 40"). */
+	total: number;
+}
+
+/** A document's parent label for crumbs: its parent page's label, or its folder's name title-cased (`Services`). */
+export function parentLabel(ref: { collection: string; path: string }, documents: readonly { collection: string; path: string; label: string }[]): string {
+	const slash = ref.path.lastIndexOf('/');
+	if (slash < 0) return '';
+	const parent = ref.path.slice(0, slash);
+	const page = documents.find((d) => d.collection === ref.collection && d.path === parent);
+	if (page) return page.label;
+	const name = parent.split('/').pop()!.replace(/[-_]+/g, ' ').trim();
+	return name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+/** Lower-cased and with accents folded, so "cafe" finds "Café". */
+export const fold = (text: string) => text.normalize('NFD').replace(/\p{M}/gu, '').toLowerCase();
+
+/** The text a query is matched against: title, label, address, path, and the parent's label. */
+function haystack(doc: ListedDocument, crumb: string): string {
+	return fold([doc.title, doc.label, doc.url ?? '', doc.path, crumb].join('\n'));
+}
+
+/**
+ * Every collection's matches for `query`, in config order, each in the list's own
+ * order (tree order for Pages). Empty groups are left out. A blank query matches
+ * nothing (the caller shows its unfiltered list instead).
+ */
+export function searchDocuments(query: string, documents: readonly ListedDocument[], collections: readonly EditorCollection[]): SearchGroup[] {
+	const words = fold(query).split(/\s+/).filter(Boolean);
+	if (words.length === 0) return [];
+	const groups: SearchGroup[] = [];
+	for (const collection of collections) {
+		const docs = documents.filter((d) => d.collection === collection.name);
+		const hits: SearchHit[] = [];
+		for (const doc of docs) {
+			const crumb = collection.nested ? parentLabel(doc, documents) : '';
+			const text = haystack(doc, crumb);
+			if (words.every((w) => text.includes(w))) hits.push({ doc, crumb });
+		}
+		if (hits.length) groups.push({ collection, hits, total: docs.length });
+	}
+	return groups;
+}
+
+/** One collection's documents matching `query` (its own level's filter). A blank query keeps them all. */
+export function filterCollection(query: string, documents: readonly ListedDocument[]): ListedDocument[] {
+	const words = fold(query).split(/\s+/).filter(Boolean);
+	if (words.length === 0) return [...documents];
+	return documents.filter((d) => {
+		const text = fold([d.title, d.label, d.url ?? '', d.path].join('\n'));
+		return words.every((w) => text.includes(w));
+	});
+}

package/src/editor/client/nav/tree.ts

@@ -0,0 +1,93 @@
+/**
+ * The Pages tree as rows (Decision 8), built from the document list. Pure, so the
+ * server render, the browser and the unit tests agree.
+ *
+ * The reader (content.ts → listDocuments) already returns a nested collection in
+ * tree order: each level Home first, then alphabetical by title, with a folder that
+ * has no page of its own sorted by its label. So the rows keep the list's order; a
+ * row's depth is its path's, and a folder with no page becomes a group row just
+ * before its first child. (The browser can't import content.ts's pageTree: it reads
+ * the disk.)
+ */
+import { titleCase } from '../../../fields.ts';
+import type { ListedDocument, UiState } from '../../types.ts';
+import { groupKey } from '../../ui-state.ts';
+
+export type TreeRow =
+	| {
+			kind: 'page';
+			/** The document's path, which is also its tree position. */
+			path: string;
+			depth: number;
+			doc: ListedDocument;
+			/** It has pages under it: it gets a show/hide chevron as well as opening. */
+			parent: boolean;
+			/** Its children are shown (only meaningful when `parent`). */
+			open: boolean;
+			/** Its group key in the cookie (`pages:about`). */
+			key: string;
+			/** Documents under it (any depth), for a bubbled mark when it's closed. */
+			under: ListedDocument[];
+	  }
+	| {
+			/** A folder with no page of its own: shows or hides its children only. */
+			kind: 'group';
+			path: string;
+			depth: number;
+			/** The folder name, hyphens as spaces, capital first letter (`case-studies` → "Case studies"). */
+			label: string;
+			open: boolean;
+			key: string;
+			under: ListedDocument[];
+	  };
+
+/**
+ * The rows a collection's tree shows, given which groups are open. A row under a
+ * closed group (at any depth) isn't returned. `documents` must be one collection's,
+ * in the reader's order.
+ */
+export function treeRows(collection: string, documents: readonly ListedDocument[], open: UiState['open']): TreeRow[] {
+	const paths = new Set(documents.map((d) => d.path));
+	const isOpen = (path: string) => open[groupKey(collection, path)] === true;
+	const under = (path: string) => documents.filter((d) => d.path.startsWith(`${path}/`));
+	/** Hidden when any folder above it is closed. */
+	const hidden = (path: string) => {
+		const segments = path.split('/');
+		for (let i = 1; i < segments.length; i++) if (!isOpen(segments.slice(0, i).join('/'))) return true;
+		return false;
+	};
+
+	const rows: TreeRow[] = [];
+	const emitted = new Set<string>();
+	for (const doc of documents) {
+		const segments = doc.path.split('/');
+		for (let i = 1; i < segments.length; i++) {
+			const folder = segments.slice(0, i).join('/');
+			if (paths.has(folder) || emitted.has(folder)) continue;
+			emitted.add(folder);
+			if (hidden(folder)) continue;
+			rows.push({
+				kind: 'group',
+				path: folder,
+				depth: i - 1,
+				label: titleCase(segments[i - 1]!),
+				open: isOpen(folder),
+				key: groupKey(collection, folder),
+				under: under(folder),
+			});
+		}
+		if (hidden(doc.path)) continue;
+		const kids = under(doc.path);
+		rows.push({
+			kind: 'page',
+			path: doc.path,
+			depth: segments.length - 1,
+			doc,
+			parent: kids.length > 0,
+			open: isOpen(doc.path),
+			key: groupKey(collection, doc.path),
+			under: kids,
+		});
+	}
+	return rows;
+}

package/src/editor/client/overlays/OverlayMount.tsx

@@ -0,0 +1,26 @@
+/**
+ * Mounted once in the shell (App.tsx): starts the overlay layer, editing from the
+ * page (click to edit, typing on the page, hover), the editor's own marks and the
+ * formatting bar of rich text typed on the page (rich-text-bar.ts), and
+ * following links from the page (follow-links.ts). Renders
+ * nothing; on the server it does nothing.
+ */
+import { useEffect } from 'react';
+import { useEditor } from '../context.tsx';
+import { pageEditFor } from '../preview/page-edit.ts';
+import { startFollowLinks } from '../preview/follow-links.ts';
+import { startEditorMarks } from './editor-marks.ts';
+import { overlaysFor } from './index.ts';
+import { startRichTextBar } from './rich-text-bar.ts';
+
+export function OverlayMount() {
+	const editor = useEditor();
+	useEffect(() => {
+		const overlays = overlaysFor(editor);
+		const pageEdit = pageEditFor(editor);
+		if (!overlays || !pageEdit) return;
+		const stops = [startEditorMarks(editor, overlays, pageEdit), startRichTextBar(editor, overlays, pageEdit), startFollowLinks(editor, overlays)];
+		return () => stops.forEach((stop) => stop());
+	}, [editor]);
+	return null;
+}

package/src/editor/client/overlays/editor-marks.ts

@@ -0,0 +1,159 @@
+/**
+ * The editor's own overlay marks (M2 → Overlays), drawn into the shared layer on the
+ * `editor` channel, from the editor's state:
+ *
+ *   selected      the open block (the block level): 2px, a filled tag with its type
+ *   hover         the block under the pointer on the page, or its row in the block list
+ *                 (block-list/link.ts → blockHover, which this also sets from the page)
+ *   field-hover   a field under the pointer inside the open block
+ *   picked        the picked field, ringed with its name; teal "· Phone lines" in the
+ *                 phone frame when the lockup has its own phone lines
+ *   typing        the field being typed on the page: "Typing on the page" (rich text: the
+ *                 ring alone, its formatting bar sits there; rich-text-bar.ts)
+ *   warn          a lockup too long for mobile, in the phone frame (previewStatus.warnings)
+ *   skipped       an unknown block, where it would be on the page; its pill opens it. A
+ *                 shared-block entry (M5a Decision 8) only when the listing has no such
+ *                 shared block: one that exists renders on the page (its own screen is Phase 5's)
+ *
+ * None while the preview shows another document than the sidebar (one is opening).
+ */
+import { blockHover, setBlockHover } from '../block-list/link.ts';
+import type { Editor } from '../editor.ts';
+import type { PageEdit } from '../preview/page-edit.ts';
+import { blockLabel } from '../state/document-store.ts';
+import { fieldAt, fieldAtPath, getAtPath, titleCase } from '../../../fields.ts';
+import { own, sharedEntryOf } from '../../../document.ts';
+import { sameDoc, type EditorBlock } from '../../types.ts';
+import type { Fields } from '../../../fields.ts';
+import { fieldsOfBlock } from '../state/schema.ts';
+import type { Mark, Overlays } from './layer.ts';
+
+export const EDITOR_CHANNEL = 'editor';
+
+/**
+ * The name a picked field is ringed with. A dotted path (M5a Decision 16) names the
+ * field and the item: `credits.1.name` → "Credits 2 · Name", `cta.label` → "Cta",
+ * `left.heading` (a group's field) → "Left · Heading".
+ */
+export function fieldLabel(fields: Fields | undefined, field: string): string {
+	const schema = fields ? { fields } : undefined;
+	const descriptor = schema ? own(schema.fields, field) : undefined;
+	if (descriptor || !field.includes('.')) return descriptor?.label ?? titleCase(field);
+	const [top, index, sub] = field.split('.');
+	const outer = schema ? own(schema.fields, top!) : undefined;
+	const name = outer?.label ?? titleCase(top!);
+	// A field in a group: `left.heading` → "Left · Heading".
+	if (outer?.kind === 'group' && index !== undefined && Object.hasOwn(outer.fields, index)) return `${name} · ${fieldLabel(outer.fields, field.slice(top!.length + 1))}`;
+	if (!/^\d+$/.test(index ?? '')) return name;
+	const inner = schema && sub ? fieldAtPath(schema.fields, field) : undefined;
+	const subName = sub && inner && inner.rest.length === 0 && inner.field !== outer ? (inner.field.label ?? titleCase(sub)) : null;
+	return subName ? `${name} ${Number(index) + 1} · ${subName}` : `${name} ${Number(index) + 1}`;
+}
+
+/** The marks for the editor's state now. Pure apart from reading the stores. */
+export function editorMarks(editor: Editor, pageEdit: PageEdit): Mark[] {
+	const status = editor.previewStatus.get();
+	const session = editor.doc.get();
+	if (status.opening || !sameDoc(status.showing, session.ref)) return [];
+	const view = editor.view.get();
+	const blocks = session.document.blocks;
+	const marks: Mark[] = [];
+
+	const listed = editor.documents.get();
+	const sharedExists = (name: string) => listed.some((d) => d.collection === 'shared' && d.path === name && !d.warning && d.blockType && own(editor.site.blocks, d.blockType));
+	/** A block's tag: its type's label, or a shared entry's shared block's title (M5a). */
+	const entryLabel = (block: EditorBlock) => {
+		const shared = sharedEntryOf(block);
+		return shared !== undefined ? (listed.find((d) => d.collection === 'shared' && d.path === shared)?.label ?? shared) : blockLabel(editor.site, block);
+	};
+	blocks.forEach((block, index) => {
+		if (block.known) return;
+		const shared = sharedEntryOf(block);
+		if (shared !== undefined && sharedExists(shared)) return;
+		marks.push({
+			kind: 'skipped',
+			block: index,
+			label: shared !== undefined ? `Skipped on the page: shared block ${shared}` : `Skipped on the page: ${block.type || 'no type'}`,
+			onClick: () => editor.openBlock(block.key),
+		});
+	});
+
+	// The selected block is outlined in the block level and in the block list it's selected in
+	// (the mockup's #blocks and #picker); its fields' marks only while it's open.
+	// A form (a fields document, a shared block, Site Settings: M5a) has no block list: its
+	// fields' marks show at its document level, and no block is outlined as selected.
+	const form = session.document.kind !== 'sections';
+	// M5b: a slot's picker (the library in place of the block's fields) keeps the block selected and the slot ringed.
+	const picking = view.level === 'media' && !!view.media?.pick;
+	const inList = !form && (view.level === 'block' || view.level === 'document' || picking);
+	const inBlock = editor.fieldsOpen(view) || picking;
+	const selectedIndex = form ? (inBlock ? 0 : -1) : inList && view.block ? session.document.blocks.findIndex((b) => b.key === view.block) : -1;
+	const selected = selectedIndex >= 0 ? blocks[selectedIndex]! : null;
+	if (selected && !form && (selected.known || sharedExists(sharedEntryOf(selected) ?? ''))) marks.push({ kind: 'selected', block: selectedIndex, label: entryLabel(selected) });
+
+	const hoverKey = blockHover(editor).get();
+	const hoverIndex = hoverKey ? blocks.findIndex((b) => b.key === hoverKey) : -1;
+	const hovered = hoverIndex >= 0 ? blocks[hoverIndex]! : null;
+	if (hovered && !form && (hovered.known || sharedExists(sharedEntryOf(hovered) ?? '')) && hoverIndex !== selectedIndex) marks.push({ kind: 'hover', block: hoverIndex, label: entryLabel(hovered) });
+
+	const pageHover = pageEdit.hover.get();
+	if (inBlock && selected?.known && pageHover && pageHover.block === selectedIndex && pageHover.field && pageHover.field !== view.field) {
+		marks.push({ kind: 'field-hover', block: selectedIndex, field: pageHover.field });
+	}
+
+	if (inBlock && selected?.known && view.field) {
+		const field = view.field;
+		const fields = fieldsOfBlock(editor.site, session.document, session.ref.collection, selected);
+		const label = fieldLabel(fields, field);
+		const typing = pageEdit.typing.get();
+		const descriptor = fieldAt(fields, field);
+		// A field warned in the phone frame shows the amber "Too long for mobile" tag there,
+		// not its own name too (the mockup's #phone-main): its ring stays, its tag goes.
+		const warned = status.warnings.some((w) => w.tooLong && w.block === selectedIndex && w.field === field);
+		const phone = (mark: Mark): Mark => (warned ? { ...mark, label: undefined } : mark);
+		if (typing && typing.key === selected.key && typing.field === field) {
+			// Rich text keeps the ring but not its chip: the formatting bar sits there (on-page rich text, Decision 9).
+			marks.push({ kind: 'typing', block: selectedIndex, field, label: descriptor?.kind === 'richText' ? undefined : 'Typing on the page' });
+		} else if (descriptor?.kind === 'lockup' && hasPhoneLines(getAtPath(selected.data, field))) {
+			marks.push({ kind: 'picked', block: selectedIndex, field, label, frames: ['desktop', 'tablet'] });
+			marks.push(phone({ kind: 'picked', block: selectedIndex, field, label: `${label} · Phone lines`, tone: 'phone', frames: ['phone'] }));
+		} else if (warned) {
+			marks.push({ kind: 'picked', block: selectedIndex, field, label, frames: ['desktop', 'tablet'] });
+			marks.push(phone({ kind: 'picked', block: selectedIndex, field, label, frames: ['phone'] }));
+		} else {
+			marks.push({ kind: 'picked', block: selectedIndex, field, label });
+		}
+	}
+
+	for (const warning of status.warnings) {
+		if (warning.tooLong) marks.push({ kind: 'warn', block: warning.block, field: warning.field, label: 'Too long for mobile', frames: ['phone'] });
+	}
+	return marks;
+}
+
+const hasPhoneLines = (value: unknown) => !!value && typeof value === 'object' && Array.isArray((value as { phone?: unknown }).phone) && (value as { phone: unknown[] }).phone.length > 0;
+
+/** Keep the `editor` channel up to date. Returns a stop. */
+export function startEditorMarks(editor: Editor, overlays: Overlays, pageEdit: PageEdit): () => void {
+	const update = () => overlays.set(EDITOR_CHANNEL, editorMarks(editor, pageEdit));
+	const hover = blockHover(editor);
+	const stops = [
+		editor.view.subscribe(update),
+		editor.doc.state.subscribe(update),
+		editor.previewStatus.subscribe(update),
+		pageEdit.typing.subscribe(update),
+		pageEdit.hover.subscribe(update),
+		hover.subscribe(update),
+		// The page's hover lights up the block's row in the list too (and the list's, the page).
+		pageEdit.hover.subscribe((now, before) => {
+			if (now?.block === before?.block) return;
+			const key = now ? editor.doc.keyAt(now.block) ?? null : null;
+			if (now || hover.get() === (before ? editor.doc.keyAt(before.block) : null)) setBlockHover(editor, key);
+		}),
+	];
+	update();
+	return () => {
+		for (const stop of stops) stop();
+		overlays.clear(EDITOR_CHANNEL);
+	};
+}

package/src/editor/client/overlays/index.ts

@@ -0,0 +1,50 @@
+/**
+ * The overlays, one per editor (editor/README.md → Overlays).
+ *
+ *   import { overlaysFor } from '../overlays/index.ts';
+ *   const overlays = overlaysFor(editor);           // null on the server
+ *   overlays?.set('block-list', [{ kind: 'hover', block: 2, label: 'Text' }]);
+ *   overlays?.clear('block-list');
+ *   const remove = overlays?.addPainter((ctx) => …elements…);
+ *
+ * The first call creates the layer and attaches it to the editor's preview driver;
+ * every later call returns the same one. OverlayMount (mounted once in the shell)
+ * makes that first call and draws the editor's own marks (editor-marks.ts).
+ */
+import type { Editor } from '../editor.ts';
+import { displayName } from '../live/format.ts';
+import { sameDoc } from '../../types.ts';
+import { createOverlays, type Overlays } from './layer.ts';
+
+export type { Mark, MarkKind, OverlayContext, OverlayPainter, Overlays, Rect } from './layer.ts';
+export { LAYER_ID } from './layer.ts';
+
+const made = new WeakMap<Editor, Overlays>();
+
+export function overlaysFor(editor: Editor): Overlays | null {
+	if (!editor.preview || typeof window === 'undefined') return null;
+	let overlays = made.get(editor);
+	if (!overlays) {
+		overlays = createOverlays({
+			driver: editor.preview,
+			layout: editor.stageLayout,
+			visibleWidth: () => editor.view.get().width,
+			// M4: a read-only document has no overlays; a lock gives the veil (Decision 9).
+			mode: () => {
+				const access = editor.access.get();
+				if (!access.readOnly) return { kind: 'normal' };
+				if (!access.veil || !sameDoc(editor.previewStatus.get().showing, editor.doc.get().ref)) return { kind: 'quiet' };
+				const who = access.lock === 'theirs' && access.holder ? `${displayName(access.holder.person)} is editing` : "You're editing this in another tab";
+				return { kind: 'veil', title: who };
+			},
+		});
+		made.set(editor, overlays);
+		editor.access.subscribe(() => overlays!.redraw());
+		editor.previewStatus.subscribe((s, previous) => s.showing !== previous.showing && overlays!.redraw());
+		// The width on screen decides where hover and insert points go.
+		editor.view.subscribe((view, previous) => {
+			if (view.width !== previous.width) overlays!.redraw();
+		});
+	}
+	return overlays;
+}