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

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

@@ -16,166 +16,126 @@
   </PluginItemDropdown>
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   computed,
   watch,
   useBlokkli,
   defineBlokkliFeature,
-  useLazyAsyncData,
-} from '#imports'
-import { PluginItemDropdown } from '#blokkli/plugins'
-import { onlyUnique } from '#blokkli/helpers'
-import type {
-  DraggableExistingBlock,
-  DropArea,
-  TransformPlugin,
-} from '#blokkli/types'
-import { filterTransforms } from '#blokkli/helpers/transform'
-import defineCommands from '#blokkli/helpers/composables/defineCommands'
-import defineDropAreas from '#blokkli/helpers/composables/defineDropAreas'
-
+  useLazyAsyncData
+} from "#imports";
+import { PluginItemDropdown } from "#blokkli/plugins";
+import { onlyUnique } from "#blokkli/helpers";
+import { filterTransforms } from "#blokkli/helpers/transform";
+import defineCommands from "#blokkli/helpers/composables/defineCommands";
+import defineDropAreas from "#blokkli/helpers/composables/defineDropAreas";
 const { adapter } = defineBlokkliFeature({
-  id: 'transform',
-  icon: 'script',
-  label: 'Transform',
-  requiredAdapterMethods: ['getTransformPlugins', 'applyTransformPlugin'],
-  description: 'Provides integration for block transform plugins.',
-  screenshot: 'feature-transform.jpg',
-})
-
-const { types, selection, state, $t, dom, ui } = useBlokkli()
-
+  id: "transform",
+  icon: "script",
+  label: "Transform",
+  requiredAdapterMethods: ["getTransformPlugins", "applyTransformPlugin"],
+  description: "Provides integration for block transform plugins.",
+  screenshot: "feature-transform.jpg"
+});
+const { types, selection, state, $t, dom, ui } = useBlokkli();
 const {
   data: plugins,
   execute,
-  status,
+  status
 } = await useLazyAsyncData(
   () => {
-    return adapter.getTransformPlugins()
+    return adapter.getTransformPlugins();
   },
-  { immediate: false, default: () => [] },
-)
-
+  { immediate: false, default: () => [] }
+);
 watch(selection.uuids, async () => {
-  if (status.value === 'idle') {
-    execute()
+  if (status.value === "idle") {
+    execute();
   }
-})
-
-async function onTransform(plugin: TransformPlugin, uuids: string[]) {
-  ui.setTransform(plugin.label)
-
+});
+async function onTransform(plugin, uuids) {
+  ui.setTransform(plugin.label);
   await state.mutateWithLoadingState(
-    () =>
-      adapter.applyTransformPlugin({
-        uuids,
-        pluginId: plugin.id,
-      }),
+    () => adapter.applyTransformPlugin({
+      uuids,
+      pluginId: plugin.id
+    }),
     $t(
-      'failedToTransform',
-      'The action "@name" could not be executed.',
-    ).replace('@name', plugin.label),
-  )
-
-  ui.setTransform()
+      "failedToTransform",
+      'The action "@name" could not be executed.'
+    ).replace("@name", plugin.label)
+  );
+  ui.setTransform();
 }
