From 9fbceff07094af783aa6005c33dbb86ef75169c1 Mon Sep 17 00:00:00 2001
From: andrerpena <andrerpena@gmail.com>
Date: Mon, 2 May 2022 11:03:26 +0100
Subject: [PATCH] Improvements in the text APIs

---
 demo/index.tsx                                |  39 +++---
 src/commands/command-controller.ts            |  32 ++---
 src/commands/command.ts                       |  10 +-
 src/commands/markdown-commands/bold.tsx       |  31 ++++-
 src/commands/markdown-commands/code.tsx       |  68 +++++------
 src/commands/markdown-commands/header.tsx     |  10 +-
 src/commands/markdown-commands/image.tsx      |   7 +-
 src/commands/markdown-commands/italic.tsx     |  30 ++++-
 src/commands/markdown-commands/link.tsx       |  11 +-
 src/commands/markdown-commands/list.tsx       |  25 ++--
 src/commands/markdown-commands/quote.tsx      |  13 +-
 .../markdown-commands/strikethrough.tsx       |  11 +-
 src/helpers/markdown-helpers.ts               | 113 ------------------
 src/hooks/use-markdown-editor.ts              |   8 +-
 src/index.ts                                  |   8 +-
 src/text/textarea-text-controller.ts          |   6 +-
 src/types/CommandOptions.ts                   |   4 -
 src/types/TextSection.ts                      |   6 -
 18 files changed, 179 insertions(+), 253 deletions(-)
 delete mode 100644 src/helpers/markdown-helpers.ts
 delete mode 100644 src/types/TextSection.ts

diff --git a/demo/index.tsx b/demo/index.tsx
index 76ed0da..37af6ea 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -1,24 +1,20 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
-import {
-  Box,
-  Button,
-  ChakraProvider,
-  HStack,
-  Textarea
-} from "@chakra-ui/react";
+import { Box, ChakraProvider, HStack, Textarea } from "@chakra-ui/react";
 import { useTextAreaMarkdownEditor } from "../src/hooks/use-markdown-editor";
-import { faBold, faItalic } from "@fortawesome/free-solid-svg-icons";
+import { faBold, faItalic, faCode } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { bold, italic } from "../src";
+import { bold, code, italic } from "../src";
+import { ToolbarButton } from "./toolbar-button";
 
 export type DemoProps = {};
 
