@gramps-connect/story 0.3.0 → 0.5.0

package/src/editor/PlaceField.tsx

@@ -0,0 +1,170 @@
+// A slide's place: a name and a point. The point comes from clicking the
+// map, dragging the pin, typing coordinates, or a search by name (opt-in:
+// the one thing the editor sends anywhere). Picking one of the story's
+// other places gives this slide the very same place, overlays and all.
+// A place's shapes and old maps are edited full screen (onEditMap), and
+// always kept.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Autocomplete, Button, Group, Loader, Stack, Text, TextInput, Tooltip, UnstyledButton } from "@mantine/core";
+import type { Place } from "../types";
+import type { Bounds } from "../player/geo";
+import { formatLatLon, parseLatLon, patchPlace, roundDegrees } from "./model";
+import { PlaceMap } from "./PlaceMap";
+import type { PlaceSearch, PlaceSearchResult } from "./placeSearch";
+import type { EditorStrings } from "./strings";
+
+export type PlaceUpdate = (place: Place | undefined) => Place | undefined;
+
+export interface PlaceFieldProps {
+  place: Place | undefined;
+  /** The story's other places, to reuse. */
+  choices: Place[];
+  /** Where the map looks while this place has no point. */
+  around?: Bounds | null;
+  /** The story's language: search results are named in it. */
+  language?: string;
+  /** Null hides the search. */
+  search: PlaceSearch | null;
+  dark?: boolean;
+  strings: EditorStrings;
+  /** A change, as a function of the place as it is by then. */
+  onChange: (update: PlaceUpdate, key: string) => void;
+  /** Opens the shapes-and-old-maps editor; without it, those are only
+   * kept. */
+  onEditMap?: () => void;
+}
+
+type Found =
+  | { state: "idle" }
+  | { state: "searching" }
+  | { state: "results"; results: PlaceSearchResult[] }
+  | { state: "message"; message: string };
+
+export function PlaceField({ place, choices, around, language, search, dark, strings, onChange, onEditMap }: PlaceFieldProps) {
+  const lat = place?.lat;
+  const lon = place?.lon;
+  const point = lat !== undefined && lon !== undefined ? ([lon, lat] as [number, number]) : null;
+  const name = place?.name ?? "";
+
+  // The coordinates as typed, until they're a point; then as the point is.
+  const [coords, setCoords] = useState(point ? formatLatLon(point[1], point[0]) : "");
+  useEffect(() => {
+    setCoords((typed) => {
+      const parsed = parseLatLon(typed);
+      if (lat === undefined || lon === undefined) return parsed ? "" : typed;
+      return parsed && parsed.lat === lat && parsed.lon === lon ? typed : formatLatLon(lat, lon);
+    });
+  }, [lat, lon]);
+  const coordsInvalid = coords.trim() !== "" && !parseLatLon(coords);
+
+  const [found, setFound] = useState<Found>({ state: "idle" });
+  const searching = useRef<AbortController | null>(null);
+  useEffect(() => () => searching.current?.abort(), []);
+  const find = async () => {
+    if (!search || !name.trim()) return;
+    searching.current?.abort();
+    const controller = new AbortController();
+    searching.current = controller;
+    setFound({ state: "searching" });
+    try {
+      const results = await search.search(name.trim(), language, controller.signal);
+      setFound(results.length ? { state: "results", results } : { state: "message", message: strings.findPlaceNone });
+    } catch {
+      if (!controller.signal.aborted) setFound({ state: "message", message: strings.findPlaceFailed });
+    }
+  };
+  const choose = async (result: PlaceSearchResult) => {
+    if (!search) return;
+    searching.current?.abort();
+    const controller = new AbortController();
+    searching.current = controller;
+    setFound({ state: "searching" });
+    try {
+      const at = await search.point(result, controller.signal);
+      if (!at) {
+        setFound({ state: "message", message: strings.findPlaceNoPoint(result.label) });
+        return;
+      }
+      setFound({ state: "idle" });
+      onChange((p) => patchPlace(p, { name: result.label, lat: roundDegrees(at.lat), lon: roundDegrees(at.lon) }), "place");
+    } catch {
+      if (!controller.signal.aborted) setFound({ state: "message", message: strings.findPlaceFailed });
+    }
+  };
+
+  const byName = useMemo(() => new Map(choices.map((c) => [c.name!.trim(), c])), [choices]);
+  const keeps = [
+    place?.geometry ? strings.placeShape : null,
+    place?.overlays?.length ? strings.placeOverlays(place.overlays.length) : null,
+  ].filter(Boolean);
+
+  return (
+    <Stack gap="xs">
+      <Group justify="space-between">
+        <Text size="sm" fw={500}>{strings.place}</Text>
+        {place && (
+          <Button variant="subtle" size="compact-xs" color="red" onClick={() => { setFound({ state: "idle" }); onChange(() => undefined, "place"); }}>
+            {strings.removePlace}
+          </Button>
+        )}
+      </Group>
+      <Group gap="xs" align="flex-end" wrap="nowrap">
+        <Autocomplete
+          size="xs" label={strings.placeName} style={{ flex: 1 }} value={name}
+          data={[...byName.keys()]}
+          comboboxProps={{ withinPortal: true }}
+          onChange={(value) => onChange((p) => patchPlace(p, { name: value || undefined }), "place:name")}
+          onOptionSubmit={(value) => {
+            const chosen = byName.get(value);
+            if (chosen) onChange(() => structuredClone(chosen), "place");
+          }}
+        />
+        {search && (
+          <Tooltip label={strings.findPlaceHint} multiline w={260}>
+            <Button variant="default" size="xs" disabled={!name.trim() || found.state === "searching"} onClick={() => void find()}>
+              {strings.findPlace}
+            </Button>
+          </Tooltip>
+        )}
+      </Group>
+      {found.state === "searching" && <Loader size="xs" />}
+      {found.state === "message" && <Text size="xs" c="dimmed" role="status">{found.message}</Text>}
+      {found.state === "results" && (
+        <Stack gap={2} role="list" aria-label={strings.findPlace}>
+          {found.results.map((result) => (
+            <UnstyledButton
+              key={result.id} role="listitem" onClick={() => void choose(result)}
+              style={{ padding: "4px 8px", borderRadius: 4, border: "1px solid var(--mantine-color-default-border)" }}
+            >
+              <Text size="sm">{result.label}</Text>
+              {result.description && <Text size="xs" c="dimmed">{result.description}</Text>}
+            </UnstyledButton>
+          ))}
+        </Stack>
+      )}
+      <TextInput
+        size="xs" label={strings.coordinates} placeholder={strings.coordinatesHint} w={260} value={coords}
+        error={coordsInvalid ? strings.coordinatesInvalid : undefined}
+        onChange={(e) => {
+          const text = e.currentTarget.value;
+          setCoords(text);
+          const parsed = parseLatLon(text);
+          if (!text.trim()) onChange((p) => patchPlace(p, { lat: undefined, lon: undefined }), "place:point");
+          else if (parsed) onChange((p) => patchPlace(p, parsed), "place:point");
+        }}
+      />
+      <PlaceMap
+        point={point} around={around} dark={dark} label={strings.placeMap}
+        onPick={([pickedLon, pickedLat]) => onChange((p) => patchPlace(p, { lat: pickedLat, lon: pickedLon }), "place:point")}
+      />
+      <Text size="xs" c="dimmed">{strings.placeMapHint}</Text>
+      {keeps.length > 0 && <Text size="xs" c="dimmed">{strings.placeKeeps(keeps.join(", "))}</Text>}
+      {onEditMap && (
+        <Group gap="sm" wrap="nowrap" align="center">
+          <Button variant="default" size="xs" style={{ flex: "none" }} onClick={onEditMap}>{strings.editMap}</Button>
+          <Text size="xs" c="dimmed">{strings.editMapHint}</Text>
+        </Group>
+      )}
+    </Stack>
+  );
+}

