@blokkli/editor 1.1.0 → 1.1.2

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

@@ -0,0 +1,149 @@
+<template>
+  <div class="bk bk-history bk-control">
+    <ul v-if="mapped.length">
+      <li
+        v-for="item in mapped"
+        :key="item.index"
+        :class="{
+          'bk-is-not-active': item.index > currentMutationIndex,
+          'bk-is-active': item.index === currentMutationIndex,
+          'bk-is-disabled': !item.enabled,
+          'bk-is-applied': item.index < currentMutationIndex && item.enabled,
+        }"
+      >
+        <button
+          :disabled="!canEdit"
+          class="bk-history-item-button"
+          @click="setHistoryIndex(item.index)"
+        >
+          <div>
+            <div>
+              <strong>{{ item.mutation.plugin?.label }}</strong>
+            </div>
+            <RelativeTime
+              v-if="item.timestamp"
+              v-slot="{ formatted }"
+              :timestamp="item.timestamp"
+            >
+              <em>{{ formatted }}</em>
+            </RelativeTime>
+          </div>
+        </button>
+        <div v-if="canSetStatus" class="bk-history-item-actions">
+          <button
+            @click.prevent="setMutationItemStatus(item.index, !item.enabled)"
+          >
+            <Icon name="close" />
+          </button>
+        </div>
+      </li>
+      <li v-if="totalMutations > showAmount" class="bk-history-load-more">
+        <button class="bk-history-item-button" @click="showAmount += 100">
+          <strong
+            >{{
+              $t('historyShowMore', 'Show @count more').replace(
+                '@count',
+                Math.min(totalMutations - showAmount, 100).toString(),
+              )
+            }}
+          </strong>
+        </button>
+      </li>
+      <li
+        class="bk-is-last"
+        :class="[
+          currentMutationIndex === -1 ? 'bk-is-active' : 'bk-is-applied',
+          { 'bk-has-shadow': !scrolledToEnd },
+        ]"
+      >
+        <button class="bk-history-item-button" @click="setHistoryIndex(-1)">
+          <div>
+            <strong>{{
+              $t('historyCurrentRevision', 'Current revision')
+            }}</strong>
+          </div>
+          <!-- @TODO: Pass in the timestamp of the entity's latest revision. -->
+          <!-- <RelativeTime -->
+          <!--   v-if="item.timestamp" -->
+          <!--   :timestamp="item.timestamp" -->
+          <!--   v-slot="{ formatted }" -->
+          <!-- > -->
+          <!--   <div>{{ formatted }}</div> -->
+          <!-- </RelativeTime> -->
+        </button>
+      </li>
+    </ul>
+    <div v-else class="bk-history-empty-message">
+      {{ $t('historyEmpty', 'There are now changes yet.') }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, useBlokkli, watch } from '#imports'
+import { RelativeTime, Icon } from '#blokkli/components'
+import type { MutationItem } from '#blokkli/types'
+
+defineProps<{
+  scrolledToEnd: boolean
+}>()
+
+const { state, $t, adapter } = useBlokkli()
+
+const { mutations, currentMutationIndex, canEdit, mutateWithLoadingState } =
+  state
+
+const canSetStatus = !!adapter.setMutationItemStatus
+
+const showAmount = ref(50)
+const totalMutations = computed(() => mutations.value.length)
+
+watch(totalMutations, (newTotal, previousTotal) => {
+  if (newTotal !== previousTotal) {
+    showAmount.value = 50
+  }
+})
+
+type HistoryItem = {
+  index: number
+  mutation: MutationItem
+  timestamp: number
+  enabled: boolean
+}
+
+const mapped = computed<HistoryItem[]>(() =>
+  mutations.value
+    .map((mutation, index) => {
+      return {
+        index,
+        mutation,
+        timestamp: mutation.timestamp ? Number.parseInt(mutation.timestamp) : 0,
+        enabled: mutation.enabled !== false,
+      }
+    })
+    .sort((a, b) => {
+      return b.timestamp - a.timestamp
+    })
+    .filter((v, _i, arr) => {
+      return v.index >= arr.length - showAmount.value
+    }),
+)
+
+async function setHistoryIndex(index: number) {
+  if (!adapter.setHistoryIndex) {
+    return
+  }
+  if (index !== currentMutationIndex.value) {
+    await mutateWithLoadingState(() => adapter.setHistoryIndex!(index))
+  }
+}
+
+async function setMutationItemStatus(index: number, status: boolean) {
+  if (!adapter.setMutationItemStatus) {
+    return
+  }
+  await mutateWithLoadingState(() =>
+    adapter.setMutationItemStatus!(index, status),
+  )
+}
+</script>

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

@@ -12,84 +12,7 @@
     icon="history"
     weight="-100"
   >
