From cae3ee20c35d213118808f0e1779c8852d8fc28d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Pena?= <andrerpena@gmail.com>
Date: Tue, 10 May 2022 22:26:00 +0100
Subject: [PATCH] Adding heading commands

---
 demo/index.tsx                                 | 14 +++++++++++---
 package.json                                   |  2 +-
 .../markdown-commands/headingLevel1Command.tsx |  9 +++++++++
 .../markdown-commands/headingLevel2Command.tsx |  9 +++++++++
 .../markdown-commands/headingLevel3Command.tsx |  9 +++++++++
 .../markdown-commands/headingLevel4Command.tsx |  9 +++++++++
 .../markdown-commands/headingLevel5Command.tsx |  9 +++++++++
 .../markdown-commands/headingLevel6Command.tsx |  9 +++++++++
 .../headerHelpers.ts}                          | 14 +++-----------
 src/index.ts                                   | 18 +++++++++++++++---
 10 files changed, 84 insertions(+), 18 deletions(-)
 create mode 100644 src/commands/markdown-commands/headingLevel1Command.tsx
 create mode 100644 src/commands/markdown-commands/headingLevel2Command.tsx
 create mode 100644 src/commands/markdown-commands/headingLevel3Command.tsx
 create mode 100644 src/commands/markdown-commands/headingLevel4Command.tsx
 create mode 100644 src/commands/markdown-commands/headingLevel5Command.tsx
 create mode 100644 src/commands/markdown-commands/headingLevel6Command.tsx
 rename src/{commands/markdown-commands/headerCommand.tsx => helpers/headerHelpers.ts} (62%)

diff --git a/demo/index.tsx b/demo/index.tsx
index 6dd6a31..7bc108e 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
 import { Box, ChakraProvider, HStack, Textarea } from "@chakra-ui/react";
-import { useTextAreaMarkdownEditor } from "../src";
-import { faBold, faItalic, faCode } from "@fortawesome/free-solid-svg-icons";
+import { headingLevel1Command, useTextAreaMarkdownEditor } from "../src";
+import { faBold, faItalic, faCode, faHeading } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { boldCommand, codeCommand, italicCommand } from "../src";
 import { ToolbarButton } from "./toolbar-button";
@@ -14,7 +14,8 @@ export const Demo: React.FunctionComponent<DemoProps> = () => {
     commandMap: {
       bold: boldCommand,
       italic: italicCommand,
-      code: codeCommand
+      code: codeCommand,
+      headingLevel1: headingLevel1Command
     }
   });
 
@@ -43,6 +44,13 @@ export const Demo: React.FunctionComponent<DemoProps> = () => {
           >
             <FontAwesomeIcon icon={faCode} />
           </ToolbarButton>
+          <ToolbarButton
+            onClick={async () => {
+              await commandController.executeCommand("headingLevel1");
+            }}
+          >
+            <FontAwesomeIcon icon={faHeading} />
+          </ToolbarButton>
         </HStack>
         <Textarea
           ref={ref}
diff --git a/package.json b/package.json
index f254939..3c101a1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-mde",
-  "version": "12.0.7",
+  "version": "12.0.8",
   "description": "React Markdown Editor",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
diff --git a/src/commands/markdown-commands/headingLevel1Command.tsx b/src/commands/markdown-commands/headingLevel1Command.tsx
new file mode 100644
index 0000000..fa0c513
--- /dev/null
+++ b/src/commands/markdown-commands/headingLevel1Command.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Command } from "../command";
+import { setHeader } from "../../helpers/headerHelpers";
+
+export const headingLevel1Command: Command = {
+  execute: ({ initialState, textApi }) => {
+    setHeader(initialState, textApi, "# ");
+  }
+};
diff --git a/src/commands/markdown-commands/headingLevel2Command.tsx b/src/commands/markdown-commands/headingLevel2Command.tsx
new file mode 100644
index 0000000..e569989
--- /dev/null
+++ b/src/commands/markdown-commands/headingLevel2Command.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Command } from "../command";
+import { setHeader } from "../../helpers/headerHelpers";
+
+export const headingLevel2Command: Command = {
+  execute: ({ initialState, textApi }) => {
+    setHeader(initialState, textApi, "## ");
+  }
+};
diff --git a/src/commands/markdown-commands/headingLevel3Command.tsx b/src/commands/markdown-commands/headingLevel3Command.tsx
new file mode 100644
index 0000000..1b7d68d
--- /dev/null
+++ b/src/commands/markdown-commands/headingLevel3Command.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Command } from "../command";
+import { setHeader } from "../../helpers/headerHelpers";
+
+export const headingLevel3Command: Command = {
+  execute: ({ initialState, textApi }) => {
+    setHeader(initialState, textApi, "### ");
+  }
+};
diff --git a/src/commands/markdown-commands/headingLevel4Command.tsx b/src/commands/markdown-commands/headingLevel4Command.tsx
new file mode 100644
index 0000000..41bf4f0
--- /dev/null
+++ b/src/commands/markdown-commands/headingLevel4Command.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Command } from "../command";
+import { setHeader } from "../../helpers/headerHelpers";
+
+export const headingLevel4Command: Command = {
+  execute: ({ initialState, textApi }) => {
+    setHeader(initialState, textApi, "#### ");
+  }
+};
diff --git a/src/commands/markdown-commands/headingLevel5Command.tsx b/src/commands/markdown-commands/headingLevel5Command.tsx
new file mode 100644
index 0000000..46b1de2
--- /dev/null
+++ b/src/commands/markdown-commands/headingLevel5Command.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Command } from "../command";
+import { setHeader } from "../../helpers/headerHelpers";
+
+export const headingLevel5Command: Command = {
+  execute: ({ initialState, textApi }) => {
+    setHeader(initialState, textApi, "##### ");
+  }
+};
diff --git a/src/commands/markdown-commands/headingLevel6Command.tsx b/src/commands/markdown-commands/headingLevel6Command.tsx
new file mode 100644
index 0000000..71c0cbd
--- /dev/null
+++ b/src/commands/markdown-commands/headingLevel6Command.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Command } from "../command";
+import { setHeader } from "../../helpers/headerHelpers";
+
+export const headingLevel6Command: Command = {
+  execute: ({ initialState, textApi }) => {
+    setHeader(initialState, textApi, "###### ");
+  }
+};
diff --git a/src/commands/markdown-commands/headerCommand.tsx b/src/helpers/headerHelpers.ts
similarity index 62%
rename from src/commands/markdown-commands/headerCommand.tsx
rename to src/helpers/headerHelpers.ts
index 56fcd8a..f35bbe9 100644
--- a/src/commands/markdown-commands/headerCommand.tsx
+++ b/src/helpers/headerHelpers.ts
@@ -1,9 +1,7 @@
-import * as React from "react";
-import { Command } from "../command";
-import { TextController, TextState } from "../../types/CommandOptions";
-import { getSelectedText, selectWord } from "../../helpers/textHelpers";
+import { TextController, TextState } from "../types/CommandOptions";
+import { getSelectedText, selectWord } from "./textHelpers";
 
