@blokkli/editor 1.4.0-alpha.1 → 2.0.0-alpha.2

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

@@ -19,199 +19,163 @@
   </Teleport>
 </template>
 
-<script lang="ts" setup>
-import { ref, computed, useBlokkli, defineBlokkliFeature } from '#imports'
-import { FormOverlay } from '#blokkli/components'
-import { getDefinition } from '#blokkli-build/definitions'
-import FormFrame from './Frame/index.vue'
-import type { AdapterFormFrameBuilder } from '#blokkli/adapter'
-import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import type { EntityTranslation } from '#blokkli/types'
-
+<script setup>
+import { ref, computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { FormOverlay } from "#blokkli/components";
+import FormFrame from "./Frame/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 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 } = useBlokkli()
-
-const form = ref<AdapterFormFrameBuilder | null>(null)
-
-const formUrl = computed<string | undefined>(() => {
+  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 } = 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
+    if (form.value.id === "entity:translate" && form.value.translation.editUrl) {
+      return form.value.translation.editUrl;
     }
-    return adapter.formFrameBuilder(form.value)?.url
+    return adapter.formFrameBuilder(form.value)?.url;
   }
-
-  return undefined
-})
-
+  return void 0;
+});
 const labelReplacement = computed(() => {
   switch (form.value?.id) {
-    case 'entity:edit':
-    case 'entity:translate':
-      return state.entity.value.label || ''
+    case "entity:edit":
+    case "entity:translate":
+      return state.entity.value.label || "";
   }
-
   if (bundle.value) {
-    const definition = types.getBlockBundleDefinition(bundle.value)
+    const definition = types.getBlockBundleDefinition(bundle.value);
     if (definition) {
-      return definition.label
+      return definition.label;
     }
   }
-
-  return ''
-})
-
+  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')
-})
-
+    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
+  if (form.value && "langcode" in form.value) {
+    const langcode = form.value.langcode;
     const language = state.translation.value.availableLanguages?.find(
-      (v) => v.id === langcode,
-    )
+      (v) => v.id === langcode
+    );
     if (language) {
-      return language.name || ''
+      return language.name || "";
     }
   }
-
-  return ''
-})
-
-const title = computed(() =>
-  titleText.value
-    .replace('@label', labelReplacement.value)
-    .replace('@language', languageReplacement.value),
-)
-
+  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
+  if (form.value && (form.value.id === "block:add" || form.value.id === "block:edit" || form.value.id === "block:translate")) {
+    return form.value.data.bundle;
   }
-
-  return undefined
-})
-
+  return void 0;
+});
 const onClose = () => {
-  form.value = null
-}
-
-onBlokkliEvent('item:edit', (e) => {
+  form.value = null;
+};
+onBlokkliEvent("item:edit", (e) => {
   if (!state.canEdit.value) {
-    return
+    return;
   }
-  const block = dom.findBlock(e.uuid)
+  const block = dom.findBlock(e.uuid);
   if (!block) {
-    return
+    return;
   }
-  const definition = getDefinition(
+  const definition = definitions.getBlockDefinition(
     e.bundle,
     block.hostFieldListType,
-    block.parentBlockBundle,
-  )
+    block.parentBlockBundle
+  );
   if (definition?.editor?.disableEdit) {
-    return
+    return;
   }
-  if (state.editMode.value === 'translating') {
-    const type = types.getBlockBundleDefinition(e.bundle)
+  if (state.editMode.value === "translating") {
+    const type = types.getBlockBundleDefinition(e.bundle);
     if (!type) {
-      return
+      return;
     }
-
     if (!type.isTranslatable) {
-      return
+      return;
     }
     if (!context.value.language) {
       throw new Error(
-        'Cannot translate block because language is missing in context.',
-      )
+        "Cannot translate block because language is missing in context."
+      );
     }
     form.value = {
-      id: 'block:translate',
+      id: "block:translate",
       data: e,
-      langcode: context.value.language,
-    }
-    return
+      langcode: context.value.language
+    };
+    return;
   }
   form.value = {
-    id: 'block:edit',
-    data: e,
-  }
-})
-
-onBlokkliEvent('translateEntity', (translation: EntityTranslation) => {
+    id: "block:edit",
+    data: e
+  };
+});
+onBlokkliEvent("translateEntity", (translation) => {
   form.value = {
-    id: 'entity:translate',
-    translation,
-  }
-})
-
-onBlokkliEvent('batchTranslate', () => {
+    id: "entity:translate",
+    translation
+  };
+});
+onBlokkliEvent("batchTranslate", () => {
   form.value = {
-    id: 'batchTranslate',
-  }
-})
-
-onBlokkliEvent('editEntity', () => {
+    id: "batchTranslate"
+  };
+});
+onBlokkliEvent("editEntity", () => {
   form.value = {
-    id: 'entity:edit',
-  }
-})
-
-onBlokkliEvent('add:block:new', (e) => {
+    id: "entity:edit"
+  };
+});
+onBlokkliEvent("add:block:new", (e) => {
   if (!state.canEdit.value) {
-    return
+    return;
   }
-  const field = dom.findField(e.host.uuid, e.host.fieldName)
+  const field = dom.findField(e.host.uuid, e.host.fieldName);
   if (field) {
-    const definition = getDefinition(
+    const definition = definitions.getBlockDefinition(
       e.bundle,
       field.fieldListType,
-      field.hostEntityBundle as any,
-    )
+      field.hostEntityBundle
+    );
     if (definition?.editor?.disableEdit) {
-      return
+      return;
     }
   }
   form.value = {
-    id: 'block:add',
-    data: e,
-  }
-})
+    id: "block:add",
+    data: e
+  };
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'EditForm',
-}
+  name: "EditForm"
+};
 </script>

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

