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

package/dist/runtime/components/Edit/Features/DraggingOverlay/{DropTargets → Renderer}/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <slot :color="activeColorHex" :label="active?.label" />
   </Teleport>
 </template>
@@ -15,7 +15,7 @@ import {
 } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
-import { ref, computed, useBlokkli, onBeforeUnmount } from "#imports";
+import { ref, computed, useBlokkli } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -64,10 +64,6 @@ const {
   types,
   fields
 } = useBlokkli();
-const gl = animation.gl();
-const canvas = animation.getCanvasElement();
-const ctx = !gl && canvas ? canvas.getContext("2d") : null;
-const programInfo = gl ? animation.registerProgram("drop_targets", gl, [vs, fs]) : null;
 const areas = dropAreas.getDropAreas(props.items).reduce((acc, v) => {
   acc[v.id] = v;
   return acc;
@@ -157,10 +153,20 @@ const draggingBundles = computed(
       }
     } else if (item.itemBundle) {
       bundles.push(item.itemBundle);
+    } else if (item.itemType === "action" && item.action.itemBundle) {
+      bundles.push(item.action.itemBundle);
     }
     return bundles;
   }).filter(falsy)
 );
+const draggingFragments = computed(
+  () => props.items.flatMap((item) => {
+    if ((item.itemType === "existing" || item.itemType === "existing_structure") && item.block.bundle === "blokkli_fragment" && item.block.fragment?.name) {
+      return [item.block.fragment.name];
+    }
+    return [];
+  }).filter(falsy)
+);
 const selectionUuids = computed(
   () => props.items.map((item) => {
     if (item.itemType === "existing") {
@@ -182,6 +188,8 @@ const buildChildren = (field, visible) => {
   const children = [];
   let prevWasInSelection = false;
   let prevUuid = "";
+  let prevElOffsetTop = 0;
+  let prevElHeight = 0;
   for (let i = 0; i < field.childrenElements.length; i++) {
     const childrenForUuid = [];
     const isLast = i === field.childrenElements.length - 1;
@@ -189,16 +197,22 @@ const buildChildren = (field, visible) => {
     if (!(el instanceof HTMLElement)) {
       continue;
     }
-    const uuid = el.dataset.uuid;
+    const uuid = el.dataset.bkUuid;
     if (!uuid) {
       continue;
     }
     if (!visible.includes(uuid)) {
+      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
+      prevElOffsetTop = elRect2.y - field.y;
+      prevElHeight = el.scrollHeight;
       prevUuid = uuid;
       continue;
     }
     const cached = fieldChildCache[uuid];
     if (cached) {
+      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
+      prevElOffsetTop = elRect2.y - field.y;
+      prevElHeight = el.scrollHeight;
       children.push(...cached);
       prevUuid = uuid;
       continue;
@@ -208,9 +222,10 @@ const buildChildren = (field, visible) => {
       prevUuid = uuid;
       continue;
     }
-    const elRect = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(el.getBoundingClientRect());
+    const elRect = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
     const elOffsetTop = elRect.y - field.y;
     const elOffsetLeft = elRect.x - field.x;
+    const elHeight = el.scrollHeight;
     if (isLast) {
       const id2 = buildChildId(field.field, uuid, "last", uuid);
       if (field.orientation === "vertical") {
@@ -219,7 +234,7 @@ const buildChildren = (field, visible) => {
           width: field.width,
           height: MIN_GAP,
           x: 0,
-          y: elOffsetTop + el.scrollHeight,
+          y: elOffsetTop + elHeight,
           label: field.label
         });
       } else {
@@ -236,17 +251,28 @@ const buildChildren = (field, visible) => {
     if (prevWasInSelection) {
       prevWasInSelection = false;
       prevUuid = uuid;
+      prevElOffsetTop = elOffsetTop;
+      prevElHeight = elHeight;
       children.push(...childrenForUuid);
       continue;
     }
     const id = buildChildId(field.field, prevUuid, "between", uuid);
     if (field.orientation === "vertical") {
+      let dropTargetY;
+      if (prevElHeight > 0) {
+        const prevBlockBottom = prevElOffsetTop + prevElHeight;
+        const gapMiddle = (prevBlockBottom + elOffsetTop) / 2;
+        dropTargetY = gapMiddle - MIN_GAP / 2;
+      } else {
+        const gapMiddle = elOffsetTop / 2;
+        dropTargetY = gapMiddle - MIN_GAP / 2;
+      }
       childrenForUuid.push({
         id,
         width: field.width,
         height: MIN_GAP,
         x: 0,
-        y: elOffsetTop - field.gap / 2,
+        y: dropTargetY,
         label: field.label
       });
     } else {
@@ -261,6 +287,8 @@ const buildChildren = (field, visible) => {
     }
     fieldChildCache[uuid] = childrenForUuid;
     children.push(...childrenForUuid);
+    prevElOffsetTop = elOffsetTop;
+    prevElHeight = elHeight;
     prevUuid = uuid;
   }
   return children;
@@ -320,7 +348,8 @@ const buildFieldRect = (key) => {
     selectionUuids.value,
     currentCount,
     props.items.length,
-    draggingBundles.value
+    draggingBundles.value,
+    draggingFragments.value
   );
   const orientation = field.dropAlignment || getChildrenOrientation(field.element);
   const rect = dom.getFieldRect(field.key);
@@ -371,7 +400,7 @@ const buildDropAreaRect = (area) => {
   cachedDropAreaRects[area.id] = dropAreaRect;
   return dropAreaRect;
 };
-const alphaBase = gl ? 0.7 : 0.3;
+const alphaBase = 0.7;
 const colorTeal = rgbaToString(theme.teal.value.normal);
 const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
 const colorAccent = rgbaToString(theme.accent.value[800]);
@@ -387,7 +416,7 @@ function getRectType(field) {
   return 1 /* FIELD_1 */;
 }
 class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo() {
+  getBufferInfo(gl) {
     const visibleFields = dom.getVisibleFields();
     const visibleBlocks = dom.getVisibleBlocks();
     const lengthBefore = this.positions.length;
@@ -450,8 +479,8 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     }
     this.processPendingRects();
     const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo();
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
@@ -488,26 +517,6 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     return null;
   }
 }
-const collector = new DropTargetRectangleBufferCollector(gl, {
-  deferredMode: true
-});
-if (gl) {
-  collector.addRectangle(
-    {
-      id: "active-hover-rect",
-      type: "active-area",
-      label: "Field Area",
-      color: "red",
-      colorAlpha: "red",
-      x: 0,
-      y: 0,
-      width: ui.artboardSize.value.width,
-      height: ui.artboardSize.value.height
-    },
-    5 /* ACTIVE_AREA */,
-    false
-  );
-}
 const fieldColors = computed(() => {
   return {
     "0": theme.accent.value[900],
@@ -632,72 +641,109 @@ function setHoveredFieldArea(box, mouse) {
 }
 let bufferInfo = null;
 let bufferChanged = false;
-onBlokkliEvent("canvas:draw", () => {
-  const scale = ui.artboardScale.value;
-  const offset = { ...ui.artboardOffset.value };
-  dragBox.value = {
-    x: (props.box.x - offset.x) / scale,
-    y: (props.box.y - offset.y) / scale,
-    width: props.box.width / scale,
-    height: props.box.height / scale
-  };
-  const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
-  const result = collector.getBufferInfo();
-  bufferInfo = result.info;
-  bufferChanged = result.hasChanged;
-  if (!props.isTouch) {
-    if (cursorIsInsideClipped()) {
-      const closest = collector.getClosestIntersectingRect(
-        dragBox.value,
-        mouseAbsolute
-      );
-      active.value = closest || null;
-    } else {
-      active.value = null;
+const { collector } = defineRenderer("drop-targets", {
+  zIndex: 400,
+  only: true,
+  collector: () => {
+    const c = new DropTargetRectangleBufferCollector({ deferredMode: true });
+    c.addRectangle(
+      {
+        id: "active-hover-rect",
+        type: "active-area",
+        label: "Field Area",
+        color: "red",
+        colorAlpha: "red",
+        x: 0,
+        y: 0,
+        width: ui.artboardSize.value.width,
+        height: ui.artboardSize.value.height
+      },
+      5 /* ACTIVE_AREA */,
+      false
+    );
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
+  cursor: () => "grabbing",
+  render: (_ctx, gl, program) => {
+    const scale = ui.artboardScale.value;
+    const offset = { ...ui.artboardOffset.value };
+    dragBox.value = {
+      x: (props.box.x - offset.x) / scale,
+      y: (props.box.y - offset.y) / scale,
+      width: props.box.width / scale,
+      height: props.box.height / scale
+    };
+    const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
+    const result = collector.getBufferInfo(gl);
+    bufferInfo = result.info;
+    bufferChanged = result.hasChanged;
+    if (!props.isTouch) {
+      if (cursorIsInsideClipped()) {
+        const closest = collector.getClosestIntersectingRect(
+          dragBox.value,
+          mouseAbsolute
+        );
+        active.value = closest || null;
+      } else {
+        active.value = null;
+      }
     }
-  }
-  setHoveredFieldArea(dragBox.value, mouseAbsolute);
-  if (!gl && ctx) {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    setHoveredFieldArea(dragBox.value, mouseAbsolute);
+    gl.useProgram(program.program);
+    animation.setSharedUniforms(gl, program);
+    setUniforms(program, uniforms.value);
+    if (!bufferInfo) {
+      return;
+    }
+    if (bufferChanged) {
+      setBuffersAndAttributes(gl, program, bufferInfo);
+    }
+    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    const scale = ui.artboardScale.value;
+    const offset = { ...ui.artboardOffset.value };
+    dragBox.value = {
+      x: (props.box.x - offset.x) / scale,
+      y: (props.box.y - offset.y) / scale,
+      width: props.box.width / scale,
+      height: props.box.height / scale
+    };
+    const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
+    const result = collector.getBufferInfo(void 0);
+    bufferInfo = result.info;
+    bufferChanged = result.hasChanged;
+    if (!props.isTouch) {
+      if (cursorIsInsideClipped()) {
+        const closest = collector.getClosestIntersectingRect(
+          dragBox.value,
+          mouseAbsolute
+        );
+        active.value = closest || null;
+      } else {
+        active.value = null;
+      }
+    }
+    setHoveredFieldArea(dragBox.value, mouseAbsolute);
     const rects = Object.values(collector.rects);
     for (let i = 0; i < rects.length; i++) {
       const rect = rects[i];
+      if (rect.id === "active-hover-rect") {
+        continue;
+      }
       if (active.value?.id === rect.id) {
-        ctx.fillStyle = rect.color;
+        ctx2d.fillStyle = rect.color;
       } else {
-        ctx.fillStyle = rect.colorAlpha;
+        ctx2d.fillStyle = rect.colorAlpha;
       }
-      ctx.fillRect(
-        (rect.x * scale + offset.x) * animation.dpi.value,
-        (rect.y * scale + offset.y) * animation.dpi.value,
-        rect.width * animation.dpi.value * scale,
-        rect.height * animation.dpi.value * scale
+      ctx2d.fillRect(
+        (rect.x * scale + offset.x) * ctx.dpi,
+        (rect.y * scale + offset.y) * ctx.dpi,
+        rect.width * ctx.dpi * scale,
+        rect.height * ctx.dpi * scale
       );
     }
   }
 });
-if (gl && programInfo) {
-  defineRenderer("drop-targets", {
-    zIndex: 400,
-    only: true,
-    cursor: () => "grabbing",
-    render: () => {
-      gl.useProgram(programInfo.program);
-      animation.setSharedUniforms(gl, programInfo);
-      setUniforms(programInfo, uniforms.value);
-      if (!bufferInfo) {
-        return;
-      }
-      if (bufferChanged) {
-        setBuffersAndAttributes(gl, programInfo, bufferInfo);
-      }
-      drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
-    }
-  });
-}
-onBeforeUnmount(() => {
-  if (ctx) {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-  }
-});
 </script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/{DropTargets → Renderer}/vertex.glsl

@@ -1,9 +1,11 @@
+#version 300 es
+
 precision highp float;
 
-attribute vec2 a_position;
-attribute vec4 a_quad;
-attribute float a_rect_id;
-attribute float a_rect_type;
+in vec2 a_position;
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
 
 uniform float u_scale;
 uniform float u_offset_x;
@@ -20,10 +22,20 @@ uniform vec4 u_active_hover_rect;
 uniform float u_active_hover_nesting_level;
 uniform float u_dpi;
 
-varying vec4 v_quad;
-varying float v_intersecting;
-varying float v_is_hover_area;
-varying vec3 v_color;
+out vec4 v_quad;
+out float v_intersecting;
+out float v_is_hover_area;
+out vec3 v_color;
+
+// Optimized varyings - values computed once per vertex instead of per pixel
+out vec2 v_size;
+out vec2 v_location;
+out vec2 v_size_inner;
+out float v_thickness;
+out float v_edge_softness;
+out float v_radius_outer;
+out float v_radius_inner;
+out float v_fill_alpha;
 
 vec4 getQuad() {
   if (a_rect_type >= 5.0) {
@@ -61,6 +73,8 @@ void main() {
 
   v_is_hover_area = a_rect_type >= 5.0 ? 1.0 : 0.0;
 
+  bool is_drop_target = a_rect_type <= 0.5;
+
   // Set correct colors based on type.
   if (a_rect_type < 1.0) {
     v_color = u_color_area;
@@ -75,4 +89,42 @@ void main() {
   } else {
     v_color = u_color_hover_area;
   }
+
+  // Compute values that are constant per quad (optimization)
+  bool isHoverArea = v_is_hover_area >= 1.0;
+  float stroke = isHoverArea ? 0.5 : 1.0;
+  float radiusBase = stroke * u_scale;
+
+  v_thickness = max(min(1.0 * u_scale, 3.0), 0.5);
+
+  // Calculate inset to draw border inside the quad
+  float inset = max(min(2.0 * u_scale, 1.0), 3.0) * v_thickness + stroke;
+
+  // Rectangle dimensions with inset
+  float u_rect_x = transformed_quad.x + inset;
+  float u_rect_y = transformed_quad.y + inset;
+  float u_rectWidth = transformed_quad.z - 2.0 * inset;
+  float u_rectHeight = transformed_quad.w - 2.0 * inset;
+
+  v_size = vec2(u_rectWidth, u_rectHeight);
+
+  // Center position of the rectangle
+  v_location = vec2(u_rect_x + v_size.x / 2.0, u_rect_y + v_size.y / 2.0);
+
+  v_edge_softness = 0.5 * u_dpi;
+
+  float borderWidth = stroke * u_scale * u_dpi;
+
+  // Different radius for inner and outer
+  v_radius_outer =
+    min(radiusBase * u_dpi, min(v_size.x, v_size.y)) + v_thickness;
+  v_radius_inner = v_radius_outer - borderWidth;
+
+  v_size_inner = v_size - 2.0 * borderWidth;
+
+  if (is_drop_target) {
+    v_fill_alpha = v_intersecting >= 0.5 ? 0.5 : 0.2;
+  } else {
+    v_fill_alpha = v_intersecting >= 0.5 ? 1.0 : 0.2;
+  }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <DropTargets
+  <Renderer
     v-if="dragItems.length && isVisible"
     v-slot="{ color, label }"
     :items="dragItems"
@@ -18,12 +18,12 @@
       :active-color="color"
       :active-label="label"
     />
-  </DropTargets>
+  </Renderer>
 </template>
 
 <script setup>
 import DragItems from "./DragItems/index.vue";
-import DropTargets from "./DropTargets/index.vue";
+import Renderer from "./Renderer/index.vue";
 import {
   ref,
   useBlokkli,
@@ -188,8 +188,7 @@ const onDropSearchContentItem = async (item, host, afterUuid) => {
   }
 };
 const onDropAction = (action, host, field, afterUuid) => {
-  eventBus.emit("action:placed", {
-    id: action.actionType,
+  action.action.callback({
     preceedingUuid: afterUuid,
     host,
     field

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="slide-in">
       <FormOverlay
         v-if="form"
@@ -32,7 +32,7 @@ const { adapter } = defineBlokkliFeature({
   description: "Listens to edit events and renders an iframe containing the edit form.",
   requiredAdapterMethods: ["formFrameBuilder"]
 });
-const { types, state, context, $t, dom, definitions, blocks } = useBlokkli();
+const { types, state, context, $t, dom, definitions, blocks, ui } = useBlokkli();
 const form = ref(null);
 const formUrl = computed(() => {
   if (form.value) {

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

@@ -166,9 +166,6 @@ const close = async () => {
       el.textContent = originalText.value;
     }
   }
-  if (el) {
-    el.dataset.blokkliEditableActive = void 0;
-  }
 };
 watch(modelValue, (newText) => {
   if (props.element && selection.editableActive.value && !props.isComponent) {
@@ -232,7 +229,6 @@ onMounted(() => {
   }
   originalText.value = modelValue.value;
   selection.editableActive.value = true;
-  el.dataset.blokkliEditableActive = "true";
   const computedStyle = window.getComputedStyle(el);
   inputStyle.value = {
     textAlign: computedStyle.textAlign
@@ -246,8 +242,6 @@ onMounted(() => {
   });
 });
 onBeforeUnmount(async () => {
-  const el = getElement();
   await close();
-  el.dataset.blokkliEditableActive = void 0;
 });
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport :to="ui.mainLayoutElement.value">
     <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
       <Overlay
         v-if="selectedEditable"
@@ -32,7 +32,7 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["updateFieldValue", "getEditableFieldConfig"],
   description: "Implements a form overlay to edit a single field of a block."
 });
-const { selection, adapter, types, $t, state, directive, blocks, context } = useBlokkli();
+const { selection, adapter, types, $t, state, directive, blocks, context, ui } = useBlokkli();
 const selectedEditable = ref(null);
 const hasTransition = ref(false);
 const key = computed(() => {
@@ -85,12 +85,16 @@ const buildEditable = (fieldName, uuid) => {
   if (!(element instanceof HTMLElement)) {
     return;
   }
+  const editable = directive.findEditable(fieldName, host);
+  if (!editable) {
+    return;
+  }
   return {
     fieldName,
     host,
     element,
-    isComponent: element.dataset.blokkliEditableComponent === "true",
-    value: element.dataset.blokkliEditableValue || "",
+    isComponent: editable.isComponent,
+    value: editable.getValue ? editable.getValue() : "",
     config
   };
 };

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

@@ -1,17 +1,10 @@
 <template>
-  <PluginMenuButton
-    id="exit"
-    :title="$t('exitTitle', 'Close')"
-    :description="$t('exitDescription', 'Close editor without publishing')"
-    :weight="100"
-    icon="exit"
-    @click="onClick"
-  />
+  <div />
 </template>
 
 <script setup>
 import { useBlokkli, useRoute, nextTick, defineBlokkliFeature } from "#imports";
-import { PluginMenuButton } from "#blokkli/plugins";
+import defineMenuButton from "#blokkli/helpers/composables/defineMenuButton";
 defineBlokkliFeature({
   id: "exit",
   label: "Exit",
@@ -26,6 +19,16 @@ function onClick() {
     window.location.href = route.path;
   });
 }
+defineMenuButton(() => {
+  return {
+    id: "exit",
+    title: $t("exitTitle", "Close"),
+    description: $t("exitDescription", "Close editor without publishing"),
+    icon: "exit",
+    weight: 100,
+    callback: onClick
+  };
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Fragments/Dialog/Item/index.vue

@@ -10,11 +10,7 @@
       :class="backgroundClass"
     >
       <ScaleToFit :width="previewWidth" :max-height="500">
-        <BlokkliItem
-          v-bind="item"
-          parent-type="nested"
-          class="bk-drop-element"
-        />
+        <BlokkliItem v-bind="item" parent-type="nested" />
       </ScaleToFit>
     </div>
   </div>