-
-const itemBundleIds = computed(() =>
-  selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique),
-)
-
-const possibleTransforms = computed<TransformPlugin[]>(() =>
-  filterTransforms(
+const itemBundleIds = computed(
+  () => selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique)
+);
+const possibleTransforms = computed(
+  () => filterTransforms(
     plugins.value || [],
     selection.uuids.value,
     itemBundleIds.value,
-    types.allowedTypesInList.value,
-  ),
-)
-
-defineCommands(() =>
-  possibleTransforms.value.map((transform) => ({
-    id: 'transform:' + transform.id,
+    types.allowedTypesInList.value
+  )
+);
+defineCommands(
+  () => possibleTransforms.value.map((transform) => ({
+    id: "transform:" + transform.id,
     label: transform.label,
-    group: 'selection',
-    icon: 'script',
-    callback: () => onTransform(transform, selection.uuids.value),
-  })),
-)
-
-const getPossibleDropTransforms = (
-  plugins: TransformPlugin[],
-  allBlocks: DraggableExistingBlock[],
-  dragItems: DraggableExistingBlock[],
-): PossibleTransform[] => {
-  // Filter out the dragged items from allBlocks.
+    group: "selection",
+    icon: "script",
+    callback: () => onTransform(transform, selection.uuids.value)
+  }))
+);
+const getPossibleDropTransforms = (plugins2, allBlocks, dragItems) => {
   const notDraggedBlocks = allBlocks.filter(
-    (block) => !dragItems.find((dragItem) => dragItem.uuid === block.uuid),
-  )
-
-  // Determine possible plugins based on the dragged items.
-  const validPlugins = plugins.filter((plugin) => {
-    const draggedBundles = dragItems.map((item) => item.itemBundle)
-    return (
-      draggedBundles.every((bundle) => plugin.bundles.includes(bundle)) &&
-      dragItems.length + 1 >= plugin.min &&
-      (plugin.max === -1 || dragItems.length + 1 <= plugin.max)
-    )
-  })
-
-  // Find possible transformations for each valid plugin
-  const possibleTransforms: PossibleTransform[] = []
+    (block) => !dragItems.find((dragItem) => dragItem.uuid === block.uuid)
+  );
+  const validPlugins = plugins2.filter((plugin) => {
+    const draggedBundles = dragItems.map((item) => item.itemBundle);
+    return draggedBundles.every((bundle) => plugin.bundles.includes(bundle)) && dragItems.length + 1 >= plugin.min && (plugin.max === -1 || dragItems.length + 1 <= plugin.max);
+  });
+  const possibleTransforms2 = [];
   validPlugins.forEach((plugin) => {
     notDraggedBlocks.forEach((block) => {
       if (plugin.targetBundles.includes(block.itemBundle)) {
-        possibleTransforms.push({
+        possibleTransforms2.push({
           plugin,
-          block,
-        })
+          block
+        });
       }
-    })
-  })
-
-  return possibleTransforms
-}
-
-type PossibleTransform = {
-  plugin: TransformPlugin
-  block: DraggableExistingBlock
-}
-
+    });
+  });
+  return possibleTransforms2;
+};
 defineDropAreas((dragItems) => {
   const existing = dragItems.filter(
-    (v) => v.itemType === 'existing',
-  ) as DraggableExistingBlock[]
-
+    (v) => v.itemType === "existing"
+  );
   if (!existing.length) {
-    return
+    return;
   }
-
-  const uuids = existing.map((v) => v.uuid)
-
+  const uuids = existing.map((v) => v.uuid);
   return getPossibleDropTransforms(
     plugins.value,
     dom.getAllBlocks(),
-    existing,
-  ).map<DropArea>((v) => {
+    existing
+  ).map((v) => {
     return {
       id: `transform:${v.plugin.id}:${v.block.uuid}`,
       label: v.plugin.label,
       element: v.block.element(),
       onDrop: () => {
-        const transformUuids = [v.block.uuid, ...uuids]
-        return onTransform(v.plugin, transformUuids)
-      },
-    }
-  })
-})
+        const transformUuids = [v.block.uuid, ...uuids];
+        return onTransform(v.plugin, transformUuids);
+      }
+    };
+  });
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Transform',
-}
+  name: "Transform"
+};
 </script>

package/dist/runtime/components/Edit/Features/Transform/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/Translations/Banner/index.vue

@@ -3,48 +3,40 @@
     <Icon name="translate" />
     <p v-html="text" />
     <button class="bk-translations-banner-close" @click="onClick">
-      {{ $t('translationsBannerButton', 'Edit source language instead') }}
+      {{ $t("translationsBannerButton", "Edit source language instead") }}
       <Icon name="close" />
     </button>
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed, useBlokkli } from '#imports'
-import { Icon } from '#blokkli/components'
-import type { Language } from '#blokkli/types'
-
-const props = defineProps<{
-  activeLanguage: Language
-}>()
-
-const { $t, adapter, state } = useBlokkli()
-
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  activeLanguage: { type: Object, required: true }
+});
+const { $t, adapter, state } = useBlokkli();
 const onClick = () => {
-  const sourceLanguage = state.translation.value.sourceLanguage
+  const sourceLanguage = state.translation.value.sourceLanguage;
   if (!sourceLanguage) {
     throw new Error(
-      'Missing property "sourceLanguage" in TranslationState object.',
-    )
+      'Missing property "sourceLanguage" in TranslationState object.'
+    );
   }
-
   const sourceTranslation = state.translation.value.translations?.find(
-    (v) => v.id === sourceLanguage,
-  )
-
+    (v) => v.id === sourceLanguage
+  );
   if (!sourceTranslation) {
     throw new Error(
-      `Failed to find translation for language "${sourceLanguage}".`,
-    )
+      `Failed to find translation for language "${sourceLanguage}".`
+    );
   }
