@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

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

@@ -63,16 +63,6 @@
       </div>
     </div>
   </PluginSidebar>
-  <PluginItemDropdown
-    id="clipboard"
-    :title="$t('clipboard', 'Clipboard')"
-    :enabled="
-  !!selection.items.value.length && state.editMode.value === 'editing'
-"
-    :items="itemDropdownItems"
-    icon="clipboard"
-    @select="onSelectDropdownItem"
-  />
 </template>
 
 <script setup>
@@ -84,9 +74,10 @@ import {
   onUnmounted,
   computed
 } from "#imports";
-import { PluginSidebar, PluginItemDropdown } from "#blokkli/plugins";
+import { PluginSidebar } from "#blokkli/plugins";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 import ClipboardList from "./List/index.vue";
-import { generateUUID, getFieldKey } 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";
@@ -109,7 +100,7 @@ const { settings, logger } = defineBlokkliFeature({
   },
   screenshot: "feature-clipboard.jpg"
 });
-const { selection, $t, adapter, state, ui, types, keyboard, blocks } = useBlokkli();
+const { selection, $t, adapter, state, ui, types, keyboard, blocks, fields } = useBlokkli();
 const plugin = ref(null);
 const selectionClipboard = ref([]);
 const itemDropdownItems = computed(() => {
@@ -296,30 +287,47 @@ const handleSelectionPaste = (pastedUuids) => {
     return;
   }
   let targetField = null;
-  let targetFieldConfig = null;
+  let targetFieldElement = null;
   let targetFieldKey = null;
   let preceedingUuid = void 0;
   if (!keyboard.isPressingShift.value) {
     const pastedBundles = pastedUuids.map((uuid) => blocks.getBlock(uuid)?.bundle).filter((bundle) => !!bundle);
+    const pastedFragments = pastedUuids.map((uuid) => {
+      const block2 = blocks.getBlock(uuid);
+      if (block2?.bundle === "blokkli_fragment" && block2.fragment?.name) {
+        return block2.fragment.name;
+      }
+      return null;
+    }).filter(falsy);
     if (pastedBundles.length) {
       const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
         itemEntityType,
         block.bundle
       );
       for (const fieldConfig of nestedFields) {
+        const fieldElement = fields.find(block.uuid, fieldConfig.name);
+        if (!fieldElement) {
+          continue;
+        }
         const allowedPastedBundles = pastedBundles.filter(
-          (bundle) => fieldConfig.allowedBundles.includes(bundle)
+          (bundle) => fieldElement.allowedBundles.includes(bundle)
         );
-        if (allowedPastedBundles.length > 0) {
+        let fragmentsAllowed = true;
+        if (pastedFragments.length > 0 && fieldElement.allowedFragments.length > 0) {
+          fragmentsAllowed = pastedFragments.every(
+            (fragment) => fieldElement.allowedFragments.includes(fragment)
+          );
+        }
+        if (allowedPastedBundles.length > 0 && fragmentsAllowed) {
           const nestedFieldKey = getFieldKey(block.uuid, fieldConfig.name);
           const currentCount = state.getFieldBlockCount(nestedFieldKey);
-          if (fieldConfig.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldConfig.cardinality) {
+          if (fieldElement.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldElement.cardinality) {
             targetField = {
               entityType: itemEntityType,
               entityUuid: block.uuid,
               name: fieldConfig.name
             };
-            targetFieldConfig = fieldConfig;
+            targetFieldElement = fieldElement;
             targetFieldKey = nestedFieldKey;
             preceedingUuid = void 0;
             break;
@@ -328,17 +336,13 @@ const handleSelectionPaste = (pastedUuids) => {
       }
     }
   }
-  if (!targetField || !targetFieldConfig || !targetFieldKey) {
+  if (!targetField || !targetFieldElement || !targetFieldKey) {
     const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
     if (!field) {
       return;
     }
-    const fieldConfig = types.getFieldConfig(
-      field.entityType,
-      block.host.bundle,
-      field.name
-    );
-    if (!fieldConfig) {
+    const fieldElement = fields.find(field.entityUuid, field.name);
+    if (!fieldElement) {
       return;
     }
     targetField = {
@@ -346,12 +350,13 @@ const handleSelectionPaste = (pastedUuids) => {
       entityUuid: field.entityUuid,
       name: field.name
     };
-    targetFieldConfig = fieldConfig;
+    targetFieldElement = fieldElement;
     targetFieldKey = getFieldKey(field.entityUuid, field.name);
     preceedingUuid = selection.uuids.value[0];
   }
   const pastedBlocks = [];
   const notAllowedBundles = [];
+  const notAllowedFragments = [];
   for (let i = 0; i < pastedUuids.length; i++) {
     const uuid = pastedUuids[i];
     if (!uuid) {
@@ -361,14 +366,34 @@ const handleSelectionPaste = (pastedUuids) => {
     if (!block2) {
       continue;
     }
-    const isAllowed = targetFieldConfig.allowedBundles.includes(block2.bundle);
+    const isAllowed = targetFieldElement.allowedBundles.includes(block2.bundle);
     if (!isAllowed) {
       notAllowedBundles.push(block2.bundle);
       continue;
     }
+    if (block2.bundle === "blokkli_fragment" && block2.fragment?.name && targetFieldElement.allowedFragments.length > 0) {
+      const fragmentAllowed = targetFieldElement.allowedFragments.includes(
+        block2.fragment.name
+      );
+      if (!fragmentAllowed) {
+        notAllowedFragments.push(block2.fragment.name);
+        continue;
+      }
+    }
     pastedBlocks.push(block2);
   }
   if (!pastedBlocks.length) {
+    if (notAllowedFragments.length) {
+      const message2 = notAllowedFragments.length === 1 ? $t(
+        "clipboardPasteErrorAllowedFragmentsSingle",
+        'Fragment "@types" is not allowed here.'
+      ) : $t(
+        "clipboardPasteErrorAllowedFragmentsMultiple",
+        "Fragments (@types) are not allowed here."
+      );
+      emitPasteError(message2.replace("@types", notAllowedFragments.join(", ")));
+      return;
+    }
     const blockTypes = notAllowedBundles.map((bundle) => {
       return types.getBlockBundleDefinition(bundle)?.label ?? bundle;
     });
@@ -383,12 +408,12 @@ const handleSelectionPaste = (pastedUuids) => {
     return;
   }
   const count = state.getFieldBlockCount(targetFieldKey);
-  if (targetFieldConfig.cardinality !== -1 && count + pastedBlocks.length > targetFieldConfig.cardinality) {
+  if (targetFieldElement.cardinality !== -1 && count + pastedBlocks.length > targetFieldElement.cardinality) {
     emitPasteError(
       $t(
         "clipboardPasteErrorCardinality",
         "This field only allows up to @count blocks."
-      ).replace("@count", targetFieldConfig.cardinality.toString())
+      ).replace("@count", targetFieldElement.cardinality.toString())
     );
     return;
   }
@@ -529,6 +554,22 @@ defineShortcut([
     meta: true
   }
 ]);
+defineItemDropdownAction(() => {
+  if (selection.items.value.length && state.editMode.value === "editing") {
+    return itemDropdownItems.value.map((item) => ({
+      id: "clipboard-" + item.id,
+      label: item.label,
+      icon: item.icon,
+      description: item.description,
+      enabled: item.enabled,
+      group: "clipboard",
+      weight: 100,
+      callback: () => {
+        onSelectDropdownItem(item);
+      }
+    }));
+  }
+});
 onBlokkliEvent("drop:clipboardItem", async (data) => {
   const item = pastedItems.value.find((v) => v.id === data.id);
   if (!item) {

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

@@ -1,8 +1,6 @@
 <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)"

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

@@ -1,9 +1,11 @@
 import type { Command } from '#blokkli/types';
+export type MappedCommandItem = Command & {
+    positions?: number[];
+    score?: number;
+    visible?: boolean;
+};
 type __VLS_Props = {
-    item: Command & {
-        _id: number;
-        positions?: number[];
-    };
+    item: MappedCommandItem;
     index: number;
     isFocused: boolean;
 };

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

@@ -21,11 +21,12 @@
       <div class="bk-command-palette-results-list">
         <div>
           <Item
-            v-for="(item, index) in visibleCommands"
+            v-for="item in allCommands"
+            v-show="item.visible"
             :key="item.id"
             :item="item"
-            :index="index"
-            :is-focused="focusedIndex === index"
+            :index="getVisibleIndex(item.id)"
+            :is-focused="focusedIndex === getVisibleIndex(item.id)"
             @focus="onFocus"
             @select="onSelect"
           />
@@ -49,9 +50,21 @@ import {
 import { Icon, ScrollBoundary } from "#blokkli/components";
 import { Fzf } from "fzf";
 import { modulo } from "#blokkli/helpers";
-import Item from "./Item/index.vue";
-const { commands, $t, selection } = useBlokkli();
+import Item, {} from "./Item/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const emit = defineEmits(["close"]);
+const { commands, $t, selection, plugins, storage } = useBlokkli();
+const frequency = storage.use(
+  "commandPaletteFrequency",
+  {}
+);
+function incrementFrequency(id) {
+  const currentCount = frequency.value[id] ?? 0;
+  frequency.value = {
+    ...frequency.value,
+    [id]: currentCount + 1
+  };
+}
 const inputEl = useTemplateRef("inputEl");
 const text = ref("");
 const focusedIndex = ref(0);
@@ -62,42 +75,75 @@ function onFocus(index) {
   }
   focusedIndex.value = index;
 }
-const items = computed(
-  () => commands.getCommands().filter((v) => !v.disabled).map((doc, index) => {
+const items = computed(() => {
+  return [
+    ...commands.getCommands(),
+    ...plugins.get("menuButton").map((plugin) => {
+      return {
+        id: "menu-button:" + plugin.id,
+        label: plugin.title,
+        group: "action",
+        icon: plugin.icon,
+        disabled: plugin.disabled,
+        callback: plugin.callback
+      };
+    })
+  ].filter((v) => !v.disabled).map((doc, index) => {
     return {
       ...doc,
-      _id: index
+      _id: index,
+      visible: true
     };
-  })
-);
+  }).sort((a, b) => {
+    const freqA = frequency.value[a.id] ?? 0;
+    const freqB = frequency.value[b.id] ?? 0;
+    return freqB - freqA;
+  });
+});
 const fzf = new Fzf(items.value, {
   selector: (item) => item.label
 });
-const visibleIds = computed(
-  () => {
-    if (!text.value) {
-      return void 0;
-    }
-    const results = fzf.find(text.value);
-    return results.map((v) => {
-      return {
-        id: v.item._id,
-        positions: [...v.positions],
-        score: v.score
-      };
-    }).sort((a, b) => b.score - a.score);
+const visibleIds = computed(() => {
+  if (!text.value) {
+    return void 0;
+  }
+  const results = fzf.find(text.value);
+  return results.map((v) => {
+    return {
+      id: v.item._id,
+      positions: [...v.positions],
+      score: v.score
+    };
+  });
+});
+const allCommands = computed(() => {
+  if (!text.value) {
+    return items.value;
   }
-);
-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
+      positions: found?.positions,
+      score: found?.score ?? 0
     };
-  }).filter((v) => v.visible);
+  }).sort((a, b) => {
+    const scoreDiff = b.score - a.score;
+    if (scoreDiff !== 0) {
+      return scoreDiff;
+    }
+    const freqA = frequency.value[a.id] ?? 0;
+    const freqB = frequency.value[b.id] ?? 0;
+    return freqB - freqA;
+  });
+});
+const visibleCommands = computed(() => {
+  return allCommands.value.filter((v) => v.visible !== false);
 });
+const getVisibleIndex = (id) => {
+  return visibleCommands.value.findIndex((v) => v.id === id);
+};
 watch(text, () => {
   nextTick(() => {
     focusFirst();
@@ -128,6 +174,7 @@ const focusNext = () => {
 const onSelect = (id) => {
   const command = items.value.find((v) => v.id === id);
   if (command) {
+    incrementFrequency(id);
     command.callback();
     emit("close");
   }
@@ -166,6 +213,9 @@ const onKeyDown = (e) => {
 const onWindowClick = () => {
   emit("close");
 };
+onBlokkliEvent("overlay:close", () => {
+  emit("close");
+});
 onMounted(() => {
   if (inputEl.value) {
     inputEl.value.focus();

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

@@ -1,16 +1,18 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <div class="bk">
       <BlokkliTransition name="command-palette">
         <Palette v-if="isVisible" @close="isVisible = false" />
       </BlokkliTransition>
     </div>
   </Teleport>
+
   <PluginToolbarButton
     id="command_palette"
     :title="label"
     meta
     key-code="K"
+    no-command
     region="before-sidebar"
     :tour-text="
   $t(
@@ -24,11 +26,12 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import { PluginToolbarButton } from "#blokkli/plugins";
 import { BlokkliTransition } from "#blokkli/components";
 import Palette from "./Palette/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useDialog } from "#blokkli/helpers/composables/useDialog";
 defineBlokkliFeature({
   id: "command-palette",
   icon: "command",
@@ -36,8 +39,8 @@ defineBlokkliFeature({
   description: "Provides a command palette with search to access most UI features with a keyboard.",
   viewports: ["desktop"]
 });
-const { $t } = useBlokkli();
-const isVisible = ref(false);
+const { $t, ui } = useBlokkli();
+const isVisible = useDialog("command-palette", "center");
 const label = computed(() => $t("commandPaletteOpen", "Open Command Palette"));
 onBlokkliEvent("window:clickAway", () => isVisible.value = false);
 </script>

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

@@ -35,7 +35,7 @@
     @click="showAddComment = !showAddComment"
   />
 
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="caret-tooltip">
       <CommentAddForm
         v-if="showAddComment"
@@ -75,7 +75,7 @@ const { adapter } = defineBlokkliFeature({
   description: "Provides comment functionality for blocks.",
   screenshot: "feature-comments.jpg"
 });
-const { eventBus, $t, selection } = useBlokkli();
+const { eventBus, $t, selection, ui } = useBlokkli();
 const commentForm = ref(null);
 const showAddComment = ref(false);
 watch(selection.uuids, () => {

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

@@ -1,12 +1,5 @@
 <template>
-  <PluginItemDropdown
-    id="conversions"
-    :title="$t('convertTo', 'Convert to...')"
-    :enabled="!!possibleConversions.length"
-    :items="possibleConversions"
-    weight="900"
-    @select="onConvert($event.id)"
-  />
+  <div />
 </template>
 
 <script setup>
@@ -17,8 +10,8 @@ import {
   useLazyAsyncData,
   watch
 } from "#imports";
-import { PluginItemDropdown } from "#blokkli/plugins";
 import { falsy } from "#blokkli/helpers";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
 const { adapter } = defineBlokkliFeature({
   id: "conversions",
   label: "Conversions",
@@ -68,6 +61,20 @@ const possibleConversions = computed(() => {
     };
   });
 });
+defineItemDropdownAction(() => {
+  if (possibleConversions.value.length) {
+    return possibleConversions.value.map((conversion) => ({
+      id: "conversion-" + conversion.id,
+      label: conversion.label,
+      bundle: conversion.bundle,
+      group: "conversions",
+      weight: 900,
+      callback: () => {
+        onConvert(conversion.id);
+      }
+    }));
+  }
+});
 </script>
 
 <script>

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

@@ -0,0 +1,24 @@
+<template>
+  <section class="bk-debug-section">
+    <h2 class="bk-debug-section-header" @click="toggle">
+      <span class="bk-debug-section-indicator">{{ isOpen ? "\u25BC" : "\u25B6" }}</span>
+      {{ title }}
+    </h2>
+    <div v-if="isOpen" class="bk-debug-section-content">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+const props = defineProps({
+  title: { type: String, required: true },
+  defaultOpen: { type: Boolean, required: false }
+});
+const { storage } = useBlokkli();
+const isOpen = storage.use("debugSection" + props.title, false);
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+</script>

package/dist/runtime/components/Edit/Features/Debug/DebugSection.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    title: string;
+    defaultOpen?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,80 @@
+<template>
+  <PluginSidebar id="debug" title="Debug" icon="bug" weight="200">
+    <div class="bk bk-debug">
+      <DebugSection title="Keyboard">
+        <SectionKeyboard />
+      </DebugSection>
+
+      <DebugSection title="Selection">
+        <SectionSelection />
+      </DebugSection>
+
+      <DebugSection title="Rendering">
+        <SectionRendering />
+      </DebugSection>
+
+      <DebugSection title="Logging">
+        <SectionLogging :logger />
+      </DebugSection>
+
+      <DebugSection title="Icons">
+        <SectionIcons />
+      </DebugSection>
+
+      <DebugSection title="Features">
+        <SectionFeatures />
+      </DebugSection>
+    </div>
+  </PluginSidebar>
+
+  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
+    <DebugViewport />
+  </PluginDebugOverlay>
+
+  <PluginDebugOverlay id="rects" title="Show field and block rects">
+    <DebugRects />
+  </PluginDebugOverlay>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { PluginSidebar, PluginDebugOverlay } from "#blokkli/plugins";
+import DebugSection from "./DebugSection.vue";
+import SectionKeyboard from "./Section/Keyboard.vue";
+import SectionSelection from "./Section/Selection.vue";
+import SectionRendering from "./Section/Rendering.vue";
+import SectionLogging from "./Section/Logging.vue";
+import SectionIcons from "./Section/Icons.vue";
+import SectionFeatures from "./Section/Features.vue";
+import DebugViewport from "./Viewport/index.vue";
+import DebugRects from "./Rects/index.vue";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
+defineProps({
+  logger: { type: Object, required: true }
+});
+const { selection } = useBlokkli();
+async function copyUuid() {
+  const uuid = selection.uuids.value.at(0);
+  if (!uuid) {
+    return;
+  }
+  const type = "text/plain";
+  const clipboardItemData = {
+    [type]: uuid
+  };
+  const clipboardItem = new ClipboardItem(clipboardItemData);
+  await navigator.clipboard.write([clipboardItem]);
+}
+defineItemDropdownAction(() => {
+  if (selection.uuids.value.length === 1) {
+    return {
+      id: "debug-copy-uuid",
+      label: "Copy UUID",
+      icon: "bug",
+      group: "debug",
+      weight: 200,
+      callback: copyUuid
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <div class="bk-debug-features">
+    <div v-for="feature in featuresList" :key="feature.id">
+      <div>
+        <span
+          class="bk-status-indicator"
+          :class="feature.mounted ? 'bk-is-success' : 'bk-is-danger'"
+        />
+      </div>
+      <div>
+        <h3>{{ feature.label }}</h3>
+        <div>{{ feature.id }}</div>
+        <p>{{ feature.description }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, computed } from "#imports";
+const { features } = useBlokkli();
+const featuresList = computed(() => {
+  return features.features.value.map((v) => {
+    const feature = features.mountedFeatures.value.find((f) => f.id === v.id);
+    return {
+      id: v.id,
+      label: v.label,
+      description: v.description,
+      dependencies: v.dependencies?.join(", "),
+      mounted: !!feature
+    };
+  });
+});
+</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Icons.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="bk-debug-icons">
+    <div v-for="icon in iconItems" :key="icon">
+      <Icon :name="icon" />
+      <p>{{ icon }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Icon } from "#blokkli/components";
+import { icons } from "#blokkli-build/icons";
+const iconItems = computed(() => Object.keys(icons));
+</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Icons.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;