@xleddyl/nuxt-cms 0.9.4 → 0.10.1

package/dist/runtime/app/components/cms/BlocksField.vue

@@ -1,123 +1,142 @@
 <template>
    <KStack gap="sm" class="cms-blocks-field">
-      <div class="cms-blocks-grid">
-         <div
-            v-for="(item, index) in items"
-            :key="uidFor(item)"
-            class="cms-block-tile"
-            :class="{
+      <KTileGrid
+         :items="items"
+         :item-key="(item2) => uidFor(item2)"
+         :item-label="barTitle"
+         :label="field.label"
+         :columns="4"
+         min-item-width="9rem"
+         sortable
+         :handle="mediaOnly ? void 0 : '[data-cms-grip]'"
+         :disabled="disabled"
+         @update:items="onReorder"
+         @keydown="onTileKey"
+         @copy="onClipboard"
+         @cut="onClipboard"
+         @paste="onClipboard"
+      >
+         <template #tile="{ item, index }">
+            <KCard
+               variant="outline"
+               padding="none"
+               :animated="false"
+               class="cms-block-tile"
+               :class="{
   'is-muted': isHidden(item),
-  'is-dragging': dragIndex === index,
-  'is-drop-target': dropIndex === index && dragIndex !== index,
   'is-missing': hasMissingMedia(item),
-  'is-media-only': mediaOnly
+  'is-invalid': tileInvalid(index)
 }"
-            draggable="true"
-            :tabindex="mediaOnly ? 0 : void 0"
-            :aria-label="mediaOnly ? `${barTitle(item)}, use the arrow keys to reorder` : void 0"
-            @dragstart="onDragStart(index, $event)"
-            @dragover.prevent="dropIndex = index"
-            @dragleave="onDragLeave(index)"
-            @drop.prevent="onDrop(index)"
-            @dragend="onDragEnd"
-            @keydown.self="onTileKey($event, index)"
-         >
-            <component
-               :is="mediaOnly ? 'div' : 'button'"
-               :type="mediaOnly ? void 0 : 'button'"
-               class="cms-block-preview"
-               :aria-label="mediaOnly ? void 0 : `Edit ${labelOf(item)}`"
-               @click="onPreviewClick(index)"
+               :data-cms-tile="index"
             >
-               <img
-                  v-if="previewOf(item)?.kind === 'image'"
-                  :src="previewOf(item).url"
-                  alt=""
-                  loading="lazy"
-               />
-               <video
-                  v-else-if="previewOf(item)?.kind === 'video'"
-                  :src="previewOf(item).url"
-                  preload="metadata"
-                  muted
-                  playsinline
-               />
-               <span v-else-if="summaryOf(item)" class="cms-block-summary">
-                  {{ summaryOf(item) }}
-               </span>
-               <KIcon v-else :name="cmsIcon(iconOf(item))" class="cms-block-icon" />
-
-               <KIcon v-if="isHidden(item)" name="eye-slash" class="cms-block-hidden" />
-
-               <template v-if="mediaOnly">
-                  <span
-                     v-if="hasMissingMedia(item)"
-                     class="cms-block-missing"
-                     title="Not found in the media library"
-                  >
-                     <KIcon name="exclamation-triangle" />
-                  </span>
-                  <button
-                     type="button"
-                     class="cms-block-remove"
-                     :aria-label="`Remove ${barTitle(item)}`"
-                     title="Remove"
-                     @click.stop="remove(index)"
+               <component
+                  :is="mediaOnly ? 'div' : 'button'"
+                  :type="mediaOnly ? void 0 : 'button'"
+                  class="cms-tile-preview"
+                  :aria-label="mediaOnly ? void 0 : `Edit ${labelOf(item)}`"
+                  @click="onPreviewClick(index)"
+               >
+                  <KThumbnail
+                     :src="previewOf(item)?.url"
+                     :kind="previewOf(item)?.kind ?? 'icon'"
+                     :icon="previewOf(item) ? void 0 : cmsIcon(iconOf(item))"
+                     :aspect="mediaOnly ? 1 : '4/3'"
+                     rounded="none"
+                     :missing="mediaKeys.isMissing(mediaKeyOf(item))"
+                     missing-text="Not found in the media library"
+                     :reveal="['top-end']"
                   >
-                     <KIcon name="x-mark" />
-                  </button>
-               </template>
-            </component>
+                     <template v-if="!previewOf(item) && summaryOf(item)" #default>
+                        <span class="cms-block-summary">{{ summaryOf(item) }}</span>
+                     </template>
+                     <template v-if="isHidden(item)" #top-start>
+                        <KIcon name="eye-slash" label="Hidden" />
+                     </template>
+                     <template v-if="mediaOnly && !disabled" #top-end>
+                        <KButton
+                           icon="x-mark"
+                           size="xs"
+                           variant="solid"
+                           tone="neutral"
+                           square
+                           tooltip="Remove"
+                           :aria-label="`Remove ${barTitle(item)}`"
+                           @click.stop="remove(index)"
+                        />
+                     </template>
+                  </KThumbnail>
+               </component>
 