-function setHeader(
+export function setHeader(
   initialState: TextState,
   api: TextController,
   prefix: string
@@ -22,9 +20,3 @@ function setHeader(
     end: state2.selection.end
   });
 }
-
-export const headerCommand: Command = {
-  execute: ({ initialState, textApi }) => {
-    setHeader(initialState, textApi, "### ");
-  }
-};
diff --git a/src/index.ts b/src/index.ts
index 44b8018..c132138 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
 // Individual commands
-import { headerCommand } from "./commands/markdown-commands/headerCommand";
+import { headingLevel1Command } from "./commands/markdown-commands/headingLevel1Command";
 import { boldCommand } from "./commands/markdown-commands/boldCommand";
 import { italicCommand } from "./commands/markdown-commands/italicCommand";
 import { strikethroughCommand } from "./commands/markdown-commands/strikethroughCommand";
@@ -11,23 +11,29 @@ import type { TextController } from "./types/CommandOptions";
 import { TextAreaTextController } from "./text/textarea-text-controller";
 import * as textHelpers from "./helpers/textHelpers";
 import * as listHelpers from "./helpers/listHelpers";
+import * as headerHelpers from "./helpers/headerHelpers"
 import { codeCommand } from "./commands/markdown-commands/codeCommand";
 import { useTextAreaMarkdownEditor } from "./hooks/use-markdown-editor";
 import { codeBlockCommand } from "./commands/markdown-commands/codeBlockCommand";
 import { checkedListCommand } from "./commands/markdown-commands/checkedListCommand";
 import { orderedListCommand } from "./commands/markdown-commands/orderedListCommand";
 import { unorderedListCommand } from "./commands/markdown-commands/unorderedListCommand";
+import { headingLevel2Command } from "./commands/markdown-commands/headingLevel2Command";
+import { headingLevel3Command } from "./commands/markdown-commands/headingLevel3Command";
+import { headingLevel4Command } from "./commands/markdown-commands/headingLevel4Command";
+import { headingLevel5Command } from "./commands/markdown-commands/headingLevel5Command";
+import { headingLevel6Command } from "./commands/markdown-commands/headingLevel6Command";
 
 export {
   // helpers
   textHelpers,
   listHelpers,
+  headerHelpers,
   // controllers
   CommandController,
   TextController,
   TextAreaTextController,
   // commands
-  headerCommand,
   boldCommand,
   italicCommand,
   strikethroughCommand,
@@ -39,6 +45,12 @@ export {
   orderedListCommand,
   unorderedListCommand,
   imageCommand,
-    // hooks
+  headingLevel1Command,
+  headingLevel2Command,
+  headingLevel3Command,
+  headingLevel4Command,
+  headingLevel5Command,
+  headingLevel6Command,
+  // hooks
   useTextAreaMarkdownEditor
 };