fix(article-md): remove marginBottom from blockquote > p:first-child …

…using domVisitors prop
TERITORI · Dec 27, 2024 · c2b53ba · c2b53ba
1 parent e19e7a8
commit c2b53ba
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx b/packages/screens/FeedNewArticle/components/ArticleContentEditor/ArticleContentEditor.tsx
@@ -17,6 +17,7 @@ import {
   ContentMode,
   articleMd as md,
   renderHtmlTagStyles,
+  renderHtmlDomVisitors,
 } from "@/utils/feed/markdown";
 import { ARTICLE_MAX_WIDTH } from "@/utils/social-feed";
 import {
@@ -179,6 +180,7 @@ export const ArticleContentEditor: FC<Props> = ({ width }) => {
               <RenderHtml
                 source={{ html }}
                 tagsStyles={renderHtmlTagStyles}
+                domVisitors={renderHtmlDomVisitors}
                 contentWidth={
                   renderHtmlWidth - responsiveTextInputContainerPadding * 2
                 }

diff --git a/packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx b/packages/screens/FeedPostView/components/FeedPostArticleMarkdownView.tsx
@@ -31,7 +31,11 @@ import { useIsMobile } from "@/hooks/useIsMobile";
 import { useMaxResolution } from "@/hooks/useMaxResolution";
 import { useNSUserInfo } from "@/hooks/useNSUserInfo";
 import { parseUserId } from "@/networks";
-import { renderHtmlTagStyles, articleMd as md } from "@/utils/feed/markdown";
+import {
+  renderHtmlTagStyles,
+  articleMd as md,
+  renderHtmlDomVisitors,
+} from "@/utils/feed/markdown";
 import { zodTryParseJSON } from "@/utils/sanitize";
 import {
   ARTICLE_MAX_WIDTH,
@@ -250,6 +254,7 @@ export const FeedPostArticleMarkdownView: FC<{
                   <RenderHtml
                     source={{ html }}
                     tagsStyles={renderHtmlTagStyles}
+                    domVisitors={renderHtmlDomVisitors}
                     contentWidth={renderHtmlWidth}
                   />
                 </ScrollView>

diff --git a/packages/utils/feed/markdown.ts b/packages/utils/feed/markdown.ts
@@ -1,3 +1,4 @@
+import { Element as DomHandlerElement } from "domhandler";
 import markdownit from "markdown-it";
 import { full as emoji } from "markdown-it-emoji/dist/index.cjs";
 import footnote_plugin from "markdown-it-footnote";
@@ -22,7 +23,28 @@ export const articleMd = markdownit({
   .use(emoji)
   .use(footnote_plugin);
 
-// HTML tags styles used by RenderHtml
+// DOM modifications on document, texts, or elements from react-native-render-html.
+// Because react-native-render-html doesn't allow common CSS selectors, we need to style tags using domVisitors callbacks
+export const renderHtmlDomVisitors = {
+  onElement: (element: DomHandlerElement) => {
+    // Removing marginBottom from the child p of blockquote
+    if (
+      element.name === "blockquote" &&
+      element.children &&
+      element.children.length > 0
+    ) {
+      const tagChild = element.children.find((child) => child.type === "tag");
+      // tagChild is a domhandler Node. It doesn't have attribs, but it has attribs in fact (wtf ?)
+      if (tagChild && "attribs" in tagChild) {
+        tagChild.attribs = {
+          style: "margin-bottom: 0",
+        };
+      }
+    }
+  },
+};
+
+// HTML tags styles used by RenderHtml from react-native-render-html
 export const renderHtmlTagStyles: MixedStyleRecord = {
   body: {
     color: neutralA3,
@@ -34,7 +56,7 @@ export const renderHtmlTagStyles: MixedStyleRecord = {
   },
   p: {
     marginTop: 0,
-    marginBottom: 16,
+    // marginBottom: 16,
 
     fontSize: 14,
     letterSpacing: -(14 * 0.04),
@@ -118,10 +140,10 @@ export const renderHtmlTagStyles: MixedStyleRecord = {
     fontFamily: "Exo_500Medium",
     fontWeight: "500",
   },
+
   blockquote: {
     marginTop: 0,
-    marginBottom: 16,
-    paddingBottom: -16,
+    paddingBottom: 0,
 
     color: neutral67,
     fontSize: 14,
@@ -135,6 +157,13 @@ export const renderHtmlTagStyles: MixedStyleRecord = {
     borderLeftWidth: 3,
     borderLeftColor: neutral67,
   },
+  "ol > :first-child": {
+    backgroundColor: "red",
+  },
+  "blockquote > :first-child": {
+    marginBottom: 0,
+  },
+
   code: {
     color: neutralA3,
     fontSize: 13,