@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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

@@ -23,6 +23,12 @@ import {
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import {
+  determineCanAddChildren,
+  getChildrenOrientation,
+  getGapSize,
+  MIN_GAP
+} from "#blokkli/helpers/dropTargets";
 const props = defineProps({
   items: { type: Array, required: true },
   box: { type: Object, required: true },
@@ -30,7 +36,6 @@ const props = defineProps({
   mouseY: { type: Number, required: true },
   isTouch: { type: Boolean, required: true }
 });
-const MIN_GAP = 20;
 var RectRenderType = /* @__PURE__ */ ((RectRenderType2) => {
   RectRenderType2[RectRenderType2["DROP_AREA"] = 0] = "DROP_AREA";
   RectRenderType2[RectRenderType2["FIELD_1"] = 1] = "FIELD_1";
@@ -139,26 +144,7 @@ const emitDrop = async () => {
     }
   }
   eventBus.emit("dragging:end");
-  eventBus.emit("item:dropped");
 };
-function getChildrenOrientation(element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("flex")) {
-    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  if (computedStyle.display.includes("grid")) {
-    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  return "vertical";
-}
 const draggingBundles = computed(
   () => props.items.flatMap((item) => {
     const bundles = [];
@@ -178,20 +164,6 @@ const selectionUuids = computed(
     }
   }).filter(falsy)
 );
-function getGapSize(orientation, element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
-    const gap = orientation === "vertical" ? computedStyle.columnGap || computedStyle.gridColumnGap : computedStyle.rowGap || computedStyle.gridRowGap;
-    if (gap) {
-      const gapParts = gap.split(" ");
-      const gapValue = gapParts[0];
-      if (gapValue?.endsWith("px")) {
-        return Number.parseFloat(gapValue);
-      }
-    }
-  }
-  return MIN_GAP;
-}
 const fieldChildCache = {};
 const buildChildId = (field, preceedingUuid, type, uuid) => {
   return `${field.key}:${preceedingUuid || ""}:${type || ""}:${uuid || ""}`;
@@ -300,25 +272,6 @@ function getInsertText(field) {
   const bundleLabel = getBundleLabel(field);
   return `${bundleLabel} \xBB <strong>${field.label}</strong>`;
 }
-const determineCanAddChildren = (field, children) => {
-  if (field.cardinality !== -1) {
-    const count = state.getFieldBlockCount(field.key);
-    const childrenThatAreSelection = children.filter((child) => {
-      const uuid = child.dataset.uuid;
-      if (!uuid) {
-        return false;
-      }
-      return selectionUuids.value.includes(uuid);
-    }).length;
-    const countAfter = count - childrenThatAreSelection + props.items.length;
-    if (countAfter > field.cardinality) {
-      return false;
-    }
-  }
-  return !draggingBundles.value.length || draggingBundles.value.every(
-    (bundle) => field.allowedBundles.includes(bundle)
-  );
-};
 const buildEmptyChild = (field, children, orientation, fieldWidth, fieldHeight) => {
   if (children.length === 0) {
     const id = buildChildId(field, null, "empty");
@@ -356,7 +309,15 @@ const buildFieldRect = (key) => {
     return;
   }
   const childElements = [...field.element.children];
-  const canAddChildren = determineCanAddChildren(field, childElements);
+  const currentCount = state.getFieldBlockCount(field.key);
+  const canAddChildren = determineCanAddChildren(
+    field,
+    childElements,
+    selectionUuids.value,
+    currentCount,
+    props.items.length,
+    draggingBundles.value
+  );
   const orientation = field.dropAlignment || getChildrenOrientation(field.element);
   const rect = dom.getFieldRect(field.key);
   if (!rect) {
@@ -406,10 +367,11 @@ const buildDropAreaRect = (area) => {
   cachedDropAreaRects[area.id] = dropAreaRect;
   return dropAreaRect;
 };
+const alphaBase = gl ? 0.7 : 0.3;
 const colorTeal = rgbaToString(theme.teal.value.normal);
-const colorTealAlpha = rgbaToString(theme.teal.value.normal, 0.7);
+const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
 const colorAccent = rgbaToString(theme.accent.value[800]);
-const colorAccentAlpha = rgbaToString(theme.accent.value[800], 0.7);
+const colorAccentAlpha = rgbaToString(theme.accent.value[800], alphaBase);
 function getRectType(field) {
   if (field.nestingLevel >= 3) {
     return 4 /* FIELD_4 */;
@@ -522,21 +484,23 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new DropTargetRectangleBufferCollector(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
-);
+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],

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/vertex.glsl

@@ -1,4 +1,4 @@
-precision mediump float;
+precision highp float;
 
 attribute vec2 a_position;
 attribute vec4 a_quad;

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

@@ -32,6 +32,7 @@ import {
   nextTick
 } from "#imports";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { renderCycle } from "#blokkli/helpers/renderCycle";
 const { adapter } = defineBlokkliFeature({
   icon: "drag",
   id: "dragging-overlay",
@@ -126,13 +127,15 @@ const onDropExisting = async (items, host, afterUuid) => {
   }
 };
 const onDropReusable = async (item, host, afterUuid) => {
-  await state.mutateWithLoadingState(
-    () => adapter.addLibraryItem({
-      libraryItemUuid: item.libraryItemUuid,
-      host,
-      afterUuid
-    })
-  );
+  if (adapter.addLibraryItem) {
+    await state.mutateWithLoadingState(
+      () => adapter.addLibraryItem({
+        libraryItemUuid: item.libraryItemUuid,
+        host,
+        afterUuid
+      })
+    );
+  }
 };
 const onDropClipboardItem = async (item, host, afterUuid) => {
   eventBus.emit("drop:clipboardItem", {
@@ -162,24 +165,28 @@ const onDropMediaLibraryItem = async (items, host, afterUuid) => {
   }
 };
 const onDropSearchContentItem = async (item, host, afterUuid) => {
-  await state.mutateWithLoadingState(
-    () => adapter.addContentSearchItem({
-      item: item.searchItem,
-      host,
-      bundle: item.itemBundle,
-      afterUuid
-    })
-  );
+  if (adapter.addContentSearchItem) {
+    await state.mutateWithLoadingState(
+      () => adapter.addContentSearchItem({
+        item: item.searchItem,
+        host,
+        bundle: item.itemBundle,
+        afterUuid
+      })
+    );
+  }
 };
 const onDropAction = (action, host, field, afterUuid) => {
   eventBus.emit("action:placed", {
+    id: action.actionType,
     preceedingUuid: afterUuid,
-    action,
     host,
     field
   });
 };
+let allUuidsBefore = [];
 const onDrop = (e) => {
+  allUuidsBefore = state.getAllUuids();
   mouseX.value = 0;
   mouseY.value = 0;
   nextTick(async () => {
@@ -203,40 +210,46 @@ const onDrop = (e) => {
     }
     eventBus.emit("dragging:end");
     eventBus.emit("item:dropped");
-    const newUuid = state.mutations.value[state.mutations.value.length - 1]?.plugin?.affectedItemUuid;
-    if (!newUuid) {
-      return;
-    }
-    const newBlock = dom.findBlock(newUuid);
-    if (!newBlock) {
-      return;
-    }
-    const allSelected = [...selection.uuids.value, newBlock.uuid];
-    eventBus.emit("select", allSelected);
-    if (typed.itemType !== "new") {
-      return;
-    }
-    const definition = definitions.getBlockDefinition(
-      newBlock.itemBundle,
-      newBlock.hostFieldListType
-    );
-    if (!definition?.editor?.addBehaviour?.startsWith("editable:")) {
-      return;
-    }
-    const editableField = definition.editor.addBehaviour.split(":")[1];
-    if (!editableField) {
-      return;
-    }
-    const editableFieldElement = newBlock.element().querySelector(`[data-blokkli-editable-field="${editableField}"]`);
-    if (!(editableFieldElement instanceof HTMLElement)) {
-      return;
-    }
-    eventBus.emit("editable:focus", {
-      fieldName: editableField,
-      uuid: newUuid
-    });
   });
 };
+onBlokkliEvent("state:reloaded", async function() {
+  if (!allUuidsBefore.length) {
+    return;
+  }
+  const allUuidsAfter = state.getAllUuids();
+  const newUuid = allUuidsAfter.find((uuid) => !allUuidsBefore.includes(uuid));
+  allUuidsBefore = [];
+  if (!newUuid) {
+    return;
+  }
+  eventBus.emit("select", newUuid);
+  await renderCycle();
+  const newBlock = dom.findBlock(newUuid);
+  if (!newBlock) {
+    return;
+  }
+  const allSelected = [...selection.uuids.value, newBlock.uuid];
+  eventBus.emit("select", allSelected);
+  const definition = definitions.getBlockDefinition(
+    newBlock.itemBundle,
+    newBlock.hostFieldListType
+  );
+  if (!definition?.editor?.addBehaviour?.startsWith("editable:")) {
+    return;
+  }
+  const editableField = definition.editor.addBehaviour.split(":")[1];
+  if (!editableField) {
+    return;
+  }
+  const editableFieldElement = newBlock.element().querySelector(`[data-blokkli-editable-field="${editableField}"]`);
+  if (!(editableFieldElement instanceof HTMLElement)) {
+    return;
+  }
+  eventBus.emit("editable:focus", {
+    fieldName: editableField,
+    uuid: newUuid
+  });
+});
 onBlokkliEvent("dragging:drop", onDrop);
 function loop() {
   if (!isVisible.value) {
@@ -295,6 +308,7 @@ onBlokkliEvent("keyPressed", (e) => {
   }
 });
 onBlokkliEvent("block:append", (e) => {
+  allUuidsBefore = state.getAllUuids();
   onDropNew(e.bundle, e.host, e.afterUuid);
 });
 onUnmounted(() => {

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

@@ -6,15 +6,15 @@
     @touchmove.stop.capture.prevent
   >
     <iframe ref="iframe" allowtransparency :src="url" @load="onIFrameLoad" />
-    <Transition name="bk-loading">
+    <BlokkliTransition name="loading">
       <Loading v-if="!isLoaded" />
-    </Transition>
+    </BlokkliTransition>
   </div>
 </template>
 
 <script setup>
 import { ref, useBlokkli, onUnmounted, onMounted } from "#imports";
-import { Loading } from "#blokkli/components";
+import { Loading, BlokkliTransition } from "#blokkli/components";
 const { eventBus } = useBlokkli();
 const iframe = ref(null);
 const isLoaded = ref(false);

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <FormOverlay
         v-if="form"
         id="edit-form"
@@ -15,13 +15,13 @@
           @close="onClose"
         />
       </FormOverlay>
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
 <script setup>
 import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
-import { FormOverlay } from "#blokkli/components";
+import { FormOverlay, BlokkliTransition } from "#blokkli/components";
 import FormFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { adapter } = defineBlokkliFeature({

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

@@ -1,8 +1,8 @@
 <template>
   <Teleport to="body">
-    <Transition :name="hasTransition ? 'bk-editable' : void 0">
+    <BlokkliTransition name="editable" :enabled="hasTransition">
       <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
-    </Transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -15,6 +15,7 @@ import {
   defineBlokkliFeature
 } from "#imports";
 import Overlay from "./Overlay/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { falsy } from "#blokkli/helpers";
@@ -50,6 +51,9 @@ const buildEditable = (fieldName, uuid) => {
   }
   const hostEntityType = "type" in host ? host.type : runtimeConfig.itemEntityType;
   const hostEntityBundle = "bundle" in host ? host.bundle : host.itemBundle;
+  if (hostEntityBundle === "from_library") {
+    return;
+  }
   const config = types.editableFieldConfig.forName(
     hostEntityType,
     hostEntityBundle,

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

@@ -17,16 +17,9 @@
 </template>
 
 <script setup>
-import {
-  useBlokkli,
-  defineBlokkliFeature,
-  ref,
-  watch,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
+import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
 import { PluginViewOption } from "#blokkli/plugins";
-const HIDE_CLASS = "bk-hide-non-editable";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 defineBlokkliFeature({
   id: "editable-mask",
   icon: "texturebox",
@@ -36,17 +29,7 @@ defineBlokkliFeature({
 });
 const { $t } = useBlokkli();
 const isActive = ref(false);
-const setRootClass = () => {
-  document.documentElement.classList.remove(HIDE_CLASS);
-  if (isActive.value) {
-    document.documentElement.classList.add(HIDE_CLASS);
-  }
-};
-watch(isActive, setRootClass);
-onMounted(setRootClass);
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(HIDE_CLASS);
-});
+addElementClasses(document.documentElement, "bk-hide-non-editable", isActive);
 </script>
 
 <script>

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

@@ -1,5 +1,22 @@
 <template>
   <Teleport to="#bk-toolbar-title">
+    <button
+      v-if="scheduledDate"
+      class="bk-toolbar-title-scheduled"
+      @click.prevent="eventBus.emit('publish:show-dialog')"
+    >
+      <Icon name="calendar-clock" />
+      <div class="bk-toolbar-title-scheduled-text">
+        <div>{{ formattedScheduledDate }}</div>
+      </div>
+      <div class="bk-tooltip">
+        <div>
+          {{
+            $t("scheduledFor", "The changes will be published on this date.")
+          }}
+        </div>
+      </div>
+    </button>
     <button
       ref="buttonEl"
       class="bk-toolbar-button"
@@ -36,15 +53,30 @@
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
 import defineTourItem from "#blokkli/helpers/composables/defineTourItem";
+import { Icon } from "#blokkli/components";
 defineBlokkliFeature({
   id: "entity-title",
   icon: "title",
   label: "Entity Title",
   description: "Renders the title and status of the page entity."
 });
-const { state, eventBus, $t } = useBlokkli();
+const { state, eventBus, $t, ui } = useBlokkli();
 const { entity, mutations } = state;
 const buttonEl = ref(null);
+const scheduledDate = computed(() => state.publishOptions.value?.publishOn);
+const formattedScheduledDate = computed(() => {
+  if (!scheduledDate.value) {
+    return "";
+  }
+  return ui.formatDate(scheduledDate.value, {
+    weekday: "short",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+});
 const statusPublished = computed(
   () => $t("pageIsPublished", "Page is published")
 );

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

@@ -19,14 +19,14 @@
   />
 
   <Teleport to="body">
-    <transition name="bk-slide-in" :duration="200">
+    <BlokkliTransition name="slide-in">
       <FragmentsDialog
         v-if="placedAction && adapter.getLibraryItems"
         :field="placedAction.field"
         @close="placedAction = null"
         @submit="onAddFragment"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -34,6 +34,7 @@
 import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import { PluginAddAction } from "#blokkli/plugins";
 import FragmentsDialog from "./Dialog/index.vue";
+import { BlokkliTransition } from "#blokkli/components";
 const { adapter } = defineBlokkliFeature({
   id: "fragments",
   icon: "fragment",

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

@@ -52,6 +52,7 @@ import {
 } from "#imports";
 import { PluginSidebar, PluginToolbarButton } from "#blokkli/plugins";
 import HistoryList from "./List/index.vue";
+import { MOUSE_BUTTON } from "#blokkli/helpers/dom";
 const { adapter, settings } = defineBlokkliFeature({
   id: "history",
   icon: "history",
@@ -69,31 +70,45 @@ const { adapter, settings } = defineBlokkliFeature({
     }
   }
 });
-const { state, $t, ui } = useBlokkli();
+const { state, $t, ui, selection, eventBus } = useBlokkli();
 const { mutations, currentMutationIndex, mutateWithLoadingState } = state;
+const mutationsCount = computed(() => mutations.value.length);
 const useMouseForHistory = computed(() => settings.value.useMouseButtons);
 const canUndo = computed(() => currentMutationIndex.value >= 0);
 const canRedo = computed(
-  () => currentMutationIndex.value < mutations.value.length - 1
+  () => currentMutationIndex.value < mutationsCount.value - 1
 );
-function undo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value - 1)
-  );
+const selectionAtHistoryIndex = /* @__PURE__ */ new Map();
+function updateCurrentHistorySelection() {
+  selectionAtHistoryIndex.set(currentMutationIndex.value, [
+    ...selection.uuids.value
+  ]);
 }
-function redo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value + 1)
-  );
+function setSelectionFromHistoryIndex(index) {
+  const selection2 = selectionAtHistoryIndex.get(index);
+  if (selection2) {
+    eventBus.emit("select", selection2);
+  }
+}
+async function setHistoryIndex(newIndex) {
+  updateCurrentHistorySelection();
+  await mutateWithLoadingState(() => adapter.setHistoryIndex(newIndex));
+  setSelectionFromHistoryIndex(newIndex);
+}
+async function undo() {
+  await setHistoryIndex(currentMutationIndex.value - 1);
+}
+async function redo() {
+  await setHistoryIndex(currentMutationIndex.value + 1);
 }
 const onMouseUp = (e) => {
-  if (e.button === 3) {
+  if (e.button === MOUSE_BUTTON.FOURTH) {
     e.preventDefault();
     e.stopPropagation();
     if (canUndo.value) {
       undo();
     }
-  } else if (e.button === 4) {
+  } else if (e.button === MOUSE_BUTTON.FIFTH) {
     e.preventDefault();
     e.stopPropagation();
     if (canRedo.value) {
@@ -108,6 +123,14 @@ const setupMouseListeners = () => {
   }
 };
 watch(useMouseForHistory, setupMouseListeners);
+watch(selection.uuids, updateCurrentHistorySelection);
+watch(mutationsCount, (count) => {
+  for (const [index] of selectionAtHistoryIndex) {
+    if (index >= count) {
+      selectionAtHistoryIndex.delete(index);
+    }
+  }
+});
 onMounted(() => {
   setupMouseListeners();
 });

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

@@ -51,8 +51,12 @@
         }}
       </div>
       <div
-        class="bk-radio-list"
-        :style="{ opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1 }"
+        :style="{
+  opacity: searchTerm !== resultsSearchTerm ? 0.5 : 1,
+  height: '420px',
+  overflow: 'auto',
+  marginTop: '10px'
+}"
       >
         <label v-for="entity in entities" :key="entity.uuid" class="bk-radio">
           <input

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

@@ -13,13 +13,13 @@
   />
 
   <Teleport to="body">
-    <transition appear name="bk-slide-up">
+    <BlokkliTransition name="slide-up">
       <ExistingDialog
         v-if="showModal"
         @confirm="onSubmit($event.sourceUuid, $event.fields)"
         @cancel="showModal = false"
       />
-    </transition>
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -32,6 +32,7 @@ import {
   defineBlokkliFeature
 } from "#imports";
 import { PluginMenuButton } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import ExistingDialog from "./Dialog/index.vue";
 const { adapter, settings } = defineBlokkliFeature({
   id: "import-existing",