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,18 +33,30 @@ const StudioDescription = ({
     });
     return (
         <div className="studio-info-section">
-            <textarea
-                rows="20"
-                className={fieldClassName}
-                disabled={isMutating || !canEditInfo || isFetching}
-                defaultValue={description}
-                onBlur={e => e.target.value !== description &&
+            {canEditInfo ? (
+                <React.Fragment>
+                    <textarea
+                        rows="20"
+                        className={fieldClassName}
+                        disabled={isMutating || isFetching}
+                        defaultValue={description}
+                        onBlur={e => e.target.value !== description &&
                     handleUpdate(e.target.value)}
-            />
-            {descriptionError && <ValidationMessage
-                mode="error"
-                message={<FormattedMessage id={errorToMessageId(descriptionError)} />}
-            />}
+                    />
+                    {descriptionError && <ValidationMessage
+                        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,18 +29,24 @@ const StudioTitle = ({
     });
     return (
         <div className="studio-info-section">
-            <textarea
-                className={fieldClassName}
-                disabled={isMutating || !canEditInfo || isFetching}
-                defaultValue={title}
-                onKeyDown={e => e.key === 'Enter' && e.target.blur()}
-                onBlur={e => e.target.value !== title &&
-                    handleUpdate(e.target.value)}
-            />
-            {titleError && <ValidationMessage
-                mode="error"
-                message={<FormattedMessage id={errorToMessageId(titleError)} />}
-            />}
+            {canEditInfo ? (
+                <React.Fragment>
+                    <textarea
+                        className={fieldClassName}
+                        disabled={isMutating || !canEditInfo || isFetching}
+                        defaultValue={title}
+                        onKeyDown={e => e.key === 'Enter' && e.target.blur()}
+                        onBlur={e => e.target.value !== title &&
+                            handleUpdate(e.target.value)}
+                    />
+                    {titleError && <ValidationMessage
+                        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 {