@blokkli/editor 2.0.0-alpha.46 → 2.0.0-alpha.48

package/dist/runtime/editor/components/Actions/index.vue

@@ -29,7 +29,13 @@
           @click.prevent="showDropdown = !showDropdown"
         >
           <div v-if="shouldRenderButton" class="bk-tooltip">
-            {{ $t("actionsDropdownToolip", "Further actions") }}
+            <span>{{ $t("actionsDropdownToolip", "Further actions") }}</span>
+            <div
+              v-if="restrictedPermissionsLabel"
+              class="bk-item-action-disabled-reason"
+            >
+              <span>{{ restrictedPermissionsLabel }}</span>
+            </div>
           </div>
           <div
             v-show="!hasSelectedHost"
@@ -57,6 +63,14 @@
             class="bk-blokkli-item-actions-title-count"
             >{{ selection.items.value.length }}</span
           >
+
+          <span
+            v-show="isPermissionRestricted"
+            class="bk-blokkli-item-actions-title-pill bk-is-restricted"
+          >
+            <Icon name="bk_mdi_lock" />
+          </span>
+
           <span
             v-show="selectedIsNew"
             class="bk-blokkli-item-actions-title-pill"
@@ -101,7 +115,7 @@ import {
   fragmentBlockBundle,
   fromLibraryBlockBundle
 } from "#blokkli-build/config";
-const { selection, $t, types, state, ui, definitions, debug } = useBlokkli();
+const { selection, $t, types, state, ui, definitions, debug, permissions } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
@@ -225,6 +239,37 @@ const selectedIsNew = computed(() => {
   const items = selection.items.value;
   return !!items.length && items.every((v) => v.isNew);
 });
