@agent-native/core 0.159.2 → 0.159.5

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

@@ -11,8 +11,9 @@ import {
   IconExternalLink,
   IconFileText,
 } from "@tabler/icons-react";
-import { InputRule } from "@tiptap/core";
+import { InputRule, type Editor } from "@tiptap/core";
 import type { Fragment, Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Selection } from "@tiptap/pm/state";
 import {
   Mark,
   Node,
@@ -173,6 +174,119 @@ export const TOGGLE_SUMMARY_PLACEHOLDER = "Toggle";
 export const EMPTY_TOGGLE_BODY_PLACEHOLDER =
   "Empty toggle. Click or drop blocks inside.";
 
+export type ToggleSummaryEnterDestination =
+  | "paragraph"
+  | "toggle-body"
+  | "sibling-toggle";
+
+function scheduleEditorViewFocus(editor: Editor) {
+  setTimeout(() => {
+    if (!editor.isDestroyed) editor.view.focus();
+  }, 0);
+}
+
+export function applyToggleSummaryEnter(
+  editor: Editor,
+  pos: number,
+  summary: string,
+): ToggleSummaryEnterDestination | null {
+  const { state, view } = editor;
+  const toggle = state.doc.nodeAt(pos);
+  const paragraphType = state.schema.nodes.paragraph;
+  const toggleType = state.schema.nodes.notionToggle;
+  if (toggle?.type !== toggleType || !paragraphType || !toggleType) return null;
+
+  if (!summary && toggle.childCount === 0) {
+    const tr = state.tr.replaceWith(
+      pos,
+      pos + toggle.nodeSize,
+      paragraphType.create(),
+    );
+    tr.setMeta("preventClearDocument", true);
+    tr.setMeta("uiEvent", "keydown");
+    tr.setSelection(Selection.near(tr.doc.resolve(pos + 1)));
+    view.dispatch(tr.scrollIntoView());
+    scheduleEditorViewFocus(editor);
+    return "paragraph";
+  }
+
+  if (toggle.attrs.open) {
+    if (toggle.childCount === 0) {
+      const tr = state.tr.replaceWith(
+        pos,
+        pos + toggle.nodeSize,
+        toggleType.create({ ...toggle.attrs, summary }, paragraphType.create()),
+      );
+      tr.setMeta("preventClearDocument", true);
+      tr.setMeta("uiEvent", "keydown");
+      tr.setSelection(Selection.near(tr.doc.resolve(pos + 2)));
+      view.dispatch(tr.scrollIntoView());
+      scheduleEditorViewFocus(editor);
+      return "toggle-body";
+    }
+    const tr = state.tr.setNodeMarkup(pos, undefined, {
+      ...toggle.attrs,
+      summary,
+    });
+    tr.setMeta("preventClearDocument", true);
+    tr.setMeta("uiEvent", "keydown");
+    tr.setSelection(Selection.near(tr.doc.resolve(pos + 2)));
+    view.dispatch(tr.scrollIntoView());
+    scheduleEditorViewFocus(editor);
+    return "toggle-body";
+  }
+
+  const tr = state.tr
+    .setNodeMarkup(pos, undefined, { ...toggle.attrs, summary })
+    .insert(
+      pos + toggle.nodeSize,
+      toggleType.create({ summary: "", open: false }),
+    );
+  tr.setMeta("preventClearDocument", true);
+  tr.setMeta("uiEvent", "keydown");
+  view.dispatch(tr.scrollIntoView());
+  return "sibling-toggle";
+}
+
+export function outdentDirectToggleChild(editor: Editor): boolean {
+  const { state, view } = editor;
+  const { $from, $to } = state.selection;
+  if ($from.depth < 2 || $to.depth !== $from.depth) return false;
+
+  const toggleDepth = $from.depth - 1;
+  if (
+    $from.node(toggleDepth).type.name !== "notionToggle" ||
+    $to.node(toggleDepth) !== $from.node(toggleDepth)
+  ) {
+    return false;
+  }
+
+  const range = $from.blockRange($to);
+  if (!range || range.depth !== toggleDepth) return false;
+  const childDepth = $from.depth;
+  const child = $from.node(childDepth);
+  const childPos = $from.before(childDepth);
+  const togglePos = $from.before(toggleDepth);
+  const cursorOffset = $from.parentOffset;
+  const tr = state.tr.delete(childPos, childPos + child.nodeSize);
+  const remainingToggle = tr.doc.nodeAt(togglePos);
+  if (remainingToggle?.type.name !== "notionToggle") return false;
+  const insertPos = togglePos + remainingToggle.nodeSize;
+  tr.insert(insertPos, child);
+  tr.setMeta("preventClearDocument", true);
+  tr.setMeta("uiEvent", "keydown");
+  tr.setSelection(
+    Selection.near(
+      tr.doc.resolve(
+        insertPos + 1 + Math.min(cursorOffset, child.content.size),
+      ),
+    ),
+  );
+  view.dispatch(tr.scrollIntoView());
+  scheduleEditorViewFocus(editor);
+  return true;
+}
+
 function normalizeIndentAttr(value: unknown): number {
   const parsed =
     typeof value === "number"
@@ -191,7 +305,7 @@ export function focusMostRecentEmptyToggleSummary(editor: {
       ? requestAnimationFrame
       : (callback: FrameRequestCallback) => setTimeout(callback, 0);
 
-  schedule(() => {
+  const focusSummary = (attempt: number) => {
     let editorDom: HTMLElement;
     try {
       editorDom = editor.view.dom;
@@ -206,24 +320,56 @@ export function focusMostRecentEmptyToggleSummary(editor: {
       [...inputs].reverse().find((input) => input.value === "") ??
       inputs[inputs.length - 1];
 
-    target?.focus();
+    if (!target && attempt < 3) {
+      schedule(() => focusSummary(attempt + 1));
+      return;
+    }
+
+    target?.focus({ preventScroll: true });
     target?.select();
-  });
+  };
+
+  schedule(() => focusSummary(0));
+}
+
+export function focusToggleSummaryAtPosition(
+  editor: Pick<Editor, "view">,
+  pos: number,
+) {
+  const nodeDom = editor.view.nodeDOM(pos);
+  if (!(nodeDom instanceof HTMLElement)) return;
+  const target = nodeDom.querySelector<HTMLInputElement>(
+    ".notion-toggle__summary",
+  );
+  target?.focus();
+  target?.select();
 }
 
-function ToggleView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
+function ToggleView({ node, editor, getPos }: NodeViewProps) {
   const open = !!node.attrs.open;
-  const setOpen = (value: boolean) => updateAttributes({ open: value });
   const summary = (node.attrs.summary || "") as string;
   const isEditable = editor.isEditable;
-  const firstChild = node.firstChild;
   const bodyHasNoBlocks = node.childCount === 0;
-  const bodyIsEmpty =
-    bodyHasNoBlocks ||
-    (node.childCount === 1 &&
-      firstChild?.type.name === "paragraph" &&
-      firstChild.content.size === 0 &&
-      !firstChild.textContent.trim());
+
+  const updateToggleAttributes = (
+    attrs: Record<string, unknown>,
+    uiEvent: "input" | "pointer",
+  ) => {
+    const pos = getPos();
+    if (typeof pos !== "number") return;
+    const currentNode = editor.state.doc.nodeAt(pos);
+    if (currentNode?.type.name !== "notionToggle") return;
+    const tr = editor.state.tr.setNodeMarkup(pos, undefined, {
+      ...currentNode.attrs,
+      ...attrs,
+    });
+    tr.setMeta("preventClearDocument", true);
+    tr.setMeta("uiEvent", uiEvent);
+    editor.view.dispatch(tr);
+  };
+
+  const setOpen = (value: boolean) =>
+    updateToggleAttributes({ open: value }, "pointer");
 
   const focusEmptyBody = (event: React.MouseEvent<HTMLElement>) => {
     if (!isEditable) return;
@@ -235,12 +381,14 @@ function ToggleView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
 
     if (!open) setOpen(true);
 
-    editor
-      .chain()
-      .focus()
-      .insertContentAt(pos + 1, { type: "paragraph" })
-      .focus(pos + 2)
-      .run();
+    const paragraph = editor.state.schema.nodes.paragraph;
+    if (!paragraph) return;
+    const tr = editor.state.tr.insert(pos + 1, paragraph.create());
+    tr.setMeta("preventClearDocument", true);
+    tr.setMeta("uiEvent", "pointer");
+    tr.setSelection(Selection.near(tr.doc.resolve(pos + 2)));
+    editor.view.dispatch(tr.scrollIntoView());
+    scheduleEditorViewFocus(editor);
   };
 
   const getEmptyBodyInsertPos = () => {
@@ -322,6 +470,9 @@ function ToggleView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
       );
     }
 
+    tr.setMeta("preventClearDocument", true);
+    tr.setMeta("uiEvent", "drop");
+
     editor.view.dispatch(tr.scrollIntoView());
     editor.view.focus();
     (
@@ -338,48 +489,41 @@ function ToggleView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
       e.preventDefault();
       const pos = getPos();
       if (typeof pos !== "number") return;
-      // Insert a new toggle after this one
-      const endPos = pos + node.nodeSize;
-      editor
-        .chain()
-        .focus()
-        .insertContentAt(endPos, {
-          type: "notionToggle",
-          attrs: { summary: "", open: true },
-          content: [{ type: "paragraph" }],
-        })
-        .run();
-      // Focus the new toggle's summary input after render
-      setTimeout(() => {
-        const wrapper = editor.view.dom.closest(".visual-editor-wrapper");
-        if (!wrapper) return;
-        const toggles = wrapper.querySelectorAll(".notion-toggle__summary");
-        const allToggles = Array.from(toggles) as HTMLInputElement[];
-        const currentInput = e.currentTarget;
-        const idx = allToggles.indexOf(currentInput);
-        if (idx >= 0 && allToggles[idx + 1]) {
-          allToggles[idx + 1].focus();
-        }
-      }, 0);
+      const currentInput = e.currentTarget;
+      const destination = applyToggleSummaryEnter(
+        editor,
+        pos,
+        currentInput.value,
+      );
+      if (destination === "sibling-toggle") {
+        setTimeout(() => {
+          focusToggleSummaryAtPosition(editor, pos + node.nodeSize);
+        }, 0);
+      }
     } else if (e.key === "Backspace" && summary === "") {
       e.preventDefault();
       const pos = getPos();
       if (typeof pos !== "number") return;
       // Delete this empty toggle and replace with paragraph
-      editor
-        .chain()
-        .focus()
-        .deleteRange({ from: pos, to: pos + node.nodeSize })
-        .insertContentAt(pos, { type: "paragraph" })
-        .focus(pos + 1)
-        .run();
+      const paragraph = editor.state.schema.nodes.paragraph;
+      if (!paragraph) return;
+      const tr = editor.state.tr.replaceWith(
+        pos,
+        pos + node.nodeSize,
+        paragraph.create(),
+      );
+      tr.setMeta("preventClearDocument", true);
+      tr.setMeta("uiEvent", "keydown");
+      tr.setSelection(Selection.near(tr.doc.resolve(pos + 1)));
+      editor.view.dispatch(tr.scrollIntoView());
+      scheduleEditorViewFocus(editor);
     }
   };
 
   return (
     <NodeViewWrapper
       className={`notion-toggle ${open ? "notion-toggle--open" : ""} ${
-        bodyIsEmpty ? "notion-toggle--body-empty" : ""
+        bodyHasNoBlocks ? "notion-toggle--body-empty" : ""
       }`}
       data-color={node.attrs.color || undefined}
       data-heading-level={node.attrs.headingLevel || undefined}
@@ -402,7 +546,10 @@ function ToggleView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
           <input
             value={summary}
             onChange={(event) =>
-              updateAttributes({ summary: event.currentTarget.value })
+              updateToggleAttributes(
+                { summary: event.currentTarget.value },
+                "input",
+              )
             }
             onKeyDown={handleKeyDown}
             onClick={(e) => e.stopPropagation()}
@@ -642,6 +789,7 @@ export const NotionSpanMark = Mark.create({
 
 export const NotionToggle = Node.create({
   name: "notionToggle",
+  priority: 1000,
   group: "block",
   content: "block*",
   defining: true,
@@ -730,6 +878,11 @@ export const NotionToggle = Node.create({
   addNodeView() {
     return ReactNodeViewRenderer(ToggleView);
   },
+  addKeyboardShortcuts() {
+    return {
+      "Shift-Tab": ({ editor }) => outdentDirectToggleChild(editor),
+    };
+  },
   addStorage() {
     return {
       markdown: {

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

@@ -1046,7 +1046,7 @@
 }
 
 .notion-toggle__chevron {
-  color: hsl(var(--muted-foreground));
+  color: hsl(var(--foreground));
   user-select: none;
   display: flex;
   align-items: center;
@@ -1056,6 +1056,9 @@
   border-radius: 3px;
   transition: background-color 120ms ease-out;
 }
+.notion-toggle--body-empty .notion-toggle__chevron {
+  color: hsl(var(--muted-foreground));
+}
 .notion-toggle__chevron:hover {
   background: hsl(var(--muted));
 }

package/corpus/templates/content/app/i18n-data.ts

@@ -425,6 +425,9 @@ const databaseMessages = {
   toValue: "To: {{value}}",
   unknown: "unknown",
   whatChanged: "What changed",
+  bodyChangeComparison: "Body change comparison",
+  currentBody: "Current body",
+  proposedBody: "Proposed body",
   whereItWillGo: "Where it will go",
   openAsFullPage: "Open as full page",
   pick: "& Pick",
@@ -569,6 +572,9 @@ const databaseMessagesByLocale = {
     preparedUpdateAlreadyCancelled: "准备好的 Builder 更新已被取消",
     cancelPreparedUpdateFailed: "未能取消准备好的 Builder 更新",
     whatChanged: "更改内容",
+    bodyChangeComparison: "正文更改对比",
+    currentBody: "当前正文",
+    proposedBody: "建议正文",
     confirmUnpublish: "确认取消发布",
     builderBodyEditsNeedSaferPath:
       "Builder 正文编辑需要更安全的推送路径才能发送。",
@@ -794,6 +800,9 @@ const databaseMessagesByLocale = {
     cancelPreparedUpdateFailed:
       "No se canceló la actualización preparada de Builder",
     whatChanged: "Qué cambió",
+    bodyChangeComparison: "Comparación de cambios del cuerpo",
+    currentBody: "Cuerpo actual",
+    proposedBody: "Cuerpo propuesto",
     confirmUnpublish: "Confirmar retirada de publicación",
     builderBodyEditsNeedSaferPath:
       "Las ediciones del cuerpo en Builder necesitan una ruta de envío más segura antes de poder enviarse.",
@@ -1032,6 +1041,9 @@ const databaseMessagesByLocale = {
     cancelPreparedUpdateFailed:
       "La mise à jour Builder préparée n’a pas été annulée",
     whatChanged: "Ce qui a changé",
+    bodyChangeComparison: "Comparaison des modifications du corps",
+    currentBody: "Corps actuel",
+    proposedBody: "Corps proposé",
     confirmUnpublish: "Confirmer la dépublication",
     builderBodyEditsNeedSaferPath:
       "Les modifications du corps dans Builder nécessitent un chemin d'envoi plus sûr avant de pouvoir être envoyées.",
@@ -1269,6 +1281,9 @@ const databaseMessagesByLocale = {
     cancelPreparedUpdateFailed:
       "Das vorbereitete Builder-Update wurde nicht abgebrochen",
     whatChanged: "Was sich geändert hat",
+    bodyChangeComparison: "Vergleich der Textänderung",
+    currentBody: "Aktueller Text",
+    proposedBody: "Vorgeschlagener Text",
     confirmUnpublish: "Zurückziehen bestätigen",
     builderBodyEditsNeedSaferPath:
       "Builder-Textänderungen benötigen einen sichereren Übertragungsweg, bevor sie gesendet werden können.",
@@ -1504,6 +1519,9 @@ const databaseMessagesByLocale = {
     cancelPreparedUpdateFailed:
       "準備済み Builder 更新をキャンセルできませんでした",
     whatChanged: "変更内容",
+    bodyChangeComparison: "本文変更の比較",
+    currentBody: "現在の本文",
+    proposedBody: "変更後の本文",
     confirmUnpublish: "非公開を確認",
     builderBodyEditsNeedSaferPath:
       "Builder の本文編集は、送信する前により安全なプッシュ経路が必要です。",
@@ -1734,6 +1752,9 @@ const databaseMessagesByLocale = {
       "준비된 Builder 업데이트가 이미 취소되었습니다",
     cancelPreparedUpdateFailed: "준비된 Builder 업데이트를 취소하지 못했습니다",
     whatChanged: "변경 내용",
+    bodyChangeComparison: "본문 변경 비교",
+    currentBody: "현재 본문",
+    proposedBody: "제안된 본문",
     confirmUnpublish: "게시 취소 확인",
     builderBodyEditsNeedSaferPath:
       "Builder 본문 편집은 전송하기 전에 더 안전한 푸시 경로가 필요합니다.",
@@ -1967,6 +1988,9 @@ const databaseMessagesByLocale = {
     cancelPreparedUpdateFailed:
       "A atualização preparada do Builder não foi cancelada",
     whatChanged: "O que mudou",
+    bodyChangeComparison: "Comparação da alteração do corpo",
+    currentBody: "Corpo atual",
+    proposedBody: "Corpo proposto",
     confirmUnpublish: "Confirmar cancelamento de publicação",
     builderBodyEditsNeedSaferPath:
       "As edições de corpo do Builder precisam de um caminho de envio mais seguro antes de poderem ser enviadas.",
@@ -2196,6 +2220,9 @@ const databaseMessagesByLocale = {
       "तैयार Builder अपडेट पहले ही रद्द किया जा चुका था",
     cancelPreparedUpdateFailed: "तैयार Builder अपडेट रद्द नहीं हुआ",
     whatChanged: "क्या बदला",
+    bodyChangeComparison: "मुख्य पाठ के बदलाव की तुलना",
+    currentBody: "वर्तमान मुख्य पाठ",
+    proposedBody: "प्रस्तावित मुख्य पाठ",
     confirmUnpublish: "अप्रकाशित करने की पुष्टि करें",
     builderBodyEditsNeedSaferPath:
       "Builder बॉडी संपादनों को भेजे जाने से पहले एक सुरक्षित पुश पथ की आवश्यकता होती है।",
@@ -2417,6 +2444,9 @@ const databaseMessagesByLocale = {
     preparedUpdateAlreadyCancelled: "كان تحديث Builder المُعَد ملغى بالفعل",
     cancelPreparedUpdateFailed: "لم يتم إلغاء تحديث Builder المُعَد",
     whatChanged: "ما الذي تغيّر",
+    bodyChangeComparison: "مقارنة تغيير المحتوى",
+    currentBody: "المحتوى الحالي",
+    proposedBody: "المحتوى المقترح",
     confirmUnpublish: "تأكيد إلغاء النشر",
     builderBodyEditsNeedSaferPath:
       "تتطلب تعديلات نص Builder مسار دفع أكثر أمانًا قبل أن يمكن إرسالها.",

package/corpus/templates/content/changelog/2026-08-12-toggle-blocks-now-follow-notion-style-enter-and-shift-tab-be.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-12
+---
+
+Toggle blocks now follow Notion-style Enter and Shift-Tab behavior while preserving summaries and nested paragraphs.