From 8823991eb9def96cfbcf0b84e8632999b99f4bd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Thu, 29 Jul 2021 13:43:34 +0200
Subject: [PATCH] Fix card loading on open card (#800)

* Fix card loading on open card

* Fix MDE problem

* Fix eslint
---
 webapp/src/components/cardDialog.tsx     |  9 +++++-
 webapp/src/components/markdownEditor.tsx | 36 +++++++++++++-----------
 2 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/webapp/src/components/cardDialog.tsx b/webapp/src/components/cardDialog.tsx
index 2ae3ea780..3be5bc40b 100644
--- a/webapp/src/components/cardDialog.tsx
+++ b/webapp/src/components/cardDialog.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useState} from 'react'
+import React, {useState, useEffect} from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
 
 import mutator from '../mutator'
@@ -27,6 +27,13 @@ const CardDialog = (props: Props) => {
     const [syncComplete, setSyncComplete] = useState(false)
     const [cardTree, setCardTree] = useState<CardTree>()
     const intl = useIntl()
+    useEffect(() => {
+        MutableCardTree.sync(props.cardId).then((ct) => {
+            setCardTree(ct)
+            setSyncComplete(true)
+        })
+    }, [props.boardTree])
+
     useCardListener(
         async (blocks) => {
             Utils.log(`cardListener.onChanged: ${blocks.length}`)
diff --git a/webapp/src/components/markdownEditor.tsx b/webapp/src/components/markdownEditor.tsx
index 8dacae8a6..a733a7012 100644
--- a/webapp/src/components/markdownEditor.tsx
+++ b/webapp/src/components/markdownEditor.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useState, useRef} from 'react'
+import React, {useState, useRef, useMemo} from 'react'
 import EasyMDE from 'easymde'
 import SimpleMDE from 'react-simplemde-editor'
 
@@ -52,6 +52,23 @@ const MarkdownEditor = (props: Props): JSX. Element => {
     const stateAndPropsRef = useRef(stateAndPropsValue)
     stateAndPropsRef.current = stateAndPropsValue
 
+    const mdeOptions = useMemo(() => ({
+        autoDownloadFontAwesome: true,
+        toolbar: false,
+        status: false,
+        spellChecker: true,
+        nativeSpellcheck: true,
+        minHeight: '10px',
+        shortcuts: {
+            toggleStrikethrough: 'Cmd-.',
+            togglePreview: null,
+            drawImage: null,
+            drawLink: null,
+            toggleSideBySide: null,
+            toggleFullScreen: null,
+        },
+    }), [])
+
     const html: string = Utils.htmlFromMarkdown(text || placeholderText || '')
 
     const previewElement = (
@@ -132,22 +149,7 @@ const MarkdownEditor = (props: Props): JSX. Element => {
                         }
                     },
                 }}
-                options={{
-                    autoDownloadFontAwesome: true,
-                    toolbar: false,
-                    status: false,
-                    spellChecker: true,
-                    nativeSpellcheck: true,
-                    minHeight: '10px',
-                    shortcuts: {
-                        toggleStrikethrough: 'Cmd-.',
-                        togglePreview: null,
-                        drawImage: null,
-                        drawLink: null,
-                        toggleSideBySide: null,
-                        toggleFullScreen: null,
-                    },
-                }}
+                options={mdeOptions}
             />
         </div>)