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

package/dist/runtime/editor/features/edit-form/Frame/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { AdapterFormFrameBuilder } from '#blokkli/editor/adapter';
+type __VLS_Props = {
+    url: string;
+    form: AdapterFormFrameBuilder;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/edit-form/Frame/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    class="bk-form-overlay-iframe"
+    @scroll.stop
+    @touchstart.stop.capture.prevent
+    @touchmove.stop.capture.prevent
+  >
+    <iframe ref="iframe" allowtransparency :src="url" @load="onIFrameLoad" />
+    <BlokkliTransition name="loading">
+      <Loading v-if="!isLoaded" />
+    </BlokkliTransition>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  useBlokkli,
+  onUnmounted,
+  onMounted,
+  useTemplateRef
+} from "#imports";
+import { Loading, BlokkliTransition } from "#blokkli/editor/components";
+const { eventBus } = useBlokkli();
+const iframe = useTemplateRef("iframe");
+const isLoaded = ref(false);
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  url: { type: String, required: true },
+  form: { type: Object, required: true }
+});
+function onIFrameLoad() {
+  isLoaded.value = true;
+  if (iframe.value?.contentWindow) {
+    iframe.value.contentWindow?.focus();
+  }
+}
+function onMessage(e) {
+  if (!e.data || typeof e.data !== "object") {
+    return;
+  }
+  if (e.data.event !== "BLOKKLI") {
+    return;
+  }
+  const { action } = e.data;
+  if (action === "SAVE") {
+    if (props.form.id === "entity:edit" || props.form.id === "entity:translate") {
+      if (props.form.id === "entity:translate") {
+        const langcode = props.form.translation.id;
+        eventBus.emit("reloadEntity", () => {
+          eventBus.emit("entity:translated", langcode);
+        });
+      } else {
+        eventBus.emit("reloadEntity");
+      }
+    } else {
+      eventBus.emit("reloadState");
+    }
+    emit("close");
+  } else if (action === "CANCEL") {
+    emit("close");
+  }
+}
+onMounted(() => {
+  window.addEventListener("message", onMessage);
+});
+onUnmounted(() => {
+  window.removeEventListener("message", onMessage);
+});
+</script>

package/dist/runtime/editor/features/edit-form/Frame/index.vue.d.ts

