Merge pull request #5440 from apple502j/decorate-desc

Linkify studio descriptions

src/views/studio/studio-description.jsx

@@ -12,6 +12,7 @@ import {
 } from '../../redux/studio-mutations';
 
 import ValidationMessage from '../../components/forms/validation-message.jsx';
+import decorateText from '../../lib/decorate-text.jsx';
 
 const errorToMessageId = error => {
     switch (error) {
@@ -32,10 +33,12 @@ const StudioDescription = ({
     });
     return (
         <div className="studio-info-section">
+            {canEditInfo ? (
+                <React.Fragment>
                     <textarea
                         rows="20"
                         className={fieldClassName}
-                disabled={isMutating || !canEditInfo || isFetching}
+                        disabled={isMutating || isFetching}
                         defaultValue={description}
                         onBlur={e => e.target.value !== description &&
                     handleUpdate(e.target.value)}
@@ -44,6 +47,16 @@ const StudioDescription = ({
                         mode="error"
                         message={<FormattedMessage id={errorToMessageId(descriptionError)} />}
                     />}
+                </React.Fragment>
+            ) : (
+                <div className={fieldClassName}>
+                    {decorateText(description, {
+                        usernames: true,
+                        hashtags: false,
+                        scratchLinks: true
+                    })}
+                </div>
+            )}
         </div>
     );
 };

src/views/studio/studio-image.jsx

@@ -35,7 +35,7 @@ const StudioImage = ({
     return (
         <div className={fieldClassName}>
             <img
-                style={{width: '300px', height: '225px', objectFit: 'cover'}}
+                className="studio-image"
                 src={src}
             />
             {canEditInfo && !isFetching &&

src/views/studio/studio-title.jsx

@@ -29,6 +29,8 @@ const StudioTitle = ({
     });
     return (
         <div className="studio-info-section">
+            {canEditInfo ? (
+                <React.Fragment>
                     <textarea
                         className={fieldClassName}
                         disabled={isMutating || !canEditInfo || isFetching}
@@ -41,6 +43,10 @@ const StudioTitle = ({
                         mode="error"
                         message={<FormattedMessage id={errorToMessageId(titleError)} />}
                     />}
+                </React.Fragment>
+            ) : (
+                <div className={fieldClassName}>{title}</div>
+            )}
         </div>
     );
 };

src/views/studio/studio.scss

@@ -48,18 +48,6 @@ $radius: 8px;
     grid-template-columns: minmax(0, 1fr);
     gap: 20px;
 
-    .studio-title, .studio-description {
-        background: transparent;
-        margin: 0 -8px; /* Outset the border horizontally */
-        padding: 5px 8px;
-        border: 2px dashed $ui-blue-25percent;
-        border-radius: $radius;
-        resize: none;
-        width: 300px;
-
-        &:disabled { border-color: transparent; }
-    }
-
     .studio-info-section {
         position: relative;
         .validation-message {
@@ -72,12 +60,35 @@ $radius: 8px;
         font-weight: 700;
     }
 
-    .studio-title:disabled {
-        padding: 0;
-        margin: 0;
-    }
-    .studio-description:disabled {
+    .studio-description {
         background: $ui-blue-10percent;
+        padding: 15px 20px;
+        border-color: transparent;
+        border-radius: $radius;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        width: 300px;
+        box-sizing: border-box;
+        height: 24rem;
+        overflow-y: scroll;
+    }
+
+    /* Overrides for when title and description are editable textareas */
+    textarea.studio-title, textarea.studio-description {
+        background: transparent;
+        padding: 5px 8px;
+        border: 2px dashed $ui-blue-25percent;
+        border-radius: $radius;
+        resize: none;
+        width: 300px;
+        box-sizing: border-box;
+    }
+
+    .studio-image {
+        width: 300px;
+        height: 225px;
+        object-fit: cover;
+        border-radius: 8px;
     }
 
     .studio-follow-button {