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

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -2,7 +2,7 @@
   <slot :mutated-entity="mutatedEntity" />
 </template>
 
-<script lang="ts" setup generic="T">
+<script setup>
 import {
   ref,
   reactive,
@@ -11,220 +11,167 @@ import {
   onMounted,
   onBeforeUnmount,
   useRouter,
-  useAsyncData,
-} from '#imports'
-import type {
-  MutatedOptions,
-  MutatedField,
-  UpdateBlockOptionEvent,
-  ItemEditContext,
-} from '#blokkli/types'
-import '#blokkli-build/styles'
-import getAdapter from '#blokkli-build/compiled-edit-adapter'
+  useAsyncData
+} from "#imports";
+import "#blokkli-build/styles.css";
+import getAdapter from "#blokkli-build/edit-adapter";
 import {
   INJECT_EDIT_CONTEXT,
   INJECT_IS_PREVIEW,
-  INJECT_MUTATED_FIELDS_MAP,
-} from '#blokkli/helpers/symbols'
-import { frameEventBus } from '#blokkli/helpers/frameEventBus'
-import broadcastProvider from '#blokkli/helpers/broadcastProvider'
-import { getFieldKey, intersects } from '#blokkli/helpers'
-import type { AdapterContext } from '../../adapter'
-import { eventBus } from '#blokkli/helpers/eventBus'
-
-const props = defineProps<{
-  entity?: T
-  entityType: string
-  entityUuid: string
-  entityBundle: string
-  language: string
-}>()
-
-const context = computed<AdapterContext>(() => {
+  INJECT_MUTATED_FIELDS_MAP
+} from "#blokkli/helpers/symbols";
+import { frameEventBus } from "#blokkli/helpers/frameEventBus";
+import broadcastProvider from "#blokkli/helpers/broadcastProvider";
+import { getFieldKey, intersects } from "#blokkli/helpers";
+import { eventBus } from "#blokkli/helpers/eventBus";
+import definitionProvider from "../../helpers/definitionProvider";
+const props = defineProps({
+  entity: { type: null, required: false },
+  entityType: { type: String, required: true },
+  entityUuid: { type: String, required: true },
+  entityBundle: { type: String, required: true },
+  language: { type: String, required: true }
+});
+defineSlots();
+const context = computed(() => {
   return {
     entityType: props.entityType,
     entityBundle: props.entityBundle,
     entityUuid: props.entityUuid,
-    language: props.language,
-  }
-})
-const adapter = await getAdapter(context)
-const router = useRouter()
-const broadcast = broadcastProvider()
-
-let timeout: any = null
-let lastChanged: number = 0
-const mutatedFieldsMap = reactive<Record<string, MutatedField | undefined>>({})
-const mutatedOptions = reactive<MutatedOptions>({})
-const mutatedEntityFromState = ref<T | null>(null)
-
+    language: props.language
+  };
+});
+const adapter = await getAdapter(context);
+const router = useRouter();
+const broadcast = broadcastProvider();
+const definitions = definitionProvider();
+let timeout = null;
+let lastChanged = 0;
+const mutatedFieldsMap = reactive({});
+const mutatedOptions = reactive({});
+const mutatedEntityFromState = ref(null);
 const mutatedEntity = computed(
-  () => mutatedEntityFromState.value || props.entity,
-)
-
-const { data, refresh, error } = await useAsyncData(() =>
-  adapter.loadState().then((v) => adapter.mapState(v)),
-)
-
-function updateMutatedFields(fields: MutatedField[]) {
+  () => mutatedEntityFromState.value || props.entity
+);
+const { data, refresh, error } = await useAsyncData(
+  () => adapter.loadState().then((v) => adapter.mapState(v))
+);
+function updateMutatedFields(fields) {
   fields.forEach((field) => {
-    const key = getFieldKey(field.entityUuid, field.name)
-    mutatedFieldsMap[key] = field
-  })
+    const key = getFieldKey(field.entityUuid, field.name);
+    mutatedFieldsMap[key] = field;
+  });
 }