@@ -0,0 +1,12 @@
+import type { AdapterFormFrameBuilder } from '#blokkli/editor/adapter';
+type __VLS_Props = {
+    url: string;
+    form: AdapterFormFrameBuilder;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/edit-form/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/edit-form/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="slide-in">
+      <FormOverlay v-if="form" id="edit-form" :bundle :title @close="onClose">
+        <FormFrame
+          v-if="formUrl"
+          :url="formUrl"
+          :form="form"
+          @close="onClose"
+        />
+      </FormOverlay>
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { FormOverlay, BlokkliTransition } from "#blokkli/editor/components";
+import FormFrame from "./Frame/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const { adapter } = defineBlokkliFeature({
+  id: "edit-form",
+  icon: "bk_mdi_select_check_box",
+  label: "Edit Form",
+  description: "Listens to edit events and renders an iframe containing the edit form.",
+  requiredAdapterMethods: ["formFrameBuilder"]
+});
+const { types, state, context, $t, dom, definitions, blocks, ui } = useBlokkli();
+const form = ref(null);
+const formUrl = computed(() => {
+  if (form.value) {
+    if (form.value.id === "entity:translate" && form.value.translation.editUrl) {
+      return form.value.translation.editUrl;
+    }
+    return adapter.formFrameBuilder(form.value)?.url;
+  }
+  return void 0;
+});
+const labelReplacement = computed(() => {
+  switch (form.value?.id) {
+    case "entity:edit":
+    case "entity:translate":
+      return state.entity.value.label || "";
+  }
+  if (bundle.value) {
+    const definition = types.getBlockBundleDefinition(bundle.value);
+    if (definition) {
+      return definition.label;
+    }
+  }
+  return "";
+});
+const titleText = computed(() => {
+  switch (form.value?.id) {
+    case "block:add":
+      return $t("editFormBlockAdd", "Add @label");
+    case "block:translate":
+      return $t("editFormBlockTranslate", "Translate @label (@language)");
+    case "block:edit":
+      return $t("editFormBlockEdit", "Edit @label");
+    case "entity:edit":
+      return $t("editFormEntityEdit", "Edit @label");
+    case "entity:translate":
+      return $t("editFormEntityTranslate", 'Translate "@label" (@language)');
+  }
+  return $t("edit", "Edit");
+});
+const languageReplacement = computed(() => {
+  if (form.value && "langcode" in form.value) {
+    const langcode = form.value.langcode;
+    const language = state.translation.value.availableLanguages?.find(
+      (v) => v.id === langcode
+    );
+    if (language) {
+      return language.name || "";
+    }
+  }
+  return "";
+});
+const title = computed(
+  () => titleText.value.replace("@label", labelReplacement.value).replace("@language", languageReplacement.value)
+);
+const bundle = computed(() => {
+  if (form.value && (form.value.id === "block:add" || form.value.id === "block:edit" || form.value.id === "block:translate")) {
+    return form.value.data.bundle;
+  }
+  return void 0;
+});
+const onClose = () => {
+  form.value = null;
+};
+onBlokkliEvent("item:edit", (e) => {
+  if (!state.canEdit.value) {
+    return;
+  }
+  const block = blocks.getBlock(e.uuid);
+  if (!block) {
+    return;
+  }
+  const definition = definitions.getBlockDefinition(
+    e.bundle,
+    block.fieldListType,
+    block.parentBlockBundle
+  );
+  if (definition?.editor?.disableEdit) {
+    return;
+  }
+  if (state.editMode.value === "translating") {
+    const type = types.getBlockBundleDefinition(e.bundle);
+    if (!type) {
+      return;
+    }
+    if (!type.isTranslatable) {
+      return;
+    }
+    if (!context.value.language) {
+      throw new Error(
+        "Cannot translate block because language is missing in context."
+      );
+    }
+    form.value = {
+      id: "block:translate",
+      data: e,
+      langcode: context.value.language
+    };
+    return;
+  }
+  form.value = {
+    id: "block:edit",
+    data: e
+  };
+});
+onBlokkliEvent("translateEntity", (translation) => {
+  form.value = {
+    id: "entity:translate",
+    translation
+  };
+});
+onBlokkliEvent("batchTranslate", () => {
+  form.value = {
+    id: "batchTranslate"
+  };
+});
+onBlokkliEvent("editEntity", () => {
+  form.value = {
+    id: "entity:edit"
+  };
+});
+onBlokkliEvent("add:block:new", (e) => {
+  if (!state.canEdit.value) {
+    return;
+  }
+  const field = dom.getRegisteredField(e.host.uuid, e.host.fieldName);
+  if (field?.entity.type === itemEntityType) {
+    const definition = definitions.getBlockDefinition(
+      e.bundle,
+      field.fieldListType,
+      field.entity.bundle
+    );
+    if (definition?.editor?.disableEdit) {
+      return;
+    }
+  }
+  form.value = {
+    id: "block:add",
+    data: e
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "EditForm"
+};
+</script>

package/dist/runtime/editor/features/edit-form/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/editable-field/Overlay/Contenteditable/index.d.vue.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue: string;
+    type: any;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...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/Overlay/Contenteditable/index.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue: string;
+    type: any;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...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/Overlay/Frame/index.d.vue.ts

@@ -0,0 +1,19 @@
+import type { EntityContext } from '#blokkli/types';
+import type { EditableFieldType } from '../../types.js';
+type __VLS_Props = {
+    type: EditableFieldType;
+    fieldName: string;
+    host: EntityContext;
+    initialHeight: number;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,116 @@
+<template>
+  <div class="bk-editable-field-frame">
+    <iframe
+      ref="iframe"
+      :style="{ height: Math.max(height, 150) + 'px' }"
+      :src="url"
+      @load="onIframeLoad"
+    />
+  </div>
+</template>
+
+<script setup>
+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({
+  type: { type: String, required: true },
+  fieldName: { type: String, required: true },
+  host: { type: Object, required: true },
+  initialHeight: { type: Number, required: true }
+});
+const modelValue = defineModel({ type: String, ...{ 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 (props.host.type === itemEntityType) {
+    return adapter.buildEditableFrameUrl({
+      uuid: props.host.uuid,
+      fieldName: props.fieldName
+    });
+  }
+  return adapter.buildEditableFrameUrl({
+    fieldName: props.fieldName
+  });
+});
+const original = ref("");
+const onMessage = (e) => {
+  if (typeof e.data === "object") {
+    if (e.data.name === "blokkli__editable_field_update") {
+      modelValue.value = e.data.data.text;
+    } else if (e.data.name === "blokkli__editable_field_update_height") {
+      height.value = e.data.data.height;
+    }
+  }
+};
+onMounted(() => {
+  original.value = modelValue.value;
+  height.value = props.initialHeight;
+  window.addEventListener("message", onMessage);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("message", onMessage);
+});
+</script>

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

@@ -0,0 +1,19 @@
+import type { EntityContext } from '#blokkli/types';
+import type { EditableFieldType } from '../../types.js';
+type __VLS_Props = {
+    type: EditableFieldType;
+    fieldName: string;
+    host: EntityContext;
+    initialHeight: number;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    element: HTMLElement;
+    required: boolean;
+    maxlength?: number;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    discard: (...args: any[]) => void;
+    save: (...args: any[]) => void;
+    "update:modelValue": (value: string) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onDiscard?: ((...args: any[]) => any) | undefined;
+    onSave?: ((...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/Overlay/Plaintext/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    class="bk bk-editable-field-textarea"
+    :style="{
+  height: height + 'px'
+}"
+  >
+    <textarea
+      id="bk-editable-field-textarea"
+      ref="input"
+      v-model="modelValue"
+      enterkeyhint="done"
+      rows="2"
+      v-bind="inputAttributes"
+      @keydown.capture="onKeyDown"
+      @blur="onBlur"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, computed, useTemplateRef, ref } from "#imports";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const { ui, selection } = useBlokkli();
+const props = defineProps({
+  element: { type: null, required: true },
+  required: { type: Boolean, required: true },
+  maxlength: { type: Number, required: false }
+});
+const modelValue = defineModel({ type: String, ...{ required: true } });
+const emit = defineEmits(["discard", "save"]);
+const input = useTemplateRef("input");
+const height = ref(20);
+function discard() {
+  emit("discard");
+}
+function save() {
+  if (props.required && !modelValue.value) {
+    return;
+  }
+  emit("save");
+}
+const onKeyDown = (e) => {
+  e.stopPropagation();
+  if (e.code === "Escape") {
+    e.preventDefault();
+    discard();
+  } else if (e.code === "Enter") {
+    e.preventDefault();
+    save();
+  }
+};
+const inputAttributes = computed(() => {
+  const attrs = {};
+  if (props.required) {
+    attrs.required = true;
+  }
+  if (props.maxlength && props.maxlength >= 1) {
+    attrs.maxlength = props.maxlength;
+  }
+  return attrs;
+});
+let blurTimeout = null;
+const onBlur = (e) => {
+  clearTimeout(blurTimeout);
+  if (!ui.isMobile.value) {
+    return;
+  }
+  e.stopPropagation();
+  e.preventDefault();
+  blurTimeout = setTimeout(() => {
+    if (!selection.activeEditableLabel.value) {
+      return;
+    }
+    save();
+  }, 100);
+};
+onBlokkliEvent("animationFrame", () => {
+  height.value = Math.max(input.value?.scrollHeight ?? 20, 20);
+});
+</script>

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

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    element: HTMLElement;
+    required: boolean;
+    maxlength?: number;
+};
+type __VLS_ModelProps = {
+    modelValue: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    discard: (...args: any[]) => void;
+    save: (...args: any[]) => void;
+    "update:modelValue": (value: string) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onDiscard?: ((...args: any[]) => any) | undefined;
+    onSave?: ((...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/Overlay/index.d.vue.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;