react-headless-mde 1.0.3 → 2.0.0

package/dist/cjs/index.js

@@ -4,75 +4,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-var CommandController = /** @class */ (function () {
-    function CommandController(textController) {
+class CommandController {
+    constructor(textController, commandMap) {
         this.textController = textController;
+        this.commandMap = commandMap;
     }
-    CommandController.prototype.executeCommand = function (command, context) {
+    executeCommand(commandName) {
         var _a;
-        var executeOptions = {
-            initialState: this.textController.getState(),
-            textApi: this.textController,
-        };
-        if (command.undo && ((_a = command.shouldUndo) === null || _a === void 0 ? void 0 : _a.call(command, executeOptions))) {
-            command.undo(executeOptions);
+        const command = this.commandMap[commandName];
+        if (!command) {
+            throw new Error(`Cannot execute command. Command not found: ${commandName}`);
+        }
+        if (command.undo && ((_a = command.shouldUndo) === null || _a === void 0 ? void 0 : _a.call(command, this.textController))) {
+            command.undo(this.textController);
         }
         else {
-            command.execute(executeOptions, context);
+            command.do(this.textController);
         }
-    };
-    return CommandController;
-}());
-
-var TextAreaTextController = /** @class */ (function () {
-    function TextAreaTextController(textAreaRef) {
-        this.textAreaRef = textAreaRef;
     }
-    TextAreaTextController.prototype.getTextArea = function () {
-        var textArea = this.textAreaRef.current;
-        if (!textArea) {
-            throw new Error('TextAreaRef is not set');
-        }
-        return textArea;
-    };
-    TextAreaTextController.prototype.setSelection = function (selection) {
-        var textArea = this.getTextArea();
-        textArea.focus();
-        textArea.selectionStart = selection.start;
-        textArea.selectionEnd = selection.end;
-        return getStateFromTextArea(textArea);
-    };
-    TextAreaTextController.prototype.replaceSelection = function (text) {
-        var textArea = this.getTextArea();
-        insertText(textArea, text);
-        return getStateFromTextArea(textArea);
-    };
-    TextAreaTextController.prototype.replaceText = function (text, newText) {
-        var textArea = this.getTextArea();
-        textArea.value = textArea.value.replace(text, newText);
-        return getStateFromTextArea(textArea);
-    };
-    TextAreaTextController.prototype.getState = function () {
-        var textArea = this.getTextArea();
-        return getStateFromTextArea(textArea);
-    };
-    TextAreaTextController.prototype.moveCursorToTheEnd = function () {
-        var textArea = this.getTextArea();
-        textArea.focus();
-        textArea.selectionEnd = textArea.selectionStart = textArea.value.length;
-        return getStateFromTextArea(textArea);
-    };
-    return TextAreaTextController;
-}());
-function getStateFromTextArea(textArea) {
-    return {
-        selection: {
-            start: textArea.selectionStart,
-            end: textArea.selectionEnd,
-        },
-        text: textArea.value,
-    };
 }
+
 /**
  * Inserts the given text at the cursor. If the element contains a selection, the selection
  * will be replaced by the text.
@@ -80,13 +31,13 @@ function getStateFromTextArea(textArea) {
  *    Copyright (c) 2018 Dmitriy Kubyshkin
  *    Copied from https://github.com/grassator/insert-text-at-cursor
  */
-function insertText(input, text) {
+function insertToSelection(input, text) {
     var _a, _b, _c, _d;
     // Most of the used APIs only work with the field selected
     input.focus();
     // IE 8-10
     if (document.selection) {
-        var ieRange = document.selection.createRange();
+        const ieRange = document.selection.createRange();
         ieRange.text = text;
         // Move cursor after the inserted text
         ieRange.collapse(false /* to the end */);
@@ -94,31 +45,31 @@ function insertText(input, text) {
         return;
     }
     // Webkit + Edge
-    var isSuccess = document.execCommand('insertText', false, text);
+    const isSuccess = document.execCommand('insertText', false, text);
     if (!isSuccess) {
-        var start = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : 0;
-        var end = (_b = input.selectionEnd) !== null && _b !== void 0 ? _b : 0;
+        const start = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const end = (_b = input.selectionEnd) !== null && _b !== void 0 ? _b : 0;
         // Firefox (non-standard method)
         if (typeof input.setRangeText === 'function') {
             input.setRangeText(text);
         }
         else {
             if (canManipulateViaTextNodes(input)) {
-                var textNode = document.createTextNode(text);
-                var node = input.firstChild;
+                const textNode = document.createTextNode(text);
+                let node = input.firstChild;
                 // If textarea is empty, just insert the text
                 if (!node) {
                     input.appendChild(textNode);
                 }
                 else {
                     // Otherwise, we need to find a nodes for start and end
-                    var offset = 0;
-                    var startNode = null;
-                    var endNode = null;
+                    let offset = 0;
+                    let startNode = null;
+                    let endNode = null;
                     // To make a change we just need a Range, not a Selection
-                    var range = document.createRange();
+                    const range = document.createRange();
                     while (node && (startNode === null || endNode === null)) {
-                        var nodeLength = (_d = (_c = node.nodeValue) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
+                        const nodeLength = (_d = (_c = node.nodeValue) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
                         // if start of the selection falls into current node
                         if (start >= offset && start <= offset + nodeLength) {
                             range.setStart((startNode = node), start - offset);
@@ -141,14 +92,14 @@ function insertText(input, text) {
             }
             else {
                 // For the text input the only way is to replace the whole value :(
-                var value = input.value;
+                const value = input.value;
                 input.value = value.slice(0, start) + text + value.slice(end);
             }
         }
         // Correct the cursor position to be at the end of the insertion
         input.setSelectionRange(start + text.length, start + text.length);
         // Notify any possible listeners of the change
-        var e = document.createEvent('UIEvent');
+        const e = document.createEvent('UIEvent');
         e.initEvent('input', true, false);
         input.dispatchEvent(e);
     }
@@ -162,117 +113,77 @@ function canManipulateViaTextNodes(input) {
     if (input.nodeName !== 'TEXTAREA') {
         return false;
     }
-    var browserSupportsTextareaTextNodes;
+    let browserSupportsTextareaTextNodes;
     if (typeof browserSupportsTextareaTextNodes === 'undefined') {
-        var textarea = document.createElement('textarea');
+        const textarea = document.createElement('textarea');
         textarea.value = '1';
         browserSupportsTextareaTextNodes = !!textarea.firstChild;
     }
     return browserSupportsTextareaTextNodes;
 }
 
-var CommandsService = /** @class */ (function () {
-    function CommandsService() {
-        this.commandController = null;
-        this.textController = null;
-    }
-    CommandsService.prototype.init = function (commandController, textController) {
-        this.commandController = commandController;
-        this.textController = textController;
-    };
-    CommandsService.prototype.createCommandFn = function (command) {
-        var _this = this;
-        return function (context) {
-            if (!_this.commandController) {
-                throw new Error('Cannot execute command. CommandsService is not initialized');
-            }
-            _this.commandController.executeCommand(command, context);
-        };
-    };
-    return CommandsService;
-}());
-var commandsService = new CommandsService();
-
-function useTextAreaMarkdownEditor() {
-    var textAreaRef = react.useRef(null);
-    var textController = react.useMemo(function () {
-        var textAreaController = new TextAreaTextController(textAreaRef);
-        var commandController = new CommandController(textAreaController);
-        commandsService.init(commandController, textAreaController);
-        return textAreaController;
-    }, [textAreaRef]);
-    return {
-        textController: textController,
-        ref: textAreaRef,
-    };
-}
-
 // A list of helpers for manipulating Markdown text.
 // These helpers do not interface with a textarea.
-// Check if symbol is "space" or "new line"
-// c is optional because we pass a char by index,
+// Check if char is "space" or "new line".
+// Char is optional because we pass a char by index,
 // and theoretically index can be outside the string range. See text[i - 1] and text[i].
-var isWordDelimiter = function (c) { return !!c && (c === ' ' || c.charCodeAt(0) === 10); };
-function getSurroundingWord(text, position) {
+const isWordDelimiter = (char) => !!char && (char === ' ' || char.charCodeAt(0) === 10);
+const getSurroundingSelection = (text, position) => {
     if (text.length === 0)
         throw Error("Argument 'text' should be truthy");
     // leftIndex is initialized to 0 because if selection is 0, it won't even enter the iteration
-    var start = 0;
+    let start = 0;
     // rightIndex is initialized to text.length because if selection is equal to text.length it won't even enter the interation
-    var end = text.length;
+    let end = text.length;
     // iterate to the left
-    for (var i = position; i - 1 > -1; i--) {
+    for (let i = position; i - 1 > -1; i--) {
         if (isWordDelimiter(text[i - 1])) {
             start = i;
             break;
         }
     }
     // iterate to the right
-    for (var i = position; i < text.length; i++) {
+    for (let i = position; i < text.length; i++) {
         if (isWordDelimiter(text[i])) {
             end = i;
             break;
         }
     }
-    return { start: start, end: end };
-}
+    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
-function selectWord(_a) {
-    var text = _a.text, selection = _a.selection;
+function getWordSelection({ text, selection }) {
     if (text.length !== 0 && selection.start === selection.end) {
         // the user is pointing to a word
-        return getSurroundingWord(text, selection.start);
+        return getSurroundingSelection(text, selection.start);
     }
     return selection;
 }
-// If the cursor is inside a word (selection.start === selection.end) or there is a selection
-// returns a new Selection where (selection.start === selection.end) but the position is after word
-function selectAfterWord(_a) {
-    var text = _a.text, selection = _a.selection;
+// Returns a new Selection where (selection.start === selection.end) but the position is after word
+function selectAfterWord({ text, selection }) {
     if (text.length !== 0) {
         // the user is pointing to a word
-        var end = getSurroundingWord(text, selection.end).end;
+        const { end } = getSurroundingSelection(text, selection.end);
         return {
             start: end,
-            end: end,
+            end,
         };
     }
     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
-function getBreaksNeededForEmptyLineBefore(text, startPosition) {
-    if (text === void 0) { text = ''; }
+function getBreaksNeededForEmptyLineBefore(text = '', startPosition) {
     if (startPosition === 0)
         return 0;
-    // rules:
+    // 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
-    var neededBreaks = 2;
-    var isInFirstLine = true;
-    for (var i = startPosition - 1; i >= 0 && neededBreaks >= 0; i--) {
+    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;
@@ -288,17 +199,16 @@ function getBreaksNeededForEmptyLineBefore(text, startPosition) {
 }
 // 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
-function getBreaksNeededForEmptyLineAfter(text, startPosition) {
-    if (text === void 0) { text = ''; }
+function getBreaksNeededForEmptyLineAfter(text = '', startPosition) {
     if (startPosition === text.length - 1)
         return 0;
-    // rules:
+    // 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
-    var neededBreaks = 2;
-    var isInLastLine = true;
-    for (var i = startPosition; i < text.length && neededBreaks >= 0; i++) {
+    let neededBreaks = 2;
+    let isInLastLine = true;
+    for (let i = startPosition; i < text.length && neededBreaks >= 0; i++) {
         switch (text.charCodeAt(i)) {
             case 32:
                 continue;
@@ -316,460 +226,410 @@ function getBreaksNeededForEmptyLineAfter(text, startPosition) {
 function getSelectedText(textSection) {
     return textSection.text.slice(textSection.selection.start, textSection.selection.end);
 }
-function getCharactersBeforeSelection(textState, characters) {
+function getStringBeforeSelection(textState, characters) {
     return textState.text.slice(textState.selection.start - characters, textState.selection.start);
 }
-function getCharactersAfterSelection(textState, characters) {
+function getStringAfterSelection(textState, characters) {
     return textState.text.slice(textState.selection.end, textState.selection.end + characters);
 }
 // Inserts insertionString before each line
 function insertBeforeEachLine(selectedText, insertBefore) {
-    var lines = selectedText.split(/\n/);
-    var insertionLength = 0;
-    var modifiedText = lines
-        .map(function (item, index) {
+    const lines = selectedText.split(/\n/);
+    let insertionLength = 0;
+    const modifiedText = lines
+        .map((item, index) => {
         if (typeof insertBefore === 'string') {
             insertionLength += insertBefore.length;
             return insertBefore + item;
         }
         else if (typeof insertBefore === 'function') {
-            var insertionResult = insertBefore(item, index);
+            const insertionResult = insertBefore(item, index);
             insertionLength += insertionResult.length;
             return insertBefore(item, index) + item;
         }
         throw Error('insertion is expected to be either a string or a function');
     })
         .join('\n');
-    return { modifiedText: modifiedText, insertionLength: insertionLength };
+    return { modifiedText, insertionLength };
 }
 
-var textHelpers = /*#__PURE__*/Object.freeze({
+var selectionAndText = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    getSurroundingWord: getSurroundingWord,
-    selectWord: selectWord,
+    getWordSelection: getWordSelection,
     selectAfterWord: selectAfterWord,
     getBreaksNeededForEmptyLineBefore: getBreaksNeededForEmptyLineBefore,
     getBreaksNeededForEmptyLineAfter: getBreaksNeededForEmptyLineAfter,
     getSelectedText: getSelectedText,
-    getCharactersBeforeSelection: getCharactersBeforeSelection,
-    getCharactersAfterSelection: getCharactersAfterSelection,
+    getStringBeforeSelection: getStringBeforeSelection,
+    getStringAfterSelection: getStringAfterSelection,
     insertBeforeEachLine: insertBeforeEachLine
 });
 
-var boldCommand = {
-    shouldUndo: function (options) {
-        return (getCharactersBeforeSelection(options.initialState, 2) === '**' &&
-            getCharactersAfterSelection(options.initialState, 2) === '**');
-    },
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
+function getStateFromTextArea(textArea) {
+    return {
+        selection: {
+            start: textArea.selectionStart,
+            end: textArea.selectionEnd,
+        },
+        text: textArea.value,
+    };
+}
+class TextareaController {
+    constructor(textAreaRef) {
+        this.textAreaRef = textAreaRef;
+    }
+    get textArea() {
+        var _a;
+        const textArea = (_a = this.textAreaRef) === null || _a === void 0 ? void 0 : _a.current;
+        if (!textArea) {
+            throw new Error('No TextAreaRef');
+        }
+        return textArea;
+    }
+    selectWordByCursor() {
+        const initialState = this.getState();
         // Adjust the selection to encompass the whole word if the caret is inside one
-        var newSelectionRange = selectWord({
+        const newSelectionRange = getWordSelection({
             text: initialState.text,
             selection: initialState.selection,
         });
-        var state1 = textApi.setSelection(newSelectionRange);
-        // Replaces the current selection with the bold mark up
-        var state2 = textApi.replaceSelection("**".concat(getSelectedText(state1), "**"));
+        return this.setSelection(newSelectionRange);
+    }
+    setSelection({ start, end }) {
+        const textArea = this.textArea;
+        textArea.focus();
+        textArea.selectionStart = start;
+        textArea.selectionEnd = end;
+        return getStateFromTextArea(textArea);
+    }
+    replaceSelection(text) {
+        const textArea = this.textArea;
+        insertToSelection(textArea, text);
+        return getStateFromTextArea(textArea);
+    }
+    replaceText(searchString, replaceString) {
+        const textArea = this.textArea;
+        const startIndex = textArea.value.indexOf(searchString);
+        if (startIndex === -1)
+            return getStateFromTextArea(textArea);
+        this.setSelection({ start: startIndex, end: startIndex + searchString.length });
+        this.replaceSelection(replaceString);
+        return getStateFromTextArea(textArea);
+    }
+    wrapSelection(prefix, suffix) {
+        const state1 = this.getState();
+        // Replaces the current selection with new string
+        const state2 = this.replaceSelection(`${prefix}${getSelectedText(state1)}${suffix}`);
         // Adjust the selection to not contain the **
-        textApi.setSelection({
-            start: state2.selection.end - 2 - getSelectedText(state1).length,
-            end: state2.selection.end - 2,
+        return this.setSelection({
+            start: state2.selection.end - prefix.length - getSelectedText(state1).length,
+            end: state2.selection.end - suffix.length,
         });
-    },
-    undo: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        var text = getSelectedText(initialState);
-        textApi.setSelection({
-            start: initialState.selection.start - 2,
-            end: initialState.selection.end + 2,
+    }
+    unwrapSelection(prefixLength, suffixLength) {
+        const initialState = this.getState();
+        const text = getSelectedText(initialState);
+        this.setSelection({
+            start: initialState.selection.start - prefixLength,
+            end: initialState.selection.end + suffixLength,
         });
-        textApi.replaceSelection(text);
-        textApi.setSelection({
-            start: initialState.selection.start - 2,
-            end: initialState.selection.end - 2,
+        this.replaceSelection(text);
+        return this.setSelection({
+            start: initialState.selection.start - prefixLength,
+            end: initialState.selection.end - suffixLength,
         });
+    }
+    getState() {
+        const textArea = this.textArea;
+        return getStateFromTextArea(textArea);
+    }
+    moveCursorToTheEnd() {
+        const textArea = this.textArea;
+        textArea.focus();
+        textArea.selectionEnd = textArea.selectionStart = textArea.value.length;
+        return getStateFromTextArea(textArea);
+    }
+}
+
+function useTextAreaMarkdownEditor(options) {
+    const textAreaRef = react.useRef(null);
+    return react.useMemo(() => {
+        const textController = new TextareaController(textAreaRef);
+        const commandController = new CommandController(textController, options.commandMap);
+        return {
+            ref: textAreaRef,
+            textController,
+            commandController,
+        };
+    }, [textAreaRef]);
+}
+
+function makeList(state0, textController, insertBefore) {
+    // Adjust the selection to encompass the whole word if the caret is inside one
+    const newSelectionRange = getWordSelection({
+        text: state0.text,
+        selection: state0.selection,
+    });
+    const state1 = textController.setSelection(newSelectionRange);
+    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 modifiedText = insertBeforeEachLine(getSelectedText(state1), insertBefore);
+    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 = !getSelectedText(state1).includes('\n') ? modifiedText.insertionLength : 0;
+    const selectionStart = state1.selection.start + breaksBeforeCount + oneLinerOffset;
+    const selectionEnd = selectionStart + modifiedText.modifiedText.length - oneLinerOffset;
+    // Adjust the selection to not contain the **
+    textController.setSelection({
+        start: selectionStart,
+        end: selectionEnd,
+    });
+}
+
+var list = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    makeList: makeList
+});
+
+function setHeader(initialState, api, prefix) {
+    // Adjust the selection to encompass the whole word if the caret is inside one
+    const newSelectionRange = getWordSelection({
+        text: initialState.text,
+        selection: initialState.selection,
+    });
+    const state1 = api.setSelection(newSelectionRange);
+    // Add the prefix to the selection
+    const state2 = api.replaceSelection(`${prefix}${getSelectedText(state1)}`);
+    // Adjust the selection to not contain the prefix
+    api.setSelection({
+        start: state2.selection.end - getSelectedText(state1).length,
+        end: state2.selection.end,
+    });
+}
+
+var header = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    setHeader: setHeader
+});
+
+const boldCommand = {
+    shouldUndo: textCtrl => {
+        const wordSelectionState = textCtrl.selectWordByCursor();
+        return (getStringBeforeSelection(wordSelectionState, 2) === '**' &&
+            getStringAfterSelection(wordSelectionState, 2) === '**');
+    },
+    do: textCtrl => {
+        textCtrl.wrapSelection('**', '**');
+    },
+    undo: textCtrl => {
+        textCtrl.unwrapSelection(2, 2);
     },
 };
-var bold = commandsService.createCommandFn(boldCommand);
 
-var italicCommand = {
-    shouldUndo: function (options) {
-        return (getCharactersBeforeSelection(options.initialState, 1) === '*' &&
-            getCharactersAfterSelection(options.initialState, 1) === '*');
+const italicCommand = {
+    shouldUndo: textCtrl => {
+        const wordSelectionState = textCtrl.selectWordByCursor();
+        return (getStringBeforeSelection(wordSelectionState, 1) === '*' && getStringAfterSelection(wordSelectionState, 1) === '*');
     },
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        // Adjust the selection to encompass the whole word if the caret is inside one
-        var newSelectionRange = selectWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        });
-        var state1 = textApi.setSelection(newSelectionRange);
-        // Replaces the current selection with the italic mark up
-        var state2 = textApi.replaceSelection("*".concat(getSelectedText(state1), "*"));
-        // Adjust the selection to not contain the *
-        textApi.setSelection({
-            start: state2.selection.end - 1 - getSelectedText(state1).length,
-            end: state2.selection.end - 1,
-        });
+    do(textCtrl) {
+        textCtrl.wrapSelection('*', '*');
     },
-    undo: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        var text = getSelectedText(initialState);
-        textApi.setSelection({
-            start: initialState.selection.start - 1,
-            end: initialState.selection.end + 1,
-        });
-        textApi.replaceSelection(text);
-        textApi.setSelection({
-            start: initialState.selection.start - 1,
-            end: initialState.selection.end - 1,
-        });
+    undo(textCtrl) {
+        textCtrl.unwrapSelection(1, 1);
     },
 };
-var italic = commandsService.createCommandFn(italicCommand);
 
-var strikethroughCommand = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        // Adjust the selection to encompass the whole word if the caret is inside one
-        var newSelectionRange = selectWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        });
-        var state1 = textApi.setSelection(newSelectionRange);
-        // Replaces the current selection with the strikethrough mark up
-        var state2 = textApi.replaceSelection("~~".concat(getSelectedText(state1), "~~"));
-        // Adjust the selection to not contain the ~~
-        textApi.setSelection({
-            start: state2.selection.end - 2 - getSelectedText(state1).length,
-            end: state2.selection.end - 2,
-        });
+const strikethroughCommand = {
+    shouldUndo(textCtrl) {
+        const wordSelectionState = textCtrl.selectWordByCursor();
+        return (getStringBeforeSelection(wordSelectionState, 2) === '~~' &&
+            getStringAfterSelection(wordSelectionState, 2) === '~~');
+    },
+    do(textCtrl) {
+        textCtrl.wrapSelection('~~', '~~');
+    },
+    undo(textCtrl) {
+        textCtrl.unwrapSelection(2, 2);
     },
 };
-var strikethrough = commandsService.createCommandFn(strikethroughCommand);
 
-var linkCommand = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
+const linkCommand = {
+    do: textApi => {
         // Adjust the selection to encompass the whole word if the caret is inside one
-        var newSelectionRange = selectWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        });
-        var state1 = textApi.setSelection(newSelectionRange);
+        const wordSelectionState = textApi.selectWordByCursor();
         // Replaces the current selection with the bold mark up
-        var state2 = textApi.replaceSelection("[".concat(getSelectedText(state1), "](url)"));
+        const state2 = textApi.replaceSelection(`[${getSelectedText(wordSelectionState)}](url)`);
         // Adjust the selection to not contain the **
         textApi.setSelection({
-            start: state2.selection.end - 6 - getSelectedText(state1).length,
+            start: state2.selection.end - 6 - getSelectedText(wordSelectionState).length,
             end: state2.selection.end - 6,
         });
     },
 };
-var link = commandsService.createCommandFn(linkCommand);
 
-var quoteCommand = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
+// Todo: try to rewrite with setHeader()
+const quoteCommand = {
+    do: textApi => {
         // Adjust the selection to encompass the whole word if the caret is inside one
-        var newSelectionRange = selectWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        });
-        var state1 = textApi.setSelection(newSelectionRange);
-        var breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
-        var breaksBefore = Array(breaksBeforeCount + 1).join('\n');
-        var breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
-        var breaksAfter = Array(breaksAfterCount + 1).join('\n');
+        const state = textApi.selectWordByCursor();
+        const breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state.text, state.selection.start);
+        const breaksBefore = Array(breaksBeforeCount + 1).join('\n');
+        const breaksAfterCount = getBreaksNeededForEmptyLineAfter(state.text, state.selection.end);
+        const breaksAfter = Array(breaksAfterCount + 1).join('\n');
         // Replaces the current selection with the quote mark up
-        textApi.replaceSelection("".concat(breaksBefore, "> ").concat(getSelectedText(state1)).concat(breaksAfter));
-        var selectionStart = state1.selection.start + breaksBeforeCount + 2;
-        var selectionEnd = selectionStart + getSelectedText(state1).length;
+        textApi.replaceSelection(`${breaksBefore}> ${getSelectedText(state)}${breaksAfter}`);
+        const selectionStart = state.selection.start + breaksBeforeCount + 2;
+        const selectionEnd = selectionStart + getSelectedText(state).length;
         textApi.setSelection({
             start: selectionStart,
             end: selectionEnd,
         });
     },
 };
-var quote = commandsService.createCommandFn(quoteCommand);
 
-var imageCommand = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        // Replaces the current selection with the whole word selected
-        var state1 = textApi.setSelection(selectWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        }));
-        // Replaces the current selection with the image
-        var imageTemplate = getSelectedText(state1) || 'https://example.com/your-image.png';
-        textApi.replaceSelection("![](".concat(imageTemplate, ")"));
-        // Adjust the selection to not contain the **
-        textApi.setSelection({
-            start: state1.selection.start + 4,
-            end: state1.selection.start + 4 + imageTemplate.length,
-        });
+const codeCommand = {
+    shouldUndo: textCtrl => {
+        const wordSelectionState = textCtrl.selectWordByCursor();
+        return (getStringBeforeSelection(wordSelectionState, 1) === '`' && getStringAfterSelection(wordSelectionState, 1) === '`');
     },
-};
-var image = commandsService.createCommandFn(imageCommand);
-
-var codeCommand = {
-    shouldUndo: function (options) {
-        return (getCharactersBeforeSelection(options.initialState, 1) === '`' &&
-            getCharactersAfterSelection(options.initialState, 1) === '`');
+    do(textCtrl) {
+        textCtrl.wrapSelection('`', '`');
     },
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        // Adjust the selection to encompass the whole word if the caret is inside one
-        var newSelectionRange = selectWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        });
-        var state1 = textApi.setSelection(newSelectionRange);
-        // Replaces the current selection with the italic mark up
-        var state2 = textApi.replaceSelection("`".concat(getSelectedText(state1), "`"));
-        // Adjust the selection to not contain the *
-        textApi.setSelection({
-            start: state2.selection.end - 1 - getSelectedText(state1).length,
-            end: state2.selection.end - 1,
-        });
-    },
-    undo: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        var text = getSelectedText(initialState);
-        textApi.setSelection({
-            start: initialState.selection.start - 1,
-            end: initialState.selection.end + 1,
-        });
-        textApi.replaceSelection(text);
-        textApi.setSelection({
-            start: initialState.selection.start - 1,
-            end: initialState.selection.end - 1,
-        });
+    undo(textCtrl) {
+        textCtrl.unwrapSelection(1, 1);
     },
 };
-var code = commandsService.createCommandFn(codeCommand);
 
-var codeBlockCommand = {
-    execute: function (_a) {
-        var textApi = _a.textApi, initialState = _a.initialState;
+const codeBlockCommand = {
+    do: textApi => {
         // Adjust the selection to encompass the whole word if the caret is inside one
-        var newSelectionRange = selectWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        });
-        var state1 = textApi.setSelection(newSelectionRange);
+        const state1 = textApi.selectWordByCursor();
         // when there's no breaking line
         if (!getSelectedText(state1).includes('\n')) {
-            textApi.replaceSelection("`".concat(getSelectedText(state1), "`"));
+            textApi.replaceSelection(`\`${getSelectedText(state1)}\``);
             // Adjust the selection to not contain the **
-            var selectionStart_1 = state1.selection.start + 1;
-            var selectionEnd_1 = selectionStart_1 + getSelectedText(state1).length;
+            const selectionStart = state1.selection.start + 1;
+            const selectionEnd = selectionStart + getSelectedText(state1).length;
             textApi.setSelection({
-                start: selectionStart_1,
-                end: selectionEnd_1,
+                start: selectionStart,
+                end: selectionEnd,
             });
             return;
         }
-        var breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
-        var breaksBefore = Array(breaksBeforeCount + 1).join('\n');
-        var breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
-        var breaksAfter = Array(breaksAfterCount + 1).join('\n');
-        textApi.replaceSelection("".concat(breaksBefore, "```\n").concat(getSelectedText(state1), "\n```").concat(breaksAfter));
-        var selectionStart = state1.selection.start + breaksBeforeCount + 4;
-        var selectionEnd = selectionStart + getSelectedText(state1).length;
+        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');
+        textApi.replaceSelection(`${breaksBefore}\`\`\`\n${getSelectedText(state1)}\n\`\`\`${breaksAfter}`);
+        const selectionStart = state1.selection.start + breaksBeforeCount + 4;
+        const selectionEnd = selectionStart + getSelectedText(state1).length;
         textApi.setSelection({
             start: selectionStart,
             end: selectionEnd,
         });
     },
 };
-var codeBlock = commandsService.createCommandFn(codeBlockCommand);
 
-function makeList(state0, textController, insertBefore) {
-    // Adjust the selection to encompass the whole word if the caret is inside one
-    var newSelectionRange = selectWord({
-        text: state0.text,
-        selection: state0.selection,
-    });
-    var state1 = textController.setSelection(newSelectionRange);
-    var breaksBeforeCount = getBreaksNeededForEmptyLineBefore(state1.text, state1.selection.start);
-    var breaksBefore = Array(breaksBeforeCount + 1).join('\n');
-    var breaksAfterCount = getBreaksNeededForEmptyLineAfter(state1.text, state1.selection.end);
-    var breaksAfter = Array(breaksAfterCount + 1).join('\n');
-    var modifiedText = insertBeforeEachLine(getSelectedText(state1), insertBefore);
-    textController.replaceSelection("".concat(breaksBefore).concat(modifiedText.modifiedText).concat(breaksAfter));
-    // Specifically when the text has only one line, we can exclude the "- ", for example, from the selection
-    var oneLinerOffset = !getSelectedText(state1).includes('\n') ? modifiedText.insertionLength : 0;
-    var selectionStart = state1.selection.start + breaksBeforeCount + oneLinerOffset;
-    var selectionEnd = selectionStart + modifiedText.modifiedText.length - oneLinerOffset;
-    // Adjust the selection to not contain the **
-    textController.setSelection({
-        start: selectionStart,
-        end: selectionEnd,
-    });
-}
-
-var listHelpers = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    makeList: makeList
-});
-
-var checkedListCommand = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        makeList(initialState, textApi, function () { return "- [ ] "; });
+const checkedListCommand = {
+    do: textApi => {
+        const initialState = textApi.getState();
+        makeList(initialState, textApi, () => `- [ ] `);
     },
 };
-var checkedList = commandsService.createCommandFn(checkedListCommand);
 
-var orderedListCommand = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        makeList(initialState, textApi, function (item, index) { return "".concat(index + 1, ". "); });
+const orderedListCommand = {
+    do: textApi => {
+        const initialState = textApi.getState();
+        makeList(initialState, textApi, (item, index) => `${index + 1}. `);
     },
 };
-var orderedList = commandsService.createCommandFn(orderedListCommand);
 
-var unorderedListCommand = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
+const unorderedListCommand = {
+    do: textApi => {
+        const initialState = textApi.getState();
         makeList(initialState, textApi, '- ');
     },
 };
-var unorderedList = commandsService.createCommandFn(unorderedListCommand);
-
-function setHeader(initialState, api, prefix) {
-    // Adjust the selection to encompass the whole word if the caret is inside one
-    var newSelectionRange = selectWord({
-        text: initialState.text,
-        selection: initialState.selection,
-    });
-    var state1 = api.setSelection(newSelectionRange);
-    // Add the prefix to the selection
-    var state2 = api.replaceSelection("".concat(prefix).concat(getSelectedText(state1)));
-    // Adjust the selection to not contain the prefix
-    api.setSelection({
-        start: state2.selection.end - getSelectedText(state1).length,
-        end: state2.selection.end,
-    });
-}
 
-var headerHelpers = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    setHeader: setHeader
-});
-
-var headingLevel1Command = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        setHeader(initialState, textApi, '# ');
+const imageCommand = {
+    do: textApi => {
+        // Replaces the current selection with the whole word selected
+        const wordSelectionState = textApi.selectWordByCursor();
+        // Replaces the current selection with the image
+        const imageTemplate = getSelectedText(wordSelectionState) || 'https://example.com/your-image.png';
+        textApi.replaceSelection(`![](${imageTemplate})`);
+        // Adjust the selection to not contain the **
+        textApi.setSelection({
+            start: wordSelectionState.selection.start + 4,
+            end: wordSelectionState.selection.start + 4 + imageTemplate.length,
+        });
     },
 };
-var headingLevel1 = commandsService.createCommandFn(headingLevel1Command);
 
-var headingLevel2Command = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        setHeader(initialState, textApi, '## ');
+const headingLevel1Command = {
+    do: textCtrl => {
+        const initialState = textCtrl.getState();
+        setHeader(initialState, textCtrl, '# ');
     },
 };
-var headingLevel2 = commandsService.createCommandFn(headingLevel2Command);
 
-var headingLevel3Command = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        setHeader(initialState, textApi, '### ');
+const headingLevel2Command = {
+    do: textCtrl => {
+        const initialState = textCtrl.getState();
+        setHeader(initialState, textCtrl, '## ');
     },
 };
-var headingLevel3 = commandsService.createCommandFn(headingLevel3Command);
 
-var headingLevel4Command = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        setHeader(initialState, textApi, '#### ');
+const headingLevel3Command = {
+    do: textCtrl => {
+        const initialState = textCtrl.getState();
+        setHeader(initialState, textCtrl, '### ');
     },
 };
-var headingLevel4 = commandsService.createCommandFn(headingLevel4Command);
 
-var headingLevel5Command = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        setHeader(initialState, textApi, '##### ');
+const headingLevel4Command = {
+    do: textCtrl => {
+        const initialState = textCtrl.getState();
+        setHeader(initialState, textCtrl, '#### ');
     },
 };
-var headingLevel5 = commandsService.createCommandFn(headingLevel5Command);
 
-var headingLevel6Command = {
-    execute: function (_a) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        setHeader(initialState, textApi, '###### ');
+const headingLevel5Command = {
+    do: textCtrl => {
+        const initialState = textCtrl.getState();
+        setHeader(initialState, textCtrl, '##### ');
     },
 };
-var headingLevel6 = commandsService.createCommandFn(headingLevel6Command);
 
-// attachmentCommand does to following:
-// 1. Sets cursor to the end of word
-// 2. Inserts string "![Uploading test 1.jpg…]()"
-// 3. When request is fulfilled replace "![Uploading test 1.jpg…]()" with real markdown url
-// or add the markdown url to the end of text
-// 4. If request is failed delete "![Uploading test 1.jpg…]()" and console.error
-var attachmentCommand = {
-    execute: function (_a, _b) {
-        var initialState = _a.initialState, textApi = _a.textApi;
-        var fileName = _b.fileName, fileUrlPromise = _b.fileUrlPromise;
-        // Replaces the current selection with the empty selection
-        // and sets the cursor position to the end of the word
-        textApi.setSelection(selectAfterWord({
-            text: initialState.text,
-            selection: initialState.selection,
-        }));
-        var uploadingString = "![Uploading ".concat(fileName, "\u2026]()");
-        textApi.replaceSelection(' ' + uploadingString);
-        fileUrlPromise
-            .then(function (url) {
-            var fileLinkString = "![".concat(fileName, "](").concat(url, ")");
-            if (textApi.getState().text.includes(uploadingString)) {
-                textApi.replaceText(uploadingString, fileLinkString);
-            }
-            else {
-                textApi.moveCursorToTheEnd();
-                textApi.replaceSelection("\n".concat(fileLinkString));
-            }
-        })
-            .catch(function (error) {
-            if (textApi.getState().text.includes(uploadingString)) {
-                textApi.replaceText(uploadingString, '');
-            }
-            console.error(error);
-        });
+const headingLevel6Command = {
+    do: textCtrl => {
+        const initialState = textCtrl.getState();
+        setHeader(initialState, textCtrl, '###### ');
     },
 };
-var attachment = commandsService.createCommandFn(attachmentCommand);
 
-exports.TextAreaTextController = TextAreaTextController;
-exports.attachment = attachment;
-exports.bold = bold;
-exports.checkedList = checkedList;
-exports.code = code;
-exports.codeBlock = codeBlock;
-exports.headerHelpers = headerHelpers;
-exports.headingLevel1 = headingLevel1;
-exports.headingLevel2 = headingLevel2;
-exports.headingLevel3 = headingLevel3;
-exports.headingLevel4 = headingLevel4;
-exports.headingLevel5 = headingLevel5;
-exports.headingLevel6 = headingLevel6;
-exports.image = image;
-exports.italic = italic;
-exports.link = link;
-exports.listHelpers = listHelpers;
-exports.orderedList = orderedList;
-exports.quote = quote;
-exports.strikethrough = strikethrough;
-exports.textHelpers = textHelpers;
-exports.unorderedList = unorderedList;
+exports.TextareaController = TextareaController;
+exports.boldCommand = boldCommand;
+exports.checkedListCommand = checkedListCommand;
+exports.codeBlockCommand = codeBlockCommand;
+exports.codeCommand = codeCommand;
+exports.headerHelpers = header;
+exports.headingLevel1Command = headingLevel1Command;
+exports.headingLevel2Command = headingLevel2Command;
+exports.headingLevel3Command = headingLevel3Command;
+exports.headingLevel4Command = headingLevel4Command;
+exports.headingLevel5Command = headingLevel5Command;
+exports.headingLevel6Command = headingLevel6Command;
+exports.imageCommand = imageCommand;
+exports.italicCommand = italicCommand;
+exports.linkCommand = linkCommand;
+exports.listHelpers = list;
+exports.orderedListCommand = orderedListCommand;
+exports.quoteCommand = quoteCommand;
+exports.strikethroughCommand = strikethroughCommand;
+exports.textHelpers = selectionAndText;
+exports.unorderedListCommand = unorderedListCommand;
 exports.useTextAreaMarkdownEditor = useTextAreaMarkdownEditor;
 //# sourceMappingURL=index.js.map