Font-awesome dependencies have been removed

Author: andrerpena

src/commands/boldCommand.tsx

@@ -1,23 +1,22 @@
 import * as React from "react";
-import { Command } from "../types";
-import { TextApi, TextState } from "../types/CommandOptions";
-import { selectWord } from "../util/MarkdownUtil";
+import {Command} from "../types";
+import {TextApi, TextState} from "../types/CommandOptions";
+import {selectWord} from "../util/MarkdownUtil";
 
 export const boldCommand: Command = {
-  name: "bold",
-  buttonContentBuilder: ({ iconProvider }) => iconProvider("bold"),
-  buttonProps: { "aria-label": "Add bold text" },
-  execute: (state0: TextState, api: TextApi) => {
-    // Adjust the selection to encompass the whole word if the caret is inside one
-    const newSelectionRange = selectWord({ text: state0.text, selection: state0.selection });
-    const state1 = api.setSelectionRange(newSelectionRange);
-    // Replaces the current selection with the bold mark up
-    const state2 = api.replaceSelection(`**${state1.selectedText}**`);
-    // Adjust the selection to not contain the **
-    api.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText.length,
-      end: state2.selection.end - 2
-    });
-  },
-  keyCommand: "bold",
+    name: "bold",
+    buttonProps: {"aria-label": "Add bold text"},
+    execute: (state0: TextState, api: TextApi) => {
+        // Adjust the selection to encompass the whole word if the caret is inside one
+        const newSelectionRange = selectWord({text: state0.text, selection: state0.selection});
+        const state1 = api.setSelectionRange(newSelectionRange);
+        // Replaces the current selection with the bold mark up
+        const state2 = api.replaceSelection(`**${state1.selectedText}**`);
+        // Adjust the selection to not contain the **
+        api.setSelectionRange({
+            start: state2.selection.end - 2 - state1.selectedText.length,
+            end: state2.selection.end - 2
+        });
+    },
+    keyCommand: "bold",
 };

src/commands/checkListCommand.tsx

