@blokkli/editor 1.1.3 → 1.3.0

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="bk bk-diff-view bk-scrollbar-light">
+    <table class="bk-diff-table">
+      <thead>
+        <tr>
+          <th>{{ $t('diffTableChange', 'Change') }}</th>
+          <th>{{ $t('diffTableBundle', 'Type') }}</th>
+          <th>{{ $t('diffTableProperty', 'Property') }}</th>
+          <th>{{ $t('diffTableDiff', 'Diff') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="item in diffItems" :key="item.uuid">
+          <tr class="bk-diff-row">
+            <td
+              :rowspan="Math.max(1, item.props.length)"
+              class="bk-diff-status"
+            >
+              <div
+                v-if="item.status === 'added'"
+                class="bk-diff-status-label bk-is-added"
+              >
+                {{ $t('diffStatusAdded', 'Added') }}
+              </div>
+              <div
+                v-else-if="item.status === 'removed'"
+                class="bk-diff-status-label bk-is-removed"
+              >
+                {{ $t('diffStatusDeleted', 'Deleted') }}
+              </div>
+              <div v-else class="bk-diff-status-label">
+                {{ $t('diffStatusEdited', 'Edited') }}
+              </div>
+            </td>
+            <td
+              :rowspan="Math.max(1, item.props.length)"
+              class="bk-diff-bundle"
+            >
+              <button
+                class="bk-blokkli-item-label"
+                :disabled="item.status === 'removed'"
+                @click="scrollToBlock(item.uuid)"
+              >
+                <div class="bk-blokkli-item-label-icon">
+                  <ItemIcon :bundle="item.bundle" />
+                </div>
+                <span>{{ getLabel(item.bundle) }}</span>
+              </button>
+            </td>
+
+            <template v-if="item.props.length > 0">
+              <td>
+                <strong>{{ item.props[0].key }}</strong>
+              </td>
+              <td class="bk-diff-monospace">
+                <div class="bk-diff-prop-diff" v-html="item.props[0].diff" />
+              </td>
+            </template>
+            <template v-else>
+              <td />
+              <td />
+            </template>
+          </tr>
+          <tr
+            v-for="prop in item.props.slice(1)"
+            :key="prop.key"
+            class="bk-diff-prop-row"
+          >
+            <td>
+              <strong>{{ prop.key }}</strong>
+            </td>
+            <td class="bk-diff-monospace">
+              <div class="bk-diff-prop-diff" v-html="prop.diff" />
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useBlokkli } from '#imports'
+import type { FieldListItem, MutatedField } from '#blokkli/types'
+import { ItemIcon } from '#blokkli/components'
+import { getDefaultDefinition } from '#blokkli/definitions'
+import diff from 'html-diff-ts'
+
+function getProps(bundle: string, props: any): Record<string, string> {
+  const definition = getDefaultDefinition(bundle)
+  // Use custom method that builds the diff props.
+  if (definition?.editor?.mapDiffProps) {
+    return definition.editor.mapDiffProps(props)
+  }
+
+  if (typeof props === 'object') {
+    return Object.entries(props).reduce<Record<string, string>>(
+      (acc, [key, value]) => {
+        if (typeof value === 'string' || typeof value === 'number') {
+          acc[key] = value.toString()
+        } else if (typeof value === 'object') {
+          try {
+            // Fallback to a JSON representation of the data.
+            const json = JSON.stringify(value, null, 2)
+            acc[key] = `<pre>${json}</pre>`
+          } catch {
+            // Noop.
+          }
+        }
+        return acc
+      },
+      {},
+    )
+  }
+
+  return {}
+}
+
+interface DiffItemProp {
+  key: string
+  diff?: string
+}
+
+interface DiffItem {
+  uuid: string
+  bundle: string
+  status: 'changed' | 'added' | 'removed'
+  props: DiffItemProp[]
+}
+
+const { types, $t, adapter, state, eventBus, dom } = useBlokkli()
+
+const stateBefore = await adapter.loadStateAtIndex!(-1).then((v) =>
+  adapter.mapState(v),
+)
+
+function buildDiffItems(fields?: MutatedField[]): FieldListItem[] {
+  const items = (fields || []).flatMap((v) => v.list)
+  return items
+}
+
+const itemsBefore = computed(() =>
+  buildDiffItems(stateBefore.mutatedState?.fields),
+)
+const itemsAfter = computed(() => buildDiffItems(state.mutatedFields.value))
+
+const diffItems = computed<DiffItem[]>(() => {
+  const diffMap = new Map<string, DiffItem>()
+
+  itemsBefore.value.forEach((beforeItem) => {
+    const afterItem = itemsAfter.value.find(
+      (item) => item.uuid === beforeItem.uuid,
+    )
+    const beforeProps = getProps(beforeItem.bundle, beforeItem.props)
+
+    // Item has been removed.
+    if (!afterItem) {
+      diffMap.set(beforeItem.uuid, {
+        uuid: beforeItem.uuid,
+        bundle: beforeItem.bundle,
+        status: 'removed',
+        props: Object.entries(beforeProps).map(([key, value]) => ({
+          key,
+          value,
+          diff: diff(value, ''),
+        })),
+      })
+    } else {
+      // Item exists in both arrays.
+      const afterProps = getProps(afterItem.bundle, afterItem.props)
+      const changedProps: DiffItemProp[] = []
+
+      Object.entries(beforeProps).forEach(([key, beforeValue]) => {
+        const afterValue = afterProps[key]
+        if (beforeValue !== afterValue) {
+          changedProps.push({
+            key,
+            diff: diff(beforeValue, afterValue),
+          })
+        }
+      })
+
+      // Check for new properties inside afterProps.
+      Object.keys(afterProps).forEach((key) => {
+        if (!(key in beforeProps)) {
+          changedProps.push({
+            key,
+            diff: diff('', afterProps[key]),
+          })
+        }
+      })
+
+      // Only add the item if it has changes.
+      if (changedProps.length > 0) {
+        diffMap.set(beforeItem.uuid, {
+          uuid: beforeItem.uuid,
+          bundle: beforeItem.bundle,
+          status: 'changed',
+          props: changedProps,
+        })
+      }
+    }
+  })
+
+  // Process added items.
+  itemsAfter.value.forEach((afterItem) => {
+    if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
+      const afterProps = getProps(afterItem.bundle, afterItem.props)
+      diffMap.set(afterItem.uuid, {
+        uuid: afterItem.uuid,
+        bundle: afterItem.bundle,
+        status: 'added',
+        props: Object.entries(afterProps).map(([key, value]) => ({
+          key,
+          diff: diff('', value),
+        })),
+      })
+    }
+  })
+
+  return Array.from(diffMap.values()).sort((a, b) => {
+    const aY = dom.getBlockRect(a.uuid)?.y || 0
+    const bY = dom.getBlockRect(b.uuid)?.y || 0
+    return aY - bY
+  })
+})
+
+function getLabel(bundle: string): string {
+  return types.getBlockBundleDefinition(bundle)?.label || bundle
+}
+
+function scrollToBlock(uuid: string) {
+  eventBus.emit('scrollIntoView', { uuid, center: true })
+  eventBus.emit('select', uuid)
+}
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <PluginSidebar
+    id="diff"
+    :title="$t('diffSidebarTitle', 'Changes')"
+    :tour-text="
+      $t('diffSidebarTourText', 'Displays all the changes made during editing.')
+    "
+    icon="diff"
+    weight="-400"
+    beta
+  >
+    <DiffView />
+  </PluginSidebar>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature } from '#imports'
+import { PluginSidebar } from '#blokkli/plugins'
+import DiffView from './DiffView/index.vue'
+
+defineBlokkliFeature({
+  id: 'diff',
+  label: 'Diff',
+  icon: 'diff',
+  description: 'Displays a diff of all changes in the edit state.',
+  requiredAdapterMethods: ['loadStateAtIndex'],
+  beta: true,
+})
+
+const { $t } = useBlokkli()
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Diff',
+}
+</script>

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

