Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fregante/indent-textarea
Add editor-like tab-to-indent functionality to <textarea>, in a few bytes
https://github.com/fregante/indent-textarea
Last synced: 14 days ago
JSON representation
Add editor-like tab-to-indent functionality to <textarea>, in a few bytes
- Host: GitHub
- URL: https://github.com/fregante/indent-textarea
- Owner: fregante
- License: mit
- Created: 2019-03-14T07:27:22.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-09-07T10:08:34.000Z (about 1 year ago)
- Last Synced: 2024-10-16T04:01:17.895Z (29 days ago)
- Language: TypeScript
- Homepage: https://npmjs.com/indent-textarea
- Size: 498 KB
- Stars: 160
- Watchers: 5
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# indent-textarea [![][badge-gzip]][link-npm]
[badge-gzip]: https://img.shields.io/bundlephobia/minzip/indent-textarea.svg?label=gzipped
[link-npm]: https://www.npmjs.com/package/indent-textarea
[
](https://fregante.github.io/indent-textarea/)
> Add editor-like tab-to-indent functionality to ``, in a few bytes
Try the [demo](https://fregante.github.io/indent-textarea/).
- Supports the native undo functionality (ctrl+z, cmd+z, context menu), as seen in the gif on the side.
- Supports also Firefox (a lot of solutions online don't because of [bugs](https://bugzilla.mozilla.org/show_bug.cgi?id=1220696) and [deprecations](https://www.chromestatus.com/features/5718803933560832)) but without undo support.
This only supports tab and shift+tab but it doesn't preserve it on enter like a full code editor would. If you need a more complete solution, check out [behave.js](https://github.com/jakiestfu/Behave.js) (outdated, no _undo_) or [CodeMirror](https://github.com/codemirror/CodeMirror) (much heavier).
**Note:** the API used (`document.execCommand`) will trigger multiple `input` events when multiple lines are selected, so if you have a listener on the `textarea`, make sure to [debounce](https://github.com/sindresorhus/debounce-fn) it.
## Install
You can download the [standalone bundle](https://bundle.fregante.com/?pkg=indent-textarea&global=window)
Or use `npm`:
```
npm install indent-textarea
```
```js
// This module is only offered as a ES Module
import {enableTabToIndent} from 'indent-textarea';
```
## Usage
You can listen to tab and shift+tab to indent and unindent respectively.
```js
const textarea = document.querySelector('textarea');
enableTabToIndent(textarea);
```
If you prefer [event delegation](https://github.com/fregante/delegate-it):
```js
import delegate from 'delegate-it';
import {tabToIndentListener} from 'indent-textarea';
delegate(document.body, 'textarea', 'keydown', tabToIndentListener);
```
If you prefer the raw `indentSelection`/`unindentSelection` methods, they're also available below.
## API
### enableTabToIndent(textarea, signal)
Adds tab and shift+tab event listeners to the provided `textarea`(s). It also listens to esc to blur/unfocus the field and allow the user to keep tabbing.
#### textarea
Type: `HTMLTextAreaElement` `string` `Iterable`
This can be:
- the `` DOM element
- an array/iterable of DOM elements
- or a selector that will be used via `document.querySelectorAll` (it will watch all the selected elements)
#### signal
This is an `AbortSignal` that allows you to remove/disable the listener
```js
const controller = new AbortController();
const textarea = document.querySelector('textarea');
enableTabToIndent(textarea, controller.signal);
// And then later, to stop listening
controller.abort();
```
### indentSelection(textarea)
Raw method to indent the selected text in the provided `` element, once, instantly.
#### textarea
Type: `HTMLTextAreaElement`
### unindentSelection(textarea)
Raw method to unindent the selected text in the provided `` element, once, instantly.
#### textarea
Type: `HTMLTextAreaElement`
### tabToIndentListener
Type: `(event: KeyboardEvent) => void`
Raw event handler used by `enableTabToIndent` or to use manually via `addEventListener`
```js
document.querySelector('textarea').addEventListener('keydown', tabToIndentListener);
```
Or with [event delegation](https://github.com/fregante/delegate-it):
```js
import delegate from 'delegate-it';
import {tabToIndentListener} from 'indent-textarea';
delegate(document.body, 'textarea', 'keydown', tabToIndentListener);
```
# Related
- [text-field-edit](https://github.com/fregante/text-field-edit) - Insert text in a textarea (supports Firefox and Undo). Used by this module.
- [fit-textarea](https://github.com/fregante/fit-textarea) - Automatically expand a `` to fit its content, in a few bytes.
- [delegate-it](https://github.com/fregante/delegate-it) - DOM event delegation, in <1KB. Can be used to attach one `indent-textarea` to many elements.
- [Refined GitHub](https://github.com/sindresorhus/refined-github) - Uses this module.
## License
MIT © [Federico Brigante](https://fregante.com)