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

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

@@ -21,20 +21,18 @@
       id="block-add-list"
       :title="$t('blockAddListTourTitle', 'Favorite blocks')"
       :text="
-        $t(
-          'blockAddListTourText',
-          'Right-click on a block to add or remove them from your favorites. Favorites are highlighted and always displayed at the top of the list.',
-        )
-      "
+  $t(
+    'blockAddListTourText',
+    'Right-click on a block to add or remove them from your favorites. Favorites are highlighted and always displayed at the top of the list.'
+  )
+"
       selector="#blokkli-add-list-blocks"
     />
   </Teleport>
   <Teleport
     v-if="
-      ui.addListOrientation.value === 'sidebar' &&
-      types.generallyAvailableBundles.length > 10 &&
-      shouldRender
-    "
+  ui.addListOrientation.value === 'sidebar' && types.generallyAvailableBundles.length > 10 && shouldRender
+"
     :key="renderKey"
     to="#blokkli-add-list-sidebar-before"
   >
@@ -51,47 +49,37 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   computed,
   useBlokkli,
   defineBlokkliFeature,
-  nextTick,
-} from '#imports'
-import { AddListItem } from '#blokkli/components'
-import type {
-  Command,
-  DraggableExistingBlock,
-  FieldConfig,
-} from '#blokkli/types'
-import { getDefaultDefinition } from '#blokkli-build/definitions'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import { PluginTourItem } from '#blokkli/plugins'
-import { getFieldKey, onlyUnique } from '#blokkli/helpers'
-
+  nextTick
+} from "#imports";
+import { AddListItem } from "#blokkli/components";
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { PluginTourItem } from "#blokkli/plugins";
+import { getFieldKey, onlyUnique } from "#blokkli/helpers";
 const { settings } = defineBlokkliFeature({
-  id: 'block-add-list',
-  label: 'Block Add List',
-  icon: 'plus',
-  description:
-    'Renders a list of block bundles that can be added to the current page.',
-  dependencies: ['add-list'],
-  screnshot: 'feature-block-add-list.jpg',
+  id: "block-add-list",
+  label: "Block Add List",
+  icon: "plus",
+  description: "Renders a list of block bundles that can be added to the current page.",
+  dependencies: ["add-list"],
+  screnshot: "feature-block-add-list.jpg",
   settings: {
     hideDisabledBlocks: {
-      type: 'checkbox',
+      type: "checkbox",
       label: "Hide blocks that can't be added",
       description: `Hides blocks from the "Add List" if they can't be added to anywhere.`,
-      group: 'appearance',
-      default: false,
-    },
-  },
-})
-
-const reservedBundles = ['from_library', 'blokkli_fragment']
-
+      group: "appearance",
+      default: false
+    }
+  }
+});
+const reservedBundles = ["from_library", "blokkli_fragment"];
 const {
   selection,
   storage,
@@ -103,370 +91,281 @@ const {
   $t,
   state,
   dom,
-} = useBlokkli()
-
-const shouldRender = computed(() => state.editMode.value === 'editing')
-
-const searchText = ref('')
-
-const itemEntityType = runtimeConfig.itemEntityType
-
-const favorites = storage.use<string[]>('blockFavorites', [])
-
+  definitions
+} = useBlokkli();
+const shouldRender = computed(() => state.editMode.value === "editing");
+const searchText = ref("");
+const itemEntityType = runtimeConfig.itemEntityType;
+const favorites = storage.use("blockFavorites", []);
 const activeField = computed(() => {
   if (selection.activeFieldKey.value) {
     const el = document.querySelector(
-      `[data-field-key="${selection.activeFieldKey.value}"]`,
-    )
+      `[data-field-key="${selection.activeFieldKey.value}"]`
+    );
     if (el && el instanceof HTMLElement) {
-      const label = el.dataset.fieldLabel
-      const name = el.dataset.fieldName
-      const isNested = el.dataset.fieldIsNested === 'true'
-      const hostEntityType = el.dataset.hostEntityType
-      const hostEntityUuid = el.dataset.hostEntityUuid
+      const label = el.dataset.fieldLabel;
+      const name = el.dataset.fieldName;
+      const isNested = el.dataset.fieldIsNested === "true";
+      const hostEntityType = el.dataset.hostEntityType;
+      const hostEntityUuid = el.dataset.hostEntityUuid;
       if (label && name && hostEntityType && hostEntityUuid) {
-        return { label, name, hostEntityType, hostEntityUuid, isNested }
+        return { label, name, hostEntityType, hostEntityUuid, isNested };
       }
     }
   }
-
-  return undefined
-})
-
-const getAllowedTypesForSelected = (p: DraggableExistingBlock): string[] => {
-  // If the selected bundle allows nested items, return the allowed bundles for it instead.
+  return void 0;
+});
+const getAllowedTypesForSelected = (p) => {
   if (types.itemBundlesWithNested.includes(p.itemBundle)) {
-    return types.fieldConfig
-      .forEntityTypeAndBundle(itemEntityType, p.itemBundle)
-      .flatMap((v) => v.allowedBundles)
-      .filter(Boolean) as string[]
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.itemBundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   }
-  // If the selected bundle is inside a nested item, return the allowed bundles of the parent bundle.
   if (p.hostType === itemEntityType) {
-    return types.fieldConfig
-      .forEntityTypeAndBundle(itemEntityType, p.hostBundle)
-      .flatMap((v) => v.allowedBundles)
-      .filter(Boolean) as string[]
+    return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.hostBundle).flatMap((v) => v.allowedBundles).filter(Boolean);
   } else {
-    return (
-      types.getFieldConfig(
-        context.value.entityType,
-        context.value.entityBundle,
-        p.hostFieldName,
-      )?.allowedBundles || []
-    )
+    return types.getFieldConfig(
+      context.value.entityType,
+      context.value.entityBundle,
+      p.hostFieldName
+    )?.allowedBundles || [];
   }
