implement global proxy mode

css/partials/ProxyField.css

@@ -1,30 +1,44 @@
 .bk.bk-field-list-proxy {
-  @apply z-dialog w-full  min-h-40 p-20 absolute;
+  @apply z-dialog w-full min-h-40 p-20 absolute;
   @apply w-full left-0 top-0;
 
   @apply transition-opacity duration-100;
 
   @apply opacity-0 pointer-events-none;
 
+  html.bk-is-proxy-mode & {
+    @apply opacity-100 pointer-events-auto static;
+    @apply mx-10 max-w-full min-w-0 w-auto;
+
+    .bk-block-proxy {
+      @apply min-w-[200px];
+    }
+  }
+
   &.bk-is-visible {
     @apply opacity-100 pointer-events-auto;
   }
 
+  &.bk-is-horizontal {
+    > .bk-field-list-proxy-list {
+      @apply flex gap-15;
+    }
+  }
+
+  &.bk-is-vertical {
+    > .bk-field-list-proxy-list {
+      @apply grid gap-15;
+    }
+  }
+
   .bk-field-list-proxy {
-    @apply p-0  static h-auto w-auto bg-none;
+    @apply p-0 relative h-auto w-auto bg-none z-auto !mx-0;
     .bk-block-proxy {
       @apply shadow-none;
     }
-    .bk-field-list-proxy-list {
-      @apply gap-10;
-    }
   }
 }
 
-.bk-field-list-proxy-list {
-  @apply flex gap-20;
-}
-
 .bk-block-proxy {
   @apply text-mono-900 flex-1;
   @apply border border-mono-400 p-15 rounded bg-white shadow-lg;
@@ -38,22 +52,22 @@
 }
 
 .bk-block-proxy-fields {
-  @apply grid gap-10 mt-10;
+  @apply grid gap-15 mt-15;
 }
 
 .bk-block-proxy-fields-row {
-  @apply grid gap-10;
+  @apply grid gap-15;
 }
 
 .bk-block-proxy-fields-row-field {
-  @apply border border-dashed border-mono-500 p-10 rounded;
+  @apply border border-mono-300 p-15 rounded bg-mono-50;
 
   > span {
-    @apply text-xs uppercase inline-block mb-10;
+    @apply text-xs uppercase inline-block mb-15 text-mono-400;
     @apply font-semibold;
   }
 }
 
 .bk-block-proxy-component {
-  @apply my-10;
+  @apply my-15 line-clamp-3 last:mb-0;
 }

playground/components/Blokkli/Button/proxy.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <span v-blokkli-editable:title>{{ title }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  url: string
+  title: string
+}>()
+</script>

playground/components/Blokkli/Card/proxy.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h3 v-blokkli-editable:title class="font-bold" v-text="title" />
+    <p v-blokkli-editable:text class="text-base" v-text="text" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { NuxtSvgSpriteSymbol } from '#nuxt-svg-sprite/runtime'
+
+type Props = {
+  icon?: NuxtSvgSpriteSymbol
+  title: string
+  text: string
+}
+
+defineProps<Props>()
+</script>

playground/components/Blokkli/Grid/Grid.vue

@@ -18,6 +18,7 @@
       name="blocks"
       :list="blocks"
       class="container grid gap-20 lg:gap-40"
+      drop-alignment="horizontal"
       :class="{
         'grid-cols-2': options.mobile,
         'lg:grid-cols-2': options.columns === 'two',

playground/components/Blokkli/Image/proxy.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-blokkli-droppable:imageReference>
-    <img v-if="url" :src="url" />
+    <img v-if="url" :src="url" class="max-w-120 max-h-120" />
   </div>
 </template>
 

playground/components/Blokkli/Slider/Slider.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="relative">
-    <BlokkliField v-slot="{ items }" name="slides" :list="slides" proxy-mode>
+    <BlokkliField
+      v-slot="{ items }"
+      name="slides"
+      :list="slides"
+      proxy-mode
+      drop-alignment="horizontal"
+    >
       <BlokkliSliderView :items="items" />
     </BlokkliField>
   </div>

playground/components/Blokkli/Text/proxy.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <div v-blokkli-editable:text v-html="text" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  text: string
+}>()
+</script>

playground/components/Blokkli/Title/proxy.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <p
+      v-if="tagline"
+      v-blokkli-editable:tagline
+      class="uppercase font-semibold text-xs mb-10"
+    >
+      {{ tagline }}
+    </p>
+    <h2 v-blokkli-editable:title v-text="title" class="font-bold" />
+    <p v-if="lead" v-blokkli-editable:lead v-text="lead" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title: string
+  tagline?: string
+  lead?: string
+}>()
+</script>

playground/components/Hero/index.vue

@@ -22,7 +22,9 @@
           />
           <slot></slot>
         </div>
-        <div class="col-span-4 max-w-[340px] lg:w-full mx-auto mb-30 lg:mb-0">
+        <div
+          class="col-span-4 max-w-[340px] lg:w-full mx-auto mb-30 lg:mb-0 relative"
+        >
           <slot name="animation"></slot>
         </div>
       </div>

playground/pages/[...slug].vue

@@ -21,6 +21,7 @@
           :list="fieldButtons"
           list-class="mt-20 lg:mt-40 flex gap-10 flex-wrap"
           field-list-type="inline"
+          drop-alignment="horizontal"
         />
         <template #animation>
           <BlokkliField

src/Extractor/BlockExtractor.ts

