@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

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,19 +1,19 @@
 <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"
+        class="bk bk-dragging-overlay-label"
         :style="{ backgroundColor: currentActiveColor }"
       >
         <Icon name="cursor-move" />
         <p v-html="currentActiveLabel" />
       </div>
-    </Transition>
+    </BlokkliTransition>
     <div
       v-for="(rect, i) in rects"
       :key="i"
@@ -66,10 +66,17 @@ 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();
+const {
+  dom,
+  ui,
+  animation,
+  theme,
+  types,
+  element: elementProvider
+} = useBlokkli();
 const props = defineProps({
   items: { type: Array, required: true },
   x: { type: Number, required: true },
@@ -201,7 +208,11 @@ onMounted(() => {
     if (!itemElement) {
       return;
     }
-    const element = itemElement.querySelector(".bk-drop-element") || itemElement;
+    const element = elementProvider.query(
+      itemElement,
+      ".bk-drop-element",
+      "Find drop element for drag item."
+    ) || itemElement;
     return {
       rect: element.getBoundingClientRect(),
       element,
@@ -259,9 +270,6 @@ onMounted(() => {
     let bundle;
     let label = "";
     if (!markup) {
-      if (item.item.itemType === "existing" && item.item.editTitle) {
-        label = item.item.editTitle;
-      }
       if ("itemBundle" in item.item) {
         bundle = item.item.itemBundle;
         if (bundle) {

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;
@@ -8,6 +8,7 @@ varying vec3 v_color;
 uniform float u_scale;
 uniform float u_dpi;
 uniform vec2 u_resolution;
+uniform float u_active_hover_nesting_level;
 
 float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
   return length(max(abs(CenterPosition) - Size + Radius, 0.0)) - Radius;
@@ -74,7 +75,12 @@ void main() {
       : alphaInner * 0.2;
 
   if (v_is_hover_area >= 1.0) {
-    adjustedAlphaFill *= 0.5;
+    // If nesting level is 0, don't render the fill (border only)
+    if (u_active_hover_nesting_level < 0.5) {
+      adjustedAlphaFill = 0.0;
+    } else {
+      adjustedAlphaFill *= 0.5;
+    }
   }
 
   if (alphaBorder > 0.0) {