-            <div v-if="!mediaOnly" class="cms-block-bar">
-               <button
-                  type="button"
-                  class="cms-block-grip"
-                  :aria-label="`Reorder ${labelOf(item)}, use the arrow keys`"
-                  @keydown.left.prevent="index > 0 && move(index, -1)"
-                  @keydown.right.prevent="index < items.length - 1 && move(index, 1)"
-               >
-                  <KIcon :name="cmsIcon('bars-2')" />
-               </button>
-               <span class="cms-block-bar-name" :title="barTitle(item)">{{ barLabel(item) }}</span>
-               <span
-                  v-if="hasMissingMedia(item)"
-                  class="cms-block-missing-icon"
-                  title="Not found in the media library"
-               >
-                  <KIcon name="exclamation-triangle" />
-               </span>
-               <KButton
-                  icon="trash"
-                  size="xs"
-                  variant="ghost"
-                  tone="danger"
-                  aria-label="Remove block"
-                  @click="remove(index)"
-               />
-            </div>
-         </div>
+               <div v-if="!mediaOnly" class="cms-tile-bar">
+                  <KButton
+                     v-if="!disabled"
+                     data-cms-grip
+                     :icon="cmsIcon('bars-2')"
+                     size="xs"
+                     variant="ghost"
+                     tone="neutral"
+                     :aria-label="`Reorder ${labelOf(item)}, Alt with the arrow keys moves it`"
+                     tooltip="Drag to reorder"
+                  />
+                  <KTooltip :text="barTitle(item)">
+                     <span class="cms-tile-name">{{ barLabel(item) }}</span>
+                  </KTooltip>
+                  <KTooltip v-if="hasMissingMedia(item)" text="Not found in the media library">
+                     <span class="cms-block-missing-icon">
+                        <KIcon name="exclamation-triangle" label="Not found in the media library" />
+                     </span>
+                  </KTooltip>
+                  <KDropdownMenu :items="tileMenu(index)" placement="bottom-end">
+                     <KButton
+                        :icon="cmsIcon('ellipsis-horizontal')"
+                        size="xs"
+                        variant="ghost"
+                        tone="neutral"
+                        :aria-label="`${labelOf(item)} actions`"
+                     />
+                  </KDropdownMenu>
+                  <KButton
+                     v-if="!disabled"
+                     icon="trash"
+                     size="xs"
+                     variant="ghost"
+                     tone="danger"
+                     aria-label="Remove block"
+                     @click="remove(index)"
+                  />
+               </div>
+            </KCard>
+         </template>
 
-         <KDropdownMenu v-if="canAdd && addItems.length > 1" :items="addItems">
-            <button type="button" class="cms-block-add">
-               <KIcon name="plus" />
-               <span>Add</span>
-            </button>
-         </KDropdownMenu>
-         <button
-            v-else
-            type="button"
-            class="cms-block-add"
-            :disabled="!canAdd"
-            :title="canAdd ? void 0 : countHint"
-            @click="addFirst"
-         >
-            <KIcon name="plus" />
-            <span>{{ mediaOnly ? addMediaLabel : "Add" }}</span>
-         </button>
-      </div>
+         <template #add>
+            <CmsBlockPickerPopover
+               v-if="
+  canAdd && !disabled && !mediaOnly && (Object.keys(blocks).length > 1 || presets.length)
+"
+               v-model:open="pickerMenuOpen"
+               :blocks="blocks"
+               :paste-count="pasteCount"
+               :presets="presets"
+               @pick="add"
+               @paste="paste(items.length, null)"
+               @preset="insertPreset"
+            >
+               <KCard variant="dashed" as="button" icon="plus" title="Add" />
+            </CmsBlockPickerPopover>
+            <KCard
+               v-else
+               variant="dashed"
+               as="button"
+               icon="plus"
+               :title="mediaOnly ? addMediaLabel : 'Add'"
+               :disabled="!canAdd || disabled"
+               :disabled-reason="disabled ? void 0 : fullReason"
+               @click="addFirst"
+            />
+         </template>
+      </KTileGrid>
 
-      <p v-if="countHint" class="cms-field-hint">{{ countHint }}</p>
+      <KFieldMessage v-if="countHint" tone="neutral" :icon="false" :message="countHint" />
 
       <div v-if="visual">
          <KButton