-}
-
-// All allowed bundles for which a field is being rendered currently.
-// Some blocks may have nested blocks, however they may not render them via
-// a <BlokkliField>. This would make it so that these nested block bundles
-// show up in the add list, but there is no place where these could be added.
-const bundlesForRenderedFields = computed(() =>
-  dom.registeredFieldTypes.value
-    .flatMap((field) => {
-      return (
-        types.getFieldConfig(
-          field.entityType,
-          field.entityBundle,
-          field.fieldName,
-        )?.allowedBundles || []
-      )
-    })
-    .filter(onlyUnique),
-)
-
-const generallyAvailableBundles = computed(() =>
-  types.generallyAvailableBundles.filter((v) =>
-    // Exclude bundles for which no field is currently being rendered.
-    bundlesForRenderedFields.value.includes(v.id),
-  ),
-)
-
+};
+const bundlesForRenderedFields = computed(
+  () => dom.registeredFieldTypes.value.flatMap((field) => {
+    return types.getFieldConfig(
+      field.entityType,
+      field.entityBundle,
+      field.fieldName
+    )?.allowedBundles || [];
+  }).filter(onlyUnique)
+);
+const generallyAvailableBundles = computed(
+  () => types.generallyAvailableBundles.filter(
+    (v) => (
+      // Exclude bundles for which no field is currently being rendered.
+      bundlesForRenderedFields.value.includes(v.id)
+    )
+  )
+);
 const selectableBundles = computed(() => {
   if (selection.blocks.value.length) {
-    return selection.blocks.value.flatMap((v) => getAllowedTypesForSelected(v))
+    return selection.blocks.value.flatMap((v) => getAllowedTypesForSelected(v));
   }
-  if (
-    activeField.value &&
-    activeField.value.hostEntityType === context.value.entityType
-  ) {
-    return (
-      types.getFieldConfig(
-        context.value.entityType,
-        context.value.entityBundle,
-        activeField.value.name,
-      )?.allowedBundles || []
-    )
+  if (activeField.value && activeField.value.hostEntityType === context.value.entityType) {
+    return types.getFieldConfig(
+      context.value.entityType,
+      context.value.entityBundle,
+      activeField.value.name
+    )?.allowedBundles || [];
   }
-
-  return generallyAvailableBundles.value.map((v) => v.id || '')
-})
-
-function determineVisibility(bundle: string, label: string): boolean {
+  return generallyAvailableBundles.value.map((v) => v.id || "");
+});
+function determineVisibility(bundle, label) {
   if (ui.isMobile.value && !selectableBundles.value.includes(bundle)) {
-    return false
+    return false;
   }
-
-  if (
-    searchText.value &&
-    !label.toLowerCase().includes(searchText.value.toLowerCase())
-  ) {
-    return false
+  if (searchText.value && !label.toLowerCase().includes(searchText.value.toLowerCase())) {
+    return false;
   }
-
-  const definition = getDefaultDefinition(bundle)
-
+  const definition = definitions.getDefaultDefinition(bundle);
   if (definition?.editor?.maxInstances) {
-    const existingInstancesOfBundle = state.getBlockBundleCount(bundle)
-    return existingInstancesOfBundle < definition.editor.maxInstances
+    const existingInstancesOfBundle = state.getBlockBundleCount(bundle);
+    return existingInstancesOfBundle < definition.editor.maxInstances;
   }
-
-  return true
+  return true;
 }
-
 const sortedList = computed(() => {
-  return [...generallyAvailableBundles.value]
-    .filter((v) => !reservedBundles.includes(v.id))
-    .map((v) => {
-      const isVisible = determineVisibility(v.id, v.label)
-      const isDisabled = !v.id || !selectableBundles.value.includes(v.id)
-      return {
-        ...v,
-        isDisabled,
-        isVisible:
-          isVisible && (!settings.value.hideDisabledBlocks || !isDisabled),
-        isFavorite: favorites.value.includes(v.id),
-      }
-    })
-    .sort((a, b) => {
-      if (a.isFavorite && !b.isFavorite) return -1
-      if (!a.isFavorite && b.isFavorite) return 1
-
-      return a.label.localeCompare(b.label)
-    })
-})
-
-const renderKey = ref('')
-
+  return [...generallyAvailableBundles.value].filter((v) => !reservedBundles.includes(v.id)).map((v) => {
+    const isVisible = determineVisibility(v.id, v.label);
+    const isDisabled = !v.id || !selectableBundles.value.includes(v.id);
+    return {
+      ...v,
+      isDisabled,
+      isVisible: isVisible && (!settings.value.hideDisabledBlocks || !isDisabled),
+      isFavorite: favorites.value.includes(v.id)
+    };
+  }).sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    return a.label.localeCompare(b.label);
+  });
+});
+const renderKey = ref("");
 const getBundlesForAppendCommands = () => {
   if (selection.blocks.value.length !== 1) {
-    return []
+    return [];
   }
-
-  const block = selection.blocks.value[0]
-  const field: FieldConfig | undefined = types.getFieldConfig(
+  const block = selection.blocks.value[0];
+  const field = types.getFieldConfig(
     block.hostType,
     block.hostBundle,
-    block.hostFieldName,
-  )
-
+    block.hostFieldName
+  );
   if (field) {
     if (field.cardinality !== -1) {
-      const key = getFieldKey(block.hostUuid, block.hostFieldName)
-      const count = state.getFieldBlockCount(key)
-      // No more blocks allowed.
+      const key = getFieldKey(block.hostUuid, block.hostFieldName);
+      const count = state.getFieldBlockCount(key);
       if (count >= field.cardinality) {
-        return []
+        return [];
       }
     }
-    return field.allowedBundles.filter((v) => !reservedBundles.includes(v))
+    return field.allowedBundles.filter((v) => !reservedBundles.includes(v));
   }
-
-  return []
-}
-
-const getAppendEndCommands = (): Command[] => {
+  return [];
+};
+const getAppendEndCommands = () => {
   if (selection.blocks.value.length !== 0) {
-    return []
+    return [];
   }
-
-  return types.fieldConfig
-    .forEntityTypeAndBundle(
-      context.value.entityType,
-      context.value.entityBundle,
-    )
-    .flatMap((field: FieldConfig) => {
-      if (field.cardinality !== -1) {
-        const key = getFieldKey(context.value.entityUuid, field.name)
-        const count = state.getFieldBlockCount(key)
-        // No more blocks allowed.
-        if (count >= field.cardinality) {
-          return []
-        }
+  return types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  ).flatMap((field) => {
+    if (field.cardinality !== -1) {
+      const key = getFieldKey(context.value.entityUuid, field.name);
+      const count = state.getFieldBlockCount(key);
+      if (count >= field.cardinality) {
+        return [];
       }
-      return field.allowedBundles
-        .filter((v) => !reservedBundles.includes(v))
-        .map((bundle: string) => {
-          const definition = types.getBlockBundleDefinition(bundle)
-          return {
-            id: 'block_add_list:append_end:' + bundle + field.name,
-            label: $t(
-              'addBlockCommand.appendInField',
-              'Append "@block" in "@field"',
-            )
-              .replace('@block', definition?.label || bundle)
-              .replace('@field', field.label),
-            group: 'add',
-            bundle,
-            callback: () => commandCallbackAppendEnd(bundle, field.name),
-          }
-        })
-    })
-}
-
-const commandCallbackAppendEnd = (bundle: string, fieldName: string) => {
+    }
+    return field.allowedBundles.filter((v) => !reservedBundles.includes(v)).map((bundle) => {
+      const definition = types.getBlockBundleDefinition(bundle);
+      return {
+        id: "block_add_list:append_end:" + bundle + field.name,
+        label: $t(
+          "addBlockCommand.appendInField",
+          'Append "@block" in "@field"'
+        ).replace("@block", definition?.label || bundle).replace("@field", field.label),
+        group: "add",
+        bundle,
+        callback: () => commandCallbackAppendEnd(bundle, field.name)
+      };
+    });
+  });
+};
+const commandCallbackAppendEnd = (bundle, fieldName) => {
   const field = state.mutatedFields.value.find(
-    (v) =>
-      v.name === fieldName &&
-      v.entityType === context.value.entityType &&
-      v.entityUuid === context.value.entityUuid,
-  )
-
+    (v) => v.name === fieldName && v.entityType === context.value.entityType && v.entityUuid === context.value.entityUuid
+  );
   if (!field) {
-    return
+    return;
   }
