This commit is contained in:
Arjun 2026-04-16 00:44:54 +05:30
parent 5dc592bfab
commit f58e61ff4a
2 changed files with 5 additions and 110 deletions

View file

@ -1,6 +1,6 @@
import { mergeAttributes, Node } from '@tiptap/react'
import { ReactNodeViewRenderer, NodeViewWrapper } from '@tiptap/react'
import { ExternalLink, Globe, X } from 'lucide-react'
import { Globe, X } from 'lucide-react'
import { blocks } from '@x/shared'
import { useEffect, useRef, useState } from 'react'
@ -24,18 +24,6 @@ const DEFAULT_IFRAME_ALLOW = [
'microphone',
].join('; ')
function getIframeMeta(url: string): { host: string; path: string } | null {
try {
const parsed = new URL(url)
return {
host: parsed.host,
path: parsed.pathname === '/' ? '' : parsed.pathname,
}
} catch {
return null
}
}
function getIframeHeightCacheKey(url: string): string {
return `${IFRAME_HEIGHT_CACHE_PREFIX}${url}`
}
@ -94,8 +82,8 @@ function IframeBlockView({ node, deleteNode }: { node: { attrs: Record<string, u
)
}
const meta = getIframeMeta(config.url)
const title = config.title || meta?.host || 'Embedded page'
const visibleTitle = config.title?.trim() || ''
const title = visibleTitle || 'Embedded page'
const allow = config.allow || DEFAULT_IFRAME_ALLOW
const initialHeight = config.height ?? DEFAULT_IFRAME_HEIGHT
const [frameHeight, setFrameHeight] = useState(() => readCachedIframeHeight(config.url, initialHeight))
@ -177,32 +165,7 @@ function IframeBlockView({ node, deleteNode }: { node: { attrs: Record<string, u
>
<X size={14} />
</button>
<div className="iframe-block-header">
<div className="iframe-block-header-main">
<div className="iframe-block-badge">
<Globe size={13} />
Iframe
</div>
<div className="iframe-block-title-row">
<div className="iframe-block-title">{title}</div>
{meta && (
<div className="iframe-block-host">
{meta.host}
{meta.path}
</div>
)}
</div>
</div>
<a
href={config.url}
target="_blank"
rel="noopener noreferrer"
className="iframe-block-open"
>
<ExternalLink size={13} />
Open
</a>
</div>
{visibleTitle && <div className="iframe-block-title">{visibleTitle}</div>}
<div
className={`iframe-block-frame-shell${frameReady ? ' iframe-block-frame-shell-ready' : ' iframe-block-frame-shell-loading'}`}
style={{ height: frameHeight }}
@ -233,9 +196,6 @@ function IframeBlockView({ node, deleteNode }: { node: { attrs: Record<string, u
sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-forms allow-modals allow-downloads"
/>
</div>
{config.caption && (
<div className="iframe-block-caption">{config.caption}</div>
)}
</div>
</NodeViewWrapper>
)

View file

@ -954,73 +954,14 @@
.tiptap-editor .ProseMirror .iframe-block-card {
display: flex;
flex-direction: column;
gap: 10px;
}
.tiptap-editor .ProseMirror .iframe-block-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding-right: 30px;
}
.tiptap-editor .ProseMirror .iframe-block-header-main {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
}
.tiptap-editor .ProseMirror .iframe-block-badge {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
padding: 4px 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--primary) 12%, transparent);
color: color-mix(in srgb, var(--foreground) 78%, transparent);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
}
.tiptap-editor .ProseMirror .iframe-block-title-row {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tiptap-editor .ProseMirror .iframe-block-title {
font-size: 15px;
font-weight: 600;
color: var(--foreground);
}
.tiptap-editor .ProseMirror .iframe-block-host {
font-size: 12px;
color: color-mix(in srgb, var(--foreground) 55%, transparent);
word-break: break-all;
}
.tiptap-editor .ProseMirror .iframe-block-open {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: 8px;
background: color-mix(in srgb, var(--foreground) 6%, transparent);
color: var(--foreground);
font-size: 12px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
.tiptap-editor .ProseMirror .iframe-block-open:hover {
background: color-mix(in srgb, var(--foreground) 10%, transparent);
padding-right: 28px;
}
.tiptap-editor .ProseMirror .iframe-block-frame-shell {
@ -1089,12 +1030,6 @@
opacity: 0;
}
.tiptap-editor .ProseMirror .iframe-block-caption {
font-size: 12px;
color: color-mix(in srgb, var(--foreground) 55%, transparent);
text-align: center;
}
.tiptap-editor .ProseMirror .iframe-block-error {
display: flex;
align-items: center;