+const permissionsForSelected = computed(() => {
+  const bundles = selection.bundles.value;
+  if (!bundles.length) {
+    return [];
+  }
+  const allPermissions = ["add", "delete", "edit"];
+  return allPermissions.filter(
+    (permission) => bundles.every(
+      (bundle) => permissions.checkBlockBundlePermission(bundle, permission)
+    )
+  );
+});
+const isPermissionRestricted = computed(
+  () => selection.items.value.length > 0 && permissionsForSelected.value.length < 3
+);
+const restrictedPermissionsLabel = computed(() => {
+  if (!isPermissionRestricted.value) {
+    return null;
+  }
+  const shared = permissionsForSelected.value;
+  if (shared.length === 0) {
+    return $t(
+      "restrictedPermissionsAll",
+      "Some actions are not available due to missing permissions."
+    );
+  }
+  return $t(
+    "restrictedPermissionsSome",
+    "Some actions are restricted due to missing permissions."
+  );
+});
 const itemBundle = computed(() => {
   if (selection.bundles.value.length !== 1) {
     return;

package/dist/runtime/editor/components/AnimationCanvas/index.vue

@@ -45,7 +45,8 @@ const {
   state,
   directive,
   blocks,
-  fields
+  fields,
+  permissions
 } = useBlokkli();
 function onCanvasFocus() {
   ui.setCanvasFocused(true);
@@ -114,7 +115,8 @@ function getInteractedElement(e) {
   const editableField = directive.getEditableAtPoint(x, y);
   if (editableField) {
     const editableUuid = editableField.type === itemEntityType ? editableField.uuid : void 0;
-    if (!editableUuid || editableUuid === deepestUuid) {
+    const canEdit = !editableUuid || permissions.checkBlockBundlePermission(editableField.bundle, "edit") && !permissions.blockHasRestrictedAncestor(editableUuid);
+    if (canEdit && (!editableUuid || editableUuid === deepestUuid)) {
       return {
         editableFieldName: editableField.fieldName,
         uuid: editableUuid,
@@ -125,8 +127,9 @@ function getInteractedElement(e) {
     }
   }
   if (deepestUuid) {
+    const restrictedAncestor = permissions.getRestrictedAncestor(deepestUuid);
     return {
-      uuid: deepestUuid,
+      uuid: restrictedAncestor ?? deepestUuid,
       timestamp: Date.now(),
       x,
       y

package/dist/runtime/editor/components/BundleSelector/index.d.vue.ts

@@ -1,19 +1,23 @@
 import type { Coord } from '#blokkli/editor/types/geometry';
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
 type __VLS_Props = {
     bundles: string[];
     anchorEl?: HTMLElement;
     anchorCoordinates?: Coord;
     label: string;
     hideActions?: boolean;
+    field?: BlokkliFieldElement;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    select: (id: string) => any;
-    close: () => any;
-    action: (action: AddAction) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => void;
+    fragment: (id: string) => void;
+    action: (action: AddAction) => void;
+    close: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((id: string) => any) | undefined;
     onClose?: (() => any) | undefined;
     onAction?: ((action: AddAction) => any) | undefined;
+    onFragment?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/BundleSelector/index.vue

@@ -13,7 +13,7 @@
       class="bk-selection-add-overlay-wrapper bk-scrollbar-dark"
     >
       <div
-        v-if="items.length > 4"
+        v-if="allItems.length > 4"
         class="bk-selection-add-overlay-form"
         @pointerdown.stop
         @keydown.capture.stop
@@ -47,14 +47,50 @@
   height
 }"
       >
-        <div class="bk-selection-add-overlay-list" @wheel.passive="onWheel">
+        <div
+          v-if="filteredBlocks.length"
+          class="bk-selection-add-overlay-list"
+          @wheel.passive="onWheel"
+        >
           <AddListItem
-            v-for="item in filteredItems"
+            v-for="item in filteredBlocks"
             :key="item.props.id"
             v-bind="item.props"
             @click.prevent="onClick(item)"
           />
         </div>
+        <div
+          v-if="filteredActions.length"
+          class="bk-selection-add-overlay-section"
+        >
+          <div class="bk-selection-add-overlay-section-label">
+            <span>{{ $t("bundleSelectorActionsLabel", "Actions") }}</span>
+          </div>
+          <div class="bk-selection-add-overlay-list" @wheel.passive="onWheel">
+            <AddListItem
+              v-for="item in filteredActions"
+              :key="item.props.id"
+              v-bind="item.props"
+              @click.prevent="onClick(item)"
+            />
+          </div>
+        </div>
+        <div
+          v-if="filteredFragments.length"
+          class="bk-selection-add-overlay-section"
+        >
+          <div class="bk-selection-add-overlay-section-label">
+            <span>{{ $t("bundleSelectorFragmentsLabel", "Fragments") }}</span>
+          </div>
+          <div class="bk-selection-add-overlay-list" @wheel.passive="onWheel">
+            <AddListItem
+              v-for="item in filteredFragments"
+              :key="item.props.id"
+              v-bind="item.props"
+              @click.prevent="onClick(item)"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </ArtboardTooltip>
@@ -72,14 +108,16 @@ import {
 import { ArtboardTooltip, AddListItem, Icon } from "#blokkli/editor/components";
 import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
 import { Fzf } from "fzf";
+import { fragmentBlockBundle } from "#blokkli-build/config";
 const props = defineProps({
   bundles: { type: Array, required: true },
   anchorEl: { type: null, required: false },
   anchorCoordinates: { type: Object, required: false },
   label: { type: String, required: true },
-  hideActions: { type: Boolean, required: false }
+  hideActions: { type: Boolean, required: false },
+  field: { type: Object, required: false }
 });
-const emit = defineEmits(["select", "action", "close"]);
+const emit = defineEmits(["select", "fragment", "action", "close"]);
 const searchText = ref("");
 const width = ref("auto");
 const height = ref("auto");
@@ -106,7 +144,7 @@ function onClearSearchText() {
   }
   searchText.value = "";
 }
-const { types, plugins, storage, $t, definitions } = useBlokkli();
+const { types, plugins, storage, $t, definitions, permissions, ui } = useBlokkli();
 const favorites = storage.use("blockFavorites", []);
 const blocks = computed(() => {
   return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
@@ -139,11 +177,45 @@ const blocks = computed(() => {
     };
   });
 });
+const fragments = computed(() => {
+  if (!props.field || !props.field.allowedFragments.length) {
+    return [];
+  }
+  if (!props.bundles.includes(fragmentBlockBundle)) {
+    return [];
+  }
+  if (!permissions.checkBlockBundlePermission(fragmentBlockBundle, "add")) {
+    return [];
+  }
+  return props.field.allowedFragments.map((name) => {
+    const definition = definitions.getFragmentDefinition(name);
+    if (!definition) {
+      return null;
+    }
+    return {
+      type: "fragment",
+      name,
+      label: definition.label,
+      description: definition.description ?? "",
+      props: {
+        id: "fragment:" + name,
+        label: definition.label,
+        color: "accent",
+        context: "selection-add-buttons",
+        icon: definition.editor?.icon ?? "bk_mdi_newspaper",
+        noContextMenu: true
+      }
+    };
+  }).filter((v) => v !== null);
+});
 const actions = computed(() => {
   if (props.hideActions) {
     return [];
   }
   return plugins.get("addAction").filter((action) => {
+    if (action.id === "fragment" && fragments.value.length) {
+      return false;
+    }
     if (!action.itemBundle) {
       return true;
     }
@@ -165,20 +237,30 @@ const actions = computed(() => {
     };
   });
 });
-const items = computed(() => {
-  return [...blocks.value, ...actions.value];
+const allItems = computed(() => {
+  return [...blocks.value, ...fragments.value, ...actions.value];
 });
-const fzf = new Fzf(items.value, {
+const fzf = new Fzf(allItems.value, {
   selector: (item) => item.label + " " + item.description
 });
-const filteredItems = computed(() => {
+function filterBySearch(items) {
+  const text = searchText.value.trim();
+  if (!text) {
+    return items;
+  }
+  const textLower = text.toLowerCase();
+  return items.filter(
+    (item) => item.label.toLowerCase().includes(textLower) || item.description.toLowerCase().includes(textLower)
+  );
+}
+const filteredBlocks = computed(() => {
   const text = searchText.value.trim();
   if (!text) {
-    return items.value;
+    return blocks.value;
   }
   const results = fzf.find(text);
   const textLower = text.toLowerCase();
-  return results.map((r) => r.item).sort((a, b) => {
+  return results.map((r) => r.item).filter((item) => item.type === "block").sort((a, b) => {
     const aInLabel = a.label.toLowerCase().includes(textLower);
     const bInLabel = b.label.toLowerCase().includes(textLower);
     if (aInLabel && !bInLabel) return -1;
@@ -186,6 +268,8 @@ const filteredItems = computed(() => {
     return 0;
   });
 });
+const filteredFragments = computed(() => filterBySearch(fragments.value));
+const filteredActions = computed(() => filterBySearch(actions.value));
 const onWheel = (e) => {
   if (hasScrollbar === null) {
     const element = scrollEl.value;
@@ -202,10 +286,12 @@ function onClick(item) {
     emit("select", item.bundle);
   } else if (item.type === "action") {
     emit("action", item.action);
+  } else if (item.type === "fragment") {
+    emit("fragment", item.name);
   }
 }
 function onSubmitForm() {
-  const firstResult = filteredItems.value[0];
+  const firstResult = filteredBlocks.value[0] ?? filteredFragments.value[0] ?? filteredActions.value[0];
   if (firstResult) {
     onClick(firstResult);
   }
@@ -214,5 +300,17 @@ onMounted(() => {
   if (inputEl.value) {
     inputEl.value.focus();
   }
+  if (!ui.isMobile.value) {
+    requestAnimationFrame(() => {
+      if (!scrollEl.value) {
+        return;
+      }
+      const rect = scrollEl.value.getBoundingClientRect();
+      const available = window.innerHeight - rect.top - 30;
+      if (available > 0) {
+        scrollEl.value.style.maxHeight = Math.max(available, 200) + "px";
+      }
+    });
+  }
 });
 </script>

package/dist/runtime/editor/components/BundleSelector/index.vue.d.ts

@@ -1,19 +1,23 @@
 import type { Coord } from '#blokkli/editor/types/geometry';
+import type { BlokkliFieldElement } from '#blokkli/editor/types/field';
 type __VLS_Props = {
     bundles: string[];
     anchorEl?: HTMLElement;
     anchorCoordinates?: Coord;
     label: string;
     hideActions?: boolean;
+    field?: BlokkliFieldElement;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    select: (id: string) => any;
-    close: () => any;
-    action: (action: AddAction) => any;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => void;
+    fragment: (id: string) => void;
+    action: (action: AddAction) => void;
+    close: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onSelect?: ((id: string) => any) | undefined;
     onClose?: (() => any) | undefined;
     onAction?: ((action: AddAction) => any) | undefined;
+    onFragment?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/EditProvider.vue

@@ -203,7 +203,8 @@ const ui = uiProvider(
 const dom = domProvider(ui, debug, state, element);
 const theme = themeProvider(element);
 const blocks = blocksProvider(state, dom, context);
-const selection = selectionProvider(blocks);
+const permissionsInstance = await permissionsProvider(adapter, blocks);
+const selection = selectionProvider(blocks, permissionsInstance);
 const keyboard = keyboardProvider(eventBus);
 const animation = animationProvider(
   eventBus,
@@ -217,7 +218,6 @@ const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const directive = directiveProvider(debug, ui);
 const fields = fieldsProvider(dom, types, state);
-const permissionsInstance = await permissionsProvider(adapter);
 const fieldValue = fieldValueProviderFn(
   adapters,
   directive,

package/dist/runtime/editor/components/FlexTextarea/index.vue

@@ -22,7 +22,14 @@
 </template>
 
 <script setup>
-import { useTemplateRef, ref, computed, watch, onMounted, useBlokkli } from "#imports";
+import {
+  useTemplateRef,
+  ref,
+  computed,
+  watch,
+  onMounted,
+  useBlokkli
+} from "#imports";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 import { ClipboardData } from "#blokkli/editor/helpers/clipboardData";
 import { textAutoReplace } from "#blokkli-build/editor-config";