-
-  adapter.changeLanguage!(sourceTranslation)
-}
-
+  adapter.changeLanguage(sourceTranslation);
+};
 const text = computed(() => {
   return $t(
-    'translationsBannerText',
-    'You are currently editing the <strong>@language</strong> translation. Some features like adding, moving or deleting blocks are not available.',
-  ).replace('@language', props.activeLanguage.name)
-})
+    "translationsBannerText",
+    "You are currently editing the <strong>@language</strong> translation. Some features like adding, moving or deleting blocks are not available."
+  ).replace("@language", props.activeLanguage.name);
+});
 </script>

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

@@ -0,0 +1,6 @@
+import type { Language } from '#blokkli/types';
+type __VLS_Props = {
+    activeLanguage: Language;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -5,11 +5,11 @@
       id="translations"
       :title="$t('translationsTourTitle', 'Translations')"
       :text="
-        $t(
-          'translationsTourText',
-          'Quickly switch between available translations. A greyed out language indicates the content is not yet translated. Clicking on it opens the form to create a new translation for this language.',
-        )
-      "
+  $t(
+    'translationsTourText',
+    'Quickly switch between available translations. A greyed out language indicates the content is not yet translated. Clicking on it opens the form to create a new translation for this language.'
+  )
+"
     >
       <div class="bk-translations">
         <button
@@ -23,10 +23,8 @@
         <div
           v-if="isOpen || !isDropdown"
           :class="
-            isDropdown
-              ? 'bk-translations-dropdown'
-              : 'bk-blokkli-item-options-radios bk-is-language'
-          "
+  isDropdown ? 'bk-translations-dropdown' : 'bk-blokkli-item-options-radios bk-is-language'
+"
         >
           <label
             v-for="item in items"
@@ -61,8 +59,8 @@
     id="translations"
     :title="$t('translationsBatchTranslateMenuTitle', 'Translate...')"
     :description="
-      $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
-    "
+  $t('translationsBatchTranslateMenuDescription', 'Translate all blocks')
+"
     :disabled="editMode !== 'translating'"
     :weight="60"
     icon="translate"
@@ -80,178 +78,137 @@
   />
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import {
   ref,
   computed,
   useBlokkli,
   defineBlokkliFeature,
-  onMounted,
-} from '#imports'
-import { falsy } from '#blokkli/helpers'
+  onMounted
+} from "#imports";
+import { falsy } from "#blokkli/helpers";
 import {
   PluginMenuButton,
   PluginItemAction,
-  PluginTourItem,
-} from '#blokkli/plugins'
-import type {
-  DraggableExistingBlock,
-  EntityTranslation,
-  Language,
-} from '#blokkli/types'
-import Banner from './Banner/index.vue'
-import { getDefinition } from '#blokkli-build/definitions'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-
+  PluginTourItem
+} from "#blokkli/plugins";
+import Banner from "./Banner/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { adapter } = defineBlokkliFeature({
-  id: 'translations',
-  label: 'Translations',
-  icon: 'translate',
-  requiredAdapterMethods: ['changeLanguage'],
-  description: 'Adds support for block translations.',
-})
-
-const { eventBus, state, context, $t, ui, selection, types } = useBlokkli()
-const { translation, editMode } = state
-
-const isOpen = ref(false)
-
+  id: "translations",
+  label: "Translations",
+  icon: "translate",
+  requiredAdapterMethods: ["changeLanguage"],
+  description: "Adds support for block translations."
+});
+const { eventBus, state, context, $t, ui, selection, types, definitions } = useBlokkli();
+const { translation, editMode } = state;
+const isOpen = ref(false);
 const isDropdown = computed(() => {
-  // Always a dropdown on mobile.
   if (ui.isMobile.value) {
-    return true
+    return true;
   }
-
-  // It is a dropdown if all langcodes combined is greater than 15.
-  // That way up to 7 languages with 2-char langcodes are displayed as radio buttons.
-  // This handles cases where langcodes are e.g. 'en-US', 'en-GB', 'de-CH', etc.
-  // In this case it switches to a dropdown. This is better than relying on the number
-  // languages.
-  const allCodes = items.value.map((v) => v.code).join('')
-  return allCodes.length > 15
-})
-const activeLangcode = computed(() => context.value.language)
-const activeLanguage = computed<Language>(() => {
-  return (
-    translation.value.availableLanguages?.find(
-      (v) => v.id === activeLangcode.value,
-    ) || {
-      id: activeLangcode.value,
-      name: activeLangcode.value,
+  const allCodes = items.value.map((v) => v.code).join("");
+  return allCodes.length > 15;
+});
+const activeLangcode = computed(() => context.value.language);
+const activeLanguage = computed(() => {
+  return translation.value.availableLanguages?.find(
+    (v) => v.id === activeLangcode.value
+  ) || {
+    id: activeLangcode.value,
+    name: activeLangcode.value
+  };
+});
+const items = computed(() => {
+  return (translation.value.availableLanguages || []).map((language) => {
+    if (language && language.id) {
+      return {
+        id: language.id,
+        code: language.id.toUpperCase(),
+        label: language.name,
+        checked: context.value.language === language.id,
+        translation: (translation.value.translations || []).find(
+          (v) => v.id === language.id
+        )
+      };
     }
-  )
-})
-
-type TranslationStateItem = {
-  id: string
-  code: string
-  label: string
-  checked: boolean
-  translation?: EntityTranslation
-}
-
-const items = computed<TranslationStateItem[]>(() => {
-  return (translation.value.availableLanguages || [])
-    .map((language) => {
-      if (language && language.id) {
-        return {
-          id: language.id,
-          code: language.id.toUpperCase(),
-          label: language.name,
-          checked: context.value.language === language.id,
-          translation: (translation.value.translations || []).find(
-            (v) => v.id === language.id,
-          ),
-        }
-      }
-      return null
-    })
-    .filter(falsy)
-})
-
+    return null;
+  }).filter(falsy);
+});
 const canTranslateBlock = computed(() => {
   if (selection.blocks.value.length !== 1) {
-    return false
+    return false;
   }
-  const block = selection.blocks.value[0]
-
+  const block = selection.blocks.value[0];
   if (block.libraryItemUuid) {
-    return false
+    return false;
   }
-
-  const definition = getDefinition(
+  const definition = definitions.getBlockDefinition(
     block.itemBundle,
     block.hostFieldListType,
-    block.parentBlockBundle,
-  )
-
+    block.parentBlockBundle
+  );
   if (definition?.editor?.disableEdit) {
-    return false
+    return false;
   }
-  const type = types.getBlockBundleDefinition(block.itemBundle)
-
+  const type = types.getBlockBundleDefinition(block.itemBundle);
   if (!type) {
-    return false
+    return false;
   }
-
   if (!type.isTranslatable) {
-    return false
+    return false;
   }
-
-  return true
-})
-
-function onClick(item: TranslationStateItem, event: Event) {
+  return true;
+});
+function onClick(item, event) {
   if (item.translation?.exists) {
-    return adapter.changeLanguage(item.translation)
+    return adapter.changeLanguage(item.translation);
   }
-
-  event.preventDefault()
+  event.preventDefault();
   if (item.translation) {
-    eventBus.emit('translateEntity', item.translation)
+    eventBus.emit("translateEntity", item.translation);
   }
 }