-
 const updateState = () => {
-  const fields = data.value?.mutatedState?.fields || []
-  updateMutatedFields(fields)
-  mutatedEntityFromState.value = data.value?.mutatedEntity
-
-  const options = (mutatedOptions.value =
-    data.value?.mutatedState?.mutatedOptions || {})
-  const optionKeys = Object.keys(options)
-
+  const fields = data.value?.mutatedState?.fields || [];
+  updateMutatedFields(fields);
+  mutatedEntityFromState.value = data.value?.mutatedEntity;
+  const options = mutatedOptions.value || data.value?.mutatedState?.mutatedOptions || {};
+  const optionKeys = Object.keys(options);
   for (let i = 0; i < optionKeys.length; i++) {
-    const key = optionKeys[i]
-    const newOptions = options[key]
-    const existing = mutatedOptions[key]
-    if (!existing || JSON.stringify(existing) !== JSON.stringify(newOptions)) {
-      mutatedOptions[key] = newOptions
+    const key = optionKeys[i];
+    if (key) {
+      const newOptions = options[key];
+      const existing = mutatedOptions[key];
+      if (!existing || JSON.stringify(existing) !== JSON.stringify(newOptions)) {
+        mutatedOptions[key] = newOptions;
+      }
     }
   }
-}
-
-updateState()
-
-const isPreview = computed(() => !error.value)
-
-provide(INJECT_MUTATED_FIELDS_MAP, mutatedFieldsMap)
-provide(INJECT_IS_PREVIEW, isPreview)
-provide<ItemEditContext>(INJECT_EDIT_CONTEXT, {
+};
+updateState();
+const isPreview = computed(() => !error.value);
+provide(INJECT_MUTATED_FIELDS_MAP, mutatedFieldsMap);
+provide(INJECT_IS_PREVIEW, isPreview);
+provide(INJECT_EDIT_CONTEXT, {
   mutatedOptions,
   eventBus,
-})
-
-/**
- * Listen to window messages and emit the matching frameEventBus event.
- */
-function onMessage(e: MessageEvent) {
-  if (
-    e.data &&
-    typeof e.data === 'object' &&
-    e.data.name &&
-    typeof e.data.name === 'string' &&
-    e.data.name.startsWith('blokkli__')
-  ) {
-    const name = e.data.name.replace('blokkli__', '')
-    const data = e.data.data
-    frameEventBus.emit(name, data)
+  definitions
+});
+function onMessage(e) {
+  if (e.data && typeof e.data === "object" && e.data.name && typeof e.data.name === "string" && e.data.name.startsWith("blokkli__")) {
+    const name = e.data.name.replace("blokkli__", "");
+    const data2 = e.data.data;
+    frameEventBus.emit(name, data2);
   }
 }
-
 const onMouseDown = () => {
-  broadcast.emit('previewFocused')
-}
-
-/**
- * Check the last changed date and update the mutated state if there is an
- * update.
- */
+  broadcast.emit("previewFocused");
+};
 function checkChangedDate() {
-  // State loading has failed, so we can return here; no need to poll.
   if (!isPreview.value) {
-    return
+    return;
   }
-
-  clearTimeout(timeout)
-
-  const delay = adapter.getLastChanged ? 1000 : 5000
-
+  clearTimeout(timeout);
+  const delay = adapter.getLastChanged ? 1e3 : 5e3;
   timeout = setTimeout(async () => {
-    const changed = adapter.getLastChanged
-      ? await adapter.getLastChanged()
-      : Date.now()
+    const changed = adapter.getLastChanged ? await adapter.getLastChanged() : Date.now();
     if (changed) {
       if (lastChanged !== 0 && lastChanged !== changed) {
-        await refresh()
-        updateState()
+        await refresh();
+        updateState();
       }
-      lastChanged = changed
-      checkChangedDate()
+      lastChanged = changed;
+      checkChangedDate();
     }
-  }, delay)
+  }, delay);
 }
-
-const onWheel = (e: WheelEvent) => {
+const onWheel = (e) => {
   if (e.ctrlKey) {
-    e.preventDefault()
+    e.preventDefault();
   }
-}
-
-const isInIframe = () => window.parent !== window
-
-const onFocusItem = (uuid: string) => {
-  const el = document.querySelector(`[data-uuid="${uuid}"]`)
+};
+const isInIframe = () => window.parent !== window;
+const onFocusItem = (uuid) => {
+  const el = document.querySelector(`[data-uuid="${uuid}"]`);
   if (el) {
-    const elRect = el.getBoundingClientRect()
-    if (
-      !intersects(elRect, {
-        x: 0,
-        y: 0,
-        width: window.innerWidth,
-        height: window.innerHeight,
-      })
-    ) {
+    const elRect = el.getBoundingClientRect();
+    if (!intersects(elRect, {
+      x: 0,
+      y: 0,
+      width: window.innerWidth,
+      height: window.innerHeight
+    })) {
       el.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-        inline: 'center',
-      })
+        behavior: "smooth",
+        block: "center",
+        inline: "center"
+      });
     }
   }
