image caption button

Author: abrehamgezahegn

typescript/examples/vite_basic/src/App.tsx

@@ -88,12 +88,12 @@ const App = () => {
       <div
         style={{
           padding: "20px",
-          maxWidth: "700px",
+          maxWidth: "300px",
+          // background: "oklch(20.5% 0 0)",
           margin: "0 auto",
           color: "oklch(90% 0 0)",
           display: "flex",
           justifyContent: "center",
-          width: "100vw",
         }}
       >
         <div>

typescript/src/renderer/components/blocks/ImageBlockRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useInView } from "react-intersection-observer";
 
 import { useRenderer } from "../../context/RendererContext";
@@ -41,7 +41,9 @@ export const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [hasError, setHasError] = useState<boolean>(false);
   const [showFullCaption, setShowFullCaption] = useState<boolean>(false);
+  const [needsTruncation, setNeedsTruncation] = useState<boolean>(false);
   const { ref, inView } = useInView({ threshold: 0.1, triggerOnce: true });
+  const captionRef = useRef<HTMLDivElement>(null);
 
   const getImageUrl = () => {
     if (imageData?.type === "external") {
@@ -86,6 +88,14 @@ export const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
     };
   }, [inView, imageUrl, resolveImageUrl]);
 
+  useEffect(() => {
+    if (captionRef.current && imageData?.caption && imageData.caption.length > 0) {
+      const element = captionRef.current;
+      const isOverflowing = element.scrollHeight > element.clientHeight;
+      setNeedsTruncation(isOverflowing);
+    }
+  }, [imageData?.caption]);
+
   return (
     <div
       {...props}
@@ -126,16 +136,30 @@ export const ImageBlockRenderer: React.FC<ImageBlockRendererProps> = ({
             <div className="notranslate">
               <figcaption className="notion-image-caption">
                 <div
+                  ref={captionRef}
                   className={`caption-content ${!showFullCaption ? "caption-truncated" : "caption-expanded"}`}
                 >
                   <RichTextRenderer richText={imageData.caption} />
                 </div>
-                <button
-                  className="caption-toggle-btn"
-                  onClick={() => setShowFullCaption(!showFullCaption)}
-                >
-                  {showFullCaption ? "Show less" : "Show  more"}
-                </button>
+                {needsTruncation && (
+                  <button
+                    className="caption-toggle-btn"
+                    onClick={() => setShowFullCaption(!showFullCaption)}
+                  >
+                    <span className="btn-text">
+                      {showFullCaption ? "Show less" : "Show more"}
+                    </span>
+                    <svg 
+                      className={`btn-icon ${showFullCaption ? 'rotated' : ''}`}
+                      width="12" 
+                      height="12" 
+                      viewBox="0 0 12 12" 
+                      fill="currentColor"
+                    >
+                      <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  </button>
+                )}
               </figcaption>
             </div>
           )}

typescript/src/renderer/styles/media.css

@@ -161,18 +161,45 @@
 }
 
 button.caption-toggle-btn {
-  background: none;
-  border: none;
-  color: var(--jsondoc-text-muted);
+  background: rgba(55, 53, 47, 0.08);
+  border: 1px solid rgba(55, 53, 47, 0.16);
+  border-radius: 6px;
+  color: var(--jsondoc-text-secondary);
   cursor: pointer;
-  font-size: 0.875rem;
-  margin-top: 4px;
-  padding: 2px 4px;
-  text-decoration: underline;
-  transition: color 0.2s ease;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-top: 8px;
+  padding: 6px 10px;
+  transition: all 0.15s ease;
   margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+  outline: none;
 }
 
 .caption-toggle-btn:hover {
-  color: var(--jsondoc-text-muted);
+  background: rgba(55, 53, 47, 0.12);
+  border-color: rgba(55, 53, 47, 0.24);
+  color: var(--jsondoc-text-primary);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.caption-toggle-btn:active {
+  transform: translateY(0);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.caption-toggle-btn .btn-text {
+  line-height: 1;
+}
+
+.caption-toggle-btn .btn-icon {
+  /* transition: transform 0.4s ease; */
+  flex-shrink: 0;
+}
+
+.caption-toggle-btn .btn-icon.rotated {
+  transform: rotate(180deg);
 }