From 8f94ee3a6f90a0651b6128c6a56bd9308d1fd1a4 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
Date: Thu, 12 Dec 2024 20:45:37 -0500
Subject: [PATCH] remove markdown element from menu until fixed. Added copy
 link & open in new tab options in embedded element URL

---
 src/App.tsx                   |   4 +-
 src/routes/Board.tsx          |   4 +-
 src/shapes/EmbedShapeUtil.tsx | 123 ++++++++++++++++++++++------------
 src/ui/CustomContextMenu.tsx  |   4 +-
 src/ui/overrides.tsx          |  16 ++---
 5 files changed, 94 insertions(+), 57 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f083919..c219f0e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,9 +28,9 @@ const customShapeUtils = [
   ChatBoxShape,
   VideoChatShape,
   EmbedShape,
-  MarkdownShape,
+  //MarkdownShape,
 ]
-const customTools = [ChatBoxTool, VideoChatTool, EmbedTool, MarkdownTool]
+const customTools = [ChatBoxTool, VideoChatTool, EmbedTool] //, MarkdownTool]
 
 const callObject = Daily.createCallObject()
 
diff --git a/src/routes/Board.tsx b/src/routes/Board.tsx
index 503e42d..10049c6 100644
--- a/src/routes/Board.tsx
+++ b/src/routes/Board.tsx
@@ -21,8 +21,8 @@ import { handleInitialPageLoad } from "@/utils/handleInitialPageLoad"
 // Default to production URL if env var isn't available
 export const WORKER_URL = "https://jeffemmett-canvas.jeffemmett.workers.dev"
 
-const shapeUtils = [ChatBoxShape, VideoChatShape, EmbedShape, MarkdownShape]
-const tools = [ChatBoxTool, VideoChatTool, EmbedTool, MarkdownTool] // Array of tools
+const shapeUtils = [ChatBoxShape, VideoChatShape, EmbedShape] //, MarkdownShape]
+const tools = [ChatBoxTool, VideoChatTool, EmbedTool] //, MarkdownTool]
 
 export function Board() {
   const { slug } = useParams<{ slug: string }>()
diff --git a/src/shapes/EmbedShapeUtil.tsx b/src/shapes/EmbedShapeUtil.tsx
index ca1c7d2..14cc4cf 100644
--- a/src/shapes/EmbedShapeUtil.tsx
+++ b/src/shapes/EmbedShapeUtil.tsx
@@ -96,6 +96,7 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
   component(shape: IEmbedShape) {
     const [inputUrl, setInputUrl] = useState(shape.props.url || "")
     const [error, setError] = useState("")
+    const [copyStatus, setCopyStatus] = useState(false)
 
     const handleSubmit = useCallback(
       (e: React.FormEvent) => {
@@ -220,7 +221,7 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
           <iframe
             src={transformUrl(shape.props.url)}
             width={shape.props.w}
-            height={shape.props.h - 40}
+            height={shape.props.h}
             style={{ border: "none" }}
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
             allowFullScreen
@@ -228,53 +229,89 @@ export class EmbedShape extends BaseBoxShapeUtil<IEmbedShape> {
             referrerPolicy="no-referrer"
           />
         </div>
-        <a
-          href={shape.props.url}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={(e) => {
-            console.log("Link clicked, URL:", shape.props.url)
-            e.preventDefault()
-            e.stopPropagation()
-            window.top?.open(
-              shape.props.url || "",
-              "_blank",
-              "noopener,noreferrer",
-            )
-          }}
-          onPointerDown={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-          onMouseDown={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-          onTouchStart={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
+        <div
           style={{
-            display: "block",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
             padding: "8px",
-            textAlign: "center",
-            color: "#1976d2",
-            textDecoration: "none",
-            fontSize: "12px",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            cursor: "pointer",
-            touchAction: "manipulation",
-            WebkitTapHighlightColor: "rgba(0,0,0,0)",
-            userSelect: "none",
             minHeight: "24px",
-            pointerEvents: "all",
-            zIndex: 999999,
+            fontSize: "12px",
+            position: "absolute",
+            bottom: "15px",
+            left: "15px",
+            right: "15px",
+            backgroundColor: "rgba(255, 255, 255, 0.9)",
+            borderRadius: "4px",
           }}
         >
-          {shape.props.url} ↗
-        </a>
+          <span
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              flex: 1,
+              marginRight: "8px",
+              color: "#666",
+            }}
+          >
+            {shape.props.url}
+          </span>
+          <div
+            style={{
+              display: "flex",
+              gap: "8px",
+              pointerEvents: "all",
+            }}
+          >
+            <button
+              onClick={async (e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                try {
+                  await navigator.clipboard.writeText(shape.props.url || "")
+                  setCopyStatus(true)
+                  setTimeout(() => setCopyStatus(false), 2000)
+                } catch (err) {
+                  console.error("Failed to copy:", err)
+                }
+              }}
+              style={{
+                border: "none",
+                background: "transparent",
+                color: "#1976d2",
+                cursor: "pointer",
+                padding: "0 4px",
+                fontSize: "12px",
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              {copyStatus ? "Copied" : "Copy link"}
+            </button>
+            <button
+              onClick={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                window.top?.open(
+                  shape.props.url || "",
+                  "_blank",
+                  "noopener,noreferrer",
+                )
+              }}
+              style={{
+                border: "none",
+                background: "transparent",
+                color: "#1976d2",
+                cursor: "pointer",
+                padding: "0 4px",
+                fontSize: "12px",
+              }}
+              onPointerDown={(e) => e.stopPropagation()}
+            >
+              Open in new tab ↗
+            </button>
+          </div>
+        </div>
       </div>
     )
   }
diff --git a/src/ui/CustomContextMenu.tsx b/src/ui/CustomContextMenu.tsx
index 67374c4..98f4e39 100644
--- a/src/ui/CustomContextMenu.tsx
+++ b/src/ui/CustomContextMenu.tsx
@@ -130,7 +130,7 @@ export function CustomContextMenu(props: TLUiContextMenuProps) {
             editor.setCurrentTool("Embed")
           }}
         />
-        <TldrawUiMenuItem
+        {/* <TldrawUiMenuItem
           id="markdown"
           label="Create Markdown"
           icon="markdown"
@@ -139,7 +139,7 @@ export function CustomContextMenu(props: TLUiContextMenuProps) {
           onSelect={() => {
             editor.setCurrentTool("Markdown")
           }}
-        />
+        /> */}
       </TldrawUiMenuGroup>
 
       {/* Frame Controls */}
diff --git a/src/ui/overrides.tsx b/src/ui/overrides.tsx
index babde6a..01c3c8f 100644
--- a/src/ui/overrides.tsx
+++ b/src/ui/overrides.tsx
@@ -36,14 +36,14 @@ export const overrides: TLUiOverrides = {
         readonlyOk: true,
         onSelect: () => editor.setCurrentTool("Embed"),
       },
-      Markdown: {
-        id: "Markdown",
-        icon: "markdown",
-        label: "Markdown",
-        kbd: "alt+m",
-        readonlyOk: true,
-        onSelect: () => editor.setCurrentTool("Markdown"),
-      },
+      // Markdown: {
+      //   id: "Markdown",
+      //   icon: "markdown",
+      //   label: "Markdown",
+      //   kbd: "alt+m",
+      //   readonlyOk: true,
+      //   onSelect: () => editor.setCurrentTool("Markdown"),
+      // },
     }
   },
   actions(editor, actions) {