-}
-const onUpdateOption = (option: UpdateBlockOptionEvent) => {
-  const { uuid, key, value } = option
-
-  if (!mutatedOptions.value[uuid]) {
-    mutatedOptions[uuid] = {}
-  }
-  if (!mutatedOptions.value[uuid]) {
-    mutatedOptions[uuid] = {}
+};
+const onUpdateOption = (option) => {
+  const { uuid, key, value } = option;
+  if (!mutatedOptions[uuid]) {
+    mutatedOptions[uuid] = {};
   }
-  mutatedOptions[uuid][key] = value
-}
-
+  mutatedOptions[uuid][key] = value;
+};
 onMounted(() => {
   if (isInIframe()) {
-    frameEventBus.on('mutatedFields', updateMutatedFields)
-    frameEventBus.on('focus', onFocusItem)
-    frameEventBus.on('updateOption', onUpdateOption)
-    // We are a preview inside the iframe of the main editing app.
-    // In this case updated state is passed in via postMessage from the main
-    // editing app.
-    document.body.classList.add('bk-body-preview')
-    document.documentElement.classList.add('bk-html-preview')
-    window.addEventListener('message', onMessage)
-    window.addEventListener('wheel', onWheel, { passive: false })
-    document.documentElement.addEventListener('mousedown', onMouseDown)
-
-    // Prevent navigating away from the preview when clicking Nuxt links.
-    router.push = () => Promise.resolve()
-    router.replace = () => Promise.resolve()
+    frameEventBus.on("mutatedFields", updateMutatedFields);
+    frameEventBus.on("focus", onFocusItem);
+    frameEventBus.on("updateOption", onUpdateOption);
+    document.body.classList.add("bk-body-preview");
+    document.documentElement.classList.add("bk-html-preview");
+    window.addEventListener("message", onMessage);
+    window.addEventListener("wheel", onWheel, { passive: false });
+    document.documentElement.addEventListener("mousedown", onMouseDown);
+    router.push = () => Promise.resolve();
+    router.replace = () => Promise.resolve();
   } else {
-    // We are a standalone page in preview mode. Setup polling for changes.
-    checkChangedDate()
+    checkChangedDate();
   }
-})
-
+});
 onBeforeUnmount(() => {
-  clearTimeout(timeout)
-  document.body.classList.remove('bk-body-preview')
-  document.documentElement.classList.remove('bk-html-preview')
-  window.removeEventListener('wheel', onWheel)
-  window.removeEventListener('message', onMessage)
-  document.documentElement.removeEventListener('mousedown', onMouseDown)
-  frameEventBus.off('mutatedFields', updateMutatedFields)
-  frameEventBus.off('focus', onFocusItem)
-  frameEventBus.off('updateOption', onUpdateOption)
-})
+  clearTimeout(timeout);
+  document.body.classList.remove("bk-body-preview");
+  document.documentElement.classList.remove("bk-html-preview");
+  window.removeEventListener("wheel", onWheel);
+  window.removeEventListener("message", onMessage);
+  document.documentElement.removeEventListener("mousedown", onMouseDown);
+  frameEventBus.off("mutatedFields", updateMutatedFields);
+  frameEventBus.off("focus", onFocusItem);
+  frameEventBus.off("updateOption", onUpdateOption);
+});
 </script>

package/dist/runtime/components/Edit/PreviewProvider.vue.d.ts

@@ -0,0 +1,24 @@
+import '#blokkli-build/styles.css';
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
+        entity?: T;
+        entityType: string;
+        entityUuid: string;
+        entityBundle: string;
+        language: string;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default(props: {
+            mutatedEntity: T;
+        }): any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Edit/RelativeTime/index.vue

@@ -2,36 +2,30 @@
   <slot :formatted="formatted" />
 </template>
 
