@blokkli/editor 1.0.1 → 1.0.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "1.0.1",
+  "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.1";
+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,

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/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/index.vue

@@ -50,7 +50,7 @@
   </Teleport>
 
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <transition name="bk-slide-up" :duration="200">
       <LibraryDialog
         v-if="placedAction && adapter.getLibraryItems"
         :field="placedAction.field"
@@ -59,6 +59,12 @@
       />
     </transition>
   </Teleport>
+  <EditReusable
+    v-if="editingLibraryItem"
+    v-bind="editingLibraryItem"
+    @submit="onSubmitLibraryItem"
+    @close="cancelLibraryItemEdit"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -66,8 +72,10 @@ import { ref, computed, useBlokkli, defineBlokkliFeature } from '#imports'
 import { PluginItemAction, PluginAddAction } from '#blokkli/plugins'
 import ReusableDialog from './ReusableDialog/index.vue'
 import LibraryDialog from './LibraryDialog/index.vue'
+import EditReusable from './EditReusable/index.vue'
 import { getDefinition } from '#blokkli/definitions'
-import type { ActionPlacedEvent } from '#blokkli/types'
+import type { ActionPlacedEvent, LibraryEditItemEvent } from '#blokkli/types'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
 const { adapter } = defineBlokkliFeature({
   id: 'library',
@@ -175,6 +183,21 @@ const canMakeReusable = computed(
     itemBundle?.value?.allowReusable &&
     fromLibraryAllowedInList.value,
 )
+
+const editingLibraryItem = ref<LibraryEditItemEvent | null>(null)
+
+onBlokkliEvent('library:edit-item', function (e) {
+  editingLibraryItem.value = e
+})
+
+function cancelLibraryItemEdit() {
+  editingLibraryItem.value = null
+}
+
+function onSubmitLibraryItem() {
+  eventBus.emit('reloadState')
+  cancelLibraryItemEdit()
+}
 </script>
 
 <script lang="ts">

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

@@ -24,7 +24,7 @@ const { adapter } = defineBlokkliFeature({
     'Provides a menu button to publish the changes of the current entity.',
 })
 
-const { state, $t, eventBus } = useBlokkli()
+const { state, $t, eventBus, broadcast, context } = useBlokkli()
 const { mutations, canEdit, mutateWithLoadingState } = state
 
 const onClick = async () => {
@@ -39,7 +39,10 @@ const onClick = async () => {
     if (validations.length) {
       eventBus.emit('publish:failed')
     }
+    return
   }
+
+  broadcast.emit('published', { uuid: context.value.entityUuid })
 }
 </script>
 

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

@@ -72,6 +72,7 @@
   <PluginItemAction
     v-if="editMode === 'translating'"
     id="translate"
+    :disabled="!canTranslateBlock"
     :title="$t('translationsItemAction', 'Translate')"
     icon="translate"
     @click="onTranslate"
@@ -98,6 +99,7 @@ import type {
   Language,
 } from '#blokkli/types'
 import Banner from './Banner/index.vue'
+import { getDefinition } from '#blokkli/definitions'
 
 const { adapter } = defineBlokkliFeature({
   id: 'translations',
@@ -107,7 +109,7 @@ const { adapter } = defineBlokkliFeature({
   description: 'Adds support for block translations.',
 })
 
-const { eventBus, state, context, $t, ui } = useBlokkli()
+const { eventBus, state, context, $t, ui, selection } = useBlokkli()
 const { translation, editMode } = state
 
 const isOpen = ref(false)
@@ -152,6 +154,29 @@ const items = computed<TranslationStateItem[]>(() => {
     .filter(falsy)
 })
 
+const canTranslateBlock = computed(() => {
+  if (selection.blocks.value.length !== 1) {
+    return false
+  }
+  const block = selection.blocks.value[0]
+
+  if (block.libraryItemUuid) {
+    return false
+  }
+
+  const definition = getDefinition(
+    block.itemBundle,
+    block.hostFieldListType,
+    block.parentBlockBundle,
+  )
+
+  if (definition?.editor?.disableEdit) {
+    return false
+  }
+
+  return true
+})
+
 function onClick(item: TranslationStateItem, event: Event) {
   if (item.translation?.exists) {
     return adapter.changeLanguage(item.translation)