insert-text-textarea

insert-text-textarea

Insert text in a textarea and input[text] (supports Firefox and Undo, where possible)

The text will be inserted after the cursor and it will replace any text that's selected, acting like a paste would.

This is useful when creating "editor" buttons, to add text or wrap the selected text. For example, this module is used by indent-textarea.

An input event will also be dispatched, with event.inputType === 'insertText'.

It uses document.execCommand('insertText') in Chrome (which has Undo support) and it replicates its behavior in Firefox (without Undo support until this bug is solved).

If you need IE support, use insert-text-at-cursor.

Install

You can just download the standalone bundle

Or use npm:

npm install insert-text-textarea

// This module is only offered as a ES Module
import insertText from 'insert-text-textarea';

Usage

const textarea = document.querySelector('textarea');
const button = document.querySelector('.js-add-signature');
button.addEventListener(event => {
	// It will add this text at the cursor, replacing any possible selected text
	insertText(textarea, 'Made by 🐝 with pollen.');
});

const textarea = document.querySelector('textarea');
const button = document.querySelector('.js-markdown-make-text-bold');
button.addEventListener(event => {
	// This will replace the selected text (if any) with **selected text**
        // Don't use `getSelection()` if you want Firefox support
	const selectedText = value.slice(
		textarea.selectionStart,
		textarea.selectionEnd
	);
	insertText(textarea, '**' + selectedText + '**');
});

Related

• indent-textarea - Add editor-like tab-to-indent functionality to , in a few bytes. Uses this module.
• fit-textarea - Automatically expand a <textarea> to fit its content, in a few bytes.
• Refined GitHub - Uses this module.