-<script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount } from '#imports'
-import { getRelativeTimeString } from '#blokkli/helpers'
-
-const props = defineProps<{
-  timestamp: number
-}>()
-
-const incrementToggle = ref(0)
-let interval: any = null
-
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from "#imports";
+import { getRelativeTimeString } from "#blokkli/helpers";
+const props = defineProps({
+  timestamp: { type: Number, required: true }
+});
+const incrementToggle = ref(0);
+let interval = null;
 const formatted = computed(() => {
-  // Adding the toggle value forces an update every 5 seconds, so the relative time stays correct.
-  const date = new Date(props.timestamp * 1000 + incrementToggle.value)
-  return getRelativeTimeString(date)
-})
-
+  const date = new Date(props.timestamp * 1e3 + incrementToggle.value);
+  return getRelativeTimeString(date);
+});
 onMounted(() => {
   interval = setInterval(() => {
-    incrementToggle.value = incrementToggle.value ? 0 : 1
-  }, 1000)
-})
-
+    incrementToggle.value = incrementToggle.value ? 0 : 1;
+  }, 1e3);
+});
 onBeforeUnmount(() => {
-  clearInterval(interval)
-})
+  clearInterval(interval);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'RelativeTime',
-}
+  name: "RelativeTime"
+};
 </script>

package/dist/runtime/components/Edit/RelativeTime/index.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    timestamp: number;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    timestamp: number;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {
+        formatted: string;
+    }) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Edit/Resizable/index.vue

@@ -12,79 +12,69 @@
   </div>
 </template>
 
-<script lang="ts" setup>
-import { ref, useBlokkli, computed, onBeforeUnmount } from '#imports'
-
-const { storage, ui } = useBlokkli()
-
-const props = defineProps<{
-  id: string
-}>()
-
-const storageKey = computed(() => 'resizable:width:' + props.id)
-const persistedWidth = storage.use(storageKey, 600)
-const width = ref(persistedWidth.value)
-const startX = ref(0)
-const startWidth = ref(0)
-const isResizing = ref(false)
-
+<script setup>
+import { ref, useBlokkli, computed, onBeforeUnmount } from "#imports";
+const { storage, ui } = useBlokkli();
+const props = defineProps({
+  id: { type: String, required: true }
+});
+const storageKey = computed(() => "resizable:width:" + props.id);
+const persistedWidth = storage.use(storageKey, 600);
+const width = ref(persistedWidth.value);
+const startX = ref(0);
+const startWidth = ref(0);
+const isResizing = ref(false);
 const style = computed(() => {
   if (ui.isMobile.value) {
-    return {}
+    return {};
   }
-
-  return { width: width.value + 'px' }
-})
-
-function onMouseMove(e: MouseEvent) {
+  return { width: width.value + "px" };
+});
+function onMouseMove(e) {
   if (ui.isMobile.value) {
-    return
+    return;
   }
-  e.stopPropagation()
-  e.preventDefault()
+  e.stopPropagation();
+  e.preventDefault();
   width.value = Math.max(
     Math.min(
       startWidth.value + (startX.value - e.clientX),
-      window.innerWidth - 200,
+      window.innerWidth - 200
     ),
-    350,
-  )
+    350
+  );
 }
-
-function onMouseUp(e: MouseEvent) {
+function onMouseUp(e) {
   if (ui.isMobile.value) {
-    return
+    return;
   }
-  e.stopPropagation()
-  e.preventDefault()
-  isResizing.value = false
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('mouseup', onMouseUp)
-  persistedWidth.value = width.value
+  e.stopPropagation();
+  e.preventDefault();
+  isResizing.value = false;
+  window.removeEventListener("mousemove", onMouseMove);
+  window.removeEventListener("mouseup", onMouseUp);
+  persistedWidth.value = width.value;
 }
-
-function onMouseDown(e: MouseEvent) {
+function onMouseDown(e) {
   if (ui.isMobile.value || e.button !== 0) {
-    return
+    return;
   }
-  startX.value = e.clientX
-  startWidth.value = width.value
-  isResizing.value = true
-  e.preventDefault()
-  e.stopPropagation()
-
-  window.addEventListener('mousemove', onMouseMove)
-  window.addEventListener('mouseup', onMouseUp)
+  startX.value = e.clientX;
+  startWidth.value = width.value;
+  isResizing.value = true;
+  e.preventDefault();
+  e.stopPropagation();
+  window.addEventListener("mousemove", onMouseMove);
+  window.addEventListener("mouseup", onMouseUp);
 }
-
 onBeforeUnmount(() => {
-  window.removeEventListener('mousemove', onMouseMove)
-  window.removeEventListener('mouseup', onMouseUp)
-})
+  window.removeEventListener("mousemove", onMouseMove);
+  window.removeEventListener("mouseup", onMouseUp);
+});
 </script>
 
-<script lang="ts">
+<script>
 export default {
-  name: 'Resizable',
-}
+  name: "Resizable"
+};
 </script>

package/dist/runtime/components/Edit/Resizable/index.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    id: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: ((props: {}) => any) | undefined;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};