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

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

@@ -1,26 +1,15 @@
 <template>
-  <div
+  <ArtboardTooltip
     v-if="loaded"
-    ref="root"
-    :style="style"
-    class="bk-editable-field bk-control"
+    id="editable"
+    :title
+    :anchor-el="element"
+    placement-y="top"
+    class="bk-editable-field"
+    close-icon="check"
+    @close="save"
   >
     <form ref="form" class="bk-editable-field-input" @submit.prevent="close">
-      <div class="bk bk-editable-field-buttons">
-        <h3>
-          <ItemIcon :bundle="itemBundle" />
-          <span>{{ title }}</span>
-        </h3>
-        <button @click.prevent="cancel">
-          <Icon name="close" />
-          <span>{{ $t("cancel", "Cancel") }}</span>
-        </button>
-        <button :disabled="!hasChanged" type="submit" @click.prevent="save">
-          <Icon name="save" />
-          <span>{{ $t("save", "Save") }}</span>
-        </button>
-      </div>
-
       <div ref="input">
         <InputContenteditable
           v-if="config.type === 'markup'"
@@ -50,21 +39,24 @@
         />
       </div>
 
-      <div v-if="!isMarkup" class="bk bk-editable-field-info">
+      <div class="bk bk-editable-field-info">
+        <button :disabled="!hasChanged" @click.prevent="cancel">
+          {{ $t("editableFieldDiscard", "Discard") }}
+        </button>
         <div v-if="errorText" class="bk-editable-field-info-error">
           {{ errorText }}
         </div>
-        <div class="bk-editable-field-info-count">
+        <div v-if="!isMarkup" class="bk-editable-field-info-count">
           <span>{{ count }}</span>
           <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>
         </div>
       </div>
     </form>
-  </div>
+  </ArtboardTooltip>
 </template>
 
 <script setup>