-    <div class="bk bk-history bk-control">
-      <ul v-if="mapped.length">
-        <li
-          v-for="item in mapped"
-          :key="item.index"
-          :class="{
-            'bk-is-not-active': item.index > currentMutationIndex,
-            'bk-is-active': item.index === currentMutationIndex,
-            'bk-is-disabled': !item.enabled,
-            'bk-is-applied': item.index < currentMutationIndex && item.enabled,
-          }"
-        >
-          <button
-            :disabled="!canEdit"
-            class="bk-history-item-button"
-            @click="setHistoryIndex(item.index)"
-          >
-            <div>
-              <div>
-                <strong>{{ item.mutation.plugin?.label }}</strong>
-              </div>
-              <RelativeTime
-                v-if="item.timestamp"
-                v-slot="{ formatted }"
-                :timestamp="item.timestamp"
-              >
-                <em>{{ formatted }}</em>
-              </RelativeTime>
-            </div>
-          </button>
-          <div v-if="canSetStatus" class="bk-history-item-actions">
-            <button
-              @click.prevent="setMutationItemStatus(item.index, !item.enabled)"
-            >
-              <Icon name="close" />
-            </button>
-          </div>
-        </li>
-        <li v-if="totalMutations > showAmount" class="bk-history-load-more">
-          <button class="bk-history-item-button" @click="showAmount += 100">
-            <strong
-              >{{
-                $t('historyShowMore', 'Show @count more').replace(
-                  '@count',
-                  Math.min(totalMutations - showAmount, 100).toString(),
-                )
-              }}
-            </strong>
-          </button>
-        </li>
-        <li
-          class="bk-is-last"
-          :class="[
-            currentMutationIndex === -1 ? 'bk-is-active' : 'bk-is-applied',
-            { 'bk-has-shadow': !scrolledToEnd },
-          ]"
-        >
-          <button class="bk-history-item-button" @click="setHistoryIndex(-1)">
-            <div>
-              <strong>{{
-                $t('historyCurrentRevision', 'Current revision')
-              }}</strong>
-            </div>
-            <!-- @TODO: Pass in the timestamp of the entity's latest revision. -->
-            <!-- <RelativeTime -->
-            <!--   v-if="item.timestamp" -->
-            <!--   :timestamp="item.timestamp" -->
-            <!--   v-slot="{ formatted }" -->
-            <!-- > -->
-            <!--   <div>{{ formatted }}</div> -->
-            <!-- </RelativeTime> -->
-          </button>
-        </li>
-      </ul>
-      <div v-else class="bk-history-empty-message">
-        {{ $t('historyEmpty', 'There are now changes yet.') }}
-      </div>
-    </div>
+    <HistoryList :scrolled-to-end="scrolledToEnd" />
   </PluginSidebar>
 
   <PluginToolbarButton
