From 536caf994a2593d63891d7463b1c2f2e9376022a Mon Sep 17 00:00:00 2001
From: apple502j <33279053+apple502j@users.noreply.github.com>
Date: Tue, 18 May 2021 05:22:02 +0900
Subject: [PATCH] Linkify studio descriptions

---
 src/views/studio/studio-description.jsx | 35 +++++++++++++++++--------
 src/views/studio/studio.scss            |  6 +++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/views/studio/studio-description.jsx b/src/views/studio/studio-description.jsx
index 3f3765302..be78232ef 100644
--- a/src/views/studio/studio-description.jsx
+++ b/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="studio-description studio-description-text">
+                    {decorateText(description, {
+                        usernames: true,
+                        hashtags: false,
+                        scratchLinks: true
+                    })}
+                </div>
+            )}
         </div>
     );
 };
diff --git a/src/views/studio/studio.scss b/src/views/studio/studio.scss
index 1227f9f2c..353a159ef 100644
--- a/src/views/studio/studio.scss
+++ b/src/views/studio/studio.scss
@@ -79,6 +79,12 @@ $radius: 8px;
     .studio-description:disabled {
         background: $ui-blue-10percent;
     }
+    .studio-description-text {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        height: 24rem;
+        overflow-y: scroll;
+    }
 
     .studio-follow-button {
         padding-top: 14px;