@blokkli/editor 2.0.0-alpha.17 → 2.0.0-alpha.18

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

@@ -67,7 +67,7 @@
     id="clipboard"
     :title="$t('clipboard', 'Clipboard')"
     :enabled="
-  !!selection.blocks.value.length && state.editMode.value === 'editing'
+  !!selection.items.value.length && state.editMode.value === 'editing'
 "
     :items="itemDropdownItems"
     icon="clipboard"
@@ -92,6 +92,7 @@ import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
 import getVideoId from "get-video-id";
 import { emitMessage } from "#blokkli/helpers/eventBus";
+import { itemEntityType } from "#blokkli-build/config";
 const { settings, logger } = defineBlokkliFeature({
   id: "clipboard",
   label: "Clipboard",
@@ -108,7 +109,7 @@ const { settings, logger } = defineBlokkliFeature({
   },
   screenshot: "feature-clipboard.jpg"
 });
-const { selection, $t, adapter, dom, state, ui, types, keyboard } = useBlokkli();
+const { selection, $t, adapter, state, ui, types, keyboard, blocks } = useBlokkli();
 const plugin = ref(null);
 const selectionClipboard = ref([]);
 const itemDropdownItems = computed(() => {
@@ -290,7 +291,7 @@ const handleSelectionPaste = (pastedUuids) => {
   if (!pastedUuids.length) {
     return;
   }
-  const block = selection.blocks.value[0];
+  const block = selection.items.value[0];
   if (!block) {
     return;
   }
@@ -299,11 +300,11 @@ const handleSelectionPaste = (pastedUuids) => {
   let targetFieldKey = null;
   let preceedingUuid = void 0;
   if (!keyboard.isPressingShift.value) {
-    const pastedBundles = pastedUuids.map((uuid) => dom.findBlock(uuid)?.itemBundle).filter((bundle) => !!bundle);
+    const pastedBundles = pastedUuids.map((uuid) => blocks.getBlock(uuid)?.bundle).filter((bundle) => !!bundle);
     if (pastedBundles.length) {
       const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
-        block.entityType,
-        block.itemBundle
+        itemEntityType,
+        block.bundle
       );
       for (const fieldConfig of nestedFields) {
         const allowedPastedBundles = pastedBundles.filter(
@@ -314,7 +315,7 @@ const handleSelectionPaste = (pastedUuids) => {
           const currentCount = state.getFieldBlockCount(nestedFieldKey);
           if (fieldConfig.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldConfig.cardinality) {
             targetField = {
-              entityType: block.entityType,
+              entityType: itemEntityType,
               entityUuid: block.uuid,
               name: fieldConfig.name
             };
@@ -328,13 +329,13 @@ const handleSelectionPaste = (pastedUuids) => {
     }
   }
   if (!targetField || !targetFieldConfig || !targetFieldKey) {
-    const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
+    const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
     if (!field) {
       return;
     }
     const fieldConfig = types.getFieldConfig(
       field.entityType,
-      block.hostBundle,
+      block.host.bundle,
       field.name
     );
     if (!fieldConfig) {
@@ -356,15 +357,13 @@ const handleSelectionPaste = (pastedUuids) => {
     if (!uuid) {
       continue;
     }
-    const block2 = dom.findBlock(uuid);
+    const block2 = blocks.getBlock(uuid);
     if (!block2) {
       continue;
     }
-    const isAllowed = targetFieldConfig.allowedBundles.includes(
-      block2.itemBundle
-    );
+    const isAllowed = targetFieldConfig.allowedBundles.includes(block2.bundle);
     if (!isAllowed) {
-      notAllowedBundles.push(block2.itemBundle);
+      notAllowedBundles.push(block2.bundle);
       continue;
     }
     pastedBlocks.push(block2);
@@ -500,7 +499,7 @@ function setClipboard(text) {
   }
 }
 function copyCurrentSelectionToClipboard() {
-  if (!selection.blocks.value.length) {
+  if (!selection.items.value.length) {
     selectionClipboard.value = [];
     return;
   }
@@ -510,7 +509,7 @@ function copyCurrentSelectionToClipboard() {
   selectionClipboard.value = selection.uuids.value;
 }
 onBlokkliEvent("keyPressed", (e) => {
-  if (e.code !== "c" || !e.meta) {
+  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value) {
     return;
   }
   copyCurrentSelectionToClipboard();

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

@@ -0,0 +1,51 @@
+<template>
+  <button
+    ref="buttonEl"
+    :data-command-id="item.id"
+    :data-command-visible="true"
+    class="bk-command"
+    :class="{ 'bk-is-focused': isFocused }"
+    @mouseenter="$emit('focus', index)"
+    @click.prevent="$emit('select', item.id)"
+  >
+    <div class="bk-command-icon">
+      <Icon v-if="item.icon" :name="item.icon" />
+      <ItemIcon v-else :bundle="item.bundle" />
+    </div>
+    <Highlight :text="item.label" tag="span" :positions="item.positions" />
+    <div class="bk-command-group">{{ getGroupLabel(item.group) }}</div>
+  </button>
+</template>
+
+<script setup>
+import { watch, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, ItemIcon, Highlight } from "#blokkli/components";
+const props = defineProps({
+  item: { type: Object, required: true },
+  index: { type: Number, required: true },
+  isFocused: { type: Boolean, required: true }
+});
+defineEmits(["focus", "select"]);
+const { $t } = useBlokkli();
+const buttonEl = useTemplateRef("buttonEl");
+watch(
+  () => props.isFocused,
+  (focused) => {
+    if (focused && buttonEl.value) {
+      buttonEl.value.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }
+);
+const getGroupLabel = (id) => {
+  if (id === "ui") {
+    return $t("commandGroup.ui", "Interface");
+  } else if (id === "add") {
+    return $t("commandGroup.add", "Add new");
+  } else if (id === "action") {
+    return $t("commandGroup.action", "Actions");
+  } else if (id === "selection") {
+    return $t("commandGroup.selection", "Selection");
+  }
+  return $t("commandGroup.misc", "Miscellaneous");
+};
+</script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/{Group → Item}/index.vue.d.ts

@@ -1,21 +1,17 @@
 import type { Command } from '#blokkli/types';
 type __VLS_Props = {
-    commands: Array<Command & {
+    item: Command & {
         _id: number;
-    }>;
-    visibleIds: {
-        id: number;
-        positions: number[];
-    }[] | undefined;
-    focusedId: string;
+        positions?: number[];
+    };
+    index: number;
+    isFocused: boolean;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: () => void;
-    focus: (id: string) => void;
-    select: (id: string) => void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    focus: (index: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: (() => any) | undefined;
-    onFocus?: ((id: string) => any) | undefined;
     onSelect?: ((id: string) => any) | undefined;
+    onFocus?: ((index: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -18,14 +18,19 @@
       />
     </div>
     <div class="bk-command-palette-results bk-scrollbar-dark">
-      <Group
-        :commands="items"
-        :visible-ids="visibleIds"
-        :focused-id="focusedId"
-        @close="$emit('close')"
-        @focus="onFocus"
-        @select="onSelect($event)"
-      />
+      <div class="bk-command-palette-results-list">
+        <div>
+          <Item
+            v-for="(item, index) in visibleCommands"
+            :key="item.id"
+            :item="item"
+            :index="index"
+            :is-focused="focusedIndex === index"
+            @focus="onFocus"
+            @select="onSelect"
+          />
+        </div>
+      </div>
     </div>
   </ScrollBoundary>
 </template>
@@ -38,23 +43,24 @@ import {
   useBlokkli,
   watch,
   nextTick,
-  onBeforeUnmount
+  onBeforeUnmount,
+  useTemplateRef
 } from "#imports";
 import { Icon, ScrollBoundary } from "#blokkli/components";
-import Group from "./Group/index.vue";
-import { falsy } from "#blokkli/helpers";
 import { Fzf } from "fzf";
+import { modulo } from "#blokkli/helpers";
+import Item from "./Item/index.vue";
 const { commands, $t, selection } = useBlokkli();
 const emit = defineEmits(["close"]);
-const inputEl = ref(null);
+const inputEl = useTemplateRef("inputEl");
 const text = ref("");
-const focusedId = ref("");
+const focusedIndex = ref(0);
 const hasUsedMouse = ref(false);
-function onFocus(id) {
+function onFocus(index) {
   if (!hasUsedMouse.value) {
     return;
   }
-  focusedId.value = id;
+  focusedIndex.value = index;
 }
 const items = computed(
   () => commands.getCommands().filter((v) => !v.disabled).map((doc, index) => {
@@ -65,8 +71,6 @@ const items = computed(
   })
 );
 const fzf = new Fzf(items.value, {
-  // With selector you tell FZF where it can find
-  // the string that you want to query on
   selector: (item) => item.label
 });
 const visibleIds = computed(
@@ -84,6 +88,16 @@ const visibleIds = computed(
     }).sort((a, b) => b.score - a.score);
   }
 );
+const visibleCommands = computed(() => {
+  return items.value.map((v) => {
+    const found = visibleIds.value?.find((w) => w.id === v._id);
+    return {
+      ...v,
+      visible: visibleIds.value === void 0 || !!found,
+      positions: found?.positions
+    };
+  }).filter((v) => v.visible);
+});
 watch(text, () => {
   nextTick(() => {
     focusFirst();
@@ -91,62 +105,25 @@ watch(text, () => {
 });
 watch(selection.uuids, () => emit("close"));
 const focusFirst = () => {
-  const element = document.querySelector(
-    '.bk-command-palette .bk-command[data-command-visible="true"]'
-  );
-  if (element instanceof HTMLElement) {
-    focusedId.value = element.dataset.commandId || "";
-  }
-};
-const getCommandElements = () => {
-  return [
-    ...document.querySelectorAll(
-      '.bk-command-palette .bk-command[data-command-visible="true"]'
-    )
-  ].map((el) => {
-    if (el instanceof HTMLElement) {
-      const id = el.dataset.commandId;
-      if (id) {
-        return {
-          id,
-          el,
-          focused: focusedId.value === id
-        };
-      }
-    }
-  }).filter(falsy);
+  focusedIndex.value = 0;
 };
 const focusPrev = () => {
-  const elements = getCommandElements();
-  if (elements.length === 0) {
+  if (visibleCommands.value.length === 0) {
     return;
   }
-  const focusedIndex = elements.findIndex((v) => v.focused);
-  if (focusedIndex <= 0) {
-    focusedId.value = elements[elements.length - 1].id;
-  } else {
-    focusedId.value = elements[focusedIndex - 1].id;
-  }
-  scrollFocusedIntoView();
+  focusedIndex.value = modulo(
+    focusedIndex.value - 1,
+    visibleCommands.value.length
+  );
 };
 const focusNext = () => {
-  const elements = getCommandElements();
-  if (elements.length === 0) {
+  if (visibleCommands.value.length === 0) {
     return;
   }
-  const focusedIndex = elements.findIndex((v) => v.focused);
-  if (focusedIndex === -1 || focusedIndex === elements.length - 1) {
-    focusedId.value = elements[0].id;
-  } else {
-    focusedId.value = elements[focusedIndex + 1].id;
-  }
-  scrollFocusedIntoView();
-};
-const scrollFocusedIntoView = () => {
-  const element = getCommandElements().find((v) => v.focused)?.el;
-  if (element) {
-    element.scrollIntoView({ block: "nearest", inline: "nearest" });
-  }
+  focusedIndex.value = modulo(
+    focusedIndex.value + 1,
+    visibleCommands.value.length
+  );
 };
 const onSelect = (id) => {
   const command = items.value.find((v) => v.id === id);
@@ -177,7 +154,10 @@ const onKeyDown = (e) => {
     focusPrev();
   } else if (e.code === "Enter") {
     e.preventDefault();
-    onSelect(focusedId.value);
+    const command = visibleCommands.value[focusedIndex.value];
+    if (command) {
+      onSelect(command.id);
+    }
   } else if (e.code === "Escape") {
     e.preventDefault();
     emit("close");

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

@@ -30,7 +30,7 @@
     :title="$t('addCommentToItem', 'Add Comment...')"
     :active="showAddComment"
     weight="last"
-    icon="comment"
+    icon="comment_add"
     multiple
     @click="showAddComment = !showAddComment"
   />

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

@@ -18,7 +18,7 @@ import {
   watch
 } from "#imports";
 import { PluginItemDropdown } from "#blokkli/plugins";
-import { falsy, onlyUnique } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 const { adapter } = defineBlokkliFeature({
   id: "conversions",
   label: "Conversions",
@@ -46,20 +46,17 @@ async function onConvert(targetBundle) {
   }
   await state.mutateWithLoadingState(
     () => adapter.convertBlocks(
-      selection.blocks.value.map((v) => v.uuid),
+      selection.items.value.map((v) => v.uuid),
       targetBundle
     ),
     $t("failedToConvert", "The block could not be converted.")
   );
 }
-const itemBundleIds = computed(
-  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
-);
 const possibleConversions = computed(() => {
-  if (itemBundleIds.value.length !== 1) {
+  if (selection.bundles.value.length !== 1) {
     return [];
   }
-  const sourceType = itemBundleIds.value[0];
+  const sourceType = selection.bundles.value[0];
   const titleBase = $t("conversionsConvertTo", "Convert to: @bundle");
   return conversions.value.filter(
     (v) => v.sourceBundle === sourceType && types.allowedTypesInList.value.includes(v.targetBundle)

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

@@ -14,7 +14,7 @@
 import { useBlokkli, ref } from "#imports";
 import { falsy, intersects } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { ui, dom, editable } = useBlokkli();
+const { ui, dom, directive } = useBlokkli();
 const canvasRects = ref(null);
 function drawRects(ctx, rects, scale, offset, viewport) {
   for (let i = 0; i < rects.length; i++) {
@@ -54,7 +54,7 @@ onBlokkliEvent("canvas:draw", (e) => {
   }).filter(falsy);
   drawRects(ctx, visibleFieldRects, e.artboardScale, e.artboardOffset, viewport);
   ctx.strokeStyle = "green";
-  const editableRects = editable.getVisible();
+  const editableRects = directive.getVisible("editable");
   drawRects(ctx, editableRects, e.artboardScale, e.artboardOffset, viewport);
 });
 </script>

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

@@ -12,8 +12,11 @@ const { logger } = defineBlokkliFeature({
   icon: "bug",
   description: "Provides debugging functionality."
 });
-const { debug } = useBlokkli();
+const { debug, ui } = useBlokkli();
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "=" && e.meta) {
     e.originalEvent.preventDefault();
     debug.toggle();

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

@@ -1,8 +1,8 @@
 <template>
   <PluginItemAction
     id="delete"
+    edit-only
     :title="$t('deleteButton', 'Delete')"
-    :disabled="state.editMode.value !== 'editing'"
     multiple
     key-code="Delete"
     icon="delete"

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

@@ -69,7 +69,14 @@ import {
 import { Icon, ItemIcon, BlokkliTransition } from "#blokkli/components";
 import { easeOutElastic } from "#blokkli/helpers/easing";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { dom, ui, animation, theme, types } = useBlokkli();
+const {
+  dom,
+  ui,
+  animation,
+  theme,
+  types,
+  element: elementProvider
+} = useBlokkli();
 const props = defineProps({
   items: { type: Array, required: true },
   x: { type: Number, required: true },
@@ -201,7 +208,11 @@ onMounted(() => {
     if (!itemElement) {
       return;
     }
-    const element = itemElement.querySelector(".bk-drop-element") || itemElement;
+    const element = elementProvider.query(
+      itemElement,
+      ".bk-drop-element",
+      "Find drop element for drag item."
+    ) || itemElement;
     return {
       rect: element.getBoundingClientRect(),
       element,
@@ -259,9 +270,6 @@ onMounted(() => {
     let bundle;
     let label = "";
     if (!markup) {
-      if (item.item.itemType === "existing" && item.item.editTitle) {
-        label = item.item.editTitle;
-      }
       if ("itemBundle" in item.item) {
         bundle = item.item.itemBundle;
         if (bundle) {

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

@@ -61,7 +61,8 @@ const {
   animation,
   state,
   runtimeConfig,
-  types
+  types,
+  fields
 } = useBlokkli();
 const gl = animation.gl();
 const canvas = animation.getCanvasElement();
@@ -121,7 +122,7 @@ const emitDrop = async () => {
       if (!hostUuid || !fieldName) {
         return;
       }
-      const field = dom.findField(hostUuid, fieldName);
+      const field = fields.find(hostUuid, fieldName);
       if (!field) {
         return;
       }
@@ -149,19 +150,21 @@ const emitDrop = async () => {
 const draggingBundles = computed(
   () => props.items.flatMap((item) => {
     const bundles = [];
-    if ("itemBundle" in item && item.itemBundle) {
+    if (item.itemType === "existing" || item.itemType === "existing_structure") {
+      bundles.push(item.block.bundle);
+      if (item.block.library?.reusableBundle) {
+        bundles.push(item.block.library.reusableBundle);
+      }
+    } else if (item.itemBundle) {
       bundles.push(item.itemBundle);
     }
-    if ("reusableBundle" in item && item.reusableBundle) {
-      bundles.push(item.reusableBundle);
-    }
     return bundles;
   }).filter(falsy)
 );
 const selectionUuids = computed(
   () => props.items.map((item) => {
     if (item.itemType === "existing") {
-      return item.uuid;
+      return item.block.uuid;
     }
   }).filter(falsy)
 );
@@ -305,7 +308,7 @@ const buildFieldRect = (key) => {
   if (!uuid || !name) {
     return;
   }
-  const field = dom.findField(uuid, name);
+  const field = fields.find(uuid, name);
   if (!field) {
     return;
   }
@@ -605,11 +608,11 @@ function setHoveredFieldArea(box, mouse) {
     }
     return;
   }
-  const fields = Object.values(fieldCache);
+  const fields2 = Object.values(fieldCache);
   let highestNestingLevel = 0;
   let candidate = null;
-  for (let i = 0; i < fields.length; i++) {
-    const field = fields[i];
+  for (let i = 0; i < fields2.length; i++) {
+    const field = fields2[i];
     if (!field.canAddChildren) {
       continue;
     }

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

@@ -40,7 +40,18 @@ const { adapter } = defineBlokkliFeature({
   description: "Renders an overlay when dragging or placing a block.",
   screenshot: "feature-dragging-overlay.jpg"
 });
-const { eventBus, state, ui, animation, dom, selection, definitions } = useBlokkli();
+const {
+  eventBus,
+  state,
+  ui,
+  animation,
+  dom,
+  selection,
+  definitions,
+  blocks,
+  directive,
+  fields
+} = useBlokkli();
 const dragItemsComponent = ref(null);
 const isVisible = ref(false);
 const isTouching = ref(false);
@@ -77,7 +88,7 @@ function filterItemType(items) {
   return { itemType, item: items[0] };
 }
 const onDropNew = async (bundle, host, afterUuid) => {
-  const field = dom.findField(host.uuid, host.fieldName);
+  const field = fields.find(host.uuid, host.fieldName);
   if (!field) {
     throw new Error(
       `Failed to locate field with name "${host.fieldName}" on UUID "${host.uuid}"`
@@ -106,7 +117,7 @@ const onDropNew = async (bundle, host, afterUuid) => {
   }
 };
 const onDropExisting = async (items, host, afterUuid) => {
-  const uuids = items.map((v) => v.uuid);
+  const uuids = items.map((v) => v.block.uuid);
   await state.mutateWithLoadingState(
     () => adapter.moveMultipleBlocks({
       uuids,
@@ -224,15 +235,15 @@ onBlokkliEvent("state:reloaded", async function() {
   }
   eventBus.emit("select", newUuid);
   await renderCycle();
-  const newBlock = dom.findBlock(newUuid);
+  const newBlock = blocks.getBlock(newUuid);
   if (!newBlock) {
     return;
   }
   const allSelected = [...selection.uuids.value, newBlock.uuid];
   eventBus.emit("select", allSelected);
   const definition = definitions.getBlockDefinition(
-    newBlock.itemBundle,
-    newBlock.hostFieldListType
+    newBlock.bundle,
+    newBlock.fieldListType
   );
   if (!definition?.editor?.addBehaviour?.startsWith("editable:")) {
     return;
@@ -241,8 +252,8 @@ onBlokkliEvent("state:reloaded", async function() {
   if (!editableField) {
     return;
   }
-  const editableFieldElement = newBlock.element().querySelector(`[data-blokkli-editable-field="${editableField}"]`);
-  if (!(editableFieldElement instanceof HTMLElement)) {
+  const editableFieldElement = directive.getEditablesForBlock(newUuid).find((v) => v.fieldName === editableField);
+  if (!editableFieldElement) {
     return;
   }
   eventBus.emit("editable:focus", {
@@ -283,17 +294,15 @@ onBlokkliEvent("dragging:start", (e) => {
   mouseY.value = e.coords.y;
   dom.updateVisibleRects();
   dragItems.value = e.items;
-  if ("element" in item) {
-    if (!isTouching.value) {
-      document.removeEventListener("pointerup", onMouseUp);
-      document.addEventListener("pointerup", onMouseUp);
-      document.removeEventListener("pointermove", onMouseMove, {
-        capture: true
-      });
-      document.addEventListener("pointermove", onMouseMove, { capture: true });
-    }
-    eventBus.on("animationFrame", loop);
+  if (!isTouching.value) {
+    document.removeEventListener("pointerup", onMouseUp);
+    document.addEventListener("pointerup", onMouseUp);
+    document.removeEventListener("pointermove", onMouseMove, {
+      capture: true
+    });
+    document.addEventListener("pointermove", onMouseMove, { capture: true });
   }
+  eventBus.on("animationFrame", loop);
 });
 onBlokkliEvent("dragging:end", () => {
   isVisible.value = false;
@@ -303,6 +312,9 @@ onBlokkliEvent("dragging:end", () => {
   document.removeEventListener("pointermove", onMouseMove, { capture: true });
 });
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Escape") {
     eventBus.emit("dragging:end");
   }