@agent-native/core 0.120.3 → 0.121.0

package/corpus/templates/slides/app/components/editor/SlideEditor.tsx

@@ -18,6 +18,7 @@ import {
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import {
   IconAlertTriangle,
+  IconArrowsMove,
   IconMaximize,
   IconZoomIn,
   IconZoomOut,
@@ -35,6 +36,13 @@ import { createPortal } from "react-dom";
 import { ExcalidrawSlide } from "@/components/deck/ExcalidrawSlide";
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
+import {
+  convertMarkdownPrefixToBullet,
+  findEnclosingList,
+  insertBulletAfterCaret,
+  isBulletList,
+  ZERO_WIDTH_SPACE,
+} from "@/components/editor/bullet-editing";
 import { Button } from "@/components/ui/button";
 import {
   Tooltip,
@@ -120,6 +128,9 @@ const RICH_BLOCK_TAGS = new Set(["P", "DIV", "BLOCKQUOTE", "LI", "UL", "OL"]);
 function isTextLeaf(el: HTMLElement): boolean {
   if (!el || el.tagName === "IMG") return false;
   if (el.classList.contains("fmd-img-placeholder")) return false;
+  // A user-placed text box stays editable even after its content is fully
+  // deleted, so an emptied box does not degrade into an unrecognized shape.
+  if (el.classList.contains("fmd-text-box")) return true;
   // Must contain some text
   if (!el.textContent?.trim()) return false;
   for (const child of Array.from(el.children)) {
@@ -172,7 +183,14 @@ function findSmartBlock(
 ): HTMLElement | null {
   let el: HTMLElement | null = target;
   while (el && root.contains(el)) {
-    if (isTextLeaf(el)) return el;
+    if (isTextLeaf(el)) {
+      // A list item (native <li> or a styled bullet row) must be edited
+      // together with its siblings so Enter can add a new item — editing a
+      // single item in isolation traps Enter inside that one row.
+      const list = findEnclosingList(el, root);
+      if (list) return list;
+      return el;
+    }
     // The click landed on a container (e.g. a flex wrapper around stat
     // rows). If that container is a smart group, use IT as the block so
     // the user gets multi-chunk editing of everything inside.
@@ -200,13 +218,41 @@ function stripBuilderIds(html: string): string {
       }
       parent.removeChild(wrapper);
     }
-    cleaned =
-      doc.querySelector("[data-strip-root]")?.innerHTML ?? doc.body.innerHTML;
+    const stripRoot = doc.querySelector("[data-strip-root]");
+    if (stripRoot) stripPlaceholderZws(stripRoot);
+    cleaned = stripRoot?.innerHTML ?? doc.body.innerHTML;
   }
 
   return cleaned.replace(/\s*data-builder-id="[^"]*"/g, "");
 }
 
+/**
+ * Remove zero-width-space characters used only as caret placeholders, while
+ * preserving a lone ZWS that is the sole content of an element — that ZWS keeps
+ * an empty bullet's text span from collapsing, so it retains its font. Stripping
+ * every ZWS (as a blanket regex did) drops that anchor and makes the next typed
+ * character fall back to the container's base font.
+ */
+function stripPlaceholderZws(root: Element): void {
+  const walker = root.ownerDocument.createTreeWalker(
+    root,
+    NodeFilter.SHOW_TEXT,
+  );
+  const textNodes: Text[] = [];
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    textNodes.push(node as Text);
+  }
+  for (const textNode of textNodes) {
+    if (!textNode.data.includes(ZERO_WIDTH_SPACE)) continue;
+    const withoutZws = textNode.data.replaceAll(ZERO_WIDTH_SPACE, "");
+    if (withoutZws.length > 0) {
+      textNode.data = withoutZws;
+    } else if (textNode.parentNode?.childNodes.length !== 1) {
+      textNode.remove();
+    }
+  }
+}
+
 function cssPx(value: string): number {
   const parsed = Number.parseFloat(value);
   return Number.isFinite(parsed) ? parsed : 0;
@@ -288,7 +334,9 @@ function buildStyleSnapshot(
     label: element.getAttribute("aria-label") || element.tagName.toLowerCase(),
     tagName: element.tagName.toLowerCase(),
     textPreview,
-    isText: element.tagName !== "IMG" && !!textPreview,
+    isText:
+      element.tagName !== "IMG" &&
+      (!!textPreview || element.classList.contains("fmd-text-box")),
     isImage: element.tagName === "IMG",
     color: normalizedColor(computed.color),
     backgroundColor: normalizedColor(computed.backgroundColor),
@@ -394,6 +442,11 @@ interface SlideEditorProps {
   pinMode?: boolean;
   /** Called when pin mode should exit */
   onExitPinMode?: () => void;
+  /** Whether the "add text box" tool is active — the next click on the slide
+   *  places a new text box there instead of selecting/marquee-selecting */
+  textBoxMode?: boolean;
+  /** Called after a text box is placed (or the tool should otherwise exit) */
+  onExitTextBoxMode?: () => void;
   /** Slide id for pin mode contextId — falls back to slide.id if omitted */
   slideId?: string;
   /** Slide title for pin mode contextLabel */
@@ -553,10 +606,13 @@ function ImageSelectionOutline({
 function ElementSelectionOutline({
   rect,
   viewportRect,
+  onDragStart,
 }: {
   rect: DOMRect;
   viewportRect: DOMRect | null;
+  onDragStart?: (e: React.PointerEvent) => void;
 }) {
+  const t = useT();
   const pad = 2;
   const handle = 7;
   const handleClass =
@@ -592,6 +648,23 @@ function ElementSelectionOutline({
           className={handleClass}
           style={{ right: -handle / 2, bottom: -handle / 2 }}
         />
+        {onDragStart && (
+          <span
+            onPointerDown={onDragStart}
+            title={t("raw.dragToMove")}
+            className="absolute flex items-center justify-center rounded-full border border-background bg-[#609FF8] shadow-sm cursor-move"
+            style={{
+              left: "50%",
+              top: -22,
+              width: 16,
+              height: 16,
+              transform: "translateX(-50%)",
+              pointerEvents: "auto",
+            }}
+          >
+            <IconArrowsMove className="size-2.5 text-background" />
+          </span>
+        )}
       </div>
     </SelectionOverlayPortal>
   );
@@ -737,6 +810,8 @@ export default function SlideEditor({
   onExitDrawMode,
   pinMode,
   onExitPinMode,
+  textBoxMode,
+  onExitTextBoxMode,
   slideId,
   slideTitle,
   deckId,
@@ -1013,6 +1088,10 @@ export default function SlideEditor({
   }, [overflowInfo, slide.id, dims.width, dims.height]);
   /** Marquee origin (viewport coords). Set on pointerdown. */
   const marqueeOriginRef = useRef<{ x: number; y: number } | null>(null);
+  /** Set right before placing a text box so the click event that follows the
+   *  placing pointerdown doesn't fall through to click-to-select/deselect
+   *  logic and steal focus back off the freshly created box. */
+  const suppressNextClickRef = useRef(false);
   /**
    * If the user pressed shift/cmd before starting a marquee, additive mode
    * preserves the existing selection on pointerup.
@@ -1203,7 +1282,14 @@ export default function SlideEditor({
   useEffect(() => {
     if (!editingEl) return;
     const editingSlideId = slide.id;
-    const handleInput = () => captureInlineEditDraft(editingSlideId);
+    const handleInput = () => {
+      // Markdown-style "- "/"* " at the start of a plain text block converts
+      // it into a styled bullet row, so it's recognized as a list and Enter
+      // can extend it — contentEditable has no native concept of these
+      // styled (non-<ul>) bullet lists.
+      convertMarkdownPrefixToBullet(editingEl);
+      captureInlineEditDraft(editingSlideId);
+    };
     editingEl.addEventListener("input", handleInput);
     return () => editingEl.removeEventListener("input", handleInput);
   }, [captureInlineEditDraft, editingEl, slide.id]);
@@ -1218,8 +1304,21 @@ export default function SlideEditor({
     // intent (rich-block edit vs single-line commit) doesn't change while
     // they're editing the same node, so latch it.
     const isMultiLineLeaf =
-      isTextLeaf(editingEl) && RICH_BLOCK_TAGS.has(editingEl.tagName);
+      (isTextLeaf(editingEl) && RICH_BLOCK_TAGS.has(editingEl.tagName)) ||
+      isBulletList(editingEl);
     const onKey = (e: KeyboardEvent) => {
+      // Ignore keys from outside the slide (e.g. the style dock's font-size
+      // input). Guard against the LIVE slide content, not `editingEl`, which a
+      // re-render may have detached — a stale ref would wrongly bail here and
+      // let native Enter run.
+      const slideContent = getSlideContent();
+      if (
+        e.target instanceof Node &&
+        slideContent &&
+        !slideContent.contains(e.target)
+      ) {
+        return;
+      }
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
@@ -1229,12 +1328,34 @@ export default function SlideEditor({
       if (e.key === "Enter") {
         // Smart Enter:
         //  - Shift+Enter always inserts a <br>.
+        //  - Inside a styled bullet list, Enter clones the current row so a
+        //    new bullet (marker + empty text) appears — contentEditable's
+        //    native split can't recreate the marker glyph.
         //  - A single <p> or <div> leaf is multi-line capable — Enter
         //    creates a new line via contentEditable's default behavior.
         //  - Headings, inline leaves, and smart groups commit on Enter
         //    so the slide layout can never be broken by a stray new node.
         if (e.shiftKey) return;
 
+        // Re-derive the list from the LIVE caret so a re-render that swapped
+        // the edited node can't drop us into native Enter.
+        const sel = window.getSelection();
+        const anchor = sel?.anchorNode ?? null;
+        const anchorEl = anchor
+          ? anchor.nodeType === Node.TEXT_NODE
+            ? anchor.parentElement
+            : (anchor as HTMLElement)
+          : null;
+        const liveList =
+          anchorEl && slideContent && slideContent.contains(anchorEl)
+            ? findEnclosingList(anchorEl, slideContent)
+            : null;
+        if (liveList && insertBulletAfterCaret(liveList)) {
+          e.preventDefault();
+          captureInlineEditDraft(slide.id);
+          return;
+        }
+
         if (!isMultiLineLeaf) {
           e.preventDefault();
           exitInlineEdit();
@@ -1243,7 +1364,13 @@ export default function SlideEditor({
     };
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
-  }, [exitInlineEdit, editingEl]);
+  }, [
+    exitInlineEdit,
+    editingEl,
+    captureInlineEditDraft,
+    slide.id,
+    getSlideContent,
+  ]);
 
   // Click-outside: exit inline edit mode
   useEffect(() => {
@@ -1493,6 +1620,52 @@ export default function SlideEditor({
     return () => window.removeEventListener("keydown", onKey);
   }, [multiSelection.size, editingEl, clearMultiSelection]);
 
+  // Delete/Backspace removes the selected shape/text box (single or
+  // multi-select) from the slide. Only active when something is selected for
+  // styling (not while inline-editing text, where Backspace should delete a
+  // character) and not while the browser focus is in an unrelated input.
+  useEffect(() => {
+    if (editingEl) return;
+    if (multiSelection.size === 0 && !selectedElementSelector) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Delete" && e.key !== "Backspace") return;
+      const active = document.activeElement;
+      const tag = active?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      if (active instanceof HTMLElement && active.isContentEditable) return;
+
+      const slideContent = getSlideContent();
+      if (!slideContent) return;
+      e.preventDefault();
+
+      if (multiSelection.size > 0) {
+        for (const id of multiSelection) {
+          slideContent.querySelector(`[data-builder-id="${id}"]`)?.remove();
+        }
+        clearMultiSelection();
+      } else {
+        resolveSelectedElement()?.remove();
+        clearSelectedElement();
+      }
+
+      const html = readCurrentSlideContentHtml();
+      if (html !== null) onUpdateSlideRef.current({ content: html });
+      syncSelectionToAppState(null);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [
+    editingEl,
+    multiSelection,
+    selectedElementSelector,
+    getSlideContent,
+    clearMultiSelection,
+    resolveSelectedElement,
+    clearSelectedElement,
+    readCurrentSlideContentHtml,
+    syncSelectionToAppState,
+  ]);
+
   /**
    * Find the nearest meaningful "element" for multi-select from a click target.
    * Walks up to the closest [data-builder-id] inside the slide content. Skips
@@ -1537,16 +1710,95 @@ export default function SlideEditor({
     [],
   );
 
+  const placeTextBoxAt = useCallback(
+    (clientX: number, clientY: number) => {
+      const fmdSlide = containerRef.current?.querySelector(
+        ".fmd-slide",
+      ) as HTMLElement | null;
+      if (!fmdSlide) return;
+      // .fmd-slide is often visually scaled (canvas zoom, and the autofit
+      // system that shrinks overflowing slides to fit) via a CSS transform.
+      // A transform doesn't change the element's own layout coordinate
+      // space, so a pixel offset computed from its on-screen rect would be
+      // scaled a second time once applied to a child. Percentages resolve
+      // against that untransformed layout box, so they land at the actual
+      // click point regardless of the current scale.
+      const rect = fmdSlide.getBoundingClientRect();
+      const xPct =
+        rect.width > 0
+          ? Math.min(
+              100,
+              Math.max(0, ((clientX - rect.left) / rect.width) * 100),
+            )
+          : 0;
+      const yPct =
+        rect.height > 0
+          ? Math.min(
+              100,
+              Math.max(0, ((clientY - rect.top) / rect.height) * 100),
+            )
+          : 0;
+
+      if (getComputedStyle(fmdSlide).position === "static") {
+        fmdSlide.style.position = "relative";
+      }
+
+      const box = document.createElement("div");
+      box.className = "fmd-text-box";
+      box.style.position = "absolute";
+      box.style.left = `${xPct}%`;
+      box.style.top = `${yPct}%`;
+      box.style.width = "320px";
+      box.style.fontSize = "24px";
+      box.style.color = "#fff";
+      box.style.fontFamily = "'Poppins', sans-serif";
+      box.style.lineHeight = "1.3";
+      box.textContent = ZERO_WIDTH_SPACE;
+      fmdSlide.appendChild(box);
+
+      enterInlineEdit(box);
+
+      // el.focus() alone doesn't reliably place the caret inside a freshly
+      // created contentEditable node across browsers — set it explicitly on
+      // the placeholder text so typing lands immediately.
+      const textNode = box.firstChild;
+      if (textNode) {
+        const range = document.createRange();
+        range.setStart(textNode, textNode.textContent?.length ?? 0);
+        range.collapse(true);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    },
+    [enterInlineEdit],
+  );
+
   // --- Marquee drag handlers (attached to slide-content via React props) ---
 
   const handleSlidePointerDown = useCallback(
     (e: React.PointerEvent) => {
-      if (editingEl) return; // don't interfere with inline edit
       if (e.button !== 0) return; // left click only
       const slideContent = getSlideContent();
       if (!slideContent) return;
       const target = e.target as HTMLElement;
 
+      if (textBoxMode && isHtmlSlide) {
+        // Unlike the marquee/select flow below, the text-box tool places a
+        // box on the very next click no matter what it lands on (mirroring
+        // Google Slides / PowerPoint). Gating this on "whitespace" left the
+        // tool silently stuck on when a click landed on existing text —
+        // editing that text worked, but the tool state never cleared, so an
+        // unrelated later click would unexpectedly drop a new box.
+        e.preventDefault();
+        if (editingEl) exitInlineEdit();
+        suppressNextClickRef.current = true;
+        placeTextBoxAt(e.clientX, e.clientY);
+        onExitTextBoxMode?.();
+        return;
+      }
+      if (editingEl) return; // avoid interfering with an active inline edit
+
       // Only start a marquee from "whitespace" inside the slide. Clicks on
       // an actual element fall through to handleSlideClick (which handles
       // shift/cmd-click toggle below).
@@ -1575,6 +1827,11 @@ export default function SlideEditor({
       multiSelection,
       applyMultiSelection,
       clearSelectedElement,
+      textBoxMode,
+      isHtmlSlide,
+      exitInlineEdit,
+      placeTextBoxAt,
+      onExitTextBoxMode,
     ],
   );
 
@@ -1713,6 +1970,11 @@ export default function SlideEditor({
 
   const handleSlideClick = useCallback(
     (e: React.MouseEvent) => {
+      if (suppressNextClickRef.current) {
+        suppressNextClickRef.current = false;
+        return;
+      }
+
       // If currently editing a block, clicks inside it are for the caret —
       // don't select/style-edit.
       if (editingEl?.contains(e.target as Node)) return;
@@ -1750,7 +2012,27 @@ export default function SlideEditor({
 
       showImageOverlay(target);
 
-      // Send style-editing postMessage with a unique selector for the clicked element
+      // For editable text, a single click edits the whole smart block (a text
+      // leaf, or an entire bullet list) — not the individual line — so typing,
+      // highlighting, shortcuts, and Enter-to-add-bullet all work, and the
+      // style dock targets the same block being edited.
+      if (!readOnly && isHtmlSlide && slideContent) {
+        const block = findSmartBlock(target, slideContent);
+        if (block) {
+          const blockSelector = getBuilderSelector(block);
+          if (blockSelector) {
+            selectElementForStyling(block, blockSelector);
+            enterSelectionMode("agentNative.enterStyleEditing", {
+              selector: blockSelector,
+            });
+          }
+          enterInlineEdit(block);
+          return;
+        }
+      }
+
+      // Non-text elements (images, shapes, …): select the clicked element for
+      // styling.
       const selectableEl = slideContent
         ? findSelectableElement(target, slideContent)
         : null;
@@ -1772,6 +2054,9 @@ export default function SlideEditor({
       clearMultiSelection,
       clearSelectedElement,
       selectElementForStyling,
+      readOnly,
+      isHtmlSlide,
+      enterInlineEdit,
     ],
   );
 
@@ -1837,6 +2122,63 @@ export default function SlideEditor({
     ],
   );
 
+  /**
+   * Drag-to-reposition for the selected element. Only elements that are (or
+   * can safely become) absolutely positioned support this — repositioning an
+   * in-flow element would shift the rest of the slide's layout. Percentages
+   * (not px) are used for left/top so the drag stays accurate under canvas
+   * zoom and the autofit scale transform, matching placeTextBoxAt.
+   */
+  const startElementDrag = useCallback(
+    (e: React.PointerEvent) => {
+      const element = resolveSelectedElement();
+      if (!element) return;
+      const fmdSlide = element.closest(".fmd-slide") as HTMLElement | null;
+      if (!fmdSlide) return;
+      // left/top only place an element at an absolute coordinate for
+      // position: absolute (or fixed). For position: relative they're an
+      // *offset* from the element's normal flow position instead, so
+      // treating a relative element as draggable here would make it jump by
+      // the wrong amount. Restrict dragging to elements already out of flow.
+      if (getComputedStyle(element).position !== "absolute") return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const slideRect = fmdSlide.getBoundingClientRect();
+      const elRect = element.getBoundingClientRect();
+      const startXPct =
+        ((elRect.left - slideRect.left) / slideRect.width) * 100;
+      const startYPct = ((elRect.top - slideRect.top) / slideRect.height) * 100;
+      const startClientX = e.clientX;
+      const startClientY = e.clientY;
+      let moved = false;
+
+      const onMove = (moveEvent: PointerEvent) => {
+        moved = true;
+        const dxPct =
+          ((moveEvent.clientX - startClientX) / slideRect.width) * 100;
+        const dyPct =
+          ((moveEvent.clientY - startClientY) / slideRect.height) * 100;
+        element.style.left = `${startXPct + dxPct}%`;
+        element.style.top = `${startYPct + dyPct}%`;
+        setSelectedElementRect(element.getBoundingClientRect());
+      };
+
+      const onUp = () => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        if (!moved) return;
+        const html = readCurrentSlideContentHtml();
+        if (html !== null) onUpdateSlideRef.current({ content: html });
+      };
+
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [resolveSelectedElement, readCurrentSlideContentHtml],
+  );
+
   // --- Pending visual updates ---
   const [pendingUpdateCount, setPendingUpdateCount] = useState(0);
 
@@ -1891,6 +2233,17 @@ export default function SlideEditor({
   const slideElementSelected =
     !!selectedImg || !!editingEl || !!selectedStyleSnapshot;
 
+  // Dragging is only offered for elements with position: absolute — our own
+  // placed text boxes, and any similarly-positioned shape. left/top on a
+  // position: relative element is an offset from its normal flow position
+  // rather than an absolute coordinate, so treating "not static" as
+  // draggable would move relative-positioned elements by the wrong amount.
+  const selectedForDrag =
+    selectedElementRect && !editingEl ? resolveSelectedElement() : null;
+  const isSelectedElementDraggable = selectedForDrag
+    ? getComputedStyle(selectedForDrag).position === "absolute"
+    : false;
+
   return (
     <div
       className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"
@@ -2098,6 +2451,9 @@ export default function SlideEditor({
         <ElementSelectionOutline
           rect={selectedElementRect}
           viewportRect={selectionViewportRect}
+          onDragStart={
+            isSelectedElementDraggable ? startElementDrag : undefined
+          }
         />
       )}