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

package/dist/runtime/editor/features/editable-field/Overlay/index.vue

@@ -0,0 +1,317 @@
+<template>
+  <ArtboardTooltip
+    v-if="loaded"
+    id="editable"
+    :title
+    :anchor-el="element"
+    placement-y="top"
+    class="bk-editable-field"
+    close-icon="bk_mdi_check"
+    @close="save"
+  >
+    <form ref="form" class="bk-editable-field-input" @submit.prevent="save">
+      <div ref="input">
+        <InputContenteditable
+          v-if="config.type === 'markup'"
+          v-model="modelValue"
+          :type="config.type"
+          @close="save"
+        />
+
+        <InputFrame
+          v-else-if="config.type === 'frame'"
+          v-model="modelValue"
+          :type="config.type"
+          :field-name="fieldName"
+          :host="host"
+          :initial-height="scrollHeight"
+        />
+
+        <InputPlaintext
+          v-else
+          v-model="modelValue"
+          :element="element"
+          :required="required"
+          :maxlength="maxlength"
+          @discard="discard"
+          @save="save"
+        />
+      </div>
+
+      <div class="bk bk-editable-field-info">
+        <button :disabled="!hasChanged" @click.prevent="discard">
+          {{ $t("editableFieldDiscard", "Discard") }}
+        </button>
+        <div v-if="errorText" class="bk-editable-field-info-error">
+          {{ errorText }}
+        </div>
+        <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>
+  </ArtboardTooltip>
+</template>
+
+<script setup>
+import { ArtboardTooltip } from "#blokkli/editor/components";
+import {
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  useBlokkli,
+  nextTick,
+  useTemplateRef
+} from "#imports";
+import { falsy } from "#blokkli/helpers";
+import InputPlaintext from "./Plaintext/index.vue";
+import InputContenteditable from "./Contenteditable/index.vue";
+import InputFrame from "./Frame/index.vue";
+import { FIELD_MAPPING } from "#blokkli-build/runtime-options";
+import { itemEntityType } from "#blokkli-build/config";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const {
+  eventBus,
+  state,
+  adapter,
+  $t,
+  types,
+  element: elementProvider,
+  definitions
+} = useBlokkli();
+const props = defineProps({
+  fieldName: { type: String, required: true },
+  host: { type: Object, required: true },
+  element: { type: null, required: true },
+  config: { type: Object, required: true },
+  isComponent: { type: Boolean, required: false },
+  value: { type: String, required: false }
+});
+const emit = defineEmits(["close"]);
+const scrollHeight = ref(0);
+const loaded = ref(false);
+const originalText = ref("");
+const originalMutatedProp = ref(void 0);
+const modelValue = ref("");
+const form = useTemplateRef("form");
+const isClosing = ref(false);
+const hasChanged = computed(
+  () => modelValue.value.trim() !== originalText.value.trim()
+);
+const itemBundle = computed(() => props.host.bundle);
+const maxlength = computed(() => props.config.maxLength);
+const required = computed(() => !!props.config.required);
+const title = computed(() => {
+  if (itemBundle.value) {
+    return [
+      types.getBlockBundleDefinition(itemBundle.value)?.label,
+      props.config.label
+    ].filter(falsy).join(" \xBB ");
+  }
+  return props.config.label;
+});
+const isMarkup = computed(
+  () => props.config.type === "table" || props.config.type === "markup" || props.config.type === "frame"
+);
+const count = computed(() => modelValue.value.length);
+const errorText = computed(() => {
+  if (required.value && !modelValue.value) {
+    return $t("fieldIsRequired", "This field is required");
+  }
+  return void 0;
+});
+function findMatchingProp(mapping) {
+  return Object.entries(mapping).find(
+    ([_prop, fieldName]) => fieldName === props.fieldName
+  )?.[0] ?? null;
+}
+const providerDefinition = computed(() => {
+  return definitions.getProviderDefinition(props.host.type, props.host.bundle);
+});
+const matchingProp = computed(() => {
+  if (props.host.type === itemEntityType) {
+    const mapping = FIELD_MAPPING[props.host.bundle];
+    if (mapping) {
+      return findMatchingProp(mapping);
+    }
+  } else {
+    if (providerDefinition.value) {
+      const mapping = providerDefinition.value.propsFieldMapping;
+      if (mapping) {
+        return findMatchingProp(mapping);
+      }
+    }
+  }
+  return null;
+});
+const mutatedItemPropsKey = computed(
+  () => providerDefinition.value ? "HOST" : props.host.uuid
+);
+const usesMutatedProps = computed(() => !!matchingProp.value);
+const usesDirectDom = computed(() => !props.isComponent && !matchingProp.value);
+function restoreOriginalState() {
+  if (usesMutatedProps.value && matchingProp.value) {
+    const key = mutatedItemPropsKey.value;
+    if (originalMutatedProp.value === void 0) {
+      if (state.mutatedItemProps[key]) {
+        state.mutatedItemProps[key] = void 0;
+      }
+    } else {
+      if (state.mutatedItemProps[key]) {
+        state.mutatedItemProps[key][matchingProp.value] = originalMutatedProp.value;
+      }
+    }
+  }
+  if (usesDirectDom.value) {
+    const el = props.element;
+    if (isMarkup.value) {
+      el.innerHTML = originalText.value;
+    } else {
+      el.textContent = originalText.value;
+    }
+  }
+  if (props.isComponent) {
+    eventBus.emit("editable:update", {
+      name: props.fieldName,
+      entityUuid: props.host.uuid,
+      value: originalText.value
+    });
+  }
+}
+async function persistValue() {
+  if (props.host.type === itemEntityType) {
+    await state.mutateWithLoadingState(
+      () => adapter.updateFieldValue({
+        uuid: props.host.uuid,
+        fieldName: props.fieldName,
+        fieldValue: modelValue.value
+      })
+    );
+  } else if (adapter.updateEntityFieldValue) {
+    await state.mutateWithLoadingState(
+      () => adapter.updateEntityFieldValue({
+        fieldName: props.fieldName,
+        fieldValue: modelValue.value
+      })
+    );
+  }
+}
+function discard() {
+  if (isClosing.value) {
+    return;
+  }
+  isClosing.value = true;
+  if (hasChanged.value) {
+    restoreOriginalState();
+  }
+  emit("close");
+}
+async function save() {
+  if (isClosing.value) {
+    return;
+  }
+  isClosing.value = true;
+  if (hasChanged.value) {
+    if (errorText.value) {
+      restoreOriginalState();
+    } else {
+      await persistValue();
+    }
+  }
+  emit("close");
+}
+onBlokkliEvent("window:clickAway", save);
+watch(modelValue, (newText) => {
+  if (usesMutatedProps.value && matchingProp.value) {
+    if (!state.mutatedItemProps[mutatedItemPropsKey.value]) {
+      state.mutatedItemProps[mutatedItemPropsKey.value] = {};
+    }
+    state.mutatedItemProps[mutatedItemPropsKey.value][matchingProp.value] = newText;
+  }
+  if (usesDirectDom.value) {
+    const el = props.element;
+    if (props.config.type === "plain") {
+      el.textContent = newText;
+    } else {
+      el.innerHTML = newText;
+    }
+  }
+  if (props.isComponent) {
+    eventBus.emit("editable:update", {
+      name: props.fieldName,
+      entityUuid: props.host.uuid,
+      value: newText
+    });
+  }
+});
+const focusInput = (el) => {
+  if (!el) {
+    return;
+  }
+  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 = elementProvider.query(
+    queryEl,
+    "[contenteditable]",
+    "Focus editable field contenteditable"
+  );
+  if (editable) {
+    editable.focus();
+    return;
+  }
+  const iframe = elementProvider.query(
+    queryEl,
+    "iframe",
+    "Find iframe in editable field"
+  );
+  if (iframe?.contentDocument) {
+    focusInput(iframe.contentDocument);
+  }
+};
+onMounted(() => {
+  const el = props.element;
+  if (props.isComponent) {
+    modelValue.value = props.value || "";
+  } else if (matchingProp.value) {
+    if (providerDefinition.value) {
+      modelValue.value = state.mutatedEntity.value[matchingProp.value] || "";
+    } else {
+      modelValue.value = state.getFieldListItem(props.host.uuid)?.props?.[matchingProp.value] ?? "";
+    }
+  } else if (isMarkup.value) {
+    modelValue.value = el.innerHTML;
+  } else {
+    modelValue.value = el.textContent || "";
+  }
+  originalText.value = modelValue.value;
+  if (usesMutatedProps.value && matchingProp.value) {
+    originalMutatedProp.value = state.mutatedItemProps[mutatedItemPropsKey.value]?.[matchingProp.value];
+  }
+  nextTick(() => {
+    scrollHeight.value = el.scrollHeight;
+    loaded.value = true;
+    nextTick(() => {
+      focusInput(form.value);
+    });
+  });
+});
+onBeforeUnmount(async () => {
+  if (isClosing.value) {
+    return;
+  }
+  if (hasChanged.value && !errorText.value) {
+    await persistValue();
+  }
+});
+</script>

