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

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

@@ -18,7 +18,10 @@ import {
   getInteractionCoordinates,
   isInsideRect
 } from "#blokkli/helpers";
-import { MOUSE_BUTTON, MOUSE_BUTTONS } from "#blokkli/helpers/dom";
+import {
+  MOUSE_BUTTON,
+  MOUSE_BUTTONS
+} from "#blokkli/helpers/dom";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import {
   ref,
@@ -37,13 +40,17 @@ const {
   ui,
   animation,
   state,
-  editable,
-  runtimeConfig
+  directive,
+  runtimeConfig,
+  blocks
 } = useBlokkli();
+const cursor = computed(
+  () => state.isLoading.value ? "wait" : animation.cursor.value
+);
 const style = computed(() => {
   return {
     imageRendering: "pixelated",
-    cursor: animation.cursor.value
+    cursor: cursor.value
   };
 });
 const rects = ref([]);
@@ -65,7 +72,7 @@ let pointerDownTimestamp = 0;
 let pointerUpTimestamp = 0;
 function getInteractedElement(e) {
   const { x, y } = getInteractionCoordinates(e);
-  const editableField = editable.getEditableAtPoint(x, y);
+  const editableField = directive.getEditableAtPoint(x, y);
   if (editableField) {
     const uuid = editableField.type === runtimeConfig.itemEntityType ? editableField.uuid : void 0;
     return {
@@ -107,6 +114,15 @@ function getInteractedElement(e) {
   }
   return null;
 }
+function toDraggableExisting(v) {
+  const blocks2 = Array.isArray(v) ? v : [v];
+  return blocks2.map((block) => {
+    return {
+      itemType: "existing",
+      block
+    };
+  });
+}
 function onPointerMove(e) {
   if (keyboard.isPressingSpace.value || e.buttons === MOUSE_BUTTONS.AUXILIARY) {
     return;
@@ -147,15 +163,15 @@ function onPointerMove(e) {
   if (interacted && interacted.uuid) {
     if (selection.uuids.value.includes(interacted.uuid)) {
       eventBus.emit("dragging:start", {
-        items: [...selection.blocks.value],
+        items: toDraggableExisting(selection.items.value),
         coords: { x: e.clientX, y: e.clientY },
         mode: "mouse"
       });
     } else {
-      const block = dom.findBlock(interacted.uuid);
+      const block = blocks.getBlock(interacted.uuid);
       if (block) {
         eventBus.emit("dragging:start", {
-          items: [block],
+          items: toDraggableExisting(block),
           coords: { x: e.clientX, y: e.clientY },
           mode: "mouse"
         });
@@ -271,7 +287,7 @@ function onPointerUp(e) {
         return;
       }
       if (lastInteractedElement.uuid) {
-        const block = dom.findBlock(lastInteractedElement.uuid);
+        const block = blocks.getBlock(lastInteractedElement.uuid);
         if (!block) {
           return;
         }
@@ -329,7 +345,7 @@ function onTouchStart(e) {
       longPressInteraction = touchStartInteraction;
       if (selection.uuids.value.includes(touchStartInteraction.uuid) && state.editMode.value === "editing") {
         eventBus.emit("dragging:start", {
-          items: [...selection.blocks.value],
+          items: toDraggableExisting(selection.items.value),
           coords: {
             x: touchStartInteraction.x,
             y: touchStartInteraction.y

package/dist/runtime/components/Edit/ArtboardTooltip/index.vue

@@ -65,6 +65,9 @@ watch(ui.openTooltip, (id) => {
   }
 });
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Escape") {
     emit("close");
   }

package/dist/runtime/components/Edit/Dialog/index.vue

@@ -56,7 +56,7 @@
 import { useBlokkli, onMounted, computed, ref, onBeforeUnmount } from "#imports";
 import { Icon } from "#blokkli/components";
 import { modulo } from "#blokkli/helpers";
-const { ui } = useBlokkli();
+const { ui, element } = useBlokkli();
 const emit = defineEmits(["submit", "cancel"]);
 const rootEl = ref(null);
 const props = defineProps({
@@ -94,9 +94,11 @@ const getFocusableElements = () => {
   if (!rootEl.value) {
     return [];
   }
-  return [
-    ...rootEl.value.querySelectorAll("input,select,button,textarea")
-  ];
+  return element.queryAll(
+    rootEl.value,
+    "input,select,button,textarea",
+    `Dialog "${props.title}" getFocusableElements`
+  );
 };
 const onKeyDown = (e) => {
   if (e.code === "Escape") {

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

@@ -19,7 +19,6 @@
         :key="item.uuid + fieldListType + definitions.renderKey.value"
         :uuid="item.uuid"
         :bundle="item.bundle"
-        :is-new="item.isNew"
         :options="item.options"
         :props="item.props"
         is-editing
@@ -36,7 +35,6 @@
         :data-host-field-name="name"
         :data-host-field-list-type="fieldListType"
         :data-is-nested="isNested"
-        :data-is-new="item.isNew"
         :data-entity-type="runtimeConfig.itemEntityType"
         :data-bk-is-muted="isMuted(item)"
       />
@@ -54,7 +52,6 @@
       :key="item.uuid + fieldListType"
       :uuid="item.uuid"
       :bundle="item.bundle"
-      :is-new="item.isNew"
       :options="item.options"
       :props="item.props"
       is-editing
@@ -71,7 +68,6 @@
       :data-host-field-name="name"
       :data-host-field-list-type="fieldListType"
       :data-is-nested="isNested"
-      :data-is-new="item.isNew"
       :data-entity-type="runtimeConfig.itemEntityType"
       :data-bk-is-muted="isMuted(item)"
     />
@@ -105,7 +101,7 @@ const props = defineProps({
   language: { type: String, required: false, default: void 0 },
   tag: { type: String, required: false, default: "div" },
   isNested: { type: Boolean, required: true },
-  fieldListType: { type: String, required: true },
+  fieldListType: { type: null, required: true },
   allowedFragments: { type: Array, required: false, default: void 0 },
   dropAlignment: { type: String, required: false, default: void 0 },
   proxyMode: { type: Boolean, required: false },
@@ -162,18 +158,30 @@ function isMuted(item) {
   if (!item) {
     return true;
   }
+  if (!item.editContext?.isPublished) {
+    return true;
+  }
   const isVisible = isVisibleByOptions(item, props.language);
   const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
   return !(isVisible && isVisibleCustom);
 }
+const data = computed(() => {
+  return {
+    fieldListType: props.fieldListType,
+    allowedFragments: props.allowedFragments ?? [],
+    isNested: props.isNested,
+    nestingLevel: props.nestingLevel,
+    dropAlignment: props.dropAlignment ?? null
+  };
+});
 watch(root, function(newRoot) {
   if (newRoot) {
-    dom.updateFieldElement(props.entity, props.name, newRoot);
+    dom.updateFieldElement(props.entity, props.name, newRoot, data.value);
   }
 });
 onMounted(() => {
   if (root.value) {
-    dom.registerField(props.entity, props.name, root.value);
+    dom.registerField(props.entity, props.name, root.value, data.value);
   }
 });
 onBeforeUnmount(() => {

package/dist/runtime/components/Edit/DraggableList.vue.d.ts

@@ -1,6 +1,6 @@
-import type { FieldListItem, EntityContext } from '#blokkli/types';
+import type { FieldListItem, EntityContext, FieldDropAlignment } from '#blokkli/types';
 import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItemTyped } from '#blokkli-build/generated-types';
+import type { FieldListItemTyped, ValidFieldListTypes } from '#blokkli-build/generated-types';
 type __VLS_Props = {
     name: string;
     fieldKey: string;
@@ -9,9 +9,9 @@ type __VLS_Props = {
     language?: string;
     tag?: string;
     isNested: boolean;
-    fieldListType: string;
+    fieldListType: ValidFieldListTypes;
     allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: 'vertical' | 'horizontal';
+    dropAlignment?: FieldDropAlignment;
     proxyMode?: boolean;
     globalProxyMode?: boolean;
     nestingLevel: number;
@@ -19,9 +19,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     allowedFragments: BlokkliFragmentName[];
+    dropAlignment: FieldDropAlignment;
     tag: string;
     language: string;
-    dropAlignment: "vertical" | "horizontal";
     shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,10 +1,7 @@
 <template>
   <Teleport to="body">
     <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
-      <Loading
-        v-if="isInitializing || !toolbarLoaded || !featuresLoaded"
-        screen
-      />
+      <Loading v-if="showLoading" screen />
     </Transition>
 
     <div id="bk-banner-container">
@@ -35,7 +32,7 @@
   <AppMenu v-if="toolbarLoaded" />
   <Indicators />
   <Features
-    v-if="!isInitializing && toolbarLoaded"
+    v-if="isReady"
     :key="route.fullPath"
     @loaded="featuresLoaded = true"
   />
@@ -78,6 +75,7 @@ import keyboardProvider from "./../../helpers/keyboardProvider";
 import selectionProvider from "./../../helpers/selectionProvider";
 import editStateProvider from "./../../helpers/stateProvider";
 import typesProvider from "./../../helpers/typesProvider";
+import elementProvider from "./../../helpers/providers/element";
 import domProvider from "./../../helpers/domProvider";
 import textProvider from "./../../helpers/textProvider";
 import storageProvider from "./../../helpers/storageProvider";
@@ -90,9 +88,11 @@ import tourProvider from "./../../helpers/tourProvider";
 import debugProvider from "./../../helpers/debugProvider";
 import definitionProvider from "./../../helpers/definitionProvider";
 import dropAreasProvider from "./../../helpers/dropAreaProvider";
+import blocksProvider from "./../../helpers/providers/blocks";
 import indicatorsProvider from "./../../helpers/indicatorsProvider";
 import pluginProvider from "./../../helpers/pluginProvider";
-import editableProvider from "./../../helpers/editableProvider";
+import directiveProvider from "./../../helpers/providers/directive";
+import fieldsProvider from "./../../helpers/providers/fields";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -114,7 +114,8 @@ const props = defineProps({
   entityBundle: { type: String, required: true },
   language: { type: String, required: false, default: "en" },
   isolate: { type: Boolean, required: false },
-  permissions: { type: Array, required: true }
+  permissions: { type: Array, required: true },
+  providerEl: { type: null, required: true }
 });
 defineSlots();
 const context = computed(() => {
@@ -143,22 +144,31 @@ const state = await editStateProvider(
 );
 const storage = await storageProvider(adapter, context);
 const debug = debugProvider(storage);
+const element = elementProvider(debug);
 const features = featuresProvider(storage);
-const theme = themeProvider();
 const commands = commandsProvider();
 const tour = tourProvider();
 const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
-const ui = uiProvider(storage, state, context);
-const dom = domProvider(ui, debug, definitions);
-const selection = selectionProvider(dom);
-const animation = animationProvider(ui, storage, selection);
+const ui = uiProvider(props.providerEl, storage, state, context, element);
+const dom = domProvider(ui, debug, definitions, state, element);
+const theme = themeProvider(element);
+const blocks = blocksProvider(state, dom, context);
+const selection = selectionProvider(blocks);
+const animation = animationProvider(ui, storage, selection, element);
 const keyboard = keyboardProvider(animation);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const plugins = pluginProvider();
-const editable = editableProvider(ui);
+const directive = directiveProvider(ui);
+const fields = fieldsProvider(state, dom, types);
 const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
+const isReady = computed(
+  () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value
+);
+const showLoading = computed(() => {
+  return !isReady.value || !featuresLoaded.value;
+});
 const onContextMenu = (e) => {
   e.preventDefault();
   e.stopPropagation();
@@ -189,7 +199,7 @@ onMounted(() => {
   document.documentElement.addEventListener("touchstart", onTouchStart);
   baseLogger.log("EditProvider mounted");
   dom.init();
-  editable.init();
+  directive.init();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
 });
@@ -221,20 +231,23 @@ provide(INJECT_APP, {
   definitions,
   dom,
   dropAreas,
+  element,
   eventBus,
-  editable,
+  directive,
   features,
   indicators,
   keyboard,
   plugins,
   runtimeConfig,
   selection,
+  blocks,
   state,
   storage,
   theme,
   tour,
   types,
-  ui
+  ui,
+  fields
 });
 function textWithHighlight(title, text) {
   return `<strong>${title}</strong> ${text}`;

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

@@ -9,6 +9,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         language?: string;
         isolate?: boolean;
         permissions: EditPermission[];
+        providerEl: HTMLElement;
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/runtime/components/Edit/Features/AddList/index.vue

@@ -86,7 +86,7 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-add-list.jpg"
 });
-const { state, $t, eventBus, ui } = useBlokkli();
+const { state, $t, eventBus, ui, element } = useBlokkli();
 const hasContextMenuOpen = computed(
   () => ui.openContextMenu.value.startsWith("add_list_item_")
 );
@@ -104,17 +104,15 @@ const isActive = ref(false);
 let mouseTimeout = null;
 const style = computed(() => {
   if (settings.value.orientation === "vertical" && (isActive.value || hasContextMenuOpen.value) && wrapper.value) {
-    const labels = [
-      ...wrapper.value.querySelectorAll(".bk-list-item-label span")
-    ];
-    const width = labels.reduce((acc, el) => {
-      if (el.offsetWidth > acc) {
-        return el.offsetWidth;
-      }
-      return acc;
-    }, 0);
+    const widths = element.queryAll(
+      wrapper.value,
+      ".bk-list-item-label span",
+      "AddList vertical sidebar style",
+      (el) => el.offsetWidth
+    );
+    const largestWidth = Math.max(...widths);
     return {
-      "--bk-add-list-width": width + 90
+      "--bk-add-list-width": largestWidth + 90
     };
   }
   return void 0;

package/dist/runtime/components/Edit/Features/Analyze/Overlay/index.vue

@@ -19,7 +19,7 @@ const props = defineProps({
   results: { type: Array, required: true },
   gl: { type: null, required: true }
 });
-const { animation, ui, theme, selection, eventBus } = useBlokkli();
+const { animation, ui, theme, selection, eventBus, element } = useBlokkli();
 const programInfo = animation.registerProgram("analyze", props.gl, [vs, fs]);
 const statusPriority = {
   violation: 3,
@@ -27,7 +27,6 @@ const statusPriority = {
   pass: 1,
   inapplicable: 0
 };
-const providerElement = ui.providerElement();
 const nodes = computed(() => {
   const allNodes = props.results.filter((v) => v.status === "incomplete" || v.status === "violation").flatMap((result) => {
     const nodes2 = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
@@ -35,14 +34,18 @@ const nodes = computed(() => {
       const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
       return targets.map((v) => {
         if (typeof v === "string") {
-          return providerElement.querySelector(v);
+          return element.query(
+            ui.providerElement,
+            v,
+            "Find analyze node target element."
+          );
         }
         return v;
-      }).filter((v) => v instanceof HTMLElement).filter((v) => providerElement.contains(v));
-    }).map((element) => {
+      }).filter((v) => v instanceof HTMLElement).filter((v) => ui.providerElement.contains(v));
+    }).map((element2) => {
       return {
         id: result.id,
-        element,
+        element: element2,
         title: result.title,
         status: result.status
       };

package/dist/runtime/components/Edit/Features/Analyze/Renderer.vue

@@ -75,7 +75,7 @@ const lastRun = useState(() => 0);
 const lastRunKey = useState(() => "");
 const selectedCategory = useState(() => ALL);
 const hasInitialized = useState(() => false);
-const providerRootElement = ui.providerElement();
+const providerRootElement = ui.providerElement;
 const resultsFiltered = computed(() => {
   if (selectedCategory.value === ALL) {
     return results.value;

package/dist/runtime/components/Edit/Features/Analyze/Results/ResultsItemNodesTarget.vue

@@ -23,20 +23,24 @@ const props = defineProps({
   resultId: { type: String, required: true },
   target: { type: null, required: true }
 });
-const { eventBus, dom } = useBlokkli();
+const { eventBus, dom, blocks, element } = useBlokkli();
 const elButton = useTemplateRef("elButton");
 const isFocused = ref(false);
 let focusTimeout = null;
 function getElement() {
   if (props.target) {
     if (typeof props.target === "string") {
-      return document.querySelector(props.target);
+      return element.query(
+        document.documentElement,
+        props.target,
+        "Find analyze result item node target."
+      );
     } else if (props.target instanceof HTMLElement) {
       return props.target;
     } else if (typeof props.target === "object" && "uuid" in props.target) {
-      const block = dom.findBlock(props.target.uuid);
-      if (block) {
-        return block.element();
+      const item = blocks.getBlock(props.target.uuid);
+      if (item) {
+        return dom.getDragElement(item) ?? null;
       }
     }
   }
@@ -53,8 +57,8 @@ function getLabel() {
     }
   }
 }
-function findClosestUuid(element) {
-  const closestBlock = element.closest("[data-uuid]");
+function findClosestUuid(element2) {
+  const closestBlock = element2.closest("[data-uuid]");
   if (closestBlock instanceof HTMLElement) {
     const uuid = closestBlock.dataset.uuid;
     if (uuid) {
@@ -63,11 +67,11 @@ function findClosestUuid(element) {
   }
 }
 async function onClick() {
-  const element = getElement();
-  if (!element) {
+  const element2 = getElement();
+  if (!element2) {
     return;
   }
-  const closestUuid = findClosestUuid(element);
+  const closestUuid = findClosestUuid(element2);
   if (closestUuid) {
     eventBus.emit("select", closestUuid);
   } else {
@@ -75,7 +79,7 @@ async function onClick() {
   }
   await renderCycle();
   eventBus.emit("scrollIntoView", {
-    element
+    element: element2
   });
 }
 onBlokkliEvent("analyze:click-node", (e) => {

package/dist/runtime/components/Edit/Features/Anchors/Renderer.vue

@@ -11,12 +11,28 @@
 </template>
 
 <script setup>
-import { useBlokkli, ref, onMounted, onBeforeUnmount, useRoute } from "#imports";
+import { useBlokkli, useRoute, computed } from "#imports";
 import { PluginBlockIndicator } from "#blokkli/plugins";
 import { emitMessage } from "#blokkli/helpers/eventBus";
 const route = useRoute();
-const { ui, $t, adapter } = useBlokkli();
-const rootElement = ui.providerElement();
+const { $t, adapter, dom } = useBlokkli();
+const items = computed(() => {
+  const anchorItems = [];
+  for (const entry of Object.entries(dom.registeredBlocks.value)) {
+    const uuid = entry[0];
+    const element = entry[1];
+    if (!element || !uuid) {
+      continue;
+    }
+    if (element.id) {
+      anchorItems.push({
+        id: element.id,
+        uuid
+      });
+    }
+  }
+  return anchorItems;
+});
 function getLinkForClipboard(item) {
   if (adapter.buildAnchorLink) {
     return adapter.buildAnchorLink(item.id, item.uuid);
@@ -34,103 +50,4 @@ function onClick(item) {
     emitMessage(message, "success", void 0, true);
   }
 }
-const items = ref([]);
-const trackedElements = /* @__PURE__ */ new Map();
-let observer = null;
-const getAnchorData = (el) => {
-  const uuid = el.getAttribute("data-uuid");
-  const id = el.getAttribute("id");
-  return uuid && id ? { uuid, id } : null;
-};
-const syncItems = () => {
-  const newItems = Array.from(trackedElements.values());
-  items.value = newItems;
-};
-const checkElement = (el) => {
-  const data = getAnchorData(el);
-  const isTracked = trackedElements.has(el);
-  if (data && !isTracked) {
-    trackedElements.set(el, data);
-    return true;
-  } else if (!data && isTracked) {
-    trackedElements.delete(el);
-    return true;
-  } else if (data && isTracked) {
-    const existing = trackedElements.get(el);
-    if (existing.uuid !== data.uuid || existing.id !== data.id) {
-      trackedElements.set(el, data);
-      return true;
-    }
-  }
-  return false;
-};
-const processAddedNode = (node) => {
-  if (node.nodeType !== Node.ELEMENT_NODE) return false;
-  let changed = false;
-  const el = node;
-  if (el.hasAttribute("data-uuid") && el.hasAttribute("id")) {
-    changed = checkElement(el) || changed;
-  }
-  return changed;
-};
-const processRemovedNode = (node) => {
-  if (node.nodeType !== Node.ELEMENT_NODE) return false;
-  let changed = false;
-  const el = node;
-  if (!el.id) {
-    return false;
-  }
-  if (trackedElements.delete(el)) {
-    changed = true;
-  }
-  const toRemove = [];
-  for (const [trackedEl] of trackedElements) {
-    if (node.contains(trackedEl)) {
-      toRemove.push(trackedEl);
-    }
-  }
-  for (const el2 of toRemove) {
-    trackedElements.delete(el2);
-    changed = true;
-  }
-  return changed;
-};
-onMounted(() => {
-  const elements = rootElement.querySelectorAll("[data-uuid][id]");
-  for (const el of elements) {
-    const data = getAnchorData(el);
-    if (data) {
-      trackedElements.set(el, data);
-    }
-  }
-  syncItems();
-  observer = new MutationObserver((mutations) => {
-    let changed = false;
-    for (const mutation of mutations) {
-      if (mutation.type === "childList") {
-        for (const node of mutation.addedNodes) {
-          changed = processAddedNode(node) || changed;
-        }
-        for (const node of mutation.removedNodes) {
-          changed = processRemovedNode(node) || changed;
-        }
-      } else if (mutation.type === "attributes") {
-        const target = mutation.target;
-        changed = checkElement(target) || changed;
-      }
-    }
-    if (changed) {
-      syncItems();
-    }
-  });
-  observer.observe(rootElement, {
-    childList: true,
-    subtree: true,
-    attributes: true,
-    attributeFilter: ["data-uuid", "id"]
-  });
-});
-onBeforeUnmount(() => {
-  observer?.disconnect();
-});
 </script>

package/dist/runtime/components/Edit/Features/Artboard/Renderer.vue

@@ -232,6 +232,9 @@ const resetZoom = () => {
   animation.requestDraw();
 };
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Home") {
     e.originalEvent.preventDefault();
     artboard.scrollToTop();