-
-  const afterUuid = field.list[field.list.length - 1]?.uuid || undefined
-  eventBus.emit('block:append', {
+  const afterUuid = field.list[field.list.length - 1]?.uuid || void 0;
+  eventBus.emit("block:append", {
     bundle,
     afterUuid,
     host: {
       type: context.value.entityType,
       uuid: context.value.entityUuid,
-      fieldName,
-    },
-  })
-}
-
-const commandCallbackInsert = (
-  bundle: string,
-  fieldName: string,
-  hostType: string,
-  hostUuid: string,
-) => {
+      fieldName
+    }
+  });
+};
+const commandCallbackInsert = (bundle, fieldName, hostType, hostUuid) => {
   const field = state.mutatedFields.value.find(
-    (v) =>
-      v.name === fieldName &&
-      v.entityType === hostType &&
-      v.entityUuid === hostUuid,
-  )
-  const afterUuid = field ? field.list[field.list.length - 1]?.uuid : undefined
-  eventBus.emit('block:append', {
+    (v) => v.name === fieldName && v.entityType === hostType && v.entityUuid === hostUuid
+  );
+  const afterUuid = field ? field.list[field.list.length - 1]?.uuid : void 0;
+  eventBus.emit("block:append", {
     bundle,
     afterUuid,
     host: {
       type: hostType,
       uuid: hostUuid,
-      fieldName,
-    },
-  })
-}
-
-const getInsertCommands = (
-  block: DraggableExistingBlock | undefined,
-): Command[] => {
+      fieldName
+    }
+  });
+};
+const getInsertCommands = (block) => {
   if (!block) {
-    return []
+    return [];
   }
-
-  // Find nested fields of the block.
-  const nestedFields = types.fieldConfig
-    .forEntityTypeAndBundle(itemEntityType, block.itemBundle)
-    .map((field) => {
-      return {
-        ...field,
-        uuid: block.uuid,
-      }
-    })
-
-  const commands: Command[] = nestedFields.flatMap(
-    (field: FieldConfig & { uuid: string }) => {
-      return field.allowedBundles.map((bundle: string) => {
-        const label = types.getBlockBundleDefinition(bundle)?.label || bundle
+  const nestedFields = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.itemBundle).map((field) => {
+    return {
+      ...field,
+      uuid: block.uuid
+    };
+  });
+  const commands = nestedFields.flatMap(
+    (field) => {
+      return field.allowedBundles.map((bundle) => {
+        const label = types.getBlockBundleDefinition(bundle)?.label || bundle;
         return {
-          id: 'block_add_list:insert:' + field.name + ':' + bundle,
+          id: "block_add_list:insert:" + field.name + ":" + bundle,
           label: $t(
-            'addBlockCommand.insertInField',
-            'Insert "@block" into "@field"',
-          )
-            .replace('@block', label)
-            .replace('@field', field.label),
-          group: 'add',
+            "addBlockCommand.insertInField",
+            'Insert "@block" into "@field"'
+          ).replace("@block", label).replace("@field", field.label),
+          group: "add",
           bundle,
-          callback: () =>
-            commandCallbackInsert(
-              bundle,
-              field.name,
-              field.entityType,
-              field.uuid,
-            ),
-        }
-      })
-    },
-  )
-
+          callback: () => commandCallbackInsert(
+            bundle,
+            field.name,
+            field.entityType,
+            field.uuid
+          )
+        };
+      });
+    }
+  );
   if (block.hostType === runtimeConfig.itemEntityType) {
-    const parentBlock = dom.findBlock(block.hostUuid)
+    const parentBlock = dom.findBlock(block.hostUuid);
     if (parentBlock) {
       getInsertCommands(parentBlock).forEach((parentCommand) => {
-        commands.push(parentCommand)
-      })
+        commands.push(parentCommand);
+      });
     }
   }
