Solved the issue with the formatting on the description input on the …

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;

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 {

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;
-`
+`

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 */}