@blokkli/editor 1.0.0

package/dist/runtime/helpers/selectionProvider.js

@@ -0,0 +1,149 @@
+import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+import { computed, ref } from "#imports";
+import {
+  findElement,
+  buildDraggableItem,
+  falsy,
+  modulo,
+  onlyUnique
+} from "#blokkli/helpers";
+import { eventBus } from "#blokkli/helpers/eventBus";
+export default function(dom) {
+  const selectedUuids = ref([]);
+  const activeFieldKey = ref("");
+  const draggingMode = ref(null);
+  const editableActive = ref(false);
+  const isChangingOptions = ref(false);
+  const isMultiSelecting = ref(false);
+  const interactionMode = ref("mouse");
+  const dragItems = ref([]);
+  const dragItemsBundles = computed(
+    () => dragItems.value.map((v) => v.itemBundle).filter(falsy)
+  );
+  const uuidsMap = computed(() => {
+    return selectedUuids.value.reduce((acc, uuid) => {
+      acc[uuid] = true;
+      return acc;
+    }, {});
+  });
+  const isDragging = computed(() => !!draggingMode.value);
+  const blocks = computed(
+    () => selectedUuids.value.map((uuid) => {
+      return dom.findBlock(uuid);
+    }).filter(falsy)
+  );
+  function selectItems(uuids) {
+    unselectItems();
+    const items = uuids.map((uuid) => {
+      const element = findElement(uuid);
+      if (element) {
+        const item = buildDraggableItem(element);
+        if (item && item.itemType === "existing") {
+          return item;
+        }
+      }
+    }).filter(falsy);
+    selectedUuids.value = items.map((v) => v.uuid);
+  }
+  function unselectItems() {
+    activeFieldKey.value = "";
+    if (selectedUuids.value.length === 0) {
+      return;
+    }
+    selectedUuids.value = [];
+  }
+  function onSelect(v) {
+    if (typeof v === "string") {
+      selectItems([v]);
+    } else {
+      selectItems(v.filter(onlyUnique));
+    }
+  }
+  const selectInList = (prev) => {
+    const items = dom.getAllBlocks();
+    if (!items.length) {
+      return;
+    }
+    const currentIndex = blocks.value[0] ? items.findIndex((v) => v.uuid === blocks.value[0].uuid) : -1;
+    const targetIndex = modulo(
+      prev ? currentIndex - 1 : currentIndex + 1,
+      items.length
+    );
+    const targetItem = items[targetIndex];
+    if (!targetItem) {
+      return;
+    }
+    onSelect(targetItem.uuid);
+    dom.refreshBlockRect(targetItem.uuid);
+    eventBus.emit("scrollIntoView", { uuid: targetItem.uuid });
+  };
+  const setActiveFieldKey = (key) => activeFieldKey.value = key;
+  onBlokkliEvent("select", onSelect);
+  onBlokkliEvent("select:start", (e) => {
+    selectedUuids.value = (e.uuids || []).filter(onlyUnique);
+    isMultiSelecting.value = true;
+    interactionMode.value = e.mode;
+    activeFieldKey.value = "";
+  });
+  onBlokkliEvent("select:toggle", (uuid) => {
+    if (selectedUuids.value.includes(uuid)) {
+      selectedUuids.value = selectedUuids.value.filter((v) => v !== uuid);
+    } else {
+      selectedUuids.value.push(uuid);
+    }
+  });
+  onBlokkliEvent("select:end", (uuids) => {
+    isMultiSelecting.value = false;
+    if (!uuids || uuids.length === 0 && selectedUuids.value.length === 0) {
+      return;
+    }
+    selectItems(uuids);
+  });
+  onBlokkliEvent("select:previous", () => selectInList(true));
+  onBlokkliEvent("select:next", selectInList);
+  onBlokkliEvent("setActiveFieldKey", setActiveFieldKey);
+  onBlokkliEvent("state:reloaded", () => {
+  });
+  onBlokkliEvent("dragging:start", (e) => {
+    draggingMode.value = e.mode;
+    isMultiSelecting.value = false;
+    dragItems.value = e.items;
+    const blocks2 = e.items.filter(
+      (v) => v.itemType === "existing"
+    );
+    if (blocks2.length) {
+      selectItems(blocks2.map((v) => v.uuid));
+    }
+  });
+  onBlokkliEvent("dragging:end", () => {
+    draggingMode.value = null;
+  });
+  onBlokkliEvent("window:clickAway", () => {
+    unselectItems();
+    activeFieldKey.value = "";
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  });
+  const isDraggingExisting = computed(() => {
+    return isDragging.value && !!dragItems.value.length && dragItems.value.some(
+      (v) => v.itemType === "existing" || v.itemType === "existing_structure"
+    );
+  });
+  return {
+    uuids: selectedUuids,
+    blocks,
+    activeFieldKey,
+    isDragging,
+    isDraggingExisting,
+    setActiveFieldKey,
+    editableActive,
+    isChangingOptions,
+    isMultiSelecting,
+    draggingMode,
+    interactionMode,
+    dragItems,
+    uuidsMap,
+    dragItemsBundles
+  };
+}

