@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.37

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

@@ -16,6 +16,8 @@
 import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
 import { PluginItemAction } from "#blokkli/editor/plugins";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { featureFragmentNames } from "#blokkli-build/editor-config";
+import { fragmentBlockBundle } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "edit",
   icon: "bk_mdi_edit",
@@ -27,11 +29,20 @@ const { eventBus, selection, state, $t, adapter, definitions, permissions } = us
 const userCanEditLibraryItems = computed(
   () => permissions.hasPermission("edit_library_item")
 );
+function isFragment(item) {
+  return item.bundle === fragmentBlockBundle;
+}
+function isFeatureFragment(item) {
+  return !!item.fragment?.name && featureFragmentNames.includes(item.fragment.name);
+}
 const canEdit = computed(() => {
   const item = selection.item.value;
   if (!item) {
     return false;
   }
+  if (isFragment(item)) {
+    return isFeatureFragment(item);
+  }
   const definition = definitions.getBlockDefinition(
     item.bundle,
     item.fieldListType,
@@ -66,6 +77,15 @@ function onClick(items) {
     });
     return;
   }
+  if (isFragment(item)) {
+    if (isFeatureFragment(item)) {
+      eventBus.emit("fragment:edit", {
+        uuid: item.uuid,
+        name: item.fragment.name
+      });
+    }
+    return;
+  }
   eventBus.emit("item:edit", {
     uuid: item.uuid,
     bundle: item.bundle

package/dist/runtime/editor/features/editable-field/Overlay/Plaintext/index.vue

@@ -5,15 +5,18 @@
     v-model="modelValue"
     class="bk bk-editable-field-textarea"
     enterkeyhint="done"
+    submit-on-enter
     rows="2"
     v-bind="inputAttributes"
+    autofocus
     @keydown="onKeyDown"
     @blur="onBlur"
+    @submit="save"
   />
 </template>
 
 <script setup>
-import { useBlokkli, computed, useTemplateRef } from "#imports";
+import { useBlokkli, computed } from "#imports";
 import { FlexTextarea } from "#blokkli/editor/components";
 const { ui, selection } = useBlokkli();
 const props = defineProps({
@@ -23,7 +26,6 @@ const props = defineProps({
 });
 const modelValue = defineModel({ type: String, ...{ required: true } });
 const emit = defineEmits(["discard", "save"]);
-const textarea = useTemplateRef("textarea");
 function discard() {
   emit("discard");
 }
@@ -38,8 +40,6 @@ const onKeyDown = (e) => {
   if (e.code === "Escape") {
     e.preventDefault();
     discard();
-  } else if (e.code === "Enter") {
-    e.preventDefault();
     save();
   }
 };

package/dist/runtime/editor/features/editable-field/Overlay/index.vue

@@ -45,6 +45,12 @@
         <div v-if="errorText" class="bk-editable-field-info-error">
           {{ errorText }}
         </div>
+        <div
+          v-else-if="config.type === 'plain'"
+          class="bk-editable-field-info-hint"
+        >
+          {{ $t("textareaNewLineHint", "Shift + Enter for new line") }}
+        </div>
         <div v-if="!isMarkup" class="bk-editable-field-info-count">
           <span>{{ count }}</span>
           <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>

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

@@ -3,6 +3,7 @@ export type AdapterFragmentsAddBlock = {
     name: string;
     host: BlokkliItemHost;
     preceedingUuid: string | null;
+    options?: Record<string, string>;
 };
 declare module '#blokkli/editor/adapter' {
     interface BlokkliAdapter<T> {

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

@@ -15,7 +15,17 @@ import { RectangleBufferCollector } from "#blokkli/editor/helpers/webgl";
 import { isInsideRect } from "#blokkli/editor/helpers/geometry";
 import { toShaderColor } from "#blokkli/editor/helpers/color";
 import { defineRenderer, onBlokkliEvent } from "#blokkli/editor/composables";
-const { animation, theme, dom, selection, state, ui, directive, blocks } = useBlokkli();
+const {
+  animation,
+  theme,
+  dom,
+  selection,
+  state,
+  ui,
+  directive,
+  blocks,
+  fields
+} = useBlokkli();
 const MAX_RECTS = 11;
 function getDeepestUuid(uuids) {
   if (uuids.length === 0) {
@@ -29,6 +39,10 @@ function getDeepestUuid(uuids) {
     if (level > maxLevel) {
       maxLevel = level;
       deepestUuid = uuid;
+    } else if (level === maxLevel) {
+      if (fields.compareFieldPriority(uuid, deepestUuid) > 0) {
+        deepestUuid = uuid;
+      }
     }
   }
   return deepestUuid;
@@ -119,12 +133,22 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   ) || deepestUuid !== previousDeepestUuid;
   let hoveredEditableFieldRect = null;
   const editableRects = directive.getVisible("editable");
+  let fallbackEditableRect = null;
   for (let i = 0; i < editableRects.length; i++) {
     const editableRect = editableRects[i];
-    if (isInsideRect(artboardMouseX, artboardMouseY, editableRect)) {
+    if (!isInsideRect(artboardMouseX, artboardMouseY, editableRect)) continue;
+    const key = editableRect.key;
+    const entityUuid = key.split(":")[2];
+    if (deepestUuid && entityUuid === deepestUuid) {
       hoveredEditableFieldRect = editableRect;
       break;
     }
+    if (!fallbackEditableRect && !hoveredUuids.includes(entityUuid)) {
+      fallbackEditableRect = editableRect;
+    }
+  }
+  if (!hoveredEditableFieldRect) {
+    hoveredEditableFieldRect = fallbackEditableRect;
   }
   if (!hoveredChanged) {
     const editableFieldChanged = hoveredEditableFieldRect === null !== (previousEditableFieldRect === null) || hoveredEditableFieldRect && previousEditableFieldRect && (hoveredEditableFieldRect.x !== previousEditableFieldRect.x || hoveredEditableFieldRect.y !== previousEditableFieldRect.y || hoveredEditableFieldRect.width !== previousEditableFieldRect.width || hoveredEditableFieldRect.height !== previousEditableFieldRect.height);
@@ -138,7 +162,10 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
   for (let i = 0; i < unselectedHoveredUuids.length; i++) {
     const uuid = unselectedHoveredUuids[i];
     const level = Math.min(state.getNestingLevel(uuid), 9);
-    if (!nestingMap.has(level)) {
+    const existing = nestingMap.get(level);
+    if (!existing) {
+      nestingMap.set(level, uuid);
+    } else if (fields.compareFieldPriority(uuid, existing) > 0) {
       nestingMap.set(level, uuid);
     }
   }

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

@@ -17,7 +17,7 @@ defineBlokkliFeature({
 const { selection, ui, dom, animation, $t } = useBlokkli();
 const isLocked = ref(false);
 const isVisible = computed(
-  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+  () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeEditableLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.hasNestedEditorOpen.value && !ui.isAnimating.value
 );
 </script>
 

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

@@ -64,6 +64,7 @@ import {
 } from "#blokkli/editor/components";
 import {
   defineAddAction,
+  defineDropHandler,
   onBlokkliEvent,
   useDialog
 } from "#blokkli/editor/composables";
@@ -183,6 +184,19 @@ function onSubmitLibraryItem() {
   eventBus.emit("reloadState");
   cancelLibraryItemEdit();
 }
+defineDropHandler("reusable", {
+  async execute({ items, host, afterUuid }) {
+    if (adapter.addLibraryItem) {
+      await state.mutateWithLoadingState(
+        () => adapter.addLibraryItem({
+          libraryItemUuid: items[0].libraryItemUuid,
+          host,
+          afterUuid
+        })
+      );
+    }
+  }
+});
 defineAddAction(() => {
   if (!adapter.addLibraryItem || !adapter.getLibraryItems || !isSupportedOnEntity.value) {
     return;

package/dist/runtime/editor/features/media-library/index.vue

@@ -22,7 +22,7 @@ import { PluginSidebar } from "#blokkli/editor/plugins";
 import Library from "./Library/index.vue";
 import { falsy } from "#blokkli/helpers";
 import { itemEntityType } from "#blokkli-build/config";
-import { defineDropAreas } from "#blokkli/editor/composables";
+import { defineDropAreas, defineDropHandler } from "#blokkli/editor/composables";
 defineBlokkliFeature({
   id: "media-library",
   icon: "bk_mdi_image",
@@ -99,6 +99,37 @@ defineDropAreas((dragItems) => {
     }
   }).filter(falsy);
 });
+defineDropHandler("media_library", {
+  resolveBundles({ items, field }) {
+    const allSameBundles = [...new Set(items.map((v) => v.mediaBundle)).values()].length === 1;
+    if (!allSameBundles) {
+      return [];
+    }
+    const item = items[0];
+    return field.allowedBundles.filter((b) => item.itemBundles.includes(b));
+  },
+  async execute({ items, host, afterUuid, bundle }) {
+    if (adapter.mediaLibraryAddBlock && items.length === 1) {
+      await state.mutateWithLoadingState(
+        () => adapter.mediaLibraryAddBlock({
+          preceedingUuid: afterUuid,
+          host,
+          item: items[0],
+          targetBundle: bundle
+        })
+      );
+    } else if (adapter.mediaLibraryAddBlocks && items.length > 1) {
+      await state.mutateWithLoadingState(
+        () => adapter.mediaLibraryAddBlocks({
+          preceedingUuid: afterUuid,
+          host,
+          items,
+          targetBundle: bundle
+        })
+      );
+    }
+  }
+});
 </script>
 
 <script>

package/dist/runtime/editor/features/options/Form/Checkbox/index.d.vue.ts

@@ -3,14 +3,14 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

package/dist/runtime/editor/features/options/Form/Checkbox/index.vue

@@ -13,16 +13,16 @@ const { $t, state } = useBlokkli();
 const props = defineProps({
   label: { type: String, required: true },
   property: { type: String, required: true },
-  modelValue: { type: String, required: false },
+  modelValue: { type: Boolean, required: false },
   required: { type: Boolean, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const checked = computed({
   get() {
-    return props.modelValue === "1";
+    return props.modelValue ?? false;
   },
   set(v) {
-    emit("update:modelValue", v ? "1" : "0");
+    emit("update:modelValue", v);
   }
 });
 defineCommands(() => {

package/dist/runtime/editor/features/options/Form/Checkbox/index.vue.d.ts

@@ -3,14 +3,14 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: boolean;
     required?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;

package/dist/runtime/editor/features/options/Form/Checkboxes/index.d.vue.ts

@@ -3,7 +3,7 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;
@@ -14,7 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;

package/dist/runtime/editor/features/options/Form/Checkboxes/index.vue

@@ -43,7 +43,7 @@ const { $t, state } = useBlokkli();
 const props = defineProps({
   label: { type: String, required: true },
   property: { type: String, required: true },
-  modelValue: { type: String, required: false },
+  modelValue: { type: Array, required: false },
   options: { type: Array, required: true },
   isGrouped: { type: Boolean, required: false }
 });
@@ -52,13 +52,13 @@ const isOpen = ref(false);
 const optionOrder = computed(() => props.options.map((v) => v.value));
 const checked = computed({
   get() {
-    return (props.modelValue || "").split(",").filter(Boolean);
+    return props.modelValue || [];
   },
   set(newValue) {
-    const storedValue = newValue.filter(Boolean).sort((a, b) => {
+    const sorted = newValue.filter(Boolean).sort((a, b) => {
       return optionOrder.value.indexOf(a) - optionOrder.value.indexOf(b);
-    }).join(",");
-    emit("update:modelValue", storedValue);
+    });
+    emit("update:modelValue", sorted);
   }
 });
 const visibleLabel = computed(() => {

package/dist/runtime/editor/features/options/Form/Checkboxes/index.vue.d.ts

@@ -3,7 +3,7 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;
@@ -14,7 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
     property: string;
-    modelValue?: string;
+    modelValue?: string[];
     options: {
         value: string;
         label: string;

package/dist/runtime/editor/features/options/Form/ComplexType/index.d.vue.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    uuid: string;
+    property: string;
+    dataType: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    uuid: string;
+    property: string;
+    dataType: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/ComplexType/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <button
+    v-if="config"
+    class="bk-blokkli-item-options-complex-type"
+    @click="onClick"
+  >
+    <Icon :name="config.editorIcon" />
+    <span>{{ $t(config.editorButtonLabel, config.editorButtonLabel) }}</span>
+  </button>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { COMPLEX_OPTION_TYPES } from "#blokkli-build/complex-option-types";
+const { eventBus, $t } = useBlokkli();
+const props = defineProps({
+  uuid: { type: String, required: true },
+  property: { type: String, required: true },
+  dataType: { type: String, required: true }
+});
+const config = COMPLEX_OPTION_TYPES[props.dataType];
+function onClick() {
+  eventBus.emit("option:edit-complex", {
+    uuid: props.uuid,
+    key: props.property,
+    dataType: props.dataType
+  });
+}
+</script>
+
+<script>
+export default {
+  name: "OptionsFormComplexType"
+};
+</script>

package/dist/runtime/editor/features/options/Form/ComplexType/index.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    uuid: string;
+    property: string;
+    dataType: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    uuid: string;
+    property: string;
+    dataType: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/options/Form/Item.d.vue.ts

@@ -1,14 +1,15 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+import type { BlockOptionDefinitionBase } from './../../../../../global/types/blockOptions.js';
 type __VLS_Props = {
-    option: BlockOptionDefinition;
+    option: BlockOptionDefinitionBase;
     property: string;
     mutatedValue: any;
     isGrouped?: boolean;
+    uuid?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    update: (data: string) => any;
+    update: (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onUpdate?: ((data: string) => any) | undefined;
+    onUpdate?: ((data: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/options/Form/Item.vue

@@ -74,6 +74,12 @@
         :min="option.min"
         :max="option.max"
       />
+      <OptionComplexType
+        v-else-if="option.type === 'json' && option.dataType && uuid"
+        :uuid="uuid"
+        :property="property"
+        :data-type="option.dataType"
+      />
     </div>
   </div>
 </template>
@@ -88,18 +94,16 @@ import OptionColor from "./Color/index.vue";
 import OptionRange from "./Range/index.vue";
 import OptionNumber from "./Number/index.vue";
 import OptionDateTimeLocal from "./DateTimeLocal/index.vue";
-import {
-  isValidDatetimeLocalValue,
-  mapCheckboxTrue
-} from "#blokkli/helpers/runtimeHelpers";
+import OptionComplexType from "./ComplexType/index.vue";
 import { BK_VISIBLE_LANGUAGES } from "./../../../../../global/constants";
 const { state, $t: $blokkliText } = useBlokkli();
 const emit = defineEmits(["update"]);
 const props = defineProps({
-  option: { type: Object, required: true },
+  option: { type: null, required: true },
   property: { type: String, required: true },
   mutatedValue: { type: null, required: true },
-  isGrouped: { type: Boolean, required: false }
+  isGrouped: { type: Boolean, required: false },
+  uuid: { type: String, required: false }
 });
 const hoveredOption = ref("");
 const showLabel = computed(() => {
@@ -113,12 +117,17 @@ const showLabel = computed(() => {
 const label = computed(
   () => $blokkliText(`blockOption_${props.property}_label`, props.option.label)
 );
-const description = computed(
-  () => $blokkliText(
-    `blockOption_${props.property}_description`,
-    props.option.description
-  )
-);
+const description = computed(() => {
+  if (!props.option.description) {
+    return null;
+  }
+  const key = `blockOption_${props.property}_description`;
+  const translation = $blokkliText(key, props.option.description);
+  if (key === translation) {
+    return null;
+  }
+  return translation;
+});
 const checkboxOptions = computed(() => {
   if (props.option.type !== "checkboxes") {
     return [];
@@ -140,47 +149,12 @@ const checkboxOptions = computed(() => {
     };
   });
 });
-const validCheckboxValues = computed(
-  () => checkboxOptions.value.map((v) => v.value)
-);
-const validateValue = (v) => {
-  if (props.option.type === "text") {
-    if (typeof v === "string") {
-      return v;
-    }
-  } else if (props.option.type === "datetime-local") {
-    if (typeof v === "string" && isValidDatetimeLocalValue(v)) {
-      return v;
-    }
-  } else if (props.option.type === "color") {
-    if (typeof v === "string" && v.startsWith("#") && v.length === 7) {
-      return v;
-    }
-  } else if (props.option.type === "radios" && typeof v === "string") {
-    if (props.option.options[v]) {
-      return v;
-    }
-  } else if (props.option.type === "checkbox") {
-    return mapCheckboxTrue(v);
-  } else if (props.option.type === "checkboxes") {
-    const items = Array.isArray(v) ? v : (typeof v === "string" ? v : "").split(",");
-    return items.filter((key) => {
-      return validCheckboxValues.value.includes(key);
-    }).join(",");
-  } else if (props.option.type === "range" || props.option.type === "number") {
-    if (typeof v === "number") {
-      return v.toString();
-    } else if (typeof v === "string") {
-      return v;
-    }
-  }
-};
 const value = computed({
   get() {
-    return validateValue(props.mutatedValue);
+    return props.mutatedValue;
   },
-  set(value2) {
-    emit("update", value2 === void 0 ? "" : value2);
+  set(v) {
+    emit("update", v);
   }
 });
 </script>

package/dist/runtime/editor/features/options/Form/Item.vue.d.ts

@@ -1,14 +1,15 @@
-import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
+import type { BlockOptionDefinitionBase } from './../../../../../global/types/blockOptions.js';
 type __VLS_Props = {
-    option: BlockOptionDefinition;
+    option: BlockOptionDefinitionBase;
     property: string;
     mutatedValue: any;
     isGrouped?: boolean;
+    uuid?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    update: (data: string) => any;
+    update: (data: unknown) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onUpdate?: ((data: string) => any) | undefined;
+    onUpdate?: ((data: unknown) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/features/options/Form/Number/index.d.vue.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     type?: string;
@@ -18,5 +18,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }>, {
     type: string;
-    modelValue: string;
+    modelValue: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;