package/src/editor/PlaceMap.tsx

@@ -0,0 +1,88 @@
+// A small map for setting a place's point: click to put the pin there,
+// drag the pin to move it. It starts at the point, or (with none yet) at
+// the story's other places, or the whole world.
+import { useEffect, useRef } from "react";
+import * as maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import type { Map as MapLibreMap, Marker as MapLibreMarker } from "maplibre-gl";
+import type { LonLat } from "../types";
+import type { Bounds } from "../player/geo";
+import { mapStyleUrl } from "../player/mapStyles";
+import { defaultColors, PIN_PATH_D } from "../player/theme";
+import { roundDegrees } from "./model";
+
+export interface PlaceMapProps {
+  point: LonLat | null;
+  /** Where to look when there's no point yet. */
+  around?: Bounds | null;
+  dark?: boolean;
+  label: string;
+  onPick: (point: LonLat) => void;
+}
+
+export function PlaceMap({ point, around, dark = false, label, onPick }: PlaceMapProps) {
+  const container = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<MapLibreMap | null>(null);
+  const markerRef = useRef<MapLibreMarker | null>(null);
+  const onPickRef = useRef(onPick);
+  onPickRef.current = onPick;
+  const pick = (lngLat: { lng: number; lat: number }) => onPickRef.current([roundDegrees(lngLat.lng), roundDegrees(lngLat.lat)]);
+  // The first point and surroundings only: moving is the effect below.
+  const start = useRef({ point, around });
+
+  useEffect(() => {
+    if (!container.current) return;
+    const { point: first, around: box } = start.current;
+    const map = new maplibregl.Map({
+      container: container.current,
+      style: mapStyleUrl(dark, null),
+      ...(first ? { center: first, zoom: 9 } : box ? { bounds: box, fitBoundsOptions: { padding: 30, maxZoom: 9 } } : { center: [10, 30], zoom: 0.5 }),
+      attributionControl: { compact: true },
+      // Scrolling the form past the map shouldn't zoom it.
+      cooperativeGestures: true,
+    });
+    map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-right");
+    map.getCanvas().style.cursor = "crosshair";
+    map.on("click", (e) => pick(e.lngLat));
+    mapRef.current = map;
+    return () => {
+      markerRef.current?.remove();
+      markerRef.current = null;
+      map.remove();
+      mapRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dark]);
+
+  // The pin follows the point, however it changed; the view follows only
+  // when the pin would be out of sight.
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    if (!point) {
+      markerRef.current?.remove();
+      markerRef.current = null;
+      return;
+    }
+    if (!markerRef.current) {
+      const el = document.createElement("div");
+      const c = defaultColors(dark);
+      el.innerHTML = `<svg viewBox="0 0 24 24" width="28" height="28" style="display:block;cursor:grab">`
+        + `<path d="${PIN_PATH_D}" fill="${c.mark}" stroke="${c.surface}" stroke-width="1.5" /></svg>`;
+      const marker = new maplibregl.Marker({ element: el, anchor: "bottom", draggable: true }).setLngLat(point).addTo(map);
+      marker.on("dragend", () => pick(marker.getLngLat()));
+      markerRef.current = marker;
+    } else {
+      markerRef.current.setLngLat(point);
+    }
+    if (!map.getBounds().contains(point)) map.easeTo({ center: point, zoom: Math.max(map.getZoom(), 8) });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [point?.[0], point?.[1], dark]);
+
+  return (
+    <div
+      ref={container} role="application" aria-label={label}
+      style={{ height: 240, borderRadius: 6, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }}
+    />
+  );
+}

