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

package/dist/runtime/components/Edit/Features/EditForm/index.vue

@@ -1,176 +0,0 @@
-<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/components";
-import FormFrame from "./Frame/index.vue";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { itemEntityType } from "#blokkli-build/config";
-const { adapter } = defineBlokkliFeature({
-  id: "edit-form",
-  icon: "form",
-  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/components/Edit/Features/EditForm/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/Features/EditableField/Overlay/Contenteditable/index.vue.d.ts

@@ -1,12 +0,0 @@
-type __VLS_Props = {
-    modelValue: string;
-    type: any;
-};
-declare const _default: 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>;
-export default _default;

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Frame/index.vue

@@ -1,117 +0,0 @@
-<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({
-  modelValue: { type: String, required: true },
-  type: { type: String, required: true },
-  fieldName: { type: String, required: true },
-  host: { type: Object, required: true },
-  initialHeight: { type: Number, 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 emit = defineEmits(["update:modelValue", "close"]);
-const onMessage = (e) => {
-  if (typeof e.data === "object") {
-    if (e.data.name === "blokkli__editable_field_update") {
-      emit("update:modelValue", e.data.data.text);
-    } else if (e.data.name === "blokkli__editable_field_update_height") {
-      height.value = e.data.data.height;
-    }
-  }
-};
-onMounted(() => {
-  original.value = props.modelValue;
-  height.value = props.initialHeight;
-  window.addEventListener("message", onMessage);
-});
-onBeforeUnmount(() => {
-  window.removeEventListener("message", onMessage);
-});
-</script>

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Frame/index.vue.d.ts

@@ -1,16 +0,0 @@
-import type { EditableFieldType, EntityContext } from '#blokkli/types';
-type __VLS_Props = {
-    modelValue: string;
-    type: EditableFieldType;
-    fieldName: string;
-    host: EntityContext;
-    initialHeight: number;
-};
-declare const _default: 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>;
-export default _default;

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Plaintext/index.vue

@@ -1,74 +0,0 @@
-<template>
-  <div
-    class="bk bk-editable-field-textarea"
-    :style="{
-  height: height + 'px'
-}"
-  >
-    <textarea
-      id="bk-editable-field-textarea"
-      ref="input"
-      :value="modelValue"
-      enterkeyhint="done"
-      rows="2"
-      v-bind="inputAttributes"
-      @keydown.capture="onKeyDown"
-      @blur="onBlur"
-      @input="
-  $emit('update:modelValue', $event.target.value)
-"
-    />
-  </div>
-</template>
-
-<script setup>
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, computed, useTemplateRef, ref } from "#imports";
-const { ui, selection } = useBlokkli();
-const props = defineProps({
-  element: { type: null, required: true },
-  required: { type: Boolean, required: true },
-  maxlength: { type: Number, required: false },
-  modelValue: { type: String, required: true }
-});
-const emit = defineEmits(["close", "save", "update:modelValue"]);
-const input = useTemplateRef("input");
-const height = ref(20);
-const onKeyDown = (e) => {
-  if (e.code === "Escape") {
-    e.preventDefault();
-    emit("close");
-  } else if (e.code === "Enter") {
-    e.preventDefault();
-    emit("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.editableActive.value) {
-      return;
-    }
-    emit("save");
-  }, 100);
-};
-onBlokkliEvent("animationFrame", () => {
-  height.value = Math.max(input.value?.scrollHeight ?? 20, 20);
-});
-</script>

package/dist/runtime/components/Edit/Features/EditableField/Overlay/Plaintext/index.vue.d.ts

@@ -1,16 +0,0 @@
-type __VLS_Props = {
-    element: HTMLElement;
-    required: boolean;
-    maxlength?: number;
-    modelValue: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (...args: any[]) => void;
-    save: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClose?: ((...args: any[]) => any) | undefined;
-    onSave?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/EditableField/Overlay/index.vue

@@ -1,248 +0,0 @@
-<template>
-  <ArtboardTooltip
-    v-if="loaded"
-    id="editable"
-    :title
-    :anchor-el="element"
-    placement-y="top"
-    class="bk-editable-field"
-    close-icon="check"
-    @close="save"
-  >
-    <form ref="form" class="bk-editable-field-input" @submit.prevent="close">
-      <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"
-          @close="save"
-        />
-
-        <InputPlaintext
-          v-else
-          v-model="modelValue"
-          :element="element"
-          :required="required"
-          :maxlength="maxlength"
-          @close="cancel"
-          @save="save"
-        />
-      </div>
-
-      <div class="bk bk-editable-field-info">
-        <button :disabled="!hasChanged" @click.prevent="cancel">
-          {{ $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/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 onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { itemEntityType } from "#blokkli-build/config";
-const {
-  eventBus,
-  selection,
-  state,
-  adapter,
-  $t,
-  types,
-  element: elementProvider
-} = 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 shouldSave = ref(true);
-const cancel = () => {
-  shouldSave.value = false;
-  close();
-  emit("close");
-};
-const save = () => {
-  shouldSave.value = true;
-  close();
-  emit("close");
-};
-onBlokkliEvent("window:clickAway", save);
-const getElement = () => props.element;
-const scrollHeight = ref(0);
-const loaded = ref(false);
-const originalText = ref(props.value || "");
-const modelValue = ref("");
-const inputStyle = ref({});
-const form = useTemplateRef("form");
-const input = useTemplateRef("input");
-const hasChanged = computed(() => modelValue.value !== originalText.value);
-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;
-});
-const close = async () => {
-  if (!selection.editableActive.value) {
-    return;
-  }
-  if (shouldSave.value && errorText.value) {
-    return;
-  }
-  const el = getElement();
-  if (shouldSave.value && modelValue.value !== originalText.value) {
-    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
-        })
-      );
-    }
-  }
-  if (!shouldSave.value && el && !props.isComponent) {
-    if (isMarkup.value) {
-      el.innerHTML = originalText.value;
-    } else {
-      el.textContent = originalText.value;
-    }
-  }
-};
-watch(modelValue, (newText) => {
-  if (props.element && selection.editableActive.value && !props.isComponent) {
-    const el = getElement();
-    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 = getElement();
-  if (props.isComponent) {
-    modelValue.value = props.value || "";
-  } else {
-    if (isMarkup.value) {
-      modelValue.value = el.innerHTML;
-    } else {
-      modelValue.value = el.textContent || "";
-    }
-  }
-  originalText.value = modelValue.value;
-  selection.editableActive.value = true;
-  const computedStyle = window.getComputedStyle(el);
-  inputStyle.value = {
-    textAlign: computedStyle.textAlign
-  };
-  nextTick(() => {
-    scrollHeight.value = el.scrollHeight;
-    loaded.value = true;
-    nextTick(() => {
-      focusInput(form.value);
-    });
-  });
-});
-onBeforeUnmount(async () => {
-  await close();
-});
-</script>

package/dist/runtime/components/Edit/Features/EditableField/Overlay/index.vue.d.ts

@@ -1,15 +0,0 @@
-import type { EntityContext, EditableFieldConfig } from '#blokkli/types';
-type __VLS_Props = {
-    fieldName: string;
-    host: EntityContext;
-    element: HTMLElement;
-    config: EditableFieldConfig;
-    isComponent?: boolean;
-    value?: string;
-};
-declare const _default: 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>;
-export default _default;