fix: youtube external link

tldraw/apps/tldraw-logseq/src/components/ContextBar/contextBarActionFactory.tsx

@@ -142,7 +142,18 @@ const YoutubeLinkAction = observer(() => {
     shape.onYoutubeLinkChange(e.target.value)
   }, [])
 
-  return <TextInput className="tl-youtube-link" value={`${shape.props.url}`} onChange={handleChange} />
+  return (
+    <span className="flex gap-3">
+      <TextInput className="tl-youtube-link" value={`${shape.props.url}`} onChange={handleChange} />
+      <button
+        className="tl-contextbar-button"
+        type="button"
+        onClick={() => window.logseq?.api?.open_external_link?.(shape.props.url)}
+      >
+        <TablerIcon name="external-link" />
+      </button>
+    </span>
+  )
 })
 
 contextBarActionMapping.set('LogseqPortalViewMode', LogseqPortalViewModeAction)

tldraw/apps/tldraw-logseq/src/lib/shapes/YouTubeShape.tsx

@@ -63,12 +63,10 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
         {...events}
       >
         <div
+          className="rounded-lg w-full h-full relative overflow-hidden shadow-xl"
           style={{
-            width: '100%',
-            height: '100%',
             pointerEvents: isEditing ? 'all' : 'none',
             userSelect: 'none',
-            position: 'relative',
           }}
         >
           {this.embedId ? (
@@ -81,14 +79,7 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
               }}
             >
               <iframe
-                style={{
-                  left: 0,
-                  top: 0,
-                  height: '100%',
-                  width: '100%',
-                  position: 'absolute',
-                  margin: 0,
-                }}
+                className="absolute inset-0 w-full h-full m-0"
                 width="853"
                 height="480"
                 src={`https://www.youtube.com/embed/${this.embedId}`}
@@ -100,16 +91,9 @@ export class YouTubeShape extends TLBoxShape<YouTubeShapeProps> {
             </div>
           ) : (
             <div
+              className="w-full h-full flex items-center justify-center p-4"
               style={{
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                overflow: 'hidden',
-                justifyContent: 'center',
-                backgroundColor: '#ffffff',
-                border: '1px solid rgb(52, 52, 52)',
-                padding: 16,
+                backgroundColor: 'var(--ls-primary-background-color)',
               }}
             >
               <svg

tldraw/apps/tldraw-logseq/src/lib/shapes/index.ts

@@ -42,7 +42,6 @@ export * from './PolygonShape'
 export * from './TextShape'
 export * from './YouTubeShape'
 
-
 export const shapes: TLReactShapeConstructor<Shape>[] = [
   BoxShape,
   DotShape,
@@ -66,6 +65,7 @@ declare global {
         make_asset_url?: (url: string) => string
         edit_block?: (uuid: string) => void
         set_blocks_id?: (uuids: string[]) => void
+        open_external_link?: (url: string) => void
       }
     }
   }