fix(markdown): users couldn't include empty lines in the post content

This commit is contained in:
Tom (plebeius.eth)
2024-08-26 13:52:00 +02:00
parent 4092b68a74
commit 38790a2596
3 changed files with 13 additions and 4 deletions
+11 -2
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown'; import ReactMarkdown from 'react-markdown';
import remarkBreaks from 'remark-breaks';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import supersub from 'remark-supersub'; import supersub from 'remark-supersub';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize'; import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
@@ -128,7 +129,7 @@ interface MarkdownProps {
} }
const Markdown = ({ content, title }: MarkdownProps) => { const Markdown = ({ content, title }: MarkdownProps) => {
const remarkPlugins: any[] = [[supersub]]; const remarkPlugins: any[] = [[remarkBreaks, supersub]];
if (content && content.length <= MAX_LENGTH_FOR_GFM) { if (content && content.length <= MAX_LENGTH_FOR_GFM) {
remarkPlugins.push([remarkGfm, { singleTilde: false }]); remarkPlugins.push([remarkGfm, { singleTilde: false }]);
@@ -150,6 +151,14 @@ const Markdown = ({ content, title }: MarkdownProps) => {
const isInCatalogView = isCatalogView(useLocation().pathname, useParams()); const isInCatalogView = isCatalogView(useLocation().pathname, useParams());
// retain empty lines
const processedContent = useMemo(() => {
let md = content;
md = md.replace(/```[\s\S]*?```/g, (m) => m.replace(/\n/g, '\n '));
md = md.replace(/(?<=\n\n)(?![*-])\n/g, '&nbsp;\n ');
return md;
}, [content]);
return ( return (
<span className={styles.markdown}> <span className={styles.markdown}>
{isInCatalogView && title && ( {isInCatalogView && title && (
@@ -159,7 +168,7 @@ const Markdown = ({ content, title }: MarkdownProps) => {
</span> </span>
)} )}
<ReactMarkdown <ReactMarkdown
children={content.replace(/\n/g, '\n\n')} // single newlines would be rendered as spaces children={processedContent}
remarkPlugins={remarkPlugins} remarkPlugins={remarkPlugins}
rehypePlugins={[[rehypeSanitize, customSchema]]} rehypePlugins={[[rehypeSanitize, customSchema]]}
components={{ components={{
+1 -1
View File
@@ -322,7 +322,7 @@ const PostFormTable = ({ closeForm, postCid }: { closeForm: () => void; postCid:
wrap='soft' wrap='soft'
ref={textRef} ref={textRef}
onChange={(e) => { onChange={(e) => {
const content = e.target.value.replace(/\n/g, '\n\n'); const content = e.target.value;
isInPostView ? setPublishReplyOptions({ content }) : setSubmitStore({ content }); isInPostView ? setPublishReplyOptions({ content }) : setSubmitStore({ content });
}} }}
/> />
+1 -1
View File
@@ -154,7 +154,7 @@ const ReplyModal = ({ closeModal, showReplyModal, parentCid, postCid, scrollY, s
}; };
const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const contentWithoutPrefix = e.target.value.slice(contentPrefix.length).replace(/\n/g, '\n\n'); const contentWithoutPrefix = e.target.value.slice(contentPrefix.length);
if (textRef.current && textRef.current.value !== contentWithoutPrefix) { if (textRef.current && textRef.current.value !== contentWithoutPrefix) {
setPublishReplyOptions({ content: contentWithoutPrefix }); setPublishReplyOptions({ content: contentWithoutPrefix });
} }