Unreadable Canvas code, jk 😂

2 files changed, 40 insertions, 12 deletions

diff --git a/apps/web/app/(canvas)/lib/createEmbeds.ts b/apps/web/app/(canvas)/lib/createEmbeds.ts
index 0db3c71b..0ac3c7a5 100644
--- a/apps/web/app/(canvas)/lib/createEmbeds.ts
+++ b/apps/web/app/(canvas)/lib/createEmbeds.ts
@@ -96,6 +96,27 @@ function isURL(str: string) {
   }
 }
 
+function formatTextToRatio(text: string) {
+  const totalWidth = text.length;
+  const maxLineWidth = Math.floor(totalWidth / 10);
+
+  const words = text.split(" ");
+  let lines = [];
+  let currentLine = "";
+
+  words.forEach((word) => {
+    if ((currentLine + word).length <= maxLineWidth) {
+      currentLine += (currentLine ? " " : "") + word;
+    } else {
+      lines.push(currentLine);
+      currentLine = word;
+    }
+  });
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+  return {height: (lines.length+1)*18, width: maxLineWidth*10};
+}
 
 export function handleExternalDroppedContent({text, editor}: {text:string, editor: Editor}){
   const position = editor.inputs.shiftKey
@@ -105,17 +126,23 @@ export function handleExternalDroppedContent({text, editor}: {text:string, edito
   if (isURL(text)){
     createEmbedsFromUrl({editor, url: text})
   } else{
+    // editor.createShape({
+    //   type: "text",
+    //   x: position.x - 75,
+    //   y: position.y - 75,
+    //   props: {
+    //     text: text,
+    //     size: "s",
+    //     textAlign: "start",
+    //   },
+    // });
+    const {height, width} =formatTextToRatio(text)
     editor.createShape({
-      type: "text",
-      x: position.x - 75,
-      y: position.y - 75,
-      props: {
-        text: text,
-        size: "s",
-        textAlign: "start",
-      },
+      type: "Textcard",
+      x: position.x - (width/2),
+      y: position.y - (height/2),
+      props: { content:text, extrainfo: "https://chatgpt.com/c/762cd44e-1752-495b-967a-aa3c23c6024a", w: width, h:height },
     });
-
   }
 }
 
diff --git a/apps/web/app/(canvas)/lib/loadSnap.ts b/apps/web/app/(canvas)/lib/loadSnap.ts
index 15aad998..a3d58b72 100644
--- a/apps/web/app/(canvas)/lib/loadSnap.ts
+++ b/apps/web/app/(canvas)/lib/loadSnap.ts
@@ -1,13 +1,14 @@
-import { createTLStore, defaultShapeUtils } from "tldraw";
+import { createTLStore, defaultShapeUtils, loadSnapshot } from "tldraw";
 import { twitterCardUtil } from "../twitterCard";
+import {textCardUtil} from "../textCard"
 export async function loadRemoteSnapshot() {
   const res = await fetch(
     "https://learning-cf.pruthvirajthinks.workers.dev/get/page3",
   );
   const snapshot = JSON.parse(await res.json());
   const newStore = createTLStore({
-    shapeUtils: [...defaultShapeUtils, twitterCardUtil],
+    shapeUtils: [...defaultShapeUtils, twitterCardUtil, textCardUtil],
   });
-  newStore.loadSnapshot(snapshot);
+  loadSnapshot(newStore, snapshot)
   return newStore;
 }
\ No newline at end of file