@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.50

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

@@ -1,364 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-import {
-  falsy,
-  getDistance,
-  getInteractionCoordinates,
-  isInsideRect
-} from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { watch, ref, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-const { dom, eventBus, selection, keyboard, ui, state } = useBlokkli();
-const rootEl = ui.rootElement();
-const rects = ref([]);
-function buildRects() {
-  const visible = dom.getVisibleBlocks();
-  rects.value = visible.map((uuid) => {
-    const rect = dom.getBlockRect(uuid);
-    if (!rect) {
-      return;
-    }
-    return { uuid, rect };
-  }).filter(falsy);
-}
-watch(dom.isReady, buildRects);
-let lastInteractedElement = null;
-let pointerDownElement = null;
-let mouseStartCoordinates = null;
-function getInteractedElement(e) {
-  const { x, y } = getInteractionCoordinates(e);
-  const elements = document.elementsFromPoint(x, y);
-  let editableFieldName = "";
-  let uuid = "";
-  for (let i = 0; i < elements.length; i++) {
-    let el = elements[i];
-    if (!(el instanceof HTMLElement)) {
-      continue;
-    }
-    if (el.dataset.blokkliEditableField) {
-      editableFieldName = el.dataset.blokkliEditableField;
-    }
-    if (el instanceof HTMLTableCellElement) {
-      const parent = el.parentElement;
-      if (parent instanceof HTMLTableRowElement) {
-        el = parent;
-      }
-    }
-    if (!(el instanceof HTMLElement)) {
-      continue;
-    }
-    if (!el.dataset.uuid) {
-      continue;
-    }
-    const block = dom.findBlock(el.dataset.uuid);
-    if (!block) {
-      continue;
-    }
-    const draggableEl = dom.getDragElement(block);
-    if (draggableEl && el !== draggableEl && !elements.includes(draggableEl)) {
-      continue;
-    }
-    uuid = el.dataset.uuid;
-    break;
-  }
-  if (editableFieldName || uuid) {
-    return { editableFieldName, uuid, timestamp: Date.now(), x, y };
-  }
-  const visibleUuids = dom.getVisibleBlocks();
-  for (let i = 0; i < visibleUuids.length; i++) {
-    const rect = dom.getBlockRect(visibleUuids[i]);
-    if (rect) {
-      const relativeRect = ui.getViewportRelativeRect(rect);
-      if (isInsideRect(x, y, relativeRect)) {
-        return {
-          uuid: visibleUuids[i],
-          timestamp: Date.now(),
-          x,
-          y
-        };
-      }
-    }
-  }
-  return null;
-}
-function onPointerMove(e) {
-  if (keyboard.isPressingSpace.value || state.editMode.value !== "editing") {
-    return;
-  }
-  e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-  if (e.pointerType === "touch") {
-    return onTouchMove(e);
-  }
-  if (e.buttons !== 1) {
-    return;
-  }
-  if (!pointerDownElement || !mouseStartCoordinates || selection.isDragging.value || keyboard.isPressingSpace.value || selection.isMultiSelecting.value) {
-    return;
-  }
-  const diffX = Math.abs(mouseStartCoordinates.x - e.clientX);
-  const diffY = Math.abs(mouseStartCoordinates.y - e.clientY);
-  if (diffX < 6 && diffY < 6) {
-    return;
-  }
-  const interacted = getInteractedElement(e);
-  if (interacted && interacted.uuid) {
-    if (selection.uuids.value.includes(interacted.uuid)) {
-      eventBus.emit("dragging:start", {
-        items: [...selection.blocks.value],
-        coords: { x: e.clientX, y: e.clientY },
-        mode: "mouse"
-      });
-    } else {
-      const block = dom.findBlock(interacted.uuid);
-      if (block) {
-        eventBus.emit("dragging:start", {
-          items: [block],
-          coords: { x: e.clientX, y: e.clientY },
-          mode: "mouse"
-        });
-      }
-    }
-  }
-}
-let pointerDownTimestamp = 0;
-let pointerUpTimestamp = 0;
-function onPointerDown(e) {
-  if (!keyboard.isPressingSpace.value) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-  }
-  keyboard.setShortcutStateFromEvent(e);
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  if (state.isLoading.value) {
-    return;
-  }
-  rootEl.addEventListener("pointermove", onPointerMove);
-  if (e.pointerType === "touch") {
-    return onTouchStart(e);
-  }
-  if (selection.isDragging.value) {
-    return;
-  }
-  const coords = { x: e.clientX, y: e.clientY };
-  if (!e.shiftKey && e.buttons !== 2) {
-    pointerDownTimestamp = Date.now();
-    mouseStartCoordinates = coords;
-    const interacted = getInteractedElement(e);
-    pointerDownElement = interacted;
-    if (interacted) {
-      return;
-    }
-  }
-  eventBus.emit("mouse:down", { ...coords, type: "mouse", distance: 0 });
-}
-function onPointerUp(e) {
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-  const wasDragging = selection.isDragging.value;
-  const wasMultiSelecting = selection.isMultiSelecting.value;
-  pointerDownElement = null;
-  if (state.isLoading.value) {
-    return;
-  }
-  if (e.pointerType === "touch") {
-    return onTouchEnd(e);
-  }
-  const coords = getInteractionCoordinates(e);
-  const distance = mouseStartCoordinates ? getDistance(mouseStartCoordinates, coords) : 0;
-  eventBus.emit("mouse:up", {
-    x: e.clientX,
-    y: e.clientY,
-    type: "mouse",
-    distance,
-    duration: Date.now() - pointerDownTimestamp
-  });
-  if (wasDragging || wasMultiSelecting) {
-    eventBus.emit("dragging:end");
-    return;
-  }
-  if (keyboard.isPressingSpace.value) {
-    return;
-  }
-  if (selection.editableActive.value) {
-    eventBus.emit("window:clickAway");
-    lastInteractedElement = null;
-    return;
-  }
-  const clicked = getInteractedElement(e);
-  if (clicked && pointerUpTimestamp && lastInteractedElement && (clicked.uuid === lastInteractedElement.uuid || clicked.editableFieldName === lastInteractedElement.editableFieldName)) {
-    const deltaTime = Date.now() - pointerUpTimestamp;
-    const deltaX = Math.abs(lastInteractedElement.x - e.clientX);
-    const deltaY = Math.abs(lastInteractedElement.y - e.clientY);
-    if (deltaTime < 400 && deltaX < 3 && deltaY < 3) {
-      if (clicked.editableFieldName) {
-        eventBus.emit("editable:focus", {
-          fieldName: clicked.editableFieldName,
-          uuid: clicked.uuid
-        });
-        return;
-      }
-      if (lastInteractedElement.uuid) {
-        const block = dom.findBlock(lastInteractedElement.uuid);
-        if (!block) {
-          return;
-        }
-        eventBus.emit("item:doubleClick", block);
-      }
-    }
-  }
-  lastInteractedElement = clicked;
-  pointerUpTimestamp = Date.now();
-  if (clicked?.uuid) {
-    dom.refreshBlockRect(clicked.uuid);
-    if (keyboard.isPressingControl.value || selection.isMultiSelecting.value) {
-      eventBus.emit("select:toggle", clicked.uuid);
-    } else if (keyboard.isPressingShift.value) {
-      eventBus.emit("select:shiftToggle", clicked.uuid);
-    } else {
-      eventBus.emit("select", clicked.uuid);
-    }
-    return;
-  }
-  eventBus.emit("window:clickAway");
-}
-let longPressTimeout = null;
-let touchStartInteraction = null;
-let touchStartCoords = null;
-let longPressInteraction = null;
-let touchStartTimestamp = 0;
-function onTouchStart(e) {
-  if (e.isPrimary) {
-    touchStartTimestamp = Date.now();
-  }
-  longPressInteraction = null;
-  const coords = getInteractionCoordinates(e);
-  touchStartCoords = coords;
-  eventBus.emit("mouse:down", { ...coords, type: "touch", distance: 0 });
-  if (selection.isDragging.value) {
-    return;
-  }
-  clearTimeout(longPressTimeout);
-  const interacted = getInteractedElement(e);
-  if (!interacted?.uuid) {
-    return;
-  }
-  touchStartInteraction = interacted;
-  longPressTimeout = setTimeout(() => {
-    if (touchStartInteraction?.uuid) {
-      longPressInteraction = touchStartInteraction;
-      if (selection.uuids.value.includes(touchStartInteraction.uuid) && state.editMode.value === "editing") {
-        eventBus.emit("dragging:start", {
-          items: [...selection.blocks.value],
-          coords: {
-            x: touchStartInteraction.x,
-            y: touchStartInteraction.y
-          },
-          mode: "touch"
-        });
-        return;
-      }
-      eventBus.emit("select:start", {
-        uuids: [...selection.uuids.value, touchStartInteraction.uuid],
-        mode: "touch"
-      });
-    }
-  }, 500);
-}
-function onTouchMove(e) {
-  if (!longPressTimeout || !touchStartInteraction) {
-    return;
-  }
-  const coords = getInteractionCoordinates(e);
-  const deltaX = Math.abs(coords.x - touchStartInteraction.x);
-  const deltaY = Math.abs(coords.y - touchStartInteraction.y);
-  if (deltaX > 10 || deltaY > 10) {
-    clearTimeout(longPressTimeout);
-    longPressTimeout = null;
-  }
-}
-function onTouchEnd(e) {
-  const wasDragging = selection.isDragging.value;
-  const coords = getInteractionCoordinates(e);
-  const distance = touchStartCoords ? getDistance(touchStartCoords, coords) : 0;
-  if (e.isPrimary) {
-    eventBus.emit("mouse:up", {
-      ...coords,
-      type: "touch",
-      distance,
-      duration: Date.now() - touchStartTimestamp
-    });
-  }
-  clearTimeout(longPressTimeout);
-  longPressTimeout = null;
-  if (wasDragging) {
-    return;
-  }
-  if (!touchStartCoords) {
-    return;
-  }
-  if (distance > 7) {
-    return;
-  }
-  const interacted = getInteractedElement(e);
-  if (interacted?.uuid) {
-    if (longPressInteraction && longPressInteraction.uuid === interacted.uuid) {
-      return;
-    }
-    if (selection.isMultiSelecting.value) {
-      eventBus.emit("select:toggle", interacted.uuid);
-    } else {
-      eventBus.emit("select", interacted.uuid);
-    }
-  } else {
-    eventBus.emit("window:clickAway");
-  }
-  longPressInteraction = null;
-}
-onBlokkliEvent("dragging:start", (e) => {
-  mouseStartCoordinates = e.coords;
-});
-function onClick(e) {
-  e.preventDefault();
-  e.stopImmediatePropagation();
-  e.stopPropagation();
-}
-onMounted(() => {
-  const providerElement = ui.providerElement();
-  providerElement.addEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.addEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.addEventListener("pointerdown", onPointerDown, {
-    capture: true
-  });
-  rootEl.addEventListener("pointerup", onPointerUp, {
-    capture: true
-  });
-});
-onBeforeUnmount(() => {
-  const providerElement = ui.providerElement();
-  providerElement.removeEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.removeEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.removeEventListener("pointerdown", onPointerDown, {
-    capture: true
-  });
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  rootEl.removeEventListener("pointerup", onPointerUp, {
-    capture: true
-  });
-});
-</script>