package/dist/runtime/helpers/stateProvider.d.ts

@@ -0,0 +1,35 @@
+import { type Ref, type ComputedRef } from 'vue';
+import type { BlokkliAdapter, AdapterContext } from '../adapter.js';
+import type { MutatedField, EditEntity, MutatedOptions, TranslationState, MutationItem, Validation, MutateWithLoadingStateFunction, EditMode, FieldListItem } from '#blokkli/types';
+import type { TextProvider } from './textProvider.js';
+export type BlokkliOwner = {
+    name: string | undefined;
+    currentUserIsOwner: boolean;
+};
+export type RenderedBlock = {
+    item: FieldListItem;
+    parentEntityType: string;
+    parentEntityBundle: string;
+    parentEntityUuid: string;
+};
+export type StateProvider = {
+    owner: Readonly<Ref<BlokkliOwner | null>>;
+    refreshKey: Readonly<Ref<string>>;
+    mutatedFields: Readonly<Ref<MutatedField[]>>;
+    entity: Readonly<Ref<EditEntity>>;
+    mutatedOptions: MutatedOptions;
+    translation: Readonly<Ref<TranslationState>>;
+    mutations: Readonly<Ref<MutationItem[]>>;
+    currentMutationIndex: Readonly<Ref<number>>;
+    violations: Readonly<Ref<Validation[]>>;
+    mutateWithLoadingState: MutateWithLoadingStateFunction;
+    editMode: Readonly<Ref<EditMode>>;
+    mutatedEntity: Readonly<Ref<any>>;
+    canEdit: ComputedRef<boolean>;
+    isLoading: Readonly<Ref<boolean>>;
+    getFieldBlockCount: (key: string) => number;
+    getBlockBundleCount: (bundle: string) => number;
+    getFieldListItem: (uuid: string) => FieldListItem | undefined;
+    getMutatedField: (uuid: string, fieldName: string) => MutatedField | undefined;
+};
+export default function (adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider): Promise<StateProvider>;

package/dist/runtime/helpers/stateProvider.js