@@ -145,6 +164,7 @@
             :field-key="fieldKey"
             :fields="{ [fieldKey]: field }"
             :title="field.label"
+            :readonly="disabled"
             @update:state="onVisualUpdate"
          >
             <template #start>
@@ -154,7 +174,6 @@
                   variant="ghost"
                   tone="neutral"
                   aria-label="Back to the form"
-                  title="Back to the form"
                   @click="visualOpen = false"
                />
             </template>
@@ -164,6 +183,15 @@
          </CmsVisualEditor>
       </KModal>
 
+      <CmsPresetModal
+         v-if="presetsEnabled"
+         v-model:open="presetOpen"
+         title="Save as preset"
+         submit-label="Save preset"
+         :hint="presetHint"
+         :save="savePreset"
+      />
+
       <KModal v-if="mediaOnly" v-model:open="pickerOpen" title="Media" size="lg">
          <CmsMediaGallery
             v-model:folder="pickerFolder"
@@ -174,26 +202,49 @@
          />
       </KModal>
 
-      <KModal v-model:open="editorOpen" :title="editorTitle">
-         <KStack gap="md">
-            <KFormField
-               v-for="(blockField, blockKey) in editorFields"
-               :key="blockKey"
-               :label="blockField.label"
-               :icon="cmsIcon(fieldIcon(blockField))"
-               :required="blockField.required"
+      <KModal
+         v-if="!nested"
+         v-model:open="editorOpen"
+         :title="editorTitle"
+         :trail="editorTrail"
+         :size="editorWide ? 'lg' : 'md'"
+         @navigate="navigateEditor"
+      >
+         <CmsBlockEditorProvider :scope="editorScope">
+            <CmsFormSections
+               v-if="editorBlock"
+               :key="editorKey"
+               :layout="editorLayout"
+               :shown="isEditorFieldShown"
             >
-               <CmsFieldInput
-                  :model-value="editorItem?.[blockKey]"
-                  :field="blockField"
-                  :locale="locale"
-                  @update:model-value="(value) => updateEditorField(blockKey, value)"
-               />
-            </KFormField>
-         </KStack>
+               <template #field="{ fieldKey: blockKey }">
+                  <KFormField
+                     :name="editorFieldName(blockKey)"
+                     :label="editorBlock.fields[blockKey].label"
+                     :help="editorBlock.fields[blockKey].description"
+                     :required="editorBlock.fields[blockKey].required"
+                  >
+                     <CmsFieldInput
+                        :model-value="editorItem?.[blockKey]"
+                        :field="editorBlock.fields[blockKey]"
+                        :locale="locale"
+                        :entry-name="entryName"
+                        :field-key="
+  editorBlock.fields[blockKey].type === 'blocks' ? blockKey : void 0
+"
+                        @update:model-value="(value) => updateEditorField(blockKey, value)"
+                     />
+                  </KFormField>
+               </template>
+            </CmsFormSections>
+         </CmsBlockEditorProvider>
 
          <template #footer>
+            <KStack v-if="disabled" direction="row" justify="end">
+               <KButton label="Done" @click="editorOpen = false" />
+            </KStack>
             <KStack
+               v-else
                direction="row"
                justify="between"
                gap="sm"
@@ -206,7 +257,7 @@
                      variant="soft"
                      tone="neutral"
                      aria-label="Move earlier"
-                     :disabled="editorIndex === 0"
+                     :disabled="editorPosition === 0"
                      @click="moveCurrent(-1)"
                   />
                   <KButton
@@ -214,7 +265,7 @@
                      variant="soft"
                      tone="neutral"
                      aria-label="Move later"
-                     :disabled="editorIndex === items.length - 1"
+                     :disabled="editorPosition === editorList.length - 1"
                      @click="moveCurrent(1)"
                   />
                   <KButton
@@ -222,11 +273,11 @@
                      :icon="cmsIcon('document-duplicate')"
                      variant="soft"
                      tone="neutral"
-                     :disabled="!canAdd"
+                     :disabled="!editorCanAdd"
                      @click="duplicateCurrent"
                   />
                   <KButton
-                     v-if="editorItem && !declaresHiddenField(blockOf(editorItem))"
+                     v-if="editorItem && !declaresHiddenField(editorBlock)"
                      :label="isHidden(editorItem) ? 'Show' : 'Hide'"
                      :icon="cmsIcon(isHidden(editorItem) ? 'eye' : 'eye-slash')"
                      variant="soft"