@@ -8,10 +8,10 @@
       <div
         v-show="activeLabel"
         class="bk-dragging-overlay-label"
-        :style="{ backgroundColor: activeColor }"
+        :style="{ backgroundColor: currentActiveColor }"
       >
         <Icon name="cursor-move" />
-        <p v-html="prevActiveLabel" />
+        <p v-html="currentActiveLabel" />
       </div>
     </Transition>
     <div
@@ -100,13 +100,23 @@ const props = defineProps<{
   activeLabel?: string
 }>()
 
-const prevActiveLabel = ref('')
+const currentActiveLabel = ref('')
+const currentActiveColor = ref('')
 
 watch(
   () => props.activeLabel,
   function (label) {
     if (label) {
-      prevActiveLabel.value = label
+      currentActiveLabel.value = label
+    }
+  },
+)
+
+watch(
+  () => props.activeColor,
+  function (color) {
+    if (color) {
+      currentActiveColor.value = color
     }
   },
 )

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

@@ -772,6 +772,9 @@ const activeColorRgb = computed(() => {
   if (active.value?.type === 'drop-area') {
     return theme.teal.value.normal
   }
+  if (!active.value) {
+    return
+  }
   return getColorForField(active.value?.field)
 })
 

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

@@ -90,7 +90,9 @@ type FilteredItemType<T extends DraggableItem> = T extends {
   ? { itemType: 'existing'; items: T[] }
   : T extends { itemType: 'existing_structure' }
     ? { itemType: 'existing_structure'; items: T[] }
-    : { itemType: T['itemType']; item: T }
+    : T extends { itemType: 'media_library' }
+      ? { itemType: 'media_library'; items: T[] }
+      : { itemType: T['itemType']; item: T }
 
 function filterItemType<T extends DraggableItem>(
   items: T[],
@@ -105,7 +107,11 @@ function filterItemType<T extends DraggableItem>(
 
   const itemType = items[0].itemType
 
-  if (itemType === 'existing' || itemType === 'existing_structure') {
+  if (
+    itemType === 'existing' ||
+    itemType === 'existing_structure' ||
+    itemType === 'media_library'
+  ) {
     return { itemType, items } as any
   }
 
@@ -211,16 +217,24 @@ const onDropClipboardItem = async (
 }
 
 const onDropMediaLibraryItem = async (
-  item: DraggableMediaLibraryItem,
+  items: DraggableMediaLibraryItem[],
   host: DraggableHostData,
   afterUuid?: string,
 ) => {
-  if (adapter.mediaLibraryAddBlock) {
+  if (adapter.mediaLibraryAddBlock && items.length === 1) {
     await state.mutateWithLoadingState(() =>
       adapter.mediaLibraryAddBlock({
         preceedingUuid: afterUuid,
         host,
-        item,
+        item: items[0],
+      }),
+    )
+  } else if (adapter.mediaLibraryAddBlocks && items.length > 1) {
+    await state.mutateWithLoadingState(() =>
+      adapter.mediaLibraryAddBlocks({
+        preceedingUuid: afterUuid,
+        host,
+        items,
       }),
     )
   }
@@ -279,7 +293,7 @@ const onDrop = (e: DropTargetEvent) => {
     } else if (typed.itemType === 'action') {
       onDropAction(typed.item, host, e.field, afterUuid)
     } else if (typed.itemType === 'media_library') {
-      await onDropMediaLibraryItem(typed.item, host, afterUuid)
+      await onDropMediaLibraryItem(typed.items, host, afterUuid)
     }
 
     eventBus.emit('dragging:end')

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

@@ -53,7 +53,14 @@ function onMessage(e: MessageEvent): void {
       props.form.id === 'entity:edit' ||
       props.form.id === 'entity:translate'
     ) {
-      eventBus.emit('reloadEntity')
+      if (props.form.id === 'entity:translate') {
+        const langcode = props.form.translation.id
+        eventBus.emit('reloadEntity', () => {
+          eventBus.emit('entity:translated', langcode)
+        })
+      } else {
+        eventBus.emit('reloadEntity')
+      }
     } else {
       eventBus.emit('reloadState')
     }

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

@@ -41,7 +41,8 @@ type Editable = {
   value?: string
 }
 
-const { selection, adapter, types, $t, dom, runtimeConfig } = useBlokkli()
+const { selection, adapter, types, $t, dom, runtimeConfig, state } =
+  useBlokkli()
 const editable = ref<Editable | null>(null)
 const hasTransition = ref(false)
 
@@ -84,9 +85,11 @@ const buildEditable = (
   )
 
   if (!config) {
-    throw new Error(
-      `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`,
-    )
+    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`
+    if (uuid) {
+      message += ` with uuid "${uuid}"`
+    }
+    throw new Error(message)
   }
 
   // Adapter doesn't support editable frames, return.
@@ -115,6 +118,9 @@ const buildEditable = (
 }
 
 onBlokkliEvent('editable:focus', (e) => {
+  if (!state.canEdit.value) {
+    return
+  }
   hasTransition.value = !editable.value
   editable.value = buildEditable(e.fieldName, e.uuid) || null
   if (editable.value) {
@@ -157,7 +163,7 @@ defineCommands(() => {
 
   return editables.map((v) => {
     return {
-      id: 'feature:editable:edit:' + v.fieldName,
+      id: 'feature:editable:edit:' + v.host.uuid + ':' + v.fieldName,
       group: 'selection',
       label: $t('editableCommandEdit', 'Edit field "@name"').replace(
         '@name',

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

@@ -3,6 +3,7 @@
     <button
       ref="buttonEl"
       class="bk-toolbar-button"
+      :disabled="!state.canEdit.value"
       @click="eventBus.emit('editEntity')"
     >
       <div class="bk-toolbar-title">

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

@@ -10,7 +10,7 @@
       )
     "
     icon="history"
-    weight="-100"
+    weight="-800"
   >
     <HistoryList :scrolled-to-end="scrolledToEnd" />
   </PluginSidebar>
@@ -64,6 +64,8 @@ const { adapter, settings } = defineBlokkliFeature({
     useMouseButtons: {
       type: 'checkbox',
       label: 'Use mouse buttons for undo/redo',
+      description:
+        'When enabled you can use the backwards/forwards buttons on your mouse to undo and redo.',
       default: true,
       group: 'behavior',
       viewports: ['desktop'],

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

@@ -46,7 +46,9 @@ const { adapter, settings } = defineBlokkliFeature({
     showDialogWhenEmpty: {
       type: 'checkbox',
       default: true,
-      label: 'Show import dialog at start when page is empty',
+      label: 'Show import dialog at start',
+      description:
+        'Displays the import dialog when starting blökkli if the page is empty.',
       group: 'behavior',
     },
   },
@@ -78,7 +80,8 @@ onMounted(() => {
   if (
     isEmpty.value &&
     !state.mutations.value.length &&
-    settings.value.showDialogWhenEmpty
+    settings.value.showDialogWhenEmpty &&
+    state.canEdit.value
   ) {
     showModal.value = true
   }

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

@@ -14,7 +14,15 @@
     @submit="$emit('confirm', label)"
     @cancel="$emit('cancel')"
   >
-    <div>
+    <div class="bk-reusable-dialog-form">
+      <InfoBox
+        :text="
+          $t(
+            'libraryDialogReusableInfo',
+            'The library item will be available for placement on other pages once this page has been published.',
+          )
+        "
+      />
       <label for="reusable_label" class="bk-form-label">{{
         $t('libraryDialogDescriptionLabel', 'Description')
       }}</label>
@@ -44,8 +52,7 @@
 
 <script lang="ts" setup>
 import { ref, useBlokkli, onMounted } from '#imports'
-
-import { DialogModal } from '#blokkli/components'
+import { DialogModal, InfoBox } from '#blokkli/components'
 import { realBackgroundColor } from '#blokkli/helpers'
 
 defineEmits<{

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/Item.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    :key="mediaId"
+    class="bk-media-library-items-item"
+    :class="{ 'bk-is-selected': isSelected }"
+    :data-sortli-id="'media_library_' + mediaId"
+    data-element-type="media_library"
+    :data-item-bundle="targetBundles[0]"
+    :data-media-id="mediaId"
+    :data-media-bundle="mediaBundle"
+  >
+    <div class="bk-media-library-items-item-box">
+      <label @click.stop>
+        <input v-model="selected" type="checkbox" :value="mediaId" />
+      </label>
+      <div class="bk-media-library-items-item-image">
+        <img :src="thumbnail" />
+      </div>
+    </div>
+    <div class="bk-media-library-items-item-text">
+      <h3>{{ label }}</h3>
+      <p>{{ context }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BlokkliIcon } from '#blokkli/icons'
+import { computed } from '#imports'
+
+const props = defineProps<{
+  mediaId: string
+  label: string
+  context: string
+  targetBundles: string[]
+  thumbnail?: string
+  icon?: BlokkliIcon
+  mediaBundle?: string
+}>()
+
+const selected = defineModel<string[]>()
+
+const isSelected = computed(() => selected.value?.includes(props.mediaId))
+
+// @TODO: Shift-click to select all media items inbetween.
+</script>