+ {isAuthenticated && user?.picture && (
+ void;
+ user: any;
+ setUser: (user: any) => void;
+ accessToken: string | null;
+ setAccessToken: (token: string | null) => void;
+ logout: () => void;
+}
+
+const GoogleAuthContext = createContext(undefined);
+
+export function GoogleAuthProvider({ children }: { children: ReactNode }) {
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+ const [user, setUser] = useState(null);
+ const [accessToken, setAccessToken] = useState(null);
+
+ const logout = () => {
+ setIsAuthenticated(false);
+ setUser(null);
+ setAccessToken(null);
+ };
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export function useGoogleAuth() {
+ const context = useContext(GoogleAuthContext);
+ if (context === undefined) {
+ throw new Error('useGoogleAuth must be used within a GoogleAuthProvider');
+ }
+ return context;
+}
\ No newline at end of file
diff --git a/src/pages/auth/callback.tsx b/src/pages/auth/callback.tsx
new file mode 100644
index 0000000..3966e73
--- /dev/null
+++ b/src/pages/auth/callback.tsx
@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+
+export default function AuthCallback() {
+ useEffect(() => {
+ console.log('🎯 Callback page loaded');
+
+ const hashParams = new URLSearchParams(window.location.hash.replace('#', ''));
+ const queryParams = new URLSearchParams(window.location.search);
+
+ console.log('📝 URL params:', {
+ hash: window.location.hash,
+ search: window.location.search
+ });
+
+ const state = hashParams.get('state') || queryParams.get('state');
+ const accessToken = hashParams.get('access_token') || queryParams.get('access_token');
+ const docId = state ? decodeURIComponent(state) : null;
+
+ console.log('🔑 Extracted values:', {
+ state,
+ accessToken: accessToken ? 'present' : 'missing',
+ docId
+ });
+
+ if (window.opener && docId) {
+ console.log('📤 Sending message to opener');
+ window.opener.postMessage({
+ type: 'auth-complete',
+ docId,
+ accessToken
+ }, window.location.origin);
+ console.log('🚪 Closing callback window');
+ window.close();
+ } else {
+ console.warn('⚠️ Missing window.opener or docId');
+ }
+ }, []);
+
+ return {
getDefaultProps(): IEmbedShape['props'] {
return {
+ w: 400,
+ h: 300,
url: null,
- w: 640,
- h: 480,
- };
+ }
}
indicator(shape: IEmbedShape) {
- return (
-
-
- );
+ return ({
+ id: shape.id,
+ type: 'Embed',
+ props: { ...shape.props, url: embedUrl }
+ });
+ // Clean up
+ window.removeEventListener('message', messageHandler);
+ }
+ };
+
+ // Add message listener
+ window.addEventListener('message', messageHandler);
+
+ // Open auth window with additional parameters
+ const authWindow = window.open(
+ `https://accounts.google.com/o/oauth2/v2/auth?` +
+ `client_id=${import.meta.env.VITE_GOOGLE_CLIENT_ID}` +
+ `&redirect_uri=${window.location.origin}/auth/callback` +
+ `&response_type=token` +
+ `&scope=https://www.googleapis.com/auth/drive.readonly` +
+ `&prompt=consent` +
+ `&access_type=online` +
+ `&state=${encodeURIComponent(docId)}`,
+ 'googleAuth',
+ 'width=500,height=600'
+ );
+
+ if (!authWindow) {
+ setError('Popup blocked. Please allow popups and try again.');
+ return;
+ }
+
+ // Simplified window check
+ const checkWindow = setInterval(() => {
+ try {
+ if (!authWindow || authWindow.closed) {
+ clearInterval(checkWindow);
+ window.removeEventListener('message', messageHandler);
+ }
+ } catch (e) {
+ // Ignore COOP errors
+ }
+ }, 500);
+
+ // Cleanup after 5 minutes
+ setTimeout(() => {
+ clearInterval(checkWindow);
+ window.removeEventListener('message', messageHandler);
+ }, 300000);
+
+ }, []);
const handleSubmit = useCallback((e: React.FormEvent) => {
e.preventDefault();
- let completedUrl = inputUrl.startsWith('http://') || inputUrl.startsWith('https://') ? inputUrl : `https://${inputUrl}`;
+ setError('');
- // Handle YouTube links
- if (completedUrl.includes('youtube.com') || completedUrl.includes('youtu.be')) {
- const videoId = extractYouTubeVideoId(completedUrl);
- if (videoId) {
- completedUrl = `https://www.youtube.com/embed/${videoId}`;
+ try {
+ // Check if it's a Google Docs URL
+ if (inputUrl.includes('docs.google.com')) {
+ const docId = inputUrl.match(/\/d\/([a-zA-Z0-9-_]+)/)?.[1];
+ if (!docId) {
+ setError('Invalid Google Docs URL');
+ return;
+ }
+
+ if (!isAuthenticated) {
+ handleGoogleAuth(docId);
+ return;
+ }
+
+ // If already authenticated, use preview URL
+ const embedUrl = `https://docs.google.com/document/d/${docId}/preview`;
+ this.editor.updateShape({
+ id: shape.id,
+ type: 'Embed',
+ props: { ...shape.props, url: embedUrl }
+ });
} else {
- setError('Invalid YouTube URL');
- return;
+ // For non-Google URLs
+ this.editor.updateShape({
+ id: shape.id,
+ type: 'Embed',
+ props: { ...shape.props, url: inputUrl }
+ });
}
+ } catch (err) {
+ setError('Error processing URL');
+ console.error(err);
}
-
- // Handle Google Docs links
- if (completedUrl.includes('docs.google.com')) {
- const docId = completedUrl.match(/\/d\/([a-zA-Z0-9-_]+)/)?.[1];
- if (docId) {
- completedUrl = `https://docs.google.com/document/d/${docId}/preview`;
- } else {
- setError('Invalid Google Docs URL');
- return;
- }
- }
-
- this.editor.updateShape({ id: shape.id, type: 'Embed', props: { ...shape.props, url: completedUrl } });
-
- // Check if the URL is valid
- const isValidUrl = completedUrl.match(/(^\w+:|^)\/\//);
- if (!isValidUrl) {
- setError('Invalid website URL');
- } else {
- setError('');
- }
- }, [inputUrl]);
-
- const extractYouTubeVideoId = (url: string): string | null => {
- const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
- const match = url.match(regExp);
- return (match && match[2].length === 11) ? match[2] : null;
- };
-
- const wrapperStyle = {
- width: `${shape.props.w}px`,
- height: `${shape.props.h}px`,
- padding: '15px',
- boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
- backgroundColor: '#F0F0F0',
- borderRadius: '4px',
- };
-
- const contentStyle = {
- pointerEvents: 'all' as const,
- width: '100%',
- height: '100%',
- border: '1px solid #D3D3D3',
- backgroundColor: '#FFFFFF',
- display: 'flex',
- justifyContent: 'center',
- alignItems: 'center',
- overflow: 'hidden',
- };
+ }, [inputUrl, isAuthenticated]);
if (!shape.props.url) {
return (
-
+ 
+
+ )}
Processing authentication...
;
+}
\ No newline at end of file
diff --git a/src/shapes/EmbedShapeUtil.tsx b/src/shapes/EmbedShapeUtil.tsx
index ae404d3..d21966e 100644
--- a/src/shapes/EmbedShapeUtil.tsx
+++ b/src/shapes/EmbedShapeUtil.tsx
@@ -1,5 +1,8 @@
+///
-
document.querySelector('input')?.focus()}>
-
-
+ e.stopPropagation()}
+ >
+