Story creator improvements

stylesheets/components/TextAttachment.scss

@@ -58,6 +58,12 @@
     }
   }
 
+  &__preview-container {
+    position: relative;
+    margin-left: 72px;
+    margin-right: 72px;
+  }
+
   &__preview {
     align-items: center;
     background: $color-black-alpha-40;
@@ -66,10 +72,30 @@
     flex-direction: row;
     height: 122px;
     justify-content: center;
-    margin-left: 72px;
-    margin-right: 72px;
     padding: 34px;
 
+    &__remove {
+      backdrop-filter: blur(26px);
+      background: $color-black-alpha-40;
+      border-radius: 100%;
+      height: 48px;
+      position: absolute;
+      right: -16px;
+      top: -16px;
+      width: 48px;
+      z-index: $z-index-base;
+
+      button {
+        @include button-reset;
+        height: 24px;
+        position: absolute;
+        right: 12px;
+        top: 12px;
+        width: 24px;
+        @include color-svg('../images/icons/v2/x-24.svg', $color-gray-15);
+      }
+    }
+
     .TextAttachment__preview-container--large & {
       height: 192px;
     }

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={() =>
+                  onFocus={() => {
-                    setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop)
+                    if (!disableLinkPreviewPopup) {
+                      setLinkPreviewOffsetTop(linkPreview?.current?.offsetTop);
                     }
-                  onMouseOver={() =>
+                  }}
-                    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}