@@ -5,7 +5,6 @@ import {getBreaksNeededForEmptyLineAfter, getBreaksNeededForEmptyLineBefore, sel
 
 export const codeCommand: Command = {
     name: "code",
-    buttonContentBuilder: ({iconProvider}) => iconProvider("code"),
     buttonProps: {"aria-label": "Add bold text"},
     execute: (state0: TextState, api: TextApi) => {
         // Adjust the selection to encompass the whole word if the caret is inside one

src/commands/codeCommand.tsx

@@ -18,27 +18,26 @@ function setHeader(state0: TextState, api: TextApi, prefix: string) {
 
 export const headerCommand: Command = {
     name: "header",
-    buttonContentBuilder: ({iconProvider}) => iconProvider("heading"),
     buttonProps: {"aria-label": "Add header"},
     children: [
         {
             name: "header-1",
-            buttonContentBuilder: () => <p className="header-1">Header 1</p>,
+            icon: () => <p className="header-1">Header 1</p>,
             execute: (state: TextState, api: TextApi) => setHeader(state, api, "# "),
         },
         {
             name: "header-2",
-            buttonContentBuilder: () => <p className="header-2">Header 2</p>,
+            icon: () => <p className="header-2">Header 2</p>,
             execute: (state: TextState, api: TextApi) => setHeader(state, api, "## "),
         },
         {
             name: "header-3",
-            buttonContentBuilder: () => <p className="header-3">Header 3</p>,
+            icon: () => <p className="header-3">Header 3</p>,
             execute: (state: TextState, api: TextApi) => setHeader(state, api, "### "),
         },
         {
             name: "header-4",
-            buttonContentBuilder: () => <p className="header-4">Header 4</p>,
+            icon: () => <p className="header-4">Header 4</p>,
             execute: (state: TextState, api: TextApi) => setHeader(state, api, "#### "),
         },
     ],

src/commands/headerCommand.tsx

@@ -5,7 +5,6 @@ import {selectWord} from "../util/MarkdownUtil";
 
 export const imageCommand: Command = {
     name: "image",
-    buttonContentBuilder: ({iconProvider}) => iconProvider("image"),
     buttonProps: {"aria-label": "Add image"},
     execute: (state0: TextState, api: TextApi) => {
         // Adjust the selection to encompass the whole word if the caret is inside one

src/commands/imageCommand.tsx

@@ -1,27 +1,13 @@
 import {boldCommand} from "./boldCommand";
-// import { codeCommand } from "./codeCommand";
-// import { headerCommand } from "./headerCommand";
-// import { imageCommand } from "./imageCommand";
 import {italicCommand} from "./italicCommand";
 import {strikeThroughCommand} from "./strikethroughCommand";
-// import { linkCommand } from "./linkCommand";
-// import { orderedListCommand } from "./orderedListCommand";
-// import { quoteCommand } from "./quoteCommand";
-// import { unorderedListCommand } from "./unorderedListCommand";
-// import { checkListCommand } from "./checkListCommand";
 import {CommandGroup} from "../types";
 import {headerCommand} from "./headerCommand";
 import {linkCommand} from "./linkCommand";
 import {quoteCommand} from "./quoteCommand";
 import {codeCommand} from "./codeCommand";
 import {imageCommand} from "./imageCommand";
-import {unorderedListCommand} from "./listCommands";
-
-// const getDefaultCommands: () => CommandGroup[] = () => [
-//   { commands: [headerCommand, strikeThroughCommand, italicCommand, strikethroughCommand] },
-//   { commands: [linkCommand, quoteCommand, codeCommand, imageCommand] },
-//   { commands: [unorderedListCommand, orderedListCommand, checkListCommand] }
-// ];
+import {checkedListCommand, orderedListCommand, unorderedListCommand} from "./listCommands";
 
 const getDefaultCommands: () => CommandGroup[] = () => [
     {
@@ -31,7 +17,7 @@ const getDefaultCommands: () => CommandGroup[] = () => [
         commands: [linkCommand, quoteCommand, codeCommand, imageCommand]
     },
     {
-        commands: [unorderedListCommand]
+        commands: [unorderedListCommand, orderedListCommand, checkedListCommand]
     }
 ];
 

src/commands/index.ts

@@ -4,8 +4,7 @@ import { TextApi, TextState } from "../types/CommandOptions";
 import { selectWord } from "../util/MarkdownUtil";
 
 export const italicCommand: Command = {
-  name: "bold",
-  buttonContentBuilder: ({ iconProvider }) => iconProvider("italic"),
+  name: "italic",
   buttonProps: { "aria-label": "Add italic text" },
   execute: (state0: TextState, api: TextApi) => {
     // Adjust the selection to encompass the whole word if the caret is inside one

src/commands/italicCommand.tsx

@@ -5,7 +5,6 @@ import {selectWord} from "../util/MarkdownUtil";
 
 export const linkCommand: Command = {
     name: "link",
-    buttonContentBuilder: ({iconProvider}) => iconProvider("link"),
     buttonProps: {"aria-label": "Add bold text"},
     execute: (state0: TextState, api: TextApi) => {
         // Adjust the selection to encompass the whole word if the caret is inside one

src/commands/linkCommand.tsx

@@ -8,53 +8,77 @@ export type AlterLineFunction = (line: string, index: number) => string;
 /**
  * Inserts insertionString before each line
  */
-export function insertBeforeEachLine(selectedText: string, insert: string | AlterLineFunction):
+export function insertBeforeEachLine(selectedText: string, insertBefore: string | AlterLineFunction):
     { modifiedText: string, insertionLength: number } {
     const lines = selectedText.split(/\n/);
 
     let insertionLength = 0;
     const modifiedText = lines.map((item, index) => {
-        if (typeof insert === "string") {
-            insertionLength += insert.length;
-            return insert + item;
-        } else if (typeof insert === "function") {
-            const insertionResult = insert(item, index);
+        if (typeof insertBefore === "string") {
+            insertionLength += insertBefore.length;
+            return insertBefore + item;
+        } else if (typeof insertBefore === "function") {
+            const insertionResult = insertBefore(item, index);
             insertionLength += insertionResult.length;
-            return insert(item, index) + item;
+            return insertBefore(item, index) + item;
         }
         throw Error("insertion is expected to be either a string or a function");
     }).join("\n");
 
     return {modifiedText, insertionLength}
 }
 
-export const unorderedListCommand: Command = {
-    name: "code",
-    buttonContentBuilder: ({iconProvider}) => iconProvider("list-ul"),
-    buttonProps: {"aria-label": "Add unordered list"},
-    execute: (state0: TextState, api: TextApi) => {
-        // Adjust the selection to encompass the whole word if the caret is inside one
-        const newSelectionRange = selectWord({text: state0.text, selection: state0.selection});
-        const state1 = api.setSelectionRange(newSelectionRange);
+export const makeList = (state0: TextState, api: TextApi, insertBefore: string | AlterLineFunction) => {
+    // Adjust the selection to encompass the whole word if the caret is inside one
+    const newSelectionRange = selectWord({text: state0.text, selection: state0.selection});
+    const state1 = api.setSelectionRange(newSelectionRange);
 
-        const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
-        const breaksBefore = Array(breaksBeforeCount + 1).join("\n");
+    const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
+    const breaksBefore = Array(breaksBeforeCount + 1).join("\n");
 
-        const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
-        const breaksAfter = Array(breaksAfterCount + 1).join("\n");
+    const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
+    const breaksAfter = Array(breaksAfterCount + 1).join("\n");
 
-        const modifiedText = insertBeforeEachLine(state1.selectedText, "- ");
+    const modifiedText = insertBeforeEachLine(state1.selectedText, insertBefore);
 
-        api.replaceSelection(`${breaksBefore}${modifiedText.modifiedText}${breaksAfter}`);
+    api.replaceSelection(`${breaksBefore}${modifiedText.modifiedText}${breaksAfter}`);
 
-        const selectionStart = state1.selection.start + breaksBeforeCount;
-        const selectionEnd = selectionStart + modifiedText.modifiedText.length;
+    // 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;
 
-        // Adjust the selection to not contain the **
-        api.setSelectionRange({
-            start: selectionStart,
-            end: selectionEnd
-        });
+    const selectionStart = state1.selection.start + breaksBeforeCount + oneLinerOffset;
+    const selectionEnd = selectionStart + modifiedText.modifiedText.length - oneLinerOffset;
+
+    // Adjust the selection to not contain the **
+    api.setSelectionRange({
+        start: selectionStart,
+        end: selectionEnd
+    });
+}
+
+export const unorderedListCommand: Command = {
+    name: "unordered-list",
+    buttonProps: {"aria-label": "Add unordered list"},
+    execute: (state0: TextState, api: TextApi) => {
+        makeList(state0, api, "- ")
+    },
+    keyCommand: "code",
+};
+
+export const orderedListCommand: Command = {
+    name: "ordered-list",
+    buttonProps: {"aria-label": "Add ordered list"},
+    execute: (state0: TextState, api: TextApi) => {
+        makeList(state0, api, (item, index) => `${index + 1}. `)
+    },
+    keyCommand: "code",
+};
+
+export const checkedListCommand: Command = {
+    name: "checked-list",
+    buttonProps: {"aria-label": "Add ordered list"},
+    execute: (state0: TextState, api: TextApi) => {
+        makeList(state0, api, (item, index) => `${index + 1}. `)
     },
     keyCommand: "code",
-}
+};