CODEWITHSUNDEEP
javascripthtmlmarkdown
Jade Ellis
Jade Ellis

Reputation: 1562

insert markdown for bold and italics around selection

I am making an application that uses markdown to format text. I need to add keyboard shortcuts, so that people that do not know how to use markdown and are more familiar with WYSIWYG editors are able to use it. How would I do that?

Upvotes: 4

Views: 1813

Answers (2)

Shivam Sharma
Shivam Sharma

Reputation: 1607

This is just the extended version of the function given by @CcJokerPol.

Additional Features:

  • This adds text as well as removes too.
  • it allows adding a default text too.
  • Snippet shows to call the function using ctrl+b, ctrl+i, ctrl+u too.
  • Multiple markdowns can also be added like as **++underlined bold text++**

Example:

  • a text to bold => a text to **bold**
  • a text to remove **bold** => a text to remove bold
  • a text to remove **bold** => a text to remove bold

Calling is the same insertFormating(inputBox, "**", "bold");

$(document).keydown(function(e) {
	if (e.ctrlKey && $.inArray(e.keyCode, [66, 73, 85, 76]) > -1) {
		var keyCode = e.keyCode;
		var focused = document.activeElement;
		var id = focused.id;
    e.preventDefault();
    if (keyCode == 66) {
      insertFormating(focused, "**", "bold");
    } else if (keyCode == 73) {
      insertFormating(focused, "__", "italic");
    } else if (keyCode == 85) {
      insertFormating(focused, "++", "underline");
    } else if (keyCode == 76) {
      insertFormating(focused, "[", "link title", "](http://www.example.com)");
    }
	}
});

function insertFormating(txtarea, text, defaultTxt = "", text2 = "") {
	var selectStart = txtarea.selectionStart
	var selectEnd = txtarea.selectionEnd
	var scrollPos = txtarea.scrollTop;
	var caretPos = txtarea.selectionStart;
	var mode = 0; //Adding markdown with selected text
	var front = (txtarea.value).substring(0, caretPos);
	var back = (txtarea.value).substring(selectEnd, txtarea.value.length);
	var middle = (txtarea.value).substring(caretPos, selectEnd);

	if (text2 == "") {
		text2 = text;
	}
	var textLen = text.length;
	var text2Len = text2.length;

	if (selectStart === selectEnd) {
		middle = defaultTxt;
		mode = 1; //Adding markdown with default text
	} else {
		if (front.substr(-textLen) == text && back.substr(0, text2Len) == text2) {
			front = front.substring(0, front.length - textLen);
			back = back.substring(text2Len, back.length);
			text = "";
			text2 = "";
			mode = 2; //Removing markdown with selected text eg. **<selected>bold<selected>**
		} else if (middle.substr(0, textLen) == text && middle.substr(-text2Len) == text2) {
			middle = middle.substring(textLen, middle.length - text2Len);
			text = "";
			text2 = "";
			mode = 3; //Removing markdown with selected text eg. <selected>**bold**<selected>
		}
	}
	txtarea.value = front + text + middle + text2 + back;
	if (selectStart !== selectEnd) {
		if (mode === 0) {
			txtarea.selectionStart = selectStart + textLen;
			txtarea.selectionEnd = selectEnd + textLen;
		} else if (mode === 2) {
			txtarea.selectionStart = selectStart - textLen;
			txtarea.selectionEnd = selectEnd - textLen;
		} else if (mode === 3) {
			txtarea.selectionStart = selectStart;
			txtarea.selectionEnd = selectEnd - textLen - text2Len;
		}
	} else {
		txtarea.selectionStart = selectStart + textLen;
		txtarea.selectionEnd = txtarea.selectionStart + middle.length;
	}
	txtarea.focus();
	txtarea.scrollTop = scrollPos;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea rows="5" cols="60">A quick brown fox jumps over the lazy dog.
Test it here.</textarea>

Shortcut commands used in snippet:

  • ctrl+b => Bold => **bold text**
  • ctrl+i => Italic => __italic text__
  • ctrl+u => Underline => ++underlined text++
  • ctrl+l => Link => [link title](http://www.example.com)

Update:

  • Now you can add different beginning and closing markdown tags
  • eg. insertFormating(focused, "[", "link title","](http://www.example.com)");

Upvotes: 3

Jade Ellis
Jade Ellis

Reputation: 1562

this function uses selectionStart and selectionEnd along with substring to insert text before and after the selected text.

async function insertFormating(txtarea, text) {
    var selectStart = txtarea.selectionStart
    var selectEnd = txtarea.selectionEnd
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
    var middle = (txtarea.value).substring(caretPos, txtarea.selectionEnd);
    txtarea.value = front + text + middle + text + back;
    if (selectStart !== selectEnd) {
        txtarea.selectionStart = selectStart + text.length
        txtarea.selectionEnd = selectEnd + text.length
    } else {
        txtarea.selectionStart = selectStart + text.length
        txtarea.selectionEnd = txtarea.selectionStart
    }
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

you can now call insertFormating(inputBox, '**'); to insert bold, or insertFormating(inputBox, '_'); for italics.

Upvotes: 3

Related Questions