@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/components/Edit/DiffViewer/State.vue

@@ -1,276 +0,0 @@
-<template>
-  <div class="bk bk-diff-view">
-    <div class="bk-diff-mode-selector">
-      <FormRadioTabs
-        id="diff-viewer-state-display"
-        v-model="diffMode"
-        :options="diffModeOptions"
-        :label="$t('diffModeLabel', 'Display')"
-        :scheme
-      />
-    </div>
-    <div class="bk-diff-table" :data-diff-mode="diffMode">
-      <button
-        v-for="item in diffItems"
-        :key="item.uuid"
-        class="bk-diff-item"
-        :class="{
-  'bk-is-muted': showSelect && !selected?.includes(item.uuid)
-}"
-        @click.prevent="onClick(item.uuid)"
-      >
-        <div
-          class="bk-diff-item-header"
-          :disabled="item.status === 'removed' && !showSelect"
-          :class="{
-  'bk-is-selected': showSelect && selected?.includes(item.uuid)
-}"
-        >
-          <div class="bk-blokkli-item-label">
-            <div class="bk-blokkli-item-label-icon">
-              <ItemIcon :bundle="item.bundle" />
-            </div>
-            <span>{{ getLabel(item.bundle) }}</span>
-          </div>
-          <div class="bk-diff-status">
-            <div
-              v-if="item.status === 'added'"
-              class="bk-diff-status-label bk-is-added"
-            >
-              {{ $t("diffStatusAdded", "Added") }}
-            </div>
-            <div
-              v-else-if="item.status === 'removed'"
-              class="bk-diff-status-label bk-is-removed"
-            >
-              {{ $t("diffStatusDeleted", "Deleted") }}
-            </div>
-            <div
-              v-else-if="item.status === 'unchanged'"
-              class="bk-diff-status-label"
-            >
-              {{ $t("diffStatusUnchanged", "Unchanged") }}
-            </div>
-            <div v-else class="bk-diff-status-label">
-              {{ $t("diffStatusEdited", "Edited") }}
-            </div>
-          </div>
-        </div>
-        <div class="bk-diff-item-diffs">
-          <div
-            v-for="prop in item.props"
-            :key="prop.key"
-            class="bk-diff-prop-row"
-          >
-            <h3>{{ prop.key }}</h3>
-            <div class="bk-diff-monospace">
-              <div
-                v-if="diffMode === 'inline'"
-                class="bk-diff-prop-diff"
-                v-html="prop.diff"
-              />
-              <div
-                v-else-if="diffMode === 'side_by_side'"
-                class="bk-diff-prop-side-by-side"
-              >
-                <div class="bk-diff-prop-before">
-                  <div class="bk-diff-prop-label">
-                    {{ $t("diffBefore", "Before") }}
-                  </div>
-                  <div class="bk-diff-prop-content" v-html="prop.before" />
-                </div>
-                <div class="bk-diff-prop-after">
-                  <div class="bk-diff-prop-label">
-                    {{ $t("diffAfter", "After") }}
-                  </div>
-                  <div class="bk-diff-prop-content" v-html="prop.after" />
-                </div>
-              </div>
-              <div
-                v-else-if="diffMode === 'after'"
-                class="bk-diff-prop-after-only"
-              >
-                <div class="bk-diff-prop-content" v-html="prop.after" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, useBlokkli } from "#imports";
-import { ItemIcon, FormRadioTabs } from "#blokkli/components";
-import diff from "html-diff-ts";
-const props = defineProps({
-  stateBefore: { type: Object, required: true },
-  stateAfter: { type: Object, required: true },
-  showSelect: { type: Boolean, required: false },
-  includeUuids: { type: Array, required: false },
-  selected: { type: Array, required: false },
-  scheme: { type: String, required: false }
-});
-const { types, $t, eventBus, dom, definitions, storage } = useBlokkli();
-const diffMode = storage.use(
-  "diffMode",
-  "inline"
-);
-const diffModeOptions = computed(() => [
-  {
-    value: "inline",
-    label: $t("diffModeInline", "Inline")
-  },
-  {
-    value: "side_by_side",
-    label: $t("diffModeSideBySide", "Both")
-  },
-  {
-    value: "after",
-    label: $t("diffModeAfter", "After")
-  }
-]);
-const emit = defineEmits(["toggle"]);
-function getProps(bundle, props2) {
-  const definition = definitions.getDefaultDefinition(bundle);
-  if (definition?.editor?.mapDiffProps) {
-    return definition.editor.mapDiffProps(props2);
-  }
-  if (typeof props2 === "object") {
-    return Object.entries(props2).reduce(
-      (acc, [key, value]) => {
-        if (typeof value === "string" || typeof value === "number") {
-          acc[key] = value.toString();
-        } else if (typeof value === "object") {
-          try {
-            const json = JSON.stringify(value, null, 2);
-            acc[key] = `<pre>${json}</pre>`;
-          } catch {
-          }
-        }
-        return acc;
-      },
-      {}
-    );
-  }
-  return {};
-}
-function buildDiffItems(fields) {
-  const items = (fields || []).flatMap((v) => v.list);
-  return items;
-}
-const itemsBefore = computed(
-  () => buildDiffItems(props.stateBefore.mutatedState?.fields)
-);
-const itemsAfter = computed(
-  () => buildDiffItems(props.stateAfter.mutatedState?.fields)
-);
-function toString(v) {
-  if (typeof v === "string") {
-    return v;
-  } else if (typeof v === "number") {
-    return v.toString();
-  }
-  return "";
-}
-const diffItems = computed(() => {
-  const diffMap = /* @__PURE__ */ new Map();
-  itemsBefore.value.forEach((beforeItem) => {
-    if (props.includeUuids && !props.includeUuids.includes(beforeItem.uuid)) {
-      return;
-    }
-    const afterItem = itemsAfter.value.find(
-      (item) => item.uuid === beforeItem.uuid
-    );
-    const beforeProps = getProps(beforeItem.bundle, beforeItem.props);
-    if (!afterItem) {
-      diffMap.set(beforeItem.uuid, {
-        uuid: beforeItem.uuid,
-        bundle: beforeItem.bundle,
-        status: "removed",
-        props: Object.entries(beforeProps).map(([key, value]) => ({
-          key,
-          diff: diff(toString(value), ""),
-          before: toString(value),
-          after: ""
-        }))
-      });
-    } else {
-      const afterProps = getProps(afterItem.bundle, afterItem.props);
-      const changedProps = [];
-      Object.entries(beforeProps).forEach(([key, beforeValue]) => {
-        const afterValue = afterProps[key];
-        if (beforeValue !== afterValue) {
-          changedProps.push({
-            key,
-            diff: diff(toString(beforeValue), toString(afterValue)),
-            before: toString(beforeValue),
-            after: toString(afterValue)
-          });
-        }
-      });
-      Object.keys(afterProps).forEach((key) => {
-        if (!(key in beforeProps)) {
-          changedProps.push({
-            key,
-            diff: diff("", toString(afterProps[key])),
-            before: "",
-            after: toString(afterProps[key])
-          });
-        }
-      });
-      if (changedProps.length > 0) {
-        diffMap.set(beforeItem.uuid, {
-          uuid: beforeItem.uuid,
-          bundle: beforeItem.bundle,
-          status: "changed",
-          props: changedProps
-        });
-      } else if (props.includeUuids) {
-        diffMap.set(beforeItem.uuid, {
-          uuid: beforeItem.uuid,
-          bundle: beforeItem.bundle,
-          status: "unchanged",
-          props: []
-        });
-      }
-    }
-  });
-  itemsAfter.value.forEach((afterItem) => {
-    if (!itemsBefore.value.some((item) => item.uuid === afterItem.uuid)) {
-      const afterProps = getProps(afterItem.bundle, afterItem.props);
-      diffMap.set(afterItem.uuid, {
-        uuid: afterItem.uuid,
-        bundle: afterItem.bundle,
-        status: "added",
-        props: Object.entries(afterProps).map(([key, value]) => ({
-          key,
-          diff: diff("", toString(value)),
-          before: "",
-          after: toString(value)
-        }))
-      });
-    }
-  });
-  return Array.from(diffMap.values()).sort((a, b) => {
-    const aY = dom.getBlockRect(a.uuid)?.y || 0;
-    const bY = dom.getBlockRect(b.uuid)?.y || 0;
-    return aY - bY;
-  });
-});
-function onClick(uuid) {
-  if (props.showSelect) {
-    emit("toggle", uuid);
-  } else {
-    scrollToBlock(uuid);
-  }
-}
-function getLabel(bundle) {
-  return types.getBlockBundleDefinition(bundle)?.label || bundle;
-}
-function scrollToBlock(uuid) {
-  eventBus.emit("scrollIntoView", { uuid, center: true });
-  eventBus.emit("select", uuid);
-}
-</script>