@@ -252,10 +303,25 @@
 
 <script setup>
 import {
+  blockAt,
+  blockFormLayout,
+  blockListAt,
+  blockListPath,
+  blockPathIndex,
+  blockSchemaPath,
   canAddBlock,
+  formatBlockPath,
+  parseBlockPath,
+  insertBlocks,
+  moveBlock,
+  removeBlock,
+  resolveBlockPath,
+  updateBlockAt,
   declaresHiddenField,
+  isFieldVisible,
   isHiddenBlock,
   isTranslatableMediaField,
+  linkDisplayText,
   mediaFilename,
   mediaIconFor,
   mediaPublicUrl,
@@ -264,16 +330,33 @@ import {
 } from "#nuxt-cms";
 import {
   Button as KButton,
+  Card as KCard,
   DropdownMenu as KDropdownMenu,
+  FieldMessage as KFieldMessage,
   FormField as KFormField,
   Icon as KIcon,
   Modal as KModal,
-  Stack as KStack
+  Stack as KStack,
+  Thumbnail as KThumbnail,
+  TileGrid as KTileGrid,
+  Tooltip as KTooltip,
+  useFieldControl,
+  useFormContext,
+  useRouteState
 } from "@xleddyl/443-components-vue";
-import { computed, ref, useState } from "#imports";
+import { computed, inject, nextTick, onMounted, ref, useState, watch } from "#imports";
+import { copyNotice, pasteBlocks, pasteNotice, pasteableCount } from "../../../shared/clipboard";
+import { CMS_PRESET_ICON, presetInsertNotice } from "../../../shared/presets";
+import { blockSummary, clipboardActionApplies, emptyBlock } from "../../../shared/preview";
+import { useCmsClipboard } from "../../composables/cms-clipboard";
 import { useCmsMediaKeys } from "../../composables/cms-media-keys";
+import { useCmsPermissions } from "../../composables/cms-permissions";
+import { useCmsPresets } from "../../composables/cms-presets";
 import { useCmsRuntime } from "../../composables/cms-runtime";
-import { cmsIcon, fieldIcon } from "../../utils/ui";
+import { useCmsOverlayFlag } from "../../composables/cms-route";
+import { CMS_BLOCK_EDITOR, CmsBlockEditorProvider } from "../../utils/block-editor";
+import { clipboardTarget } from "../../utils/keyboard";
+import { cmsIcon } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   locale: { type: String, required: false },
@@ -283,9 +366,38 @@ const props = defineProps({
 const model = defineModel({ type: [Array, null], ...{ required: true } });
 const { mediaBaseUrl, i18n } = useCmsRuntime();
 const mediaKeys = useCmsMediaKeys();
+const { disabled } = useFieldControl();
+const parentEditor = inject(CMS_BLOCK_EDITOR, null);
+const nested = computed(() => !!parentEditor && !!props.fieldKey);
+const nestedListPath = computed(
+  () => parentEditor && props.fieldKey ? [...parentEditor.path.value, props.fieldKey] : null
+);
+const presetFieldKey = computed(() => {
+  if (!nested.value) return props.fieldKey;
+  const schema = parentEditor?.schemaPath.value;
+  return schema && props.fieldKey ? [...schema, props.fieldKey].join(".") : void 0;
+});
+const form = useFormContext();
+const formPath = computed(() => {
+  if (!nested.value) return props.fieldKey ?? null;
+  const base = parentEditor?.formPath.value;
+  return base && nestedListPath.value ? `${base}.${formatBlockPath(nestedListPath.value)}` : null;
+});
+function tileInvalid(index) {
+  const base = formPath.value;
+  if (!base || !form) return false;
+  const prefix = `${base}.${index}`;
+  return Object.entries(form.errors).some(
+    ([key, message]) => !!message && (key === prefix || key.startsWith(`${prefix}.`))
+  );
+}
 const blocks = computed(() => props.field.blocks ?? {});
 const items = computed(() => Array.isArray(model.value) ? model.value : []);
 const canAdd = computed(() => canAddBlock(props.field, items.value.length));
+const fullReason = computed(() => {
+  const max = props.field.max ?? 0;
+  return canAdd.value ? void 0 : `This field holds at most ${blockCount(max)}.`;
+});
 function blockCount(count) {
   return `${count} ${count === 1 ? "block" : "blocks"}`;
 }
@@ -310,10 +422,11 @@ const mediaOnly = computed(() => {
 });
 const visual = computed(() => {
   const list = Object.values(blocks.value);
-  return !mediaOnly.value && !!props.entryName && !!props.fieldKey && !!list.length && list.every((block) => typeof block.component === "string" && !!block.component.trim());
+  return !mediaOnly.value && !nested.value && !!props.entryName && !!props.fieldKey && !!list.length && list.every((block) => typeof block.component === "string" && !!block.component.trim());
 });
-const visualOpen = ref(false);
+const visualOpen = useCmsOverlayFlag("visual", !!props.fieldKey, props.fieldKey);
 function onVisualUpdate(state) {
+  if (disabled.value) return;
   const value = props.fieldKey ? state[props.fieldKey] : null;
   model.value = Array.isArray(value) && value.length ? value : null;
 }
@@ -325,7 +438,7 @@ const pickerOpen = ref(false);
 const pickerFolder = useState("cms-media-picker-folder", () => null);
 function addMedia(media) {
   const target = mediaOnly.value;
-  if (!target || !canAdd.value) return;
+  if (!target || !canAdd.value || disabled.value) return;
   mediaKeys.remember(media.key);
   model.value = [...items.value, { type: target.type, [target.key]: media.key }];
   pickerOpen.value = false;
@@ -383,45 +496,49 @@ function iconOf(item) {
   return key ? mediaIconFor(mediaTypeForKey(key)) : "rectangle-stack";
 }
 function summaryOf(item) {
+  const locale = props.locale ?? i18n.defaultLocale;
   for (const [key, field] of Object.entries(blockOf(item)?.fields ?? {})) {
+    if (field.type === "link") {
+      const text2 = linkDisplayText(item[key], locale, i18n.defaultLocale);
+      if (text2) return text2.length > 80 ? `${text2.slice(0, 77)}\u2026` : text2;
+      continue;
+    }
     if (field.type !== "text" && field.type !== "richtext") continue;
     const raw = item[key];
-    const value = typeof raw === "string" ? raw : raw?.[props.locale ?? i18n.defaultLocale] ?? "";
+    const value = typeof raw === "string" ? raw : raw?.[locale] ?? "";
     const text = value.replace(/<[^>]*>/g, " ").trim();
     if (text) return text.length > 80 ? `${text.slice(0, 77)}\u2026` : text;
   }
-  return "";
+  const block = blockOf(item);
+  const hasNested = Object.values(block?.fields ?? {}).some((field) => field.type === "blocks");
+  return hasNested ? blockSummary(block, item, locale, i18n.defaultLocale) : "";
 }
 function isHidden(item) {
   return isHiddenBlock(item);
 }
-function updateField(index, key, value) {
-  const current = items.value[index];
-  if (!current) return;
-  const updated = { ...current, [key]: value };
-  uids.set(updated, uidFor(current));
-  model.value = items.value.map((item, i) => i === index ? updated : item);
-}
 function add(type) {
   const block = blocks.value[type];
-  if (!block || !canAdd.value) return;
-  const empty = Object.fromEntries(Object.keys(block.fields).map((k) => [k, null]));
+  if (!block || !canAdd.value || disabled.value) return;
   const index = items.value.length;
-  model.value = [...items.value, { type, ...empty }];
+  model.value = [...items.value, emptyBlock(type, block)];
   openEditor(index);
 }
-function onTileKey(event, index) {
-  if (!mediaOnly.value) return;
-  const action = event.key === "ArrowLeft" ? () => move(index, -1) : event.key === "ArrowRight" ? () => move(index, 1) : event.key === "Delete" || event.key === "Backspace" ? () => remove(index) : null;
-  if (!action) return;
+function onReorder(next) {
+  if (!disabled.value) model.value = next;
+}
+function onTileKey(event) {
+  if (!mediaOnly.value || disabled.value || event.altKey) return;
+  if (event.key !== "Delete" && event.key !== "Backspace") return;
+  const index = focusedTileIndex(event.target);
+  if (index === null) return;
   event.preventDefault();
-  action();
+  remove(index);
 }
 function onPreviewClick(index) {
   if (!mediaOnly.value) openEditor(index);
 }
 function addFirst() {
-  if (!canAdd.value) return;
+  if (!canAdd.value || disabled.value) return;
   if (mediaOnly.value) {
     pickerOpen.value = true;
     return;
@@ -430,96 +547,329 @@ function addFirst() {
   if (first) add(first);
 }
 function remove(index) {
+  if (disabled.value) return;
   const next = items.value.filter((_, i) => i !== index);
   model.value = next.length ? next : null;
 }
 function duplicate(index) {
   const current = items.value[index];
-  if (!current || !canAdd.value) return;
-  const copy = JSON.parse(JSON.stringify(current));
-  const next = [...items.value];
-  next.splice(index + 1, 0, copy);
-  model.value = next;
-}
-function move(index, delta) {
-  moveTo(index, index + delta);
-}
-function moveTo(from, to) {
-  if (from === to || to < 0 || to >= items.value.length) return;
+  if (!current || !canAdd.value || disabled.value) return;
+  const copy2 = JSON.parse(JSON.stringify(current));
   const next = [...items.value];
-  const [item] = next.splice(from, 1);
-  next.splice(to, 0, item);
+  next.splice(index + 1, 0, copy2);
   model.value = next;
 }
-const dragIndex = ref(null);
-const dropIndex = ref(null);
-function onDragStart(index, event) {
-  dragIndex.value = index;
-  if (event.dataTransfer) {
-    event.dataTransfer.effectAllowed = "move";
-    event.dataTransfer.setData("text/plain", String(index));
+const ROOT = "_";
+const localEditorPath = ref(null);
+const editorRoute = useRouteState("editblock", { location: "hash" });
+const editorRouted = computed(() => !nested.value && !!props.fieldKey);
+const editorPath = computed({
+  get: () => {
+    if (!editorRouted.value) return localEditorPath.value;
+    const path = parseBlockPath(editorRoute.value);
+    return path && path[0] === props.fieldKey && path.length > 1 ? path.slice(1) : null;
+  },
+  set: (path) => {
+    if (!editorRouted.value) localEditorPath.value = path;
+    else editorRoute.value = path ? formatBlockPath([props.fieldKey, ...path]) : void 0;
   }
+});
+const rootFields = computed(() => ({ [ROOT]: props.field }));
+const rootValues = computed(() => ({ [ROOT]: items.value }));
+function fullPath(path) {
+  return [ROOT, ...path];
 }
-function onDragLeave(index) {
-  if (dropIndex.value === index) dropIndex.value = null;
-}
-function onDrop(index) {
-  if (dragIndex.value !== null) moveTo(dragIndex.value, index);
-  onDragEnd();
-}
-function onDragEnd() {
-  dragIndex.value = null;
-  dropIndex.value = null;
-}
-const addItems = computed(
-  () => Object.entries(blocks.value).map(([type, block]) => ({
-    label: block.label,
-    onSelect: () => add(type)
-  }))
+const editorLocation = computed(
+  () => editorPath.value ? resolveBlockPath(rootFields.value, rootValues.value, fullPath(editorPath.value)) : null
 );
-const editorIndex = ref(null);
 const editorOpen = computed({
-  get: () => editorIndex.value !== null,
+  get: () => editorPath.value !== null,
   set: (value) => {
-    if (!value) editorIndex.value = null;
+    if (!value) editorPath.value = null;
   }
 });
-const editorItem = computed(
-  () => editorIndex.value === null ? void 0 : items.value[editorIndex.value]
+const editorItem = computed(() => editorLocation.value?.item);
+const editorBlock = computed(() => editorLocation.value?.block);
+const editorPosition = computed(() => editorLocation.value?.index ?? -1);
+const editorList = computed(
+  () => editorPath.value ? blockListAt(rootValues.value, blockListPath(fullPath(editorPath.value))) ?? [] : []
+);
+const editorCanAdd = computed(
+  () => editorLocation.value ? canAddBlock(editorLocation.value.field, editorList.value.length) : canAdd.value
 );
-const editorFields = computed(() => editorItem.value ? blockOf(editorItem.value)?.fields : {});
-const editorTitle = computed(() => editorItem.value ? labelOf(editorItem.value) : "");
+const editorKey = computed(() => editorPath.value ? formatBlockPath(editorPath.value) : "");
+const editorLayout = computed(
+  () => editorBlock.value ? blockFormLayout(editorBlock.value) : { main: [] }
+);
+const editorWide = computed(
+  () => editorLayout.value.main.some((section) => section.rows.some((row) => row.length > 1)) || Object.values(editorBlock.value?.fields ?? {}).some((field) => field.type === "blocks")
+);
+function isEditorFieldShown(key) {
+  const fields = editorBlock.value?.fields ?? {};
+  const field = fields[key];
+  return !!field && isFieldVisible(field, editorItem.value, fields);
+}
+function itemLabel(item, block) {
+  return block?.label ?? String(item.type);
+}
+const editorTitle = computed(
+  () => editorItem.value ? itemLabel(editorItem.value, editorBlock.value) : ""
+);
+const editorAncestors = computed(() => {
+  const path = editorPath.value;
+  if (!path) return [];
+  const ancestors = [];
+  for (let end = 1; end < path.length - 1; end += 2) ancestors.push(path.slice(0, end));
+  return ancestors;
+});
+const editorTrail = computed(
+  () => editorAncestors.value.map((path) => {
+    const location = resolveBlockPath(rootFields.value, rootValues.value, fullPath(path));
+    return location ? itemLabel(location.item, location.block) : "";
+  })
+);
+function navigateEditor(index) {
+  const target = editorAncestors.value[index];
+  if (target) editorPath.value = target;
+}
+const editorScope = {
+  path: computed(() => editorPath.value ?? []),
+  schemaPath: computed(() => {
+    if (!editorPath.value || !props.fieldKey) return null;
+    const schema = blockSchemaPath(rootFields.value, rootValues.value, fullPath(editorPath.value));
+    const type = editorItem.value?.type;
+    return schema && type ? [props.fieldKey, ...schema.slice(1), String(type)] : null;
+  }),
+  formPath: computed(() => props.fieldKey && !nested.value ? props.fieldKey : null),
+  open: (path) => {
+    editorPath.value = path;
+  }
+};
+watch(editorLocation, (location) => {
+  if (location || !editorPath.value) return;
+  const path = editorPath.value;
+  void nextTick(() => {
+    if (editorPath.value === path && !blockAt(rootValues.value, fullPath(path)))
+      editorPath.value = null;
+  });
+});
+function editorFieldName(key) {
+  const base = editorScope.formPath.value;
+  return base && editorPath.value ? `${base}.${formatBlockPath(editorPath.value)}.${key}` : void 0;
+}
+function commitRoot(values) {
+  const next = values[ROOT];
+  const list = Array.isArray(next) ? next : [];
+  const previous = items.value;
+  if (list.length === previous.length) {
+    list.forEach((item, index) => {
+      const before = previous[index];
+      if (before && item !== before && !uids.has(item)) uids.set(item, uidFor(before));
+    });
+  }
+  model.value = list.length ? list : null;
+}
 function openEditor(index) {
-  editorIndex.value = index;
+  if (nested.value && parentEditor && nestedListPath.value) {
+    parentEditor.open([...nestedListPath.value, index]);
+    return;
+  }
+  editorPath.value = [index];
 }
 function updateEditorField(key, value) {
-  if (editorIndex.value === null) return;
-  updateField(editorIndex.value, key, value);
+  if (!editorPath.value || disabled.value) return;
+  commitRoot(
+    updateBlockAt(rootValues.value, fullPath(editorPath.value), (item) => ({
+      ...item,
+      [key]: value
+    }))
+  );
+}
+function leaveEditorItem() {
+  const path = editorPath.value;
+  editorPath.value = path && path.length > 2 ? path.slice(0, -2) : null;
 }
 function removeCurrent() {
-  if (editorIndex.value === null) return;
-  remove(editorIndex.value);
-  editorIndex.value = null;
+  if (!editorPath.value || disabled.value) return;
+  const path = editorPath.value;
+  commitRoot(removeBlock(rootValues.value, fullPath(path)));
+  leaveEditorItem();
 }
 function moveCurrent(delta) {
-  if (editorIndex.value === null) return;
-  const next = editorIndex.value + delta;
-  move(editorIndex.value, delta);
-  editorIndex.value = next;
+  const path = editorPath.value;
+  if (!path || disabled.value) return;
+  const index = blockPathIndex(path);
+  const target = index + delta;
+  if (target < 0 || target >= editorList.value.length) return;
+  const full = fullPath(path);
+  commitRoot(
+    moveBlock(rootValues.value, full, blockListPath(full), delta > 0 ? target + 1 : target)
+  );
+  editorPath.value = [...path.slice(0, -1), target];
 }
 function toggleHiddenCurrent() {
-  if (editorIndex.value === null || !editorItem.value) return;
-  const index = editorIndex.value;
-  const current = items.value[index];
-  if (!current) return;
-  const { hidden: _hidden, ...rest } = current;
-  const updated = isHidden(current) ? rest : { ...rest, hidden: true };
-  uids.set(updated, uidFor(current));
-  model.value = items.value.map((item, i) => i === index ? updated : item);
+  if (!editorPath.value || !editorItem.value || disabled.value) return;
+  commitRoot(
+    updateBlockAt(rootValues.value, fullPath(editorPath.value), (current) => {
+      const { hidden: _hidden, ...rest } = current;
+      return isHidden(current) ? rest : { ...rest, hidden: true };
+    })
+  );
 }
 function duplicateCurrent() {
-  if (editorIndex.value === null) return;
-  duplicate(editorIndex.value);
-  editorIndex.value = null;
+  const path = editorPath.value;
+  const current = editorItem.value;
+  if (!path || !current || !editorCanAdd.value || disabled.value) return;
+  const copy2 = JSON.parse(JSON.stringify(current));
+  const full = fullPath(path);
+  commitRoot(insertBlocks(rootValues.value, blockListPath(full), blockPathIndex(path) + 1, [copy2]));
+  leaveEditorItem();
+}
+const clipboard = useCmsClipboard();
+const pasteCount = computed(() => pasteableCount(clipboard.items.value, props.field));
+function copy(index, event) {
+  const item = items.value[index];
+  if (!item) return;
+  clipboard.copy([item], event);
+  clipboard.notify(copyNotice(1));
+}
+function cut(index, event) {
+  const item = items.value[index];
+  if (!item || disabled.value) return;
+  clipboard.copy([item], event);
+  remove(index);
+  clipboard.notify(copyNotice(1, true));
+}
+async function paste(index, text) {
+  if (disabled.value) return;
+  const pasted = await clipboard.read(text);
+  const result = pasted ? pasteBlocks(items.value, index, pasted, props.field, i18n) : null;
+  if (result?.pasted) model.value = result.list;
+  clipboard.notify(pasteNotice(result, props.field));
+}
+function tileIndex(tile) {
+  const index = tile ? Number(tile.dataset.cmsTile) : NaN;
+  return Number.isInteger(index) ? index : null;
+}
+function focusedTileIndex(target) {
+  return target instanceof Element ? tileIndex(target.querySelector(":scope > * > [data-cms-tile]")) : null;
+}
+function tileIndexOf(target) {
+  if (!(target instanceof Element)) return null;
+  return tileIndex(target.closest("[data-cms-tile]")) ?? focusedTileIndex(target);
+}
+function onClipboard(event) {
+  if (event.defaultPrevented) return;
+  const action = event.type;
+  if (disabled.value && action !== "copy") return;
+  const index = tileIndexOf(event.target);
+  const target = { ...clipboardTarget(event, index !== null), interactive: false };
+  if (!clipboardActionApplies(action, target)) return;
+  if (action === "paste") {
+    event.preventDefault();
+    void paste(
+      index === null ? items.value.length : index + 1,
+      event.clipboardData?.getData("text/plain") ?? null
+    );
+  } else if (index !== null) {
+    if (action === "copy") copy(index, event);
+    else cut(index, event);
+  }
+}
+const { can } = useCmsPermissions();
+const presetsEnabled = computed(
+  () => !mediaOnly.value && !disabled.value && !!props.entryName && !!presetFieldKey.value && can(`${props.entryName}.update`)
+);
+const {
+  presets: fieldPresets,
+  load: loadPresets,
+  create: createPreset
+} = useCmsPresets(
+  () => presetsEnabled.value ? props.entryName : void 0,
+  () => presetFieldKey.value
+);
+const presets = computed(() => presetsEnabled.value ? fieldPresets.value : []);
+const pickerMenuOpen = ref(false);
+const presetOpen = ref(false);
+const presetItems = ref([]);
+const presetHint = computed(() => {
+  const types = presetItems.value.map((item) => labelOf(item));
+  return `A copy of ${types.join(
+    ", "
+  )}. Insert it from the block picker of any field with the same blocks.`;
+});
+function openPresetSave(index) {
+  const item = items.value[index];
+  if (!item) return;
+  presetItems.value = [JSON.parse(JSON.stringify(item))];
+  presetOpen.value = true;
+}
+async function savePreset(details) {
+  const preset = await createPreset({ ...details, items: presetItems.value });
+  clipboard.notify({ title: `Preset "${preset.name}" saved`, color: "success" });
+}
+function insertPreset(id) {
+  const preset = presets.value.find((candidate) => candidate.id === id);
+  if (!preset || !canAdd.value || disabled.value) return;
+  const result = pasteBlocks(
+    items.value,
+    items.value.length,
+    preset.items,
+    props.field,
+    i18n
+  );
+  if (result.pasted) model.value = result.list;
+  clipboard.notify(presetInsertNotice(result, props.field, preset));
+}
+watch(pickerMenuOpen, (open) => {
+  if (open) void loadPresets();
+});
+onMounted(() => {
+  if (presetsEnabled.value) void loadPresets();
+});
+function tileMenu(index) {
+  const copyItem = {
+    label: "Copy",
+    icon: cmsIcon("clipboard-document"),
+    shortcut: "mod+c",
+    onSelect: () => copy(index)
+  };
+  if (disabled.value) return [[copyItem]];
+  const full = canAdd.value ? void 0 : countHint.value;
+  return [
+    [
+      copyItem,
+      {
+        label: "Cut",
+        icon: cmsIcon("scissors"),
+        shortcut: "mod+x",
+        onSelect: () => cut(index)
+      },
+      {
+        label: "Paste after",
+        icon: cmsIcon("clipboard"),
+        shortcut: "mod+v",
+        disabled: !!full,
+        disabledReason: full,
+        onSelect: () => void paste(index + 1)
+      }
+    ],
+    [
+      {
+        label: "Duplicate",
+        icon: cmsIcon("document-duplicate"),
+        disabled: !!full,
+        disabledReason: full,
+        onSelect: () => duplicate(index)
+      },
+      ...presetsEnabled.value ? [
+        {
+          label: "Save as preset",
+          icon: cmsIcon(CMS_PRESET_ICON),
+          onSelect: () => openPresetSave(index)
+        }
+      ] : []
+    ]
+  ];
 }
 </script>