feat: show lock on embed while scrolling (#38)

* feat: add clickable hint option set to false for embeddables

* fix: increase debounce time for scroll end event in CustomEmbeddableRenderer

* feat: add lock indicator for scrolling in CustomEmbeddableRenderer

- Introduced a LockIndicator component that displays a lock icon when the user is scrolling.
- Updated styles to enhance the visibility and positioning of the lock icon.
- Implemented event listeners to manage the visibility of the lock icon based on scroll state.

* feat: enhance LockIndicator with countdown timer

- Added a countdown timer to the LockIndicator component that activates when scrolling stops.
- Updated styles for the lock icon and countdown timer to improve visibility and positioning.
- Implemented polling and event listeners to manage the countdown state effectively.

* refactor: simplify LockIndicator by removing countdown timer

- Removed the countdown timer functionality from the LockIndicator component, streamlining its behavior to only show the lock icon when scrolling.
- Updated styles to reflect the removal of the countdown timer and adjusted the lock icon's size for better integration.
- Cleaned up the useEffect hook to eliminate unnecessary state management related to the countdown.

Author: atyrode

src/frontend/src/CustomEmbeddableRenderer.scss

@@ -9,12 +9,28 @@
         position: absolute;
         top: -30px;
         pointer-events: none;
+        display: flex;
+        align-items: center;
 
         &__text {
             font-family: 'Roboto', sans-serif;
             color: #d3d3d3;
             pointer-events: none;
             font-size: 18px;
+            margin-right: 8px;
+        }
+    }
+    
+    &__lock-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #d3d3d3;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+        
+        &.visible {
+            opacity: 1;
         }
     }
 
@@ -31,4 +47,4 @@
             border-bottom-right-radius: var(--embeddable-radius);
         }
     }
-}
+}

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { Lock } from 'lucide-react';
 import { debounce } from './utils/debounce';
 import type { NonDeleted, ExcalidrawEmbeddableElement } from '@atyrode/excalidraw/element/types';
 import type { AppState } from '@atyrode/excalidraw/types';
@@ -65,6 +66,7 @@ export const renderCustomEmbeddable = (
       <div className="custom-embed">
         <div className="custom-embed__title-bar">
           <div className="custom-embed__title-bar__text">{title}</div>
+          <LockIndicator />
         </div>
         <div className="custom-embed__content">
           {content}
@@ -78,6 +80,7 @@ export const renderCustomEmbeddable = (
       <div className="custom-embed">
         <div className="custom-embed__title-bar">
           <div className="custom-embed__title-bar__text">{title}</div>
+          <LockIndicator />
         </div>
         <div className="custom-embed__content">
           <iframe className="custom-embed__content--iframe" src={element.link} />
@@ -87,14 +90,44 @@ export const renderCustomEmbeddable = (
   }
 };
 
+// Lock icon component that shows when scrolling
+const LockIndicator = () => {
+  const [visible, setVisible] = useState(false);
+  
+  useEffect(() => {
+    const handleScrollStateChange = (event: CustomEvent<{ isScrolling: boolean }>) => {
+      setVisible(event.detail.isScrolling);
+    };
+    
+    // Add event listener for scroll state changes
+    document.addEventListener('scrollStateChange', handleScrollStateChange as EventListener);
+    
+    // Clean up
+    return () => {
+      document.removeEventListener('scrollStateChange', handleScrollStateChange as EventListener);
+    };
+  }, []);
+  
+  return (
+    <div className={`custom-embed__lock-icon ${visible ? 'visible' : ''}`}>
+      <Lock size={16} />
+    </div>
+  );
+};
+
 // Track scrolling state
 let isScrolling = false;
+// Create a custom event for scrolling state changes
+const scrollStateChangeEvent = new CustomEvent('scrollStateChange', { detail: { isScrolling: false } });
 
 export const lockEmbeddables = () => {
   if (!isScrolling) {
     isScrolling = true;
     // Set pointer-events to none during scrolling
     document.documentElement.style.setProperty('--embeddable-pointer-events', 'none');
+    // Dispatch event with updated scrolling state
+    scrollStateChangeEvent.detail.isScrolling = true;
+    document.dispatchEvent(scrollStateChangeEvent);
   }
 
   // Reset the pointer-events after scrolling stops
@@ -106,4 +139,7 @@ const debouncedScrollEnd = debounce(() => {
   isScrolling = false;
   // Set pointer-events back to all when not scrolling
   document.documentElement.style.setProperty('--embeddable-pointer-events', 'all');
-}, 150); // 150ms debounce seems reasonable, but can be adjusted as needed
+  // Dispatch event with updated scrolling state
+  scrollStateChangeEvent.detail.isScrolling = false;
+  document.dispatchEvent(scrollStateChangeEvent);
+}, 350);

src/frontend/src/lib/ExcalidrawElementFactory.ts

@@ -121,7 +121,8 @@ export class ExcalidrawElementFactory {
       type: "embeddable",
       link: options.link,
       customData: {
-        showHyperlinkIcon: false
+        showHyperlinkIcon: false,
+        showClickableHint: false
       }
     };
   }