@agent-native/core 0.101.7 → 0.101.11

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

@@ -1,8 +1,10 @@
 import { useSendToAgentChat, useT } from "@agent-native/core/client";
 import type { CreateInlineDatabaseResponse } from "@shared/api";
+import { renderMathToHtml } from "@shared/math-rendering";
 import { collapseExactRepeatedNfm, docToNfm } from "@shared/nfm";
 import { serializeRegistryBlockToMdx } from "@shared/nfm-registry";
 import {
+  IconCheck,
   IconTypography,
   IconH1,
   IconH2,
@@ -23,6 +25,8 @@ import {
   IconFileText,
   IconDatabase,
   IconVideo,
+  IconMathFunction,
+  IconSquareRoot2,
 } from "@tabler/icons-react";
 import { Editor } from "@tiptap/react";
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
@@ -30,6 +34,7 @@ import { useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { contentBlockRegistry } from "@/blocks/contentBlockRegistry";
+import { Button } from "@/components/ui/button";
 import {
   Popover,
   PopoverContent,
@@ -42,6 +47,7 @@ import { localContentComponents } from "@/local-components";
 
 import { focusMostRecentEmptyToggleSummary } from "./extensions/NotionExtensions";
 import { buildLocalComponentSlashItems } from "./localComponentSlashItems";
+import { MathRenderer } from "./MathRenderer";
 import { buildRegistrySlashItems } from "./registrySlashItems";
 
 interface SlashCommandMenuProps {
@@ -64,6 +70,13 @@ interface EditorMenuPosition {
   left: number;
 }
 
+interface EquationDraft {
+  displayMode: boolean;
+  insertionRange: { from: number; to: number };
+  slashRange: { from: number; to: number };
+  position: EditorMenuPosition;
+}
+
 interface CommandItem {
   title: string;
   description: string;
@@ -178,6 +191,47 @@ export function insertInlineDatabaseBlock(
     : chain.insertContent(content).run();
 }
 
+export function equationNodeContent(latex: string, displayMode: boolean) {
+  return displayMode
+    ? {
+        type: "notionBlockAtom",
+        attrs: { tagName: "equation", attrsJson: "{}", label: latex },
+      }
+    : {
+        type: "notionInlineAtom",
+        attrs: { tagName: "math", attrsJson: "{}", label: latex },
+      };
+}
+
+export function insertEquation(
+  editor: Editor,
+  latex: string,
+  displayMode: boolean,
+  range: { from: number; to: number },
+) {
+  const content = equationNodeContent(latex, displayMode);
+  return editor
+    .chain()
+    .focus()
+    .insertContentAt(
+      range,
+      displayMode ? [content, { type: "paragraph" }] : content,
+    )
+    .run();
+}
+
+export function getEquationInsertionRange(
+  editor: Editor,
+  slashRange: { from: number; to: number },
+  displayMode: boolean,
+) {
+  if (!displayMode) return slashRange;
+  const resolved = editor.state.doc.resolve(slashRange.from);
+  return resolved.parent.isTextblock
+    ? { from: resolved.before(), to: resolved.after() }
+    : slashRange;
+}
+
 const commands: CommandTemplate[] = [
   {
     titleKey: "editor.slash.text",
@@ -460,6 +514,16 @@ export function SlashCommandMenu({
   );
   const generateTextareaRef = useRef<HTMLTextAreaElement>(null);
 
+  const [equationDraft, setEquationDraft] = useState<EquationDraft | null>(
+    null,
+  );
+  const [equationLatex, setEquationLatex] = useState("");
+  const equationInputRef = useRef<HTMLTextAreaElement>(null);
+  const equationResult = useMemo(
+    () => renderMathToHtml(equationLatex, equationDraft?.displayMode ?? false),
+    [equationDraft?.displayMode, equationLatex],
+  );
+
   const submitGeneratePrompt = useCallback(
     (prompt: string) => {
       const trimmed = prompt.trim();
@@ -684,6 +748,80 @@ export function SlashCommandMenu({
     },
   };
 
+  const openEquationComposer = useCallback(
+    (displayMode: boolean, slashRange: { from: number; to: number } | null) => {
+      const menuPosition = position ?? getSelectionMenuPosition();
+      if (!slashRange || !menuPosition) return false;
+      setEquationLatex("");
+      setEquationDraft({
+        displayMode,
+        slashRange,
+        insertionRange: getEquationInsertionRange(
+          editor,
+          slashRange,
+          displayMode,
+        ),
+        position: menuPosition,
+      });
+      setTimeout(() => equationInputRef.current?.focus(), 0);
+      return true;
+    },
+    [editor, getSelectionMenuPosition, position],
+  );
+
+  const cancelEquation = useCallback(() => {
+    const draft = equationDraft;
+    setEquationDraft(null);
+    setEquationLatex("");
+    if (draft) {
+      editor.chain().focus().deleteRange(draft.slashRange).run();
+    }
+  }, [editor, equationDraft]);
+
+  const submitEquation = useCallback(() => {
+    if (!equationDraft || !equationResult.ok) return;
+    const latex = equationLatex.trim();
+    const { displayMode, insertionRange } = equationDraft;
+    setEquationDraft(null);
+    setEquationLatex("");
+    const inserted = insertEquation(editor, latex, displayMode, insertionRange);
+    if (!inserted) {
+      toast.error(t("editor.slash.equationInsertFailed"));
+      return;
+    }
+    void onDraftCommitted?.();
+  }, [
+    editor,
+    equationDraft,
+    equationLatex,
+    equationResult.ok,
+    onDraftCommitted,
+    t,
+  ]);
+
+  const equationCommands: CommandItem[] = isTurnInto
+    ? []
+    : [
+        {
+          title: t("editor.slash.blockEquation"),
+          description: t("editor.slash.blockEquationDescription"),
+          searchText: "latex katex math formula",
+          icon: IconMathFunction,
+          preserveSlashRange: true,
+          action: (_editor, { slashRange }) =>
+            openEquationComposer(true, slashRange),
+        },
+        {
+          title: t("editor.slash.inlineEquation"),
+          description: t("editor.slash.inlineEquationDescription"),
+          searchText: "latex katex math formula",
+          icon: IconSquareRoot2,
+          preserveSlashRange: true,
+          action: (_editor, { slashRange }) =>
+            openEquationComposer(false, slashRange),
+        },
+      ];
+
   // Registry-derived block items (the shared dev-doc / OpenAPI / structured
   // library). Filtered to Notion-compatible specs when the document is linked to
   // a Notion page. "Turn into" only converts the current text block, so these
@@ -713,9 +851,10 @@ export function SlashCommandMenu({
     title: t(cmd.titleKey),
     description: t(cmd.descriptionKey),
   });
-  const blockCommands = (isTurnInto ? turnIntoCommands : commands).map(
-    localizeCommand,
-  );
+  const blockCommands = [
+    ...(isTurnInto ? turnIntoCommands : commands).map(localizeCommand),
+    ...equationCommands,
+  ];
   const pageCommands = isTurnInto ? [] : [pageCommand, databaseCommand];
   const mediaCommands = isTurnInto
     ? []
@@ -1042,7 +1181,7 @@ export function SlashCommandMenu({
             align="start"
             side="bottom"
             className="w-[calc(100vw-2rem)] max-w-80 rounded-xl p-0"
-            onOpenAutoFocus={(e) => {
+            onOpenAutoFocus={(e: Event) => {
               e.preventDefault();
               generateTextareaRef.current?.focus();
             }}
@@ -1086,6 +1225,123 @@ export function SlashCommandMenu({
           </PopoverContent>
         </Popover>
       )}
+
+      {equationDraft && (
+        <Popover
+          open
+          onOpenChange={(open: boolean) => {
+            if (!open) cancelEquation();
+          }}
+        >
+          <PopoverTrigger asChild>
+            <span
+              className="pointer-events-none absolute size-0"
+              style={{
+                top: equationDraft.position.top,
+                left: Math.min(equationDraft.position.left, 16),
+              }}
+            />
+          </PopoverTrigger>
+          <PopoverContent
+            align="start"
+            side="bottom"
+            className="w-[calc(100vw-2rem)] max-w-md rounded-xl p-0"
+            onOpenAutoFocus={(event: Event) => {
+              event.preventDefault();
+              equationInputRef.current?.focus();
+            }}
+          >
+            <div className="p-4">
+              <div className="flex items-center gap-2 text-sm font-semibold">
+                {equationDraft.displayMode ? (
+                  <IconMathFunction
+                    className="text-muted-foreground"
+                    size={16}
+                  />
+                ) : (
+                  <IconSquareRoot2
+                    className="text-muted-foreground"
+                    size={16}
+                  />
+                )}
+                {equationDraft.displayMode
+                  ? t("editor.slash.blockEquation")
+                  : t("editor.slash.inlineEquation")}
+              </div>
+              <textarea
+                ref={equationInputRef}
+                value={equationLatex}
+                onChange={(event) => setEquationLatex(event.target.value)}
+                onKeyDown={(event) => {
+                  if (
+                    event.key === "Enter" &&
+                    (event.metaKey || event.ctrlKey) &&
+                    equationResult.ok
+                  ) {
+                    event.preventDefault();
+                    submitEquation();
+                  }
+                  if (event.key === "Escape") {
+                    event.preventDefault();
+                    cancelEquation();
+                  }
+                }}
+                rows={equationDraft.displayMode ? 3 : 2}
+                placeholder={t("editor.slash.equationPlaceholder")}
+                aria-label={t("editor.slash.equationInputLabel")}
+                aria-invalid={equationLatex.length > 0 && !equationResult.ok}
+                aria-describedby="equation-preview-status"
+                className="mt-3 w-full resize-y rounded-lg border border-input bg-background px-3 py-2 font-mono text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+              <div className="mt-3 min-h-20 rounded-lg border border-border bg-muted/30 p-3">
+                <div className="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                  {t("editor.slash.equationPreview")}
+                </div>
+                <div className="flex min-h-9 items-center justify-center overflow-x-auto text-foreground">
+                  {equationResult.ok ? (
+                    <MathRenderer
+                      latex={equationLatex}
+                      displayMode={equationDraft.displayMode}
+                    />
+                  ) : (
+                    <span className="text-sm text-muted-foreground">
+                      {equationLatex
+                        ? t("editor.slash.equationNeedsRepair")
+                        : t("editor.slash.equationPreviewEmpty")}
+                    </span>
+                  )}
+                </div>
+              </div>
+              <p
+                id="equation-preview-status"
+                className={cn(
+                  "mt-2 min-h-5 text-xs",
+                  equationLatex && !equationResult.ok
+                    ? "text-destructive"
+                    : "text-muted-foreground",
+                )}
+              >
+                {equationLatex && !equationResult.ok
+                  ? equationResult.error
+                  : t("editor.slash.equationSubmitHint")}
+              </p>
+            </div>
+            <div className="flex items-center justify-end gap-2 border-t border-border px-4 py-3">
+              <Button variant="ghost" size="sm" onClick={cancelEquation}>
+                {t("editor.slash.cancelEquation")}
+              </Button>
+              <Button
+                size="sm"
+                onClick={submitEquation}
+                disabled={!equationResult.ok}
+              >
+                <IconCheck />
+                {t("editor.slash.insertEquation")}
+              </Button>
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
     </>
   );
 }

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

@@ -924,6 +924,28 @@ export function shouldPersistLocalFileEditorUpdate({
   return Boolean(transactionUiEvent);
 }
 
+function isEffectivelyEmptyEditorContent(value: string): boolean {
+  const normalized = value.trim();
+  return normalized === "" || normalized === "<empty-block/>";
+}
+
+export function shouldPersistEffectivelyEmptyEditorUpdate({
+  nextContent,
+  userInitiated,
+}: {
+  nextContent: string;
+  userInitiated: boolean;
+}): boolean {
+  if (!isEffectivelyEmptyEditorContent(nextContent)) return true;
+  // Empty editor state is never worth persisting without a user gesture. This
+  // also covers the preview remount window where `content` can briefly be an
+  // empty list snapshot even though its retained save controller still has a
+  // rich confirmed baseline. Comparing only to this render's prop would let
+  // that mount-time filler mark the retained controller dirty and its
+  // flush-on-release path would then overwrite SQL.
+  return userInitiated;
+}
+
 function isActiveSlashCommandDraft(editor: CoreEditor): boolean {
   const { state } = editor;
   if (!state.selection.empty) return false;
@@ -1086,7 +1108,9 @@ function getVisualEditorPlaceholder({
     if (level === 1) return "Heading 1";
     if (level === 2) return "Heading 2";
     if (level === 3) return "Heading 3";
-    return "Heading 4";
+    if (level === 4) return "Heading 4";
+    if (level === 5) return "Heading 5";
+    return "Heading 6";
   }
 
   if (
@@ -1300,6 +1324,7 @@ export function createVisualEditorExtensions({
     starterKit: {
       blockquote: false,
       paragraph: false,
+      heading: { levels: [1, 2, 3, 4, 5, 6] },
       horizontalRule: {},
       dropcursor: { color: false, width: 3, class: "notion-dropcursor" },
     },
@@ -1742,7 +1767,11 @@ export function VisualEditor({
   const persistEditorContent = useCallback(
     (
       editorToPersist: CoreEditor,
-      options?: { markdown?: string; immediate?: boolean },
+      options?: {
+        markdown?: string;
+        immediate?: boolean;
+        userInitiated?: boolean;
+      },
     ) => {
       const guards = guardsRef.current;
       if (!guards) return false;
@@ -1750,6 +1779,20 @@ export function VisualEditor({
         const normalized =
           options?.markdown ?? docToNfm(editorToPersist.getJSON() as any);
         if (localFileMode && normalized === content) return true;
+        // TipTap/Yjs can emit a local-looking empty-paragraph transaction while
+        // an editor is mounting or reconciling. Content serializes that filler
+        // as `<empty-block/>`, so the generic whitespace-only collab guard does
+        // not catch it. Never let that lifecycle normalization clear a saved
+        // body. A real Select All/Delete (or Cut) records user intent through
+        // the DOM handlers below and is still allowed to persist normally.
+        if (
+          !shouldPersistEffectivelyEmptyEditorUpdate({
+            nextContent: normalized,
+            userInitiated: options?.userInitiated === true,
+          })
+        ) {
+          return true;
+        }
         if (options?.immediate && onSaveContentRef.current) {
           return onSaveContentRef.current(normalized);
         }
@@ -1923,7 +1966,12 @@ export function VisualEditor({
         return;
       }
       if (isActiveSlashCommandDraft(editor)) return;
-      persistEditorContent(editor);
+      persistEditorContent(editor, {
+        userInitiated:
+          transaction.getMeta(LOCAL_FILE_USER_EDIT_META) === true ||
+          Date.now() - lastUserEditIntentAtRef.current < 2000 ||
+          Boolean(transaction.getMeta("uiEvent")),
+      });
     },
   });
 
@@ -2239,10 +2287,14 @@ export function VisualEditor({
           documentId={documentId}
           notionPageId={notionPageId}
           onDraftCommitted={() => {
-            void persistEditorContent(editor);
+            void persistEditorContent(editor, { userInitiated: true });
           }}
           onDraftPersisted={(markdown) =>
-            persistEditorContent(editor, { markdown, immediate: true })
+            persistEditorContent(editor, {
+              markdown,
+              immediate: true,
+              userInitiated: true,
+            })
           }
         />
       ) : null}

package/corpus/templates/content/app/components/editor/body-hydration.ts

@@ -89,6 +89,33 @@ export function previewBodyHydrationIsPending(args: {
   );
 }
 
+/**
+ * A draft that began from an empty source snapshot must not automatically
+ * replace a non-empty Builder body that arrived while hydration was running.
+ * Keep the draft dirty/recoverable and let the user decide which body to keep.
+ */
+export function previewDraftConflictsWithHydratedBody(args: {
+  loadedContent: string | null | undefined;
+  loadedUpdatedAt: string | null | undefined;
+  loadedContentWasEmpty: boolean | undefined;
+  pendingContent: string | null | undefined;
+  hydratedContent: string | null | undefined;
+  hydratedUpdatedAt: string | null | undefined;
+}) {
+  const sourceChangedSinceDraftLoaded =
+    (!!args.loadedUpdatedAt &&
+      !!args.hydratedUpdatedAt &&
+      args.loadedUpdatedAt !== args.hydratedUpdatedAt) ||
+    args.loadedContent !== args.hydratedContent;
+  return (
+    !isEffectivelyEmptyDocumentContent(args.pendingContent) &&
+    args.pendingContent !== args.hydratedContent &&
+    sourceChangedSinceDraftLoaded &&
+    (args.loadedContentWasEmpty === true ||
+      args.loadedContent !== args.hydratedContent)
+  );
+}
+
 export function previewBodyHydrationIsTerminalError(args: {
   item: Pick<ContentDatabaseItem, "bodyHydration" | "document">;
   document: Pick<Document, "databaseMembership"> | null | undefined;