mirror of
https://github.com/rowboatlabs/rowboat.git
synced 2026-04-25 00:16:29 +02:00
cleanup
This commit is contained in:
parent
5dc592bfab
commit
f58e61ff4a
2 changed files with 5 additions and 110 deletions
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue