cosmik.network
+8
-18
src/webapp/app/bookmarklet/page.tsx
+8
-18
src/webapp/app/bookmarklet/page.tsx
···
10
10
Alert,
11
11
Box,
12
12
Group,
13
-
Anchor,
14
13
} from '@mantine/core';
15
14
import { useState } from 'react';
16
15
import { BiInfoCircle } from 'react-icons/bi';
17
-
import { RiDragDropLine } from 'react-icons/ri';
18
16
19
17
export default function BookmarkletPage() {
20
18
const [copied, setCopied] = useState(false);
···
35
33
} catch (err) {
36
34
console.error('Failed to copy bookmarklet:', err);
37
35
}
36
+
};
37
+
38
+
// Create the bookmarklet link using dangerouslySetInnerHTML to bypass React's security check
39
+
const createBookmarkletLink = () => {
40
+
return {
41
+
__html: `<a href="${bookmarkletCode}" style="text-decoration: none; padding: 8px 16px; background-color: var(--mantine-color-blue-6); color: white; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px;"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19 7h-3V6a4 4 0 0 0-8 0v1H5a1 1 0 0 0-1 1v11a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V8a1 1 0 0 0-1-1zM10 6a2 2 0 0 1 4 0v1h-4V6zm8 13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V9h2v1a1 1 0 0 0 2 0V9h4v1a1 1 0 0 0 2 0V9h2v10z"/></svg>Open in Semble</a>`
42
+
};
38
43
};
39
44
40
45
return (
···
70
75
Drag this button directly to your browser's bookmarks bar:
71
76
</Text>
72
77
<Group>
73
-
<Anchor
74
-
href={bookmarkletCode}
75
-
style={{
76
-
textDecoration: 'none',
77
-
padding: '8px 16px',
78
-
backgroundColor: 'var(--mantine-color-blue-6)',
79
-
color: 'white',
80
-
borderRadius: '4px',
81
-
display: 'inline-flex',
82
-
alignItems: 'center',
83
-
gap: '8px',
84
-
}}
85
-
>
86
-
<RiDragDropLine size={16} />
87
-
Open in Semble
88
-
</Anchor>
78
+
<Box dangerouslySetInnerHTML={createBookmarkletLink()} />
89
79
</Group>
90
80
</Stack>
91
81