@@ -0,0 +1,226 @@
+import {
+  computed,
+  ref,
+  reactive,
+  readonly,
+  provide
+} from "vue";
+import { refreshNuxtData } from "nuxt/app";
+import { INJECT_MUTATED_FIELDS_MAP } from "./symbols.js";
+import onBlokkliEvent from "./composables/onBlokkliEvent.js";
+import { falsy, getFieldKey } from "#blokkli/helpers";
+import { eventBus, emitMessage } from "#blokkli/helpers/eventBus";
+import { nextTick } from "#imports";
+export default async function(adapter, context, $t) {
+  const owner = ref(null);
+  const refreshKey = ref("");
+  const mutatedFields = ref([]);
+  const mutatedFieldsMap = reactive(
+    {}
+  );
+  const mutations = ref([]);
+  const violations = ref([]);
+  const mutatedEntity = ref(null);
+  const currentMutationIndex = ref(-1);
+  const isLoading = ref(false);
+  const entity = ref({
+    label: "",
+    status: false,
+    bundleLabel: ""
+  });
+  let fieldBlockCount = {};
+  const blockBundleCount = ref({});
+  const fieldListItemMap = {};
+  function getFieldListItem(uuid) {
+    const fieldKey = fieldListItemMap[uuid];
+    if (!fieldKey) {
+      return;
+    }
+    const field = mutatedFieldsMap[fieldKey];
+    if (!field) {
+      return;
+    }
+    return field.list.find((v) => v.uuid === uuid);
+  }
+  const mutatedOptions = reactive({});
+  const translation = ref({
+    isTranslatable: false,
+    sourceLanguage: "",
+    availableLanguages: [],
+    translations: []
+  });
+  function setContext(context2) {
+    const options = context2?.mutatedState?.mutatedOptions || {};
+    const optionKeys = Object.keys(options);
+    for (let i = 0; i < optionKeys.length; i++) {
+      const key = optionKeys[i];
+      const newOptions = options[key];
+      const existing = mutatedOptions[key];
+      if (!existing || JSON.stringify(existing) !== JSON.stringify(newOptions)) {
+        mutatedOptions[key] = newOptions;
+      }
+    }
+    mutations.value = context2?.mutations || [];
+    violations.value = context2?.mutatedState?.violations || [];
+    const currentIndex = context2?.currentIndex;
+    currentMutationIndex.value = currentIndex === void 0 ? -1 : currentIndex;
+    owner.value = {
+      name: context2?.ownerName,
+      currentUserIsOwner: !!context2?.currentUserIsOwner
+    };
+    entity.value.label = context2?.entity?.label;
+    entity.value.status = context2?.entity?.status;
+    entity.value.bundleLabel = context2?.entity?.bundleLabel || "";
+    translation.value.isTranslatable = !!context2?.translationState?.isTranslatable;
+    translation.value.translations = context2?.translationState?.translations?.filter(falsy) || [];
+    translation.value.sourceLanguage = context2?.translationState?.sourceLanguage || "";
+    translation.value.availableLanguages = context2?.translationState?.availableLanguages || [];
+    const newMutatedFields = (context2?.mutatedState?.fields || []).map(
+      (field) => {
+        return {
+          ...field,
+          list: field.list.filter(falsy)
+        };
+      }
+    );
+    mutatedFields.value = newMutatedFields;
+    mutatedEntity.value = context2?.mutatedEntity;
+    const visitedFieldKeys = [];
+    const newBlockBundleCount = {};
+    fieldBlockCount = {};
+    for (let i = 0; i < newMutatedFields.length; i++) {
+      const field = newMutatedFields[i];
+      const key = getFieldKey(field.entityUuid, field.name);
+      visitedFieldKeys.push(key);
+      const existing = mutatedFieldsMap[key];
+      if (!existing || existing.list.length !== field.list.length || JSON.stringify(existing.list) !== JSON.stringify(field.list)) {
+        mutatedFieldsMap[key] = field;
+      }
+      for (let j = 0; j < field.list.length; j++) {
+        const item = field.list[j];
+        if (!newBlockBundleCount[item.bundle]) {
+          newBlockBundleCount[item.bundle] = 0;
+        }
+        newBlockBundleCount[item.bundle]++;
+        fieldListItemMap[item.uuid] = key;
+      }
+    }
+    blockBundleCount.value = newBlockBundleCount;
+    const existingKeys = Object.keys(mutatedFieldsMap);
+    for (let i = 0; i < existingKeys.length; i++) {
+      const key = existingKeys[i];
+      if (!visitedFieldKeys.includes(key)) {
+        mutatedFieldsMap[key] = void 0;
+      }
+    }
+    eventBus.emit("updateMutatedFields", { fields: newMutatedFields });
+    nextTick(() => {
+      refreshKey.value = Date.now().toString();
+      eventBus.emit("state:reloaded");
+    });
+  }
+  function getMutatedField(entityUuid, fieldName) {
+    const key = getFieldKey(entityUuid, fieldName);
+    return mutatedFieldsMap[key];
+  }
+  function getBlockBundleCount(bundle) {
+    return blockBundleCount.value[bundle] || 0;
+  }
+  function getFieldBlockCount(key) {
+    if (fieldBlockCount[key] !== void 0) {
+      return fieldBlockCount[key];
+    }
+    const count = mutatedFieldsMap[key]?.list.length || 0;
+    fieldBlockCount[key] = count;
+    return count;
+  }
+  function lockBody() {
+    document.body.classList.add("bk-body-loading");
+    isLoading.value = true;
+  }
+  function unlockBody() {
+    document.body.classList.remove("bk-body-loading");
+    isLoading.value = false;
+  }
+  const mutateWithLoadingState = async (callback, errorMessage, successMessage) => {
+    if (!callback) {
+      return true;
+    }
+    lockBody();
+    try {
+      const promise = callback();
+      const result = await promise;
+      if (!result) {
+        throw new Error("Unexpected error");
+      }
+      unlockBody();
+      if (result.state) {
+        setContext(adapter.mapState(result.state));
+      }
+      if (!result.success) {
+        const errorMessage2 = result.errors?.join("\n") || $t("unexpectedMutationError", "An unexpected error happened.");
+        throw new Error(errorMessage2);
+      }
+      if (successMessage) {
+        emitMessage(successMessage);
+      }
+      return true;
+    } catch (e) {
+      emitMessage(
+        errorMessage || $t("unexpectedMutationError", "An unexpected error happened."),
+        "error",
+        e
+      );
+    }
+    unlockBody();
+    return false;
+  };
+  async function loadState() {
+    const state = await adapter.loadState();
+    if (state) {
+      setContext(adapter.mapState(state));
+    }
+  }
+  const canEdit = computed(() => !!owner.value?.currentUserIsOwner);
+  const isTranslation = computed(
+    () => context.value.language !== translation.value.sourceLanguage && translation.value.isTranslatable
+  );
+  const editMode = computed(() => {
+    if (!canEdit.value) {
+      return "readonly";
+    }
+    if (isTranslation.value) {
+      return "translating";
+    }
+    return "editing";
+  });
+  onBlokkliEvent("reloadState", async () => {
+    await loadState();
+  });
+  onBlokkliEvent("reloadEntity", async () => {
+    await refreshNuxtData();
+    await loadState();
+  });
+  provide(INJECT_MUTATED_FIELDS_MAP, mutatedFieldsMap);
+  await loadState();
+  return {
+    refreshKey,
+    owner: readonly(owner),
+    mutatedFields,
+    entity,
+    mutatedOptions,
+    translation,
+    mutations,
+    violations,
+    currentMutationIndex,
+    mutateWithLoadingState,
+    editMode,
+    canEdit,
+    isLoading: readonly(isLoading),
+    mutatedEntity,
+    getFieldBlockCount,
+    getBlockBundleCount,
+    getFieldListItem,
+    getMutatedField
+  };
+}