-import { Icon, ItemIcon } from "#blokkli/components";
+import { ArtboardTooltip } from "#blokkli/components";
 import {
   computed,
   ref,
@@ -74,12 +66,21 @@ import {
   useBlokkli,
   nextTick
 } from "#imports";
-import { falsy, findIdealRectPosition } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import InputPlaintext from "./Plaintext/index.vue";
 import InputContenteditable from "./Contenteditable/index.vue";
 import InputFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { eventBus, ui, selection, state, adapter, $t, types } = useBlokkli();
+import { itemEntityType } from "#blokkli-build/config";
+const {
+  eventBus,
+  selection,
+  state,
+  adapter,
+  $t,
+  types,
+  element: elementProvider
+} = useBlokkli();
 const props = defineProps({
   fieldName: { type: String, required: true },
   host: { type: Object, required: true },
@@ -102,48 +103,15 @@ const save = () => {
 };
 onBlokkliEvent("window:clickAway", save);
 const getElement = () => props.element;
-const alignment = computed(() => {
-  if (props.element) {
-    const style2 = window.getComputedStyle(props.element);
-    if (style2.textAlign === "left" || style2.textAlign === "center" || style2.textAlign === "right") {
-      return style2.textAlign;
-    } else if (style2.textAlign === "start") {
-      return "left";
-    } else if (style2.textAlign === "end") {
-      return "right";
-    }
-  }
-  return "center";
-});
 const scrollHeight = ref(0);
 const loaded = ref(false);
 const originalText = ref(props.value || "");
 const modelValue = ref("");
-const width = ref(320);
 const inputStyle = ref({});
 const form = ref(null);
-const root = ref(null);
 const input = ref(null);
-const x = ref(0);
-const y = ref(0);
-const style = computed(() => {
-  if (ui.isMobile.value) {
-    return {};
-  } else {
-    return {
-      width: width.value + "px",
-      top: y.value + "px",
-      left: x.value + "px"
-    };
-  }
-});
 const hasChanged = computed(() => modelValue.value !== originalText.value);
-const itemBundle = computed(() => {
-  if ("itemBundle" in props.host) {
-    return props.host.itemBundle;
-  }
-  return void 0;
-});
+const itemBundle = computed(() => props.host.bundle);
 const maxlength = computed(() => props.config.maxLength);
 const required = computed(() => !!props.config.required);
 const title = computed(() => {
@@ -174,7 +142,7 @@ const close = async () => {
   }
   const el = getElement();
   if (shouldSave.value && modelValue.value !== originalText.value) {
-    if ("itemBundle" in props.host) {
+    if (props.host.type === itemEntityType) {
       await state.mutateWithLoadingState(
         () => adapter.updateFieldValue({
           uuid: props.host.uuid,
@@ -223,44 +191,34 @@ const focusInput = (el) => {
   if (!el) {
     return;
   }
-  const textarea = el.querySelector("textarea");
+  const queryEl = el instanceof Document ? el.documentElement : el;
+  const textarea = elementProvider.query(
+    queryEl,
+    "textarea",
+    "Focus editable field textarea"
+  );
   if (textarea) {
     textarea.focus();
     return;
   }
-  const editable = el.querySelector("[contenteditable]");
-  if (editable instanceof HTMLElement) {
+  const editable = elementProvider.query(
+    queryEl,
+    "[contenteditable]",
+    "Focus editable field contenteditable"
+  );
+  if (editable) {
     editable.focus();
     return;
   }
-  const iframe = el.querySelector("iframe");
+  const iframe = elementProvider.query(
+    queryEl,
+    "iframe",
+    "Find iframe in editable field"
+  );
   if (iframe?.contentDocument) {
     focusInput(iframe.contentDocument);
   }
 };
-const onAnimationFrame = () => {
-  if (ui.isMobile.value) {
-    return;
-  }
-  const elementRect = props.element.getBoundingClientRect();
-  const height = form.value?.scrollHeight || 100;
-  const newWidth = Math.min(Math.max(elementRect.width, 360), 1e3);
-  const ideal = findIdealRectPosition(
-    ui.viewportBlockingRects.value,
-    {
-      x: alignment.value === "left" ? elementRect.x : elementRect.x + (Math.max(elementRect.width, 360) - newWidth) / 2,
-      y: elementRect.y - height - 20,
-      height,
-      width: newWidth
-    },
-    ui.visibleViewportPadded.value
-  );
-  x.value = ideal.x;
-  y.value = ideal.y + height;
-  width.value = newWidth;
-};
-onAnimationFrame();
-onBlokkliEvent("animationFrame", onAnimationFrame);
 onMounted(() => {
   const el = getElement();
   if (props.isComponent) {

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

@@ -1,7 +1,7 @@
-import type { DraggableExistingBlock, EntityContext, EditableFieldConfig } from '#blokkli/types';
+import type { EntityContext, EditableFieldConfig } from '#blokkli/types';
 type __VLS_Props = {
     fieldName: string;
-    host: DraggableExistingBlock | EntityContext;
+    host: EntityContext;
     element: HTMLElement;
     config: EditableFieldConfig;
     isComponent?: boolean;

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

@@ -1,8 +1,13 @@
 <template>
   <Teleport to="body">
-    <Transition :name="hasTransition ? 'bk-editable' : void 0">
-      <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
-    </Transition>
+    <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
+      <Overlay
+        v-if="selectedEditable"
+        v-bind="selectedEditable"
+        :key="key"
+        @close="close"
+      />
+    </BlokkliTransition>
   </Teleport>
 </template>
 
@@ -15,9 +20,11 @@ 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";
+import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "editable-field",
   icon: "textbox",
@@ -25,38 +32,47 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["updateFieldValue", "getEditableFieldConfig"],
   description: "Implements a form overlay to edit a single field of a block."
 });
-const { selection, adapter, types, $t, dom, runtimeConfig, state } = useBlokkli();
-const editable = ref(null);
+const { selection, adapter, types, $t, state, directive, blocks, context } = useBlokkli();
+const selectedEditable = ref(null);
 const hasTransition = ref(false);
 const key = computed(() => {
-  if (!editable.value) {
+  if (!selectedEditable.value) {
     return "";
   }
-  return editable.value.host.uuid + editable.value.fieldName;
+  return selectedEditable.value.host.uuid + selectedEditable.value.fieldName;
 });
 const getHost = (uuid) => {
   if (uuid) {
-    const block = dom.findBlock(uuid);
+    const block = blocks.getBlock(uuid);
     if (block) {
-      return block;
+      return {
+        type: itemEntityType,
+        bundle: block.bundle,
+        uuid: block.uuid
+      };
     }
   }
-  return dom.findClosestEntityContext(dom.getActiveProviderElement());
+  return {
+    type: context.value.entityType,
+    bundle: context.value.entityBundle,
+    uuid: context.value.entityUuid
+  };
 };
 const buildEditable = (fieldName, uuid) => {
   const host = getHost(uuid);
   if (!host) {
     return;
   }
-  const hostEntityType = "type" in host ? host.type : runtimeConfig.itemEntityType;
-  const hostEntityBundle = "bundle" in host ? host.bundle : host.itemBundle;
+  if (host.bundle === "from_library") {
+    return;
+  }
   const config = types.editableFieldConfig.forName(
-    hostEntityType,
-    hostEntityBundle,
+    host.type,
+    host.bundle,
     fieldName
   );
   if (!config) {
-    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${hostEntityType}" of bundle "${hostEntityBundle}"`;
+    let message = `Failed to load editable field config for field "${fieldName}" on entity type "${host.type}" of bundle "${host.bundle}"`;
     if (uuid) {
       message += ` with uuid "${uuid}"`;
     }
@@ -65,10 +81,7 @@ const buildEditable = (fieldName, uuid) => {
   if (config.type === "frame" && !adapter.buildEditableFrameUrl) {
     return;
   }
-  const hostElement = "itemBundle" in host ? host.element() : dom.getActiveProviderElement();
-  const element = hostElement.querySelector(
-    `[data-blokkli-editable-field="${fieldName}"]`
-  );
+  const element = directive.findEditableElement(fieldName, host);
   if (!(element instanceof HTMLElement)) {
     return;
   }
@@ -85,30 +98,19 @@ onBlokkliEvent("editable:focus", (e) => {
   if (!state.canEdit.value) {
     return;
   }
-  hasTransition.value = !editable.value;
-  editable.value = buildEditable(e.fieldName, e.uuid) || null;
-  if (editable.value) {
+  hasTransition.value = !selectedEditable.value;
+  selectedEditable.value = buildEditable(e.fieldName, e.uuid) || null;
+  if (selectedEditable.value) {
     selection.editableActive.value = true;
   }
 });
 defineCommands(() => {
-  const editables = selection.blocks.value.flatMap((v) => {
-    return [...v.element().querySelectorAll("[data-blokkli-editable-field]")].map((el) => {
-      if (!(el instanceof HTMLElement)) {
-        return;
-      }
-      const block = el.closest("[data-uuid]");
-      if (!(block instanceof HTMLElement)) {
-        return;
-      }
-      if (block.dataset.uuid !== v.uuid) {
-        return;
-      }
-      const name = el.dataset.blokkliEditableField;
-      if (!name) {
-        return;
-      }
-      return buildEditable(name, block.dataset.uuid);
+  if (selection.items.value.length > 5) {
+    return [];
+  }
+  const editables = selection.items.value.flatMap((item) => {
+    return directive.getEditablesForBlock(item.uuid).map((v) => {
+      return buildEditable(v.fieldName, item.uuid);
     }).filter(falsy);
   });
   return editables.map((v) => {
@@ -122,7 +124,7 @@ defineCommands(() => {
       icon: "textbox",
       disabled: false,
       callback: () => {
-        editable.value = v;
+        selectedEditable.value = v;
       }
     };
   });
@@ -130,16 +132,16 @@ defineCommands(() => {
 watch(selection.editableActive, (isActive) => {
   if (!isActive) {
     hasTransition.value = true;
-    editable.value = null;
+    selectedEditable.value = null;
   }
 });
-watch(editable, (v) => {
+watch(selectedEditable, (v) => {
   if (!v && selection.editableActive.value) {
     selection.editableActive.value = false;
   }
 });
 const close = () => {
-  editable.value = null;
+  selectedEditable.value = null;
   selection.editableActive.value = false;
 };
 </script>

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/Dialog/index.vue

@@ -37,14 +37,16 @@
         <ul class="bk-library-dialog-list">
           <li
             v-for="(item, index) in fragments"
+            v-show="visible === null || visible.includes(item.name)"
+            ref="itemElements"
             :key="item.name"
             :class="{
   'bk-is-selected': selectedItem === item.name
 }"
+            :data-bk-fragment-name="item.name"
             @click="selectedItem = item.name"
           >
             <FragmentItem
-              v-show="visible === null || visible.includes(item.name)"
               :name="item.name"
               :label="item.label"
               :description="item.description"
@@ -65,7 +67,7 @@
 <script setup>
 import { FormOverlay } from "#blokkli/components";
 import { falsy } from "#blokkli/helpers";
-import { ref, useBlokkli, computed, watch } from "#imports";
+import { ref, useBlokkli, computed, watch, useTemplateRef } from "#imports";
 import FragmentItem from "./Item/index.vue";
 const props = defineProps({
   field: { type: Object, required: true }
@@ -73,7 +75,7 @@ const props = defineProps({
 const { $t, definitions } = useBlokkli();
 const emit = defineEmits(["close", "submit"]);
 const searchText = ref("");
-const listEl = ref(null);
+const itemElements = useTemplateRef("itemElements");
 const selectedItem = ref("");
 const allowedInField = computed(() => props.field.allowedFragments || []);
 const fragments = computed(
@@ -91,15 +93,15 @@ const onClose = () => {
 };
 const elements = ref([]);
 const buildElements = () => {
-  if (!listEl.value) {
+  if (!itemElements.value) {
     return;
   }
-  elements.value = [...listEl.value.querySelectorAll(".bk-library-list-item")].map((el) => {
+  elements.value = itemElements.value.map((el) => {
     if (el instanceof HTMLElement) {
-      const uuid = el.dataset.libraryItemUuid;
-      if (uuid) {
+      const name = el.dataset.bkFragmentName;
+      if (name) {
         return {
-          uuid,
+          name,
           text: el.textContent?.toLowerCase() || ""
         };
       }
@@ -115,6 +117,6 @@ const visible = computed(() => {
   if (!searchText.value || !elements.value.length) {
     return null;
   }
-  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.uuid);
+  return elements.value.filter((v) => v.text.includes(searchText.value.toLowerCase())).map((v) => v.name);
 });
 </script>

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,18 +34,20 @@
 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",
   label: "Fragments",
   description: "Provides way to add content fragments defined by the frontend.",
-  requiredAdapterMethods: ["fragmentsAddBlock"]
+  requiredAdapterMethods: ["fragmentsAddBlock"],
+  dependencies: ["add-list"]
 });
 const { state, $t, types, selection, dom } = useBlokkli();
 const isEnabled = computed(() => {
-  if (selection.blocks.value.length === 1) {
-    const block = selection.blocks.value[0];
-    const field = dom.findField(block.hostUuid, block.hostFieldName);
+  const item = selection.item.value;
+  if (item) {
+    const field = dom.getRegisteredField(item.host.uuid, item.host.fieldName);
     return !!field?.allowedFragments.length;
   }
   return true;

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

@@ -3,6 +3,7 @@
     id="history"
     v-slot="{ scrolledToEnd }"
     :title="$t('history', 'History')"
+    edit-only
     :tour-text="
   $t(
     'historyTourText',
@@ -52,6 +53,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 +71,47 @@ 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 canUndo = computed(
+  () => currentMutationIndex.value >= 0 && state.canEdit.value
+);
 const canRedo = computed(
-  () => currentMutationIndex.value < mutations.value.length - 1
+  () => currentMutationIndex.value < mutationsCount.value - 1 && state.canEdit.value
 );
-function undo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value - 1)
-  );
+const selectionAtHistoryIndex = /* @__PURE__ */ new Map();
+function updateCurrentHistorySelection() {
+  selectionAtHistoryIndex.set(currentMutationIndex.value, [
+    ...selection.uuids.value
+  ]);
+}
+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);
 }
-function redo() {
-  mutateWithLoadingState(
-    () => adapter.setHistoryIndex(currentMutationIndex.value + 1)
-  );
+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 +126,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();
 });