-
-  return commands
-}
-
-const commandCallbackAppend = (bundle: string) => {
-  const block = selection.blocks.value[0]
-  eventBus.emit('block:append', {
+  return commands;
+};
+const commandCallbackAppend = (bundle) => {
+  const block = selection.blocks.value[0];
+  if (!block) {
+    return;
+  }
+  eventBus.emit("block:append", {
     bundle,
     afterUuid: selection.uuids.value[0],
     host: {
       type: block.hostType,
       uuid: block.hostUuid,
-      fieldName: block.hostFieldName,
-    },
-  })
-}
-
-const getAppendCommands = (): Command[] => {
+      fieldName: block.hostFieldName
+    }
+  });
+};
+const getAppendCommands = () => {
   return getBundlesForAppendCommands().map((bundle) => {
-    const definition = types.getBlockBundleDefinition(bundle)
+    const definition = types.getBlockBundleDefinition(bundle);
     return {
-      id: 'block_add_list:append:' + bundle,
-      label: $t('addBlockCommand.appendRoot', 'Append "@block"').replace(
-        '@block',
-        definition?.label || bundle,
+      id: "block_add_list:append:" + bundle,
+      label: $t("addBlockCommand.appendRoot", 'Append "@block"').replace(
+        "@block",
+        definition?.label || bundle
       ),
-      group: 'add',
+      group: "add",
       bundle,
-      callback: () => commandCallbackAppend(bundle),
-    }
-  })
-}
-
+      callback: () => commandCallbackAppend(bundle)
+    };
+  });
+};
 defineCommands(() => {
-  if (state.editMode.value !== 'editing') {
-    return
+  if (state.editMode.value !== "editing") {
+    return;
   }
   return [
     ...getAppendCommands(),
     ...getInsertCommands(selection.blocks.value[0]),
-    ...getAppendEndCommands(),
-  ]
-})
-
-onBlokkliEvent('add-list:change', () => {
+    ...getAppendEndCommands()
+  ];
+});
+onBlokkliEvent("add-list:change", () => {
   nextTick(() => {
-    renderKey.value = Math.round(Math.random() * 1000000000).toString()
-  })
-})
+    renderKey.value = Math.round(Math.random() * 1e9).toString();
+  });
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'BlockAddList',
-}
+  name: "BlockAddList"
+};
 </script>

package/dist/runtime/components/Edit/Features/BlockAddList/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;