Story creator improvements

ts/components/StoryCreator.tsx

@@ -104,7 +104,7 @@ export const StoryCreator = ({
   const [textBackground, setTextBackground] = useState<TextBackground>(
     TextBackground.None
   );
-  const [sliderValue, setSliderValue] = useState<number>(0);
+  const [sliderValue, setSliderValue] = useState<number>(100);
   const [text, setText] = useState<string>('');
 
   const textEditorRef = useRef<HTMLInputElement | null>(null);
@@ -234,9 +234,18 @@ export const StoryCreator = ({
       <div className="StoryCreator">
         <div className="StoryCreator__container">
           <TextAttachment
+            disableLinkPreviewPopup
             i18n={i18n}
             isEditingText={isEditingText}
             onChange={setText}
+            onClick={() => {
+              if (!isEditingText) {
+                setIsEditingText(true);
+              }
+            }}
+            onRemoveLinkPreview={() => {
+              setHasLinkPreviewApplied(false);
+            }}
             textAttachment={{
               ...getBackground(selectedBackground),
               text,

ts/components/TextAttachment.tsx

@@ -41,10 +41,13 @@ enum TextSize {
 }
 
 export type PropsType = {
+  disableLinkPreviewPopup?: boolean;
   i18n: LocalizerType;
   isEditingText?: boolean;
   isThumbnail?: boolean;
   onChange?: (text: string) => unknown;
+  onClick?: () => unknown;
+  onRemoveLinkPreview?: () => unknown;
   textAttachment: TextAttachmentType;
 };
 
@@ -102,10 +105,13 @@ function getTextStyles(
 }
 
 export const TextAttachment = ({
+  disableLinkPreviewPopup,
   i18n,
   isEditingText,
   isThumbnail,
   onChange,
+  onClick,
+  onRemoveLinkPreview,
   textAttachment,
 }: PropsType): JSX.Element | null => {
   const linkPreview = useRef<HTMLDivElement | null>(null);
@@ -137,6 +143,7 @@ export const TextAttachment = ({
             if (linkPreviewOffsetTop) {
               setLinkPreviewOffsetTop(undefined);
             }
+            onClick?.();
           }}
           onKeyUp={ev => {
             if (ev.key === 'Escape' && linkPreviewOffsetTop) {
@@ -222,17 +229,31 @@ export const TextAttachment = ({
                     ),
                   })}
                   ref={linkPreview}
-                  onFocus={() =>
-                    setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop)
-                  }
-                  onMouseOver={() =>
-                    setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop)
-                  }
+                  onFocus={() => {
+                    if (!disableLinkPreviewPopup) {
+                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
+                    }
+                  }}
+                  onMouseOver={() => {
+                    if (!disableLinkPreviewPopup) {
+                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
+                    }
+                  }}
                 >
+                  {onRemoveLinkPreview && (
+                    <div className="TextAttachment__preview__remove">
+                      <button
+                        aria-label={i18n('Keyboard--remove-draft-link-preview')}
+                        type="button"
+                        onClick={onRemoveLinkPreview}
+                      />
+                    </div>
+                  )}
                   <StagedLinkPreview
                     domain={getDomain(String(textAttachment.preview.url))}
                     i18n={i18n}
                     image={textAttachment.preview.image}
+                    imageSize={textAttachment.preview.title ? 144 : 72}
                     moduleClassName="TextAttachment__preview"
                     title={textAttachment.preview.title || undefined}
                     url={textAttachment.preview.url}

ts/components/conversation/StagedLinkPreview.tsx

@@ -15,6 +15,7 @@ import { isImageAttachment } from '../../types/Attachment';
 
 export type Props = LinkPreviewType & {
   i18n: LocalizerType;
+  imageSize?: number;
   moduleClassName?: string;
   onClose?: () => void;
 };
@@ -25,6 +26,7 @@ export const StagedLinkPreview: React.FC<Props> = ({
   domain,
   i18n,
   image,
+  imageSize,
   moduleClassName,
   onClose,
   title,
@@ -58,10 +60,10 @@ export const StagedLinkPreview: React.FC<Props> = ({
             curveBottomRight={CurveType.Tiny}
             curveTopLeft={CurveType.Tiny}
             curveTopRight={CurveType.Tiny}
-            height={72}
+            height={imageSize || 72}
             i18n={i18n}
             url={image.url}
-            width={72}
+            width={imageSize || 72}
           />
         </div>
       ) : null}