From 54b92aa51420ea755c2fccc5457bc43706b1ad0d Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 6 Oct 2020 14:44:33 +0200
Subject: [PATCH] limit description preview length

---
 .../pages/Publish/Preview.module.css          | 10 ++++++
 src/components/pages/Publish/Preview.tsx      | 34 +++++++++++++++++--
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Publish/Preview.module.css b/src/components/pages/Publish/Preview.module.css
index 139c30509..b95070c71 100644
--- a/src/components/pages/Publish/Preview.module.css
+++ b/src/components/pages/Publish/Preview.module.css
@@ -28,6 +28,16 @@
   margin-bottom: calc(var(--spacer) / 12);
 }
 
+.description {
+  position: relative;
+}
+
+.toggle {
+  position: absolute;
+  bottom: 0.15rem;
+  right: 0;
+}
+
 .asset {
   display: grid;
   grid-template-columns: 1fr 4fr;
diff --git a/src/components/pages/Publish/Preview.tsx b/src/components/pages/Publish/Preview.tsx
index ac1f3580b..39e561444 100644
--- a/src/components/pages/Publish/Preview.tsx
+++ b/src/components/pages/Publish/Preview.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { FormEvent, ReactElement, useState } from 'react'
 import { File as FileMetadata } from '@oceanprotocol/lib/dist/node/ddo/interfaces/File'
 import Markdown from '../../atoms/Markdown'
 import Tags from '../../atoms/Tags'
@@ -15,12 +15,42 @@ export default function Preview({
 }: {
   values: Partial<MetadataPublishForm>
 }): ReactElement {
+  const [fullDescription, setFullDescription] = useState<boolean>(false)
+
+  const textLimit = 500 // string.length
+  const description =
+    fullDescription === true
+      ? values.description
+      : `${values.description.substring(0, textLimit)}${
+          values.description.length > textLimit ? `...` : ''
+        }`
+
+  function handleDescriptionToggle(e: FormEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    setFullDescription(!fullDescription)
+  }
+
   return (
     <div className={styles.preview}>
       <h2 className={styles.previewTitle}>Preview</h2>
       <header>
         {values.name && <h3 className={styles.title}>{values.name}</h3>}
-        {values.description && <Markdown text={values.description} />}
+
+        {values.description && (
+          <div className={styles.description}>
+            <Markdown text={description} />
+            {values.description.length > textLimit && (
+              <Button
+                style="text"
+                size="small"
+                onClick={handleDescriptionToggle}
+                className={styles.toggle}
+              >
+                {fullDescription === true ? 'Close' : 'Expand'}
+              </Button>
+            )}
+          </div>
+        )}
 
         <div className={styles.asset}>
           {values.files?.length > 0 && typeof values.files !== 'string' && (