-export const Demo: React.FunctionComponent<DemoProps> = props => {
+export const Demo: React.FunctionComponent<DemoProps> = () => {
   const { ref, commandController } = useTextAreaMarkdownEditor({
     commandMap: {
       bold: bold,
-      italic: italic
+      italic: italic,
+      code: code
     }
   });
 
@@ -26,26 +22,27 @@ export const Demo: React.FunctionComponent<DemoProps> = props => {
     <ChakraProvider>
       <Box p={3}>
         <HStack py={2}>
-          <Button
-            variant={"outline"}
-            size={"sm"}
-            color={"gray.600"}
+          <ToolbarButton
             onClick={async () => {
               await commandController.executeCommand("bold");
             }}
           >
             <FontAwesomeIcon icon={faBold} />
-          </Button>
-          <Button
-            variant={"outline"}
-            size={"sm"}
-            color={"gray.600"}
+          </ToolbarButton>
+          <ToolbarButton
             onClick={async () => {
               await commandController.executeCommand("italic");
             }}
           >
             <FontAwesomeIcon icon={faItalic} />
-          </Button>
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={async () => {
+              await commandController.executeCommand("code");
+            }}
+          >
+            <FontAwesomeIcon icon={faCode} />
+          </ToolbarButton>
         </HStack>
         <Textarea
           ref={ref}
diff --git a/src/commands/command-controller.ts b/src/commands/command-controller.ts
index 06948ab..bf80620 100644
--- a/src/commands/command-controller.ts
+++ b/src/commands/command-controller.ts
@@ -34,28 +34,30 @@ export class CommandController {
   ): Promise<void> {
     if (this.isExecuting) {
       // The simplest thing to do is to ignore commands while
-      // there is already a command executing. The alternative would be to queue commands
+      // there is already a command execu
+      // ting. The alternative would be to queue commands
       // but there is no guarantee that the state after one command executes will still be compatible
       // with the next one. In fact, it is likely not to be.
       return;
     }
 
-    this.isExecuting = true;
     const command = this.commandMap[commandName];
-    const result = command.execute({
+
+    if (!command) {
+      throw new Error(
+        `Cannot execute command. Command not found: ${commandName}`
+      );
+    }
+
+    const executeOptions = {
       initialState: this.textController.getState(),
-      textApi: this.textController,
-      context
-    });
-    await result;
-    this.isExecuting = false;
-  }
+      textApi: this.textController
+    };
 
-  /**
-   * Returns a command by name
-   * @param name
-   */
-  getCommandByName(name: string) {
-    return this.commandMap[name];
+    if (command.shouldUndo?.(executeOptions) && command?.undo) {
+      command.undo(executeOptions);
+    } else {
+      await command.execute(executeOptions);
+    }
   }
 }
diff --git a/src/commands/command.ts b/src/commands/command.ts
index b4953ea..1072ff2 100644
--- a/src/commands/command.ts
+++ b/src/commands/command.ts
@@ -3,15 +3,19 @@ import { TextController, TextState } from "../types/CommandOptions";
 export interface ExecuteOptions {
   initialState: TextState;
   textApi: TextController;
-  context?: CommandContext;
 }
 
 export interface Command {
-  execute: (options: ExecuteOptions) => void | Promise<void>;
+  shouldUndo?: (options: Pick<ExecuteOptions, "initialState">) => boolean;
+  execute: (options: ExecuteOptions) => void;
+  undo?: (options: ExecuteOptions) => void;
 }
 
 export interface CommandContext {
   type: string;
 }
 
-export type CommandMap = Record<string, Command>;
+export type CommandMap<CommandName extends string> = Record<
+  CommandName,
+  Command
+>;
diff --git a/src/commands/markdown-commands/bold.tsx b/src/commands/markdown-commands/bold.tsx
index 26db20d..c4dac04 100644
--- a/src/commands/markdown-commands/bold.tsx
+++ b/src/commands/markdown-commands/bold.tsx
@@ -1,21 +1,42 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
-
+import { textHelpers } from "../../helpers/textHelpers";
 export const bold: Command = {
+  shouldUndo: options => {
+    return (
+      textHelpers.getCharactersBeforeSelection(options.initialState, 2) ===
+        "**" &&
+      textHelpers.getCharactersAfterSelection(options.initialState, 2) === "**"
+    );
+  },
   execute: ({ initialState, textApi }) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
-    const newSelectionRange = markdownHelpers.selectWord({
+    const newSelectionRange = textHelpers.selectWord({
       text: initialState.text,
       selection: initialState.selection
     });
     const state1 = textApi.setSelectionRange(newSelectionRange);
     // Replaces the current selection with the bold mark up
-    const state2 = textApi.replaceSelection(`**${state1.selectedText}**`);
+    const state2 = textApi.replaceSelection(
+      `**${textHelpers.getSelectedText(state1)}**`
+    );
     // Adjust the selection to not contain the **
     textApi.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText.length,
+      start:
+        state2.selection.end - 2 - textHelpers.getSelectedText(state1).length,
       end: state2.selection.end - 2
     });
+  },
+  undo: ({ initialState, textApi }) => {
+    const text = textHelpers.getSelectedText(initialState);
+    textApi.setSelectionRange({
+      start: initialState.selection.start - 2,
+      end: initialState.selection.end + 2
+    });
+    textApi.replaceSelection(text);
+    textApi.setSelectionRange({
+      start: initialState.selection.start - 2,
+      end: initialState.selection.end - 2
+    });
   }
 };
diff --git a/src/commands/markdown-commands/code.tsx b/src/commands/markdown-commands/code.tsx
index d723516..d8e760c 100644
--- a/src/commands/markdown-commands/code.tsx
+++ b/src/commands/markdown-commands/code.tsx
@@ -1,53 +1,43 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 
 export const code: Command = {
-  execute: async ({ textApi, initialState }) => {
+  shouldUndo: options => {
+    return (
+      textHelpers.getCharactersBeforeSelection(options.initialState, 1) ===
+        "`" &&
+      textHelpers.getCharactersAfterSelection(options.initialState, 1) === "`"
+    );
+  },
+  execute: ({ initialState, textApi }) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
-    const newSelectionRange = markdownHelpers.selectWord({
+    const newSelectionRange = textHelpers.selectWord({
       text: initialState.text,
       selection: initialState.selection
     });
     const state1 = textApi.setSelectionRange(newSelectionRange);
-
-    // when there's no breaking line
-    if (state1.selectedText.indexOf("\n") === -1) {
-      textApi.replaceSelection(`\`${state1.selectedText}\``);
-      // Adjust the selection to not contain the **
-
-      const selectionStart = state1.selection.start + 1;
-      const selectionEnd = selectionStart + state1.selectedText.length;
-
-      textApi.setSelectionRange({
-        start: selectionStart,
-        end: selectionEnd
-      });
-      return;
-    }
-
-    const breaksBeforeCount = markdownHelpers.getBreaksNeededForEmptyLineBefore(
-      state1.text,
-      state1.selection.start
-    );
-    const breaksBefore = Array(breaksBeforeCount + 1).join("\n");
-
-    const breaksAfterCount = markdownHelpers.getBreaksNeededForEmptyLineAfter(
-      state1.text,
-      state1.selection.end
+    // Replaces the current selection with the italic mark up
+    const state2 = textApi.replaceSelection(
+      `\`${textHelpers.getSelectedText(state1)}\``
     );
-    const breaksAfter = Array(breaksAfterCount + 1).join("\n");
-
-    textApi.replaceSelection(
-      `${breaksBefore}\`\`\`\n${state1.selectedText}\n\`\`\`${breaksAfter}`
-    );
-
-    const selectionStart = state1.selection.start + breaksBeforeCount + 4;
-    const selectionEnd = selectionStart + state1.selectedText.length;
-
+    // Adjust the selection to not contain the *
+    textApi.setSelectionRange({
+      start:
+        state2.selection.end - 1 - textHelpers.getSelectedText(state1).length,
+      end: state2.selection.end - 1
+    });
+  },
+  undo: ({ initialState, textApi }) => {
+    const text = textHelpers.getSelectedText(initialState);
+    textApi.setSelectionRange({
+      start: initialState.selection.start - 1,
+      end: initialState.selection.end + 1
+    });
+    textApi.replaceSelection(text);
     textApi.setSelectionRange({
-      start: selectionStart,
-      end: selectionEnd
+      start: initialState.selection.start - 1,
+      end: initialState.selection.end - 1
     });
   }
 };
diff --git a/src/commands/markdown-commands/header.tsx b/src/commands/markdown-commands/header.tsx
index 6ab8b52..186dd8f 100644
--- a/src/commands/markdown-commands/header.tsx
+++ b/src/commands/markdown-commands/header.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 import { TextController, TextState } from "../../types/CommandOptions";
 
 function setHeader(
@@ -9,16 +9,18 @@ function setHeader(
   prefix: string
 ) {
   // Adjust the selection to encompass the whole word if the caret is inside one
-  const newSelectionRange = markdownHelpers.selectWord({
+  const newSelectionRange = textHelpers.selectWord({
     text: initialState.text,
     selection: initialState.selection
   });
   const state1 = api.setSelectionRange(newSelectionRange);
   // Add the prefix to the selection
-  const state2 = api.replaceSelection(`${prefix}${state1.selectedText}`);
+  const state2 = api.replaceSelection(
+    `${prefix}${textHelpers.getSelectedText(state1)}`
+  );
   // Adjust the selection to not contain the prefix
   api.setSelectionRange({
-    start: state2.selection.end - state1.selectedText.length,
+    start: state2.selection.end - textHelpers.getSelectedText(state1).length,
     end: state2.selection.end
   });
 }
diff --git a/src/commands/markdown-commands/image.tsx b/src/commands/markdown-commands/image.tsx
index 9a795bf..8b5c063 100644
--- a/src/commands/markdown-commands/image.tsx
+++ b/src/commands/markdown-commands/image.tsx
@@ -1,19 +1,20 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 
 export const image: Command = {
   execute: ({ initialState, textApi }) => {
     // Replaces the current selection with the whole word selected
     const state1 = textApi.setSelectionRange(
-      markdownHelpers.selectWord({
+      textHelpers.selectWord({
         text: initialState.text,
         selection: initialState.selection
       })
     );
     // Replaces the current selection with the image
     const imageTemplate =
-      state1.selectedText || "https://example.com/your-image.png";
+      textHelpers.getSelectedText(state1) ||
+      "https://example.com/your-image.png";
     textApi.replaceSelection(`![](${imageTemplate})`);
     // Adjust the selection to not contain the **
     textApi.setSelectionRange({
diff --git a/src/commands/markdown-commands/italic.tsx b/src/commands/markdown-commands/italic.tsx
index bdc9817..65287d0 100644
--- a/src/commands/markdown-commands/italic.tsx
+++ b/src/commands/markdown-commands/italic.tsx
@@ -1,21 +1,43 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 
 export const italic: Command = {
+  shouldUndo: options => {
+    return (
+      textHelpers.getCharactersBeforeSelection(options.initialState, 1) ===
+        "*" &&
+      textHelpers.getCharactersAfterSelection(options.initialState, 1) === "*"
+    );
+  },
   execute: ({ initialState, textApi }) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
-    const newSelectionRange = markdownHelpers.selectWord({
+    const newSelectionRange = textHelpers.selectWord({
       text: initialState.text,
       selection: initialState.selection
     });
     const state1 = textApi.setSelectionRange(newSelectionRange);
     // Replaces the current selection with the italic mark up
-    const state2 = textApi.replaceSelection(`*${state1.selectedText}*`);
+    const state2 = textApi.replaceSelection(
+      `*${textHelpers.getSelectedText(state1)}*`
+    );
     // Adjust the selection to not contain the *
     textApi.setSelectionRange({
-      start: state2.selection.end - 1 - state1.selectedText.length,
+      start:
+        state2.selection.end - 1 - textHelpers.getSelectedText(state1).length,
       end: state2.selection.end - 1
     });
+  },
+  undo: ({ initialState, textApi }) => {
+    const text = textHelpers.getSelectedText(initialState);
+    textApi.setSelectionRange({
+      start: initialState.selection.start - 1,
+      end: initialState.selection.end + 1
+    });
+    textApi.replaceSelection(text);
+    textApi.setSelectionRange({
+      start: initialState.selection.start - 1,
+      end: initialState.selection.end - 1
+    });
   }
 };
diff --git a/src/commands/markdown-commands/link.tsx b/src/commands/markdown-commands/link.tsx
index c74bd07..68459af 100644
--- a/src/commands/markdown-commands/link.tsx
+++ b/src/commands/markdown-commands/link.tsx
@@ -1,20 +1,23 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 
 export const link: Command = {
   execute: ({ initialState, textApi }) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
-    const newSelectionRange = markdownHelpers.selectWord({
+    const newSelectionRange = textHelpers.selectWord({
       text: initialState.text,
       selection: initialState.selection
     });
     const state1 = textApi.setSelectionRange(newSelectionRange);
     // Replaces the current selection with the bold mark up
-    const state2 = textApi.replaceSelection(`[${state1.selectedText}](url)`);
+    const state2 = textApi.replaceSelection(
+      `[${textHelpers.getSelectedText(state1)}](url)`
+    );
     // Adjust the selection to not contain the **
     textApi.setSelectionRange({
-      start: state2.selection.end - 6 - state1.selectedText.length,
+      start:
+        state2.selection.end - 6 - textHelpers.getSelectedText(state1).length,
       end: state2.selection.end - 6
     });
   }
diff --git a/src/commands/markdown-commands/list.tsx b/src/commands/markdown-commands/list.tsx
index b69e1e7..aa21299 100644
--- a/src/commands/markdown-commands/list.tsx
+++ b/src/commands/markdown-commands/list.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { TextController, TextState } from "../../types/CommandOptions";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 
 export type AlterLineFunction = (line: string, index: number) => string;
 
@@ -34,37 +34,42 @@ export function insertBeforeEachLine(
 
 export const makeList = (
   state0: TextState,
-  api: TextController,
+  textController: TextController,
   insertBefore: string | AlterLineFunction
 ) => {
   // Adjust the selection to encompass the whole word if the caret is inside one
-  const newSelectionRange = markdownHelpers.selectWord({
+  const newSelectionRange = textHelpers.selectWord({
     text: state0.text,
     selection: state0.selection
   });
-  const state1 = api.setSelectionRange(newSelectionRange);
+  const state1 = textController.setSelectionRange(newSelectionRange);
 
-  const breaksBeforeCount = markdownHelpers.getBreaksNeededForEmptyLineBefore(
+  const breaksBeforeCount = textHelpers.getBreaksNeededForEmptyLineBefore(
     state1.text,
     state1.selection.start
   );
   const breaksBefore = Array(breaksBeforeCount + 1).join("\n");
 
-  const breaksAfterCount = markdownHelpers.getBreaksNeededForEmptyLineAfter(
+  const breaksAfterCount = textHelpers.getBreaksNeededForEmptyLineAfter(
     state1.text,
     state1.selection.end
   );
   const breaksAfter = Array(breaksAfterCount + 1).join("\n");
 
-  const modifiedText = insertBeforeEachLine(state1.selectedText, insertBefore);
+  const modifiedText = insertBeforeEachLine(
+    textHelpers.getSelectedText(state1),
+    insertBefore
+  );
 
-  api.replaceSelection(
+  textController.replaceSelection(
     `${breaksBefore}${modifiedText.modifiedText}${breaksAfter}`
   );
 
   // Specifically when the text has only one line, we can exclude the "- ", for example, from the selection
   const oneLinerOffset =
-    state1.selectedText.indexOf("\n") === -1 ? modifiedText.insertionLength : 0;
+    textHelpers.getSelectedText(state1).indexOf("\n") === -1
+      ? modifiedText.insertionLength
+      : 0;
 
   const selectionStart =
     state1.selection.start + breaksBeforeCount + oneLinerOffset;
@@ -72,7 +77,7 @@ export const makeList = (
     selectionStart + modifiedText.modifiedText.length - oneLinerOffset;
 
   // Adjust the selection to not contain the **
-  api.setSelectionRange({
+  textController.setSelectionRange({
     start: selectionStart,
     end: selectionEnd
   });
diff --git a/src/commands/markdown-commands/quote.tsx b/src/commands/markdown-commands/quote.tsx
index 7dd4c7b..5eca543 100644
--- a/src/commands/markdown-commands/quote.tsx
+++ b/src/commands/markdown-commands/quote.tsx
@@ -1,23 +1,23 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 
 export const quote: Command = {
   execute: ({ initialState, textApi }) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
-    const newSelectionRange = markdownHelpers.selectWord({
+    const newSelectionRange = textHelpers.selectWord({
       text: initialState.text,
       selection: initialState.selection
     });
     const state1 = textApi.setSelectionRange(newSelectionRange);
 
-    const breaksBeforeCount = markdownHelpers.getBreaksNeededForEmptyLineBefore(
+    const breaksBeforeCount = textHelpers.getBreaksNeededForEmptyLineBefore(
       state1.text,
       state1.selection.start
     );
     const breaksBefore = Array(breaksBeforeCount + 1).join("\n");
 
-    const breaksAfterCount = markdownHelpers.getBreaksNeededForEmptyLineAfter(
+    const breaksAfterCount = textHelpers.getBreaksNeededForEmptyLineAfter(
       state1.text,
       state1.selection.end
     );
@@ -25,11 +25,12 @@ export const quote: Command = {
 
     // Replaces the current selection with the quote mark up
     textApi.replaceSelection(
-      `${breaksBefore}> ${state1.selectedText}${breaksAfter}`
+      `${breaksBefore}> ${textHelpers.getSelectedText(state1)}${breaksAfter}`
     );
 
     const selectionStart = state1.selection.start + breaksBeforeCount + 2;
-    const selectionEnd = selectionStart + state1.selectedText.length;
+    const selectionEnd =
+      selectionStart + textHelpers.getSelectedText(state1).length;
 
     textApi.setSelectionRange({
       start: selectionStart,
diff --git a/src/commands/markdown-commands/strikethrough.tsx b/src/commands/markdown-commands/strikethrough.tsx
index 39adf3f..764efed 100644
--- a/src/commands/markdown-commands/strikethrough.tsx
+++ b/src/commands/markdown-commands/strikethrough.tsx
@@ -1,20 +1,23 @@
 import * as React from "react";
 import { Command } from "../command";
-import { markdownHelpers } from "../../helpers/markdown-helpers";
+import { textHelpers } from "../../helpers/textHelpers";
 
 export const strikethrough: Command = {
   execute: ({ initialState, textApi }) => {
     // Adjust the selection to encompass the whole word if the caret is inside one
-    const newSelectionRange = markdownHelpers.selectWord({
+    const newSelectionRange = textHelpers.selectWord({
       text: initialState.text,
       selection: initialState.selection
     });
     const state1 = textApi.setSelectionRange(newSelectionRange);
     // Replaces the current selection with the strikethrough mark up
-    const state2 = textApi.replaceSelection(`~~${state1.selectedText}~~`);
+    const state2 = textApi.replaceSelection(
+      `~~${textHelpers.getSelectedText(state1)}~~`
+    );
     // Adjust the selection to not contain the ~~
     textApi.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText.length,
+      start:
+        state2.selection.end - 2 - textHelpers.getSelectedText(state1).length,
       end: state2.selection.end - 2
     });
   }
diff --git a/src/helpers/markdown-helpers.ts b/src/helpers/markdown-helpers.ts
deleted file mode 100644
index ff42cad..0000000
--- a/src/helpers/markdown-helpers.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { TextSection } from "../types/TextSection";
-import { SelectionRange } from "../types/SelectionRange";
-
-/**
- * A list of helpers for manipulating markdown text.
- * These helpers do not interface with a textarea. For that, see
- */
-export const markdownHelpers = {
-  getSurroundingWord: function(text: string, position: number): SelectionRange {
-    if (!text) throw Error("Argument 'text' should be truthy");
-
-    const isWordDelimiter = (c: string) => c === " " || c.charCodeAt(0) === 10;
-
-    // leftIndex is initialized to 0 because if selection is 0, it won't even enter the iteration
-    let start = 0;
-    // rightIndex is initialized to text.length because if selection is equal to text.length it won't even enter the interation
-    let end = text.length;
-
-    // iterate to the left
-    for (let i = position; i - 1 > -1; i--) {
-      if (isWordDelimiter(text[i - 1])) {
-        start = i;
-        break;
-      }
-    }
-
-    // iterate to the right
-    for (let i = position; i < text.length; i++) {
-      if (isWordDelimiter(text[i])) {
-        end = i;
-        break;
-      }
-    }
-
-    return { start, end };
-  },
-
-  /**
-   * If the cursor is inside a word and (selection.start === selection.end)
-   * returns a new Selection where the whole word is selected
-   * @param text
-   * @param selection
-   */
-  selectWord: function({ text, selection }: TextSection): SelectionRange {
-    if (text && text.length && selection.start === selection.end) {
-      // the user is pointing to a word
-      return this.getSurroundingWord(text, selection.start);
-    }
-    return selection;
-  },
-
-  /**
-   *  Gets the number of line-breaks that would have to be inserted before the given 'startPosition'
-   *  to make sure there's an empty line between 'startPosition' and the previous text
-   */
-  getBreaksNeededForEmptyLineBefore: function(
-    text = "",
-    startPosition: number
-  ): number {
-    if (startPosition === 0) return 0;
-
-    // rules:
-    // - If we're in the first line, no breaks are needed
-    // - Otherwise there must be 2 breaks before the previous character. Depending on how many breaks exist already, we
-    //      may need to insert 0, 1 or 2 breaks
-
-    let neededBreaks = 2;
-    let isInFirstLine = true;
-    for (let i = startPosition - 1; i >= 0 && neededBreaks >= 0; i--) {
-      switch (text.charCodeAt(i)) {
-        case 32: // blank space
-          continue;
-        case 10: // line break
-          neededBreaks--;
-          isInFirstLine = false;
-          break;
-        default:
-          return neededBreaks;
-      }
-    }
-    return isInFirstLine ? 0 : neededBreaks;
-  },
-
-  /**
-   *  Gets the number of line-breaks that would have to be inserted after the given 'startPosition'
-   *  to make sure there's an empty line between 'startPosition' and the next text
-   */
-  getBreaksNeededForEmptyLineAfter(text = "", startPosition: number): number {
-    if (startPosition === text.length - 1) return 0;
-
-    // rules:
-    // - If we're in the first line, no breaks are needed
-    // - Otherwise there must be 2 breaks before the previous character. Depending on how many breaks exist already, we
-    //      may need to insert 0, 1 or 2 breaks
-
-    let neededBreaks = 2;
-    let isInLastLine = true;
-    for (let i = startPosition; i < text.length && neededBreaks >= 0; i++) {
-      switch (text.charCodeAt(i)) {
-        case 32:
-          continue;
-        case 10: {
-          neededBreaks--;
-          isInLastLine = false;
-          break;
-        }
-        default:
-          return neededBreaks;
-      }
-    }
-    return isInLastLine ? 0 : neededBreaks;
-  }
-};
diff --git a/src/hooks/use-markdown-editor.ts b/src/hooks/use-markdown-editor.ts
index d62e198..9b1e940 100644
--- a/src/hooks/use-markdown-editor.ts
+++ b/src/hooks/use-markdown-editor.ts
@@ -10,12 +10,12 @@ export type UseTextAreaMarkdownEditorResult = {
   commandController: CommandController;
 };
 
-export type UseTextAreaMarkdownEditorOptions = {
-  commandMap: CommandMap;
+export type UseTextAreaMarkdownEditorOptions<CommandName extends string> = {
+  commandMap: CommandMap<CommandName>;
 };
 
-export function useTextAreaMarkdownEditor(
-  options: UseTextAreaMarkdownEditorOptions
+export function useTextAreaMarkdownEditor<CommandName extends string>(
+  options: UseTextAreaMarkdownEditorOptions<CommandName>
 ): UseTextAreaMarkdownEditorResult {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
diff --git a/src/index.ts b/src/index.ts
index 5fd467e..5d3b369 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,7 +7,7 @@ import { italic } from "./commands/markdown-commands/italic";
 import { strikethrough } from "./commands/markdown-commands/strikethrough";
 import { link } from "./commands/markdown-commands/link";
 import { quote } from "./commands/markdown-commands/quote";
-import { code } from "./commands/markdown-commands/code";
+import { codeBlock } from "./commands/markdown-commands/codeBlock";
 import {
   checkedListCommand,
   orderedListCommand,
@@ -17,10 +17,11 @@ import { image } from "./commands/markdown-commands/image";
 import { CommandController } from "./commands/command-controller";
 import type { TextController } from "./types/CommandOptions";
 import { TextAreaTextController } from "./text/textarea-text-controller";
-import { markdownHelpers } from "./helpers/markdown-helpers";
+import { textHelpers } from "./helpers/textHelpers";
+import { code } from "./commands/markdown-commands/code";
 
 export {
-  markdownHelpers,
+  textHelpers,
   CommandController,
   TextController,
   TextAreaTextController,
@@ -31,6 +32,7 @@ export {
   link,
   quote,
   code,
+  codeBlock,
   checkedListCommand,
   orderedListCommand,
   unorderedListCommand,
diff --git a/src/text/textarea-text-controller.ts b/src/text/textarea-text-controller.ts
index bcb48e4..70a02d7 100644
--- a/src/text/textarea-text-controller.ts
+++ b/src/text/textarea-text-controller.ts
@@ -44,11 +44,7 @@ export function getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {
       start: textArea.selectionStart,
       end: textArea.selectionEnd
     },
-    text: textArea.value,
-    selectedText: textArea.value.slice(
-      textArea.selectionStart,
-      textArea.selectionEnd
-    )
+    text: textArea.value
   };
 }
 
diff --git a/src/types/CommandOptions.ts b/src/types/CommandOptions.ts
index 0bdad96..e198a78 100644
--- a/src/types/CommandOptions.ts
+++ b/src/types/CommandOptions.ts
@@ -8,10 +8,6 @@ export interface TextState {
    * All the text in the editor
    */
   text: string;
-  /**
-   * The text that is selected
-   */
-  selectedText: string;
   /**
    * The section of the text that is selected
    */
diff --git a/src/types/TextSection.ts b/src/types/TextSection.ts
deleted file mode 100644
index 5768e44..0000000
--- a/src/types/TextSection.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { SelectionRange } from "./SelectionRange";
-
-export interface TextSection {
-  text: string;
-  selection: SelectionRange;
-}