@blokkli/editor 2.0.0-alpha.32 → 2.0.0-alpha.34

package/dist/runtime/editor/features/search/index.vue

@@ -35,18 +35,79 @@
 </template>
 
 <script setup>
-import { nextTick, ref, useBlokkli, defineBlokkliFeature, useTemplateRef } from "#imports";
+import {
+  nextTick,
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  useTemplateRef
+} from "#imports";
 import Overlay from "./Overlay/index.vue";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { PluginToolbarButton } from "#blokkli/editor/plugins";
-import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { onBlokkliEvent, defineDropAreas } from "#blokkli/editor/composables";
+import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "search",
   icon: "bk_mdi_search",
   label: "Search",
   description: "Provides an overlay with shortcut to search for blocks on the current page or existing content to add as blocks."
 });
-const { $t, selection, ui } = useBlokkli();
+const { $t, selection, ui, adapter, state, types, directive } = useBlokkli();
+const ERROR_MESSAGE = $t(
+  "searchContentReplaceFailed",
+  "Failed to replace content."
+);
+defineDropAreas((dragItems) => {
+  if (!adapter.replaceContentSearchItem) {
+    return;
+  }
+  if (dragItems.length !== 1) {
+    return;
+  }
+  const item = dragItems[0];
+  if (item.itemType !== "search_content") {
+    return;
+  }
+  const searchItem = item.searchItem;
+  return directive.getDroppableElements().map((field) => {
+    if (field.type !== itemEntityType) {
+      return;
+    }
+    const config = types.getDroppableFieldConfig(field.fieldName, field);
+    const allowedBundles = config.allowed.find(
+      (v) => v.type === searchItem.entityType
+    )?.bundles;
+    if (!allowedBundles || !allowedBundles.includes(searchItem.entityBundle)) {
+      return;
+    }
+    const host = {
+      uuid: field.uuid,
+      type: field.type,
+      fieldName: field.fieldName
+    };
+    const label = $t("searchContentReplace", "Replace @field").replace(
+      "@field",
+      config.label
+    );
+    return {
+      id: `replace-search-content:${field.uuid}:${field.fieldName}`,
+      label,
+      element: field.element,
+      icon: "bk_mdi_swap_horiz",
+      onDrop: () => {
+        return state.mutateWithLoadingState(
+          () => adapter.replaceContentSearchItem({
+            host,
+            item: searchItem
+          }),
+          ERROR_MESSAGE
+        );
+      }
+    };
+  }).filter(falsy);
+});
 const isRendered = ref(false);
 const isVisible = ref(false);
 const overlay = useTemplateRef("overlay");

package/dist/runtime/editor/features/search/types.d.ts