package/dist/runtime/editor/features/editable-field/Overlay/index.vue.d.ts

@@ -0,0 +1,17 @@
+import type { EntityContext } from '#blokkli/types';
+import type { EditableFieldConfig } from '../types.js';
+type __VLS_Props = {
+    fieldName: string;
+    host: EntityContext;
+    element: HTMLElement;
+    config: EditableFieldConfig;
+    isComponent?: boolean;
+    value?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/editable-field/index.d.vue.ts

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

package/dist/runtime/editor/features/editable-field/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
+      <Overlay
+        v-if="selectedEditable"
+        v-bind="selectedEditable"
+        :key="key"
+        @close="close"
+      />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  computed,
+  ref,
+  useBlokkli,
+  watch,
+  defineBlokkliFeature
+} from "#imports";
+import Overlay from "./Overlay/index.vue";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { falsy } from "#blokkli/helpers";
+import { fromLibraryBlockBundle, itemEntityType } from "#blokkli-build/config";
+import { defineCommands, onBlokkliEvent } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "editable-field",
+  icon: "bk_mdi_text_select_end",
+  label: "Editable Field",
+  requiredAdapterMethods: ["updateFieldValue", "getEditableFieldConfig"],
+  description: "Implements a form overlay to edit a single field of a block."
+});
+const { selection, adapter, types, $t, state, directive, blocks, context, ui } = useBlokkli();
+const selectedEditable = ref(null);
+const hasTransition = ref(false);
+const key = computed(() => {
+  if (!selectedEditable.value) {
+    return "";
+  }
+  return selectedEditable.value.host.uuid + selectedEditable.value.fieldName;
+});
+const getHost = (uuid) => {
+  if (uuid) {
+    const block = blocks.getBlock(uuid);
+    if (block) {
+      return {
+        type: itemEntityType,
+        bundle: block.bundle,
+        uuid: block.uuid
+      };
+    }
+  }
+  return {
+    type: context.value.entityType,
+    bundle: context.value.entityBundle,
+    uuid: context.value.entityUuid
+  };
+};
+const buildEditable = (fieldName, uuid) => {
+  const host = getHost(uuid);
+  if (!host) {
+    return;
+  }
+  if (host.bundle === fromLibraryBlockBundle) {
+    return;
+  }
+  const config = types.editableFieldConfig.forName(
+    host.type,
+    host.bundle,
+    fieldName
+  );
+  if (!config) {
+    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}"`;
+    }
+    throw new Error(message);
+  }
+  if (config.type === "frame" && !adapter.buildEditableFrameUrl) {
+    return;
+  }
+  const element = directive.findEditableElement(fieldName, host);
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+  const editable = directive.findEditable(fieldName, host);
+  if (!editable) {
+    return;
+  }
+  return {
+    fieldName,
+    host,
+    element,
+    isComponent: editable.isComponent,
+    value: editable.getValue ? editable.getValue() : "",
+    config
+  };
+};
+onBlokkliEvent("editable:focus", (e) => {
+  if (!state.canEdit.value) {
+    return;
+  }
+  hasTransition.value = !selectedEditable.value;
+  selectedEditable.value = buildEditable(e.fieldName, e.uuid) || null;
+  if (selectedEditable.value) {
+    selection.activeEditableLabel.value = selectedEditable.value.config.label;
+  }
+});
+defineCommands(() => {
+  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) => {
+    return {
+      id: "feature:editable:edit:" + v.host.uuid + ":" + v.fieldName,
+      group: "selection",
+      label: $t("editableCommandEdit", 'Edit field "@name"').replace(
+        "@name",
+        v.config.label
+      ),
+      icon: "bk_mdi_text_select_end",
+      disabled: false,
+      callback: () => {
+        selectedEditable.value = v;
+      }
+    };
+  });
+});
+watch(selection.activeEditableLabel, (isActive) => {
+  if (!isActive) {
+    hasTransition.value = true;
+    selectedEditable.value = null;
+  }
+});
+watch(selectedEditable, (v) => {
+  if (!v && selection.activeEditableLabel.value) {
+    selection.activeEditableLabel.value = null;
+  }
+});
+const close = () => {
+  selectedEditable.value = null;
+  selection.activeEditableLabel.value = null;
+};
+</script>

