@blokkli/editor 2.0.0-alpha.7 → 2.0.0-alpha.9

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "blokkli",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.9",
   "compatibility": {
     "nuxt": "^3.15.0"
   },

package/dist/module.mjs

@@ -13,7 +13,7 @@ import { BK_VISIBLE_LANGUAGES, BK_HIDDEN_GLOBALLY } from '../dist/runtime/helper
 import fs from 'node:fs';
 import { defu, createDefu } from 'defu';
 
-const version = "2.0.0-alpha.7";
+const version = "2.0.0-alpha.9";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {

package/dist/runtime/components/BlokkliField.vue

@@ -152,11 +152,12 @@ function filterVisible(item) {
 const filteredList = computed(() => {
   if (mutatedFields && !isInReusable && editContext && fieldKey.value && (isPreview?.value || isEditing)) {
     return ((mutatedFields[fieldKey.value] || {}).list || []).map((v) => {
+      const mutatedOptions = editContext.mutatedOptions[v.uuid] || {};
       return {
         ...v,
         options: {
-          ...v.options
-          // ...mutatedOptions,
+          ...v.options,
+          ...mutatedOptions
         }
       };
     });

package/dist/runtime/components/BlokkliItem.vue

@@ -12,7 +12,7 @@
     :is="component"
     v-else-if="component"
     v-bind="props"
-    :data-bk-in-proxy="fieldUsesProxy || void 0"
+    :data-bk-in-proxy="fieldUsesProxy || (isEditing ? 'false' : void 0)"
   />
   <div v-else-if="isEditing">Block not implemented</div>
 </template>
@@ -23,9 +23,7 @@ import {
   provide,
   useRuntimeConfig,
   inject,
-  defineAsyncComponent,
-  getCurrentInstance,
-  onMounted
+  defineAsyncComponent
 } from "#imports";
 import { getComponent } from "#blokkli/helpers/imports";
 import {
@@ -47,7 +45,6 @@ const componentProps = defineProps({
   parentType: { type: String, required: false, default: "" },
   isEditing: { type: Boolean, required: false, default: false }
 });
-const instance = componentProps.isEditing ? getCurrentInstance() : null;
 const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false);
 const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
 const isGlobalProxyMode = inject(

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

@@ -38,7 +38,7 @@ function getInteractedElement(e) {
     if (!(el instanceof HTMLElement)) {
       continue;
     }
-    if (el.dataset.blokkliEditableField) {
+    if (el.dataset.blokkliEditableField && !el.closest('[data-bk-in-proxy="true"]')) {
       editableFieldName = el.dataset.blokkliEditableField;
     }
     if (el instanceof HTMLTableCellElement) {

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

@@ -180,7 +180,35 @@ const artboard = getArtboard();
 watch(options, function(newOptions) {
   artboard.setOptions(newOptions);
 });
-onBlokkliEvent("animationFrame:before", (time) => {
+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) {

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

@@ -30,7 +30,8 @@ const { adapter } = defineBlokkliFeature({
     "assistantGetResults",
     "assistantAddBlockFromResult"
   ],
-  screenshot: "feature-assistant.jpg"
+  screenshot: "feature-assistant.jpg",
+  dependencies: ["add-list"]
 });
 const { state, $t } = useBlokkli();
 const placedAction = ref(null);

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

@@ -39,7 +39,8 @@ const { adapter } = defineBlokkliFeature({
   icon: "fragment",
   label: "Fragments",
   description: "Provides way to add content fragments defined by the frontend.",
-  requiredAdapterMethods: ["fragmentsAddBlock"]
+  requiredAdapterMethods: ["fragmentsAddBlock"],
+  dependencies: ["add-list"]
 });
 const { state, $t, types, selection, dom } = useBlokkli();
 const isEnabled = computed(() => {

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

@@ -79,7 +79,8 @@ const { adapter } = defineBlokkliFeature({
   icon: "reusable",
   label: "Library",
   description: "Implements support for a block library to manage reusable blocks.",
-  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"]
+  requiredAdapterMethods: ["makeBlockReusable", "detachReusableBlock"],
+  dependencies: ["add-list"]
 });
 const { selection, state, types, $t, eventBus, definitions } = useBlokkli();
 const showReusableDialog = ref(false);

package/dist/runtime/composables/defineBlokkli.js

@@ -5,7 +5,8 @@ import {
   INJECT_FIELD_LIST_TYPE,
   INJECT_REUSABLE_OPTIONS,
   INJECT_PROVIDER_BLOCKS,
-  INJECT_PROVIDER_CONTEXT
+  INJECT_PROVIDER_CONTEXT,
+  INJECT_FIELD_USES_PROXY
 } from "../helpers/symbols.js";
 import { computed, inject } from "#imports";
 import { getRuntimeOptionValue } from "#blokkli/helpers/runtimeHelpers";
@@ -88,7 +89,10 @@ export function defineBlokkli(arg) {
     });
   }
   if (editContext?.useBlockRegistration && editContext.dom && bundle !== "from_library" && bundle !== "blokkli_fragment") {
-    editContext.useBlockRegistration(editContext.dom, uuid);
+    const isProxyMode = inject(INJECT_FIELD_USES_PROXY, false);
+    if (!isProxyMode) {
+      editContext.useBlockRegistration(editContext.dom, uuid);
+    }
   }
   return {
     uuid,