From e622ab1fdf532a785213a1063c7c9e47134f0f2f Mon Sep 17 00:00:00 2001
From: Tuur Martens <tuurmartens4@gmail.com>
Date: Sun, 26 Jan 2025 10:58:31 +0100
Subject: [PATCH] feat: subtext

---
 src/markdown/render/elements/index.ts |  9 +++++++++
 src/markdown/render/index.tsx         | 21 +++++++++++++++++++++
 src/stories/Normal.stories.tsx        |  2 +-
 src/stories/commonTestData.ts         |  2 +-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/markdown/render/elements/index.ts b/src/markdown/render/elements/index.ts
index 0fc83e6..663286c 100644
--- a/src/markdown/render/elements/index.ts
+++ b/src/markdown/render/elements/index.ts
@@ -48,6 +48,15 @@ export const Heading = styled.withConfig({
   },
 });
 
+export const Subtext = styled.withConfig({
+  displayName: "md-subtext",
+  componentId: commonComponentId,
+})("small", {
+  color: theme.colors.textMuted,
+  fontSize: theme.fontSizes.s,
+  display: "block",
+});
+
 export const QuoteContainer = styled.withConfig({
   displayName: "md-quote-container",
   componentId: commonComponentId,
diff --git a/src/markdown/render/index.tsx b/src/markdown/render/index.tsx
index be9b5cc..38e3e9c 100644
--- a/src/markdown/render/index.tsx
+++ b/src/markdown/render/index.tsx
@@ -72,6 +72,27 @@ function createRules(rule: { [key: string]: any }) {
         );
       },
     },
+    subtext: {
+      order: defaultRules.heading.order,
+      match(source, state) {
+        const prevCaptureStr =
+          state.prevCapture === null ? "" : state.prevCapture[0];
+        const isStartOfLineCapture = /(?:^|\n)( *)$/.exec(prevCaptureStr);
+
+        if (isStartOfLineCapture) {
+          source = isStartOfLineCapture[1] + source;
+          return /^ *-#([^\n]+?)(?:\n|$)/.exec(source);
+        }
+
+        return null;
+      },
+      parse: (capture) => ({ content: capture[1] }),
+      react: (node, recurseOutput, state) => (
+        <Styles.Subtext key={state.key}>
+          {parse(node.content, state)}
+        </Styles.Subtext>
+      ),
+    },
     s: {
       order: rule.u.order,
       match: SimpleMarkdown.inlineRegex(/^~~([\s\S]+?)~~(?!_)/),
diff --git a/src/stories/Normal.stories.tsx b/src/stories/Normal.stories.tsx
index a39a6c5..f4f7764 100644
--- a/src/stories/Normal.stories.tsx
+++ b/src/stories/Normal.stories.tsx
@@ -132,7 +132,7 @@ ExtendedMarkdown.args = {
       id: "1042882684902453278",
       type: 0,
       content:
-        "# :sparkles: Heading 1\n## :sparkles: Heading 2\n### :sparkles: Heading 3",
+        "# :sparkles: Heading 1\n## :sparkles: Heading 2\n### :sparkles: Heading 3\n-# :sparkles: Subtext",
       channel_id: "998637045327081502",
       author: testUser,
       attachments: [],
diff --git a/src/stories/commonTestData.ts b/src/stories/commonTestData.ts
index 98b9135..28f0725 100644
--- a/src/stories/commonTestData.ts
+++ b/src/stories/commonTestData.ts
@@ -5,7 +5,7 @@ export const testUser: APIUser = {
   id: "132819036282159104",
   username: "johnythecarrot",
   global_name: "JohnyTheCarrot",
-  avatar: "3a30ffeeeb354950804d77ded94162d3",
+  avatar: "2345999621dd5a2df573c3b6fe8ce94c",
   discriminator: "0001",
   public_flags: 4457220,
 };