@kyro-cms/admin 0.12.1 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "engines": {
     "node": ">=22"
   },

package/src/components/AutoForm.tsx

@@ -568,7 +568,7 @@ export function AutoForm({
         const result = await response.json();
         const savedData = result.data || data;
         setFormData({ ...formData, ...savedData });
-        setLastSavedData({ ...formData, ...savedData });
+        markSaved();
         lastAutoSaveTimeRef.current = Date.now();
         setAutoSaveStatus("success");
         setLocalSaveStatus("saved");
@@ -631,7 +631,7 @@ export function AutoForm({
         const result = await response.json();
         const savedData = result.data || data;
         setFormData({ ...formData, ...savedData });
-        setLastSavedData({ ...formData, ...savedData });
+        markSaved();
         dataToPublish = { ...formData, ...savedData };
       }
 
@@ -640,8 +640,17 @@ export function AutoForm({
       const response = await saveDocument(data, false);
 
       if (response?.ok) {
+        const result = await response.json().catch(() => ({}));
+        const savedData = result.data || data;
+        setFormData({ ...formData, ...savedData });
+        markSaved();
         setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
+        
+        setTimeout(() => {
+          setLocalSaveStatus("idle");
+        }, 2000);
+
         if (isNewDoc && !globalSlug && dataToPublish.id) {
           setTimeout(() => {
             window.location.href = `${ADMIN_BASE}/${collectionSlug}/${dataToPublish.id}`;

package/src/components/fields/AccordionField.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { ChevronDown, ChevronUp, Plus, X } from "../ui/icons";
+import React, { useState, useCallback } from "react";
+import { ChevronDown, ChevronUp, Plus, X, Copy, ClipboardPaste, Check } from "../ui/icons";
 
 interface AccordionItem {
   title: string;
@@ -17,7 +17,56 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
   onChange,
   compact = false,
 }) => {
-  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const payload = JSON.stringify({ __kyro_accordion: true, items });
+      await navigator.clipboard.writeText(payload);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy", err);
+    }
+  }, [items]);
+
+  const handlePaste = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const text = await navigator.clipboard.readText();
+      const parsed = JSON.parse(text);
+      if (parsed && parsed.__kyro_accordion && Array.isArray(parsed.items)) {
+        onChange([...items, ...parsed.items]);
+      }
+    } catch (err) {
+      console.error("Failed to paste", err);
+    }
+  }, [items, onChange]);
+
+  const headerControls = (
+    <div className="flex justify-end gap-1 mb-2">
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+        title="Copy Items"
+      >
+        {copied ? <Check className="w-3.5 h-3.5 text-green-500" /> : <Copy className="w-3.5 h-3.5" />}
+      </button>
+      <button
+        type="button"
+        onClick={handlePaste}
+        className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+        title="Paste Items"
+      >
+        <ClipboardPaste className="w-3.5 h-3.5" />
+      </button>
+    </div>
+  );
 
   const handleTitleChange = (index: number, value: string) => {
     const newItems = [...items];
@@ -52,6 +101,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
   if (compact) {
     return (
       <div className="space-y-2">
+        {headerControls}
         {items.length === 0 ? (
           <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
             No items. Click "Add Item" to create one.
@@ -134,6 +184,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
 
   return (
     <div className="space-y-2">
+      {headerControls}
       {items.length === 0 ? (
         <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
           No items. Click "Add Item" to create one.

package/src/components/fields/BlocksField.tsx

@@ -14,6 +14,8 @@ import {
 import { Check, ClipboardCopy } from "lucide-react";
 import { GenericBlock } from "../blocks/GenericBlock";
 import { BlockEditModal } from "../blocks/BlockEditModal";
+import { deepEqual } from "../../lib/deep-equal";
+import { toast } from "../../lib/stores";
 import {
 
   DndContext,
@@ -499,7 +501,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     const lastValueArray = lastValueRef.current || [];
 
     // Deep compare to catch external data changes (e.g. discard draft / auto-save restore)
-    if (JSON.stringify(valueArray) !== JSON.stringify(lastValueArray)) {
+    if (!deepEqual(valueArray, lastValueArray)) {
       const valueArrayCopy = [...valueArray];
       prevBlocksLengthRef.current = valueArrayCopy.length;
       prevBlockIdsRef.current = new Set(valueArrayCopy.map((b: Record<string, unknown>) => b.id));
@@ -521,7 +523,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     if (!lastValue) return; // Wait until initialized
 
     // Deep compare blocks vs lastValue to detect content edits, not just ID changes
-    if (JSON.stringify(blocks) !== JSON.stringify(lastValue)) {
+    if (!deepEqual(blocks, lastValue)) {
       lastValueRef.current = [...blocks]; // Update ref BEFORE firing onChange to prevent loops
       onChangeRef.current(blocks);
     }
@@ -569,6 +571,33 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     setIsDrawerOpen(false);
   }, [field.blocks, blocks, store]);
 
+  const handleContainerPaste = useCallback((e: React.ClipboardEvent<HTMLDivElement>) => {
+    const activeEl = document.activeElement;
+    if (
+      activeEl &&
+      (activeEl.tagName === "INPUT" ||
+        activeEl.tagName === "TEXTAREA" ||
+        activeEl.getAttribute("contenteditable") === "true")
+    ) {
+      return;
+    }
+
+    const text = e.clipboardData?.getData("text");
+    if (!text) return;
+
+    try {
+      const parsed = JSON.parse(text);
+      if (parsed && parsed.__kyro_block) {
+        e.preventDefault();
+        e.stopPropagation();
+        handlePasteBlock(parsed);
+        toast.success(`Block pasted: ${parsed.type}`);
+      }
+    } catch {
+      // Ignore
+    }
+  }, [handlePasteBlock]);
+
   const duplicateBlock = useCallback(
     (blockId: string) => {
       const blockIndex = blocks.findIndex((b) => b.id === blockId);
@@ -689,7 +718,12 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
 
   return (
     <BlocksContext.Provider value={storeRef.current}>
-      <div className="kyro-blocks-field">
+      <div 
+        className="kyro-blocks-field"
+        onPaste={handleContainerPaste}
+        tabIndex={0}
+        style={{ outline: "none" }}
+      >
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}

package/src/components/fields/GroupLayout.tsx

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useState, useCallback } from "react";
+import type { Field } from "@kyro-cms/core/client";
+import { Copy, ClipboardPaste, Check } from "../ui/icons";
 import type { Field } from "@kyro-cms/core/client";
 
 interface GroupLayoutProps {
@@ -19,12 +21,60 @@ export function GroupLayout({
   renderField,
 }: GroupLayoutProps) {
   const groupData = value || {};
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const payload = JSON.stringify({ __kyro_container: true, value: groupData });
+      await navigator.clipboard.writeText(payload);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy", err);
+    }
+  }, [groupData]);
+
+  const handlePaste = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const text = await navigator.clipboard.readText();
+      const parsed = JSON.parse(text);
+      if (parsed && (parsed.__kyro_group || parsed.__kyro_container) && parsed.value) {
+        onChange({ ...groupData, ...parsed.value });
+      }
+    } catch (err) {
+      console.error("Failed to paste", err);
+    }
+  }, [groupData, onChange]);
 
   return (
     <div className="kyro-form-group border border-[var(--kyro-border)] rounded-[var(--kyro-radius-lg)] p-6 bg-[var(--kyro-surface-accent)]/30">
-      <h3 className="text-sm font-bold tracking-widest text-[var(--kyro-text-primary)] mb-6 border-b border-[var(--kyro-border)] pb-2 inline-block">
-        {field.label || field.name}
-      </h3>
+      <div className="flex items-center justify-between mb-6 border-b border-[var(--kyro-border)] pb-2">
+        <h3 className="text-sm font-bold tracking-widest text-[var(--kyro-text-primary)]">
+          {field.label || field.name}
+        </h3>
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+            title="Copy Group Data"
+          >
+            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+          </button>
+          <button
+            type="button"
+            onClick={handlePaste}
+            className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+            title="Paste Group Data"
+          >
+            <ClipboardPaste className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
       <div className={field.admin?.inline ? "flex items-start gap-4" : "space-y-6"}>
         {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
           renderField(f, groupData, onChange),

package/src/components/fields/TabsLayout.tsx

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import type { Field } from "@kyro-cms/core/client";
 import { SeoPreview } from "../ui/SeoPreview";
+import { Copy, ClipboardPaste, Check } from "../ui/icons";
 
 interface TabsLayoutProps {
   field: Field;
@@ -29,22 +30,72 @@ export function TabsLayout({
     ? (formData[field.name] as Record<string, unknown>) || {}
     : formData;
 
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const payload = JSON.stringify({ __kyro_container: true, value: tabData });
+      await navigator.clipboard.writeText(payload);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy", err);
+    }
+  }, [tabData]);
+
+  const handlePaste = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    try {
+      const text = await navigator.clipboard.readText();
+      const parsed = JSON.parse(text);
+      if (parsed && (parsed.__kyro_group || parsed.__kyro_container) && parsed.value) {
+        onTabDataChange({ ...tabData, ...parsed.value });
+      }
+    } catch (err) {
+      console.error("Failed to paste", err);
+    }
+  }, [tabData, onTabDataChange]);
+
   return (
     <div className="space-y-8">
-      <div className="flex items-center gap-2 border-b border-[var(--kyro-border)] mb-6 overflow-x-auto hide-scrollbar">
-        {fieldTabs.map((tab: { label: string }, index: number) => (
+      <div className="flex items-center justify-between border-b border-[var(--kyro-border)] mb-6">
+        <div className="flex items-center gap-2 overflow-x-auto hide-scrollbar">
+          {fieldTabs.map((tab: { label: string }, index: number) => (
+            <button
+              key={index}
+              type="button"
+              className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${
+                activeTab === index
+                  ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
+                  : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
+              }`}
+              onClick={() => setActiveTab(index)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-1 pr-2">
           <button
-            key={index}
             type="button"
-            className={`px-6 py-3 text-sm  tracking-widest font-medium transition-all border-b-2 -mb-[1px] whitespace-nowrap ${activeTab === index
-              ? "border-[var(--kyro-primary)] text-[var(--kyro-primary)]"
-              : "border-transparent text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] opacity-60 hover:opacity-100"
-              }`}
-            onClick={() => setActiveTab(index)}
+            onClick={handleCopy}
+            className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+            title="Copy Tab Data"
           >
-            {tab.label}
+            {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
           </button>
-        ))}
+          <button
+            type="button"
+            onClick={handlePaste}
+            className="p-1.5 text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors rounded hover:bg-[var(--kyro-surface)]"
+            title="Paste Tab Data"
+          >
+            <ClipboardPaste className="w-4 h-4" />
+          </button>
+        </div>
       </div>
       <div className="space-y-6">
         {currentTab?.fields.map((f: Field) =>

package/src/components/fields/UploadField.tsx

@@ -96,6 +96,8 @@ export function UploadField({
   const currentValue = Array.isArray(value) ? value : value ? [value] : [];
   const canAddMore = currentValue.length < maxCount;
 
+  const [fetchedDetails, setFetchedDetails] = useState<Record<string, any>>({});
+
   useEffect(() => {
     const fetchMissingDetails = async () => {
       const idsToFetch = currentValue
@@ -111,37 +113,29 @@ export function UploadField({
         .map(item => item.id as string);
 
       const allIds = [...idsToFetch, ...objectIdsToFetch];
-      if (allIds.length === 0) return;
+      const missingIds = allIds.filter(id => !fetchedDetails[id]);
+
+      if (missingIds.length === 0) return;
 
       try {
         const fetchedItems = await Promise.all(
-          allIds.map(id => apiGet<any>(`/api/media/${id}`))
+          missingIds.map(id => apiGet<any>(`/api/media/${id}`))
         );
 
-        const newItems = [...currentValue];
-        fetchedItems.forEach(fetchedItem => {
-          const id = fetchedItem.id as string;
-          const strIndex = newItems.findIndex(item => item === id);
-          if (strIndex !== -1) {
-            newItems[strIndex] = fetchedItem;
-            return;
-          }
-          const objIndex = newItems.findIndex(
-            item => typeof item === 'object' && item !== null && (item as any).id === id
-          );
-          if (objIndex !== -1) {
-            newItems[objIndex] = fetchedItem;
-          }
+        setFetchedDetails(prev => {
+          const next = { ...prev };
+          fetchedItems.forEach(item => {
+            if (item && item.id) next[item.id] = item;
+          });
+          return next;
         });
-
-        onChange(isMultiple ? newItems : newItems[0]);
       } catch (err) {
         console.error("Failed to fetch media details:", err);
       }
     };
 
     fetchMissingDetails();
-  }, [value]);
+  }, [value, fetchedDetails]);
 
   useEffect(() => {
     if (showPicker) {
@@ -303,8 +297,10 @@ export function UploadField({
     );
   }
 
-  const renderImagePreview = (img: any, index?: number) => {
-    if (!img) return null;
+  const renderImagePreview = (rawImg: any, index?: number) => {
+    if (!rawImg) return null;
+    const id = typeof rawImg === 'string' ? rawImg : rawImg.id;
+    const img = fetchedDetails[id] || (typeof rawImg === 'object' ? rawImg : { id });
     const fileType = getFileType(img.mimeType, img.filename || img.url);
     const isImage = fileType === "image";
 

package/src/components/ui/SplitButton.tsx

@@ -33,7 +33,7 @@ export function SplitButton({
   const isPublishedIdle =
     status === "published" && !hasChanges && saveStatus !== "saving" && saveStatus !== "error";
 
-  const isDisabled = disabled || saveStatus === "saving" || isPublishedIdle;
+  const isDisabled = disabled || saveStatus === "saving" || isPublishedIdle || saveStatus === "saved";
 
   // ── button colour ──────────────────────────────────────────────────────────
   const btnBase =
@@ -41,7 +41,7 @@ export function SplitButton({
 
   const getBtnClass = () => {
     if (saveStatus === "saving") return `${btnBase} bg-[var(--kyro-primary)]/70 border-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] cursor-wait`;
-    if (saveStatus === "saved")  return `${btnBase} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)]`;
+    if (saveStatus === "saved")  return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
     if (saveStatus === "error")  return `${btnBase} bg-[var(--kyro-error)]   border-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)]`;
     if (isPublishedIdle)         return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
     // has changes → accent
@@ -53,7 +53,7 @@ export function SplitButton({
 
   const getChevronClass = () => {
     if (saveStatus === "saving") return `${chevronBase} bg-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)]/70`;
-    if (saveStatus === "saved")  return `${chevronBase} bg-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-success)]`;
+    if (saveStatus === "saved")  return `${chevronBase} bg-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] border-[var(--kyro-gray-200)]`;
     if (saveStatus === "error")  return `${chevronBase} bg-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-error)]`;
     if (isPublishedIdle)         return `${chevronBase} bg-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] border-[var(--kyro-gray-200)]`;
     return `${chevronBase} bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
@@ -62,7 +62,7 @@ export function SplitButton({
   // ── label ──────────────────────────────────────────────────────────────────
   const getLabel = () => {
     if (saveStatus === "saving") return "Publishing...";
-    if (saveStatus === "saved")  return "Published ✓";
+    if (saveStatus === "saved")  return "Published";
     if (saveStatus === "error")  return "Retry";
     if (isPublishedIdle)         return "Published";
     return "Publish Changes";
@@ -78,7 +78,7 @@ export function SplitButton({
         className={`${getBtnClass()} ${!children ? "rounded-r-lg border-r border-[var(--kyro-border)]" : ""}`}
       >
         {saveStatus === "saving" && <Spinner size="sm" className="inline mr-1.5" />}
-        {isPublishedIdle && (
+        {(isPublishedIdle || saveStatus === "saved") && (
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" className="inline mr-1">
             <polyline points="20 6 9 17 4 12" />
           </svg>

package/src/lib/autoform-store.ts

@@ -4,6 +4,8 @@ import type { StateStorage } from "zustand/middleware";
 import { createStorage } from "unstorage";
 import indexedbDriver from "unstorage/drivers/indexedb";
 import type { Version } from "@kyro-cms/core/client";
+import { deepEqual, isEmpty } from "./deep-equal";
+import { normalizeUploadFields } from "./normalize-upload-fields";
 
 let storageInstance: ReturnType<typeof createStorage> | null = null;
 let storageReady = false;
@@ -205,11 +207,15 @@ export const useAutoFormStore = create<AutoFormStore>()(
 
 
       // Field update actions
-setField: (field: string, value: unknown) => {
+        setField: (field: string, value: unknown) => {
          const state = get();
          const newDirty = new Set(state.dirtyFields);
-         // Mark dirty if value differs from last saved baseline
-         if (JSON.stringify(value) !== JSON.stringify(state.lastSavedData[field])) {
+         // Mark dirty if value differs from last saved baseline (normalized to strip full media details)
+         const normalizedValue = normalizeUploadFields(value);
+         const normalizedLastSaved = normalizeUploadFields(state.lastSavedData[field]);
+         if (isEmpty(normalizedValue) && isEmpty(normalizedLastSaved)) {
+           newDirty.delete(field);
+         } else if (!deepEqual(normalizedValue, normalizedLastSaved)) {
            newDirty.add(field);
          } else {
            newDirty.delete(field);

package/src/lib/deep-equal.ts

@@ -0,0 +1,73 @@
+/**
+ * Performs a deep equality check between two values.
+ * Ignores the order of keys in objects.
+ */
+export function deepEqual(obj1: any, obj2: any): boolean {
+  if (obj1 === obj2) {
+    return true;
+  }
+
+  if (
+    typeof obj1 !== "object" ||
+    obj1 === null ||
+    typeof obj2 !== "object" ||
+    obj2 === null
+  ) {
+    return false;
+  }
+
+  if (Array.isArray(obj1) && Array.isArray(obj2)) {
+    if (obj1.length !== obj2.length) {
+      return false;
+    }
+    for (let i = 0; i < obj1.length; i++) {
+      if (!deepEqual(obj1[i], obj2[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  if (Array.isArray(obj1) || Array.isArray(obj2)) {
+    return false;
+  }
+
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (!Object.prototype.hasOwnProperty.call(obj2, key)) {
+      return false;
+    }
+    if (!deepEqual(obj1[key], obj2[key])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Checks if a value is "empty-like" (undefined, null, empty string, false, empty array, or empty object).
+ * This helps prevent false dirty states when form fields initialize with default empty values.
+ */
+export function isEmpty(val: any): boolean {
+  if (val === undefined || val === null || val === "" || val === false) {
+    return true;
+  }
+  if (Array.isArray(val)) {
+    return val.length === 0;
+  }
+  if (typeof val === "object") {
+    if (Object.keys(val).length === 0) return true;
+    if (val.type === "doc" && Array.isArray(val.content)) {
+      return val.content.length === 0 || (val.content.length === 1 && val.content[0].type === "paragraph" && !val.content[0].content);
+    }
+  }
+  return false;
+}
+