@blokkli/editor 1.1.0 → 1.1.2

package/dist/module.json

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

package/dist/module.mjs

@@ -7,16 +7,20 @@ import MagicString from 'magic-string';
 import { walk } from 'estree-walker-ts';
 import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helpers/symbols.js';
 
-const version = "1.1.0";
+const version = "1.1.2";
 
 function sortObjectKeys(obj) {
-  const sortedKeys = Object.keys(obj).sort();
-  const sortedObj = {};
-  sortedKeys.forEach((key) => {
-    const value = obj[key];
-    sortedObj[key] = typeof value === "object" && value !== null ? sortObjectKeys(value) : value;
-  });
-  return sortedObj;
+  if (Array.isArray(obj)) {
+    return obj.map(sortObjectKeys);
+  } else if (obj && typeof obj === "object") {
+    const sortedObj = {};
+    const keys = Object.keys(obj).sort();
+    for (const key of keys) {
+      sortedObj[key] = sortObjectKeys(obj[key]);
+    }
+    return sortedObj;
+  }
+  return obj;
 }
 
 function falsy(value) {

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

@@ -19,16 +19,10 @@ import {
   INJECT_IS_IN_REUSABLE,
   INJECT_REUSABLE_OPTIONS,
 } from '#blokkli/helpers/symbols'
-import type { FieldListItem } from '#blokkli/types'
-
-interface LibraryItem {
-  block?: FieldListItem
-  label?: string
-  uuid?: string
-}
+import type { LibraryItemProps } from '#blokkli/types'
 
 const props = defineProps<{
-  libraryItem?: LibraryItem
+  libraryItem?: LibraryItemProps
 }>()
 
 const { index, options, parentType } = defineBlokkli({

package/dist/runtime/components/BlokkliItem.vue

@@ -72,6 +72,7 @@ const isGlobalProxyMode = inject<ComputedRef<boolean> | null>(
 
 const fieldListType = inject<ComputedRef<ValidFieldListTypes> | undefined>(
   INJECT_FIELD_LIST_TYPE,
+  undefined,
 )
 
 const component =

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

@@ -198,6 +198,11 @@ onBlokkliEvent('canvas:draw', () => {
   const rects = selection.uuids.value
     .map((uuid) => dom.getBlockRect(uuid))
     .filter(falsy)
+
+  if (!rects.length) {
+    return
+  }
+
   const offset = ui.artboardOffset.value
   const scale = ui.artboardScale.value
 

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

@@ -60,8 +60,8 @@ const scissor = computed(() => {
       canvasAttributes.value.height -
       ui.visibleViewport.value.y * dpi -
       ui.visibleViewport.value.height * dpi,
-    width: ui.visibleViewport.value.width * dpi,
-    height: ui.visibleViewport.value.height * dpi,
+    width: Math.max(ui.visibleViewport.value.width * dpi, 1),
+    height: Math.max(ui.visibleViewport.value.height * dpi, 1),
   }
 })
 

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

@@ -1,11 +1,11 @@
 <template>
-  <div ref="root" class="bk-block-proxy">
+  <div ref="root" class="bk-block-proxy" v-bind="rootProps">
     <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" />
+      <Component :is="proxyComponent" v-bind="proxyComponentProps" />
     </div>
     <div v-if="fieldLayout.length" class="bk-block-proxy-fields">
       <div
@@ -41,8 +41,8 @@ import {
 } from '#blokkli/definitions'
 
 import { ItemIcon } from '#blokkli/components'
-import type { FieldConfig } from '#blokkli/types'
-import { falsy } from '#blokkli/helpers'
+import type { FieldConfig, LibraryItemProps } from '#blokkli/types'
+import { buildAttributesForLibraryItem, falsy } from '#blokkli/helpers'
 
 const props = defineProps<{
   uuid: string
@@ -52,16 +52,47 @@ const props = defineProps<{
   itemProps?: any
 }>()
 
+// Props of the library item, if this is a 'from_library' block.
+const libraryItemProps = computed<LibraryItemProps | null>(() => {
+  if (props.bundle === 'from_library') {
+    const v = props.itemProps?.libraryItem
+    return v as LibraryItemProps
+  }
+
+  return null
+})
+
+const proxyComponentProps = computed(() => {
+  if (props.bundle === 'from_library') {
+    // Pass the props of the reusable block to the proxy component.
+    return libraryItemProps.value?.block?.props
+  }
+
+  return props.itemProps
+})
+
+const rootProps = computed(() => {
+  if (libraryItemProps.value) {
+    return buildAttributesForLibraryItem(libraryItemProps.value)
+  }
+
+  return {}
+})
+
+const proxyBundle = computed(
+  () => libraryItemProps.value?.block?.bundle || props.bundle,
+)
+
 const { dom, types, runtimeConfig } = useBlokkli()
 
 const root = ref<HTMLElement | null>(null)
 
-const type = computed(() => types.getBlockBundleDefinition(props.bundle))
+const type = computed(() => types.getBlockBundleDefinition(proxyBundle.value))
 
-const proxyComponent = getBlokkliItemProxyComponent(props.bundle)
+const proxyComponent = getBlokkliItemProxyComponent(proxyBundle.value)
 
 const definition = getDefinition(
-  props.bundle,
+  proxyBundle.value,
   props.fieldListType,
   props.parentType,
 )
@@ -73,7 +104,7 @@ const fieldLayout = computed<FieldConfig[][]>(() => {
         .map((fieldName) => {
           return types.fieldConfig.forName(
             runtimeConfig.itemEntityType,
-            props.bundle,
+            proxyBundle.value,
             fieldName,
           )
         })
@@ -82,7 +113,7 @@ const fieldLayout = computed<FieldConfig[][]>(() => {
   }
 
   return types.fieldConfig
-    .forEntityTypeAndBundle(runtimeConfig.itemEntityType, props.bundle)
+    .forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value)
     .map((config) => [config])
 })
 

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

@@ -183,6 +183,8 @@ function onPointerDown(e: PointerEvent) {
     e.stopPropagation()
     e.stopImmediatePropagation()
   }
+  // Set the state of the pressed shortcuts.
+  keyboard.setShortcutStateFromEvent(e)
 
   rootEl.removeEventListener('pointermove', onPointerMove)
   rootEl.addEventListener('pointermove', onPointerMove)
@@ -198,16 +200,23 @@ function onPointerDown(e: PointerEvent) {
     return
   }
 
-  pointerDownTimestamp = Date.now()
   const coords = { x: e.clientX, y: e.clientY }
-  mouseStartCoordinates = coords
-
-  const interacted = getInteractedElement(e)
-  pointerDownElement = interacted
-  if (interacted) {
-    return
+  // Only handle click interactions when:
+  // - not pressing the shift key
+  // - using the left mouse button
+  if (!e.shiftKey && e.buttons !== 2) {
+    pointerDownTimestamp = Date.now()
+    mouseStartCoordinates = coords
+
+    const interacted = getInteractedElement(e)
+    pointerDownElement = interacted
+    if (interacted) {
+      return
+    }
   }
 
+  // Either pressing shift or right mouse button.
+  // Features may handle this via event (e.g. start multi select).
   eventBus.emit('mouse:down', { ...coords, type: 'mouse', distance: 0 })
 }
 

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

@@ -200,18 +200,18 @@ function isMuted(item?: FieldListItem) {
 
 watch(root, function (newRoot) {
   if (newRoot) {
-    dom.updateFieldElement(props.entity.uuid, props.name, newRoot)
+    dom.updateFieldElement(props.entity, props.name, newRoot)
   }
 })
 
 onMounted(() => {
   if (root.value) {
-    dom.registerField(props.entity.uuid, props.name, root.value)
+    dom.registerField(props.entity, props.name, root.value)
   }
 })
 
 onBeforeUnmount(() => {
-  dom.unregisterField(props.entity.uuid, props.name)
+  dom.unregisterField(props.entity, props.name)
 })
 
 defineOptions({

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

@@ -60,8 +60,10 @@ function updateCanvas() {
 
   const scale = rect.width / ui.artboardSize.value.width
 
+  const LINE_WIDTH = 2.5
+
   ctx.fillStyle = overviewFillColor.value
-  ctx.lineWidth = 1
+  ctx.lineWidth = LINE_WIDTH
   ctx.strokeStyle = selectedColor.value
 
   for (let i = 0; i < rects.length; i++) {
@@ -74,10 +76,10 @@ function updateCanvas() {
     )
     if (selection.isBlockSelected(uuid)) {
       ctx.strokeRect(
-        Math.round(blockRect.x * scale) + 0.5,
-        Math.round(blockRect.y * scale) + 0.5,
-        Math.round(blockRect.width * scale),
-        Math.round(blockRect.height * scale),
+        Math.round(blockRect.x * scale) + LINE_WIDTH / 2,
+        Math.round(blockRect.y * scale) + LINE_WIDTH / 2,
+        Math.round(blockRect.width * scale) - LINE_WIDTH,
+        Math.round(blockRect.height * scale) - LINE_WIDTH,
       )
     }
   }

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

@@ -106,7 +106,7 @@ const { settings } = defineBlokkliFeature({
   screenshot: 'feature-artboard.jpg',
 })
 
-const { context, storage, ui, animation, $t, dom } = useBlokkli()
+const { context, storage, ui, animation, $t, dom, selection } = useBlokkli()
 
 const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + '%')
 
@@ -169,6 +169,12 @@ watch(wheelOptions, function (newOptions) {
   }
 })
 
+watch(selection.uuids, function () {
+  if (artboard.getMomentum()) {
+    artboard.cancelAnimation()
+  }
+})
+
 function getArtboard(): Artboard {
   pluginWheel = wheel(wheelOptions.value)
   return createArtboard(

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

@@ -69,7 +69,7 @@ import { getDefaultDefinition } from '#blokkli/definitions'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 import { PluginTourItem } from '#blokkli/plugins'
-import { getFieldKey } from '#blokkli/helpers'
+import { getFieldKey, onlyUnique } from '#blokkli/helpers'
 
 const { settings } = defineBlokkliFeature({
   id: 'block-add-list',
@@ -157,6 +157,31 @@ const getAllowedTypesForSelected = (p: DraggableExistingBlock): string[] => {
   }
 }
 
+// All allowed bundles for which a field is being rendered currently.
+// Some blocks may have nested blocks, however they may not render them via
+// a <BlokkliField>. This would make it so that these nested block bundles
+// show up in the add list, but there is no place where these could be added.
+const bundlesForRenderedFields = computed(() =>
+  dom.registeredFieldTypes.value
+    .flatMap((field) => {
+      return (
+        types.getFieldConfig(
+          field.entityType,
+          field.entityBundle,
+          field.fieldName,
+        )?.allowedBundles || []
+      )
+    })
+    .filter(onlyUnique),
+)
+
+const generallyAvailableBundles = computed(() =>
+  types.generallyAvailableBundles.filter((v) =>
+    // Exclude bundles for which no field is currently being rendered.
+    bundlesForRenderedFields.value.includes(v.id),
+  ),
+)
+
 const selectableBundles = computed(() => {
   if (selection.blocks.value.length) {
     return selection.blocks.value.flatMap((v) => getAllowedTypesForSelected(v))
@@ -174,10 +199,10 @@ const selectableBundles = computed(() => {
     )
   }
 
-  return types.generallyAvailableBundles.map((v) => v.id || '')
+  return generallyAvailableBundles.value.map((v) => v.id || '')
 })
 
-const determineVisibility = (bundle: string, label: string): boolean => {
+function determineVisibility(bundle: string, label: string): boolean {
   if (ui.isMobile.value && !selectableBundles.value.includes(bundle)) {
     return false
   }
@@ -200,7 +225,7 @@ const determineVisibility = (bundle: string, label: string): boolean => {
 }
 
 const sortedList = computed(() => {
-  return [...types.generallyAvailableBundles]
+  return [...generallyAvailableBundles.value]
     .filter((v) => !reservedBundles.includes(v.id))
     .map((v) => {
       const isVisible = determineVisibility(v.id, v.label)

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

@@ -76,7 +76,7 @@ import {
 import { PluginSidebar } from '#blokkli/plugins'
 import ClipboardList from './List/index.vue'
 import type { ClipboardItem } from '#blokkli/types'
-import { falsy, generateUUID } from '#blokkli/helpers'
+import { falsy, generateUUID, getFieldKey } from '#blokkli/helpers'
 import { Icon } from '#blokkli/components'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 import defineShortcut from '#blokkli/helpers/composables/defineShortcut'
@@ -100,7 +100,7 @@ const { settings, logger } = defineBlokkliFeature({
   screenshot: 'feature-clipboard.jpg',
 })
 
-const { selection, $t, adapter, dom, state, ui } = useBlokkli()
+const { selection, $t, adapter, dom, state, ui, types } = useBlokkli()
 
 const plugin = ref<InstanceType<typeof PluginSidebar> | null>(null)
 
@@ -271,21 +271,39 @@ const handleSelectionPaste = (pastedUuids: string[]) => {
   }
 
   // @TODO: Paste into nested field if possible.
-  const field = dom.getBlockField(selection.uuids.value[0])
+  const block = selection.blocks.value[0]
+  if (!block) {
+    return
+  }
+  const field = state.getMutatedField(block.hostUuid, block.hostFieldName)
+  if (!field) {
+    return
+  }
+  const fieldConfig = types.getFieldConfig(
+    field.entityType,
+    block.hostBundle,
+    field.name,
+  )
+
+  if (!fieldConfig) {
+    return
+  }
+
+  const fieldKey = getFieldKey(field.entityUuid, field.name)
 
   const pastedBlocks = pastedUuids
     .map((uuid) => dom.findBlock(uuid))
     .filter(falsy)
-    .filter((block) => field.allowedBundles.includes(block.itemBundle))
+    .filter((block) => fieldConfig.allowedBundles.includes(block.itemBundle))
 
   if (!pastedBlocks.length) {
     return
   }
 
-  const count = state.getFieldBlockCount(field.key)
+  const count = state.getFieldBlockCount(fieldKey)
   if (
-    field.cardinality !== -1 &&
-    count + pastedBlocks.length > field.cardinality
+    fieldConfig.cardinality !== -1 &&
+    count + pastedBlocks.length > fieldConfig.cardinality
   ) {
     return
   }
@@ -294,8 +312,8 @@ const handleSelectionPaste = (pastedUuids: string[]) => {
     adapter.pasteExistingBlocks!({
       uuids: pastedBlocks.map((v) => v.uuid),
       host: {
-        type: field.hostEntityType,
-        uuid: field.hostEntityUuid,
+        type: field.entityType,
+        uuid: field.entityUuid,
         fieldName: field.name,
       },
       preceedingUuid: selection.uuids.value[0],

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

@@ -1,7 +1,7 @@
 <template>
   <ScrollBoundary
     class="bk-command-palette bk-control"
-    @keydown.stop="onKeyDown"
+    @keydown="onKeyDown"
     @keyup.stop
     @click.stop
   >
@@ -238,6 +238,12 @@ const onSelect = (id: string) => {
 }
 
 const onKeyDown = (e: KeyboardEvent) => {
+  e.stopPropagation()
+  if (e.code === 'KeyK' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault()
+    emit('close')
+    return
+  }
   if (e.code === 'Tab') {
     e.preventDefault()
     if (e.shiftKey) {

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

@@ -19,7 +19,7 @@
       )
     "
     icon="command"
-    @click="isVisible = true"
+    @click="isVisible = !isVisible"
   />
 </template>
 

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

@@ -17,7 +17,7 @@ import { useBlokkli, defineBlokkliFeature } from '#imports'
 import type { DraggableExistingBlock } from '#blokkli/types'
 import { PluginItemAction } from '#blokkli/plugins'
 
-const { state, $t, eventBus } = useBlokkli()
+const { state, $t, eventBus, dom, runtimeConfig } = useBlokkli()
 
 const { adapter } = defineBlokkliFeature({
   id: 'delete',
@@ -27,12 +27,56 @@ const { adapter } = defineBlokkliFeature({
   description: 'Provides an action to delete one or more blocks.',
 })
 
+/**
+ * Try to find a block to select after deleting a single block.
+ */
+function getSelectionAfterDelete(
+  items: DraggableExistingBlock[],
+): string | undefined {
+  if (items.length !== 1) {
+    return
+  }
+
+  const uuid = items[0].uuid
+  const field = state.getFieldListForBlock(uuid)
+  if (!field) {
+    return
+  }
+
+  const index = field.list.findIndex((v) => v.uuid === uuid)
+  if (index === -1) {
+    return
+  }
+
+  // Find a matching block to select in the same field list.
+  const inList = field.list[index + 1]?.uuid || field.list[index - 1]?.uuid
+  if (inList) {
+    return inList
+  }
+
+  // Field does not belong to a block.
+  if (field.entityType !== runtimeConfig.itemEntityType) {
+    return
+  }
+
+  // Select the block which contains the field.
+  return field.entityUuid
+}
+
 async function onClick(items: DraggableExistingBlock[]) {
-  eventBus.emit('select', [])
+  const selectedUuidsAfter = getSelectionAfterDelete(items)
+
   await state.mutateWithLoadingState(
     () => adapter.deleteBlocks(items.map((v) => v.uuid)),
     $t('deleteError', 'The block could not be deleted.'),
   )
+
+  if (selectedUuidsAfter) {
+    eventBus.emit('select', selectedUuidsAfter)
+    dom.refreshBlockRect(selectedUuidsAfter)
+  } else {
+    eventBus.emit('select:unselect')
+  }
 }
 </script>
 

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

@@ -178,9 +178,9 @@ onBlokkliEvent('mouse:up', (e) => {
 
 const emitDrop = async () => {
   const timeDelta = Date.now() - dragStart
-  // Prevent accidental drops. At least 400ms should have passed between the
+  // Prevent accidental drops. At least 200ms should have passed between the
   // time the drag was initiated and when the drop was made.
-  if (active.value && timeDelta > 400) {
+  if (active.value && timeDelta > 200) {
     if (active.value.type === 'field') {
       const [hostUuid, fieldName, preceedingUuid] = active.value.id.split(':')
 

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

@@ -169,6 +169,11 @@ const onDropExisting = async (
       host,
     }),
   )
+  if (uuids.length >= 1 && uuids.length <= 10) {
+    for (let i = 0; i < uuids.length; i++) {
+      dom.refreshBlockRect(uuids[i])
+    }
+  }
 
   if (ui.isMobile.value) {
     eventBus.emit('scrollIntoView', {
@@ -365,8 +370,15 @@ onBlokkliEvent('dragging:start', (e) => {
   if (!item) {
     return
   }
+
+  mouseX.value = e.coords.x
+  mouseY.value = e.coords.y
+
+  // Before showing the drop targets we update all currently visible rects to
+  // ensure the user sees the correct drop targets right away.
+  dom.updateVisibleRects()
+  dragItems.value = e.items
   if ('element' in item) {
-    eventBus.on('animationFrame', loop)
     if (!isTouching.value) {
       document.removeEventListener('pointerup', onMouseUp)
       document.addEventListener('pointerup', onMouseUp)
@@ -375,12 +387,8 @@ onBlokkliEvent('dragging:start', (e) => {
       })
       document.addEventListener('pointermove', onMouseMove, { capture: true })
     }
+    eventBus.on('animationFrame', loop)
   }
-
-  // Before showing the drop targets we update all currently visible rects to
-  // ensure the user sees the correct drop targets right away.
-  dom.updateVisibleRects()
-  dragItems.value = e.items
 })
 
 onBlokkliEvent('dragging:end', () => {

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

@@ -14,14 +14,11 @@
 
 <script lang="ts" setup>
 import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
-
-import type {
-  BlokkliFieldElement,
-  DraggableExistingBlock,
-} from '#blokkli/types'
+import type { DraggableExistingBlock } from '#blokkli/types'
 import { PluginItemAction } from '#blokkli/plugins'
+import { getFieldKey } from '#blokkli/helpers'
 
-const { state, $t, selection, dom } = useBlokkli()
+const { state, $t, selection, types } = useBlokkli()
 
 const { adapter } = defineBlokkliFeature({
   id: 'duplicate',
@@ -44,31 +41,52 @@ const canDuplicate = computed<boolean>(() => {
   }
 
   const blocksByField: Record<string, DraggableExistingBlock[]> = {}
-  const fieldsByKey: Record<string, BlokkliFieldElement> = {}
+  const fieldsByKey: Record<
+    string,
+    { cardinality: number; allowedBundles: string[]; count: number }
+  > = {}
 
   const selectedCount = selection.blocks.value.length
   for (let i = 0; i < selectedCount; i++) {
     const block = selection.blocks.value[i]
-    const field = dom.getBlockField(block.uuid)
-    const count = state.getFieldBlockCount(field.key)
+    const field = state.getMutatedField(block.hostUuid, block.hostFieldName)
+    if (!field) {
+      continue
+    }
+
+    const fieldKey = getFieldKey(field.entityUuid, field.name)
+
+    const fieldConfig = types.getFieldConfig(
+      field.entityType,
+      block.hostBundle,
+      field.name,
+    )
+    if (!fieldConfig) {
+      continue
+    }
+    const count = field.list.length
 
     // Early return if the field is already full.
-    if (field.cardinality !== -1 && count >= field.cardinality) {
+    if (fieldConfig.cardinality !== -1 && count >= fieldConfig.cardinality) {
       return false
     }
 
-    if (!blocksByField[field.key]) {
-      blocksByField[field.key] = []
+    if (!blocksByField[fieldKey]) {
+      blocksByField[fieldKey] = []
+    }
+    blocksByField[fieldKey].push(block)
+    fieldsByKey[fieldKey] = {
+      cardinality: fieldConfig.cardinality,
+      allowedBundles: fieldConfig.allowedBundles,
+      count,
     }
-    blocksByField[field.key].push(block)
-    fieldsByKey[field.key] = field
   }
 
   const entries = Object.entries(blocksByField)
   for (let i = 0; i < entries.length; i++) {
     const [fieldKey, blocks] = entries[i]
     const field = fieldsByKey[fieldKey]
-    const count = state.getFieldBlockCount(field.key)
+    const count = state.getFieldBlockCount(fieldKey)
     // Check cardinality of the field.
     if (field.cardinality !== -1 && count + blocks.length > field.cardinality) {
       return false