@blokkli/editor 1.0.0 → 1.0.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "compatibility": {
     "nuxt": "^3.12.0"
   },

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { createUnplugin } from 'unplugin';
 import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
 
-const version = "1.0.0";
+const version = "1.0.2";
 
 function sortObjectKeys(obj) {
   const sortedKeys = Object.keys(obj).sort();
@@ -1155,6 +1155,14 @@ const libraryError$2 = {
 	source: "Failed to add block to library.",
 	translation: "Das Element konnte nicht wiederverwendbar gemacht werden."
 };
+const libraryItemEditOverlayBack$2 = {
+	source: "Back to page",
+	translation: "Zurück zur Seite"
+};
+const libraryItemEditOverlayTitle$2 = {
+	source: "Edit reusable block",
+	translation: "Wiederverwendbaren Block bearbeiten"
+};
 const libraryPlaceBundleSelectLabel$2 = {
 	source: "Bundle",
 	translation: "Typ"
@@ -1692,6 +1700,8 @@ const de = {
 	libraryDialogTitle: libraryDialogTitle$2,
 	libraryDialogTitleInputPlaceholder: libraryDialogTitleInputPlaceholder$2,
 	libraryError: libraryError$2,
+	libraryItemEditOverlayBack: libraryItemEditOverlayBack$2,
+	libraryItemEditOverlayTitle: libraryItemEditOverlayTitle$2,
 	libraryPlaceBundleSelectLabel: libraryPlaceBundleSelectLabel$2,
 	libraryPlaceDialogLead: libraryPlaceDialogLead$2,
 	libraryPlaceDialogSubmit: libraryPlaceDialogSubmit$2,
@@ -2298,6 +2308,14 @@ const libraryError$1 = {
 	source: "Failed to add block to library.",
 	translation: "L'élément n’a pas pu être rendu réutilisable."
 };
+const libraryItemEditOverlayBack$1 = {
+	source: "Back to page",
+	translation: ""
+};
+const libraryItemEditOverlayTitle$1 = {
+	source: "Edit reusable block",
+	translation: ""
+};
 const libraryPlaceBundleSelectLabel$1 = {
 	source: "Bundle",
 	translation: ""
@@ -2835,6 +2853,8 @@ const fr = {
 	libraryDialogTitle: libraryDialogTitle$1,
 	libraryDialogTitleInputPlaceholder: libraryDialogTitleInputPlaceholder$1,
 	libraryError: libraryError$1,
+	libraryItemEditOverlayBack: libraryItemEditOverlayBack$1,
+	libraryItemEditOverlayTitle: libraryItemEditOverlayTitle$1,
 	libraryPlaceBundleSelectLabel: libraryPlaceBundleSelectLabel$1,
 	libraryPlaceDialogLead: libraryPlaceDialogLead$1,
 	libraryPlaceDialogSubmit: libraryPlaceDialogSubmit$1,
@@ -3441,6 +3461,14 @@ const libraryError = {
 	source: "Failed to add block to library.",
 	translation: "L'elemento non può essere reso riutilizzabile."
 };
+const libraryItemEditOverlayBack = {
+	source: "Back to page",
+	translation: ""
+};
+const libraryItemEditOverlayTitle = {
+	source: "Edit reusable block",
+	translation: ""
+};
 const libraryPlaceBundleSelectLabel = {
 	source: "Bundle",
 	translation: ""
@@ -3978,6 +4006,8 @@ const it = {
 	libraryDialogTitle: libraryDialogTitle,
 	libraryDialogTitleInputPlaceholder: libraryDialogTitleInputPlaceholder,
 	libraryError: libraryError,
+	libraryItemEditOverlayBack: libraryItemEditOverlayBack,
+	libraryItemEditOverlayTitle: libraryItemEditOverlayTitle,
 	libraryPlaceBundleSelectLabel: libraryPlaceBundleSelectLabel,
 	libraryPlaceDialogLead: libraryPlaceDialogLead,
 	libraryPlaceDialogSubmit: libraryPlaceDialogSubmit,
@@ -4972,12 +5002,14 @@ const module = defineNuxtModule({
       followSymbolicLinks: false
     }) : [];
     await featureExtractor.addFiles([...builtinFeatures, ...customFeatures]);
-    const features = featureExtractor.getFeatures().filter((v) => {
+    const extractedFeatures = featureExtractor.getFeatures();
+    const features = extractedFeatures.filter((v) => {
       return v.id !== "theme" || moduleOptions.enableThemeEditor;
     });
     const featuresContext = {
       features
     };
+    const allFeatureIds = extractedFeatures.map((v) => v.id);
     if (moduleOptions.alterFeatures) {
       featuresContext.features = await Promise.resolve(
         moduleOptions.alterFeatures(featuresContext)
@@ -5023,7 +5055,7 @@ export const availableFeaturesAtBuild = ${JSON.stringify(
           availableFeaturesAtBuild
         )} as const
 
-export type ValidFeatureKey = typeof availableFeaturesAtBuild[number]
+export type ValidFeatureKey = ${allFeatureIds.map((v) => '"' + v + '"').join(" | ")}
 
 type FeatureComponent = {
   id: string

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

@@ -339,6 +339,13 @@ export default defineBlokkliEditAdapter(
       const url = typeof parts === "string" ? parts : "/" + parts.join("/");
       return { url: prefix + url + `?paragraphsBlokkli=true` };
     };
+    const getLibraryItemEditUrl = (uuid) => {
+      const url = buildFormUrl(
+        ["blokkli", "library-item", uuid],
+        ctx.value.language
+      ).url;
+      return `${url}&blokkliEditing=${uuid}&language=${ctx.value.language}`;
+    };
     const formFrameBuilder = (e) => {
       const entityType = ctx.value.entityType.toLowerCase();
       if (e.id === "block:add") {
@@ -637,7 +644,8 @@ export default defineBlokkliEditAdapter(
       addContentSearchItem,
       clipboardMapBundle,
       addBlockFromClipboardItem,
-      changeLanguage
+      changeLanguage,
+      getLibraryItemEditUrl
     };
   }
 );

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

@@ -197,6 +197,10 @@ export interface BlokkliAdapter<T> {
      * Add a reusable item.
      */
     addLibraryItem?: (e: AddReusableItemEvent) => Promise<MutationResponseLike<T>>;
+    /**
+     * Build the URL to edit a library item.
+     */
+    getLibraryItemEditUrl?: (uuid: string) => string;
     /**
      * Delete multiple items.
      */

package/dist/runtime/components/Blocks/FromLibrary/index.vue

@@ -7,6 +7,7 @@
     :data-reusable-bundle="item.bundle"
     :data-reusable-uuid="item.uuid"
     :data-bk-library-label="libraryItem?.label"
+    :data-bk-library-item-uuid="libraryItem?.uuid"
     data-blokkli-is-reusable="true"
     :parent-type="parentType"
   />
@@ -23,6 +24,7 @@ import type { FieldListItem } from '#blokkli/types'
 interface LibraryItem {
   block?: FieldListItem
   label?: string
+  uuid?: string
 }
 
 const props = defineProps<{
@@ -31,9 +33,6 @@ const props = defineProps<{
 
 const { index, options, parentType } = defineBlokkli({
   bundle: 'from_library',
-  editor: {
-    disableEdit: true,
-  },
 })
 
 // Reusable items inherit the options from this wrapper paragraph.

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

@@ -19,7 +19,12 @@
         </button>
       </div>
 
-      <div class="bk-dialog-content">
+      <div
+        class="bk-dialog-content"
+        :class="{
+          'bk-is-fullscreen': fullScreen,
+        }"
+      >
         <div class="bk-dialog-content-inner">
           <div v-if="lead" class="bk bk-dialog-lead">
             {{ lead }}
@@ -67,6 +72,7 @@ const props = withDefaults(
     isLoading?: boolean
     hideButtons?: boolean
     icon?: BlokkliIcon
+    fullScreen?: boolean
   }>(),
   {
     width: 600,
@@ -82,6 +88,13 @@ const style = computed(() => {
     return {}
   }
 
+  if (props.fullScreen) {
+    return {
+      maxWidth: '100vw',
+      height: '100vh',
+    }
+  }
+
   if (typeof props.width === 'number') {
     return {
       maxWidth: props.width + 'px',

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

@@ -241,10 +241,7 @@ function onPointerUp(e: PointerEvent) {
         if (!block) {
           return
         }
-        eventBus.emit('item:edit', {
-          uuid: lastInteractedElement.uuid,
-          bundle: block.itemBundle,
-        })
+        eventBus.emit('item:doubleClick', block)
       }
     }
   }

package/dist/runtime/components/Edit/EditProvider.vue

@@ -166,6 +166,7 @@ onMounted(() => {
   setRootClasses()
   baseLogger.log('EditProvider mounted')
   dom.init()
+  broadcast.emit('editorLoaded', { uuid: props.entityUuid })
 })
 
 onBeforeUnmount(() => {

package/dist/runtime/components/Edit/Features/BlockAddList/index.vue

@@ -60,7 +60,11 @@ import {
   nextTick,
 } from '#imports'
 import { AddListItem } from '#blokkli/components'
-import type { Command, DraggableExistingBlock } from '#blokkli/types'
+import type {
+  Command,
+  DraggableExistingBlock,
+  FieldConfig,
+} from '#blokkli/types'
 import { getDefaultDefinition } from '#blokkli/definitions'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
@@ -225,7 +229,7 @@ const getBundlesForAppendCommands = () => {
   }
 
   const block = selection.blocks.value[0]
-  const field = types.getFieldConfig(
+  const field: FieldConfig | undefined = types.getFieldConfig(
     block.hostType,
     block.hostBundle,
     block.hostFieldName,
@@ -256,7 +260,7 @@ const getAppendEndCommands = (): Command[] => {
       context.value.entityType,
       context.value.entityBundle,
     )
-    .flatMap((field) => {
+    .flatMap((field: FieldConfig) => {
       if (field.cardinality !== -1) {
         const key = getFieldKey(context.value.entityUuid, field.name)
         const count = state.getFieldBlockCount(key)
@@ -267,7 +271,7 @@ const getAppendEndCommands = (): Command[] => {
       }
       return field.allowedBundles
         .filter((v) => !reservedBundles.includes(v))
-        .map((bundle) => {
+        .map((bundle: string) => {
           const definition = types.getBlockBundleDefinition(bundle)
           return {
             id: 'block_add_list:append_end:' + bundle + field.name,
@@ -350,29 +354,31 @@ const getInsertCommands = (
       }
     })
 
-  const commands: Command[] = nestedFields.flatMap((field) => {
-    return field.allowedBundles.map((bundle) => {
-      const label = types.getBlockBundleDefinition(bundle)?.label || bundle
-      return {
-        id: 'block_add_list:insert:' + field.name + ':' + bundle,
-        label: $t(
-          'addBlockCommand.insertInField',
-          'Insert "@block" into "@field"',
-        )
-          .replace('@block', label)
-          .replace('@field', field.label),
-        group: 'add',
-        bundle,
-        callback: () =>
-          commandCallbackInsert(
-            bundle,
-            field.name,
-            field.entityType,
-            field.uuid,
-          ),
-      }
-    })
-  })
+  const commands: Command[] = nestedFields.flatMap(
+    (field: FieldConfig & { uuid: string }) => {
+      return field.allowedBundles.map((bundle: string) => {
+        const label = types.getBlockBundleDefinition(bundle)?.label || bundle
+        return {
+          id: 'block_add_list:insert:' + field.name + ':' + bundle,
+          label: $t(
+            'addBlockCommand.insertInField',
+            'Insert "@block" into "@field"',
+          )
+            .replace('@block', label)
+            .replace('@field', field.label),
+          group: 'add',
+          bundle,
+          callback: () =>
+            commandCallbackInsert(
+              bundle,
+              field.name,
+              field.entityType,
+              field.uuid,
+            ),
+        }
+      })
+    },
+  )
 
   if (block.hostType === runtimeConfig.itemEntityType) {
     const parentBlock = dom.findBlock(block.hostUuid)

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

@@ -2,7 +2,7 @@
   <PluginItemAction
     id="edit"
     :title="$t('edit', 'Edit')"
-    :disabled="disabled"
+    :disabled="!canEdit"
     meta
     key-code="E"
     icon="edit"
@@ -16,6 +16,7 @@ import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
 import type { DraggableExistingBlock } from '#blokkli/types'
 import { PluginItemAction } from '#blokkli/plugins'
 import { getDefinition } from '#blokkli/definitions'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
 defineBlokkliFeature({
   id: 'edit',
@@ -25,23 +26,45 @@ defineBlokkliFeature({
   requiredAdapterMethods: ['formFrameBuilder'],
 })
 
-const { eventBus, selection, state, $t } = useBlokkli()
+const { eventBus, selection, state, $t, adapter } = useBlokkli()
 
-const disabled = computed(() => {
-  if (state.editMode.value !== 'editing') {
-    return true
-  }
+const block = computed(() => {
   if (selection.blocks.value.length !== 1) {
-    return true
+    return null
+  }
+
+  return selection.blocks.value[0]
+})
+
+const canEdit = computed(() => {
+  // Editing is only possible when a single block is selected.
+  if (!block.value) {
+    return false
   }
 
-  const block = selection.blocks.value[0]
   const definition = getDefinition(
-    block.itemBundle,
-    block.hostFieldListType,
-    block.parentBlockBundle,
+    block.value.itemBundle,
+    block.value.hostFieldListType,
+    block.value.parentBlockBundle,
   )
-  return definition?.editor?.disableEdit === true
+
+  // Editing is explicitly disabled via the definition.
+  if (definition?.editor?.disableEdit) {
+    return false
+  }
+
+  // For reusable blocks, editing is only possible if the adapter implements
+  // the getLibraryItemEditUrl method.
+  if (block.value.libraryItemUuid) {
+    return (
+      !!adapter.getLibraryItemEditUrl &&
+      (state.editMode.value === 'editing' ||
+        state.editMode.value === 'translating') &&
+      !block.value.isNew
+    )
+  }
+
+  return state.editMode.value === 'editing'
 })
 
 function onClick(items: DraggableExistingBlock[]) {
@@ -49,11 +72,34 @@ function onClick(items: DraggableExistingBlock[]) {
     return
   }
 
+  if (!canEdit.value) {
+    return
+  }
+
+  const item = items[0]
+
+  // Because editing library items inside the current context is not (yet)
+  // supported, editing has to happen in a separate window where the host
+  // context is the library item entity.
+  if (item.libraryItemUuid && adapter.getLibraryItemEditUrl) {
+    const url = adapter.getLibraryItemEditUrl(item.libraryItemUuid)
+    eventBus.emit('library:edit-item', {
+      url,
+      label: item.editTitle,
+      uuid: item.libraryItemUuid,
+    })
+    return
+  }
+
   eventBus.emit('item:edit', {
-    uuid: items[0].uuid,
-    bundle: items[0].itemBundle,
+    uuid: item.uuid,
+    bundle: item.itemBundle,
   })
 }
+
+onBlokkliEvent('item:doubleClick', function (block) {
+  onClick([block])
+})
 </script>
 
 <script lang="ts">

package/dist/runtime/components/Edit/Features/Exit/index.vue

@@ -20,12 +20,13 @@ defineBlokkliFeature({
   description: 'Provides a menu button to exit the editor without saving.',
 })
 
-const { $t } = useBlokkli()
+const { $t, broadcast, context } = useBlokkli()
 
 const route = useRoute()
 
 function onClick() {
   nextTick(() => {
+    broadcast.emit('closeEditor', { uuid: context.value.entityUuid })
     window.location.href = route.path
   })
 }

package/dist/runtime/components/Edit/Features/Library/EditReusable/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <Teleport to="body">
+    <Loading v-if="isLoading" />
+    <Transition name="bk-library-edit-header">
+      <header v-show="isLoaded" class="bk bk-library-edit-overlay-header">
+        <h2>
+          <span>{{
+            $t('libraryItemEditOverlayTitle', 'Edit reusable block')
+          }}</span>
+          <span v-if="label">&nbsp;{{ label }}</span>
+        </h2>
+        <button @click.prevent="closeOverlay">
+          <Icon name="arrow-left" />
+          <span>{{ $t('libraryItemEditOverlayBack', 'Back to page') }}</span>
+        </button>
+      </header>
+    </Transition>
+    <Transition
+      :css="false"
+      @enter="onEnter"
+      @after-enter="onAfter"
+      @enter-cancelled="onAfter"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+      @leave-cancelled="onAfterLeave"
+    >
+      <div v-show="isLoaded" class="bk bk-library-edit-overlay">
+        <iframe
+          ref="iframe"
+          :src="url"
+          style="width: 100%; height: 100%"
+          @load="onLoad"
+        />
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import onBroadcastEvent from '#blokkli/helpers/composables/onBroadcastEvent'
+import { ref, useBlokkli } from '#imports'
+import { Icon } from '#blokkli/components'
+import Loading from './../../../Loading/index.vue'
+
+const props = defineProps<{
+  url: string
+  uuid: string
+  label?: string
+}>()
+
+const DURATION = 530
+const emit = defineEmits(['submit', 'close'])
+
+function getOriginatingElement(): HTMLElement | null {
+  const el = document.querySelector(
+    `[data-bk-library-item-uuid="${props.uuid}"]`,
+  )
+  if (el instanceof HTMLElement) {
+    return el
+  }
+
+  return null
+}
+
+// called one frame after the element is inserted.
+// use this to start the entering animation.
+function onEnter(el: Element, done: () => void) {
+  if (el instanceof HTMLElement) {
+    const originating = getOriginatingElement()
+    if (!originating) {
+      done()
+      isLoading.value = false
+      return
+    }
+
+    const originatingRect = originating.getBoundingClientRect()
+    const overlayRect = el.getBoundingClientRect()
+
+    const offsetX =
+      originatingRect.x - overlayRect.x + originatingRect.width / 2
+    const offsetY =
+      originatingRect.y - overlayRect.y + originatingRect.height / 2
+
+    el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`
+
+    setTimeout(() => {
+      el.style.transitionDuration = DURATION + 'ms'
+      el.style.transitionTimingFunction = 'cubic-bezier(0.56, 0.04, 0.25, 1)'
+      el.style.transitionProperty = 'transform'
+      el.style.transformOrigin = '0px 0px'
+      el.style.transform = 'translate(0px, 0px)'
+    }, 10)
+
+    setTimeout(() => {
+      done()
+      isLoading.value = false
+    }, DURATION)
+  }
+}
+
+// called when the enter transition has finished.
+function onAfter(el: Element) {
+  if (el instanceof HTMLElement) {
+    el.style.transform = ''
+    el.style.transitionDuration = ''
+    el.style.opacity = ''
+    el.style.transitionProperty = ''
+    el.style.transitionTimingFunction = ''
+    el.style.transformOrigin = ''
+  }
+}
+
+// called when the leave transition starts.
+// use this to start the leaving animation.
+function onLeave(el: Element, done: () => void) {
+  if (el instanceof HTMLElement) {
+    const originating = getOriginatingElement()
+    if (!originating) {
+      done()
+      return
+    }
+
+    const originatingRect = originating.getBoundingClientRect()
+    const overlayRect = el.getBoundingClientRect()
+
+    const offsetX =
+      originatingRect.x - overlayRect.x + originatingRect.width / 2
+    const offsetY =
+      originatingRect.y - overlayRect.y + originatingRect.height / 2
+
+    el.style.transform = 'translate(0px, 0px)'
+
+    setTimeout(() => {
+      el.style.transitionDuration = DURATION + 'ms'
+      el.style.transitionTimingFunction = 'cubic-bezier(0.56, 0.04, 0.25, 1)'
+      el.style.transitionProperty = 'transform'
+      el.style.transformOrigin = '0px 0px'
+      el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(0, 0)`
+    }, 10)
+
+    setTimeout(() => {
+      done()
+    }, DURATION)
+  }
+}
+
+function onAfterLeave(el: Element) {
+  onAfter(el)
+  if (hasPublished.value) {
+    emit('submit')
+  } else {
+    emit('close')
+  }
+}
+
+const { $t } = useBlokkli()
+
+const iframe = ref<HTMLIFrameElement | null>(null)
+const isLoaded = ref(false)
+const isLoading = ref(true)
+const hasPublished = ref(false)
+let timeout: any = null
+
+function onLibraryItemPublished({ uuid }: { uuid: string }) {
+  if (props.uuid === uuid) {
+    hasPublished.value = true
+    isLoaded.value = false
+  }
+}
+
+function onLoad() {
+  clearTimeout(timeout)
+
+  timeout = window.setTimeout(() => {
+    isLoaded.value = true
+  }, 3000)
+  if (!iframe.value) {
+    return
+  }
+
+  iframe.value.focus()
+
+  iframe.value.contentWindow?.focus()
+}
+
+function closeOverlay() {
+  hasPublished.value = false
+  isLoaded.value = false
+}
+
+function onLibraryItemClose({ uuid }: { uuid: string }) {
+  if (props.uuid === uuid) {
+    closeOverlay()
+  }
+}
+
+function onEditorLoaded({ uuid }: { uuid: string }) {
+  if (props.uuid === uuid) {
+    isLoaded.value = true
+  }
+}
+
+onBroadcastEvent('published', onLibraryItemPublished)
+onBroadcastEvent('closeEditor', onLibraryItemClose)
+onBroadcastEvent('editorLoaded', onEditorLoaded)
+</script>

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/index.vue

@@ -93,7 +93,7 @@ import type {
 } from '#blokkli/adapter'
 import { FormOverlay, Icon } from '#blokkli/components'
 import Loading from './../../../Loading/index.vue'
-import type { BlokkliFieldElement } from '#blokkli/types'
+import type { BlokkliFieldElement, FieldConfig } from '#blokkli/types'
 import { ref, useBlokkli, useAsyncData, computed, watch } from '#imports'
 import LibraryListItem from './Item/index.vue'
 
@@ -115,13 +115,12 @@ const selectedItem = ref('')
 const page = ref(0)
 
 const allowedBundles = computed<string[]>(() => {
-  return (
-    types.getFieldConfig(
-      props.field.hostEntityType,
-      props.field.hostEntityBundle,
-      props.field.name,
-    )?.allowedBundles || []
-  ).filter((v) => {
+  const fieldConfig: FieldConfig | undefined = types.getFieldConfig(
+    props.field.hostEntityType,
+    props.field.hostEntityBundle,
+    props.field.name,
+  )
+  return (fieldConfig?.allowedBundles || []).filter((v) => {
     return types.getBlockBundleDefinition(v)?.allowReusable
   })
 })