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

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

@@ -13,11 +13,11 @@
         </h3>
         <button @click.prevent="cancel">
           <Icon name="close" />
-          <span>{{ $t('cancel', 'Cancel') }}</span>
+          <span>{{ $t("cancel", "Cancel") }}</span>
         </button>
         <button :disabled="!hasChanged" type="submit" @click.prevent="save">
           <Icon name="save" />
-          <span>{{ $t('save', 'Save') }}</span>
+          <span>{{ $t("save", "Save") }}</span>
         </button>
       </div>
 
@@ -63,13 +63,8 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import type {
-  DraggableExistingBlock,
-  EntityContext,
-  EditableFieldConfig,
-} from '#blokkli/types'
-import { Icon, ItemIcon } from '#blokkli/components'
+<script setup>
+import { Icon, ItemIcon } from "#blokkli/components";
 import {
   computed,
   ref,
@@ -77,281 +72,224 @@ import {
   onMounted,
   onBeforeUnmount,
   useBlokkli,
-  nextTick,
-} from '#imports'
-import { falsy, findIdealRectPosition } 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'
-
-const { eventBus, ui, selection, state, adapter, $t, types } = useBlokkli()
-
-const props = defineProps<{
-  fieldName: string
-  host: DraggableExistingBlock | EntityContext
-  element: HTMLElement
-  config: EditableFieldConfig
-  isComponent?: boolean
-  value?: string
-}>()
-
-const emit = defineEmits(['close'])
-
-const shouldSave = ref(true)
-
+  nextTick
+} from "#imports";
+import { falsy, findIdealRectPosition } 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";
+const { eventBus, ui, selection, state, adapter, $t, types } = 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')
-}
-
+  shouldSave.value = false;
+  close();
+  emit("close");
+};
 const save = () => {
-  shouldSave.value = true
-  close()
-  emit('close')
-}
-
-// Save the editable when clicking away from the text area.
-onBlokkliEvent('window:clickAway', save)
-
-const getElement = (): HTMLElement => props.element
-
-type Alignment = 'left' | 'center' | 'right'
-
-const alignment = computed<Alignment>(() => {
+  shouldSave.value = true;
+  close();
+  emit("close");
+};
+onBlokkliEvent("window:clickAway", save);
+const getElement = () => props.element;
+const alignment = computed(() => {
   if (props.element) {
-    const style = window.getComputedStyle(props.element)
-    if (
-      style.textAlign === 'left' ||
-      style.textAlign === 'center' ||
-      style.textAlign === 'right'
-    ) {
-      return style.textAlign
-    } else if (style.textAlign === 'start') {
-      return 'left'
-    } else if (style.textAlign === 'end') {
-      return 'right'
+    const style2 = window.getComputedStyle(props.element);
+    if (style2.textAlign === "left" || style2.textAlign === "center" || style2.textAlign === "right") {
+      return style2.textAlign;
+    } else if (style2.textAlign === "start") {
+      return "left";
+    } else if (style2.textAlign === "end") {
+      return "right";
     }
   }
-  return 'center'
-})
-
-const scrollHeight = ref(0)
-const loaded = ref(false)
-const originalText = ref(props.value || '')
-const modelValue = ref('')
-const width = ref(320)
-const inputStyle = ref<Record<string, any>>({})
-const form = ref<HTMLFormElement | null>(null)
-const root = ref<HTMLDivElement | null>(null)
-const input = ref<HTMLDivElement | null>(null)
-
-const x = ref(0)
-const y = ref(0)
-
+  return "center";
+});
+const scrollHeight = ref(0);
+const loaded = ref(false);
+const originalText = ref(props.value || "");
+const modelValue = ref("");
+const width = ref(320);
+const inputStyle = ref({});
+const form = ref(null);
+const root = ref(null);
+const input = ref(null);
+const x = ref(0);
+const y = ref(0);
 const style = computed(() => {
   if (ui.isMobile.value) {
-    return {}
+    return {};
   } else {
     return {
-      width: width.value + 'px',
-      top: y.value + 'px',
-      left: x.value + 'px',
-    }
+      width: width.value + "px",
+      top: y.value + "px",
+      left: x.value + "px"
+    };
   }
-})
-
-const hasChanged = computed(() => modelValue.value !== originalText.value)
+});
+const hasChanged = computed(() => modelValue.value !== originalText.value);
 const itemBundle = computed(() => {
-  if ('itemBundle' in props.host) {
-    return props.host.itemBundle
+  if ("itemBundle" in props.host) {
+    return props.host.itemBundle;
   }
-  return undefined
-})
-const maxlength = computed(() => props.config.maxLength)
-const required = computed(() => !!props.config.required)
+  return void 0;
+});
+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(' » ')
+      props.config.label
+    ].filter(falsy).join(" \xBB ");
   }
-
-  return props.config.label
-})
+  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)
-
+  () => 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 $t("fieldIsRequired", "This field is required");
   }
