@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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

@@ -1,72 +1,16 @@
 <template>
-  <PluginToolbarButton
-    id="artboard_reset_zoom"
-    :title="$t('artboardResetZoom', 'Reset zoom')"
-    :shortcut-group="$t('artboard', 'Artboard')"
-    :tour-text="
-  $t(
-    'artboardToolbarButtonTourText',
-    'Shows the current zoom factor. Click on it to reset the zoom back to 100%.'
-  )
-"
-    icon="magnifier"
-    meta
-    key-code="0"
-    region="view-options"
-    weight="100"
-    @click="resetZoom"
-  >
-    <div class="bk-feature-canvas-button">
-      <span>{{ zoomLevel }}</span>
-    </div>
-  </PluginToolbarButton>
-
-  <PluginViewOption
-    id="artboardOverview"
-    v-slot="{ isActive }"
-    :label="$t('artboardOverviewToggle', 'Toggle overview')"
-    :title-on="$t('artboardOverviewShow', 'Show overview')"
-    :title-off="$t('artboardOverviewHide', 'Hide overview')"
-    :tour-text="
-  $t(
-    'artboardOverviewTourText',
-    `Displays a top level overview of your content.`
-  )
-"
-    icon="eye"
-    key-code="O"
-    weight="90"
-  >
-    <Teleport v-if="isActive" to="body">
-      <Overview :artboard="artboard" />
-    </Teleport>
-  </PluginViewOption>
-
-  <Scrollbar :artboard="artboard" orientation="y" />
+  <Renderer
+    v-if="renderArtboard"
+    :persist="settings.persist"
+    :momentum="settings.momentum"
+    :scroll-speed="settings.scrollSpeed"
+  />
 </template>
 
 <script setup>
-import {
-  watch,
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-  defineBlokkliFeature
-} from "#imports";
-import { PluginToolbarButton, PluginViewOption } from "#blokkli/plugins";
-import { asValidNumber } from "#blokkli/helpers";
-import Overview from "./Overview/index.vue";
-import Scrollbar from "./Scrollbar/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
 import defineShortcut from "#blokkli/helpers/composables/defineShortcut";
-import {
-  createArtboard,
-  touch,
-  wheel,
-  mouse,
-  dom as domPlugin
-} from "artboard-deluxe";
+import Renderer from "./Renderer.vue";
 const { settings } = defineBlokkliFeature({
   id: "artboard",
   label: "Artboard",
@@ -102,173 +46,8 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-artboard.jpg"
 });