package/dist/runtime/components/Edit/DragInteractions/index.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

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

@@ -1,189 +0,0 @@
-<template>
-  <div
-    v-if="proxyMode || globalProxyMode"
-    class="bk bk-field-list-proxy"
-    :class="[
-  {
-    'bk-is-visible': proxyVisible
-  },
-  'bk-is-' + (dropAlignment || (nestingLevel === 0 ? 'vertical' : 'horizontal'))
-]"
-  >
-    <div
-      ref="root"
-      class="bk-field-list-proxy-list bk-draggable-list-container"
-      v-bind="fieldAttributes"
-    >
-      <BlokkliItem
-        v-for="(item, i) in list"
-        :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
-        :index="i"
-        :parent-type="isNested ? entity.bundle : ''"
-        data-editing="true"
-        data-element-type="existing"
-        :data-sortli-id="item.uuid"
-        :data-uuid="item.uuid"
-        :data-host-type="entity.type"
-        :data-host-bundle="entity.bundle"
-        :data-host-uuid="entity.uuid"
-        :data-item-bundle="item.bundle"
-        :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)"
-      />
-    </div>
-  </div>
-  <Component
-    :is="tag"
-    v-else
-    ref="root"
-    :class="['bk-draggable-list-container', attrs.class]"
-    v-bind="fieldAttributes"
-  >
-    <BlokkliItem
-      v-for="(item, i) in list"
-      :key="item.uuid + fieldListType"
-      :uuid="item.uuid"
-      :bundle="item.bundle"
-      :is-new="item.isNew"
-      :options="item.options"
-      :props="item.props"
-      is-editing
-      :index="i"
-      :parent-type="isNested ? entity.bundle : ''"
-      data-editing="true"
-      data-element-type="existing"
-      :data-sortli-id="item.uuid"
-      :data-uuid="item.uuid"
-      :data-host-type="entity.type"
-      :data-host-bundle="entity.bundle"
-      :data-host-uuid="entity.uuid"
-      :data-item-bundle="item.bundle"
-      :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)"
-    />
-  </Component>
-</template>
-
-<script setup>
-import {
-  computed,
-  useBlokkli,
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  useAttrs,
-  provide,
-  watch
-} from "#imports";
-import BlokkliItem from "./../BlokkliItem.vue";
-import { isVisibleByOptions } from "#blokkli/helpers/runtimeHelpers";
-import {
-  INJECT_FIELD_PROXY_MODE,
-  INJECT_IS_EDITING
-} from "#blokkli/helpers/symbols";
-const { dom, types, runtimeConfig, selection, definitions } = useBlokkli();
-const root = ref(null);
-const props = defineProps({
-  name: { type: String, required: true },
-  fieldKey: { type: String, required: true },
-  list: { type: Array, required: true },
-  entity: { type: Object, required: true },
-  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 },
-  allowedFragments: { type: Array, required: false, default: void 0 },
-  dropAlignment: { type: String, required: false, default: void 0 },
-  proxyMode: { type: Boolean, required: false },
-  globalProxyMode: { type: Boolean, required: false },
-  nestingLevel: { type: Number, required: true },
-  shouldRenderItem: { type: Function, required: false, default: void 0 }
-});
-const attrs = useAttrs();
-provide(INJECT_FIELD_PROXY_MODE, props.proxyMode);
-provide(INJECT_IS_EDITING, true);
-const proxyVisible = computed(
-  () => props.proxyMode && (selection.uuids.value.length || selection.isDragging.value || selection.isMultiSelecting.value)
-);
-const fieldConfig = computed(() => {
-  const match = types.getFieldConfig(
-    props.entity.type,
-    props.entity.bundle,
-    props.name
-  );
-  if (!match) {
-    throw new Error(
-      `Missing field configuration for field "${props.name}" on entity type "${props.entity.type}" with bundle "${props.entity.bundle}". Make sure the "name" prop passed to <BlokkliField> is correct.`
-    );
-  }
-  return match;
-});
-const allowedBundles = computed(() => {
-  const bundles = fieldConfig.value.allowedBundles;
-  if (!bundles.length) {
-    console.error(
-      `Field with name "${props.name}" on entity "${props.entity.type}" with bundle "${props.entity.bundle}" does not define any allowed bundles.`
-    );
-  }
-  return bundles.join(",");
-});
-const fieldAttributes = computed(() => {
-  return {
-    "data-field-name": props.name,
-    "data-field-label": fieldConfig.value.label,
-    "data-field-is-nested": props.isNested,
-    "data-bk-nesting-level": props.nestingLevel,
-    "data-host-entity-type": props.entity.type,
-    "data-host-entity-uuid": props.entity.uuid,
-    "data-host-entity-bundle": props.entity.bundle,
-    "data-field-key": props.fieldKey,
-    "data-field-drop-alignment": props.dropAlignment,
-    "data-allowed-fragments": props.allowedFragments ? props.allowedFragments.join(",") : void 0,
-    "data-field-allowed-bundles": allowedBundles.value,
-    "data-field-list-type": props.fieldListType,
-    "data-field-cardinality": fieldConfig.value.cardinality
-  };
-});
-function isMuted(item) {
-  if (!item) {
-    return true;
-  }
-  const isVisible = isVisibleByOptions(item, props.language);
-  const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
-  return !(isVisible && isVisibleCustom);
-}
-watch(root, function(newRoot) {
-  if (newRoot) {
-    dom.updateFieldElement(props.entity, props.name, newRoot);
-  }
-});
-onMounted(() => {
-  if (root.value) {
-    dom.registerField(props.entity, props.name, root.value);
-  }
-});
-onBeforeUnmount(() => {
-  dom.unregisterField(props.entity, props.name);
-});
-defineOptions({
-  inheritAttrs: false
-});
-if (import.meta.hot) {
-  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
-  });
-}
-</script>

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

