From 138a4e4979dd6eba540d2e02d11c371dc7e2a8a8 Mon Sep 17 00:00:00 2001
From: jpa <jaulet@aragonlabs.com>
Date: Thu, 29 Sep 2022 17:15:11 +0200
Subject: [PATCH 1/2] Solved the issue with the formatting on the description
 input on the voting creation page. Improved formatting and removed blank
 lines in the public voting page

---
 components/blocks/mark-down-viewer.tsx  | 6 +++---
 components/blocks/text-editor/index.tsx | 5 +++--
 components/blocks/vote-description.tsx  | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/blocks/mark-down-viewer.tsx b/components/blocks/mark-down-viewer.tsx
index efca48f5..fcb312f9 100644
--- a/components/blocks/mark-down-viewer.tsx
+++ b/components/blocks/mark-down-viewer.tsx
@@ -4,8 +4,8 @@ import MarkDownIt from 'markdown-it'
 
 export const MarkDownViewer = ({ content }) => {
   const wrapperRef = React.useRef(null)
-  const md = new MarkDownIt()
-  const html = md.render(content || '')
+  // const md = new MarkDownIt()
+  // const html = md.render(content || '')
 
   const handleClickEvent = (event) => {
     if (event.target.tagName === 'A') {
@@ -21,7 +21,7 @@ export const MarkDownViewer = ({ content }) => {
     }
   }, [])
 
-  return (<MarkdownWrapper dangerouslySetInnerHTML={{ __html: html }} ref={wrapperRef}></MarkdownWrapper>)
+  return (<MarkdownWrapper dangerouslySetInnerHTML={{ __html: content }} ref={wrapperRef}></MarkdownWrapper>)
 }
 
 // & p {
diff --git a/components/blocks/text-editor/index.tsx b/components/blocks/text-editor/index.tsx
index 8836dc2a..2032b125 100644
--- a/components/blocks/text-editor/index.tsx
+++ b/components/blocks/text-editor/index.tsx
@@ -35,7 +35,8 @@ export const TextEditor = ({ onChange, content, markdown, deps }: TextEditorProp
     content,
     onUpdate: function ({ editor })  {
       if (markdown) {
-        onChange(turndownService.current.turndown(editor.getHTML()))
+        //onChange(turndownService.current.turndown(editor.getHTML()))
+        onChange(editor.getHTML())
       } else {
         onChange(sanitizeHtml(editor.getHTML()));
       }
@@ -53,4 +54,4 @@ export const TextEditor = ({ onChange, content, markdown, deps }: TextEditorProp
 const TextEditorContentWrapper = styled.div`
   border: solid 1px ${({ theme }) => theme.lightBorder};
   border-radius: 8px;
-`
\ No newline at end of file
+`
diff --git a/components/blocks/vote-description.tsx b/components/blocks/vote-description.tsx
index 95e48629..6930e8ca 100644
--- a/components/blocks/vote-description.tsx
+++ b/components/blocks/vote-description.tsx
@@ -68,6 +68,7 @@ export const VoteDescription = () => {
           }
         </Row>
       </Col>
+
       {/* DATE AND SETTINGS CARDS */}
       <Col xs={12}>
         {/* INSIDE ROW TO ADJUST GUTTER */}

From 62484f8e5802fcb0a71575a94e8ce6cc45bcd2b4 Mon Sep 17 00:00:00 2001
From: jpa <jaulet@aragonlabs.com>
Date: Thu, 6 Oct 2022 15:15:26 +0200
Subject: [PATCH 2/2] Improved the expandable container component to show/hide
 the button depending on a more accurate calculation of content height, taking
 also margins into account

---
 components/blocks/expandable-container.tsx | 27 +++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/components/blocks/expandable-container.tsx b/components/blocks/expandable-container.tsx
index 602dd14f..5127a12d 100644
--- a/components/blocks/expandable-container.tsx
+++ b/components/blocks/expandable-container.tsx
@@ -22,8 +22,9 @@ export const ExpandableContainer = (props: ExpandableContainerProps) => {
   const [height, setHeight] = useState(0)
   const ref = useRef()
   // Hide the button if the content height is less than
-  // props.lines, assuming each line has a height of 22
-  const lineHeight = 22 * props.lines
+  // props.lines, assuming each line has a height of 20
+  // plus 16 for the margin-top & margin-bottom (8px each)
+  const lineHeight = (20 * props.lines + 16 * props.lines)
   useLayoutEffect(() => {
     if (ref.current) {
       const element = ref.current as Element
@@ -34,15 +35,15 @@ export const ExpandableContainer = (props: ExpandableContainerProps) => {
   return (
     <Row gutter='xs'>
       <Col xs={12}>
-      <TextContainer
-        ref={ref}
-        isExpanded={isExpanded}
-        {...props}
-      >
-        <Text size='sm' weight='light' color='dark-blue'>
-          <MarkDownViewer content={props.children} />
-        </Text>
-      </TextContainer>
+        <TextContainer
+          ref={ref}
+          isExpanded={isExpanded}
+          {...props}
+        >
+          <Text size='sm' weight='light' color='dark-blue'>
+            <MarkDownViewer content={props.children} />
+          </Text>
+        </TextContainer>
       </Col>
       {height > lineHeight &&
         <Col justify='start'>
@@ -54,24 +55,28 @@ export const ExpandableContainer = (props: ExpandableContainerProps) => {
     </Row>
   )
 }
+
 const getLineClamp = (props: IContainerProps) => {
   if (!props.isExpanded && props.lines) {
     return props.lines
   }
   return 'initial'
 }
+
 const getMaxHeight = (props: IContainerProps) => {
   if (!props.isExpanded && props.maxHeight) {
     return props.maxHeight
   }
   return undefined
 }
+
 const getTransition = (props: IContainerProps) => {
   if (!props.isExpanded) {
     return 'max-height 0.15s ease-out'
   }
   return 'max-height 0.25s ease-in'
 }
+
 const TextContainer = styled.div <IContainerProps>`
   margin-bottom: 8px;
   display: -webkit-box;