@blokkli/editor 2.0.0-alpha.17 → 2.0.0-alpha.18

package/dist/runtime/helpers/stateProvider.js

@@ -57,12 +57,12 @@ export default async function(adapter, context, $t, providerKey, permissions) {
   });
   let fieldBlockCount = {};
   const blockBundleCount = ref({});
-  const fieldListItemMap = /* @__PURE__ */ new Map();
+  const fieldListItemMap = ref({});
   let bundleToUuids = {};
   const fromLibraryUuids = ref([]);
   const nestingLevelMap = /* @__PURE__ */ new Map();
   function getFieldListItem(uuid) {
-    const fieldKey = fieldListItemMap.get(uuid);
+    const fieldKey = fieldListItemMap.value[uuid];
     if (!fieldKey) {
       return;
     }
@@ -72,8 +72,11 @@ export default async function(adapter, context, $t, providerKey, permissions) {
     }
     return field.list.find((v) => v.uuid === uuid);
   }
+  function getFieldKeyForUuid(uuid) {
+    return fieldListItemMap.value[uuid] ?? null;
+  }
   function getFieldListForBlock(uuid) {
-    const fieldKey = fieldListItemMap.get(uuid);
+    const fieldKey = fieldListItemMap.value[uuid];
     if (!fieldKey) {
       return;
     }
@@ -143,7 +146,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
     mutatedEntity.value = context2?.mutatedEntity;
     const visitedFieldKeys = [];
     const newBlockBundleCount = {};
-    fieldListItemMap.clear();
+    fieldListItemMap.value = {};
     nestingLevelMap.clear();
     fieldBlockCount = {};
     bundleToUuids = {};
@@ -162,7 +165,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
           newBlockBundleCount[item.bundle] = 0;
         }
         newBlockBundleCount[item.bundle]++;
-        fieldListItemMap.set(item.uuid, key);
+        fieldListItemMap.value[item.uuid] = key;
         if (!bundleToUuids[item.bundle]) {
           bundleToUuids[item.bundle] = [];
         }
@@ -217,7 +220,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
   }
   function getAllUuids(bundle) {
     if (!bundle) {
-      return [...fieldListItemMap.keys()];
+      return [...Object.keys(fieldListItemMap.value)];
     }
     return bundleToUuids[bundle] ?? [];
   }
@@ -226,7 +229,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
     if (cached !== void 0) {
       return cached;
     }
-    const fieldKey = fieldListItemMap.get(uuid);
+    const fieldKey = fieldListItemMap.value[uuid];
     if (!fieldKey) {
       nestingLevelMap.set(uuid, 0);
       return 0;
@@ -237,7 +240,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
       return 0;
     }
     const parentEntityUuid = field.entityUuid;
-    const parentFieldKey = fieldListItemMap.get(parentEntityUuid);
+    const parentFieldKey = fieldListItemMap.value[parentEntityUuid];
     if (!parentFieldKey) {
       nestingLevelMap.set(uuid, 0);
       return 0;
@@ -251,7 +254,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
     return nestingLevelMap.get(uuid) ?? 0;
   }
   function isChildOf(childUuid, parentUuid) {
-    const fieldKey = fieldListItemMap.get(childUuid);
+    const fieldKey = fieldListItemMap.value[childUuid];
     if (!fieldKey) {
       return false;
     }
@@ -289,11 +292,13 @@ export default async function(adapter, context, $t, providerKey, permissions) {
       }
       return true;
     } catch (e) {
-      emitMessage(
-        errorMessage || $t("unexpectedMutationError", "An unexpected error happened."),
-        "error",
-        e
-      );
+      if (errorMessage !== false) {
+        emitMessage(
+          errorMessage || $t("unexpectedMutationError", "An unexpected error happened."),
+          "error",
+          e
+        );
+      }
     }
     unlockBody();
     return false;
@@ -386,6 +391,7 @@ export default async function(adapter, context, $t, providerKey, permissions) {
     setOverrideState,
     clearOverrideState,
     fromLibraryUuids: readonly(fromLibraryUuids),
-    permissions: computed(() => permissions)
+    permissions: computed(() => permissions),
+    getFieldKeyForUuid
   };
 }

