Merge pull request #530 from prezly/feature/dev-12552-is-it-possible-to-truncate-captions-with-dots-when-not-being

[DEV-12552] Feature - Show pencil next to the caption & truncate if needed

Author: kudlajz

packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.module.scss

@@ -1,3 +1,4 @@
+@import "styles/helpers";
 @import "styles/variables";
 
 .GalleryTile {
@@ -82,6 +83,7 @@
 
         .Input {
             width: 100%;
+            padding: 0;
             appearance: none;
             color: $white;
             background: none;
@@ -97,6 +99,43 @@
                 font-weight: 300;
             }
         }
+
+        .Button {
+            max-width: 100%;
+            margin: 0;
+            padding: 0;
+            border: none;
+            font-size: 13px;
+            font-weight: 500;
+            line-height: 1.2;
+            overflow: hidden;
+
+            &,
+            &:hover,
+            &:focus {
+                color: $white !important;
+                background: none !important;
+            }
+
+            &.empty {
+                font-style: italic;
+                font-weight: 300;
+            }
+
+            > div {
+                overflow: hidden;
+            }
+
+            span {
+                @include ellipsis;
+
+                opacity: 1;
+            }
+
+            svg {
+                flex-shrink: 0;
+            }
+        }
     }
 
     .Actions {

packages/slate-editor/src/extensions/galleries/components/Gallery/GalleryTile.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import type { CSSProperties } from 'react';
-import React, { forwardRef, useState } from 'react';
+import type { CSSProperties, ChangeEvent } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 
 import { Button, ImageSizeWarning, ImageWithLoadingPlaceholder } from '#components';
-import { Crop, Delete } from '#icons';
+import { Crop, Delete, Edit } from '#icons';
 
 import styles from './GalleryTile.module.scss';
 
@@ -28,7 +28,7 @@ export interface Props {
 
 export const GalleryTile = forwardRef<HTMLDivElement, Props>(function GalleryTile(
     {
-        caption,
+        caption: originalCaption,
         className,
         clone = false,
         dragging,
@@ -48,7 +48,18 @@ export const GalleryTile = forwardRef<HTMLDivElement, Props>(function GalleryTil
     },
     ref,
 ) {
+    // We have to use an intermediate state otherwise the input keeps
+    // re-rendering every time the original caption changes and moves
+    // the caret to the end of the input
+    const [caption, setCaption] = useState(originalCaption);
     const [isHovering, setHovering] = useState(false);
+    const [isEditingCaption, setEditingCaption] = useState(false);
+
+    function handleCaptionChange(event: ChangeEvent<HTMLInputElement>) {
+        const text = event.currentTarget.value;
+        setCaption(text);
+        onCaptionChange(text);
+    }
 
     function handleShowOverlay() {
         setTimeout(() => setHovering(true), 0);
@@ -58,6 +69,10 @@ export const GalleryTile = forwardRef<HTMLDivElement, Props>(function GalleryTil
         setHovering(false);
     }
 
+    useEffect(() => {
+        setCaption(caption);
+    }, [caption]);
+
     return (
         <div
             className={classNames(styles.GalleryTile, className, {
@@ -88,13 +103,29 @@ export const GalleryTile = forwardRef<HTMLDivElement, Props>(function GalleryTil
                             [styles.visible]: caption !== '',
                         })}
                     >
-                        <input
-                            type="text"
-                            className={styles.Input}
-                            onChange={(event) => onCaptionChange?.(event.currentTarget.value)}
-                            value={caption}
-                            placeholder={isInteractive ? 'add caption' : ''}
-                        />
+                        {isEditingCaption ? (
+                            <input
+                                autoFocus
+                                type="text"
+                                className={styles.Input}
+                                onChange={handleCaptionChange}
+                                onBlur={() => setEditingCaption(false)}
+                                value={caption}
+                                placeholder="add caption"
+                            />
+                        ) : (
+                            <Button
+                                className={classNames(styles.Button, {
+                                    [styles.empty]: !caption,
+                                })}
+                                icon={isInteractive ? Edit : undefined}
+                                iconPosition="right"
+                                onClick={() => setEditingCaption(true)}
+                                variant="clear"
+                            >
+                                {caption || 'add caption'}
+                            </Button>
+                        )}
                     </div>
                 </div>
             )}