package/dist/runtime/helpers/storageProvider.d.ts

@@ -0,0 +1,15 @@
+import { type ComputedRef, type WritableComputedRef } from 'vue';
+export type StorageProvider = {
+    use: <T>(key: string | ComputedRef<string>, defaultValue: T) => WritableComputedRef<T>;
+    clearAll: () => void;
+    clear: (key: string) => void;
+};
+/**
+ * Create a reactive variable that is synced to local storage using the
+ * given key. The sync only happens client side and after the component
+ * has been mounted.
+ *
+ * This composable can be used to keep state across page navigations and
+ * even after a refresh.
+ */
+export default function (): StorageProvider;

package/dist/runtime/helpers/storageProvider.js

@@ -0,0 +1,61 @@
+import { computed, ref } from "vue";
+import { storageDefaults } from "#blokkli/config";
+const PREFIX = "blokkli:";
+const getExisting = (key) => {
+  try {
+    const value = localStorage.getItem(key);
+    if (value) {
+      return JSON.parse(value);
+    }
+  } catch {
+  }
+};
+export default function() {
+  const values = ref({});
+  const defaults = ref({});
+  const use = (key, providedDefaultValue) => {
+    const storageKey = computed(
+      () => PREFIX + (typeof key === "string" ? key : key.value)
+    );
+    const storageDefaultsValue = storageDefaults[typeof key === "string" ? key : key.value];
+    const defaultValue = storageDefaultsValue && typeof storageDefaultsValue === typeof providedDefaultValue ? storageDefaultsValue : providedDefaultValue;
+    if (!defaults.value[storageKey.value]) {
+      defaults.value[storageKey.value] = defaultValue;
+    }
+    if (values.value[storageKey.value] === void 0) {
+      const existing = getExisting(storageKey.value);
+      if (existing !== void 0) {
+        values.value[storageKey.value] = existing;
+      } else {
+        values.value[storageKey.value] = defaultValue;
+      }
+    }
+    return computed({
+      get() {
+        const v = values.value[storageKey.value];
+        if (v === void 0) {
+          return defaults.value[storageKey.value];
+        }
+        return v;
+      },
+      set(newValue) {
+        values.value[storageKey.value] = newValue;
+        window.localStorage.setItem(storageKey.value, JSON.stringify(newValue));
+      }
+    });
+  };
+  const clearAll = () => {
+    values.value = {};
+    Object.keys(window.localStorage).forEach((key) => {
+      if (key.startsWith(PREFIX)) {
+        window.localStorage.removeItem(key);
+      }
+    });
+  };
+  const clear = (key) => {
+    const storageKey = PREFIX + key;
+    values.value[storageKey] = void 0;
+    window.localStorage.removeItem(storageKey);
+  };
+  return { use, clearAll, clear };
+}

