Adding heading commands

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}

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",

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, "# ");
+  }
+};

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, "## ");
+  }
+};

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, "### ");
+  }
+};

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, "#### ");
+  }
+};

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, "##### ");
+  }
+};

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, "###### ");
+  }
+};

src/commands/markdown-commands/headerCommand.tsx → 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, "### ");
-  }
-};

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