package/dist/runtime/editor/features/editable-field/index.vue.d.ts

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

package/dist/runtime/editor/features/editable-field/types.d.ts

@@ -0,0 +1,54 @@
+export type EditableFieldType = 'plain' | 'markup' | 'table' | 'frame';
+export type EditableFieldConfig = {
+    name: string;
+    entityType: string;
+    entityBundle: string;
+    label: string;
+    type: EditableFieldType;
+    required: boolean;
+    maxLength: number;
+};
+export type DroppableFieldConfig = {
+    name: string;
+    label: string;
+    entityType: string;
+    entityBundle: string;
+    allowedEntityType: string;
+    allowedBundles: string[];
+    cardinality: number;
+    required: boolean;
+};
+export type UpdateFieldValueEvent = {
+    uuid: string;
+    fieldName: string;
+    fieldValue: string;
+};
+type AdapterBuildEditableFrameUrl = {
+    fieldName: string;
+    uuid?: string;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Get the editable field configurations.
+         */
+        getEditableFieldConfig?: () => Promise<EditableFieldConfig[]>;
+        /**
+         * Get the droppable field configurations.
+         */
+        getDroppableFieldConfig?: () => Promise<DroppableFieldConfig[]>;
+        /**
+         * Update the value of a single block field.
+         */
+        updateFieldValue?: (e: UpdateFieldValueEvent) => Promise<MutationResponseLike<T>> | undefined;
+        /**
+         * Update the value of a single entity field.
+         */
+        updateEntityFieldValue?: (e: UpdateEntityFieldValueEvent) => Promise<MutationResponseLike<T>> | undefined;
+        /**
+         * Build the iframe URL for an editable of type "frame".
+         */
+        buildEditableFrameUrl?: (e: AdapterBuildEditableFrameUrl) => string | undefined;
+    }
+}
+export {};