package/dist/runtime/helpers/themeProvider.d.ts

@@ -1,6 +1,7 @@
 import type { DraggableStyle } from '#blokkli/types';
 import type { RGB, ThemeColorGroup, ThemeColorShade, ThemeColors, ThemeContextColorGroup, ThemeContextColorShade, ThemeContextColors, ThemeName } from '#blokkli/types/theme';
 import { type Ref } from '#imports';
+import type { ElementProvider } from './providers/element.js';
 type ThemeMap = {
     accent: Ref<ThemeColors>;
     mono: Ref<ThemeColors>;
@@ -25,5 +26,5 @@ export type ThemeProvider = {
     getColor<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T): RGB;
     getColorString<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T, alpha?: number): string;
 };
-export default function (): ThemeProvider;
+export default function (element: ElementProvider): ThemeProvider;
 export {};

package/dist/runtime/helpers/themeProvider.js

@@ -3,7 +3,15 @@ import { ref, onMounted, onBeforeUnmount } from "#imports";
 import { rgbaToString } from "./index.js";
 import { DragStyle } from "./DragStyle/index.js";
 import onBlokkliEvent from "./composables/onBlokkliEvent.js";
-export default function() {
+export default function(element) {
+  const rootElement = element.query(
+    document,
+    ":root",
+    "Get document root element for setting theme color."
+  );
+  if (!rootElement) {
+    throw new Error("Failed to query :root - is this even possible?");
+  }
   const originalBrowserThemeColor = ref("");
   const THEME_COLOR = "black";
   const accent = ref(theme.accent);
@@ -44,13 +52,10 @@ export default function() {
     } else if (group === "lime") {
       lime.value[shade] = value;
     }
-    const root = document.querySelector(":root");
-    if (root instanceof HTMLElement) {
-      root.style.setProperty(
-        `--bk-theme-${group}-${shade}`,
-        `${value[0]} ${value[1]} ${value[2]}`
-      );
-    }
+    rootElement.style.setProperty(
+      `--bk-theme-${group}-${shade}`,
+      `${value[0]} ${value[1]} ${value[2]}`
+    );
   };
   const setColorsFromTheme = (v) => {
     Object.entries(v).forEach(([group, colors]) => {
@@ -79,7 +84,11 @@ export default function() {
     }
   };
   onMounted(() => {
-    const el = document.head.querySelectorAll('[name="theme-color"]');
+    const el = element.query(
+      document.head,
+      '[name="theme-color"]',
+      "Theme: theme-color"
+    );
     if (el instanceof HTMLMetaElement) {
       originalBrowserThemeColor.value = el.content;
       el.content = THEME_COLOR;
@@ -87,14 +96,15 @@ export default function() {
       const meta = document.createElement("meta");
       meta.name = "theme-color";
       meta.content = THEME_COLOR;
-      const head = document.getElementsByTagName("head")[0];
-      if (head) {
-        head.appendChild(meta);
-      }
+      document.head.appendChild(meta);
     }
   });
   onBeforeUnmount(() => {
-    const el = document.head.querySelectorAll('[name="theme-color"]');
+    const el = element.query(
+      document.head,
+      '[name="theme-color"]',
+      "Theme: theme-color"
+    );
     if (el instanceof HTMLMetaElement) {
       if (originalBrowserThemeColor.value) {
         el.content = originalBrowserThemeColor.value;

package/dist/runtime/helpers/typesProvider.js

@@ -1,5 +1,4 @@
-import { eventBus } from "#blokkli/helpers/eventBus";
-import { useRuntimeConfig, computed, watch } from "#imports";
+import { useRuntimeConfig, computed } from "#imports";
 import { onlyUnique } from "./index.js";
 class ConfigMap {
   configs = [];
@@ -52,38 +51,23 @@ export default async function(adapter, selection, context) {
   const droppableFieldConfigData = adapter.getDroppableFieldConfig ? await adapter.getDroppableFieldConfig() : [];
   const droppableFieldConfig = new ConfigMap(droppableFieldConfigData);
   const allowedTypesInList = computed(() => {
-    if (!selection.blocks.value.length) {
+    if (!selection.items.value.length) {
       return [];
     }
     let hostType = "";
     let hostBundle = "";
     let fieldName = "";
-    for (let i = 0; i < selection.blocks.value.length; i++) {
-      const block = selection.blocks.value[i];
-      if (i !== 0 && (hostType !== block.hostType || hostBundle !== block.hostBundle || fieldName !== block.hostFieldName)) {
+    for (let i = 0; i < selection.items.value.length; i++) {
+      const block = selection.items.value[i];
+      if (i !== 0 && (hostType !== block.host.type || hostBundle !== block.host.bundle || fieldName !== block.host.fieldName)) {
         return [];
       }
-      hostType = block.hostType;
-      hostBundle = block.hostBundle;
-      fieldName = block.hostFieldName;
+      hostType = block.host.type;
+      hostBundle = block.host.bundle;
+      fieldName = block.host.fieldName;
     }
     return fieldConfig.forName(hostType, hostBundle, fieldName)?.allowedBundles || [];
   });
-  watch(selection.blocks, () => {
-    if (selection.blocks.value.length !== 1) {
-      return;
-    }
-    const item = selection.blocks.value[0];
-    const hasNested = itemBundlesWithNested.includes(item.itemBundle);
-    if (hasNested) {
-      const nestedFields = fieldConfig.forEntityTypeAndBundle(itemEntityType, item.itemBundle).map((v) => v.name) || [];
-      if (nestedFields.length === 1) {
-        eventBus.emit("setActiveFieldKey", `${item.uuid}:${nestedFields[0]}`);
-        return;
-      }
-    }
-    eventBus.emit("setActiveFieldKey", `${item.hostUuid}:${item.hostFieldName}`);
-  });
   const itemBundlesWithNested = fieldConfig.forEntityType(itemEntityType).map((v) => v.entityBundle) || [];
   const typeMap = bundleDefinitions.reduce((acc, type) => {
     acc[type.id] = type;
@@ -96,8 +80,8 @@ export default async function(adapter, selection, context) {
     return fieldConfig.forName(entityType, entityBundle, fieldName);
   }
   function getDroppableFieldConfig(fieldName, host) {
-    const entityType = "entityType" in host ? host.entityType : host.type;
-    const entityBundle = "itemBundle" in host ? host.itemBundle : host.bundle;
+    const entityType = "itemType" in host ? host.block.host.type : host.type;
+    const entityBundle = "itemType" in host ? host.block.host.bundle : host.bundle;
     const config = droppableFieldConfig.forName(
       entityType,
       entityBundle,

package/dist/runtime/helpers/uiProvider.d.ts

@@ -5,10 +5,11 @@ import type { Viewport } from '#blokkli/constants';
 import type { StateProvider } from './stateProvider.js';
 import type { AdapterContext } from '#blokkli/adapter';
 import type { ThemeColorName } from '#blokkli/types/theme';
+import type { ElementProvider } from './providers/element.js';
 export type UiProvider = {
     rootElement: () => HTMLElement;
     artboardElement: () => HTMLElement;
-    providerElement: () => HTMLElement;
+    providerElement: HTMLElement;
     menu: {
         isOpen: Readonly<Ref<boolean>>;
         close: () => void;
@@ -52,4 +53,4 @@ export type UiProvider = {
     setBannerHeight: (id: string, height: number) => void;
     removeBanner: (id: string) => void;
 };
-export default function (storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>): UiProvider;
+export default function (providerElement: HTMLElement, storage: StorageProvider, state: StateProvider, context: ComputedRef<AdapterContext>, element: ElementProvider): UiProvider;

package/dist/runtime/helpers/uiProvider.js

@@ -15,10 +15,9 @@ const localeMap = {
   it: "it-CH",
   en: "en-GB"
 };
-export default function(storage, state, context) {
+export default function(providerElement, storage, state, context, element) {
   let cachedRootElement = null;
   let cachedArtboardElement = null;
-  let cachedProviderElement = null;
   const interfaceLanguage = computed(() => {
     return forceDefaultLanguage ? defaultLanguage : context.value.language;
   });
@@ -86,7 +85,11 @@ export default function(storage, state, context) {
     if (cachedArtboardElement) {
       return cachedArtboardElement;
     }
-    const el = document.querySelector(".bk-main-canvas");
+    const el = element.query(
+      document.documentElement,
+      ".bk-main-canvas",
+      "Get main canvas."
+    );
     if (!el || !(el instanceof HTMLElement)) {
       throw new Error("Failed to locate artboard element.");
     }
@@ -97,24 +100,17 @@ export default function(storage, state, context) {
     if (cachedRootElement) {
       return cachedRootElement;
     }
-    const el = document.querySelector("#nuxt-root");
+    const el = element.query(
+      document.documentElement,
+      "#nuxt-root",
+      "Get Nuxt root element."
+    );
     if (!el || !(el instanceof HTMLElement)) {
       throw new Error("Failed to locate root Nuxt element.");
     }
     cachedRootElement = el;
     return el;
   };
-  const providerElement = () => {
-    if (cachedProviderElement) {
-      return cachedProviderElement;
-    }
-    const el = document.querySelector('[data-blokkli-provider-active="true"]');
-    if (!el || !(el instanceof HTMLElement)) {
-      throw new Error("Failed to locate provider element.");
-    }
-    cachedProviderElement = el;
-    return el;
-  };
   const appViewport = computed(() => {
     if (viewportWidth.value < 1024) {
       return "mobile";

package/dist/runtime/icons/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 11H9V13H7V11M21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5M5 7H19V5H5V7M19 19V9H5V19H19M15 13V11H17V13H15M11 13V11H13V13H11M7 15H9V17H7V15M15 17V15H17V17H15M11 17V15H13V17H11Z" /></svg>

package/dist/runtime/icons/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" /></svg>

package/dist/runtime/icons/comment_add.svg

@@ -1,5 +1 @@
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z" /></svg>

package/dist/runtime/icons/delete.svg

@@ -1,8 +1 @@
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 32 32"
-  >
-    <path
-      d="M 15 4 C 14.476563 4 13.941406 4.183594 13.5625 4.5625 C 13.183594 4.941406 13 5.476563 13 6 L 13 7 L 7 7 L 7 9 L 8 9 L 8 25 C 8 26.644531 9.355469 28 11 28 L 23 28 C 24.644531 28 26 26.644531 26 25 L 26 9 L 27 9 L 27 7 L 21 7 L 21 6 C 21 5.476563 20.816406 4.941406 20.4375 4.5625 C 20.058594 4.183594 19.523438 4 19 4 Z M 15 6 L 19 6 L 19 7 L 15 7 Z M 10 9 L 24 9 L 24 25 C 24 25.554688 23.554688 26 23 26 L 11 26 C 10.445313 26 10 25.554688 10 25 Z M 12 12 L 12 23 L 14 23 L 14 12 Z M 16 12 L 16 23 L 18 23 L 18 12 Z M 20 12 L 20 23 L 22 23 L 22 12 Z"
-    ></path>
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" /></svg>

package/dist/runtime/icons/duplicate.svg

@@ -1,12 +1 @@
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    width="100"
-    height="100"
-    viewBox="0 0 32 32"
-  >
-    <path
-      d="M 8 4 L 8 8 L 4 8 L 4 28 L 24 28 L 24 27 L 24 24 L 28 24 L 28 4 L 8 4 z M 10 6 L 26 6 L 26 22 L 24 22 L 24 8 L 10 8 L 10 6 z M 6 10 L 22 10 L 22 26 L 6 26 L 6 10 z M 13 14 L 13 17 L 10 17 L 10 19 L 13 19 L 13 22 L 15 22 L 15 19 L 18 19 L 18 17 L 15 17 L 15 14 L 13 14 z"
-    ></path>
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 11H15V14H13V11H10V9H13V6H15V9H18M20 4V16H8V4H20M20 2H8C6.9 2 6 2.9 6 4V16C6 17.11 6.9 18 8 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M4 6H2V20C2 21.11 2.9 22 4 22H18V20H4V6Z" /></svg>

package/dist/runtime/icons/edit.svg

@@ -1,8 +1 @@
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 32 32"
-  >
-    <path
-      d="M 23.90625 3.96875 C 22.859375 3.96875 21.8125 4.375 21 5.1875 L 5.1875 21 L 5.125 21.3125 L 4.03125 26.8125 L 3.71875 28.28125 L 5.1875 27.96875 L 10.6875 26.875 L 11 26.8125 L 26.8125 11 C 28.4375 9.375 28.4375 6.8125 26.8125 5.1875 C 26 4.375 24.953125 3.96875 23.90625 3.96875 Z M 23.90625 5.875 C 24.410156 5.875 24.917969 6.105469 25.40625 6.59375 C 26.378906 7.566406 26.378906 8.621094 25.40625 9.59375 L 24.6875 10.28125 L 21.71875 7.3125 L 22.40625 6.59375 C 22.894531 6.105469 23.402344 5.875 23.90625 5.875 Z M 20.3125 8.71875 L 23.28125 11.6875 L 11.1875 23.78125 C 10.53125 22.5 9.5 21.46875 8.21875 20.8125 Z M 6.9375 22.4375 C 8.136719 22.921875 9.078125 23.863281 9.5625 25.0625 L 6.28125 25.71875 Z"
-    ></path>
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>

package/dist/runtime/icons/reusable.svg

@@ -1,5 +1 @@
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      d="M7.17 7.91L8.9 8.91L12.08 3.42L14.33 7.31L11.73 8.81L17.19 10.27L18.66 4.81L16.06 6.31L13.81 2.41C13.26 1.45 12.03 1.12 11.08 1.68C10.81 1.83 10.58 2.05 10.41 2.31M10 20V18L3.66 18L5.9 14.1L8.5 15.6L7.04 10.14L1.57 11.6L4.17 13.1L1.92 17C1.37 17.96 1.7 19.18 2.65 19.73C2.92 19.89 3.22 19.97 3.54 20M19.06 11.5L17.32 12.5L20.5 18H16V15L12 19L16 23V20H20.5C21.61 20 22.5 19.11 22.5 18C22.5 17.69 22.42 17.38 22.28 17.11Z"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.17 7.91L8.9 8.91L12.08 3.42L14.33 7.31L11.73 8.81L17.19 10.27L18.66 4.81L16.06 6.31L13.81 2.41C13.26 1.45 12.03 1.12 11.08 1.68C10.81 1.83 10.58 2.05 10.41 2.31M10 20V18L3.66 18L5.9 14.1L8.5 15.6L7.04 10.14L1.57 11.6L4.17 13.1L1.92 17C1.37 17.96 1.7 19.18 2.65 19.73C2.92 19.89 3.22 19.97 3.54 20M19.06 11.5L17.32 12.5L20.5 18H16V15L12 19L16 23V20H20.5C21.61 20 22.5 19.11 22.5 18C22.5 17.69 22.42 17.38 22.28 17.11Z" /></svg>

package/dist/runtime/plugins/{blokkliEditable.js → blokkliDirectives.js}

@@ -28,8 +28,9 @@ function isEditing() {
   }
   return false;
 }
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.directive("blokkli-editable", {
+function createDirective(type) {
+  const dataset = type === "editable" ? "blokkliEditableField" : "blokkliDroppableField";
+  return {
     created(el, binding, vnode) {
       if (import.meta.client) {
         if (!isEditing()) {
@@ -42,7 +43,7 @@ export default defineNuxtPlugin((nuxtApp) => {
         if (!fieldName) {
           return;
         }
-        el.dataset.blokkliEditableField = fieldName;
+        el.dataset[dataset] = fieldName;
       }
     },
     mounted(el, binding, vnode) {
@@ -64,7 +65,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       if (!fieldName) {
         return;
       }
-      app.editable.registerEditableField(el, fieldName, entity);
+      app.directive.registerDirectiveElement(el, fieldName, entity, type);
     },
     beforeUnmount(el, binding, vnode) {
       if (!isEditing()) {
@@ -82,21 +83,14 @@ export default defineNuxtPlugin((nuxtApp) => {
       if (!fieldName) {
         return;
       }
-      app.editable.unregisterEditableField(el, fieldName, entity);
+      app.directive.unregisterDirectiveElement(el, fieldName, entity, type);
     }
-  });
-  nuxtApp.vueApp.directive("blokkli-droppable", {
-    created(el, binding) {
-      if (import.meta.client) {
-        if (!window.location.search.includes("blokkliEditing")) {
-          return;
-        }
-        const fieldName = binding.value?.name || binding.arg;
-        if (!fieldName) {
-          return;
-        }
-        el.dataset.blokkliDroppableField = fieldName;
-      }
-    }
-  });
+  };
+}
+export default defineNuxtPlugin({
+  name: "blokkli:directives",
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive("blokkli-editable", createDirective("editable"));
+    nuxtApp.vueApp.directive("blokkli-droppable", createDirective("droppable"));
+  }
 });

package/dist/runtime/types/index.d.ts

@@ -8,7 +8,7 @@ import type { KeyboardProvider } from '../helpers/keyboardProvider.js';
 import type { UiProvider } from '../helpers/uiProvider.js';
 import type { AnimationProvider } from '../helpers/animationProvider.js';
 import type { StateProvider } from '../helpers/stateProvider.js';
-import type { EditableProvider } from '../helpers/editableProvider.js';
+import type { DirectiveProvider } from '../helpers/providers/directive.js';
 import type { TextProvider } from '../helpers/textProvider.js';
 import type { PluginProvider } from '../helpers/pluginProvider.js';
 import type { eventBus } from './../helpers/eventBus.js';
@@ -20,7 +20,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { SettingsGroup, Viewport } from '#blokkli/constants';
 import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys, BundleProps } from '#blokkli-build/generated-types';
 import type { ThemeProvider } from '#blokkli/helpers/themeProvider';
-import type { GlobalOptionsType } from '#blokkli-build/definitions';
+import type { BlokkliFragmentName, GlobalOptionsType } from '#blokkli-build/definitions';
 import type { CommandsProvider } from '#blokkli/helpers/commandsProvider';
 import type { TourProvider } from '#blokkli/helpers/tourProvider';
 import type { DropAreaProvider } from '#blokkli/helpers/dropAreaProvider';
@@ -29,7 +29,10 @@ import type { DebugProvider } from '#blokkli/helpers/debugProvider';
 import type getVideoId from 'get-video-id';
 import type { DefinitionProvider } from '../helpers/definitionProvider.js';
 import type { IndicatorsProvider } from '#blokkli/helpers/indicatorsProvider';
-export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string, successMessage?: string) => Promise<boolean>;
+import type { BlocksProvider } from '#blokkli/helpers/providers/blocks';
+import type { FieldsProvider } from '#blokkli/helpers/providers/fields';
+import type { ElementProvider } from '#blokkli/helpers/providers/element';
+export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string | false, successMessage?: string) => Promise<boolean>;
 type GetType<T> = T extends {
     options: infer O;
 } ? T extends {
@@ -342,8 +345,8 @@ export type InjectedBlokkliItem = {
 export type FieldListItem = {
     uuid: string;
     bundle: string;
-    isNew?: boolean;
     options?: Record<string, any>;
+    editContext?: BlockEditContext;
     props?: Record<string, any>;
 };
 export type MutatedField = {
@@ -570,6 +573,8 @@ export interface BlockBundleDefinition {
     description?: string;
     allowReusable?: boolean;
     isTranslatable?: boolean;
+    hasPublishOn?: boolean;
+    hasUnpublishOn?: boolean;
 }
 export type EditMode = 'readonly' | 'editing' | 'translating' | 'review';
 export type MutatedOptions = {
@@ -686,36 +691,12 @@ export type DraggableStyle = {
 };
 export interface DraggableExistingStructureBlock {
     itemType: 'existing_structure';
-    uuid: string;
-    itemBundle: string;
+    block: RenderedFieldListItem;
     element: () => HTMLElement;
 }
 export interface DraggableExistingBlock {
     itemType: 'existing';
-    element: () => HTMLElement;
-    entityType: string;
-    hostType: string;
-    hostBundle: string;
-    hostUuid: string;
-    hostFieldName: string;
-    hostFieldListType: ValidFieldListTypes;
-    itemBundle: string;
-    isNew: boolean;
-    uuid: string;
-    isNested: boolean;
-    /**
-     * The bundle if this item is reusable.
-     */
-    reusableBundle?: string;
-    /**
-     * The UUID of the library item this block belongs to.
-     */
-    libraryItemUuid?: string;
-    /**
-     * The title to use when displaying the block in lists during editing.
-     */
-    editTitle?: string;
-    parentBlockBundle: BlockBundleWithNested | undefined;
+    block: RenderedFieldListItem;
 }
 export interface DraggableNewItem {
     itemType: 'new';
@@ -942,8 +923,9 @@ export type BlokkliFieldElement = {
     allowedFragments: string[];
     cardinality: number;
     element: HTMLElement;
-    dropAlignment?: 'vertical' | 'horizontal';
+    dropAlignment: FieldDropAlignment | null;
 };
+export type FieldDropAlignment = 'vertical' | 'horizontal';
 export type ActionPlacedEvent = {
     id: string;
     preceedingUuid?: string;
@@ -1027,7 +1009,6 @@ export type EventbusEvents = {
     'dragging:start': DraggableStartEvent;
     'dragging:drop': DropTargetEvent;
     'dragging:end': undefined;
-    setActiveFieldKey: string;
     'add:block:new': AddNewBlockEvent;
     updateMutatedFields: UpdateMutatedFieldsEvent;
     animationFrame: AnimationFrameEvent;
@@ -1042,11 +1023,9 @@ export type EventbusEvents = {
     'select:toggle': string;
     'select:shiftToggle': string;
     'select:end': string[] | undefined;
-    'select:previous': undefined;
-    'select:next': undefined;
     'item:dropped': undefined;
     'block:append': BlockAppendEvent;
-    'item:doubleClick': DraggableExistingBlock;
+    'item:doubleClick': RenderedFieldListItem;
     scrollIntoView: ScrollIntoViewEvent;
     'animationFrame:before': AnimationFrameBeforeEvent;
     'animationFrame:after': undefined;
@@ -1124,7 +1103,9 @@ export interface BlokkliApp {
     storage: StorageProvider;
     types: BlockDefinitionProvider;
     selection: SelectionProvider;
+    blocks: BlocksProvider;
     keyboard: KeyboardProvider;
+    element: ElementProvider;
     ui: UiProvider;
     animation: AnimationProvider;
     definitions: DefinitionProvider;
@@ -1140,7 +1121,8 @@ export interface BlokkliApp {
     debug: DebugProvider;
     indicators: IndicatorsProvider;
     plugins: PluginProvider;
-    editable: EditableProvider;
+    directive: DirectiveProvider;
+    fields: FieldsProvider;
 }
 export type PasteExistingBlocksEvent = {
     uuids: string[];
@@ -1396,5 +1378,42 @@ export type AddAction = {
     description?: string;
     enabled?: boolean;
 };
+export type BlockEditContext = {
+    isPublished: boolean;
+    isNew: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};
+export type RenderedFieldListItem = {
+    uuid: string;
+    bundle: string;
+    isNew: boolean;
+    isPublished: boolean;
+    host: DraggableHostData & {
+        bundle: string;
+    };
+    fieldListType: ValidFieldListTypes;
+    parentBlockBundle: BlockBundleWithNested | null;
+    library: {
+        label: string;
+        libraryItemUuid: string;
+        reusableBundle: string;
+    } | null;
+    isNested: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};
+export type BlokkliDirectiveType = 'editable' | 'droppable';
+export type RegisteredField = {
+    element: HTMLElement;
+    entity: EntityContext;
+    fieldName: string;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments: BlokkliFragmentName[];
+    isNested: boolean;
+    nestingLevel: number;
+    dropAlignment: FieldDropAlignment | null;
+};
+export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
 declare const _default: {};
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.17",
+  "version": "2.0.0-alpha.18",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",