package/src/editor/PlaceMapDialog.tsx

@@ -0,0 +1,228 @@
+// A slide's map, full screen: the shapes under its pin (drawn, or imported
+// from a KML, GPX or GeoJSON file) and scanned old maps laid over it, each
+// with the years it shows. Works on a copy: Done hands the editor the
+// place and any images added, as one change; Cancel drops them.
+import { useMemo, useRef, useState } from "react";
+import { ActionIcon, Box, Button, Group, Modal, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import type { MediaItem, Place, StoryDate, StoryDoc } from "../types";
+import { optimizeImage } from "../image";
+import { parseMapFile } from "../mapEdit";
+import { storyPlaces } from "../player/geo";
+import { edtfYearRange } from "../player/dates";
+import type { DateTextParser } from "./dates";
+import { MapEditor, MapEditorHelp, type MapEditorHandle } from "./MapEditor";
+import type { MapEditorStrings } from "./mapEditorStrings";
+import { addImage, slideDate, type NewImage } from "./model";
+import { editorToPlace, placeToEditor } from "./placeShapes";
+import type { EditorStrings } from "./strings";
+
+const BAR_HEIGHT = 56;
+
+/** Where the map editor's English is Gramps Connect's (images come from
+ * its media there), the story editor's own. */
+const STORY_MAP_WORDS: Partial<MapEditorStrings> = {
+  helpImage: "Image: add a picture file, such as a scan of an old map -- see",
+};
+
+export interface PlaceMapDialogProps {
+  place: Place | undefined;
+  doc: StoryDoc;
+  files: Map<string, Uint8Array>;
+  dark?: boolean;
+  parseDateText: DateTextParser;
+  strings: EditorStrings;
+  mapStrings?: Partial<MapEditorStrings>;
+  onCancel: () => void;
+  /** The place as edited, and the story's media and files with any images
+   * added here. */
+  onDone: (place: Place | undefined, media: Record<string, MediaItem>, files: Map<string, Uint8Array>) => void;
+}
+
+/** The default way an old map's scan is stored: 2048px, PNG when it has
+ * transparency (see optimizeImage's "overlay" purpose). */
+async function prepareOverlay(file: Blob): Promise<NewImage> {
+  const image = await optimizeImage(file, { purpose: "overlay" });
+  return { data: new Uint8Array(await image.blob.arrayBuffer()), mime: image.mime, ext: image.ext, width: image.width, height: image.height };
+}
+
+/** An overlay's years, as readers would write them; the precise form
+ * follows. Narrow, for the map editor's side panel. */
+function OverlayDateField({ value, language, parse, strings, onChange }: {
+  value: StoryDate | undefined;
+  language: string | undefined;
+  parse: DateTextParser;
+  strings: EditorStrings;
+  onChange: (date: StoryDate | undefined) => void;
+}) {
+  const [text, setText] = useState(value?.text ?? "");
+  const request = useRef(0);
+  const edtf = value?.edtf;
+  return (
+    <Stack gap={2} maw={220}>
+      <TextInput
+        size="xs" label={strings.overlayDate} description={strings.overlayDateHint} value={text}
+        onChange={(e) => {
+          const typed = e.currentTarget.value;
+          setText(typed);
+          const id = ++request.current;
+          if (!typed.trim()) { onChange(undefined); return; }
+          void parse(typed, language).then((parsed) => {
+            if (id === request.current) onChange(slideDate(value, typed, parsed));
+          });
+        }}
+      />
+      {text.trim() && (
+        <Text size="xs" c={edtf && edtfYearRange(edtf) ? "dimmed" : "red"}>
+          {edtf && edtfYearRange(edtf) ? `EDTF ${edtf}` : strings.preciseDateNotUnderstood}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+export function PlaceMapDialog({
+  place, doc, files, dark, parseDateText, strings, mapStrings: mapStringOverrides, onCancel, onDone,
+}: PlaceMapDialogProps) {
+  const mapStrings = { ...STORY_MAP_WORDS, ...mapStringOverrides };
+  const editorRef = useRef<MapEditorHandle>(null);
+  const initial = useMemo(() => placeToEditor(place), [place]);
+  // The story's media and files with what's been added here.
+  const [work, setWork] = useState({ doc, files });
+  const workRef = useRef(work);
+  workRef.current = work;
+  // Each overlay's date by media key, once changed here.
+  const [dates, setDates] = useState(() => new Map<string, StoryDate | undefined>());
+  const [message, setMessage] = useState<string | null>(null);
+  const [helpOpen, setHelpOpen] = useState(false);
+  const imageInput = useRef<HTMLInputElement>(null);
+  const shapesInput = useRef<HTMLInputElement>(null);
+
+  // Where to look with nothing to frame: the pin, or the story's places.
+  const initialView = useMemo(() => {
+    if (place?.lat !== undefined && place.lon !== undefined) return { center: [place.lon, place.lat] as [number, number], zoom: 12 };
+    const all = storyPlaces(doc.slides.map((s) => s.place));
+    if (!all) return undefined;
+    const [w, s, e, n] = all.bounds;
+    return { center: [(w + e) / 2, (s + n) / 2] as [number, number], zoom: 5 };
+  }, [place, doc]);
+
+  const resolveImage = async (key: string) => {
+    const item = Object.prototype.hasOwnProperty.call(workRef.current.doc.media, key) ? workRef.current.doc.media[key] : undefined;
+    const data = item && workRef.current.files.get(item.src);
+    if (!item || !data) throw new Error(strings.photoFailed(key));
+    return URL.createObjectURL(new Blob([data as Uint8Array<ArrayBuffer>], { type: item.mime }));
+  };
+
+  const addImages = async (chosen: File[]) => {
+    setMessage(null);
+    for (const file of chosen) {
+      let key: string;
+      try {
+        const added = addImage(workRef.current.doc, workRef.current.files, await prepareOverlay(file), "map");
+        workRef.current = { doc: added.doc, files: added.files };
+        setWork(workRef.current);
+        key = added.key;
+      } catch {
+        setMessage(strings.photoFailed(file.name || "the image"));
+        continue;
+      }
+      try {
+        if (!(await editorRef.current?.addImage(key))) setMessage(strings.overlayAlready);
+      } catch (err) {
+        setMessage(err instanceof Error ? err.message : String(err));
+      }
+    }
+  };
+
+  const importShapes = async (chosen: File[]) => {
+    setMessage(null);
+    for (const file of chosen) {
+      try {
+        // A KML GroundOverlay's picture lives outside the file; only shapes
+        // come in.
+        const features = parseMapFile(await file.text()).filter((f) => f.properties?.["@geometry-type"] !== "groundoverlay");
+        if (features.length === 0) setMessage(strings.importNothing(file.name));
+        else editorRef.current?.addFeatures(features);
+      } catch {
+        setMessage(strings.importFailed(file.name));
+      }
+    }
+  };
+
+  const done = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    onDone(editorToPlace(place, editor.getResult(), dates), workRef.current.doc.media, workRef.current.files);
+  };
+
+  const bar = dark ? "rgba(20,20,20,0.85)" : "rgba(255,255,255,0.9)";
+  return (
+    <Modal opened onClose={onCancel} fullScreen withCloseButton={false} closeOnEscape={false} padding={0}>
+      <Box style={{ position: "fixed", inset: 0, overflow: "hidden" }}>
+        <MapEditor
+          ref={editorRef}
+          initial={initial}
+          initialView={initialView}
+          resolveImage={resolveImage}
+          releaseImage={(url) => URL.revokeObjectURL(url)}
+          onAddImage={() => imageInput.current?.click()}
+          onError={setMessage}
+          dark={dark}
+          toolbarTop={BAR_HEIGHT + 12}
+          overlayNames={false}
+          strings={mapStrings}
+          renderOverlayOptions={(key) => (
+            <OverlayDateField
+              key={key}
+              value={dates.has(key) ? dates.get(key) : place?.overlays?.find((o) => o.media === key)?.date}
+              language={doc.language}
+              parse={parseDateText}
+              strings={strings}
+              onChange={(date) => setDates((prev) => new Map(prev).set(key, date))}
+            />
+          )}
+        />
+        <Group
+          justify="space-between" wrap="nowrap" px="md" gap="sm"
+          style={{ position: "absolute", top: 0, left: 0, right: 0, height: BAR_HEIGHT, zIndex: 3, background: bar }}
+        >
+          <Group gap={6} wrap="nowrap" style={{ minWidth: 0 }}>
+            <Text fw={600} truncate dir="auto">{strings.mapDialogTitle(place?.name)}</Text>
+            <Tooltip label={strings.mapHelp}>
+              <ActionIcon variant="subtle" radius="xl" aria-label={strings.mapHelp} onClick={() => setHelpOpen(true)}>ⓘ</ActionIcon>
+            </Tooltip>
+          </Group>
+          <Group gap="xs" wrap="nowrap">
+            <Tooltip label={strings.importShapesHint} multiline w={280}>
+              <Button variant="default" size="sm" onClick={() => shapesInput.current?.click()}>{strings.importShapes}</Button>
+            </Tooltip>
+            <Button variant="default" size="sm" onClick={onCancel}>{strings.cancel}</Button>
+            <Button size="sm" onClick={done}>{strings.done}</Button>
+          </Group>
+        </Group>
+        {message && (
+          <Text
+            size="sm" role="alert"
+            style={{
+              position: "absolute", bottom: 12, left: 12, zIndex: 3, maxWidth: 480, padding: "6px 10px", borderRadius: 6,
+              background: bar, color: "var(--mantine-color-red-filled)",
+            }}
+          >
+            {message}
+          </Text>
+        )}
+        <input
+          ref={imageInput} type="file" accept="image/*" multiple hidden
+          onChange={(e) => { const chosen = [...(e.currentTarget.files ?? [])]; e.currentTarget.value = ""; void addImages(chosen); }}
+        />
+        <input
+          ref={shapesInput} type="file" accept=".kml,.gpx,.geojson,.json,application/vnd.google-earth.kml+xml,application/gpx+xml,application/geo+json" multiple hidden
+          onChange={(e) => { const chosen = [...(e.currentTarget.files ?? [])]; e.currentTarget.value = ""; void importShapes(chosen); }}
+        />
+      </Box>
+      <Modal opened={helpOpen} onClose={() => setHelpOpen(false)} title={strings.mapHelp} size="md" zIndex={1000}>
+        <MapEditorHelp strings={mapStrings} />
+      </Modal>
+    </Modal>
+  );
+}

package/src/editor/StoryEditor.tsx

@@ -14,15 +14,20 @@ import { useMediaQuery } from "@mantine/hooks";
 import type { MediaItem, Slide, SlideMedia, StoryDoc } from "../types";
 import { optimizeImage } from "../image";
 import { validate, type StoryIssue } from "../validate";
+import { storyPlaces } from "../player/geo";
 import { StoryPlayer } from "../player/StoryPlayer";
 import type { PlayerStrings } from "../player/strings";
 import { suggestEdtf, type DateTextParser } from "./dates";
 import { DateField } from "./DateField";
 import {
-  addImage, addSlide, deleteSlide, findMedia, duplicateSlide, moveSlide, record, redo, setSlidePhotos, startHistory, undo, updateMedia,
-  updateSlide, updateStory, type History, type NewImage,
+  addImage, addSlide, deleteSlide, findMedia, duplicateSlide, moveSlide, record, redo, setSlidePhotos, startHistory, storyPlaceChoices,
+  undo, updateMedia, updateSlide, updateStory, type History, type NewImage,
 } from "./model";
 import { PhotosField } from "./PhotosField";
+import { PlaceField, type PlaceUpdate } from "./PlaceField";
+import { PlaceMapDialog } from "./PlaceMapDialog";
+import type { MapEditorStrings } from "./mapEditorStrings";
+import { WIKIDATA_PLACE_SEARCH, type PlaceSearch } from "./placeSearch";
 import { SlideList } from "./SlideList";
 import { StoryTextField } from "./StoryTextField";
 import { EDITOR_ENGLISH, type EditorStrings } from "./strings";
@@ -54,6 +59,11 @@ export interface StoryEditorProps {
   playerStrings?: Partial<PlayerStrings>;
   /** Date text -> EDTF. By default gramps-date, in the story's language. */
   parseDateText?: DateTextParser;
+  /** Finding a place by name. By default Wikidata, and only when the
+   * person asks; null leaves the search out. */
+  placeSearch?: PlaceSearch | null;
+  /** The map editor's words (Edit map), over its English. */
+  mapStrings?: Partial<MapEditorStrings>;
 }
 
 /** The slide an issue's JSON Pointer is about, or STORY. */
@@ -92,7 +102,7 @@ function Thumb({ doc, slide, resolveMedia }: { doc: StoryDoc; slide: Slide; reso
 
 export function StoryEditor({
   initialStory, initialFiles, onChange, prepareImage: prepare = prepareImage, toolbar, brand, dark = false,
-  strings: stringOverrides, playerStrings, parseDateText = suggestEdtf,
+  strings: stringOverrides, playerStrings, parseDateText = suggestEdtf, placeSearch = WIKIDATA_PLACE_SEARCH, mapStrings,
 }: StoryEditorProps) {
   const strings = useMemo(() => ({ ...EDITOR_ENGLISH, ...stringOverrides }), [stringOverrides]);
   const [history, setHistory] = useState<History>(() => startHistory(initialStory));
@@ -141,6 +151,23 @@ export function StoryEditor({
     if (index !== STORY) apply(updateSlide(history.present, index, patch), `${slide!.id}:${key}`);
   };
 
+  // A place change applies to the slide as it is by then: a name typed and
+  // a place picked in the same moment both land.
+  const setPlace = (slideId: string, update: PlaceUpdate, key: string) => {
+    setHistory((h) => {
+      const at = h.present.slides.findIndex((s) => s.id === slideId);
+      if (at < 0) return h;
+      const before = h.present.slides[at].place;
+      const after = update(before);
+      return after === before ? h : record(h, updateSlide(h.present, at, { place: after }), `${slideId}:${key}`);
+    });
+  };
+  // The slide whose map (shapes, old maps) is open full screen.
+  const [mapSlideId, setMapSlideId] = useState<string | null>(null);
+  const mapSlide = mapSlideId ? doc.slides.find((s) => s.id === mapSlideId) : undefined;
+  const placeChoices = useMemo(() => storyPlaceChoices(doc, index), [doc, index]);
+  const around = useMemo(() => storyPlaces(doc.slides.map((s) => s.place))?.bounds ?? null, [doc.slides]);
+
   const issues = useMemo(() => validate(doc, files).errors, [doc, files]);
 
   /** Prepares image files and puts them on a slide: added at the end, or
@@ -277,17 +304,11 @@ export function StoryEditor({
         label={strings.text} value={slide.text ?? ""} boldLabel={strings.bold} italicLabel={strings.italic} minRows={5}
         onChange={(text) => setSlide({ text: text || undefined }, "text")}
       />
-      {slide.place && (
-        <Stack gap={2}>
-          <Text size="sm" fw={500}>{strings.place}</Text>
-          <Text size="sm">
-            {slide.place.name ?? ""}
-            {slide.place.lat !== undefined && slide.place.lon !== undefined && (
-              <Text span c="dimmed" size="sm"> {slide.place.lat.toFixed(4)}, {slide.place.lon.toFixed(4)}</Text>
-            )}
-          </Text>
-        </Stack>
-      )}
+      <PlaceField
+        place={slide.place} choices={placeChoices} around={around} language={doc.language} search={placeSearch} dark={dark} strings={strings}
+        onChange={(update, key) => setPlace(slide.id, update, key)}
+        onEditMap={() => setMapSlideId(slide.id)}
+      />
       <PhotosField
         photos={slide.media ?? []} media={doc.media} urlFor={urlFor} strings={strings} busy={busy}
         onChange={(photos, key) => apply(setSlidePhotos(doc, index, photos), `${slide.id}:${key}`)}
@@ -410,6 +431,21 @@ export function StoryEditor({
         {column(index === STORY ? storyForm : slideForm, wide ? "min(520px, 36%)" : undefined)}
         {column(preview)}
       </Box>
+      {mapSlide && (
+        <PlaceMapDialog
+          place={mapSlide.place} doc={doc} files={files} dark={dark} parseDateText={parseDateText}
+          strings={strings} mapStrings={mapStrings}
+          onCancel={() => setMapSlideId(null)}
+          onDone={(place, media, nextFiles) => {
+            const at = doc.slides.findIndex((s) => s.id === mapSlide.id);
+            setMapSlideId(null);
+            if (at < 0) return;
+            setFiles(nextFiles);
+            // One step for undo: the map's images and the place together.
+            apply(updateSlide({ ...doc, media }, at, { place }));
+          }}
+        />
+      )}
       <Modal opened={presenting} onClose={() => setPresenting(false)} fullScreen withCloseButton={false} padding={0}>
         <Box style={{ position: "fixed", inset: 0 }}>
           <StoryPlayer

package/src/editor/index.ts

@@ -1,12 +1,21 @@
 export { prepareImage, StoryEditor, type StoryEditorProps } from "./StoryEditor";
+export {
+  MapEditor, MapEditorHelp, type MapEditorHandle, type MapEditorOverlay, type MapEditorProps, type MapEditorResult, type MapEditorStatus,
+} from "./MapEditor";
+export { MAP_EDITOR_ENGLISH, type MapEditorStrings } from "./mapEditorStrings";
 export { PhotosField, type PhotosFieldProps } from "./PhotosField";
+export { PlaceField, type PlaceFieldProps, type PlaceUpdate } from "./PlaceField";
+export { PlaceMapDialog, type PlaceMapDialogProps } from "./PlaceMapDialog";
+export { editorToPlace, placeFeatures, placeToEditor } from "./placeShapes";
+export { searchWikidataPlaces, wikidataPoint, WIKIDATA_PLACE_SEARCH, type PlaceSearch, type PlaceSearchResult } from "./placeSearch";
 export { StoryTextField, type StoryTextFieldProps } from "./StoryTextField";
 export { SlideList, type SlideListProps } from "./SlideList";
 export { DateField, type DateFieldProps } from "./DateField";
 export { suggestEdtf, type DateTextParser } from "./dates";
 export { EDITOR_ENGLISH, type EditorStrings } from "./strings";
 export {
-  addImage, addSlide, blankStory, COALESCE_MS, deleteSlide, duplicateSlide, findMedia, moveSlide, nextSlideId, pruneMedia, record, redo,
-  setSlidePhotos, slideDate, startHistory, storyFileName, undo, updateMedia, updateSlide, updateStory, usedMedia,
+  addImage, addSlide, blankStory, COALESCE_MS, deleteSlide, duplicateSlide, findMedia, formatLatLon, moveSlide, nextSlideId, parseLatLon,
+  patchPlace, pruneMedia, record, redo, roundDegrees, setSlidePhotos, slideDate, startHistory, storyFileName, storyPlaceChoices, undo,
+  updateMedia, updateSlide, updateStory, usedMedia,
   type History, type NewImage,
 } from "./model";