More work on export

src/components/messages/composition/MessageThreadExport.vue

@@ -4,8 +4,23 @@
     :class="isIncoming ? 'messageIn-thread' : 'messageOut-thread'"
     ref="root"
     v-bind="{ ...$props, ...$attrs }"
+    @vue:mounted="
+      (item) => {
+        emits('componentMounted', item);
+      }
+    "
   >
-    <component :is="textComponent" v-bind="{ ...$props, ...$attrs }" :originalEvent="event" ref="exportedEvent" />
+    <component
+      :is="textComponent"
+      v-bind="{ ...$props, ...$attrs }"
+      :originalEvent="event"
+      ref="exportedEvent"
+      @vue:mounted="
+        (item) => {
+          emits('componentMounted', item);
+        }
+      "
+    />
     <component
       v-for="item in items"
       :is="$props.componentFn(item.event, true)"
@@ -13,6 +28,11 @@
       :originalEvent="item.event"
       :key="item.event.getId()"
       ref="exportedEvent"
+      @vue:mounted="
+        (item) => {
+          emits('componentMounted', item);
+        }
+      "
     />
   </component>
 </template>
@@ -24,7 +44,7 @@ import MessageIncomingText from "../MessageIncomingText.vue";
 import MessageOutgoingText from "../MessageOutgoingText.vue";
 import { MessageEmits, MessageProps, useMessage } from "./useMessage";
 import util from "@/plugins/utils";
-import { computed, inject, onBeforeUnmount, ref, Ref, useTemplateRef, watch } from "vue";
+import { computed, inject, onBeforeUnmount, ref, Ref, watch, useAttrs } from "vue";
 import { EventAttachment } from "../../../models/eventAttachment";
 import { useI18n } from "vue-i18n";
 import { MatrixEvent, MatrixEventEvent } from "matrix-js-sdk";
@@ -33,12 +53,21 @@ const { t } = useI18n();
 const $matrix: any = inject("globalMatrix");
 
 const emits = defineEmits<
-  MessageEmits & { (event: "layout-change", value: { element: Element | undefined; action: () => void }): void }
+  MessageEmits & { (event: "layout-change", value: { element: Element | undefined; action: () => void }): void } & {
+    (event: "componentMounted", value: any): void;
+  }
 >();
 
 const items: Ref<EventAttachment[]> = ref([]);
 const props = defineProps<MessageProps>();
 
+let beforeExportPromiseResolve: ((value: boolean) => void) | undefined = undefined;
+let beforeExportPromiseReject: ((value: boolean) => void) | undefined = undefined;
+const beforeExportPromise = new Promise((resolve, reject) => {
+  beforeExportPromiseResolve = resolve;
+  beforeExportPromiseReject = reject;
+});
+
 const processThread = () => {
   if (!event.value?.isRedacted()) {
     _processThread();
@@ -96,15 +125,22 @@ const _processThread = () => {
   const eventItems = props.timelineSet.relations
     .getAllChildEventsForEvent(event.value?.getId() ?? "")
     .filter((e: MatrixEvent) => !e.isRedacted() && util.downloadableTypes().includes(e.getContent().msgtype));
-
-    console.log("EVENT ITEMS", eventItems);
   items.value = eventItems.map((e: MatrixEvent) => {
     let ea = $matrix.attachmentManager.getEventAttachment(e);
-    ea.loadThumbnail();
     return ea;
   });
-  console.log("MAPPED", items.value);
+  if (beforeExportPromiseResolve) {
+    beforeExportPromiseResolve(true);
+  }
 };
+
+const beforeExport = () => {
+  return beforeExportPromise;
+};
+
+defineExpose({
+  beforeExport,
+});
 </script>
 <style lang="scss">
 @use "@/assets/css/chat.scss" as *;