package/dist/runtime/editor/features/editable-mask/index.d.vue.ts

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

package/dist/runtime/editor/features/editable-mask/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <PluginViewOption
+    id="mask"
+    v-model="isActive"
+    :label="$t('maskToggle', 'Toggle non-editable areas')"
+    :title-on="$t('maskHide', 'Hide non-editable areas')"
+    :title-off="$t('maskShow', 'Show non-editable areas')"
+    :tour-text="
+  $t(
+    'maskTourText',
+    'Toggle between showing or hiding non-editable parts of the page.'
+  )
+"
+    icon="bk_mdi_texture"
+    key-code="M"
+  />
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
+import { PluginViewOption } from "#blokkli/editor/plugins";
+import { addElementClasses } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "editable-mask",
+  icon: "bk_mdi_texture",
+  label: "Editable Mask",
+  description: "Provides a view option to hide non-editable parts of the page.",
+  viewports: ["desktop"]
+});
+const { $t } = useBlokkli();
+const isActive = ref(false);
+addElementClasses(document.documentElement, "bk-hide-non-editable", isActive);
+</script>
+
+<script>
+export default {
+  name: "EditableMask"
+};
+</script>

package/dist/runtime/editor/features/editable-mask/index.vue.d.ts

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

package/dist/runtime/editor/features/entity-title/index.d.vue.ts

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