@agent-native/core 0.77.10 → 0.77.12

package/corpus/templates/content/app/components/editor/SlashCommandMenu.tsx

@@ -1,4 +1,5 @@
 import { useSendToAgentChat, useT } from "@agent-native/core/client";
+import { collapseExactRepeatedNfm, docToNfm } from "@shared/nfm";
 import {
   IconTypography,
   IconH1,
@@ -44,6 +45,8 @@ import { buildRegistrySlashItems } from "./registrySlashItems";
 interface SlashCommandMenuProps {
   editor: Editor;
   documentId?: string;
+  onDraftCommitted?: () => void | Promise<void>;
+  onDraftPersisted?: (markdown: string) => boolean | Promise<boolean>;
   /**
    * The open document's linked Notion page id, when it has one. When set, the
    * registry-derived block slash items are filtered to specs that round-trip to
@@ -65,7 +68,35 @@ interface CommandItem {
   searchText?: string;
   shortcut?: string;
   icon: React.ElementType;
-  action: (editor: Editor) => void | boolean | Promise<void>;
+  preserveSlashRange?: boolean;
+  action: (
+    editor: Editor,
+    context: { slashRange: { from: number; to: number } | null },
+  ) => void | boolean | Promise<void>;
+}
+
+function getActiveSlashCommandRange(editor: Editor) {
+  const { state } = editor;
+  if (!state.selection.empty) return null;
+  const { from, $from } = state.selection;
+  if (!$from.parent.isTextblock) return null;
+
+  const blockStart = $from.start();
+  const textBefore = state.doc.textBetween(blockStart, from, "\n");
+  const slashQuery = parseSlashCommandQuery(textBefore);
+  if (slashQuery === null) return null;
+
+  const slashIndex = textBefore.lastIndexOf("/");
+  return {
+    from: blockStart + slashIndex,
+    to: from,
+  };
+}
+
+function waitForEditorUpdateFrame() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+  });
 }
 
 interface CommandTemplate extends Omit<CommandItem, "title" | "description"> {
@@ -369,11 +400,13 @@ export function SlashCommandMenu({
   editor,
   documentId,
   notionPageId,
+  onDraftCommitted,
+  onDraftPersisted,
 }: SlashCommandMenuProps) {
   const t = useT();
   const { send } = useSendToAgentChat();
   const navigate = useNavigate();
-  const createPage = useCreatePage();
+  const createPage = useCreatePage({ navigate: false, awaitPersist: true });
   const createDatabase = useCreateContentDatabase(documentId ?? null);
 
   const [isOpen, setIsOpen] = useState(false);
@@ -505,12 +538,70 @@ export function SlashCommandMenu({
     title: t("editor.slash.page"),
     description: t("editor.slash.pageDescription"),
     icon: IconFileText,
-    action: async () => {
+    preserveSlashRange: true,
+    action: async (_editor, { slashRange }) => {
       if (!documentId) {
         toast.error(t("editor.noDocumentSelected"));
         return;
       }
-      await createPage(documentId);
+      let pageId: string;
+      try {
+        pageId = await createPage(documentId);
+      } catch {
+        return;
+      }
+      const pageReference = {
+        type: "notionBlockAtom",
+        attrs: {
+          tagName: "page",
+          attrsJson: JSON.stringify({
+            id: pageId,
+          }),
+          label: "Untitled",
+        },
+      };
+      const insertContent = [pageReference, { type: "paragraph" }];
+      const range = slashRange
+        ? (() => {
+            const $from = editor.state.doc.resolve(slashRange.from);
+            return $from.parent.isTextblock
+              ? { from: $from.before(), to: $from.after() }
+              : slashRange;
+          })()
+        : null;
+
+      if (range) {
+        editor.chain().focus().insertContentAt(range, insertContent).run();
+      } else {
+        const { $from } = editor.state.selection;
+        editor
+          .chain()
+          .focus()
+          .insertContentAt($from.after(), insertContent)
+          .run();
+      }
+      await waitForEditorUpdateFrame();
+      try {
+        const content = collapseExactRepeatedNfm(
+          docToNfm(editor.getJSON() as any),
+          {
+            requiredText: `id="${pageId}"`,
+          },
+        );
+        if (onDraftPersisted) {
+          const persisted = await onDraftPersisted(content);
+          if (!persisted) throw new Error(t("empty.genericError"));
+        } else {
+          await onDraftCommitted?.();
+        }
+      } catch (error) {
+        toast.error(t("editor.failedToCreatePage"), {
+          description:
+            error instanceof Error ? error.message : t("empty.genericError"),
+        });
+        return;
+      }
+      navigate(`/page/${pageId}`, { flushSync: true });
     },
   };
 
@@ -621,19 +712,19 @@ export function SlashCommandMenu({
 
   const executeCommand = useCallback(
     async (cmd: CommandItem) => {
-      if (slashPosRef.current !== null) {
-        const { from } = editor.state.selection;
-        editor
-          .chain()
-          .focus()
-          .deleteRange({ from: slashPosRef.current, to: from })
-          .run();
+      const slashRange =
+        getActiveSlashCommandRange(editor) ??
+        (slashPosRef.current !== null
+          ? { from: slashPosRef.current, to: editor.state.selection.from }
+          : null);
+      if (slashRange && !cmd.preserveSlashRange) {
+        editor.chain().focus().deleteRange(slashRange).run();
       }
       setIsOpen(false);
       setIsTurnInto(false);
       setQuery("");
       slashPosRef.current = null;
-      await cmd.action(editor);
+      await cmd.action(editor, { slashRange });
     },
     [editor],
   );
@@ -688,24 +779,29 @@ export function SlashCommandMenu({
 
       if (e.key === "ArrowDown") {
         e.preventDefault();
+        e.stopPropagation();
         if (filteredCommands.length === 0) return;
         setSelectedIndex((i) => (i + 1) % filteredCommands.length);
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
+        e.stopPropagation();
         if (filteredCommands.length === 0) return;
         setSelectedIndex(
           (i) => (i - 1 + filteredCommands.length) % filteredCommands.length,
         );
       } else if (e.key === "Enter") {
         e.preventDefault();
+        e.stopPropagation();
         if (filteredCommands[selectedIndex]) {
           executeCommand(filteredCommands[selectedIndex]);
         }
       } else if (e.key === "Escape") {
+        e.stopPropagation();
         setIsOpen(false);
         setIsTurnInto(false);
         setQuery("");
         slashPosRef.current = null;
+        onDraftCommitted?.();
       }
     };
 
@@ -717,6 +813,8 @@ export function SlashCommandMenu({
     filteredCommands,
     executeCommand,
     editor,
+    onDraftCommitted,
+    onDraftPersisted,
     openGeneratePopover,
     readInlineGenerateCommand,
     submitGeneratePrompt,
@@ -956,8 +1054,10 @@ function CommandButton({
   return (
     <button
       ref={buttonRef}
-      onMouseDown={(event) => event.preventDefault()}
-      onClick={onExecute}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        onExecute();
+      }}
       onMouseEnter={onHover}
       className={cn(
         "flex min-h-9 w-full items-center gap-3 px-3 py-1 text-left transition-colors",

package/corpus/templates/content/app/components/editor/VisualEditor.tsx

@@ -735,6 +735,7 @@ interface VisualEditorProps {
    */
   contentUpdatedAt?: string | null;
   onChange: (markdown: string) => void;
+  onSaveContent?: (markdown: string) => boolean | Promise<boolean>;
   /** Yjs document for collaborative editing. */
   ydoc?: YDoc | null;
   /** Shared awareness instance for collaborative cursors/presence. */
@@ -870,6 +871,17 @@ export function shouldPersistLocalFileEditorUpdate({
   return Boolean(transactionUiEvent);
 }
 
+function isActiveSlashCommandDraft(editor: CoreEditor): boolean {
+  const { state } = editor;
+  if (!state.selection.empty) return false;
+  const { from, $from } = state.selection;
+  if (!$from.parent.isTextblock) return false;
+
+  const blockStart = $from.start();
+  const textBefore = state.doc.textBetween(blockStart, from, "\n");
+  return /^\s*\/[a-zA-Z0-9]*$/.test(textBefore);
+}
+
 interface VisualEditorExtensionOptions {
   documentId?: string;
   ydoc?: YDoc | null;
@@ -1550,6 +1562,7 @@ export function VisualEditor({
   content,
   contentUpdatedAt,
   onChange,
+  onSaveContent,
   ydoc,
   awareness,
   user,
@@ -1569,6 +1582,8 @@ export function VisualEditor({
   const [isDraggingMedia, setIsDraggingMedia] = useState(false);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
+  const onSaveContentRef = useRef(onSaveContent);
+  onSaveContentRef.current = onSaveContent;
   const notionPageLinksRef = useRef(notionPageLinks);
   notionPageLinksRef.current = notionPageLinks;
   const resolveNotionPageLink = useCallback((notionPageId: string) => {
@@ -1576,6 +1591,7 @@ export function VisualEditor({
     return (
       notionPageLinksRef.current.find(
         (link) =>
+          link.notionPageId === notionPageId ||
           link.notionPageId.replace(/-/g, "").toLowerCase() === normalized,
       ) ?? null
     );
@@ -1604,9 +1620,10 @@ export function VisualEditor({
   // Clean up awareness on unmount
   useEffect(() => {
     return () => {
+      localAwareness?.setLocalState(null);
       fallbackAwareness?.destroy();
     };
-  }, [fallbackAwareness]);
+  }, [fallbackAwareness, localAwareness]);
 
   const extensions = useMemo(
     () =>
@@ -1643,6 +1660,36 @@ export function VisualEditor({
   const markUserEditIntent = useCallback(() => {
     lastUserEditIntentAtRef.current = Date.now();
   }, []);
+  const persistEditorContent = useCallback(
+    (
+      editorToPersist: CoreEditor,
+      options?: { markdown?: string; immediate?: boolean },
+    ) => {
+      const guards = guardsRef.current;
+      if (!guards) return false;
+      try {
+        const normalized =
+          options?.markdown ?? docToNfm(editorToPersist.getJSON() as any);
+        if (localFileMode && normalized === content) return true;
+        if (options?.immediate && onSaveContentRef.current) {
+          return onSaveContentRef.current(normalized);
+        }
+        // Don't persist an empty doc before Collaboration has seeded (would
+        // clobber DB content with an empty string). `registerEmitted` records
+        // this as the last-emitted value and returns false to skip the save.
+        if (!guards.registerEmitted(normalized)) return true;
+        queueMicrotask(() => onChangeRef.current(normalized));
+        return true;
+      } catch (err: any) {
+        toast.error(
+          t("editor.markdownSerializationError", { message: err.message }),
+        );
+        console.error("Markdown serialization error:", err);
+        return false;
+      }
+    },
+    [content, localFileMode, t],
+  );
 
   const editor = useEditor({
     extensions,
@@ -1796,20 +1843,8 @@ export function VisualEditor({
       ) {
         return;
       }
-      try {
-        const normalized = docToNfm(editor.getJSON() as any);
-        if (localFileMode && normalized === content) return;
-        // Don't persist an empty doc before Collaboration has seeded (would
-        // clobber DB content with an empty string). `registerEmitted` records
-        // this as the last-emitted value and returns false to skip the save.
-        if (!guards.registerEmitted(normalized)) return;
-        queueMicrotask(() => onChangeRef.current(normalized));
-      } catch (err: any) {
-        toast.error(
-          t("editor.markdownSerializationError", { message: err.message }),
-        );
-        console.error("Markdown serialization error:", err);
-      }
+      if (isActiveSlashCommandDraft(editor)) return;
+      persistEditorContent(editor);
     },
   });
 
@@ -2038,6 +2073,12 @@ export function VisualEditor({
           editor={editor}
           documentId={documentId}
           notionPageId={notionPageId}
+          onDraftCommitted={() => {
+            void persistEditorContent(editor);
+          }}
+          onDraftPersisted={(markdown) =>
+            persistEditorContent(editor, { markdown, immediate: true })
+          }
         />
       ) : null}
       <LinkHoverPreview editor={editor} editable={editable} />

package/corpus/templates/content/app/components/editor/extensions/NotionExtensions.tsx

@@ -144,11 +144,12 @@ function normalizeNotionPageId(input: string | null | undefined) {
 
 function getNotionPageId(attrs: Record<string, string>) {
   return (
-    normalizeNotionPageId(attrs.url) ??
-    normalizeNotionPageId(attrs.href) ??
-    normalizeNotionPageId(attrs.id) ??
-    normalizeNotionPageId(attrs.pageId) ??
-    normalizeNotionPageId(attrs.page_id)
+    attrs["data-agent-native-document-id"] ||
+    attrs.id ||
+    (normalizeNotionPageId(attrs.url) ??
+      normalizeNotionPageId(attrs.href) ??
+      normalizeNotionPageId(attrs.pageId) ??
+      normalizeNotionPageId(attrs.page_id))
   );
 }
 

package/corpus/templates/content/app/components/sidebar/DocumentTreeItem.tsx

@@ -148,7 +148,7 @@ export function DocumentTreeItem({
           isDragging && "bg-accent/70 text-accent-foreground shadow-sm",
           isActive
             ? "bg-accent text-accent-foreground"
-            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
+            : "text-muted-foreground hover:bg-accent hover:text-foreground",
         )}
         style={{
           paddingInlineStart: `${indent}px`,
@@ -208,14 +208,20 @@ export function DocumentTreeItem({
         </span>
 
         <div
-          className="absolute end-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 flex items-center gap-0.5 flex-shrink-0 bg-inherit"
+          className={cn(
+            "pointer-events-none absolute right-1 top-1/2 flex flex-shrink-0 -translate-y-1/2 items-center gap-0.5 rounded-md pl-1 opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100",
+            "bg-accent text-foreground",
+            isActive && "text-accent-foreground",
+          )}
           onPointerDown={(e) => e.stopPropagation()}
         >
           {hasMenuActions && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
-                  className="w-6 h-6 flex items-center justify-center rounded hover:bg-accent"
+                  type="button"
+                  className="flex h-6 w-6 items-center justify-center rounded text-current hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  aria-label={`More actions for ${node.title || "Untitled"}`}
                   onClick={(e) => e.stopPropagation()}
                 >
                   <IconDots size={14} />
@@ -259,7 +265,9 @@ export function DocumentTreeItem({
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
-                  className="w-7 h-7 flex items-center justify-center rounded hover:bg-accent"
+                  type="button"
+                  className="flex h-7 w-7 items-center justify-center rounded text-current hover:bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  aria-label={`Add sub-page to ${node.title || "Untitled"}`}
                   onClick={(e) => {
                     e.stopPropagation();
                     onCreateChild(node.id);

package/corpus/templates/content/app/global.css

@@ -2119,6 +2119,15 @@ audio.media-block__content {
   background: hsl(210 100% 52% / 0.2);
 }
 
+.notion-editor .notion-selection-fill {
+  background: hsl(210 100% 52% / 0.08);
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  box-shadow:
+    0 0.24em 0 hsl(210 100% 52% / 0.08),
+    0 -0.08em 0 hsl(210 100% 52% / 0.08);
+}
+
 @media print {
   @page {
     margin: 0.65in;

package/corpus/templates/content/app/hooks/use-create-page.ts

@@ -19,11 +19,17 @@ function nanoid(size = 12): string {
   return Array.from(bytes, (b) => chars[b % chars.length]).join("");
 }
 
-export function useCreatePage(opts?: { onAfterNavigate?: () => void }) {
+export function useCreatePage(opts?: {
+  onAfterNavigate?: () => void;
+  navigate?: boolean;
+  awaitPersist?: boolean;
+}) {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const createDocument = useCreateDocument();
   const onAfterNavigate = opts?.onAfterNavigate;
+  const shouldNavigate = opts?.navigate ?? true;
+  const shouldAwaitPersist = opts?.awaitPersist ?? true;
 
   return useCallback(
     async (parentId?: string) => {
@@ -50,10 +56,12 @@ export function useCreatePage(opts?: { onAfterNavigate?: () => void }) {
       });
       queryClient.setQueryData(["action", "get-document", { id }], tempDoc);
 
-      navigate(`/page/${id}`, { flushSync: true });
-      onAfterNavigate?.();
+      if (shouldNavigate) {
+        navigate(`/page/${id}`, { flushSync: true });
+        onAfterNavigate?.();
+      }
 
-      try {
+      const persist = async () => {
         await createDocument.mutateAsync({
           id,
           title: "",
@@ -67,21 +75,42 @@ export function useCreatePage(opts?: { onAfterNavigate?: () => void }) {
         queryClient.invalidateQueries({
           queryKey: ["action", "list-documents"],
         });
-      } catch (err) {
+      };
+
+      const onPersistError = (err: unknown) => {
         queryClient.invalidateQueries({
           queryKey: ["action", "list-documents"],
         });
         queryClient.removeQueries({
           queryKey: ["action", "get-document", { id }],
         });
-        navigate("/");
+        if (shouldNavigate) navigate("/");
         toast.error("Failed to create page", {
           description:
             err instanceof Error ? err.message : "Something went wrong",
         });
+      };
+
+      if (shouldAwaitPersist) {
+        try {
+          await persist();
+        } catch (err) {
+          onPersistError(err);
+          throw err;
+        }
+      } else {
+        void persist().catch(onPersistError);
       }
+
       return id;
     },
-    [createDocument, navigate, onAfterNavigate, queryClient],
+    [
+      createDocument,
+      navigate,
+      onAfterNavigate,
+      queryClient,
+      shouldAwaitPersist,
+      shouldNavigate,
+    ],
   );
 }