From 9d6da6080a16fabd52250af834d521819fec4768 Mon Sep 17 00:00:00 2001
From: Steven Le <387282+stevenle@users.noreply.github.com>
Date: Tue, 24 Feb 2026 09:48:15 -0800
Subject: [PATCH 1/3] fix(root-cms): add paste option to empty array field UI

---
 .../ui/components/DocEditor/DocEditor.css     |  5 +++
 .../ui/components/DocEditor/DocEditor.tsx     | 38 +++++++++++++++----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/packages/root-cms/ui/components/DocEditor/DocEditor.css b/packages/root-cms/ui/components/DocEditor/DocEditor.css
index cdf71cf3..c65f1691 100644
--- a/packages/root-cms/ui/components/DocEditor/DocEditor.css
+++ b/packages/root-cms/ui/components/DocEditor/DocEditor.css
@@ -415,6 +415,11 @@
   margin-top: 16px;
 }
 
+.DocEditor__ArrayField__add__actions {
+  display: flex;
+  gap: 4px;
+}
+
 .DocEditor__OneOfField__select {
   display: flex;
   gap: 8px;
diff --git a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
index 92771bf3..93d7d810 100644
--- a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
+++ b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
@@ -1239,14 +1239,36 @@ DocEditor.ArrayField = (props: FieldProps) => {
 
   const addButtonRow = (
     <div className="DocEditor__ArrayField__add">
-      <Button
-        color="dark"
-        size="xs"
-        leftIcon={<IconCirclePlus size={16} />}
-        onClick={() => add()}
-      >
-        {field.buttonLabel || 'Add'}
-      </Button>
+      <div className="DocEditor__ArrayField__add__actions">
+        <Button
+          color="dark"
+          size="xs"
+          leftIcon={<IconCirclePlus size={16} />}
+          onClick={() => add()}
+        >
+          {field.buttonLabel || 'Add'}
+        </Button>
+        <Menu withArrow position="bottom-end">
+          <Menu.Target>
+            <Button
+              color="dark"
+              size="xs"
+              px={8}
+              aria-label="More add options"
+            >
+              <IconChevronDown size={16} />
+            </Button>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item
+              leftSection={<IconClipboardCopy size={16} />}
+              onClick={() => pasteFromVirtualClipboard(order.length - 1)}
+            >
+              Paste
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </div>
     </div>
   );
 

From 7d288f3ae871d724ac64d701a2b132738b2cb142 Mon Sep 17 00:00:00 2001
From: Steven Le <stevenle08@gmail.com>
Date: Wed, 25 Feb 2026 16:29:11 -0800
Subject: [PATCH 2/3] chore: update styles

---
 .../ui/components/DocEditor/DocEditor.css     |  7 +-
 .../ui/components/DocEditor/DocEditor.tsx     | 72 +++++++++----------
 2 files changed, 36 insertions(+), 43 deletions(-)

diff --git a/packages/root-cms/ui/components/DocEditor/DocEditor.css b/packages/root-cms/ui/components/DocEditor/DocEditor.css
index c65f1691..5ce4abbf 100644
--- a/packages/root-cms/ui/components/DocEditor/DocEditor.css
+++ b/packages/root-cms/ui/components/DocEditor/DocEditor.css
@@ -380,11 +380,11 @@
   background-color: var(--button-background-active);
 }
 
-.DocEditor__ArrayField__item__header__controls__menu__item {
+.DocEditor__ArrayField__menu__item {
   padding: 6px 10px;
 }
 
-.DocEditor__ArrayField__item__header__controls__menu__item .mantine-Menu-itemLabel {
+.DocEditor__ArrayField__menu__item .mantine-Menu-itemLabel {
   font-size: 12px;
 }
 
@@ -413,9 +413,6 @@
 
 .DocEditor__ArrayField__add {
   margin-top: 16px;
-}
-
-.DocEditor__ArrayField__add__actions {
   display: flex;
   gap: 4px;
 }
diff --git a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
index 93d7d810..08e2776e 100644
--- a/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
+++ b/packages/root-cms/ui/components/DocEditor/DocEditor.tsx
@@ -1239,36 +1239,32 @@ DocEditor.ArrayField = (props: FieldProps) => {
 
   const addButtonRow = (
     <div className="DocEditor__ArrayField__add">
-      <div className="DocEditor__ArrayField__add__actions">
-        <Button
-          color="dark"
-          size="xs"
-          leftIcon={<IconCirclePlus size={16} />}
-          onClick={() => add()}
+      <Button
+        className="DocEditor__ArrayField__add__button"
+        color="dark"
+        size="xs"
+        leftIcon={<IconCirclePlus size={16} />}
+        onClick={() => add()}
+      >
+        {field.buttonLabel || 'Add'}
+      </Button>
+      <Menu
+        className="DocEditor__ArrayField__add__menu"
+        control={
+          <ActionIcon className="DocEditor__ArrayField__item__header__controls__dots">
+            <IconDotsVertical size={16} />
+          </ActionIcon>
+        }
+      >
+        <Menu.Label>CLIPBOARD</Menu.Label>
+        <Menu.Item
+          className="DocEditor__ArrayField__menu__item"
+          icon={<IconRowInsertBottom size={18} />}
+          onClick={() => pasteFromVirtualClipboard(order.length - 1)}
         >
-          {field.buttonLabel || 'Add'}
-        </Button>
-        <Menu withArrow position="bottom-end">
-          <Menu.Target>
-            <Button
-              color="dark"
-              size="xs"
-              px={8}
-              aria-label="More add options"
-            >
-              <IconChevronDown size={16} />
-            </Button>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <Menu.Item
-              leftSection={<IconClipboardCopy size={16} />}
-              onClick={() => pasteFromVirtualClipboard(order.length - 1)}
-            >
-              Paste
-            </Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-      </div>
+          Paste item to end
+        </Menu.Item>
+      </Menu>
     </div>
   );
 
@@ -1401,21 +1397,21 @@ DocEditor.ArrayField = (props: FieldProps) => {
                               >
                                 <Menu.Label>INSERT</Menu.Label>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconRowInsertTop size={18} />}
                                   onClick={() => insertBefore(i)}
                                 >
                                   Add before
                                 </Menu.Item>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconRowInsertBottom size={18} />}
                                   onClick={() => insertAfter(i)}
                                 >
                                   Add after
                                 </Menu.Item>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconCopy size={18} />}
                                   onClick={() => duplicate(i)}
                                 >
@@ -1423,14 +1419,14 @@ DocEditor.ArrayField = (props: FieldProps) => {
                                 </Menu.Item>
                                 <Menu.Label>CLIPBOARD</Menu.Label>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconClipboardCopy size={18} />}
                                   onClick={() => copyToVirtualClipboard(i)}
                                 >
                                   Copy
                                 </Menu.Item>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconRowInsertTop size={18} />}
                                   onClick={async () =>
                                     pasteBefore(i, await virtualClipboard.get())
@@ -1439,7 +1435,7 @@ DocEditor.ArrayField = (props: FieldProps) => {
                                   Paste before
                                 </Menu.Item>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconRowInsertBottom size={18} />}
                                   onClick={async () =>
                                     pasteAfter(i, await virtualClipboard.get())
@@ -1449,7 +1445,7 @@ DocEditor.ArrayField = (props: FieldProps) => {
                                 </Menu.Item>
                                 <Menu.Label>CODE</Menu.Label>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconBraces size={18} />}
                                   onClick={() => editJson(i)}
                                 >
@@ -1457,7 +1453,7 @@ DocEditor.ArrayField = (props: FieldProps) => {
                                 </Menu.Item>
                                 {experiments.ai && (
                                   <Menu.Item
-                                    className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                    className="DocEditor__ArrayField__menu__item"
                                     icon={
                                       <IconSparkles size={18} stroke="1.75" />
                                     }
@@ -1468,7 +1464,7 @@ DocEditor.ArrayField = (props: FieldProps) => {
                                 )}
                                 <Menu.Label>REMOVE</Menu.Label>
                                 <Menu.Item
-                                  className="DocEditor__ArrayField__item__header__controls__menu__item"
+                                  className="DocEditor__ArrayField__menu__item"
                                   icon={<IconTrash size={18} />}
                                   onClick={() => removeAt(i)}
                                 >

From b82968fd12a3ee73fbfacebcb133ff96c5870dea Mon Sep 17 00:00:00 2001
From: Steven Le <stevenle08@gmail.com>
Date: Wed, 25 Feb 2026 16:29:43 -0800
Subject: [PATCH 3/3] chore: add changeset

---
 .changeset/orange-pans-worry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/orange-pans-worry.md

diff --git a/.changeset/orange-pans-worry.md b/.changeset/orange-pans-worry.md
new file mode 100644
index 00000000..8c0e455d
--- /dev/null
+++ b/.changeset/orange-pans-worry.md
@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: enable paste for empty array fields