package/dist/runtime/helpers/symbols.d.ts

@@ -0,0 +1,16 @@
+export declare const INJECT_APP: unique symbol;
+export declare const INJECT_EDIT_CONTEXT: unique symbol;
+export declare const INJECT_IS_EDITING: unique symbol;
+export declare const INJECT_IS_NESTED: unique symbol;
+export declare const INJECT_IS_PREVIEW: unique symbol;
+export declare const INJECT_IS_IN_REUSABLE: unique symbol;
+export declare const INJECT_REUSABLE_OPTIONS: unique symbol;
+export declare const INJECT_FIELD_LIST_TYPE: unique symbol;
+export declare const INJECT_FIELD_LIST_BLOCKS: unique symbol;
+export declare const INJECT_PROVIDER_BLOCKS: unique symbol;
+export declare const INJECT_BLOCK_ITEM: unique symbol;
+export declare const INJECT_MUTATED_FIELDS_MAP: unique symbol;
+export declare const INJECT_ENTITY_CONTEXT: unique symbol;
+export declare const INJECT_FRAGMENT_CONTEXT: unique symbol;
+export declare const INJECT_EDIT_FIELD_LIST_COMPONENT: unique symbol;
+export declare const INJECT_EDIT_LOGGER: unique symbol;

package/dist/runtime/helpers/symbols.js