@@ -120,7 +43,6 @@
 
 <script lang="ts" setup>
 import {
-  ref,
   computed,
   useBlokkli,
   watch,
@@ -129,8 +51,7 @@ import {
   onBeforeUnmount,
 } from '#imports'
 import { PluginSidebar, PluginToolbarButton } from '#blokkli/plugins'
-import { RelativeTime, Icon } from '#blokkli/components'
-import type { MutationItem } from '#blokkli/types'
+import HistoryList from './List/index.vue'
 
 const { adapter, settings } = defineBlokkliFeature({
   id: 'history',
@@ -152,72 +73,24 @@ const { adapter, settings } = defineBlokkliFeature({
 
 const { state, $t, ui } = useBlokkli()
 
-const canSetStatus = !!adapter.setMutationItemStatus
+const { mutations, currentMutationIndex, mutateWithLoadingState } = state
 
-const { mutations, currentMutationIndex, canEdit, mutateWithLoadingState } =
-  state
-
-const showAmount = ref(50)
 const useMouseForHistory = computed(() => settings.value.useMouseButtons)
 const canUndo = computed(() => currentMutationIndex.value >= 0)
 const canRedo = computed(
   () => currentMutationIndex.value < mutations.value.length - 1,
 )
-const totalMutations = computed(() => mutations.value.length)
-
-watch(totalMutations, (newTotal, previousTotal) => {
-  if (newTotal !== previousTotal) {
-    showAmount.value = 50
-  }
-})
-
-type HistoryItem = {
-  index: number
-  mutation: MutationItem
-  timestamp: number
-  enabled: boolean
-}
-
-const mapped = computed<HistoryItem[]>(() =>
-  mutations.value
-    .map((mutation, index) => {
-      return {
-        index,
-        mutation,
-        timestamp: mutation.timestamp ? Number.parseInt(mutation.timestamp) : 0,
-        enabled: mutation.enabled !== false,
-      }
-    })
-    .sort((a, b) => {
-      return b.timestamp - a.timestamp
-    })
-    .filter((v, _i, arr) => {
-      return v.index >= arr.length - showAmount.value
-    }),
-)
 
-async function setHistoryIndex(index: number) {
-  if (index !== currentMutationIndex.value) {
-    await mutateWithLoadingState(() => adapter.setHistoryIndex(index))
-  }
-}
-
-const undo = () =>
+function undo() {
   mutateWithLoadingState(() =>
     adapter.setHistoryIndex(currentMutationIndex.value - 1),
   )
-const redo = () =>
+}
+
+function redo() {
   mutateWithLoadingState(() =>
     adapter.setHistoryIndex(currentMutationIndex.value + 1),
   )
-
-async function setMutationItemStatus(index: number, status: boolean) {
-  if (!adapter.setMutationItemStatus) {
-    return
-  }
-  await mutateWithLoadingState(() =>
-    adapter.setMutationItemStatus!(index, status),
-  )
 }
 
 const onMouseUp = (e: MouseEvent) => {

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

@@ -50,7 +50,7 @@
   </Teleport>
 
   <Teleport to="body">
-    <transition name="bk-slide-up" :duration="200">
+    <transition appear name="bk-slide-in" :duration="200">
       <LibraryDialog
         v-if="placedAction && adapter.getLibraryItems"
         :field="placedAction.field"

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

@@ -15,6 +15,7 @@
       v-if="isLoaded"
       id="bk-structure"
       class="bk bk-structure bk-control"
+      dragging
     >
       <List
         :entity-bundle="context.entityBundle"

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

@@ -5,12 +5,28 @@
 </template>
 
 <script setup lang="ts">
+/**
+ * Provides a boundary for wheel events to make the slot scrollable.
+ *
+ * During a drag operation the wheel event is propagated so that the artboard
+ * always becomes scrollable.
+ */
 import { useBlokkli } from '#imports'
 
 const { selection } = useBlokkli()
 
+const props = defineProps<{
+  /**
+   * Allow scrolling during dragging.
+   */
+  dragging?: boolean
+}>()
+
 function onWheel(e: WheelEvent) {
-  if (selection.isDragging.value) {
+  // Unless allowed via prop, during dragging the only thing that should be
+  // scrollable is the artboard.
+  if (selection.isDragging.value && !props.dragging) {
+    e.preventDefault()
     return
   }
 
@@ -18,7 +34,6 @@ function onWheel(e: WheelEvent) {
     return
   }
 
-  // e.preventDefault()
   e.stopImmediatePropagation()
 }
 </script>

package/dist/runtime/composables/defineBlokkli.js

@@ -26,12 +26,18 @@ export function defineBlokkli(config) {
     computed(() => "default")
   );
   const siblings = inject(
-    INJECT_FIELD_LIST_BLOCKS
+    INJECT_FIELD_LIST_BLOCKS,
+    computed(function() {
+      return [];
+    })
   );
   const rootBlocks = inject(
-    INJECT_PROVIDER_BLOCKS
+    INJECT_PROVIDER_BLOCKS,
+    computed(function() {
+      return [];
+    })
   );
-  const item = inject(INJECT_BLOCK_ITEM);
+  const item = inject(INJECT_BLOCK_ITEM, null);
   const uuid = item?.value.uuid || "";
   const index = item?.value.index !== void 0 ? item.value.index : computed(() => 0);
   const fromLibraryOptions = inject(
@@ -103,6 +109,7 @@ export function defineBlokkli(config) {
   return {
     uuid,
     index,
+    // Must be cast because type of options is inferred automatically.
     options,
     isEditing,
     parentType,

package/dist/runtime/composables/defineBlokkliFragment.js

@@ -12,7 +12,10 @@ import {
 } from "#imports";
 import { globalOptionsDefaults } from "#blokkli/default-global-options";
 export function defineBlokkliFragment(config) {
-  const ctx = inject(INJECT_FRAGMENT_CONTEXT);
+  const ctx = inject(
+    INJECT_FRAGMENT_CONTEXT,
+    null
+  );
   const editContext = inject(INJECT_EDIT_CONTEXT, null);
   const optionKeys = [
     ...Object.keys(config.options || {}),
@@ -34,7 +37,7 @@ export function defineBlokkliFragment(config) {
     return result;
   });
   onMounted(() => {
-    if (editContext && editContext.dom) {
+    if (editContext && editContext.dom && ctx) {
       const instance = getCurrentInstance();
       editContext.dom.registerBlock(
         ctx.uuid,
@@ -46,7 +49,7 @@ export function defineBlokkliFragment(config) {
     }
   });
   onBeforeUnmount(() => {
-    if (editContext && ctx.uuid && editContext.dom) {
+    if (editContext && ctx && ctx.uuid && editContext.dom) {
       editContext.dom.unregisterBlock(ctx.uuid);
     }
   });