approx height calculation from note menu

packages/backend/assets/embed.js

@@ -1,88 +0,0 @@
-// @ts-check
-
-/**
- * This embed script is from Mastodon. Thank you, website boy! :)
- *
- * License: AGPLv3, Mastodon gGmbH
- * Original source: https://github.com/mastodon/mastodon/blob/main/public/embed.js
- * Current source: https://codeberg.org/calckey/calckey/src/branch/develop/packages/backend/assets/embed.js
- * From: Eugen Rochko <eugen@zeonfederated.com>
- * Co-authored-by: Rohan Sharma <i.am.lone.survivor@protonmail.com>
- * Co-authored-by: rinsuki <428rinsuki+git@gmail.com>
- * Co-authored-by: Matt Hodges <hodgesmr1@gmail.com>
- * Co-authored-by: Claire <claire.github-309c@sitedethib.com>
- * Co-authored-by: Kainoa Kanter <kainoa@t1c.dev>
-*/
-
-(function () {
-  'use strict';
-
-  /**
-   * @param {() => void} loaded
-   */
-  const ready = function (loaded) {
-    if (document.readyState === 'complete') {
-      loaded();
-    } else {
-      document.addEventListener('readystatechange', function () {
-        if (document.readyState === 'complete') {
-          loaded();
-        }
-      });
-    }
-  };
-
-  ready(function () {
-    /** @type {Map<number, HTMLIFrameElement>} */
-    const iframes = new Map();
-
-    window.addEventListener('message', function (e) {
-      const data = e.data || {};
-
-      if (typeof data !== 'object' || data.type !== 'setHeight' || !iframes.has(data.id)) {
-        return;
-      }
-
-      const iframe = iframes.get(data.id);
-
-			if (iframe != null) {
-				if ('source' in e && iframe.contentWindow !== e.source) {
-					return;
-				}
-
-				iframe.height = data.height;
-			}
-
-    });
-
-    [].forEach.call(document.querySelectorAll('iframe.embed'), function (iframe) {
-      // select unique id for each iframe
-      let id = 0;
-      let failCount = 0;
-      const idBuffer = new Uint32Array(1);
-      while (id === 0 || iframes.has(id)) {
-        id = crypto.getRandomValues(idBuffer)[0];
-        failCount++;
-        if (failCount > 100) {
-          // give up and assign (easily guessable) unique number if getRandomValues is broken or no luck
-          id = -(iframes.size + 1);
-          break;
-        }
-      }
-
-      iframes.set(id, iframe);
-
-      iframe.scrolling = 'no';
-      iframe.style.overflow = 'hidden';
-
-      iframe.onload = function () {
-        iframe.contentWindow.postMessage({
-          type: 'setHeight',
-          id: id,
-        }, '*');
-      };
-
-      iframe.onload();
-    });
-  });
-})();

packages/client/src/components/MkEmbedDialog.vue

@@ -42,13 +42,16 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
 const props = withDefaults(
 	defineProps<{
 		id: string;
+		title?: string;
+		height?: number;
 	}>(),
 	{
-		id: "No ID provided!",
+		title: "Calckey",
+		height: 600,
 	}
 );
 
-const codeblock = `<iframe src="https://${host}/notes/${props.id}/embed" class="embed" style="max-width: 100%; border: 0" width="400" height="600" allowfullscreen="allowfullscreen"></iframe><scr` + `ipt src="https://${host}/static-assets/embed.js" async="async"></scr` + `ipt>`;
+const codeblock = `<iframe src="https://${host}/notes/${props.id}/embed" class="embed" style="max-width: 100%; border: 0" width="400" height="${props.height}" title=${props.title} allowfullscreen="allowfullscreen"></iframe>;`
 </script>
 
 <style lang="scss" module>

packages/client/src/os.ts

@@ -926,7 +926,11 @@ export function post(props: Record<string, any> = {}) {
 	});
 }
 
-export function showEmbedDialog(props: {id: string}) {
+export function showEmbedDialog(props: {
+	id: string;
+	name: string;
+	height: number;
+}) {
 	return new Promise(() => {
 		popup(
 			defineAsyncComponent({

packages/client/src/pages/note.embed.vue

@@ -3,7 +3,7 @@
 		<div class="fcuexfpr">
 			<div v-if="appearNote" class="note">
 				<div class="main _gap">
-					<div class="note _gap" ref="noteContainer">
+					<div class="note _gap">
 						<XNoteDetailed
 							:key="appearNote.id"
 							v-model:note="appearNote"
@@ -30,7 +30,6 @@ const props = defineProps<{
 	noteId: string;
 }>();
 
-const noteContainer = $ref<HTMLElement>();
 let note = $ref<null | misskey.entities.Note>();
 let error = $ref();
 let isRenote = $ref(false);
@@ -100,16 +99,6 @@ definePageMetadata(
 			: null
 	)
 );
-
-onMounted(() => {
-	window.parent.postMessage(
-		{
-			type: "setHeight",
-			height: noteContainer?.clientHeight,
-		},
-		"*"
-	);
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/scripts/get-note-menu.ts

@@ -111,7 +111,15 @@ export function getNoteMenu(props: {
 	function embed(): void {
 		os.showEmbedDialog({
 			id: appearNote.id,
-		})
+			name: `Calckey post from ${appearNote.user.name}`,
+			height: appearNote.text
+				? Math.round(
+						Math.ceil(appearNote.text.length / Math.floor(300 / (14 * 0.6))) *
+							14 *
+							1.2,
+				  ) + 200
+				: 500,
+		});
 	}
 
 	function copyOriginal(): void {