Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fregante/text-field-edit
Insert text in a <textarea> and <input> (supports Firefox and Undo)
https://github.com/fregante/text-field-edit
Last synced: 4 days ago
JSON representation
Insert text in a <textarea> and <input> (supports Firefox and Undo)
- Host: GitHub
- URL: https://github.com/fregante/text-field-edit
- Owner: fregante
- License: mit
- Created: 2019-03-27T12:03:00.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-22T08:29:16.000Z (7 months ago)
- Last Synced: 2024-12-05T13:51:36.505Z (17 days ago)
- Language: TypeScript
- Homepage: https://npm.im/text-field-edit
- Size: 575 KB
- Stars: 74
- Watchers: 3
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- awesome - fregante/text-field-edit - Insert text in a \<textarea> and \<input> (supports Firefox and Undo) (TypeScript)
README
# text-field-edit [![][badge-gzip]](#link-npm)
[badge-gzip]: https://img.shields.io/bundlephobia/minzip/text-field-edit.svg?label=gzipped
[link-npm]: https://www.npmjs.com/package/text-field-edit
> Insert text in a ``, `` and `contenteditable` (including Undo support)
You should use this instead of setting the `field.value` directly because:
- it doesn't break the undo history
- it fires an `input` event (with `event.inputType === 'insertText'`)
- it's the most efficient way of adding/replacing selected text in a field
- it's cross-browser (modern browsers)
It uses `document.execCommand('insertText')` under the hood and it automatically focuses/blurs the field you pass.
## Install
You can download the [standalone bundle](https://bundle.fregante.com/?pkg=text-field-edit)
Or use `npm`:
```sh
npm install text-field-edit
```
```js
import textFieldEdit from 'text-field-edit';
// Alternatively only import the specific methods
import {
insertTextIntoField,
setFieldText,
getFieldSelection,
wrapFieldSelection,
replaceFieldText,
} from 'text-field-edit';
```
## Usage
Insert text at the cursor, replacing any possible selected text, acting like a `paste` would:
```js
const input = document.querySelector('input');
const button = document.querySelector('.js-add-signature');
button.addEventListener(event => {
textFieldEdit.insert(input, 'Made by 🐝 with pollen.');
});
```
This will act like `field.value = 'New value'` but with **undo** support and by firing the `input` event:
```js
const textarea = document.querySelector('textarea');
const resetButton = document.querySelector('.js-markdown-reset-field');
resetButton.addEventListener(event => {
textFieldEdit.set(textarea, 'New value');
});
```
## API
### textFieldEdit.insert(field, text)
Inserts `text` at the cursor’s position, replacing any selection.
```js
const field = document.querySelector('input[type="text"]');
textFieldEdit.insert(field, '🥳');
// Changes field's value from 'Party|' to 'Party🥳|' (where | is the cursor)
```
#### field
Type: `HTMLTextAreaElement | HTMLInputElement` or any `contenteditable` element
#### text
Type: `string`
The text to insert at the cursor's position.
### textFieldEdit.set(field, text)
Replaces the entire content, equivalent to `field.value = 'New text!'` but with **undo** support and by firing the `input` event:
```js
const textarea = document.querySelector('textarea');
textFieldEdit.set(textarea, 'New text!');
```
#### field
Type: `HTMLTextAreaElement | HTMLInputElement` or any `contenteditable` element
#### text
Type: `string`
The new value that the field will have.
### textFieldEdit.replace(field, searchValue, replacement)
Finds and replaces strings and regular expressions in the field’s value, like `field.value = field.value.replace()` but leaves the last replacement selected like a text editor would.
Similar to [String#replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace)
```js
const textarea = document.querySelector('textarea');
textarea.value = 'Hello world';
textFieldEdit.replace(textarea, 'Hello', 'Ciao');
// Changes field's value from 'Hello world' to '|Ciao| world' (where | marks the selected text)
```
#### field
Type: `HTMLTextAreaElement | HTMLInputElement` (not available on `contenteditable`)
#### searchValue
Type: `string | RegExp`
The text to replace in the field’s value.
#### replacement
Type: `string | function`
The text that will replace `searchValue` or a callback function that matches [the signature in `String#replace`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter).
**Note**: replacement patterns (`replace(field, /hello (world)/, 'ciao $1')`) aren't supported.
### textFieldEdit.wrapSelection(field, wrappingText, endWrappingText?)
Adds the `wrappingText` before and after field’s selection (or cursor). If `endWrappingText` is provided, it will be used instead of `wrappingText` on the right.
```js
const field = document.querySelector('textarea');
textFieldEdit.wrapSelection(field, '**');
// Changes the field's value from 'I |love| gudeg' to 'I **|love|** gudeg' (where | marks the selected text)
```
```js
const field = document.querySelector('textarea');
textFieldEdit.wrapSelection(field, '(', ')');
// Changes the field's value from '|almost| cool' to '(|almost|) cool' (where | marks the selected text)
```
#### field
Type: `HTMLTextAreaElement | HTMLInputElement` or any `contenteditable` elements
#### wrappingText
Type: `string`
The string to prepend to the selection.
#### endWrappingText
Type: `string`
The string to append to the selection. If not provided, `wrappingText` will be used.
### textFieldEdit.getSelection(field)
Utility method to get the selected text in a field or an empty string if nothing is selected.
```js
const field = document.querySelector('textarea');
textFieldEdit.getSelection(field);
// => 'almost'
// If the field's value is '|almost| cool' (where | marks the selected text)
```
#### field
Type: `HTMLTextAreaElement | HTMLInputElement`
# Related
- [indent-textarea](https://github.com/fregante/indent-textarea) - Add editor-like tab-to-indent functionality to ``, in a few bytes. Uses this module.
- [fit-textarea](https://github.com/fregante/fit-textarea) - Automatically expand a `` to fit its content, in a few bytes.
- [Refined GitHub](https://github.com/refined-github/refined-github) - Uses this module.