@@ -259,22 +259,26 @@ export default class BlockExtractor {
         return acc
       }, {})
 
-    const proxyImports = Object.values(this.definitions)
-      .map((v) => {
-        if (v?.proxyComponentPath) {
-          return `import proxyComponent_${v.definition.bundle} from '${v.proxyComponentPath}'`
-        }
+    const proxyComponents = Object.values(this.definitions).reduce<
+      Record<string, string>
+    >((acc, v) => {
+      if (v?.proxyComponentPath) {
+        acc[v.definition.bundle] = v.proxyComponentPath
+      }
+
+      return acc
+    }, {})
+
+    const proxyImports = Object.entries(proxyComponents)
+      .map(([bundle, proxyComponentPath]) => {
+        return `import proxyComponent_${bundle} from '${proxyComponentPath}'`
       })
-      .filter(falsy)
       .join('\n')
 
-    const proxyMaps = Object.values(this.definitions)
-      .map((v) => {
-        if (v?.proxyComponentPath) {
-          return `'${v.definition.bundle}': proxyComponent_${v.definition.bundle}`
-        }
+    const proxyMaps = Object.keys(proxyComponents)
+      .map((bundle) => {
+        return `'${bundle}': proxyComponent_${bundle}`
       })
-      .filter(falsy)
       .join(',  \n')
 
     const allFragmentNames = Object.values(this.fragmentDefinitions)

src/runtime/components/BlokkliField.vue

@@ -1,5 +1,5 @@
 <template>
-  <slot :items="filteredList" />
+  <slot v-if="!isGlobalProxyMode" :items="filteredList" />
   <Component
     :is="DraggableList"
     v-if="DraggableList && isEditing && canEdit && !isInReusable && entity"
@@ -16,11 +16,15 @@
     class="bk-field-list"
     :proxy-mode="proxyMode"
     :tag="tag"
+    :global-proxy-mode="isGlobalProxyMode"
   />
   <component
     :is="tag"
     v-else-if="
-      !editOnly && (filteredList.length || isEditing || isPreview) && !proxyMode
+      !editOnly &&
+      (filteredList.length || isEditing || isPreview) &&
+      !proxyMode &&
+      !isGlobalProxyMode
     "
     :class="[
       attrs.class,
@@ -40,11 +44,18 @@
       :index="i"
     />
   </component>
-  <slot name="after" :items="filteredList" />
+  <slot v-if="!isGlobalProxyMode" name="after" :items="filteredList" />
 </template>
 
 <script lang="ts" setup>
-import { computed, useAttrs, inject, provide, ref } from '#imports'
+import {
+  computed,
+  useAttrs,
+  inject,
+  provide,
+  ref,
+  type ComputedRef,
+} from '#imports'
 import type { BlokkliFragmentName } from '#blokkli/definitions'
 import { isVisibleByOptions } from '#blokkli/helpers/runtimeHelpers'
 import BlokkliItem from './BlokkliItem.vue'
@@ -74,6 +85,7 @@ import {
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   INJECT_PROVIDER_CONTEXT,
   INJECT_FIELD_PROXY_MODE,
+  INJECT_GLOBAL_PROXY_MODE,
 } from '../helpers/symbols'
 import type DraggableListComponent from './Edit/DraggableList.vue'
 
@@ -89,6 +101,10 @@ defineOptions({
 })
 
 const isEditing = inject(INJECT_IS_EDITING, false)
+const isGlobalProxyMode = inject<ComputedRef<boolean> | null>(
+  INJECT_GLOBAL_PROXY_MODE,
+  null,
+)
 const isInReusable = inject(INJECT_IS_IN_REUSABLE, false)
 const isPreview = inject<boolean>(INJECT_IS_PREVIEW, false)
 const isNested = inject(INJECT_IS_NESTED, false)

src/runtime/components/BlokkliItem.vue

@@ -1,7 +1,7 @@
 <template>
   <Component
     :is="component"
-    v-if="isProxyMode"
+    v-if="isProxyMode || isGlobalProxyMode"
     :bundle="bundle"
     :uuid="uuid"
     :field-list-type="fieldListType"
@@ -28,6 +28,7 @@ import {
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
   INJECT_FIELD_PROXY_MODE,
+  INJECT_GLOBAL_PROXY_MODE,
 } from '../helpers/symbols'
 import type {
   BlockBundleWithNested,
@@ -57,18 +58,23 @@ const componentProps = withDefaults(
 )
 
 const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false)
+const isGlobalProxyMode = inject<ComputedRef<boolean> | null>(
+  INJECT_GLOBAL_PROXY_MODE,
+  null,
+)
 
 const fieldListType = inject<ComputedRef<ValidFieldListTypes> | undefined>(
   INJECT_FIELD_LIST_TYPE,
 )
 
-const component = isProxyMode
-  ? defineAsyncComponent(() => import('./Edit/BlockProxy/index.vue'))
-  : getBlokkliItemComponent(
-      componentProps.bundle,
-      fieldListType?.value || 'default',
-      componentProps.parentType,
-    )
+const component =
+  isProxyMode || isGlobalProxyMode?.value
+    ? defineAsyncComponent(() => import('./Edit/BlockProxy/index.vue'))
+    : getBlokkliItemComponent(
+        componentProps.bundle,
+        fieldListType?.value || 'default',
+        componentProps.parentType,
+      )
 
 const index = computed(() => componentProps.index)
 const item = computed(() => ({