@blokkli/editor 2.0.0-alpha.20 → 2.0.0-alpha.22

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.20",
+  "version": "2.0.0-alpha.22",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -15,7 +15,7 @@ import fs from 'node:fs';
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.20";
+const version = "2.0.0-alpha.22";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {

package/dist/runtime/components/BlokkliProvider.vue

@@ -4,7 +4,7 @@
     :data-provider-uuid="entityUuid"
     :data-provider-entity-type="entityType"
     :data-provider-entity-bundle="entityBundle"
-    :data-blokkli-provider-active="isInEditor || void 0"
+    :data-blokkli-provider-active="isInEditor ? 'true' : 'false'"
   >
     <BlokkliErrorBoundary v-if="isInEditor">
       <PreviewProvider
@@ -143,12 +143,15 @@ const blokkliProviderEntityContext = computed(
     };
   }
 );
-provide(INJECT_PROVIDER_CONTEXT, blokkliProviderEntityContext);
-provide(INJECT_ENTITY_CONTEXT, {
-  uuid: props.entityUuid,
-  type: props.entityType,
-  bundle: props.entityBundle
+const entityContext = computed(() => {
+  return {
+    uuid: props.entityUuid,
+    type: props.entityType,
+    bundle: props.entityBundle
+  };
 });
+provide(INJECT_PROVIDER_CONTEXT, blokkliProviderEntityContext);
+provide(INJECT_ENTITY_CONTEXT, entityContext.value);
 onMounted(() => {
   shouldRender.value = true;
 });

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

@@ -56,7 +56,8 @@ import {
   useRoute,
   useRuntimeConfig,
   nextTick,
-  inject
+  inject,
+  onUnmounted
 } from "#imports";
 import Toolbar from "./Toolbar/index.vue";
 import Actions from "./Actions/index.vue";
@@ -101,6 +102,7 @@ import {
   INJECT_EDIT_CONTEXT,
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   INJECT_EDIT_LOGGER,
+  INJECT_ENTITY_CONTEXT,
   INJECT_GLOBAL_PROXY_MODE,
   INJECT_IS_EDITING,
   INJECT_PROVIDER_KEY
@@ -118,6 +120,13 @@ const props = defineProps({
   providerEl: { type: null, required: true }
 });
 defineSlots();
+const entityContext = computed(() => {
+  return {
+    uuid: props.entityUuid,
+    type: props.entityType,
+    bundle: props.entityBundle
+  };
+});
 const context = computed(() => {
   return {
     entityType: props.entityType,
@@ -198,24 +207,9 @@ addElementClasses(
   shouldIsolate
 );
 const baseLogger = debug.createLogger("EditProvider");
-onMounted(async () => {
-  window.addEventListener("contextmenu", onContextMenu);
-  document.documentElement.addEventListener("touchmove", onTouchMove);
-  document.documentElement.addEventListener("touchstart", onTouchStart);
-  baseLogger.log("EditProvider mounted");
-  dom.init();
-  directive.init();
-  await nextTick();
-  isInitializing.value = false;
-  broadcast.emit("editorLoaded", { uuid: props.entityUuid });
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("contextmenu", onContextMenu);
-  isInitializing.value = true;
-  toolbarLoaded.value = false;
-  document.documentElement.removeEventListener("touchmove", onTouchMove);
-  document.documentElement.removeEventListener("touchstart", onTouchStart);
-});
+function setElementSymbolProperty(el, symbol, value) {
+  el[symbol] = value;
+}
 provide(INJECT_EDIT_LOGGER, baseLogger);
 provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList);
 provide(INJECT_IS_EDITING, true);
@@ -226,7 +220,7 @@ provide(INJECT_EDIT_CONTEXT, {
   definitions,
   useBlockRegistration
 });
-provide(INJECT_APP, {
+const app = {
   $t,
   adapter,
   animation,
@@ -254,7 +248,8 @@ provide(INJECT_APP, {
   types,
   ui,
   fields
-});
+};
+provide(INJECT_APP, app);
 function textWithHighlight(title, text) {
   return `<strong>${title}</strong> ${text}`;
 }
@@ -323,4 +318,32 @@ if (import.meta.hot) {
   });
   import.meta.hot.on("vite:afterUpdate", onAfterUpdate);
 }
+onMounted(async () => {
+  setElementSymbolProperty(props.providerEl, INJECT_APP, app);
+  setElementSymbolProperty(
+    props.providerEl,
+    INJECT_ENTITY_CONTEXT,
+    entityContext.value
+  );
+  window.addEventListener("contextmenu", onContextMenu);
+  document.documentElement.addEventListener("touchmove", onTouchMove);
+  document.documentElement.addEventListener("touchstart", onTouchStart);
+  baseLogger.log("EditProvider mounted");
+  dom.init();
+  directive.init();
+  await nextTick();
+  isInitializing.value = false;
+  broadcast.emit("editorLoaded", { uuid: props.entityUuid });
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("contextmenu", onContextMenu);
+  isInitializing.value = true;
+  toolbarLoaded.value = false;
+  document.documentElement.removeEventListener("touchmove", onTouchMove);
+  document.documentElement.removeEventListener("touchstart", onTouchStart);
+});
+onUnmounted(() => {
+  setElementSymbolProperty(props.providerEl, INJECT_APP);
+  setElementSymbolProperty(props.providerEl, INJECT_ENTITY_CONTEXT);
+});
 </script>

package/dist/runtime/components/Edit/Features/Analyze/analyzers/helpers/collectTextElements.js

@@ -64,6 +64,9 @@ const traverse = (element, results) => {
   if (element.tagName === "SCRIPT" || element.tagName === "STYLE") {
     return;
   }
+  if (element.classList.contains("bk-skip-analyze")) {
+    return;
+  }
   if (isBlockElement(element)) {
     if (!containsBlockElements(element)) {
       const text = getCleanText(element);

package/dist/runtime/helpers/domProvider.js

@@ -387,7 +387,7 @@ export default function(ui, debug, definitions, state, element) {
     logger.log("registerBlock: " + uuid);
     blockUuidCurrentKey[uuid] = key;
     doInitTimeout();
-    if (!el) {
+    if (!(el instanceof HTMLElement)) {
       logger.log("registerBlock call unregisterBlock because no element", uuid);
       unregisterBlock(key, uuid);
       return;

package/dist/runtime/plugins/blokkliDirectives.js

@@ -4,14 +4,27 @@ import {
   INJECT_IS_IN_REUSABLE
 } from "#blokkli/helpers/symbols";
 import { defineNuxtPlugin } from "#imports";
-function getInjection(vnode, symbol) {
-  return vnode.ctx?.provides?.[symbol];
+function getInjectionFromProviderElement(symbol, el) {
+  if (!el) {
+    return;
+  }
+  const providerEl = el.closest("[data-blokkli-provider-active]");
+  if (!(providerEl instanceof HTMLElement)) {
+    return;
+  }
+  return providerEl[symbol];
+}
+function getInjection(vnode, symbol, el) {
+  return (
+    // @ts-expect-error Private API.
+    vnode.ctx?.provides?.[symbol] ?? getInjectionFromProviderElement(symbol, el)
+  );
 }
-function getBlokkliApp(vnode) {
-  return getInjection(vnode, INJECT_APP);
+function getBlokkliApp(vnode, el) {
+  return getInjection(vnode, INJECT_APP, el);
 }
-function getEntityContext(vnode) {
-  return getInjection(vnode, INJECT_ENTITY_CONTEXT);
+function getEntityContext(vnode, el) {
+  return getInjection(vnode, INJECT_ENTITY_CONTEXT, el);
 }
 function isInReusable(vnode) {
   return !!getInjection(vnode, INJECT_IS_IN_REUSABLE);
@@ -53,11 +66,11 @@ function createDirective(type) {
       if (isInReusable(vnode)) {
         return;
       }
-      const app = getBlokkliApp(vnode);
+      const app = getBlokkliApp(vnode, el);
       if (!app) {
         return;
       }
-      const entity = getEntityContext(vnode);
+      const entity = getEntityContext(vnode, el);
       if (!entity) {
         return;
       }
@@ -71,11 +84,11 @@ function createDirective(type) {
       if (!isEditing()) {
         return;
       }
-      const app = getBlokkliApp(vnode);
+      const app = getBlokkliApp(vnode, el);
       if (!app) {
         return;
       }
-      const entity = getEntityContext(vnode);
+      const entity = getEntityContext(vnode, el);
       if (!entity) {
         return;
       }

package/package.json

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