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

package/dist/runtime/components/Edit/Features/Diff/DiffView/index.vue

@@ -1,197 +1,20 @@
 <template>
-  <div class="bk bk-diff-view bk-scrollbar-light">
-    <table class="bk-diff-table">
-      <thead>
-        <tr>
-          <th>{{ $t("diffTableChange", "Change") }}</th>
-          <th>{{ $t("diffTableBundle", "Type") }}</th>
-          <th>{{ $t("diffTableProperty", "Property") }}</th>
-          <th>{{ $t("diffTableDiff", "Diff") }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <template v-for="item in diffItems" :key="item.uuid">
-          <tr>
-            <td
-              :rowspan="Math.max(1, item.props.length)"
-              class="bk-diff-status"
-            >
-              <div
-                v-if="item.status === 'added'"
-                class="bk-diff-status-label bk-is-added"
-              >
-                {{ $t("diffStatusAdded", "Added") }}
-              </div>
-              <div
-                v-else-if="item.status === 'removed'"
-                class="bk-diff-status-label bk-is-removed"
-              >
-                {{ $t("diffStatusDeleted", "Deleted") }}
-              </div>
-              <div v-else class="bk-diff-status-label">
-                {{ $t("diffStatusEdited", "Edited") }}
-              </div>
-            </td>
-            <td
-              :rowspan="Math.max(1, item.props.length)"
-              class="bk-diff-bundle"
-            >
-              <button
-                class="bk-blokkli-item-label"
-                :disabled="item.status === 'removed'"
-                @click="scrollToBlock(item.uuid)"
-              >
-                <div class="bk-blokkli-item-label-icon">
-                  <ItemIcon :bundle="item.bundle" />
-                </div>
-                <span>{{ getLabel(item.bundle) }}</span>
-              </button>
-            </td>
-
-            <template v-if="item.props.length > 0">
-              <td>
-                <strong>{{ item.props[0].key }}</strong>
-              </td>
-              <td class="bk-diff-monospace">
-                <div class="bk-diff-prop-diff" v-html="item.props[0].diff" />
-              </td>
-            </template>
-            <template v-else>
-              <td />
-              <td />
-            </template>
-          </tr>
-          <tr
-            v-for="prop in item.props.slice(1)"
-            :key="prop.key"
-            class="bk-diff-prop-row"
-          >
-            <td>
-              <strong>{{ prop.key }}</strong>
-            </td>
-            <td class="bk-diff-monospace">
-              <div class="bk-diff-prop-diff" v-html="prop.diff" />
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
+  <div class="bk bk-diff-sidebar-pane">
+    <DiffViewerState
+      v-if="stateBefore"
+      :state-before
+      :state-after
+      scheme="orange"
+    />
   </div>
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { ItemIcon } from "#blokkli/components";
-import diff from "html-diff-ts";
-const { types, $t, adapter, state, eventBus, dom, definitions } = useBlokkli();
-function getProps(bundle, props) {
-  const definition = definitions.getDefaultDefinition(bundle);
-  if (definition?.editor?.mapDiffProps) {
-    return definition.editor.mapDiffProps(props);
-  }
-  if (typeof props === "object") {
-    return Object.entries(props).reduce(
-      (acc, [key, value]) => {
-        if (typeof value === "string" || typeof value === "number") {
-          acc[key] = value.toString();
-        } else if (typeof value === "object") {
-          try {
-            const json = JSON.stringify(value, null, 2);
-            acc[key] = `<pre>${json}</pre>`;
-          } catch {
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  }
-  return {};
-}
-const stateBefore = await adapter.loadStateAtIndex(-1).then(
-  (v) => adapter.mapState(v)
-);
-function buildDiffItems(fields) {
-  const items = (fields || []).flatMap((v) => v.list);
-  return items;
-}
-const itemsBefore = computed(
-  () => buildDiffItems(stateBefore.mutatedState?.fields)
-);
-const itemsAfter = computed(() => buildDiffItems(state.mutatedFields.value));
-const diffItems = computed(() => {
-  const diffMap = /* @__PURE__ */ new Map();
-  itemsBefore.value.forEach((beforeItem) => {
-    const afterItem = itemsAfter.value.find(
-      (item) => item.uuid === beforeItem.uuid
-    );
-    const beforeProps = getProps(beforeItem.bundle, beforeItem.props);
-    if (!afterItem) {
-      diffMap.set(beforeItem.uuid, {
-        uuid: beforeItem.uuid,
-        bundle: beforeItem.bundle,
-        status: "removed",
-        props: Object.entries(beforeProps).map(([key, value]) => ({
-          key,
-          value,
-          diff: diff(value, "")
-        }))
-      });
-    } else {
-      const afterProps = getProps(afterItem.bundle, afterItem.props);
-      const changedProps = [];
-      Object.entries(beforeProps).forEach(([key, beforeValue]) => {
-        const afterValue = afterProps[key];
-        if (beforeValue !== afterValue) {
-          changedProps.push({
-            key,
-            diff: diff(beforeValue, afterValue)
-          });
-        }
-      });
-      Object.keys(afterProps).forEach((key) => {
-        if (!(key in beforeProps)) {
-          changedProps.push({
-            key,
-            diff: diff("", afterProps[key])
-          });
-        }
-      });
-      if (changedProps.length > 0) {
-        diffMap.set(beforeItem.uuid, {
-          uuid: beforeItem.uuid,
-          bundle: beforeItem.bundle,
-          status: "changed",
-          props: changedProps
-        });
-      }
-    }
-  });
-  itemsAfter.value.forEach((afterItem) => {
-    if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
-      const afterProps = getProps(afterItem.bundle, afterItem.props);
-      diffMap.set(afterItem.uuid, {
-        uuid: afterItem.uuid,
-        bundle: afterItem.bundle,
-        status: "added",
-        props: Object.entries(afterProps).map(([key, value]) => ({
-          key,
-          diff: diff("", value)
-        }))
-      });
-    }
-  });
-  return Array.from(diffMap.values()).sort((a, b) => {
-    const aY = dom.getBlockRect(a.uuid)?.y || 0;
-    const bY = dom.getBlockRect(b.uuid)?.y || 0;
-    return aY - bY;
-  });
+import { useBlokkli, useAsyncData } from "#imports";
+import { DiffViewerState } from "#blokkli/components";
+const { adapter, state } = useBlokkli();
+const { data: stateBefore } = await useAsyncData("stateBefore", () => {
+  return adapter.loadStateAtIndex(-1).then((v) => adapter.mapState(v));
 });
-function getLabel(bundle) {
-  return types.getBlockBundleDefinition(bundle)?.label || bundle;
-}
-function scrollToBlock(uuid) {
-  eventBus.emit("scrollIntoView", { uuid, center: true });
-  eventBus.emit("select", uuid);
-}
+const stateAfter = state.getMappedState();
 </script>

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

@@ -9,7 +9,7 @@
     weight="-400"
     beta
   >
-    <DiffView />
+    <DiffView :key="state.currentMutationIndex.value" />
   </PluginSidebar>
 </template>
 
@@ -25,7 +25,7 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["loadStateAtIndex"],
   beta: true
 });
-const { $t } = useBlokkli();
+const { $t, state } = useBlokkli();
 </script>
 
 <script>

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

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="bk-dragging-overlay"
+    class="bk-vars bk-dragging-overlay"
     :style="style"
     :class="[{ 'bk-is-touch': isTouch }, { 'bk-is-active': !!activeLabel }]"
   >
-    <Transition name="bk-drag-item">
+    <BlokkliTransition name="drag-item">
       <div
         v-show="activeLabel"
         class="bk-dragging-overlay-label"
@@ -13,7 +13,7 @@
         <Icon name="cursor-move" />
         <p v-html="currentActiveLabel" />
       </div>
-    </Transition>
+    </BlokkliTransition>
     <div
       v-for="(rect, i) in rects"
       :key="i"
@@ -66,7 +66,7 @@ import {
   lerp,
   falsy
 } from "#blokkli/helpers";
-import { Icon, ItemIcon } from "#blokkli/components";
+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();

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/fragment.glsl

@@ -1,4 +1,4 @@
-precision mediump float;
+precision highp float;
 
 varying float v_intersecting;
 varying float v_is_hover_area;

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

@@ -23,6 +23,12 @@ import {
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import {
+  determineCanAddChildren,
+  getChildrenOrientation,
+  getGapSize,
+  MIN_GAP
+} from "#blokkli/helpers/dropTargets";
 const props = defineProps({
   items: { type: Array, required: true },
   box: { type: Object, required: true },
@@ -30,7 +36,6 @@ const props = defineProps({
   mouseY: { type: Number, required: true },
   isTouch: { type: Boolean, required: true }
 });
-const MIN_GAP = 20;
 var RectRenderType = /* @__PURE__ */ ((RectRenderType2) => {
   RectRenderType2[RectRenderType2["DROP_AREA"] = 0] = "DROP_AREA";
   RectRenderType2[RectRenderType2["FIELD_1"] = 1] = "FIELD_1";
@@ -139,26 +144,7 @@ const emitDrop = async () => {
     }
   }
   eventBus.emit("dragging:end");
-  eventBus.emit("item:dropped");
 };
-function getChildrenOrientation(element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("flex")) {
-    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  if (computedStyle.display.includes("grid")) {
-    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  return "vertical";
-}
 const draggingBundles = computed(
   () => props.items.flatMap((item) => {
     const bundles = [];
@@ -178,20 +164,6 @@ const selectionUuids = computed(
     }
   }).filter(falsy)
 );
-function getGapSize(orientation, element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
-    const gap = orientation === "vertical" ? computedStyle.columnGap || computedStyle.gridColumnGap : computedStyle.rowGap || computedStyle.gridRowGap;
-    if (gap) {
-      const gapParts = gap.split(" ");
-      const gapValue = gapParts[0];
-      if (gapValue?.endsWith("px")) {
-        return Number.parseFloat(gapValue);
-      }
-    }
-  }
-  return MIN_GAP;
-}
 const fieldChildCache = {};
 const buildChildId = (field, preceedingUuid, type, uuid) => {
   return `${field.key}:${preceedingUuid || ""}:${type || ""}:${uuid || ""}`;
@@ -300,25 +272,6 @@ function getInsertText(field) {
   const bundleLabel = getBundleLabel(field);
   return `${bundleLabel} \xBB <strong>${field.label}</strong>`;
 }
-const determineCanAddChildren = (field, children) => {
-  if (field.cardinality !== -1) {
-    const count = state.getFieldBlockCount(field.key);
-    const childrenThatAreSelection = children.filter((child) => {
-      const uuid = child.dataset.uuid;
-      if (!uuid) {
-        return false;
-      }
-      return selectionUuids.value.includes(uuid);
-    }).length;
-    const countAfter = count - childrenThatAreSelection + props.items.length;
-    if (countAfter > field.cardinality) {
-      return false;
-    }
-  }
-  return !draggingBundles.value.length || draggingBundles.value.every(
-    (bundle) => field.allowedBundles.includes(bundle)
-  );
-};
 const buildEmptyChild = (field, children, orientation, fieldWidth, fieldHeight) => {
   if (children.length === 0) {
     const id = buildChildId(field, null, "empty");
@@ -356,7 +309,15 @@ const buildFieldRect = (key) => {
     return;
   }
   const childElements = [...field.element.children];
-  const canAddChildren = determineCanAddChildren(field, childElements);
+  const currentCount = state.getFieldBlockCount(field.key);
+  const canAddChildren = determineCanAddChildren(
+    field,
+    childElements,
+    selectionUuids.value,
+    currentCount,
+    props.items.length,
+    draggingBundles.value
+  );
   const orientation = field.dropAlignment || getChildrenOrientation(field.element);
   const rect = dom.getFieldRect(field.key);
   if (!rect) {
@@ -406,10 +367,11 @@ const buildDropAreaRect = (area) => {
   cachedDropAreaRects[area.id] = dropAreaRect;
   return dropAreaRect;
 };
+const alphaBase = gl ? 0.7 : 0.3;
 const colorTeal = rgbaToString(theme.teal.value.normal);
-const colorTealAlpha = rgbaToString(theme.teal.value.normal, 0.7);
+const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
 const colorAccent = rgbaToString(theme.accent.value[800]);
-const colorAccentAlpha = rgbaToString(theme.accent.value[800], 0.7);
+const colorAccentAlpha = rgbaToString(theme.accent.value[800], alphaBase);
 function getRectType(field) {
   if (field.nestingLevel >= 3) {
     return 4 /* FIELD_4 */;
@@ -522,21 +484,23 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new DropTargetRectangleBufferCollector(gl);
-collector.addRectangle(
-  {
-    id: "active-hover-rect",
-    type: "active-area",
-    label: "Field Area",
-    color: "red",
-    colorAlpha: "red",
-    x: 0,
-    y: 0,
-    width: ui.artboardSize.value.width,
-    height: ui.artboardSize.value.height
-  },
-  5 /* ACTIVE_AREA */,
-  false
-);
+if (gl) {
+  collector.addRectangle(
+    {
+      id: "active-hover-rect",
+      type: "active-area",
+      label: "Field Area",
+      color: "red",
+      colorAlpha: "red",
+      x: 0,
+      y: 0,
+      width: ui.artboardSize.value.width,
+      height: ui.artboardSize.value.height
+    },
+    5 /* ACTIVE_AREA */,
+    false
+  );
+}
 const fieldColors = computed(() => {
   return {
     "0": theme.accent.value[900],

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/vertex.glsl

@@ -1,4 +1,4 @@
-precision mediump float;
+precision highp float;
 
 attribute vec2 a_position;
 attribute vec4 a_quad;

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

@@ -32,6 +32,7 @@ import {
   nextTick
 } from "#imports";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { renderCycle } from "#blokkli/helpers/renderCycle";
 const { adapter } = defineBlokkliFeature({
   icon: "drag",
   id: "dragging-overlay",
@@ -126,13 +127,15 @@ const onDropExisting = async (items, host, afterUuid) => {
   }
 };
 const onDropReusable = async (item, host, afterUuid) => {
-  await state.mutateWithLoadingState(
-    () => adapter.addLibraryItem({
-      libraryItemUuid: item.libraryItemUuid,
-      host,
-      afterUuid
-    })
-  );
+  if (adapter.addLibraryItem) {
+    await state.mutateWithLoadingState(
+      () => adapter.addLibraryItem({
+        libraryItemUuid: item.libraryItemUuid,
+        host,
+        afterUuid
+      })
+    );
+  }
 };
 const onDropClipboardItem = async (item, host, afterUuid) => {
   eventBus.emit("drop:clipboardItem", {
@@ -162,24 +165,28 @@ const onDropMediaLibraryItem = async (items, host, afterUuid) => {
   }
 };
 const onDropSearchContentItem = async (item, host, afterUuid) => {
-  await state.mutateWithLoadingState(
-    () => adapter.addContentSearchItem({
-      item: item.searchItem,
-      host,
-      bundle: item.itemBundle,
-      afterUuid
-    })
-  );
+  if (adapter.addContentSearchItem) {
+    await state.mutateWithLoadingState(
+      () => adapter.addContentSearchItem({
+        item: item.searchItem,
+        host,
+        bundle: item.itemBundle,
+        afterUuid
+      })
+    );
+  }
 };
 const onDropAction = (action, host, field, afterUuid) => {
   eventBus.emit("action:placed", {
+    id: action.actionType,
     preceedingUuid: afterUuid,
-    action,
     host,
     field
   });
 };
+let allUuidsBefore = [];
 const onDrop = (e) => {
+  allUuidsBefore = state.getAllUuids();
   mouseX.value = 0;
   mouseY.value = 0;
   nextTick(async () => {
@@ -203,40 +210,46 @@ const onDrop = (e) => {
     }
     eventBus.emit("dragging:end");
     eventBus.emit("item:dropped");
-    const newUuid = state.mutations.value[state.mutations.value.length - 1]?.plugin?.affectedItemUuid;
-    if (!newUuid) {
-      return;
-    }
-    const newBlock = dom.findBlock(newUuid);
-    if (!newBlock) {
-      return;
-    }
-    const allSelected = [...selection.uuids.value, newBlock.uuid];
-    eventBus.emit("select", allSelected);
-    if (typed.itemType !== "new") {
-      return;
-    }
-    const definition = definitions.getBlockDefinition(
-      newBlock.itemBundle,
-      newBlock.hostFieldListType
-    );
-    if (!definition?.editor?.addBehaviour?.startsWith("editable:")) {
-      return;
-    }
-    const editableField = definition.editor.addBehaviour.split(":")[1];
-    if (!editableField) {
-      return;
-    }
-    const editableFieldElement = newBlock.element().querySelector(`[data-blokkli-editable-field="${editableField}"]`);
-    if (!(editableFieldElement instanceof HTMLElement)) {
-      return;
-    }
-    eventBus.emit("editable:focus", {
-      fieldName: editableField,
-      uuid: newUuid
-    });
   });
 };
+onBlokkliEvent("state:reloaded", async function() {
+  if (!allUuidsBefore.length) {
+    return;
+  }
+  const allUuidsAfter = state.getAllUuids();
+  const newUuid = allUuidsAfter.find((uuid) => !allUuidsBefore.includes(uuid));
+  allUuidsBefore = [];
+  if (!newUuid) {
+    return;
+  }
+  eventBus.emit("select", newUuid);
+  await renderCycle();
+  const newBlock = dom.findBlock(newUuid);
+  if (!newBlock) {
+    return;
+  }
+  const allSelected = [...selection.uuids.value, newBlock.uuid];
+  eventBus.emit("select", allSelected);
+  const definition = definitions.getBlockDefinition(
+    newBlock.itemBundle,
+    newBlock.hostFieldListType
+  );
+  if (!definition?.editor?.addBehaviour?.startsWith("editable:")) {
+    return;
+  }
+  const editableField = definition.editor.addBehaviour.split(":")[1];
+  if (!editableField) {
+    return;
+  }
+  const editableFieldElement = newBlock.element().querySelector(`[data-blokkli-editable-field="${editableField}"]`);
+  if (!(editableFieldElement instanceof HTMLElement)) {
+    return;
+  }
+  eventBus.emit("editable:focus", {
+    fieldName: editableField,
+    uuid: newUuid
+  });
+});
 onBlokkliEvent("dragging:drop", onDrop);
 function loop() {
   if (!isVisible.value) {
@@ -295,6 +308,7 @@ onBlokkliEvent("keyPressed", (e) => {
   }
 });
 onBlokkliEvent("block:append", (e) => {
+  allUuidsBefore = state.getAllUuids();
   onDropNew(e.bundle, e.host, e.afterUuid);
 });
 onUnmounted(() => {

package/dist/runtime/components/Edit/Features/EditForm/Frame/index.vue

@@ -6,15 +6,15 @@
     @touchmove.stop.capture.prevent
   >
     <iframe ref="iframe" allowtransparency :src="url" @load="onIFrameLoad" />
-    <Transition name="bk-loading">
+    <BlokkliTransition name="loading">
       <Loading v-if="!isLoaded" />
-    </Transition>
+    </BlokkliTransition>
   </div>
 </template>
 
 <script setup>
 import { ref, useBlokkli, onUnmounted, onMounted } from "#imports";
-import { Loading } from "#blokkli/components";
+import { Loading, BlokkliTransition } from "#blokkli/components";
 const { eventBus } = useBlokkli();
 const iframe = ref(null);
 const isLoaded = ref(false);

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <FormOverlay
         v-if="form"
         id="edit-form"
@@ -15,13 +15,13 @@
           @close="onClose"
         />
       </FormOverlay>
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
-import { FormOverlay } from "#blokkli/components";
+import { FormOverlay, BlokkliTransition } from "#blokkli/components";
 import FormFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { adapter } = defineBlokkliFeature({

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

@@ -1,8 +1,8 @@
 <template>
   <Teleport to="body">
-    <Transition :name="hasTransition ? 'bk-editable' : void 0">
+    <BlokkliTransition name="editable" :enabled="hasTransition">
       <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -15,6 +15,7 @@ import {
   defineBlokkliFeature
 } from "#imports";
 import Overlay from "./Overlay/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { falsy } from "#blokkli/helpers";
@@ -50,6 +51,9 @@ const buildEditable = (fieldName, uuid) => {
   }
   const hostEntityType = "type" in host ? host.type : runtimeConfig.itemEntityType;
   const hostEntityBundle = "bundle" in host ? host.bundle : host.itemBundle;
+  if (hostEntityBundle === "from_library") {
+    return;
+  }
   const config = types.editableFieldConfig.forName(
     hostEntityType,
     hostEntityBundle,