@@ -0,0 +1,2 @@
+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

@@ -10,33 +10,26 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, onMounted } from '#imports'
-
-const props = defineProps<{
-  modelValue: string
-  // @TODO: Probably not needed anymore.
-  type: any
-}>()
-
-const original = ref('')
-
-const emit = defineEmits(['update:modelValue', 'close'])
-
-const onInput = (e: Event) => {
+<script setup>
+import { ref, onMounted } from "#imports";
+const props = defineProps({
+  modelValue: { type: String, required: true },
+  type: { type: null, required: true }
+});
+const original = ref("");
+const emit = defineEmits(["update:modelValue", "close"]);
+const onInput = (e) => {
   if (e.target instanceof HTMLElement) {
-    emit('update:modelValue', e.target.innerHTML)
+    emit("update:modelValue", e.target.innerHTML);
   }
-}
-
-const onKeyDown = (e: KeyboardEvent) => {
-  if (e.code === 'Escape') {
-    e.preventDefault()
-    emit('close')
+};
+const onKeyDown = (e) => {
+  if (e.code === "Escape") {
+    e.preventDefault();
+    emit("close");
   }
-}
-
+};
 onMounted(() => {
-  original.value = props.modelValue
-})
+  original.value = props.modelValue;
+});
 </script>

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

@@ -0,0 +1,12 @@
+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

@@ -8,61 +8,45 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, ref, computed, onMounted, onBeforeUnmount } from '#imports'
-import type {
-  DraggableExistingBlock,
-  EditableFieldType,
-  EntityContext,
-} from '#blokkli/types'
-
-const { adapter } = useBlokkli()
-
-const props = defineProps<{
-  modelValue: string
-  type: EditableFieldType
-  fieldName: string
-  host: DraggableExistingBlock | EntityContext
-  initialHeight: number
-}>()
-
-const height = ref(props.initialHeight)
-
+<script setup>
+import { useBlokkli, ref, computed, onMounted, onBeforeUnmount } from "#imports";
+const { adapter } = useBlokkli();
+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 height = ref(props.initialHeight);
 const url = computed(() => {
-  if ('itemBundle' in props.host) {
-    return adapter.buildEditableFrameUrl!({
+  if ("itemBundle" in props.host) {
+    return adapter.buildEditableFrameUrl({
       uuid: props.host.uuid,
-      fieldName: props.fieldName,
-    })
+      fieldName: props.fieldName
+    });
   }
-
-  return adapter.buildEditableFrameUrl!({
-    fieldName: props.fieldName,
-  })
-})
-
-const original = ref('')
-
-const emit = defineEmits(['update:modelValue', 'close'])
-
-const onMessage = (e: MessageEvent) => {
-  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
+  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 + 48
-
-  window.addEventListener('message', onMessage)
-})
-
+  original.value = props.modelValue;
+  height.value = props.initialHeight + 48;
+  window.addEventListener("message", onMessage);
+});
 onBeforeUnmount(() => {
-  window.removeEventListener('message', onMessage)
-})
+  window.removeEventListener("message", onMessage);
+});
 </script>

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

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

@@ -10,72 +10,61 @@
       @keydown.stop.capture="onKeyDown"
       @blur="onBlur"
       @input="
-        $emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)
-      "
+  $emit('update:modelValue', $event.target.value)
+"
     />
     <div :style="inputStyle" class="bk-textarea" v-html="modelValue" />
   </div>
 </template>
 
-<script lang="ts" setup>
-import { useBlokkli, computed } from '#imports'
-
-const { ui, selection } = useBlokkli()
-
-const props = defineProps<{
-  element: HTMLElement
-  required: boolean
-  maxlength?: number
-  modelValue: string
-}>()
-
-const emit = defineEmits(['close', 'save', 'update:modelValue'])
-
-const onKeyDown = (e: KeyboardEvent) => {
-  if (e.code === 'Escape') {
-    e.preventDefault()
-    emit('close')
-  } else if (e.code === 'Enter') {
-    e.preventDefault()
-    emit('save')
+<script setup>
+import { useBlokkli, computed } 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 onKeyDown = (e) => {
+  if (e.code === "Escape") {
+    e.preventDefault();
+    emit("close");
+  } else if (e.code === "Enter") {
+    e.preventDefault();
+    emit("save");
   }
-}
-
+};
 const inputAttributes = computed(() => {
-  const attrs: Record<string, any> = {}
+  const attrs = {};
   if (props.required) {
-    attrs.required = true
+    attrs.required = true;
   }
   if (props.maxlength && props.maxlength >= 1) {
-    attrs.maxlength = props.maxlength
+    attrs.maxlength = props.maxlength;
   }
-  return attrs
-})
-
-let blurTimeout: any = null
-
-const onBlur = (e: FocusEvent) => {
-  clearTimeout(blurTimeout)
-
+  return attrs;
+});
+let blurTimeout = null;
+const onBlur = (e) => {
+  clearTimeout(blurTimeout);
   if (!ui.isMobile.value) {
-    return
+    return;
   }
-
-  e.stopPropagation()
-  e.preventDefault()
-
+  e.stopPropagation();
+  e.preventDefault();
   blurTimeout = setTimeout(() => {
     if (!selection.editableActive.value) {
-      return
+      return;
     }
-    emit('save')
-  }, 100)
-}
-
-const inputStyle = computed<Record<string, any>>(() => {
-  const computedStyle = window.getComputedStyle(props.element)
+    emit("save");
+  }, 100);
+};
+const inputStyle = computed(() => {
+  const computedStyle = window.getComputedStyle(props.element);
   return {
-    textAlign: computedStyle.textAlign,
-  }
-})
+    textAlign: computedStyle.textAlign
+  };
+});
 </script>

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

@@ -0,0 +1,16 @@
+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;