@djangocfg/ui-tools 2.1.430 → 2.1.432

package/src/tools/forms/NotionEditor/MapEditLayer.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+/**
+ * `MapEditLayer` — the EDITABLE inner layer of the NotionEditor `mapBlock`
+ * NodeView. Rendered as a child of `LazyMapContainer` (so it sits inside the
+ * `MapProvider` and can use the map's hooks). Composes the Map tool's existing
+ * `DraggableMarkers` + `useMapEvents`; it does NOT rebuild map internals.
+ *
+ * Two-way binding: every edit (drag a pin, add a pin, remove a pin) is mapped
+ * back to the node's `MapMarkerPayload[]` and committed through the
+ * `onMarkersChange` callback, which the NodeView wires to
+ * `useNodeAttrs().patch({ markers })` → the ```map JSON updates.
+ *
+ * Affordances (editable only; keyboard-reachable, semantic tokens):
+ *  - "Add pin" toggles a click-to-place mode; the next map click appends a
+ *    marker at the clicked lng/lat.
+ *  - "Remove" toggles a delete mode; a small ✕ badge appears on each pin and
+ *    clicking it drops that marker.
+ * The basemap switch is handled by `LazyMapContainer`'s own switcher (the
+ * NodeView wires `onBasemapChange`), so it isn't duplicated here.
+ */
+
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { MapPin, Plus, Trash2, X } from 'lucide-react';
+import {
+  DraggableMarkers,
+  useMapEvents,
+  type DraggablePoint,
+  type MarkerData,
+} from '../../dev/Map/lazy';
+import type { MapMarkerPayload } from '../../../common/blocks';
+
+export interface MapEditLayerProps {
+  /** Current markers (the node's committed payload). */
+  markers: MapMarkerPayload[];
+  /** Commit a new marker array back to the node (→ markdown). */
+  onMarkersChange: (next: MapMarkerPayload[]) => void;
+}
+
+/** Generate a stable-ish unique marker id. */
+function nextMarkerId(existing: MapMarkerPayload[]): string {
+  let n = existing.length + 1;
+  const ids = new Set(existing.map((m) => m.id));
+  let id = `m${n}`;
+  while (ids.has(id)) {
+    n += 1;
+    id = `m${n}`;
+  }
+  return id;
+}
+
+export function MapEditLayer({ markers, onMarkersChange }: MapEditLayerProps) {
+  // Mutually-exclusive edit modes. `null` = plain drag-only editing.
+  const [mode, setMode] = useState<'add' | 'delete' | null>(null);
+
+  // ── Map → payload: DraggablePoint {id,lng,lat} ⇄ MapMarkerPayload ──────────
+  // DraggableMarkers is controlled by `positions`; on drag-END it hands back
+  // the full updated array. We map each point back onto its source payload so
+  // labels / colours / icons / cards are PRESERVED (DraggablePoint only carries
+  // id/lng/lat/label).
+  const positions = useMemo<DraggablePoint[]>(
+    () =>
+      markers.map((m) => ({
+        id: m.id,
+        lng: m.lng,
+        lat: m.lat,
+        ...(m.label !== undefined ? { label: m.label } : {}),
+      })),
+    [markers],
+  );
+
+  const handleDragChange = useCallback(
+    (next: DraggablePoint[]) => {
+      const byId = new Map(markers.map((m) => [m.id, m]));
+      const merged: MapMarkerPayload[] = next.map((p) => {
+        const prev = byId.get(p.id);
+        // Preserve everything but the moved coordinates.
+        return prev
+          ? { ...prev, lat: p.lat, lng: p.lng }
+          : { id: p.id, lat: p.lat, lng: p.lng, ...(p.label ? { label: p.label } : {}) };
+      });
+      onMarkersChange(merged);
+    },
+    [markers, onMarkersChange],
+  );
+
+  // ── Click-to-place (add mode) ──────────────────────────────────────────────
+  useMapEvents({
+    onClick: (event) => {
+      if (mode !== 'add') return;
+      const { lng, lat } = event.lngLat;
+      const id = nextMarkerId(markers);
+      onMarkersChange([...markers, { id, lat, lng }]);
+    },
+  });
+
+  // ── Remove (delete mode): a ✕ badge per pin ────────────────────────────────
+  const removeMarker = useCallback(
+    (id: string) => {
+      onMarkersChange(markers.filter((m) => m.id !== id));
+    },
+    [markers, onMarkersChange],
+  );
+
+  // Only supplied to DraggableMarkers in delete mode (see render below), so it
+  // always renders the ✕ badge that replaces the default pin.
+  const renderMarker = useCallback(
+    (marker: MarkerData) => {
+      return (
+        <button
+          type="button"
+          aria-label={`Remove pin ${marker.id}`}
+          // Stop the click from reaching the map / starting a drag.
+          onMouseDown={(e) => e.stopPropagation()}
+          onPointerDown={(e) => e.stopPropagation()}
+          onClick={(e) => {
+            e.stopPropagation();
+            removeMarker(marker.id);
+          }}
+          className="flex h-6 w-6 items-center justify-center rounded-full border border-border bg-destructive text-destructive-foreground shadow-md transition-transform hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <X className="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      );
+    },
+    [removeMarker],
+  );
+
+  return (
+    <>
+      <DraggableMarkers
+        positions={positions}
+        onChange={handleDragChange}
+        renderMarker={mode === 'delete' ? renderMarker : undefined}
+      />
+
+      {/* Edit control overlay — top-left so it clears the map toolbar chips. */}
+      <div className="pointer-events-none absolute left-2 top-2 z-10 flex flex-col gap-1">
+        <div className="pointer-events-auto flex gap-1 rounded-lg border border-border bg-card/95 p-1 shadow-md backdrop-blur">
+          <ControlButton
+            active={mode === 'add'}
+            label="Add pin"
+            onClick={() => setMode((m) => (m === 'add' ? null : 'add'))}
+          >
+            <Plus className="h-3.5 w-3.5" aria-hidden="true" />
+            <span>Add pin</span>
+          </ControlButton>
+          <ControlButton
+            active={mode === 'delete'}
+            label="Remove pins"
+            disabled={markers.length === 0}
+            onClick={() => setMode((m) => (m === 'delete' ? null : 'delete'))}
+          >
+            <Trash2 className="h-3.5 w-3.5" aria-hidden="true" />
+            <span>Remove</span>
+          </ControlButton>
+        </div>
+        {mode ? (
+          <div className="pointer-events-none flex items-center gap-1.5 self-start rounded-md border border-border bg-card/95 px-2 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur">
+            <MapPin className="h-3 w-3" aria-hidden="true" />
+            {mode === 'add' ? 'Click the map to place a pin' : 'Click a ✕ to remove a pin'}
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+function ControlButton({
+  active,
+  disabled,
+  label,
+  onClick,
+  children,
+}: {
+  active: boolean;
+  disabled?: boolean;
+  label: string;
+  onClick: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      aria-pressed={active}
+      disabled={disabled}
+      onClick={onClick}
+      className={
+        'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 ' +
+        (active
+          ? 'bg-primary text-primary-foreground'
+          : 'text-foreground hover:bg-muted')
+      }
+    >
+      {children}
+    </button>
+  );
+}

package/src/tools/forms/NotionEditor/MapNode.ts

@@ -0,0 +1,218 @@
+/**
+ * `MapNode` — a NotionEditor block ATOM node that renders an interactive map
+ * (`LazyMapContainer`) from a serializable `MapBlockPayload` held in the
+ * node's attrs. Inserted via the slash menu (`/map`) — NOT auto from paste,
+ * since a map has no natural paste trigger.
+ *
+ * Markdown round-trip (a fenced ```` ```map ```` JSON block):
+ *
+ *   `renderMarkdown` emits a fenced code block tagged `map` whose body is the
+ *   pretty-printed payload JSON. A custom block `markdownTokenizer` recognises
+ *   that exact fence on parse and emits a `mapBlock` token (its OWN token
+ *   type — it never collides with the `code` token the lowlight code block
+ *   owns). `parseMarkdown` then turns the token back into the node with its
+ *   attrs. So `getMarkdown()` ⇄ `setContent()` round-trips losslessly while
+ *   staying human-readable in the markdown.
+ *
+ * Attrs are the flattened `MapBlockPayload` fields (`center`/`zoom`/`basemap`/
+ * `terrain`/`markers`) — plain JSON, so they serialise to TipTap node attrs
+ * and the fenced JSON cleanly.
+ */
+
+import { Node, mergeAttributes } from '@tiptap/core';
+import type { MarkdownToken, MarkdownParseHelpers } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import type { MapBlockPayload } from '../../../common/blocks';
+import { MapBlockPayloadSchema } from '../../../common/blocks';
+import { MapView } from './MapView';
+
+export interface MapNodeOptions {
+  HTMLAttributes: Record<string, unknown>;
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    mapBlock: {
+      /** Insert a map block from a payload (markers / center / zoom). */
+      setMapBlock: (payload: MapBlockPayload) => ReturnType;
+    };
+  }
+}
+
+/** A sensible default payload so `/map` shows a live map immediately. */
+export const DEFAULT_MAP_PAYLOAD: MapBlockPayload = {
+  center: { lat: 48.8584, lng: 2.2945 },
+  zoom: 13,
+  markers: [{ id: 'm1', lat: 48.8584, lng: 2.2945, label: 'Eiffel Tower' }],
+};
+
+/** Pull the flattened payload off a node's attrs. */
+function payloadFromAttrs(attrs: Record<string, unknown>): MapBlockPayload {
+  return {
+    center: (attrs.center as MapBlockPayload['center']) ?? DEFAULT_MAP_PAYLOAD.center,
+    zoom: attrs.zoom as number | undefined,
+    basemap: attrs.basemap as string | undefined,
+    terrain: attrs.terrain as boolean | undefined,
+    markers: (attrs.markers as MapBlockPayload['markers']) ?? [],
+  };
+}
+
+/** Drop undefined fields so the serialised JSON stays tidy. */
+function compactPayload(payload: MapBlockPayload): MapBlockPayload {
+  const out: MapBlockPayload = { center: payload.center };
+  if (payload.zoom !== undefined) out.zoom = payload.zoom;
+  if (payload.basemap !== undefined) out.basemap = payload.basemap;
+  if (payload.terrain !== undefined) out.terrain = payload.terrain;
+  if (payload.markers && payload.markers.length) out.markers = payload.markers;
+  if (payload.routes && payload.routes.length) out.routes = payload.routes;
+  if (payload.polygons && payload.polygons.length) out.polygons = payload.polygons;
+  return out;
+}
+
+// Matches a fenced ```map … ``` block at the START of the source. Captures the
+// JSON body (group 1). Tolerates trailing whitespace + the optional closing
+// newline before the fence.
+const MAP_FENCE_RE = /^```map[ \t]*\r?\n([\s\S]*?)\r?\n?```[ \t]*(?:\r?\n|$)/;
+
+export const MapNode = Node.create<MapNodeOptions>({
+  name: 'mapBlock',
+  group: 'block',
+  atom: true,
+  draggable: true,
+  selectable: true,
+
+  addOptions() {
+    return { HTMLAttributes: {} };
+  },
+
+  addAttributes() {
+    return {
+      center: {
+        default: DEFAULT_MAP_PAYLOAD.center,
+        parseHTML: (el) => safeJson(el.getAttribute('data-center')) ?? DEFAULT_MAP_PAYLOAD.center,
+        renderHTML: (attrs) => ({ 'data-center': JSON.stringify(attrs.center) }),
+      },
+      zoom: {
+        default: DEFAULT_MAP_PAYLOAD.zoom,
+        parseHTML: (el) => numAttr(el.getAttribute('data-zoom')),
+        renderHTML: (attrs) => (attrs.zoom != null ? { 'data-zoom': String(attrs.zoom) } : {}),
+      },
+      basemap: {
+        default: undefined,
+        parseHTML: (el) => el.getAttribute('data-basemap') ?? undefined,
+        renderHTML: (attrs) => (attrs.basemap ? { 'data-basemap': attrs.basemap as string } : {}),
+      },
+      terrain: {
+        default: undefined,
+        parseHTML: (el) => el.getAttribute('data-terrain') === 'true' || undefined,
+        renderHTML: (attrs) => (attrs.terrain ? { 'data-terrain': 'true' } : {}),
+      },
+      markers: {
+        default: [],
+        parseHTML: (el) => safeJson(el.getAttribute('data-markers')) ?? [],
+        renderHTML: (attrs) =>
+          attrs.markers ? { 'data-markers': JSON.stringify(attrs.markers) } : {},
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-type="mapBlock"]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'div',
+      mergeAttributes({ 'data-type': 'mapBlock' }, this.options.HTMLAttributes, HTMLAttributes),
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(MapView);
+  },
+
+  addCommands() {
+    return {
+      setMapBlock:
+        (payload: MapBlockPayload) =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name, attrs: { ...payload } }),
+    };
+  },
+
+  // ── Markdown round-trip ────────────────────────────────────────────────
+  // Own token type — never collides with the lowlight `code` token.
+  markdownTokenName: 'mapBlock',
+
+  markdownTokenizer: {
+    name: 'mapBlock',
+    level: 'block',
+    start: (src: string) => {
+      const idx = src.indexOf('```map');
+      return idx;
+    },
+    tokenize: (src: string) => {
+      const match = MAP_FENCE_RE.exec(src);
+      if (!match) return undefined;
+      return {
+        type: 'mapBlock',
+        raw: match[0],
+        text: match[1] ?? '',
+      };
+    },
+  },
+
+  parseMarkdown(token: MarkdownToken, helpers: MarkdownParseHelpers) {
+    // Never throw during parse. Three cases:
+    //  1. Empty/whitespace body → a default map (a bare ```map``` fence).
+    //  2. Valid JSON matching the schema → the parsed payload (compacted).
+    //  3. Malformed JSON or a payload that fails the schema → pass the raw
+    //     parsed value straight through as attrs so the NodeView's own schema
+    //     check renders `<BlockError>` (a visible, non-crashing error block)
+    //     rather than silently masquerading as the default map. If JSON.parse
+    //     itself fails we keep an obviously-invalid sentinel so the same path
+    //     surfaces the error.
+    const text = (token.text ?? '').trim();
+    if (!text) return helpers.createNode('mapBlock', { ...DEFAULT_MAP_PAYLOAD });
+
+    const raw = safeJson(token.text);
+    const result = MapBlockPayloadSchema.safeParse(raw);
+    if (result.success) {
+      return helpers.createNode('mapBlock', { ...compactPayload(result.data) });
+    }
+    // Invalid: surface the broken payload as attrs (a plain object so it
+    // serialises). `center` must be PRESENT-but-invalid — if it were
+    // `undefined`/absent TipTap would substitute the attr default and the
+    // NodeView schema would wrongly pass. When the broken payload has no
+    // usable center we inject an explicit invalid marker object so the
+    // NodeView's `safeParse` fails and renders `<BlockError>`.
+    const broken = raw && typeof raw === 'object' ? (raw as Record<string, unknown>) : {};
+    const center =
+      broken.center !== undefined ? broken.center : { __invalid: true };
+    return helpers.createNode('mapBlock', { ...broken, center });
+  },
+
+  renderMarkdown(node: { attrs: Record<string, unknown> }) {
+    const payload = compactPayload(payloadFromAttrs(node.attrs));
+    return '```map\n' + JSON.stringify(payload, null, 2) + '\n```';
+  },
+});
+
+/** Parse a JSON string, returning null on any failure (never throws). */
+function safeJson(value: string | null | undefined): unknown {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+/** Parse a numeric attribute, or undefined. */
+function numAttr(value: string | null): number | undefined {
+  if (value == null) return undefined;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : undefined;
+}
+
+export default MapNode;

package/src/tools/forms/NotionEditor/MapView.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+/**
+ * React NodeView for the NotionEditor `mapBlock` node. A wrapper around
+ * `LazyMapContainer` (mirrors the chat `MapBlock` renderer) seeded from the
+ * node's serializable `MapBlockPayload` attrs: viewport from `center`/`zoom`,
+ * markers via `MapMarker`. The heavy MapLibre bundle only loads when the node
+ * actually mounts (the lazy container handles that).
+ *
+ * INTERACTIVE when the editor is editable: markers render through the Map
+ * tool's `DraggableMarkers` inside `<MapEditLayer>` and every edit (drag a pin,
+ * add / remove a pin, switch basemap) is written back into the node attrs via
+ * `useNodeAttrs().patch(...)`, so the change survives the ```map markdown
+ * round-trip. READ-ONLY editors keep static, non-draggable pins.
+ *
+ * Payloads are validated through `MapBlockPayloadSchema` first — a corrupted
+ * ```map JSON renders a safe `<BlockError>` card instead of throwing.
+ */
+
+import { useCallback } from 'react';
+import { NodeViewWrapper, type NodeViewProps } from '@tiptap/react';
+import { LazyMapContainer, MapMarker } from '../../dev/Map/lazy';
+import type { MarkerData, MapStyleKey } from '../../dev/Map/lazy';
+import type { MapContainerProps } from '../../dev/Map/components';
+import { BlockError, MapBlockPayloadSchema, safeParseBlock } from '../../../common/blocks';
+import type { MapMarkerPayload } from '../../../common/blocks';
+import { useNodeAttrs } from '../../../common/tiptap';
+import { MapEditLayer } from './MapEditLayer';
+
+export function MapView(props: NodeViewProps) {
+  const { node, editor } = props;
+  const editable = editor.isEditable;
+
+  // Single write-back seam: discrete edits (drag-end, add/remove pin, basemap)
+  // commit immediately — they don't fire per-frame, so no debounce needed.
+  const { patch } = useNodeAttrs<Record<string, unknown>>(props);
+
+  const onMarkersChange = useCallback(
+    (markers: MapMarkerPayload[]) => patch({ markers }),
+    [patch],
+  );
+  const onBasemapChange = useCallback(
+    (key: MapStyleKey) => patch({ basemap: key }),
+    [patch],
+  );
+
+  // Validate the node's attrs through the shared schema BEFORE touching the
+  // map — a hand-authored / corrupted ```map JSON renders a safe `<BlockError>`
+  // card instead of throwing inside MapLibre and taking down the editor.
+  const parsed = safeParseBlock(MapBlockPayloadSchema, node.attrs);
+  if (!parsed.ok) {
+    return (
+      <NodeViewWrapper data-type="mapBlock" className="notion-map" draggable={false}>
+        <BlockError label="map" reason={parsed.error} />
+      </NodeViewWrapper>
+    );
+  }
+
+  const payload = parsed.data;
+  const markers = payload.markers ?? [];
+
+  const initialViewport = {
+    longitude: payload.center.lng,
+    latitude: payload.center.lat,
+    zoom: payload.zoom ?? 11,
+  };
+
+  // Build optional map props as ONE typed literal (same TS2769-avoidance
+  // reasoning as the chat MapBlock renderer) before spreading. The basemap
+  // switcher write-back is only wired when the editor is editable.
+  const mapOptions: Partial<MapContainerProps> = {
+    ...(payload.basemap ? { mapStyle: payload.basemap } : {}),
+    ...(payload.terrain ? { terrain: true } : {}),
+    ...(editable ? { onBasemapChange } : {}),
+  };
+
+  return (
+    <NodeViewWrapper data-type="mapBlock" className="notion-map" draggable={false}>
+      <div className="w-full overflow-hidden rounded-2xl border border-border" style={{ height: 360 }}>
+        <LazyMapContainer initialViewport={initialViewport} fullscreenTitle="Map" {...mapOptions}>
+          {editable ? (
+            // Interactive: draggable pins + add/remove affordances, all writing
+            // back through `onMarkersChange` → `patch({ markers })`.
+            <MapEditLayer markers={markers} onMarkersChange={onMarkersChange} />
+          ) : (
+            // Read-only: static, non-draggable pins (original behaviour).
+            markers.map((m) => {
+              const marker: MarkerData = {
+                id: m.id,
+                longitude: m.lng,
+                latitude: m.lat,
+                data: m.label ? { label: m.label } : undefined,
+              };
+              return (
+                <MapMarker key={m.id} marker={marker} color={m.color} ariaLabel={m.label} />
+              );
+            })
+          )}
+        </LazyMapContainer>
+      </div>
+    </NodeViewWrapper>
+  );
+}

package/src/tools/forms/NotionEditor/NotionEditor.tsx

@@ -66,6 +66,7 @@ export const NotionEditor = forwardRef<NotionEditorHandle, NotionEditorProps>(
       onSave,
       className = '',
       minHeight = 320,
+      resolveLinkPreview,
     },
     ref,
   ) {
@@ -74,8 +75,12 @@ export const NotionEditor = forwardRef<NotionEditorHandle, NotionEditorProps>(
 
     // Build extensions once. Placeholder is captured by closure on first
     // render — same constraint as MarkdownEditor; mentions / slash items
-    // don't change at runtime here.
-    const extensions = useMemo(() => notionExtensions({ placeholder }), [placeholder]);
+    // don't change at runtime here. The link-preview resolver is likewise
+    // captured on first build; pass a stable reference (it's a host method).
+    const extensions = useMemo(
+      () => notionExtensions({ placeholder, resolveLinkPreview }),
+      [placeholder, resolveLinkPreview],
+    );
 
     const editor = useEditor({
       immediatelyRender: false,