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

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

@@ -40,7 +40,18 @@ const { adapter } = defineBlokkliFeature({
   description: "Renders an overlay when dragging or placing a block.",
   screenshot: "feature-dragging-overlay.jpg"
 });
-const { eventBus, state, ui, animation, dom, selection, definitions } = useBlokkli();
+const {
+  eventBus,
+  state,
+  ui,
+  animation,
+  dom,
+  selection,
+  definitions,
+  blocks,
+  directive,
+  fields
+} = useBlokkli();
 const dragItemsComponent = ref(null);
 const isVisible = ref(false);
 const isTouching = ref(false);
@@ -77,7 +88,7 @@ function filterItemType(items) {
   return { itemType, item: items[0] };
 }
 const onDropNew = async (bundle, host, afterUuid) => {
-  const field = dom.findField(host.uuid, host.fieldName);
+  const field = fields.find(host.uuid, host.fieldName);
   if (!field) {
     throw new Error(
       `Failed to locate field with name "${host.fieldName}" on UUID "${host.uuid}"`
@@ -106,7 +117,7 @@ const onDropNew = async (bundle, host, afterUuid) => {
   }
 };
 const onDropExisting = async (items, host, afterUuid) => {
-  const uuids = items.map((v) => v.uuid);
+  const uuids = items.map((v) => v.block.uuid);
   await state.mutateWithLoadingState(
     () => adapter.moveMultipleBlocks({
       uuids,
@@ -224,15 +235,15 @@ onBlokkliEvent("state:reloaded", async function() {
   }
   eventBus.emit("select", newUuid);
   await renderCycle();
-  const newBlock = dom.findBlock(newUuid);
+  const newBlock = blocks.getBlock(newUuid);
   if (!newBlock) {
     return;
   }
   const allSelected = [...selection.uuids.value, newBlock.uuid];
   eventBus.emit("select", allSelected);
   const definition = definitions.getBlockDefinition(
-    newBlock.itemBundle,
-    newBlock.hostFieldListType
+    newBlock.bundle,
+    newBlock.fieldListType
   );
   if (!definition?.editor?.addBehaviour?.startsWith("editable:")) {
     return;
@@ -241,8 +252,8 @@ onBlokkliEvent("state:reloaded", async function() {
   if (!editableField) {
     return;
   }
-  const editableFieldElement = newBlock.element().querySelector(`[data-blokkli-editable-field="${editableField}"]`);
-  if (!(editableFieldElement instanceof HTMLElement)) {
+  const editableFieldElement = directive.getEditablesForBlock(newUuid).find((v) => v.fieldName === editableField);
+  if (!editableFieldElement) {
     return;
   }
   eventBus.emit("editable:focus", {
@@ -283,17 +294,15 @@ onBlokkliEvent("dragging:start", (e) => {
   mouseY.value = e.coords.y;
   dom.updateVisibleRects();
   dragItems.value = e.items;
-  if ("element" in item) {
-    if (!isTouching.value) {
-      document.removeEventListener("pointerup", onMouseUp);
-      document.addEventListener("pointerup", onMouseUp);
-      document.removeEventListener("pointermove", onMouseMove, {
-        capture: true
-      });
-      document.addEventListener("pointermove", onMouseMove, { capture: true });
-    }
-    eventBus.on("animationFrame", loop);
+  if (!isTouching.value) {
+    document.removeEventListener("pointerup", onMouseUp);
+    document.addEventListener("pointerup", onMouseUp);
+    document.removeEventListener("pointermove", onMouseMove, {
+      capture: true
+    });
+    document.addEventListener("pointermove", onMouseMove, { capture: true });
   }
+  eventBus.on("animationFrame", loop);
 });
 onBlokkliEvent("dragging:end", () => {
   isVisible.value = false;
@@ -303,6 +312,9 @@ onBlokkliEvent("dragging:end", () => {
   document.removeEventListener("pointermove", onMouseMove, { capture: true });
 });
 onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
   if (e.code === "Escape") {
     eventBus.emit("dragging:end");
   }

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

@@ -3,6 +3,7 @@
     id="duplicate"
     :title="$t('duplicate', 'Duplicate')"
     :disabled="!canDuplicate"
+    edit-only
     meta
     key-code="D"
     multiple
@@ -31,22 +32,19 @@ function onClick(items) {
   );
 }
 const canDuplicate = computed(() => {
-  if (state.editMode.value !== "editing") {
-    return false;
-  }
   const blocksByField = {};
   const fieldsByKey = {};
-  const selectedCount = selection.blocks.value.length;
+  const selectedCount = selection.items.value.length;
   for (let i = 0; i < selectedCount; i++) {
-    const block = selection.blocks.value[i];
-    const field = state.getMutatedField(block.hostUuid, block.hostFieldName);
+    const block = selection.items.value[i];
+    const field = state.getMutatedField(block.host.uuid, block.host.fieldName);
     if (!field) {
       continue;
     }
     const fieldKey = getFieldKey(field.entityUuid, field.name);
     const fieldConfig = types.getFieldConfig(
       field.entityType,
-      block.hostBundle,
+      block.host.bundle,
       field.name
     );
     if (!fieldConfig) {
@@ -77,7 +75,7 @@ const canDuplicate = computed(() => {
     if (field.cardinality !== -1 && count + blocks.length > field.cardinality) {
       return false;
     }
-    const bundles = blocks.map((v) => v.itemBundle);
+    const bundles = blocks.map((v) => v.bundle);
     if (!field.allowedBundles.length || bundles.some((bundle) => !field.allowedBundles.includes(bundle))) {
       return false;
     }

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

@@ -1,8 +1,8 @@
 <template>
   <PluginItemAction
-    v-if="isEditing"
     id="edit"
-    :title="$t('edit', 'Edit')"
+    edit-only
+    :title="$t('edit', 'Edit...')"
     :disabled="!canEdit"
     meta
     key-code="E"
@@ -24,27 +24,21 @@ defineBlokkliFeature({
   requiredAdapterMethods: ["formFrameBuilder"]
 });
 const { eventBus, selection, state, $t, adapter, definitions } = useBlokkli();
-const block = computed(() => {
-  if (selection.blocks.value.length !== 1) {
-    return null;
-  }
-  return selection.blocks.value[0];
-});
-const isEditing = computed(() => state.editMode.value === "editing");
 const canEdit = computed(() => {
-  if (!block.value) {
+  const item = selection.item.value;
+  if (!item) {
     return false;
   }
   const definition = definitions.getBlockDefinition(
-    block.value.itemBundle,
-    block.value.hostFieldListType,
-    block.value.parentBlockBundle
+    item.bundle,
+    item.fieldListType,
+    item.parentBlockBundle
   );
   if (definition?.editor?.disableEdit) {
     return false;
   }
-  if (block.value.libraryItemUuid) {
-    return !!adapter.getLibraryItemEditUrl && (state.editMode.value === "editing" || state.editMode.value === "translating") && !block.value.isNew;
+  if (item.library?.libraryItemUuid) {
+    return !!adapter.getLibraryItemEditUrl && (state.editMode.value === "editing" || state.editMode.value === "translating") && !item.isNew;
   }
   return state.editMode.value === "editing";
 });
@@ -56,22 +50,22 @@ function onClick(items) {
     return;
   }
   const item = items[0];
-  if (item.libraryItemUuid && adapter.getLibraryItemEditUrl) {
-    const url = adapter.getLibraryItemEditUrl(item.libraryItemUuid);
+  if (item.library?.libraryItemUuid && adapter.getLibraryItemEditUrl) {
+    const url = adapter.getLibraryItemEditUrl(item.library.libraryItemUuid);
     eventBus.emit("library:edit-item", {
       url,
-      label: item.editTitle,
-      uuid: item.libraryItemUuid
+      label: item.library.label,
+      uuid: item.library.libraryItemUuid
     });
     return;
   }
   eventBus.emit("item:edit", {
     uuid: item.uuid,
-    bundle: item.itemBundle
+    bundle: item.bundle
   });
 }
-onBlokkliEvent("item:doubleClick", function(block2) {
-  onClick([block2]);
+onBlokkliEvent("item:doubleClick", function(block) {
+  onClick([block]);
 });
 </script>
 

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

@@ -24,6 +24,7 @@ import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
 import { FormOverlay, BlokkliTransition } from "#blokkli/components";
 import FormFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { itemEntityType } from "#blokkli-build/config";
 const { adapter } = defineBlokkliFeature({
   id: "edit-form",
   icon: "form",
@@ -31,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 } = useBlokkli();
+const { types, state, context, $t, dom, definitions, blocks } = useBlokkli();
 const form = ref(null);
 const formUrl = computed(() => {
   if (form.value) {
@@ -99,13 +100,13 @@ onBlokkliEvent("item:edit", (e) => {
   if (!state.canEdit.value) {
     return;
   }
-  const block = dom.findBlock(e.uuid);
+  const block = blocks.getBlock(e.uuid);
   if (!block) {
     return;
   }
   const definition = definitions.getBlockDefinition(
     e.bundle,
-    block.hostFieldListType,
+    block.fieldListType,
     block.parentBlockBundle
   );
   if (definition?.editor?.disableEdit) {
@@ -156,12 +157,12 @@ onBlokkliEvent("add:block:new", (e) => {
   if (!state.canEdit.value) {
     return;
   }
-  const field = dom.findField(e.host.uuid, e.host.fieldName);
-  if (field) {
+  const field = dom.getRegisteredField(e.host.uuid, e.host.fieldName);
+  if (field?.entity.type === itemEntityType) {
     const definition = definitions.getBlockDefinition(
       e.bundle,
       field.fieldListType,
-      field.hostEntityBundle
+      field.entity.bundle
     );
     if (definition?.editor?.disableEdit) {
       return;

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

@@ -4,13 +4,24 @@
       ref="iframe"
       :style="{ height: Math.max(height, 150) + 'px' }"
       :src="url"
+      @load="onIframeLoad"
     />
   </div>
 </template>
 
 <script setup>
-import { useBlokkli, ref, computed, onMounted, onBeforeUnmount } from "#imports";
-const { adapter } = useBlokkli();
+import {
+  useBlokkli,
+  ref,
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef
+} from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
+const { adapter, ui, element } = useBlokkli();
+const PROPAGATE_WHEEL = false;
+const rootElement = ui.rootElement();
 const props = defineProps({
   modelValue: { type: String, required: true },
   type: { type: String, required: true },
@@ -18,9 +29,63 @@ const props = defineProps({
   host: { type: Object, required: true },
   initialHeight: { type: Number, required: true }
 });
+const iframe = useTemplateRef("iframe");
+function onIframeLoad() {
+  if (!iframe.value || !PROPAGATE_WHEEL) {
+    return;
+  }
+  const iframeDoc = iframe.value.contentDocument;
+  if (!iframeDoc) {
+    return;
+  }
+  let ckEditor = null;
+  iframe.value.contentDocument.addEventListener("wheel", (e) => {
+    if (!ckEditor) {
+      const el = element.query(
+        iframeDoc.documentElement,
+        ".ck-editor__editable",
+        "Find CKEditor in editable iframe."
+      );
+      if (el) {
+        ckEditor = el;
+      }
+    }
+    if (!ckEditor) {
+      return;
+    }
+    const scrollTop = ckEditor.scrollTop;
+    const scrollHeight = ckEditor.scrollHeight;
+    const clientHeight = ckEditor.clientHeight;
+    const isScrolledToTop = scrollTop === 0;
+    const isScrolledToBottom = scrollTop + clientHeight >= scrollHeight - 1;
+    const isScrollingDown = e.deltaY > 0;
+    const isScrollingUp = e.deltaY < 0;
+    const shouldPropagate = isScrollingUp && isScrolledToTop || isScrollingDown && isScrolledToBottom;
+    if (!shouldPropagate) {
+      return;
+    }
+    const wheelEvent = new WheelEvent("wheel", {
+      deltaX: e.deltaX,
+      deltaY: e.deltaY,
+      deltaZ: e.deltaZ,
+      deltaMode: e.deltaMode,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      screenX: e.screenX,
+      screenY: e.screenY,
+      bubbles: true,
+      cancelable: true,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+      metaKey: e.metaKey
+    });
+    rootElement?.dispatchEvent(wheelEvent);
+  });
+}
 const height = ref(props.initialHeight);
 const url = computed(() => {
-  if ("itemBundle" in props.host) {
+  if (props.host.type === itemEntityType) {
     return adapter.buildEditableFrameUrl({
       uuid: props.host.uuid,
       fieldName: props.fieldName
@@ -43,7 +108,7 @@ const onMessage = (e) => {
 };
 onMounted(() => {
   original.value = props.modelValue;
-  height.value = props.initialHeight + 48;
+  height.value = props.initialHeight;
   window.addEventListener("message", onMessage);
 });
 onBeforeUnmount(() => {

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

@@ -1,9 +1,9 @@
-import type { DraggableExistingBlock, EditableFieldType, EntityContext } from '#blokkli/types';
+import type { EditableFieldType, EntityContext } from '#blokkli/types';
 type __VLS_Props = {
     modelValue: string;
     type: EditableFieldType;
     fieldName: string;
-    host: DraggableExistingBlock | EntityContext;
+    host: EntityContext;
     initialHeight: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,11 +1,16 @@
 <template>
-  <div class="bk bk-editable-field-textarea">
+  <div
+    class="bk bk-editable-field-textarea"
+    :style="{
+  height: height + 'px'
+}"
+  >
     <textarea
+      id="bk-editable-field-textarea"
       ref="input"
       :value="modelValue"
       enterkeyhint="done"
       rows="2"
-      :style="inputStyle"
       v-bind="inputAttributes"
       @keydown.stop.capture="onKeyDown"
       @blur="onBlur"
@@ -13,12 +18,12 @@
   $emit('update:modelValue', $event.target.value)
 "
     />
-    <div :style="inputStyle" class="bk-textarea" v-html="modelValue" />
   </div>
 </template>
 
 <script setup>
-import { useBlokkli, computed } from "#imports";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useBlokkli, computed, useTemplateRef, ref } from "#imports";
 const { ui, selection } = useBlokkli();
 const props = defineProps({
   element: { type: null, required: true },
@@ -27,6 +32,8 @@ const props = defineProps({
   modelValue: { type: String, required: true }
 });
 const emit = defineEmits(["close", "save", "update:modelValue"]);
+const input = useTemplateRef("input");
+const height = ref(20);
 const onKeyDown = (e) => {
   if (e.code === "Escape") {
     e.preventDefault();
@@ -61,10 +68,7 @@ const onBlur = (e) => {
     emit("save");
   }, 100);
 };
-const inputStyle = computed(() => {
-  const computedStyle = window.getComputedStyle(props.element);
-  return {
-    textAlign: computedStyle.textAlign
-  };
+onBlokkliEvent("animationFrame", () => {
+  height.value = Math.max(input.value?.scrollHeight ?? 20, 20);
 });
 </script>

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;