-
-
-
+ // Custom header content with URL info
+ const headerContent = url ? (
+
+
})
{
+ (e.target as HTMLImageElement).style.display = 'none'
+ }}
+ />
+
+ {getDisplayTitle(url)}
+
+ ) : (
+
Embed
)
- // For minimized state, show URL and all controls
- if (shape.props.url && shape.props.isMinimized) {
+ // For empty state - URL input form
+ if (!url) {
return (
-
-
+
{
+ this.editor.updateShape({
+ id: shape.id,
+ type: 'Embed',
+ props: {
+ ...shape.props,
+ tags: newTags,
+ }
+ })
}}
+ tagsEditable={true}
>
-
{
- // Hide broken favicon
- (e.target as HTMLImageElement).style.display = 'none'
- }}
- />
-
- {getDisplayTitle(shape.props.url)}
-
-
- {shape.props.url}
-
-
- {controls(shape.props.url)}
-
-
- )
- }
-
- // For empty state
- if (!shape.props.url) {
- return (
-
- {controls("")}
-
{
- e.preventDefault()
- e.stopPropagation()
- const input = e.currentTarget.querySelector('input')
- input?.focus()
- }}
- >
-
-
-
+ onClick={(e) => e.stopPropagation()}
+ >
+
setInputUrl(e.target.value)}
+ placeholder="Enter URL to embed..."
+ style={{
+ width: "100%",
+ padding: "15px",
+ border: "1px solid #ccc",
+ borderRadius: "4px",
+ fontSize: "16px",
+ touchAction: 'manipulation',
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ handleSubmit(e)
+ }
+ }}
+ onPointerDown={(e) => {
+ e.stopPropagation()
+ e.currentTarget.focus()
+ }}
+ />
+ {error && (
+
{error}
+ )}
+
+
+
+
)
}
// For medium.com and twitter profile views
- if (shape.props.url?.includes("medium.com") ||
- (shape.props.url && shape.props.url.match(/(?:twitter\.com|x\.com)\/[^\/]+$/))) {
+ if (url.includes("medium.com") ||
+ (url && url.match(/(?:twitter\.com|x\.com)\/[^\/]+$/))) {
return (
-