From 015b7de126abd35df2ca3220799e97aac4970660 Mon Sep 17 00:00:00 2001
From: WaDadidou <wadadidou@gmail.com>
Date: Mon, 16 Dec 2024 17:35:21 -0500
Subject: [PATCH] fix(article-md): Instantiate once markdownit

---
 .../ArticleContentEditor/ArticleContentEditor.tsx    |  5 ++---
 .../ArticleContentEditor/Toolbar/Toolbar.tsx         |  2 +-
 .../components/FeedPostArticleMarkdownView.tsx       |  6 +-----
 .../utils.ts => utils/feed/markdown.ts}              | 12 +++++-------
 4 files changed, 9 insertions(+), 16 deletions(-)
 rename packages/{screens/FeedNewArticle/components/ArticleContentEditor/utils.ts => utils/feed/markdown.ts} (92%)

diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx b/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx
index 79491e17f..fbd89072d 100644
--- a/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx
+++ b/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx
@@ -16,9 +16,9 @@ import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { Toolbar } from "@/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar";
 import {
   ContentMode,
-  initializeArticleMd,
   markdownTagStyles,
-} from "@/screens/FeedNewArticle/components/ArticleContentEditor/utils";
+  articleMd as md,
+} from "@/utils/feed/markdown";
 import { ARTICLE_MAX_WIDTH } from "@/utils/social-feed";
 import { neutral00, neutralA3, neutralFF } from "@/utils/style/colors";
 import { layout, RESPONSIVE_BREAKPOINT_S } from "@/utils/style/layout";
@@ -50,7 +50,6 @@ export const ArticleContentEditor: FC<Props> = ({ width }) => {
   const message = watch("message");
 
   // ========== Markdown
-  const md = initializeArticleMd();
   const html = md.render(message);
 
   // ========== JSX
diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx b/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx
index c44a84d87..96e765fd2 100644
--- a/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx
+++ b/packages/screens/FeedNewArticle/components/ArticleContentEditor/Toolbar/Toolbar.tsx
@@ -4,7 +4,7 @@ import { View } from "react-native";
 import { BrandText } from "@/components/BrandText";
 import { CustomPressable } from "@/components/buttons/CustomPressable";
 import { SpacerRow } from "@/components/spacer";
-import { ContentMode } from "@/screens/FeedNewArticle/components/ArticleContentEditor/utils";
+import { ContentMode } from "@/utils/feed/markdown";
 import { neutral1A } from "@/utils/style/colors";
 import { fontSemibold12 } from "@/utils/style/fonts";
 import { layout } from "@/utils/style/layout";
diff --git a/packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx b/packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx
index 654a5dbfd..6566a3d2b 100644
--- a/packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx
+++ b/packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx
@@ -31,10 +31,7 @@ import { useIsMobile } from "@/hooks/useIsMobile";
 import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { useNSUserInfo } from "@/hooks/useNSUserInfo";
 import { parseUserId } from "@/networks";
-import {
-  initializeArticleMd,
-  markdownTagStyles,
-} from "@/screens/FeedNewArticle/components/ArticleContentEditor/utils";
+import { markdownTagStyles, articleMd as md } from "@/utils/feed/markdown";
 import { zodTryParseJSON } from "@/utils/sanitize";
 import {
   ARTICLE_MAX_WIDTH,
@@ -102,7 +99,6 @@ export const FeedPostArticleMarkdownView: FC<{
     ZodSocialFeedArticleMetadata,
     post.metadata,
   );
-  const md = initializeArticleMd();
   const message = articleMetadata?.message;
   const html = message ? md.render(message) : null;
   const title = articleMetadata?.title;
diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts b/packages/utils/feed/markdown.ts
similarity index 92%
rename from packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts
rename to packages/utils/feed/markdown.ts
index 7a10e50aa..5c6db6868 100644
--- a/packages/screens/FeedNewArticle/components/ArticleContentEditor/utils.ts
+++ b/packages/utils/feed/markdown.ts
@@ -111,10 +111,8 @@ export const markdownTagStyles: MixedStyleRecord = {
   },
 };
 
-// Used to get the same parameters at Article creation and consultation
-export const initializeArticleMd = () => {
-  return markdownit({
-    linkify: true,
-    breaks: true,
-  }).use(emoji);
-};
+// The markdownit instance. Used to get the same parameters at Article creation and consultation.
+export const articleMd = markdownit({
+  linkify: true,
+  breaks: true,
+}).use(emoji);