@@ -1,3 +1,4 @@
+import type { EntityTypeRestriction } from '#blokkli/editor/types/definitions';
 import type { BlokkliItemHost } from '#blokkli/editor/types/field';
 export type AddContentSearchItemEvent = {
     item: SearchContentItem;
@@ -5,12 +6,22 @@ export type AddContentSearchItemEvent = {
     bundle: string;
     afterUuid: string | null;
 };
+export type ReplaceContentSearchItemEvent = {
+    host: BlokkliItemHost;
+    item: SearchContentItem;
+};
 export interface DraggableSearchContentItem {
     itemType: 'search_content';
     element: () => HTMLElement;
     itemBundles: string[];
     searchItem: SearchContentItem;
 }
+export type ContentSearchTab = {
+    id: string;
+    title: string;
+    description: string | null;
+    types: EntityTypeRestriction[];
+};
 /**
  * Defines a content search item.
  */
@@ -53,7 +64,7 @@ declare module '#blokkli/editor/adapter' {
         /**
          * Return the possible content search tabs.
          */
-        getContentSearchTabs?: () => Record<string, string> | Promise<Record<string, string>>;
+        getContentSearchTabs?: () => ContentSearchTab[] | Promise<ContentSearchTab[]>;
         /**
          * Return items for the "content" search.
          *
@@ -64,6 +75,10 @@ declare module '#blokkli/editor/adapter' {
          * Add the dropped item from a search content item.
          */
         addContentSearchItem?: (e: AddContentSearchItemEvent) => Promise<MutationResponseLike<T>> | undefined;
+        /**
+         * Replace a content reference on an existing block from a search content item.
+         */
+        replaceContentSearchItem?: (e: ReplaceContentSearchItemEvent) => Promise<MutationResponseLike<T>> | undefined;
     }
 }
 declare module '#blokkli/editor/types/draggable' {

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue

@@ -293,9 +293,7 @@ function adjustEmptyFieldButtonPosition(fieldX, fieldY, blockRect, artboardScale
   const distToBefore = Math.sqrt(
     (fieldX - beforeX) ** 2 + (fieldY - beforeY) ** 2
   );
-  const distToAfter = Math.sqrt(
-    (fieldX - afterX) ** 2 + (fieldY - afterY) ** 2
-  );
+  const distToAfter = Math.sqrt((fieldX - afterX) ** 2 + (fieldY - afterY) ** 2);
   if (distToBefore < minDistanceArtboard || distToAfter < minDistanceArtboard) {
     return {
       x: blockRect.x + blockRect.width / 2,

package/dist/runtime/editor/features/selection/AddButtons/index.vue

@@ -49,7 +49,18 @@ import { onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
   items: { type: Array, required: true }
 });
-const { dom, state, eventBus, types, $t, blocks, fields, animation, context, selection } = useBlokkli();
+const {
+  dom,
+  state,
+  eventBus,
+  types,
+  $t,
+  blocks,
+  fields,
+  animation,
+  context,
+  selection
+} = useBlokkli();
 const isLocked = ref(false);
 const shouldRender = computed(() => {
   return props.items.length === 1;
@@ -81,7 +92,10 @@ const emptyBlockFields = computed(() => {
   });
 });
 const emptyHostFields = computed(() => {
-  return types.fieldConfig.forEntityTypeAndBundle(context.value.entityType, context.value.entityBundle).map((field) => {
+  return types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  ).map((field) => {
     const key = getFieldKey(context.value.entityUuid, field.name);
     const count = state.getFieldBlockCount(key);
     return {
@@ -176,7 +190,10 @@ const fieldTooltips = computed(() => {
 });
 const hostFieldTooltips = computed(() => {
   return emptyHostFields.value.map((field) => {
-    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(context.value.entityType, context.value.entityBundle).find((f) => f.name === field.name);
+    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(
+      context.value.entityType,
+      context.value.entityBundle
+    ).find((f) => f.name === field.name);
     const fieldLabel = fieldConfig?.label || field.name;
     const fieldElement = fields.find(context.value.entityUuid, field.name);
     if (fieldElement) {
@@ -191,7 +208,10 @@ const hostFieldTooltips = computed(() => {
         }
       }
     }
-    return $t("addButtonToField", "Add to @fieldLabel...").replace("@fieldLabel", fieldLabel);
+    return $t("addButtonToField", "Add to @fieldLabel...").replace(
+      "@fieldLabel",
+      fieldLabel
+    );
   });
 });
 watch(emptyBlockFields, (fields2) => {

package/dist/runtime/editor/features/selection/Renderer/index.vue

@@ -13,7 +13,11 @@ import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
 import { toShaderColor } from "#blokkli/editor/helpers/color";
-import { defineRenderer, onBlokkliEvent, useTransitionedValue } from "#blokkli/editor/composables";
+import {
+  defineRenderer,
+  onBlokkliEvent,
+  useTransitionedValue
+} from "#blokkli/editor/composables";
 const props = defineProps({
   blocks: { type: Array, required: true },
   hasHostSelected: { type: Boolean, required: true }

package/dist/runtime/editor/features/selection/index.vue

@@ -30,7 +30,11 @@ import {
   watch
 } from "#imports";
 import { itemEntityType } from "#blokkli-build/config";
-import { defineItemDropdownAction, onBlokkliEvent, useStateBasedCache } from "#blokkli/editor/composables";
+import {
+  defineItemDropdownAction,
+  onBlokkliEvent,
+  useStateBasedCache
+} from "#blokkli/editor/composables";
 defineBlokkliFeature({
   id: "selection",
   icon: "bk_mdi_select",

package/dist/runtime/editor/features/settings/Dialog/index.vue

@@ -31,7 +31,9 @@
 import { useBlokkli, computed } from "#imports";
 import { DialogModal } from "#blokkli/editor/components";
 import FeatureSettingComponent from "./FeatureSetting/index.vue";
-import { SETTINGS_GROUP } from "../../../../../global/constants";
+import {
+  SETTINGS_GROUP
+} from "../../../../../global/constants";
 import { settingsOverride } from "#blokkli-build/editor-config";
 const { $t, features, ui } = useBlokkli();
 const getTranslation = $t;

package/dist/runtime/editor/features/settings/index.vue

@@ -10,7 +10,10 @@
 import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import SettingsDialog from "./Dialog/index.vue";
 import { BlokkliTransition } from "#blokkli/editor/components";
-import { addElementClasses, defineMenuButton } from "#blokkli/editor/composables";
+import {
+  addElementClasses,
+  defineMenuButton
+} from "#blokkli/editor/composables";
 const { ui, $t } = useBlokkli();
 const { settings } = defineBlokkliFeature({
   id: "settings",

package/dist/runtime/editor/features/templates/CreateDialog/index.vue

@@ -41,10 +41,12 @@
 "
         />
       </FormItem>
-      <FormItem v-if="canBeDefault">
+      <FormItem>
         <FormToggle
           v-model="isDefault"
           :label="$t('templatesCreateDialogDefaultLabel', 'Use as default')"
+          :disabled="!!disabledReason"
+          :disabled-reason
           :description="
   $t(
     'templatesCreateDialogDefaultDescription',
@@ -74,7 +76,7 @@ import {
   BlockPreviewRenderer
 } from "#blokkli/editor/components";
 const emit = defineEmits(["confirm", "cancel"]);
-const { $t, ui } = useBlokkli();
+const { $t, ui, permissions } = useBlokkli();
 const props = defineProps({
   uuids: { type: Array, required: true }
 });
@@ -82,6 +84,23 @@ const label = ref("");
 const description = ref("");
 const isDefault = ref(false);
 const canBeDefault = computed(() => props.uuids.length === 1);
+const userCanMakeDefault = computed(
+  () => permissions.hasPermission("manage_default_templates")
+);
+const disabledReason = computed(() => {
+  if (!canBeDefault.value) {
+    return $t(
+      "templatesCanNotBeDefault",
+      "Only single blocks can be made default."
+    );
+  } else if (!userCanMakeDefault.value) {
+    return $t(
+      "templatesMissingDefaultPermissions",
+      "Missing permission to create default templates."
+    );
+  }
+  return null;
+});
 watch(
   label,
   () => {

package/dist/runtime/editor/features/templates/Dialog/Item/index.d.vue.ts

@@ -3,7 +3,7 @@ type __VLS_Props = {
     uuid: string;
     label: string;
     description?: string;
-    items: FieldListItem[];
+    items?: FieldListItem[];
     isDefault: boolean;
 };
 declare const __VLS_export: 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>;

package/dist/runtime/editor/features/templates/Dialog/Item/index.vue

@@ -2,9 +2,9 @@
   <BlockPreviewItem
     :items="items"
     :title="label"
-    :description="description"
+    :description
     :max-height="200"
-    :no-preview="!items.length"
+    :no-preview="!items?.length"
   />
 </template>
 
@@ -14,7 +14,7 @@ defineProps({
   uuid: { type: String, required: true },
   label: { type: String, required: true },
   description: { type: String, required: false },
-  items: { type: Array, required: true },
+  items: { type: Array, required: false },
   isDefault: { type: Boolean, required: true }
 });
 </script>

package/dist/runtime/editor/features/templates/Dialog/Item/index.vue.d.ts

@@ -3,7 +3,7 @@ type __VLS_Props = {
     uuid: string;
     label: string;
     description?: string;
-    items: FieldListItem[];
+    items?: FieldListItem[];
     isDefault: boolean;
 };
 declare const __VLS_export: 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>;

package/dist/runtime/editor/features/templates/Dialog/index.vue

@@ -22,7 +22,7 @@
       </div>
       <div class="bk-library-dialog-content">
         <Loading v-if="status === 'pending'" />
-        <ul v-else-if="items.length" class="bk-library-dialog-list">
+        <ul v-if="items.length" class="bk-library-dialog-list">
           <li
             v-for="item in items"
             :key="item.uuid"
@@ -35,7 +35,9 @@
           </li>
         </ul>
         <p v-else class="bk-lead">
-          {{ $t("templatesNoResults", "No templates available for this field.") }}
+          {{
+            $t("templatesNoResults", "No templates available for this field.")
+          }}
         </p>
       </div>
       <div v-if="totalPages > 1" class="bk bk-library-pagination">
@@ -55,8 +57,21 @@
 </template>
 
 <script setup>
-import { FormOverlay, Pagination, Loading, InfoBox, ConfigForm } from "#blokkli/editor/components";
-import { ref, useBlokkli, computed, useAsyncData, reactive, watch } from "#imports";
+import {
+  FormOverlay,
+  Pagination,
+  Loading,
+  InfoBox,
+  ConfigForm
+} from "#blokkli/editor/components";
+import {
+  ref,
+  useBlokkli,
+  computed,
+  useAsyncData,
+  reactive,
+  watch
+} from "#imports";
 import TemplateItem from "./Item/index.vue";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -74,7 +89,8 @@ const host = computed(() => ({
 const searchParams = computed(() => ({
   host: host.value,
   page: page.value,
-  filters: { ...filters }
+  filters: { ...filters },
+  includeItems: true
 }));
 watch(filters, function() {
   page.value = 0;

package/dist/runtime/editor/features/templates/ManageDialog/Item.d.vue.ts

@@ -0,0 +1,8 @@
+import type { TemplateItem } from '../types.js';
+declare const __VLS_export: import("vue").DefineComponent<TemplateItem, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<TemplateItem> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/templates/ManageDialog/Item.vue

@@ -0,0 +1,147 @@
+<template>
+  <tr>
+    <td>
+      <div>
+        <span>{{ label }}</span>
+        <span
+          v-if="isDefault"
+          class="bk-pill bk-is-strong"
+          :title="
+  $t(
+    'templatesDefaultPillDescription',
+    'This template is used when new blocks of this type are created.'
+  )
+"
+          >{{ $t("templatesDefaultPill", "Default") }}</span
+        >
+      </div>
+      <div v-if="description">{{ description }}</div>
+      <ul class="bk-pill-list">
+        <li v-for="(bundle, index) in bundleLabels" :key="index">
+          <span class="bk-pill bk-is-mono" v-text="bundle" />
+        </li>
+      </ul>
+    </td>
+    <td>
+      <span v-if="metadata?.createdBy">{{ metadata.createdBy }}</span>
+    </td>
+    <td>
+      <RelativeTime v-if="dateCreated" :timestamp="dateCreated" />
+    </td>
+    <td>
+      <RelativeTime v-if="dateUpdated" :timestamp="dateUpdated" />
+    </td>
+    <td class="bk-templates-manage-table-actions">
+      <div>
+        <template v-if="confirmDelete">
+          <button
+            class="bk-button bk-is-danger bk-is-small"
+            :disabled="isDeleting"
+            :class="{ 'bk-is-loading': isDeleting }"
+            @click="onConfirmDelete"
+          >
+            {{ $t("templatesManageDialogConfirmDelete", "Delete") }}
+          </button>
+          <button
+            class="bk-button bk-is-small"
+            :disabled="isDeleting"
+            @click="confirmDelete = false"
+          >
+            {{ $t("templatesManageDialogCancelDelete", "Cancel") }}
+          </button>
+        </template>
+        <template v-else>
+          <button
+            v-if="adapterHasEdit && permissions.includes('edit')"
+            ref="editButtonEl"
+            class="bk-button bk-is-small"
+            @click.prevent="isEditing = true"
+          >
+            <Icon name="bk_mdi_edit" />
+            {{ $t("templatesManageDialogEdit", "Edit") }}
+          </button>
+          <button
+            v-if="permissions.includes('delete')"
+            class="bk-button bk-is-small"
+            @click="confirmDelete = true"
+          >
+            <Icon name="bk_mdi_delete" />
+            {{ $t("templatesManageDialogDelete", "Delete") }}
+          </button>
+        </template>
+      </div>
+    </td>
+  </tr>
+  <NestedEditorOverlay
+    v-if="isEditing && editUrl"
+    :url="editUrl"
+    :uuid
+    :element="editButtonEl"
+    :title="$t('templatesEditOverlayTitle', 'Edit template')"
+    theme="red"
+    icon="bk_mdi_dashboard"
+    @close="isEditing = false"
+    @submit="onSubmitEdit"
+  />
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli, useTemplateRef } from "#imports";
+import {
+  Icon,
+  NestedEditorOverlay,
+  RelativeTime
+} from "#blokkli/editor/components";
+import { falsy, onlyUnique } from "#blokkli/helpers";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  items: { type: Array, required: false },
+  itemBundles: { type: Array, required: true },
+  isDefault: { type: Boolean, required: true },
+  translationLanguages: { type: Array, required: true },
+  permissions: { type: Array, required: true },
+  metadata: { type: [Object, null], required: true }
+});
+const emit = defineEmits(["refresh"]);
+const { $t, adapter, state, types } = useBlokkli();
+const editButtonEl = useTemplateRef("editButtonEl");
+const confirmDelete = ref(false);
+const isDeleting = ref(false);
+const isEditing = ref(false);
+const dateCreated = computed(() => props.metadata?.dateCreated);
+const dateUpdated = computed(() => props.metadata?.dateUpdated);
+const editUrl = computed(() => {
+  if (!adapter.templatesGetEditUrl) {
+    return null;
+  }
+  return adapter.templatesGetEditUrl({ templateUuid: props.uuid });
+});
+function onSubmitEdit() {
+  isEditing.value = false;
+}
+const adapterHasEdit = !!adapter.templatesGetEditUrl;
+const bundleLabels = computed(
+  () => props.itemBundles.map((bundle) => {
+    return types.getBlockBundleDefinition(bundle)?.label;
+  }).filter(falsy).filter(onlyUnique)
+);
+async function onConfirmDelete() {
+  if (!adapter.templatesDelete) {
+    return;
+  }
+  isDeleting.value = true;
+  const success = await state.mutateWithLoadingState(
+    () => adapter.templatesDelete({ templateUuid: props.uuid }),
+    $t("templatesDeleteError", "Failed to delete template."),
+    $t("templatesDeleteSuccess", "Template deleted successfully.")
+  );
+  if (success) {
+    emit("refresh");
+    return;
+  }
+  isDeleting.value = false;
+  confirmDelete.value = false;
+}
+</script>

package/dist/runtime/editor/features/templates/ManageDialog/Item.vue.d.ts

@@ -0,0 +1,8 @@
+import type { TemplateItem } from '../types.js';
+declare const __VLS_export: import("vue").DefineComponent<TemplateItem, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    refresh: () => any;
+}, string, import("vue").PublicProps, Readonly<TemplateItem> & Readonly<{
+    onRefresh?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;