-
-function onTranslate(items: DraggableExistingBlock[]) {
-  eventBus.emit('item:edit', {
-    uuid: items[0].uuid,
-    bundle: items[0].itemBundle,
-  })
+function onTranslate(items2) {
+  const item = items2[0];
+  if (item) {
+    eventBus.emit("item:edit", {
+      uuid: item.uuid,
+      bundle: item.itemBundle
+    });
+  }
 }
-
-onBlokkliEvent('item:doubleClick', function (block) {
-  if (editMode.value === 'translating' && canTranslateBlock.value) {
-    onTranslate([block])
+onBlokkliEvent("item:doubleClick", function(block) {
+  if (editMode.value === "translating" && canTranslateBlock.value) {
+    onTranslate([block]);
   }
-})
-
-onBlokkliEvent('entity:translated', (langcode) => {
+});
+onBlokkliEvent("entity:translated", (langcode) => {
   const targetTranslation = translation.value.translations?.find(
-    (v) => v.id === langcode,
-  )
+    (v) => v.id === langcode
+  );
   if (targetTranslation) {
-    adapter.changeLanguage(targetTranslation)
+    adapter.changeLanguage(targetTranslation);
   }
-})
-
+});
 onMounted(() => {
-  // Make sure the user is not trying to edit a translation that does not exist.
   const translationExists = !!translation.value.translations?.find(
-    (v) => v.id === context.value.language,
-  )
+    (v) => v.id === context.value.language
+  );
   if (!translationExists) {
     const sourceTranslation = translation.value.translations?.find(
-      (v) => v.id === translation.value.sourceLanguage,
-    )
+      (v) => v.id === translation.value.sourceLanguage
+    );
     if (sourceTranslation) {
-      return adapter.changeLanguage(sourceTranslation)
+      return adapter.changeLanguage(sourceTranslation);
     }
   }
-})
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Translations',
-}
+  name: "Translations"
+};
 </script>

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