@blokkli/editor 1.0.4 → 1.1.1

package/dist/runtime/adapter/drupal/graphql/base.graphql

@@ -105,12 +105,13 @@ mutation pbPublish(
   $entityType: EntityType!
   $entityUuid: String!
   $langcode: String
+  $createNewState: Boolean
 ) {
   state: paragraphsEditMutationState(
     entityType: $entityType
     entityUuid: $entityUuid
   ) {
-    action: publish {
+    action: publish(createNewState: $createNewState) {
       ...paragraphsBlokkliMutationResult
     }
   }

package/dist/runtime/adapter/drupal/graphqlMiddleware.js

@@ -96,7 +96,10 @@ export default defineBlokkliEditAdapter(
       index,
       status
     }).then(mapMutation);
-    const publish = () => useGraphqlMutation("pbPublish", ctx.value).then(mapMutation);
+    const publish = (options) => useGraphqlMutation("pbPublish", {
+      ...ctx.value,
+      createNewState: !options.closeAfterPublish
+    }).then(mapMutation);
     const importFromExisting = (e) => useGraphqlMutation("pbCopyFromExisting", {
       ...ctx.value,
       sourceUuid: e.sourceUuid,

package/dist/runtime/adapter/index.d.ts

@@ -121,6 +121,17 @@ export type BlokkliAdapterGetLibraryItemsResult = {
     total: number;
     perPage: number;
 };
+export type BlokkliAdapterPublishOptions = {
+    /**
+     * Whether the editor will be closed after publishing.
+     *
+     * If false, the adapter should return an empty state again, so that the
+     * editor UI shows the correct state (no pending changes).
+     * If true, the adapter may return no state at all, since the editor will
+     * be closed anyway after publishing.
+     */
+    closeAfterPublish?: boolean;
+};
 export interface BlokkliAdapter<T> {
     /**
      * Load the state for the given langcode.
@@ -231,7 +242,7 @@ export interface BlokkliAdapter<T> {
     /**
      * Publish all changes.
      */
-    publish?: () => Promise<MutationResponseLike<T>>;
+    publish?: (options: BlokkliAdapterPublishOptions) => Promise<MutationResponseLike<T | undefined | null>>;
     /**
      * Set a specific history index.
      */

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue

@@ -9,46 +9,48 @@
     @pointermove="onPointerMove"
     @focus.capture="onFocus"
   >
-    <div class="bk">
-      <div
-        class="bk-sidebar-title"
-        @mousedown.stop="onMouseDown($event, 'move')"
-      >
-        <slot name="icon">
-          <Icon v-if="icon" :name="icon" />
-        </slot>
-        <span>{{ title }}</span>
-        <button
-          @click.prevent.stop.capture="isMinimized = !isMinimized"
-          @mousedown.capture.stop
-        >
-          <Icon :name="isMinimized ? 'window-maximize' : 'window-minimize'" />
-        </button>
-        <button
-          @click.prevent.stop.capture="$emit('close')"
-          @mousedown.capture.stop
+    <ScrollBoundary>
+      <div class="bk">
+        <div
+          class="bk-sidebar-title"
+          @mousedown.stop="onMouseDown($event, 'move')"
         >
-          <Icon name="close" />
-        </button>
+          <slot name="icon">
+            <Icon v-if="icon" :name="icon" />
+          </slot>
+          <span>{{ title }}</span>
+          <button
+            @click.prevent.stop.capture="isMinimized = !isMinimized"
+            @mousedown.capture.stop
+          >
+            <Icon :name="isMinimized ? 'window-maximize' : 'window-minimize'" />
+          </button>
+          <button
+            @click.prevent.stop.capture="$emit('close')"
+            @mousedown.capture.stop
+          >
+            <Icon name="close" />
+          </button>
+        </div>
       </div>
-    </div>
-    <div class="bk-sidebar-detached-inner" :style="innerStyle">
-      <slot :width="userWidth" :height="userHeight" />
-      <template v-if="!size && !isMinimized">
-        <div
-          class="bk-sidebar-detached-handle bk-is-bottom"
-          @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom')"
-        />
-        <div
-          class="bk-sidebar-detached-handle bk-is-right"
-          @mousedown.stop.prevent="onMouseDown($event, 'resize-right')"
-        />
-        <div
-          class="bk-sidebar-detached-handle bk-is-bottom-right"
-          @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom-right')"
-        />
-      </template>
-    </div>
+      <div class="bk-sidebar-detached-inner" :style="innerStyle">
+        <slot :width="userWidth" :height="userHeight" />
+        <template v-if="!size && !isMinimized">
+          <div
+            class="bk-sidebar-detached-handle bk-is-bottom"
+            @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom')"
+          />
+          <div
+            class="bk-sidebar-detached-handle bk-is-right"
+            @mousedown.stop.prevent="onMouseDown($event, 'resize-right')"
+          />
+          <div
+            class="bk-sidebar-detached-handle bk-is-bottom-right"
+            @mousedown.stop.prevent="onMouseDown($event, 'resize-bottom-right')"
+          />
+        </template>
+      </div>
+    </ScrollBoundary>
   </ViewportBlockingRect>
 </template>
 
@@ -61,7 +63,7 @@ import {
   watch,
   useState,
 } from '#imports'
-import { Icon, ViewportBlockingRect } from '#blokkli/components'
+import { Icon, ViewportBlockingRect, ScrollBoundary } from '#blokkli/components'
 import type { BlokkliIcon } from '#blokkli/icons'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 

package/dist/runtime/blokkliPlugins/Sidebar/index.vue

@@ -45,7 +45,6 @@
       :size="size"
       :is-left="region === 'left'"
       class="bk-sidebar-inner"
-      @wheel="onWheel"
       @close="onAttach"
     >
       <template #icon>
@@ -66,11 +65,10 @@
         </div>
       </template>
     </SidebarDetached>
-    <div
+    <ScrollBoundary
       v-else
       v-show="activeSidebar === id"
       class="bk-sidebar-inner"
-      @wheel="onWheel"
     >
       <div class="bk">
         <div class="bk-sidebar-title">
@@ -95,14 +93,14 @@
           />
         </div>
       </div>
-    </div>
+    </ScrollBoundary>
   </Teleport>
 </template>
 
 <script setup lang="ts">
 import { computed, watch, ref, useBlokkli } from '#imports'
 import type { BlokkliIcon } from '#blokkli/icons'
-import { Icon, ShortcutIndicator } from '#blokkli/components'
+import { Icon, ShortcutIndicator, ScrollBoundary } from '#blokkli/components'
 import SidebarDetached from './Detached/index.vue'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
@@ -141,7 +139,7 @@ const emit = defineEmits<{
   (e: 'updated'): void
 }>()
 
-const { storage, state, ui, $t, keyboard } = useBlokkli()
+const { storage, state, ui, $t } = useBlokkli()
 
 const tourElement = ref<HTMLElement | null>(null)
 
@@ -163,16 +161,6 @@ watch(isDisabled, (v) => {
   }
 })
 
-const onWheel = (e: WheelEvent) => {
-  e.stopPropagation()
-  if (e.ctrlKey || e.metaKey || keyboard.isPressingControl.value) {
-    e.preventDefault()
-  }
-  if (isOverflowing.value) {
-    e.stopPropagation()
-  }
-}
-
 const onDetach = () => {
   isDetached.value = true
   activeSidebar.value = ''
@@ -264,6 +252,12 @@ onBlokkliEvent('item:dropped', () => {
   }
 })
 
+onBlokkliEvent('sidebar:open', (id) => {
+  if (id === props.id) {
+    activeSidebar.value = props.id
+  }
+})
+
 defineExpose({ showSidebar })
 
 defineTourItem(() => {

package/dist/runtime/blokkliPlugins/ViewOption/index.vue

@@ -5,6 +5,7 @@
       ref="button"
       class="bk-toolbar-button"
       :class="{ 'bk-is-inactive': !isActive }"
+      :style="{ order: weight || 0 }"
       @click.prevent.stop="onClick"
     >
       <slot name="icon">
@@ -47,6 +48,7 @@ const props = defineProps<{
   icon?: BlokkliIcon
   tourText?: string
   modelValue?: boolean
+  weight?: number | string
 }>()
 
 const emit = defineEmits<{

package/dist/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"
@@ -8,20 +8,27 @@
     :entity="entity"
     :field-key="fieldKey!"
     :allowed-fragments="allowedFragments"
+    :nesting-level="nestingLevel"
     :drop-alignment="dropAlignment"
     :field-list-type="fieldListType"
     :class="[attrs.class, listClass, { [nonEmptyClass]: filteredList.length }]"
     :is-nested="isNested"
-    class="bk-field-list"
+    :language="providerEntity?.language"
+    :proxy-mode="proxyMode"
     :tag="tag"
+    :global-proxy-mode="!!isGlobalProxyMode"
   />
   <component
     :is="tag"
-    v-else-if="!editOnly && (filteredList.length || isEditing || isPreview)"
+    v-else-if="
+      !editOnly &&
+      (filteredList.length || isEditing || isPreview) &&
+      !proxyMode &&
+      !isGlobalProxyMode
+    "
     :class="[
       attrs.class,
       {
-        'bk-field-list': canEdit && !isNested && !isPreview,
         [nonEmptyClass]: filteredList.length,
       },
       listClass,
@@ -36,12 +43,20 @@
       :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'
 
 import type {
@@ -49,6 +64,7 @@ import type {
   MutatedField,
   EntityContext,
   ItemEditContext,
+  BlokkliProviderEntityContext,
 } from '#blokkli/types'
 import type {
   ValidFieldListTypes,
@@ -61,11 +77,16 @@ import {
   INJECT_IS_IN_REUSABLE,
   INJECT_IS_NESTED,
   INJECT_IS_PREVIEW,
+  INJECT_NESTING_LEVEL,
   INJECT_FIELD_LIST_BLOCKS,
   INJECT_PROVIDER_BLOCKS,
   INJECT_EDIT_CONTEXT,
   INJECT_MUTATED_FIELDS_MAP,
   INJECT_EDIT_FIELD_LIST_COMPONENT,
+  INJECT_PROVIDER_CONTEXT,
+  INJECT_FIELD_PROXY_MODE,
+  INJECT_GLOBAL_PROXY_MODE,
+  INJECT_FIELD_USES_PROXY,
 } from '../helpers/symbols'
 import type DraggableListComponent from './Edit/DraggableList.vue'
 
@@ -81,9 +102,14 @@ 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)
+const nestingLevel = inject<number>(INJECT_NESTING_LEVEL, 0)
 const mutatedFields = inject<Record<string, MutatedField> | null>(
   INJECT_MUTATED_FIELDS_MAP,
   null,
@@ -95,6 +121,16 @@ if (!entity) {
   throw new Error('Missing entity context.')
 }
 
+const providerEntity = inject<ComputedRef<BlokkliProviderEntityContext>>(
+  INJECT_PROVIDER_CONTEXT,
+)!
+
+if (!providerEntity) {
+  throw new Error(
+    'Missing blökkli injection: ' + INJECT_PROVIDER_CONTEXT.toString(),
+  )
+}
+
 const props = withDefaults(
   defineProps<{
     name: string
@@ -106,6 +142,10 @@ const props = withDefaults(
     nonEmptyClass?: string
     allowedFragments?: BlokkliFragmentName[]
     dropAlignment?: 'vertical' | 'horizontal'
+    /**
+     * Renders proxy blocks during editing.
+     */
+    proxyMode?: boolean
   }>(),
   {
     list: () => [],
@@ -130,27 +170,45 @@ const fieldKey = computed<string | undefined>(() => {
 
 const fieldListType = computed(() => props.fieldListType)
 
+function filterVisible(item?: FieldListItemTyped | FieldListItem): boolean {
+  // The block is always rendered during editing.
+  if (isEditing) {
+    return true
+  }
+  return isVisibleByOptions(item, providerEntity.value.language)
+}
+
 const filteredList = computed<FieldListItemTyped[]>(() => {
   if (mutatedFields && !isInReusable && editContext && fieldKey.value) {
-    return ((mutatedFields[fieldKey.value] || {}).list || []).map((v) => {
-      const mutatedOptions = editContext.mutatedOptions[v.uuid] || {}
-      return {
-        ...v,
-        options: {
-          ...v.options,
-          ...mutatedOptions,
-        },
-      } as FieldListItemTyped
-    })
+    return ((mutatedFields[fieldKey.value] || {}).list || [])
+      .map((v) => {
+        const mutatedOptions = editContext.mutatedOptions[v.uuid] || {}
+        return {
+          ...v,
+          options: {
+            ...v.options,
+            ...mutatedOptions,
+          },
+        } as FieldListItemTyped
+      })
+      .filter(filterVisible)
   }
+
   const list = Array.isArray(props.list) ? props.list : [props.list]
-  return list.filter(Boolean) as FieldListItemTyped[]
+  return list.filter(filterVisible) as FieldListItemTyped[]
 })
 
 provide(INJECT_IS_NESTED, true)
+provide(INJECT_NESTING_LEVEL, nestingLevel + 1)
 provide(INJECT_FIELD_LIST_TYPE, fieldListType)
 provide(INJECT_FIELD_LIST_BLOCKS, filteredList)
 
+if (props.proxyMode) {
+  provide(INJECT_IS_EDITING, false)
+  provide(INJECT_FIELD_PROXY_MODE, false)
+  provide(INJECT_FIELD_USES_PROXY, true)
+}
+
 if (!isNested) {
   provide(INJECT_PROVIDER_BLOCKS, filteredList)
 }

package/dist/runtime/components/BlokkliItem.vue

@@ -1,5 +1,19 @@
 <template>
-  <component :is="component" v-if="component" v-bind="props" />
+  <Component
+    :is="component"
+    v-if="isProxyMode || isGlobalProxyMode"
+    :bundle="bundle"
+    :uuid="uuid"
+    :field-list-type="fieldListType"
+    :parent-type="parentType"
+    :item-props="props"
+  />
+  <Component
+    :is="component"
+    v-else-if="component"
+    v-bind="props"
+    :data-bk-in-proxy="fieldUsesProxy || undefined"
+  />
   <div v-else-if="isEditing">Block not implemented</div>
 </template>
 
@@ -9,6 +23,7 @@ import {
   provide,
   useRuntimeConfig,
   inject,
+  defineAsyncComponent,
   type ComputedRef,
 } from '#imports'
 import type { InjectedBlokkliItem } from '#blokkli/types'
@@ -17,6 +32,9 @@ import {
   INJECT_BLOCK_ITEM,
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
+  INJECT_FIELD_PROXY_MODE,
+  INJECT_FIELD_USES_PROXY,
+  INJECT_GLOBAL_PROXY_MODE,
 } from '../helpers/symbols'
 import type {
   BlockBundleWithNested,
@@ -45,15 +63,25 @@ const componentProps = withDefaults(
   },
 )
 
+const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false)
+const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false)
+const isGlobalProxyMode = inject<ComputedRef<boolean> | null>(
+  INJECT_GLOBAL_PROXY_MODE,
+  null,
+)
+
 const fieldListType = inject<ComputedRef<ValidFieldListTypes> | undefined>(
   INJECT_FIELD_LIST_TYPE,
 )
 
-const component = 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(() => ({

package/dist/runtime/components/BlokkliProvider.vue

@@ -68,7 +68,11 @@ import {
   ref,
   onMounted,
 } from '#imports'
-import { INJECT_ENTITY_CONTEXT } from '../helpers/symbols'
+import {
+  INJECT_ENTITY_CONTEXT,
+  INJECT_PROVIDER_CONTEXT,
+} from '../helpers/symbols'
+import type { BlokkliProviderEntityContext } from '#blokkli/types'
 
 const PreviewProvider = defineAsyncComponent(
   () => import('./Edit/PreviewProvider.vue'),
@@ -141,6 +145,7 @@ const showIndicator = computed(
 
 function edit() {
   router.push({
+    path: route.path,
     query: {
       blokkliEditing: props.entityUuid,
       language: props.language,
@@ -148,6 +153,18 @@ function edit() {
   })
 }
 
+const blokkliProviderEntityContext = computed<BlokkliProviderEntityContext>(
+  () => {
+    return {
+      uuid: props.entityUuid,
+      type: props.entityType,
+      bundle: props.entityBundle,
+      language: props.language,
+    }
+  },
+)
+
+provide(INJECT_PROVIDER_CONTEXT, blokkliProviderEntityContext)
 provide(INJECT_ENTITY_CONTEXT, {
   uuid: props.entityUuid,
   type: props.entityType,

package/dist/runtime/components/Edit/BlockProxy/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div ref="root" class="bk-block-proxy">
+    <div class="bk-block-proxy-header">
+      <ItemIcon :bundle="bundle" />
+      {{ type?.label }}
+    </div>
+    <div v-if="proxyComponent" class="bk-block-proxy-component">
+      <Component :is="proxyComponent" v-bind="itemProps" />
+    </div>
+    <div v-if="fieldLayout.length" class="bk-block-proxy-fields">
+      <div
+        v-for="(row, i) in fieldLayout"
+        :key="i"
+        class="bk-block-proxy-fields-row"
+        :style="{
+          gridTemplateColumns: `repeat(${row.length}, 1fr)`,
+        }"
+      >
+        <div
+          v-for="field in row"
+          :key="field.name"
+          class="bk-block-proxy-fields-row-field"
+        >
+          <span>{{ field.label }}</span>
+          <BlokkliField proxy-mode :name="field.name" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  BlockBundleWithNested,
+  ValidFieldListTypes,
+} from '#blokkli/generated-types'
+import { computed, useBlokkli, onMounted, onBeforeUnmount, ref } from '#imports'
+import {
+  getDefinition,
+  getBlokkliItemProxyComponent,
+} from '#blokkli/definitions'
+
+import { ItemIcon } from '#blokkli/components'
+import type { FieldConfig } from '#blokkli/types'
+import { falsy } from '#blokkli/helpers'
+
+const props = defineProps<{
+  uuid: string
+  bundle: string
+  fieldListType: ValidFieldListTypes
+  parentType: BlockBundleWithNested
+  itemProps?: any
+}>()
+
+const { dom, types, runtimeConfig } = useBlokkli()
+
+const root = ref<HTMLElement | null>(null)
+
+const type = computed(() => types.getBlockBundleDefinition(props.bundle))
+
+const proxyComponent = getBlokkliItemProxyComponent(props.bundle)
+
+const definition = getDefinition(
+  props.bundle,
+  props.fieldListType,
+  props.parentType,
+)
+
+const fieldLayout = computed<FieldConfig[][]>(() => {
+  if (definition?.editor?.fieldLayout) {
+    return definition.editor.fieldLayout.map((row) => {
+      return row
+        .map((fieldName) => {
+          return types.fieldConfig.forName(
+            runtimeConfig.itemEntityType,
+            props.bundle,
+            fieldName,
+          )
+        })
+        .filter(falsy)
+    })
+  }
+
+  return types.fieldConfig
+    .forEntityTypeAndBundle(runtimeConfig.itemEntityType, props.bundle)
+    .map((config) => [config])
+})
+
+onMounted(() => {
+  dom.registerBlock(
+    props.uuid,
+    root.value,
+    props.bundle,
+    props.fieldListType,
+    props.parentType as BlockBundleWithNested,
+  )
+})
+
+onBeforeUnmount(() => {
+  dom.unregisterBlock(props.uuid)
+})
+</script>