From c521ccbc2ebf2d4d67889a28733d07eab4b8fa7b Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Tue, 27 Aug 2024 18:46:42 +0200
Subject: [PATCH] feat(markdown): when the user is publishing a comment,
 automatically format it to follow markdown rules

---
 src/components/edit-menu/edit-menu.tsx     | 12 +++++++-----
 src/components/markdown/markdown.tsx       | 18 ++----------------
 src/components/post-form/post-form.tsx     | 17 +++++++----------
 src/components/reply-modal/reply-modal.tsx |  6 ++++--
 src/lib/utils/post-utils.ts                | 11 +++++++++++
 5 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/components/edit-menu/edit-menu.tsx b/src/components/edit-menu/edit-menu.tsx
index 2837a30c..236eb07f 100644
--- a/src/components/edit-menu/edit-menu.tsx
+++ b/src/components/edit-menu/edit-menu.tsx
@@ -4,6 +4,7 @@ import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDis
 import { Comment, PublishCommentEditOptions, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
+import { formatMarkdown } from '../../lib/utils/post-utils';
 import useChallengesStore from '../../stores/use-challenges-store';
 import _ from 'lodash';
 import useIsMobile from '../../hooks/use-is-mobile';
@@ -113,6 +114,11 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
     setIsEditMenuOpen(false);
   };
 
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const formattedContent = formatMarkdown(e.target.value);
+    setPublishCommentEditOptions((state) => ({ ...state, content: formattedContent }));
+  };
+
   return (
     <>
       <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(cid && getReferenceProps())}>
@@ -140,11 +146,7 @@ const EditMenu = ({ isAccountMod, isAccountCommentAuthor, isCommentAuthorMod, po
                   </div>
                   {isContentEditorOpen && (
                     <div>
-                      <textarea
-                        className={styles.editTextarea}
-                        value={publishCommentEditOptions.content ?? ''}
-                        onChange={(e) => setPublishCommentEditOptions((state) => ({ ...state, content: e.target.value }))}
-                      />
+                      <textarea className={styles.editTextarea} value={publishCommentEditOptions.content ?? ''} onChange={handleContentChange} />
                     </div>
                   )}
                 </>
diff --git a/src/components/markdown/markdown.tsx b/src/components/markdown/markdown.tsx
index e964d4f4..d355a130 100644
--- a/src/components/markdown/markdown.tsx
+++ b/src/components/markdown/markdown.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import ReactMarkdown from 'react-markdown';
-import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import supersub from 'remark-supersub';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
@@ -129,7 +128,7 @@ interface MarkdownProps {
 }
 
 const Markdown = ({ content, title }: MarkdownProps) => {
-  const remarkPlugins: any[] = [[remarkBreaks, supersub]];
+  const remarkPlugins: any[] = [[supersub]];
 
   if (content && content.length <= MAX_LENGTH_FOR_GFM) {
     remarkPlugins.push([remarkGfm, { singleTilde: false }]);
@@ -151,19 +150,6 @@ const Markdown = ({ content, title }: MarkdownProps) => {
 
   const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
 
-  const processedContent = useMemo(() => {
-    let md = content;
-    if (md) {
-      // Preserve newlines in code blocks
-      md = md.replace(/```[\s\S]*?```/g, (m) => m.replace(/\n/g, '\n '));
-      // Add an extra newline after blockquote lines
-      md = md.replace(/^(>.*)\n(?!>)/gm, '$1\n\n');
-      // Retain empty lines
-      md = md.replace(/(?<=\n\n)(?![*-])\n/g, '&nbsp;\n ');
-    }
-    return md;
-  }, [content]);
-
   return (
     <span className={styles.markdown}>
       {isInCatalogView && title && (
@@ -173,7 +159,7 @@ const Markdown = ({ content, title }: MarkdownProps) => {
         </span>
       )}
       <ReactMarkdown
-        children={processedContent}
+        children={content}
         remarkPlugins={remarkPlugins}
         rehypePlugins={[[rehypeSanitize, customSchema]]}
         components={{
diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx
index e053ec98..ad27de6f 100644
--- a/src/components/post-form/post-form.tsx
+++ b/src/components/post-form/post-form.tsx
@@ -15,6 +15,7 @@ import {
 import { create } from 'zustand';
 import { alertChallengeVerificationFailed } from '../../lib/utils/challenge-utils';
 import { getLinkMediaInfo } from '../../lib/utils/media-utils';
+import { formatMarkdown } from '../../lib/utils/post-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isDescriptionView, isPostPageView, isRulesView, isSubscriptionsView } from '../../lib/utils/view-utils';
 import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
@@ -241,6 +242,11 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
     }
   }, [address, getExistingSigner, getNewSigner, setPublishReplyOptions, anonMode, displayName]);
 
+  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const formattedContent = formatMarkdown(e.target.value);
+    isInPostView ? setPublishReplyOptions({ content: formattedContent }) : setSubmitStore({ content: formattedContent });
+  };
+
   const onPublishReply = () => {
     const currentContent = textRef.current?.value || '';
     const currentUrl = urlRef.current?.value || '';
@@ -316,16 +322,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
         <tr>
           <td>{t('comment')}</td>
           <td>
-            <textarea
-              cols={48}
-              rows={4}
-              wrap='soft'
-              ref={textRef}
-              onChange={(e) => {
-                const content = e.target.value;
-                isInPostView ? setPublishReplyOptions({ content }) : setSubmitStore({ content });
-              }}
-            />
+            <textarea cols={48} rows={4} wrap='soft' ref={textRef} onChange={handleContentChange} />
           </td>
         </tr>
         <tr>
diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx
index 6dcc06b4..bac1bc9e 100644
--- a/src/components/reply-modal/reply-modal.tsx
+++ b/src/components/reply-modal/reply-modal.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import Draggable from 'react-draggable';
 import { setAccount, useAccount, useComment, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
+import { formatMarkdown } from '../../lib/utils/post-utils';
 import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
@@ -155,8 +156,9 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
 
   const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const contentWithoutPrefix = e.target.value.slice(contentPrefix.length);
-    if (textRef.current && textRef.current.value !== contentWithoutPrefix) {
-      setPublishReplyOptions({ content: contentWithoutPrefix });
+    const formattedContent = formatMarkdown(contentWithoutPrefix);
+    if (textRef.current && textRef.current.value !== formattedContent) {
+      setPublishReplyOptions({ content: formattedContent });
     }
   };
 
diff --git a/src/lib/utils/post-utils.ts b/src/lib/utils/post-utils.ts
index a9d0f01f..e0d008ad 100644
--- a/src/lib/utils/post-utils.ts
+++ b/src/lib/utils/post-utils.ts
@@ -20,3 +20,14 @@ export function getTextColorForBackground(rgb: string): string {
   const brightness = r * 0.299 + g * 0.587 + b * 0.114;
   return brightness > 125 ? 'black' : 'white';
 }
+
+export const formatMarkdown = (content: string): string => {
+  let md = content;
+  if (md) {
+    // Replace single newline with "/n&nbsp;/n" if followed by a newline
+    md = md.replace(/\n(?=\n)/g, '\n&nbsp;\n');
+    // Replace single newline with double newline if between two characters
+    md = md.replace(/\n(?=\S)/g, '\n\n');
+  }
+  return md;
+};