@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -3,15 +3,15 @@
     <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>
+          <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 class="bk-diff-row">
+          <tr>
             <td
               :rowspan="Math.max(1, item.props.length)"
               class="bk-diff-status"
@@ -20,16 +20,16 @@
                 v-if="item.status === 'added'"
                 class="bk-diff-status-label bk-is-added"
               >
-                {{ $t('diffStatusAdded', 'Added') }}
+                {{ $t("diffStatusAdded", "Added") }}
               </div>
               <div
                 v-else-if="item.status === 'removed'"
                 class="bk-diff-status-label bk-is-removed"
               >
-                {{ $t('diffStatusDeleted', 'Deleted') }}
+                {{ $t("diffStatusDeleted", "Deleted") }}
               </div>
               <div v-else class="bk-diff-status-label">
-                {{ $t('diffStatusEdited', 'Edited') }}
+                {{ $t("diffStatusEdited", "Edited") }}
               </div>
             </td>
             <td
@@ -79,158 +79,119 @@
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, useBlokkli } from '#imports'
-import type { FieldListItem, MutatedField } from '#blokkli/types'
-import { ItemIcon } from '#blokkli/components'
-import { getDefaultDefinition } from '#blokkli-build/definitions'
-import diff from 'html-diff-ts'
-
-function getProps(bundle: string, props: any): Record<string, string> {
-  const definition = getDefaultDefinition(bundle)
-  // Use custom method that builds the diff props.
+<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)
+    return definition.editor.mapDiffProps(props);
   }
-
-  if (typeof props === 'object') {
-    return Object.entries(props).reduce<Record<string, string>>(
+  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') {
+        if (typeof value === "string" || typeof value === "number") {
+          acc[key] = value.toString();
+        } else if (typeof value === "object") {
           try {
-            // Fallback to a JSON representation of the data.
-            const json = JSON.stringify(value, null, 2)
-            acc[key] = `<pre>${json}</pre>`
+            const json = JSON.stringify(value, null, 2);
+            acc[key] = `<pre>${json}</pre>`;
           } catch {
-            // Noop.
           }
         }
-        return acc
+        return acc;
       },
-      {},
-    )
+      {}
+    );
   }
-
-  return {}
+  return {};
 }
-
-interface DiffItemProp {
-  key: string
-  diff?: string
-}
-
-interface DiffItem {
-  uuid: string
-  bundle: string
-  status: 'changed' | 'added' | 'removed'
-  props: DiffItemProp[]
+const stateBefore = await adapter.loadStateAtIndex(-1).then(
+  (v) => adapter.mapState(v)
+);
+function buildDiffItems(fields) {
+  const items = (fields || []).flatMap((v) => v.list);
+  return items;
 }
-
-const { types, $t, adapter, state, eventBus, dom } = useBlokkli()
-
-const stateBefore = await adapter.loadStateAtIndex!(-1).then((v: any) =>
-  adapter.mapState(v),
-)
-
-function buildDiffItems(fields?: MutatedField[]): FieldListItem[] {
-  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<DiffItem[]>(() => {
-  const diffMap = new Map<string, DiffItem>()
-
+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)
-
-    // Item has been removed.
+      (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',
+        status: "removed",
         props: Object.entries(beforeProps).map(([key, value]) => ({
           key,
           value,
-          diff: diff(value, ''),
-        })),
-      })
+          diff: diff(value, "")
+        }))
+      });
     } else {
-      // Item exists in both arrays.
-      const afterProps = getProps(afterItem.bundle, afterItem.props)
-      const changedProps: DiffItemProp[] = []
-
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
+      const changedProps = [];
       Object.entries(beforeProps).forEach(([key, beforeValue]) => {
-        const afterValue = afterProps[key]
+        const afterValue = afterProps[key];
         if (beforeValue !== afterValue) {
           changedProps.push({
             key,
-            diff: diff(beforeValue, afterValue),
-          })
+            diff: diff(beforeValue, afterValue)
+          });
         }
-      })
-
-      // Check for new properties inside afterProps.
+      });
       Object.keys(afterProps).forEach((key) => {
         if (!(key in beforeProps)) {
           changedProps.push({
             key,
-            diff: diff('', afterProps[key]),
-          })
+            diff: diff("", afterProps[key])
+          });
         }
-      })
-
-      // Only add the item if it has changes.
+      });
       if (changedProps.length > 0) {
         diffMap.set(beforeItem.uuid, {
           uuid: beforeItem.uuid,
           bundle: beforeItem.bundle,
-          status: 'changed',
-          props: changedProps,
-        })
+          status: "changed",
+          props: changedProps
+        });
       }
     }
-  })
-
-  // Process added items.
+  });
   itemsAfter.value.forEach((afterItem) => {
     if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
-      const afterProps = getProps(afterItem.bundle, afterItem.props)
+      const afterProps = getProps(afterItem.bundle, afterItem.props);
       diffMap.set(afterItem.uuid, {
         uuid: afterItem.uuid,
         bundle: afterItem.bundle,
-        status: 'added',
+        status: "added",
         props: Object.entries(afterProps).map(([key, value]) => ({
           key,
-          diff: diff('', value),
-        })),
-      })
+          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
-  })
-})
-
-function getLabel(bundle: string): string {
-  return types.getBlockBundleDefinition(bundle)?.label || bundle
+    const aY = dom.getBlockRect(a.uuid)?.y || 0;
+    const bY = dom.getBlockRect(b.uuid)?.y || 0;
+    return aY - bY;
+  });
+});
+function getLabel(bundle) {
+  return types.getBlockBundleDefinition(bundle)?.label || bundle;
 }
-
-function scrollToBlock(uuid: string) {
-  eventBus.emit('scrollIntoView', { uuid, center: true })
-  eventBus.emit('select', uuid)
+function scrollToBlock(uuid) {
+  eventBus.emit("scrollIntoView", { uuid, center: true });
+  eventBus.emit("select", uuid);
 }
 </script>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -3,8 +3,8 @@
     id="diff"
     :title="$t('diffSidebarTitle', 'Changes')"
     :tour-text="
-      $t('diffSidebarTourText', 'Displays all the changes made during editing.')
-    "
+  $t('diffSidebarTourText', 'Displays all the changes made during editing.')
+"
     icon="diff"
     weight="-400"
     beta
@@ -13,25 +13,23 @@
   </PluginSidebar>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, defineBlokkliFeature } from '#imports'
-import { PluginSidebar } from '#blokkli/plugins'
-import DiffView from './DiffView/index.vue'
-
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginSidebar } from "#blokkli/plugins";
+import DiffView from "./DiffView/index.vue";
 defineBlokkliFeature({
-  id: 'diff',
-  label: 'Diff',
-  icon: 'diff',
-  description: 'Displays a diff of all changes in the edit state.',
-  requiredAdapterMethods: ['loadStateAtIndex'],
-  beta: true,
-})
-
-const { $t } = useBlokkli()
+  id: "diff",
+  label: "Diff",
+  icon: "diff",
+  description: "Displays a diff of all changes in the edit state.",
+  requiredAdapterMethods: ["loadStateAtIndex"],
+  beta: true
+});
+const { $t } = useBlokkli();
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Diff',
-}
+  name: "Diff"
+};
 </script>

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

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;