-
-  return undefined
-})
-
+  return void 0;
+});
 const close = async () => {
-  // Weird iOS bug: Close method is called twice, so we have to check if we
-  // are actually still editing.
   if (!selection.editableActive.value) {
-    return
+    return;
   }
   if (shouldSave.value && errorText.value) {
-    return
+    return;
   }
-
-  const el = getElement()
-
+  const el = getElement();
   if (shouldSave.value && modelValue.value !== originalText.value) {
-    if ('itemBundle' in props.host) {
-      await state.mutateWithLoadingState(() =>
-        adapter.updateFieldValue!({
+    if ("itemBundle" in props.host) {
+      await state.mutateWithLoadingState(
+        () => adapter.updateFieldValue({
           uuid: props.host.uuid,
           fieldName: props.fieldName,
-          fieldValue: modelValue.value,
-        }),
-      )
+          fieldValue: modelValue.value
+        })
+      );
     } else if (adapter.updateEntityFieldValue) {
-      await state.mutateWithLoadingState(() =>
-        adapter.updateEntityFieldValue!({
+      await state.mutateWithLoadingState(
+        () => adapter.updateEntityFieldValue({
           fieldName: props.fieldName,
-          fieldValue: modelValue.value,
-        }),
-      )
+          fieldValue: modelValue.value
+        })
+      );
     }
   }
   if (!shouldSave.value && el && !props.isComponent) {
     if (isMarkup.value) {
-      el.innerHTML = originalText.value
+      el.innerHTML = originalText.value;
     } else {
-      el.textContent = originalText.value
+      el.textContent = originalText.value;
     }
   }
   if (el) {
-    el.dataset.blokkliEditableActive = undefined
+    el.dataset.blokkliEditableActive = void 0;
   }
-}
-
+};
 watch(modelValue, (newText) => {
   if (props.element && selection.editableActive.value && !props.isComponent) {
-    const el = getElement()
-    if (props.config.type === 'plain') {
-      el.textContent = newText
+    const el = getElement();
+    if (props.config.type === "plain") {
+      el.textContent = newText;
     } else {
-      el.innerHTML = newText
+      el.innerHTML = newText;
     }
   }
-
   if (props.isComponent) {
-    eventBus.emit('editable:update', {
+    eventBus.emit("editable:update", {
       name: props.fieldName,
       entityUuid: props.host.uuid,
-      value: newText,
-    })
+      value: newText
+    });
   }
-})
-
-const focusInput = (el?: HTMLElement | Document | null) => {
+});
+const focusInput = (el) => {
   if (!el) {
-    return
+    return;
   }
-
-  const textarea = el.querySelector('textarea')
+  const textarea = el.querySelector("textarea");
   if (textarea) {
-    textarea.focus()
-    return
+    textarea.focus();
+    return;
   }
-
-  const editable = el.querySelector('[contenteditable]')
+  const editable = el.querySelector("[contenteditable]");
   if (editable instanceof HTMLElement) {
-    editable.focus()
-    return
+    editable.focus();
+    return;
   }
-
-  const iframe = el.querySelector('iframe')
-
+  const iframe = el.querySelector("iframe");
   if (iframe?.contentDocument) {
-    focusInput(iframe.contentDocument)
+    focusInput(iframe.contentDocument);
   }
-}
-
+};
 const onAnimationFrame = () => {
   if (ui.isMobile.value) {
-    return
+    return;
   }
-  const elementRect = props.element.getBoundingClientRect()
-
-  const height = form.value?.scrollHeight || 100
-  const newWidth = Math.min(Math.max(elementRect.width, 360), 1000)
-
+  const elementRect = props.element.getBoundingClientRect();
+  const height = form.value?.scrollHeight || 100;
+  const newWidth = Math.min(Math.max(elementRect.width, 360), 1e3);
   const ideal = findIdealRectPosition(
     ui.viewportBlockingRects.value,
     {
-      x:
-        alignment.value === 'left'
-          ? elementRect.x
-          : elementRect.x + (Math.max(elementRect.width, 360) - newWidth) / 2,
+      x: alignment.value === "left" ? elementRect.x : elementRect.x + (Math.max(elementRect.width, 360) - newWidth) / 2,
       y: elementRect.y - height - 20,
       height,
-      width: newWidth,
+      width: newWidth
     },
-    ui.visibleViewportPadded.value,
-  )
-
-  x.value = ideal.x
-  y.value = ideal.y + height
-  width.value = newWidth
-}
-
-onAnimationFrame()
-
-onBlokkliEvent('animationFrame', onAnimationFrame)
-
+    ui.visibleViewportPadded.value
+  );
+  x.value = ideal.x;
+  y.value = ideal.y + height;
+  width.value = newWidth;
+};
+onAnimationFrame();
+onBlokkliEvent("animationFrame", onAnimationFrame);
 onMounted(() => {
-  const el = getElement()
-
+  const el = getElement();
   if (props.isComponent) {
-    modelValue.value = props.value || ''
+    modelValue.value = props.value || "";
   } else {
     if (isMarkup.value) {
-      modelValue.value = el.innerHTML
+      modelValue.value = el.innerHTML;
     } else {
-      modelValue.value = el.textContent || ''
+      modelValue.value = el.textContent || "";
     }
   }
-
-  originalText.value = modelValue.value
-
-  selection.editableActive.value = true
-  el.dataset.blokkliEditableActive = 'true'
-
-  const computedStyle = window.getComputedStyle(el)
+  originalText.value = modelValue.value;
+  selection.editableActive.value = true;
+  el.dataset.blokkliEditableActive = "true";
+  const computedStyle = window.getComputedStyle(el);
   inputStyle.value = {
-    textAlign: computedStyle.textAlign,
-  }
-
+    textAlign: computedStyle.textAlign
+  };
   nextTick(() => {
-    scrollHeight.value = el.scrollHeight
-    loaded.value = true
+    scrollHeight.value = el.scrollHeight;
+    loaded.value = true;
     nextTick(() => {
-      focusInput(form.value)
-    })
-  })
-})
-
+      focusInput(form.value);
+    });
+  });
+});
 onBeforeUnmount(async () => {
-  const el = getElement()
-  await close()
-  el.dataset.blokkliEditableActive = undefined
-})
+  const el = getElement();
+  await close();
+  el.dataset.blokkliEditableActive = void 0;
+});
 </script>

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

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