feat: subtext

Author: JohnyTheCarrot

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,

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]+?)~~(?!_)/),

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: [],

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,
 };