fix: convert HTML to Markdown in CommentInputField using turndown

Author: sumitdahal7

frontend/package.json

@@ -70,6 +70,7 @@
     "tachyons": "^4.12.0",
     "terra-draw": "^1.18.1",
     "tributejs": "^5.1.3",
+    "turndown": "^7.2.4",
     "use-query-params": "^2.2.1",
     "webfontloader": "^1.6.28",
     "workbox-core": "^7.0.0",

frontend/src/components/comments/commentInput.js

@@ -13,7 +13,7 @@ import HashtagPaste from './hashtagPaste';
 import FileRejections from './fileRejections';
 import DropzoneUploadStatus from './uploadStatus';
 import { DROPZONE_SETTINGS } from '../../config';
-import { formatUserNamesToLink } from '../../utils/htmlFromMarkdown';
+import { formatUserNamesToLink, markdownFromHtml } from '../../utils/htmlFromMarkdown';
 import { iconConfig } from './editorIconConfig';
 import messages from './messages';
 import { CurrentUserAvatar } from '../user/avatar';
@@ -37,6 +37,7 @@ function CommentInputField({
   const textareaRef = useRef();
   const fileInputRef = useRef(null);
   const isBundle = useRef(false);
+  const lastConvertedRef = useRef(null);
   const [isShowPreview, setIsShowPreview] = useState(false);
 
   const appendImgToComment = (url) => setComment(`${comment}\n![image](${url})\n`);
@@ -149,7 +150,21 @@ function CommentInputField({
     sessionStorage.setItem(sessionkey, comment);
   }, [comment, sessionkey]);
 
-  console.log(comment, 'comment');
+  useEffect(() => {
+    if (
+      comment &&
+      comment !== lastConvertedRef.current &&
+      /<\/?(?:p|div|h[1-6]|ul|ol|li|br|strong|em|a|table|thead|tbody|tr|th|td|blockquote|pre|code|span)[\s>]/i.test(comment) &&
+      document.activeElement !== textareaRef.current?.textarea
+    ) {
+      const converted = markdownFromHtml(comment);
+      if (converted !== comment) {
+        lastConvertedRef.current = converted;
+        setComment(converted);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [comment]);
 
   return (
     <div {...getRootProps()}>

frontend/src/utils/htmlFromMarkdown.js

@@ -1,5 +1,6 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
+import TurndownService from 'turndown';
 
 const VIDEO_TAG_REGEXP = new RegExp(/^::youtube\[(.*)\]$/);
 
@@ -102,3 +103,9 @@ export const formatUserNamesToLink = (text) => {
   }
   return text;
 };
+
+const turndownService = new TurndownService();
+
+export const markdownFromHtml = (html) => {
+  return turndownService.turndown(html);
+};

frontend/yarn.lock

@@ -2139,6 +2139,11 @@
     rw "^1.3.3"
     tinyqueue "^3.0.0"
 
+"@mixmark-io/domino@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@mixmark-io/domino/-/domino-2.2.0.tgz#4e8ec69bf1afeb7a14f0628b7e2c0f35bdb336c3"
+  integrity sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==
+
 "@mswjs/cookies@^0.2.2":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@mswjs/cookies/-/cookies-0.2.2.tgz#b4e207bf6989e5d5427539c2443380a33ebb922b"
@@ -14102,6 +14107,13 @@ tsutils@^3.21.0:
   dependencies:
     tslib "^1.8.1"
 
+turndown@^7.2.4:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.2.4.tgz#42d98202aefa8c188c997b586bc6da78bdf27ea2"
+  integrity sha512-I8yFsfRzmzK0WV1pNNOA4A7y4RDfFxPRxb3t+e3ui14qSGOxGtiSP6GjeX+Y6CHb7HYaFj7ECUD7VE5kQMZWGQ==
+  dependencies:
+    "@mixmark-io/domino" "^2.2.0"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"