@agent-native/core 0.157.3 → 0.157.4

package/corpus/templates/content/app/components/editor/database/DatabaseView.tsx

@@ -10,6 +10,7 @@ import {
   useBuilderConnectFlow,
   useBuilderStatus,
 } from "@agent-native/core/client/settings";
+import { DataGrid, type DataGridColumn } from "@agent-native/toolkit/data-grid";
 import {
   CONTENT_DATABASE_PERSONAL_VIEW_OVERRIDES_VERSION,
   type BuilderCmsModelSummary,
@@ -4904,6 +4905,16 @@ function DatabaseItemPreview({
     if (controller) scheduleDraftWrite(controller);
   }
 
+  async function handleContentSaveNow(nextContent: string) {
+    setLocalContent(nextContent);
+    if (!previewCanEdit || !document) return false;
+    const controller = saveControllerRef.current;
+    if (!controller) return false;
+    controller.changeContent(nextContent);
+    await controller.flush();
+    return controller.lastSaved.content === nextContent;
+  }
+
   function keepLocalBodyDraft() {
     if (!activeBodyDraftConflict) return;
     const controller = peekPreviewDocumentSaveController(documentId);
@@ -5222,6 +5233,7 @@ function DatabaseItemPreview({
                     documentId={previewDocument.id}
                     content={localContent}
                     onChange={handleContentChange}
+                    onSaveContent={handleContentSaveNow}
                     ydoc={null}
                     editable={previewCanEdit}
                   />
@@ -5535,6 +5547,36 @@ function DatabaseTableView({
   const actionColumnWidth = cleanDefaultTable
     ? EMPTY_DEFAULT_ADD_PROPERTY_COLUMN_WIDTH
     : ACTION_COLUMN_WIDTH;
+  const dataGridColumns = useMemo<DataGridColumn<ContentDatabaseItem>[]>(
+    () => [
+      {
+        id: "name",
+        width: DEFAULT_NAME_COLUMN_WIDTH,
+        minWidth: MIN_COLUMN_WIDTH,
+        maxWidth: MAX_COLUMN_WIDTH,
+        resizable: false,
+      },
+      ...properties.map((property) => ({
+        id: property.definition.id,
+        width: DEFAULT_PROPERTY_COLUMN_WIDTH,
+        minWidth: MIN_COLUMN_WIDTH,
+        maxWidth: MAX_COLUMN_WIDTH,
+        resizable: false,
+      })),
+      ...(canEdit
+        ? [
+            {
+              id: "actions",
+              width: actionColumnWidth,
+              minWidth: actionColumnWidth,
+              maxWidth: actionColumnWidth,
+              resizable: false,
+            },
+          ]
+        : []),
+    ],
+    [actionColumnWidth, canEdit, properties],
+  );
   const rowDraggingEnabled =
     canEdit &&
     rowsAreManuallyOrdered &&
@@ -5884,12 +5926,18 @@ function DatabaseTableView({
           }}
         />
       ) : null}
-      <div
-        data-database-scroll-surface="table"
-        tabIndex={0}
-        className="w-full min-w-0 max-w-full overflow-x-auto overscroll-x-contain"
-      >
-        <div className="w-max min-w-full min-w-[720px]">
+      {/* DataGrid preserves the table contract: data-database-scroll-surface="table", tabIndex={0}, and min-w-0 max-w-full overflow-x-auto. */}
+      <DataGrid
+        rows={items}
+        columns={dataGridColumns}
+        getRowId={(item) => item.id}
+        columnWidths={columnWidths}
+        contentClassName="min-w-[720px]"
+        scrollContainerProps={{
+          "data-database-scroll-surface": "table",
+          tabIndex: 0,
+        }}
+        renderHeader={() => (
           <div
             className="grid border-y border-border/35 text-xs font-medium text-muted-foreground/80"
             style={{
@@ -5971,146 +6019,149 @@ function DatabaseTableView({
               </div>
             ) : null}
           </div>
-
-          {databaseTableShouldShowBlockingLoader(isLoading, items.length) ? (
-            <div className="flex h-16 items-center gap-2 border-t border-border px-2 text-sm text-muted-foreground">
-              <Spinner className="size-4" />
-              {dbText("loadingDatabase")}
-            </div>
-          ) : (
-            <>
-              {databaseViewHasNoMatchingPages(
-                items.length,
-                hasSearch,
-                activeFilters.length,
-              ) ? (
-                <DatabaseNoMatchingPages
-                  className="border-t border-border"
-                  label={dbText("noRowsMatchThisView")}
-                  onClear={onClearResultConstraints}
-                />
-              ) : null}
-              {grouped
-                ? groups.map((group) => (
-                    <DatabaseGroupedTableSection
-                      key={group.id}
-                      group={group}
+        )}
+        renderBody={() => (
+          <>
+            {databaseTableShouldShowBlockingLoader(isLoading, items.length) ? (
+              <div className="flex h-16 items-center gap-2 border-t border-border px-2 text-sm text-muted-foreground">
+                <Spinner className="size-4" />
+                {dbText("loadingDatabase")}
+              </div>
+            ) : (
+              <>
+                {databaseViewHasNoMatchingPages(
+                  items.length,
+                  hasSearch,
+                  activeFilters.length,
+                ) ? (
+                  <DatabaseNoMatchingPages
+                    className="border-t border-border"
+                    label={dbText("noRowsMatchThisView")}
+                    onClear={onClearResultConstraints}
+                  />
+                ) : null}
+                {grouped
+                  ? groups.map((group) => (
+                      <DatabaseGroupedTableSection
+                        key={group.id}
+                        group={group}
+                        properties={properties}
+                        columnWidths={columnWidths}
+                        databaseDocumentId={databaseDocumentId}
+                        workspaceCatalog={isWorkspaceCatalog}
+                        workspaceCreationPropertyValues={
+                          workspaceCreationPropertyValues
+                        }
+                        canEdit={canEdit}
+                        selectedIdSet={selectedIdSet}
+                        wrapCells={wrapCells}
+                        rowDensity={rowDensity}
+                        isCreating={isCreating}
+                        newRowLabel={newRowLabel}
+                        focusedTitleDocumentId={focusedTitleDocumentId}
+                        collapsed={databaseGroupIsCollapsed(
+                          collapsedGroupIds,
+                          group.id,
+                        )}
+                        onCreateRow={onCreateGroupedRow}
+                        onTitleFocusHandled={onTitleFocusHandled}
+                        onCollapsedChange={(collapsed) =>
+                          onGroupCollapsedChange(group.id, collapsed)
+                        }
+                        onToggleCheckbox={toggleCheckboxCell}
+                        onToggleRowSelection={onToggleRowSelection}
+                        onPreview={onPreview}
+                        onDeletedPreviewItem={onDeletedPreviewItem}
+                        onOpenPage={onOpenPage}
+                      />
+                    ))
+                  : items.map((item, index) => (
+                      <DatabaseTableRow
+                        key={item.id}
+                        item={item}
+                        databaseDocumentId={databaseDocumentId}
+                        workspaceCatalog={isWorkspaceCatalog}
+                        properties={properties}
+                        columnWidths={columnWidths}
+                        canEdit={canEdit}
+                        rowIndex={index}
+                        canReorder={rowsAreManuallyOrdered}
+                        canDragRow={rowDraggingEnabled}
+                        canMoveUp={rowsAreManuallyOrdered && index > 0}
+                        canMoveDown={
+                          rowsAreManuallyOrdered && index < items.length - 1
+                        }
+                        selected={selectedIdSet.has(item.id)}
+                        isDragging={draggedItemId === item.id}
+                        isDropTarget={
+                          !!draggedItemId &&
+                          dropTargetItemId === item.id &&
+                          draggedItemId !== item.id
+                        }
+                        startEditingTitle={
+                          focusedTitleDocumentId === item.document.id
+                        }
+                        onDragHandlePointerDown={(event) =>
+                          startRowDrag(item.id, event)
+                        }
+                        onToggleCheckbox={(property) =>
+                          void toggleCheckboxCell(item, property)
+                        }
+                        wrapCells={wrapCells}
+                        rowDensity={rowDensity}
+                        onToggleSelected={() => onToggleRowSelection(item.id)}
+                        onPreviewItem={onPreview}
+                        onDeletedPreviewItem={onDeletedPreviewItem}
+                        onTitleEditStarted={onTitleFocusHandled}
+                        onPreview={() => onPreview(item)}
+                        onOpenPage={() => onOpenPage(item)}
+                      />
+                    ))}
+                {canEdit && !grouped ? (
+                  isWorkspaceCatalog ? (
+                    <WorkspaceSourceMenuRow
+                      label={newRowLabel}
                       properties={properties}
                       columnWidths={columnWidths}
-                      databaseDocumentId={databaseDocumentId}
-                      workspaceCatalog={isWorkspaceCatalog}
-                      workspaceCreationPropertyValues={
-                        workspaceCreationPropertyValues
-                      }
-                      canEdit={canEdit}
-                      selectedIdSet={selectedIdSet}
-                      wrapCells={wrapCells}
                       rowDensity={rowDensity}
-                      isCreating={isCreating}
-                      newRowLabel={newRowLabel}
-                      focusedTitleDocumentId={focusedTitleDocumentId}
-                      collapsed={databaseGroupIsCollapsed(
-                        collapsedGroupIds,
-                        group.id,
-                      )}
-                      onCreateRow={onCreateGroupedRow}
-                      onTitleFocusHandled={onTitleFocusHandled}
-                      onCollapsedChange={(collapsed) =>
-                        onGroupCollapsedChange(group.id, collapsed)
-                      }
-                      onToggleCheckbox={toggleCheckboxCell}
-                      onToggleRowSelection={onToggleRowSelection}
-                      onPreview={onPreview}
-                      onDeletedPreviewItem={onDeletedPreviewItem}
-                      onOpenPage={onOpenPage}
+                      propertyValues={workspaceCreationPropertyValues}
+                      actionColumnWidth={actionColumnWidth}
                     />
-                  ))
-                : items.map((item, index) => (
-                    <DatabaseTableRow
-                      key={item.id}
-                      item={item}
-                      databaseDocumentId={databaseDocumentId}
-                      workspaceCatalog={isWorkspaceCatalog}
+                  ) : (
+                    <NewDatabaseRow
+                      label={newRowLabel}
                       properties={properties}
                       columnWidths={columnWidths}
-                      canEdit={canEdit}
-                      rowIndex={index}
-                      canReorder={rowsAreManuallyOrdered}
-                      canDragRow={rowDraggingEnabled}
-                      canMoveUp={rowsAreManuallyOrdered && index > 0}
-                      canMoveDown={
-                        rowsAreManuallyOrdered && index < items.length - 1
-                      }
-                      selected={selectedIdSet.has(item.id)}
-                      isDragging={draggedItemId === item.id}
-                      isDropTarget={
-                        !!draggedItemId &&
-                        dropTargetItemId === item.id &&
-                        draggedItemId !== item.id
-                      }
-                      startEditingTitle={
-                        focusedTitleDocumentId === item.document.id
-                      }
-                      onDragHandlePointerDown={(event) =>
-                        startRowDrag(item.id, event)
-                      }
-                      onToggleCheckbox={(property) =>
-                        void toggleCheckboxCell(item, property)
-                      }
-                      wrapCells={wrapCells}
                       rowDensity={rowDensity}
-                      onToggleSelected={() => onToggleRowSelection(item.id)}
-                      onPreviewItem={onPreview}
-                      onDeletedPreviewItem={onDeletedPreviewItem}
-                      onTitleEditStarted={onTitleFocusHandled}
-                      onPreview={() => onPreview(item)}
-                      onOpenPage={() => onOpenPage(item)}
+                      disabled={isCreating}
+                      isPending={isCreating}
+                      onCreate={onCreateRow}
+                      actionColumnWidth={actionColumnWidth}
                     />
-                  ))}
-              {canEdit && !grouped ? (
-                isWorkspaceCatalog ? (
-                  <WorkspaceSourceMenuRow
-                    label={newRowLabel}
-                    properties={properties}
-                    columnWidths={columnWidths}
-                    rowDensity={rowDensity}
-                    propertyValues={workspaceCreationPropertyValues}
-                    actionColumnWidth={actionColumnWidth}
-                  />
-                ) : (
-                  <NewDatabaseRow
-                    label={newRowLabel}
-                    properties={properties}
-                    columnWidths={columnWidths}
-                    rowDensity={rowDensity}
-                    disabled={isCreating}
-                    isPending={isCreating}
-                    onCreate={onCreateRow}
+                  )
+                ) : null}
+                {cleanDefaultTable ? (
+                  <DatabaseBlankDefaultRows
+                    rowCount={EMPTY_DEFAULT_BLANK_ROW_COUNT}
                     actionColumnWidth={actionColumnWidth}
                   />
-                )
-              ) : null}
-              {cleanDefaultTable ? (
-                <DatabaseBlankDefaultRows
-                  rowCount={EMPTY_DEFAULT_BLANK_ROW_COUNT}
+                ) : null}
+                <DatabaseTableFooter
+                  properties={properties}
+                  items={items}
+                  totalCount={totalCount}
+                  constrained={constrained}
+                  columnWidths={columnWidths}
+                  canEdit={canEdit}
+                  calculations={calculations}
                   actionColumnWidth={actionColumnWidth}
+                  onCalculationChange={onCalculationChange}
                 />
-              ) : null}
-              <DatabaseTableFooter
-                properties={properties}
-                items={items}
-                totalCount={totalCount}
-                constrained={constrained}
-                columnWidths={columnWidths}
-                canEdit={canEdit}
-                calculations={calculations}
-                actionColumnWidth={actionColumnWidth}
-                onCalculationChange={onCalculationChange}
-              />
-            </>
-          )}
-        </div>
-      </div>
+              </>
+            )}
+          </>
+        )}
+      />
       <AlertDialog
         open={
           !removesFavoriteMembership &&

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

@@ -22,7 +22,6 @@ import {
 } from "@tabler/icons-react";
 import { NodeViewWrapper, type NodeViewProps } from "@tiptap/react";
 import {
-  type ChangeEvent,
   type FormEvent,
   type PointerEvent as ReactPointerEvent,
   useEffect,
@@ -52,7 +51,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-import { imageUploadErrorMessage, uploadImageFile } from "../image-upload";
+import { createImagePickerId } from "../image-upload";
 import type { ContentImageOptions } from "./ImageNode";
 
 type ImageSourceTab = "upload" | "assets" | "link";
@@ -69,7 +68,6 @@ const MIN_IMAGE_WIDTH = 160;
 const MAX_AGENT_IMAGE_DIMENSION = 1600;
 const ALT_TEXT_CONTEXT_WORD_LIMIT = 250;
 const DEFAULT_ASSETS_PICKER_URL = "https://assets.agent-native.com/picker";
-
 interface PickedAssetImagePayload {
   url?: unknown;
   previewUrl?: unknown;
@@ -515,7 +513,6 @@ export function ImageBlock({
   const [moreMenuOpen, setMoreMenuOpen] = useState(false);
   const [isGeneratingAlt, setIsGeneratingAlt] = useState(false);
   const [imageLoadFailed, setImageLoadFailed] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
   const altInputRef = useRef<HTMLInputElement>(null);
   const emptyBlockRef = useRef<HTMLDivElement>(null);
   const lightboxImageRef = useRef<HTMLImageElement>(null);
@@ -524,7 +521,9 @@ export function ImageBlock({
   const isEditable = editor.isEditable;
   const src = node.attrs.src as string;
   const alt = (node.attrs.alt as string) || "";
-  const isUploading = Boolean(node.attrs.uploadId);
+  const isUploading = String(node.attrs.uploadId ?? "").startsWith(
+    "image-upload-",
+  );
   const width = normalizedImageWidth(node.attrs.width);
   const activeWidth = dragWidth ?? width;
   const controlsVisible = isEditable && (isHovered || selected);
@@ -546,6 +545,12 @@ export function ImageBlock({
       ) {
         return;
       }
+      if (
+        !src &&
+        String(node.attrs.uploadId ?? "").startsWith("image-picker-")
+      ) {
+        updateAttributes({ uploadId: null });
+      }
       setSourcePanelOpen(false);
       setSourcePanelDismissed(true);
     }
@@ -553,7 +558,7 @@ export function ImageBlock({
     document.addEventListener("pointerdown", handlePointerDown, true);
     return () =>
       document.removeEventListener("pointerdown", handlePointerDown, true);
-  }, [selected, sourcePanelOpen]);
+  }, [node.attrs.uploadId, selected, sourcePanelOpen, src, updateAttributes]);
 
   function handleComment() {
     if (!options.onImageComment) return;
@@ -761,20 +766,25 @@ export function ImageBlock({
     };
   }, [updateAttributes]);
 
-  async function handleImageFilePicked(event: ChangeEvent<HTMLInputElement>) {
-    const file = event.currentTarget.files?.[0];
-    event.currentTarget.value = "";
-    if (!file) return;
+  function restoreEmptyPlaceholderSelection() {
+    if (src || typeof getPos !== "function") return;
+    const position = getPos();
+    if (typeof position !== "number") return;
+    editor.chain().focus().setNodeSelection(position).run();
+  }
 
-    const toastId = toast.loading(t("editor.media.uploadingImage"));
-    try {
-      const nextSrc = await uploadImageFile(file);
-      updateAttributes({ src: nextSrc });
-      setSourcePanelOpen(false);
-      toast.success(t("editor.media.imageAdded"), { id: toastId });
-    } catch (error) {
-      toast.error(imageUploadErrorMessage(error), { id: toastId });
-    }
+  function handleImageFileSelectionStart() {
+    if (isUploading) return;
+    if (typeof getPos !== "function") return;
+    const position = getPos();
+    if (typeof position !== "number") return;
+    const pickerId = String(node.attrs.uploadId || createImagePickerId());
+    if (!node.attrs.uploadId) updateAttributes({ uploadId: pickerId });
+    options.onImageFilePickerRequest?.({
+      pickerId,
+      position,
+      attrs: { ...node.attrs, uploadId: pickerId },
+    });
   }
 
   function handleEmbedLink(event: FormEvent<HTMLFormElement>) {
@@ -792,7 +802,7 @@ export function ImageBlock({
       return;
     }
 
-    updateAttributes({ src: nextSrc, alt });
+    updateAttributes({ src: nextSrc, alt, uploadId: null });
     setImageUrl("");
     setSourcePanelOpen(false);
   }
@@ -811,6 +821,10 @@ export function ImageBlock({
   function handleAssetsPickerMessage(name: string, payload: unknown) {
     if (name === "close") {
       setAssetsPickerOpen(false);
+      if (!src) {
+        updateAttributes({ uploadId: null });
+        restoreEmptyPlaceholderSelection();
+      }
       return;
     }
 
@@ -824,16 +838,25 @@ export function ImageBlock({
     updateAttributes({
       src: nextSrc,
       alt: pickedAssetImageAlt(payload) ?? alt,
+      uploadId: null,
     });
     setAssetsPickerOpen(false);
     toast.success(t("editor.media.imageAdded"));
   }
 
+  function handleAssetsPickerOpenChange(open: boolean) {
+    setAssetsPickerOpen(open);
+    if (!open && !src) {
+      updateAttributes({ uploadId: null });
+      restoreEmptyPlaceholderSelection();
+    }
+  }
+
   function renderAssetsPickerDialog() {
     return (
       <AssetsPickerDialog
         open={assetsPickerOpen}
-        onOpenChange={setAssetsPickerOpen}
+        onOpenChange={handleAssetsPickerOpenChange}
         url={assetsPickerUrl()}
         title={t("editor.media.assets")}
         embeddedTitle={t("editor.media.assetsImagePicker")}
@@ -856,6 +879,7 @@ export function ImageBlock({
             type="button"
             role="tab"
             aria-selected={sourceTab === "upload"}
+            disabled={isUploading}
             className="media-source-panel__tab"
             onClick={() => setSourceTab("upload")}
           >
@@ -865,6 +889,7 @@ export function ImageBlock({
             type="button"
             role="tab"
             aria-selected={sourceTab === "assets"}
+            disabled={isUploading}
             className="media-source-panel__tab"
             onClick={() => setSourceTab("assets")}
           >
@@ -874,6 +899,7 @@ export function ImageBlock({
             type="button"
             role="tab"
             aria-selected={sourceTab === "link"}
+            disabled={isUploading}
             className="media-source-panel__tab"
             onClick={() => setSourceTab("link")}
           >
@@ -887,14 +913,20 @@ export function ImageBlock({
               type="button"
               variant="outline"
               className="w-full"
-              onClick={() => fileInputRef.current?.click()}
+              disabled={isUploading}
+              onClick={handleImageFileSelectionStart}
             >
               {t("editor.media.uploadFile")}
             </Button>
           </div>
         ) : sourceTab === "assets" ? (
           <div className="media-source-panel__body">
-            <Button type="button" className="w-full" onClick={openAssetsPicker}>
+            <Button
+              type="button"
+              className="w-full"
+              disabled={isUploading}
+              onClick={openAssetsPicker}
+            >
               {t("editor.media.chooseFromAssets")}
             </Button>
           </div>
@@ -907,7 +939,7 @@ export function ImageBlock({
               onChange={(event) => setImageUrl(event.target.value)}
               placeholder={t("editor.media.pasteImageLink")}
             />
-            <Button type="submit" className="w-full">
+            <Button type="submit" className="w-full" disabled={isUploading}>
               {replace
                 ? t("editor.media.replaceImage")
                 : t("editor.media.embedImage")}
@@ -955,16 +987,6 @@ export function ImageBlock({
             </span>
           </button>
 
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/*"
-            className="hidden"
-            tabIndex={-1}
-            aria-hidden="true"
-            onChange={handleImageFilePicked}
-          />
-
           {showSourcePanel ? renderSourcePanel() : null}
           {renderAssetsPickerDialog()}
         </div>
@@ -973,7 +995,11 @@ export function ImageBlock({
   }
 
   return (
-    <NodeViewWrapper className="media-block-wrapper" data-drag-handle>
+    <NodeViewWrapper
+      className="media-block-wrapper"
+      data-drag-handle
+      data-image-upload-id={node.attrs.uploadId || undefined}
+    >
       <div
         ref={mediaBlockRef}
         className={`media-block ${selected ? "media-block--selected" : ""}`}
@@ -1017,16 +1043,6 @@ export function ImageBlock({
           />
         )}
 
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          className="hidden"
-          tabIndex={-1}
-          aria-hidden="true"
-          onChange={handleImageFilePicked}
-        />
-
         {isEditable && (alt.trim() || altPopoverOpen) ? (
           <Popover open={altPopoverOpen} onOpenChange={setAltPopoverOpen}>
             <Tooltip delayDuration={350}>

package/corpus/templates/content/app/components/editor/extensions/ImageNode.ts

@@ -7,6 +7,11 @@ import { ImageBlock } from "./ImageBlock";
 export interface ContentImageOptions extends ImageOptions {
   documentId?: string;
   onImageComment?: (quotedText: string, offsetTop: number) => void;
+  onImageFilePickerRequest?: (request: {
+    pickerId: string;
+    position: number;
+    attrs: Record<string, unknown>;
+  }) => void;
 }
 
 function normalizedImageWidth(value: unknown): number | null {
@@ -65,6 +70,7 @@ export const ImageNode = Image.extend<ContentImageOptions>({
       ...this.parent!(),
       documentId: undefined,
       onImageComment: undefined,
+      onImageFilePickerRequest: undefined,
     };
   },