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

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

@@ -77,7 +77,7 @@ import {
 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";
@@ -100,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(() => {
@@ -287,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;
@@ -319,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 = {
@@ -337,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) {
@@ -352,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;
     });
@@ -374,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;
   }

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/DraggingOverlay/DragItems/DragItem.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    ref="rootEl"
+    class="bk-dragging-overlay-item"
+    :class="{ 'bk-is-top': isTop, 'bk-is-fallback': !markup }"
+    :style="{
+  width: width + 'px',
+  height: height + 'px',
+  transformOrigin,
+  background,
+  '--bk-dragging-scale': to.scaleX,
+  '--bk-dragging-radius': Math.max(borderRadius ?? 0, 4)
+}"
+  >
+    <div
+      v-if="markup"
+      ref="markupEl"
+      class="bk-dragging-overlay-markup"
+      v-html="markup"
+    />
+    <div v-else class="bk-dragging-overlay-fallback">
+      <div :style="{ transform: `scale(${1 / to.scaleX})` }">
+        <template v-if="isTop">
+          <ItemIcon v-if="bundle" :bundle="bundle" />
+          <Icon v-else-if="icon" :name="icon" />
+          <div v-if="label">{{ label }}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, ItemIcon } from "#blokkli/components";
+import { lerp } from "#blokkli/helpers";
+import { easeOutElastic } from "#blokkli/helpers/easing";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
+  isTop: { type: Boolean, required: true },
+  from: { type: Object, required: true },
+  to: { type: Object, required: true },
+  width: { type: Number, required: true },
+  height: { type: Number, required: true },
+  transformOrigin: { type: String, required: true },
+  markup: { type: String, required: true },
+  background: { type: String, required: true },
+  bundle: { type: String, required: false },
+  icon: { type: null, required: false },
+  label: { type: String, required: false },
+  prevVisibility: { type: String, required: false },
+  element: { type: null, required: true }
+});
+const DURATION = 500;
+const { ui, theme } = useBlokkli();
+const rootEl = useTemplateRef("rootEl");
+const markupEl = useTemplateRef("markupEl");
+const borderRadius = ref(null);
+let isDone = false;
+let animationStart = 0;
+function setBorderRadius() {
+  if (borderRadius.value !== null) {
+    return;
+  }
+  if (!props.isTop) {
+    borderRadius.value = 4;
+    return;
+  }
+  if (markupEl.value) {
+    const child = markupEl.value.firstChild;
+    if (child instanceof HTMLElement) {
+      const style = theme.getDraggableStyle(child);
+      borderRadius.value = style.radiusMin;
+      return;
+    }
+  }
+  borderRadius.value = 4;
+}
+onBlokkliEvent("canvas:draw", (e) => {
+  if (isDone || !rootEl.value) {
+    return;
+  }
+  if (!animationStart) {
+    animationStart = e.time;
+  }
+  setBorderRadius();
+  const elapsed = e.time - animationStart;
+  const alphaX = easeOutElastic(elapsed / DURATION, 1.92, 0.91);
+  const alphaY = easeOutElastic(elapsed / DURATION, 2.2, 0.76);
+  const opacityAlpha = Math.min(Math.max(elapsed - 300, 0) / 200, 1);
+  const from = props.from;
+  const to = props.to;
+  if (elapsed > DURATION || !ui.useAnimations.value || ui.lowPerformanceMode.value) {
+    rootEl.value.style.transform = `translate(${to.x}px, ${to.y}px) scale(${to.scaleX}, ${to.scaleY})`;
+    rootEl.value.style.opacity = String(to.opacity);
+    isDone = true;
+    return;
+  }
+  const newX = lerp(from.x, to.x, alphaX);
+  const newY = lerp(from.y, to.y, alphaY);
+  const newOpacity = lerp(from.opacity, to.opacity, opacityAlpha);
+  const newScaleX = lerp(from.scaleX, to.scaleX, alphaX);
+  const newScaleY = lerp(from.scaleY, to.scaleY, alphaY);
+  rootEl.value.style.transform = `translate(${newX}px, ${newY}px) scale(${newScaleX}, ${newScaleY})`;
+  rootEl.value.style.opacity = String(newOpacity);
+});
+onMounted(() => {
+  if (rootEl.value) {
+    rootEl.value.style.transform = `translate(${props.from.x}px, ${props.from.y}px) scale(${props.from.scaleX}, ${props.from.scaleY})`;
+    rootEl.value.style.opacity = String(props.from.opacity);
+  }
+});
+</script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/DragItem.vue.d.ts

@@ -0,0 +1,25 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type AnimationRectangleValues = {
+    opacity: number;
+    scaleX: number;
+    scaleY: number;
+    x: number;
+    y: number;
+};
+export type DragItemData = {
+    isTop: boolean;
+    from: AnimationRectangleValues;
+    to: AnimationRectangleValues;
+    width: number;
+    height: number;
+    transformOrigin: string;
+    markup: string;
+    background: string;
+    bundle?: string;
+    icon?: BlokkliIcon;
+    label?: string;
+    prevVisibility?: string;
+    element: HTMLElement;
+};
+declare const _default: import("vue").DefineComponent<DragItemData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragItemData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;