-const { context, storage, ui, animation, $t, dom, selection } = useBlokkli();
-const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + "%");
-const PADDING = 50;
-const options = computed(() => {
-  return {
-    maxScale: ui.isMobile.value ? 1 : 3,
-    direction: ui.isMobile.value ? "vertical" : "both",
-    minScale: 0.1,
-    overscrollBounds: {
-      top: ui.visibleViewport.value.y + PADDING,
-      left: ui.visibleViewport.value.x + PADDING,
-      right: ui.viewport.value.width - ui.visibleViewport.value.width - ui.visibleViewport.value.x + PADDING,
-      bottom: PADDING
-    }
-  };
-});
-watch(options, function(newOptions) {
-  artboard.setOptions(newOptions);
-});
-const storageKey = computed(() => "artboard:" + context.value.entityUuid);
-const savedState = storage.use(storageKey, null);
-const saveState = () => {
-  if (!settings.value.persist) {
-    return;
-  }
-  savedState.value = {
-    offset: artboard.getOffset(),
-    scale: artboard.getScale()
-  };
-};
-let pluginWheel = null;
-const wheelOptions = computed(() => {
-  return {
-    useMomentumZoom: settings.value.momentum,
-    useMomentumScroll: settings.value.momentum,
-    interceptWheel: true,
-    scrollSpeed: settings.value.scrollSpeed,
-    wheelZoomFactor: settings.value.scrollSpeed
-  };
-});
-watch(wheelOptions, function(newOptions) {
-  if (pluginWheel) {
-    pluginWheel.options.setAll(newOptions);
-  }
-});
-watch(selection.uuids, function() {
-  if (artboard.getMomentum()) {
-    artboard.cancelAnimation();
-  }
-});
-function getArtboard() {
-  pluginWheel = wheel(wheelOptions.value);
-  return createArtboard(
-    ui.rootElement(),
-    [
-      mouse(),
-      touch(),
-      pluginWheel,
-      domPlugin({
-        element: ui.artboardElement(),
-        precision: 1,
-        restoreStyles: true
-      })
-    ],
-    {
-      initTransform: savedState.value && settings.value.persist ? {
-        x: asValidNumber(savedState.value.offset.x, 0),
-        y: asValidNumber(savedState.value.offset.y, 0),
-        scale: asValidNumber(savedState.value?.scale, 1)
-      } : void 0,
-      ...options.value
-    }
-  );
-}
-const artboard = getArtboard();
-watch(options, function(newOptions) {
-  artboard.setOptions(newOptions);
-});
-const AUTOSCROLL_EDGE_ZONE = 130;
-const AUTOSCROLL_SPEED = 12;
-let autoScrollSpeed = 1;
-function edgeStep(distance) {
-  const ratio = distance / AUTOSCROLL_EDGE_ZONE;
-  return Math.pow(ratio, 3) * AUTOSCROLL_SPEED;
-}
-onBlokkliEvent("animationFrame:before", ({ time, mouseY }) => {
-  if (selection.isDragging.value) {
-    const viewportHeight = ui.viewport.value.height;
-    const currentOffset = artboard.getOffset();
-    const y = Math.min(Math.max(mouseY, 0), viewportHeight);
-    let dy = 0;
-    if (y < AUTOSCROLL_EDGE_ZONE) {
-      const dist = AUTOSCROLL_EDGE_ZONE - y;
-      dy = edgeStep(dist);
-    } else if (y > viewportHeight - AUTOSCROLL_EDGE_ZONE) {
-      const dist = y - (viewportHeight - AUTOSCROLL_EDGE_ZONE);
-      dy = -edgeStep(dist);
-    } else {
-      autoScrollSpeed = 1;
-    }
-    if (dy !== 0) {
-      artboard.setOffset(null, currentOffset.y + dy * autoScrollSpeed);
-      autoScrollSpeed = Math.min(autoScrollSpeed * 1.01, 2.25);
-    }
-  } else {
-    autoScrollSpeed = 1;
-  }
-  artboard.loop(time);
-  const artboardSize = artboard.getArtboardSize();
-  if (artboardSize) {
-    ui.artboardSize.value.height = artboardSize.height;
-    ui.artboardSize.value.width = artboardSize.width;
-  }
-  const offset = artboard.getOffset();
-  ui.artboardOffset.value.x = asValidNumber(Math.ceil(offset.x), 0);
-  ui.artboardOffset.value.y = asValidNumber(Math.ceil(offset.y), 0);
-  ui.artboardScale.value = asValidNumber(artboard.getScale(), 1);
-  animation.requestDraw();
-});
-onMounted(() => {
-  window.addEventListener("beforeunload", saveState);
-});
-onBeforeUnmount(() => {
-  saveState();
-  artboard.destroy();
-  window.removeEventListener("beforeunload", saveState);
-});
-const resetZoom = () => {
-  artboard.resetZoom({
-    duration: 500
-  });
-  animation.requestDraw();
-};
-onBlokkliEvent("keyPressed", (e) => {
-  if (e.code === "Home") {
-    e.originalEvent.preventDefault();
-    artboard.scrollToTop();
-    animation.requestDraw();
-  } else if (e.code === "End") {
-    e.originalEvent.preventDefault();
-    artboard.scrollToEnd();
-    animation.requestDraw();
-  } else if (e.code === "PageUp") {
-    e.originalEvent.preventDefault();
-    artboard.scrollPageUp();
-    animation.requestDraw();
-  } else if (e.code === "PageDown") {
-    e.originalEvent.preventDefault();
-    artboard.scrollPageDown();
-    animation.requestDraw();
-  } else if (e.code === "ArrowUp") {
-    e.originalEvent.preventDefault();
-    artboard.scrollUp();
-    animation.requestDraw();
-  } else if (e.code === "ArrowDown") {
-    e.originalEvent.preventDefault();
-    artboard.scrollDown();
-    animation.requestDraw();
-  } else if (e.code === "0" && e.meta) {
-    e.originalEvent.preventDefault();
-    resetZoom();
-  } else if (e.code === "1" && e.meta) {
-    e.originalEvent.preventDefault();
-    artboard.scaleToFit();
-    animation.requestDraw();
-  }
-});
+const { ui, $t } = useBlokkli();
+const renderArtboard = computed(() => !ui.isAnalyzing.value);
 defineShortcut(
   [
     {
@@ -304,20 +83,6 @@ defineShortcut(
     return { ...v, group: $t("artboard", "Artboard") };
   })
 );
-onBlokkliEvent("scrollIntoView", (e) => {
-  const rect = dom.getBlockRect(e.uuid);
-  if (!rect) {
-    return;
-  }
-  if (dom.isBlockVisible(e.uuid)) {
-    return;
-  }
-  artboard.scrollIntoView(rect, {
-    scale: "none",
-    axis: "y",
-    behavior: e.immediate ? "instant" : "auto"
-  });
-});
 </script>
 
 <script>

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

@@ -1,8 +1,8 @@
 <template>
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <Overlay v-if="placedAction" @close="onClose" @submit="onSubmit" />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 
   <PluginAddAction
@@ -20,6 +20,7 @@
 <script setup>
 import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
 import { PluginAddAction } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import Overlay from "./Overlay/index.vue";
 const { adapter } = defineBlokkliFeature({
   id: "assistant",

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

@@ -60,6 +60,7 @@ import {
 import { AddListItem } from "#blokkli/components";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { isInternalBundle } from "#blokkli/helpers/bundles";
 import { PluginTourItem } from "#blokkli/plugins";
 import { getFieldKey, onlyUnique } from "#blokkli/helpers";
 const { settings } = defineBlokkliFeature({
@@ -79,7 +80,6 @@ const { settings } = defineBlokkliFeature({
     }
   }
 });
-const reservedBundles = ["from_library", "blokkli_fragment"];
 const {
   selection,
   storage,
@@ -174,7 +174,7 @@ function determineVisibility(bundle, label) {
   return true;
 }
 const sortedList = computed(() => {
-  return [...generallyAvailableBundles.value].filter((v) => !reservedBundles.includes(v.id)).map((v) => {
+  return [...generallyAvailableBundles.value].filter((v) => !isInternalBundle(v.id)).map((v) => {
     const isVisible = determineVisibility(v.id, v.label);
     const isDisabled = !v.id || !selectableBundles.value.includes(v.id);
     return {
@@ -208,7 +208,7 @@ const getBundlesForAppendCommands = () => {
         return [];
       }
     }
-    return field.allowedBundles.filter((v) => !reservedBundles.includes(v));
+    return field.allowedBundles.filter((v) => !isInternalBundle(v));
   }
   return [];
 };
@@ -227,7 +227,7 @@ const getAppendEndCommands = () => {
         return [];
       }
     }
-    return field.allowedBundles.filter((v) => !reservedBundles.includes(v)).map((bundle) => {
+    return field.allowedBundles.filter((v) => !isInternalBundle(v)).map((bundle) => {
       const definition = types.getBlockBundleDefinition(bundle);
       return {
         id: "block_add_list:append_end:" + bundle + field.name,

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

@@ -14,10 +14,10 @@
     icon="clipboard"
     weight="-30"
   >
-    <div class="bk-clipboard bk-control">
+    <div class="bk bk-clipboard bk-control">
       <div
         v-if="!pastedItems.length"
-        class="bk bk-clipboard-info bk-sidebar-padding"
+        class="bk-clipboard-info bk-sidebar-padding"
       >
         <h4>{{ $t("clipboardEmpty", "No items in the clipboard") }}</h4>
         <div
@@ -63,6 +63,16 @@
       </div>
     </div>
   </PluginSidebar>
+  <PluginItemDropdown
+    id="clipboard"
+    :title="$t('clipboard', 'Clipboard')"
+    :enabled="
+  !!selection.blocks.value.length && state.editMode.value === 'editing'
+"
+    :items="itemDropdownItems"
+    icon="clipboard"
+    @select="onSelectDropdownItem"
+  />
 </template>
 
 <script setup>
@@ -71,15 +81,17 @@ import {
   ref,
   useBlokkli,
   onMounted,
-  onUnmounted
+  onUnmounted,
+  computed
 } from "#imports";
-import { PluginSidebar } from "#blokkli/plugins";
+import { PluginSidebar, PluginItemDropdown } from "#blokkli/plugins";
 import ClipboardList from "./List/index.vue";
-import { falsy, generateUUID, getFieldKey } from "#blokkli/helpers";
+import { generateUUID, getFieldKey } from "#blokkli/helpers";
 import { Icon } from "#blokkli/components";
 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";
 const { settings, logger } = defineBlokkliFeature({
   id: "clipboard",
   label: "Clipboard",
@@ -96,8 +108,36 @@ const { settings, logger } = defineBlokkliFeature({
   },
   screenshot: "feature-clipboard.jpg"
 });
-const { selection, $t, adapter, dom, state, ui, types } = useBlokkli();
+const { selection, $t, adapter, dom, state, ui, types, keyboard } = useBlokkli();
 const plugin = ref(null);
+const selectionClipboard = ref([]);
+const itemDropdownItems = computed(() => {
+  return [
+    {
+      id: "copy",
+      label: $t("copy", "Copy"),
+      icon: "copy",
+      description: $t("clipboardCopyShortcutHelp", "Copy selected blocks")
+    },
+    {
+      id: "paste",
+      label: $t("paste", "Paste"),
+      enabled: !!selectionClipboard.value.length,
+      icon: "clipboard",
+      description: $t(
+        "clipboardPasteDescription",
+        "Paste blocks from clipboard"
+      )
+    }
+  ];
+});
+function onSelectDropdownItem(item) {
+  if (item.id === "copy") {
+    copyCurrentSelectionToClipboard();
+  } else if (item.id === "paste" && selectionClipboard.value.length) {
+    handleSelectionPaste(selectionClipboard.value);
+  }
+}
 const ALLOWED_HTML_ATTRIBUTES = ["href"];
 const _MOCK = [
   {
@@ -230,11 +270,21 @@ const showClipboardSidebar = () => {
     plugin?.value?.showSidebar();
   }
 };
+function emitPasteError(message) {
+  const prefix = $t("clipboardPasteError", "Failed to paste:");
+  emitMessage(`${prefix} ${message}`, "error");
+}
 const handleSelectionPaste = (pastedUuids) => {
   if (!adapter.pasteExistingBlocks) {
     return;
   }
   if (selection.uuids.value.length !== 1) {
+    emitPasteError(
+      $t(
+        "clipboardPasteErrorOneField",
+        "Pasting is only possible into one field at a time."
+      )
+    );
     return;
   }
   if (!pastedUuids.length) {
@@ -244,36 +294,114 @@ const handleSelectionPaste = (pastedUuids) => {
   if (!block) {
     return;
   }
-  const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
-  if (!field) {
-    return;
+  let targetField = null;
+  let targetFieldConfig = null;
+  let targetFieldKey = null;
+  let preceedingUuid = void 0;
+  if (!keyboard.isPressingShift.value) {
+    const pastedBundles = pastedUuids.map((uuid) => dom.findBlock(uuid)?.itemBundle).filter((bundle) => !!bundle);
+    if (pastedBundles.length) {
+      const nestedFields = types.fieldConfig.forEntityTypeAndBundle(
+        block.entityType,
+        block.itemBundle
+      );
+      for (const fieldConfig of nestedFields) {
+        const allowedPastedBundles = pastedBundles.filter(
+          (bundle) => fieldConfig.allowedBundles.includes(bundle)
+        );
+        if (allowedPastedBundles.length > 0) {
+          const nestedFieldKey = getFieldKey(block.uuid, fieldConfig.name);
+          const currentCount = state.getFieldBlockCount(nestedFieldKey);
+          if (fieldConfig.cardinality === -1 || currentCount + allowedPastedBundles.length <= fieldConfig.cardinality) {
+            targetField = {
+              entityType: block.entityType,
+              entityUuid: block.uuid,
+              name: fieldConfig.name
+            };
+            targetFieldConfig = fieldConfig;
+            targetFieldKey = nestedFieldKey;
+            preceedingUuid = void 0;
+            break;
+          }
+        }
+      }
+    }
   }
-  const fieldConfig = types.getFieldConfig(
-    field.entityType,
-    block.hostBundle,
-    field.name
-  );
-  if (!fieldConfig) {
-    return;
+  if (!targetField || !targetFieldConfig || !targetFieldKey) {
+    const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
+    if (!field) {
+      return;
+    }
+    const fieldConfig = types.getFieldConfig(
+      field.entityType,
+      block.hostBundle,
+      field.name
+    );
+    if (!fieldConfig) {
+      return;
+    }
+    targetField = {
+      entityType: field.entityType,
+      entityUuid: field.entityUuid,
+      name: field.name
+    };
+    targetFieldConfig = fieldConfig;
+    targetFieldKey = getFieldKey(field.entityUuid, field.name);
+    preceedingUuid = selection.uuids.value[0];
+  }
+  const pastedBlocks = [];
+  const notAllowedBundles = [];
+  for (let i = 0; i < pastedUuids.length; i++) {
+    const uuid = pastedUuids[i];
+    if (!uuid) {
+      continue;
+    }
+    const block2 = dom.findBlock(uuid);
+    if (!block2) {
+      continue;
+    }
+    const isAllowed = targetFieldConfig.allowedBundles.includes(
+      block2.itemBundle
+    );
+    if (!isAllowed) {
+      notAllowedBundles.push(block2.itemBundle);
+      continue;
+    }
+    pastedBlocks.push(block2);
   }
-  const fieldKey = getFieldKey(field.entityUuid, field.name);
-  const pastedBlocks = pastedUuids.map((uuid) => dom.findBlock(uuid)).filter(falsy).filter((block2) => fieldConfig.allowedBundles.includes(block2.itemBundle));
   if (!pastedBlocks.length) {
+    const blockTypes = notAllowedBundles.map((bundle) => {
+      return types.getBlockBundleDefinition(bundle)?.label ?? bundle;
+    });
+    const message = blockTypes.length === 1 ? $t(
+      "clipboardPasteErrorAllowedBundlesSingle",
+      'Block type "@types" is not allowed here.'
+    ) : $t(
+      "clipboardPasteErrorAllowedBundlesMultiple",
+      "Block types (@types) are not allowed here."
+    );
+    emitPasteError(message.replace("@types", blockTypes.join(", ")));
     return;
   }
-  const count = state.getFieldBlockCount(fieldKey);
-  if (fieldConfig.cardinality !== -1 && count + pastedBlocks.length > fieldConfig.cardinality) {
+  const count = state.getFieldBlockCount(targetFieldKey);
+  if (targetFieldConfig.cardinality !== -1 && count + pastedBlocks.length > targetFieldConfig.cardinality) {
+    emitPasteError(
+      $t(
+        "clipboardPasteErrorCardinality",
+        "This field only allows up to @count blocks."
+      ).replace("@count", targetFieldConfig.cardinality.toString())
+    );
     return;
   }
   state.mutateWithLoadingState(
     () => adapter.pasteExistingBlocks({
       uuids: pastedBlocks.map((v) => v.uuid),
       host: {
-        type: field.entityType,
-        uuid: field.entityUuid,
-        fieldName: field.name
+        type: targetField.entityType,
+        uuid: targetField.entityUuid,
+        fieldName: targetField.name
       },
-      preceedingUuid: selection.uuids.value[0]
+      preceedingUuid
     })
   );
 };
@@ -371,16 +499,21 @@ function setClipboard(text) {
   } catch (_e) {
   }
 }
-onBlokkliEvent("keyPressed", (e) => {
+function copyCurrentSelectionToClipboard() {
   if (!selection.blocks.value.length) {
-    return;
-  }
-  if (e.code !== "c" || !e.meta) {
+    selectionClipboard.value = [];
     return;
   }
   setClipboard(
     JSON.stringify({ type: "selection", uuids: selection.uuids.value })
   );
+  selectionClipboard.value = selection.uuids.value;
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code !== "c" || !e.meta) {
+    return;
+  }
+  copyCurrentSelectionToClipboard();
 });
 defineShortcut([
   {

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

@@ -1,6 +1,5 @@
 <template>
-  <div v-if="shouldRender" class="bk-command-palette-results-group">
-    <h2>{{ label }}</h2>
+  <div v-if="shouldRender" class="bk-command-palette-results-list">
     <div>
       <button
         v-for="item in mapped"
@@ -18,21 +17,22 @@
           <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>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "#imports";
+import { computed, useBlokkli } from "#imports";
 import { Icon, ItemIcon, Highlight } from "#blokkli/components";
 const props = defineProps({
-  label: { type: String, required: true },
   commands: { type: Array, required: true },
   visibleIds: { type: null, required: true },
   focusedId: { type: String, required: true }
 });
 defineEmits(["close", "focus", "select"]);
+const { $t } = useBlokkli();
 const mapped = computed(() => {
   return props.commands.map((v) => {
     const found = props.visibleIds?.find((w) => w.id === v._id);
@@ -47,5 +47,17 @@ const mapped = computed(() => {
     return indexA - indexB;
   });
 });
+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");
+};
 const shouldRender = computed(() => mapped.value.some((v) => v.visible));
 </script>

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

@@ -1,6 +1,5 @@
 import type { Command } from '#blokkli/types';
 type __VLS_Props = {
-    label: string;
     commands: Array<Command & {
         _id: number;
     }>;