package/dist/runtime/components/Edit/DiffViewer/State.vue.d.ts

@@ -1,16 +0,0 @@
-import type { MappedState } from '#blokkli/types';
-import type { ThemeColorName } from '#blokkli/types/theme';
-type __VLS_Props = {
-    stateBefore: MappedState;
-    stateAfter: MappedState;
-    showSelect?: boolean;
-    includeUuids?: string[];
-    selected?: string[];
-    scheme?: ThemeColorName;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    toggle: (uuid: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: ((uuid: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,142 +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"
-    >
-      <BlokkliItem
-        v-for="(item, i) in list"
-        :key="item.uuid + fieldListType + definitions.renderKey.value + i"
-        class="bk-field-list-item"
-        :uuid="item.uuid"
-        :bundle="item.bundle"
-        :options="item.options"
-        :props="item.props"
-        is-editing
-        :index="i"
-        :data-bk-uuid="item.uuid"
-        :parent-type="isNested ? entity.bundle : ''"
-        :data-bk-is-muted="isMuted(item)"
-      />
-    </div>
-  </div>
-  <Component
-    :is="tag"
-    v-else
-    ref="root"
-    :class="['bk-draggable-list-container', attrs.class]"
-  >
-    <BlokkliItem
-      v-for="(item, i) in list"
-      :key="item.uuid + fieldListType"
-      class="bk-field-list-item"
-      :uuid="item.uuid"
-      :bundle="item.bundle"
-      :options="item.options"
-      :props="item.props"
-      is-editing
-      :index="i"
-      :parent-type="isNested ? entity.bundle : ''"
-      :data-bk-uuid="item.uuid"
-      :data-bk-is-muted="isMuted(item)"
-    />
-  </Component>
-</template>
-
-<script setup>
-import {
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-  useAttrs,
-  provide,
-  watch,
-  useTemplateRef
-} 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, selection, definitions } = useBlokkli();
-const root = useTemplateRef("root");
-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: null, required: true },
-  allowedFragments: { type: null, required: false, default: () => {
-    return [];
-  } },
-  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)
-);
-function isMuted(item) {
-  if (!item) {
-    return true;
-  }
-  if (!item.editContext?.isPublished) {
-    return true;
-  }
-  const isVisible = isVisibleByOptions(item, props.language);
-  const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
-  return !(isVisible && isVisibleCustom);
-}
-const data = computed(() => {
-  const allowedFragments = Array.isArray(props.allowedFragments) ? props.allowedFragments : [props.allowedFragments];
-  return {
-    fieldListType: props.fieldListType,
-    allowedFragments,
-    isNested: props.isNested,
-    nestingLevel: props.nestingLevel,
-    dropAlignment: props.dropAlignment ?? null
-  };
-});
-watch(
-  () => root.value,
-  function(newRoot) {
-    if (newRoot instanceof HTMLElement) {
-      dom.updateFieldElement(props.entity, props.name, newRoot, data.value);
-    }
-  }
-);
-onMounted(() => {
-  if (root.value instanceof HTMLElement) {
-    dom.registerField(props.entity, props.name, root.value, data.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, FieldDropAlignment } from '#blokkli/types';
-import type { BlokkliFragmentName } from '#blokkli-build/definitions';
-import type { FieldListItemTyped, ValidFieldListTypes } from '#blokkli-build/generated-types';
-type __VLS_Props = {
-    name: string;
-    fieldKey: string;
-    list: FieldListItem[];
-    entity: EntityContext;
-    language?: string;
-    tag?: string;
-    isNested: boolean;
-    fieldListType: ValidFieldListTypes;
-    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
-    dropAlignment?: FieldDropAlignment;
-    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[] | BlokkliFragmentName;
-    dropAlignment: FieldDropAlignment;
-    tag: string;
-    language: string;
-    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,151 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div class="bk">
-      <button
-        ref="button"
-        class="bk-edit-indicator bk-button bk-is-primary"
-        @mouseenter="isHovering = true"
-        @mouseleave="isHovering = false"
-        @click="$emit('edit')"
-      >
-        {{ label }}
-      </button>
-
-      <div
-        v-show="isHovering"
-        ref="overlay"
-        class="bk-edit-indicator-overlay"
-      />
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import textProvider from "#blokkli/helpers/providers/texts";
-import {
-  ref,
-  onMounted,
-  onBeforeUnmount,
-  useState,
-  computed,
-  useTemplateRef
-} from "#imports";
-import "#blokkli-build/styles.css";
-import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
-const props = defineProps({
-  uuid: { type: String, required: true },
-  entityType: { type: String, required: true },
-  editLabel: { type: String, required: false },
-  permissions: { type: Array, required: true }
-});
-const key = computed(() => props.entityType + ":" + props.uuid);
-const $t = textProvider();
-const label = computed(() => {
-  if (props.editLabel) {
-    return props.editLabel;
-  } else if (props.permissions.includes("edit")) {
-    return $t("editIndicatorLabel", "Edit blocks");
-  } else if (props.permissions.includes("review")) {
-    return $t("editIndicatorLabelReview", "Review changes");
-  } else if (props.permissions.includes("view")) {
-    return $t("editIndicatorLabelView", "View changes");
-  }
-  return null;
-});
-defineEmits(["edit"]);
-const isHovering = ref(false);
-const button = useTemplateRef("button");
-const overlay = useTemplateRef("overlay");
-const targetElement = ref(null);
-const indicatorRegistry = useState(
-  "blokkliEditIndicators",
-  () => []
-);
-const isManager = computed(() => {
-  return indicatorRegistry.value[0]?.key === key.value;
-});
-function calculateIdealYPosition(buttonHeight, bounds, gap) {
-  const elementHeight = bounds.bottom - bounds.top;
-  let position;
-  if (elementHeight < 100) {
-    position = bounds.top + elementHeight / 2 - buttonHeight / 2;
-  } else {
-    position = bounds.top + gap;
-  }
-  position = Math.max(position, gap);
-  return Math.min(position, bounds.bottom - buttonHeight - gap);
-}
-const GAP = 15;
-const indicators = computed(() => {
-  const indicators2 = [...indicatorRegistry.value];
-  return indicators2.sort((a, b) => {
-    const position = a.targetElement.compareDocumentPosition(b.targetElement);
-    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
-      return -1;
-    }
-    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
-      return 1;
-    }
-    return 0;
-  });
-});
-function updateAllIndicatorPositions() {
-  const positions = [];
-  const heights = [];
-  for (let i = 0; i < indicators.value.length; i++) {
-    const data = indicators.value[i];
-    const rect = data.targetElement.getBoundingClientRect();
-    const buttonHeight = data.buttonElement.offsetHeight;
-    let idealY = calculateIdealYPosition(buttonHeight, rect, GAP);
-    for (let j = 0; j < i; j++) {
-      const prevRect = indicators.value[j].targetElement.getBoundingClientRect();
-      const prevElementTop = prevRect.top;
-      const prevElementHeight = prevRect.height;
-      const collisionPosition = prevElementTop + prevElementHeight + GAP;
-      if (idealY < collisionPosition) {
-        idealY = collisionPosition;
-      }
-    }
-    const elementBottom = rect.bottom - buttonHeight - GAP;
-    if (elementBottom < idealY) {
-      idealY = elementBottom;
-    }
-    idealY = Math.round(idealY);
-    positions.push(idealY);
-    heights.push(buttonHeight);
-    data.buttonElement.style.transform = `translateY(${idealY}px)`;
-  }
-}
-onMounted(() => {
-  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`);
-  if (el && el instanceof HTMLElement) {
-    targetElement.value = el;
-  }
-  if (button.value && targetElement.value) {
-    indicatorRegistry.value.push({
-      key: key.value,
-      targetElement: targetElement.value,
-      buttonElement: button.value
-    });
-  }
-});
-onBeforeUnmount(() => {
-  indicatorRegistry.value = indicatorRegistry.value.filter(
-    (i) => i.key !== key.value
-  );
-});
-useAnimationFrame(() => {
-  if (!button.value || !targetElement.value) {
-    return;
-  }
-  if (isManager.value) {
-    updateAllIndicatorPositions();
-  }
-  if (isHovering.value && overlay.value) {
-    const rect = targetElement.value.getBoundingClientRect();
-    overlay.value.style.width = rect.width + "px";
-    overlay.value.style.height = rect.height + "px";
-    overlay.value.style.transform = `translate(${rect.x}px, ${rect.y}px)`;
-  }
-});
-</script>

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

@@ -1,14 +0,0 @@
-import '#blokkli-build/styles.css';
-import type { EditPermission } from '#blokkli/types';
-type __VLS_Props = {
-    uuid: string;
-    entityType: string;
-    editLabel?: string;
-    permissions: EditPermission[];
-};
-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;