@@ -0,0 +1,18 @@
+export const INJECT_APP = Symbol("blokkli_app");
+export const INJECT_EDIT_CONTEXT = Symbol("blokkli_edit_context");
+export const INJECT_IS_EDITING = Symbol("blokkli_is_editing");
+export const INJECT_IS_NESTED = Symbol("blokkli_is_nested");
+export const INJECT_IS_PREVIEW = Symbol("blokkli_is_preview");
+export const INJECT_IS_IN_REUSABLE = Symbol("blokkli_is_in_reusable");
+export const INJECT_REUSABLE_OPTIONS = Symbol("blokkli_from_library_options");
+export const INJECT_FIELD_LIST_TYPE = Symbol("blokkli_field_list_type");
+export const INJECT_FIELD_LIST_BLOCKS = Symbol("blokkli_field_list_blocks");
+export const INJECT_PROVIDER_BLOCKS = Symbol("blokkli_provider_blocks");
+export const INJECT_BLOCK_ITEM = Symbol("blokkli_block_item");
+export const INJECT_MUTATED_FIELDS_MAP = Symbol("blokkli_mutated_fields_map");
+export const INJECT_ENTITY_CONTEXT = Symbol("blokkli_entity_context");
+export const INJECT_FRAGMENT_CONTEXT = Symbol("blokkli_fragment_context");
+export const INJECT_EDIT_FIELD_LIST_COMPONENT = Symbol(
+  "blokkli_edit_field_list_component"
+);
+export const INJECT_EDIT_LOGGER = Symbol("blokkli_edit_logger");

package/dist/runtime/helpers/textProvider.d.ts

@@ -0,0 +1,4 @@
+import { type ComputedRef } from 'vue';
+import type { AdapterContext } from '../adapter.js';
+export type TextProvider = (key: string, defaultValue?: string) => string;
+export default function (context?: ComputedRef<AdapterContext>): TextProvider;

package/dist/runtime/helpers/textProvider.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+import { translations } from "#blokkli/translations";
+import { defaultLanguage, forceDefaultLanguage } from "#blokkli/config";
+export default function(context) {
+  const language = computed(() => {
+    if (forceDefaultLanguage) {
+      return defaultLanguage;
+    }
+    if (context?.value.language && translations[context.value.language]) {
+      return context.value.language;
+    }
+    return defaultLanguage;
+  });
+  const currentTranslations = computed(() => {
+    return translations[language.value] || {};
+  });
+  return (key, defaultValue) => {
+    return currentTranslations.value[key] || defaultValue;
+  };
+}

package/dist/runtime/helpers/themeProvider.d.ts

@@ -0,0 +1,27 @@
+import type { DraggableStyle } from '#blokkli/types';
+import type { RGB, ThemeColorGroup, ThemeColorShade, ThemeColors, ThemeContextColorGroup, ThemeContextColorShade, ThemeContextColors, ThemeName } from '#blokkli/types/theme';
+import { type Ref } from '#imports';
+type ThemeMap = {
+    accent: Ref<ThemeColors>;
+    mono: Ref<ThemeColors>;
+    teal: Ref<ThemeContextColors>;
+    yellow: Ref<ThemeContextColors>;
+    red: Ref<ThemeContextColors>;
+    lime: Ref<ThemeContextColors>;
+};
+export type ThemeProvider = {
+    accent: Ref<ThemeColors>;
+    mono: Ref<ThemeColors>;
+    teal: Ref<ThemeContextColors>;
+    yellow: Ref<ThemeContextColors>;
+    red: Ref<ThemeContextColors>;
+    lime: Ref<ThemeContextColors>;
+    getDraggableStyle: (el: HTMLElement | SVGElement) => DraggableStyle;
+    setColor: <Group extends ThemeColorGroup | ThemeContextColorGroup>(group: Group, shade: Group extends ThemeColorGroup ? ThemeColorShade : ThemeContextColorShade, value: RGB) => void;
+    applyTheme: (name: ThemeName | 'custom') => void;
+    invalidateCachedStyle: (el: HTMLElement | SVGElement) => void;
+    getColor<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T): RGB;
+    getColorString<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T, alpha?: number): string;
+};
+export default function (): ThemeProvider;
+export {};