@@ -1,27 +0,0 @@
-import type { FieldListItem, EntityContext } from '#blokkli/types';
-import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItemTyped } from '#blokkli-build/generated-types';
-type __VLS_Props = {
-    name: string;
-    fieldKey: string;
-    list: FieldListItem[];
-    entity: EntityContext;
-    language?: string;
-    tag?: string;
-    isNested: boolean;
-    fieldListType: string;
-    allowedFragments?: BlokkliFragmentName[];
-    dropAlignment?: 'vertical' | 'horizontal';
-    proxyMode?: boolean;
-    globalProxyMode?: boolean;
-    nestingLevel: number;
-    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    allowedFragments: BlokkliFragmentName[];
-    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/EditIndicator.vue

@@ -1,70 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div v-show="isVisible" class="bk">
-      <div class="bk-edit-indicator" :style="style">
-        <button
-          ref="button"
-          class="bk-button bk-is-primary"
-          @mouseenter="isHovering = true"
-          @mouseleave="isHovering = false"
-          @click="$emit('edit')"
-        >
-          {{ label }}
-        </button>
-      </div>
-
-      <div
-        v-if="overlayStyle"
-        :style="overlayStyle"
-        class="bk-edit-indicator-overlay"
-      />
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import textProvider from "#blokkli/helpers/textProvider";
-import { ref, computed } from "#imports";
-import "#blokkli-build/styles.css";
-import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
-const props = defineProps({
-  uuid: { type: String, required: true },
-  editLabel: { type: String, required: false }
-});
-const $t = textProvider();
-const label = computed(
-  () => props.editLabel || $t("editIndicatorLabel", "Edit blocks")
-);
-defineEmits(["edit"]);
-const isHovering = ref(false);
-const style = ref({});
-const button = ref(null);
-const isVisible = ref(false);
-const overlayStyle = ref(null);
-function calculateIdealYPosition(elementHeight, bounds) {
-  const idealTop = Math.min(
-    Math.max(bounds.top, bounds.bottom - elementHeight - 20),
-    20
-  );
-  return Math.max(idealTop, bounds.y + 20);
-}
-useAnimationFrame(() => {
-  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`);
-  isVisible.value = window.innerWidth > 1024;
-  if (isVisible.value && el && el instanceof HTMLElement && button.value) {
-    const rect = el.getBoundingClientRect();
-    const buttonHeight = button.value.getBoundingClientRect().height;
-    const y = calculateIdealYPosition(buttonHeight, rect);
-    style.value.transform = `translateY(${y}px)`;
-    if (isHovering.value) {
-      overlayStyle.value = {
-        width: rect.width + "px",
-        height: rect.height + "px",
-        transform: `translate(${rect.x}px, ${rect.y}px)`
-      };
-    } else {
-      overlayStyle.value = null;
-    }
-  }
-});
-</script>

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

@@ -1,11 +0,0 @@
-import '#blokkli-build/styles.css';
-type __VLS_Props = {
-    uuid: string;
-    editLabel?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    edit: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onEdit?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;