https://github.com/alienkevin/smarttextarea
A simplistic textarea in browser that supports undo, redo, find, and replace
https://github.com/alienkevin/smarttextarea
Last synced: 4 months ago
JSON representation
A simplistic textarea in browser that supports undo, redo, find, and replace
- Host: GitHub
- URL: https://github.com/alienkevin/smarttextarea
- Owner: AlienKevin
- License: mit
- Created: 2019-03-11T00:41:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T03:52:07.000Z (about 3 years ago)
- Last Synced: 2024-05-17T00:31:29.719Z (over 1 year ago)
- Language: JavaScript
- Size: 14.4 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# SmartTextarea
A simplistic textarea in browser that supports undo, redo, find, and replace.
## Features
### Find and Replace
1. Find previous occurence
2. Find next occurence
3. Find and replace
4. Replace all
To **activate** the Find and Replace panel, press Ctrl+F.
To find the **next occurence**, click on the 🡲 (right arrow icon) or press Enter. To find the **previous occurence**, click on the 🡰 (left arrow icon).
To **find and replace next occurence**, click on the 
icon. To **replace all occurences**, click on the 
To toggle **match case** when searching, click on the 
icon. To toggle **regular expression** when searching, click on the 
icon. To toggle **match whole word** when searching, click on the 
icon.
### Undo and Redo
1. Press Ctrl+Z to undo
2. Press Ctrl+Y to redo
Default to save 100 versions in undo/redo history. (you can pass in custom values). Undo/redos are all in whole words as in many other word processors like Microsoft Word.
## Installation
### NPM
`npm install smart-textarea`
### CDN
Add the below imports in your html
1. jsDelivr
```
...
...
// Convert textareas to smartTextareas here
// See the Usage example below
```
2. Unpkg:
```
...
...
// Convert textareas to smartTextareas here
// See the Usage example below
```
## Usage
The simplest way is to import the compressed and bundled JS and CSS files directly in your HTML file.
```
Smart Textarea Test
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
const smartTextarea1 = new SmartTextarea(document.getElementById("textarea1"));
const smartTextarea2 = new SmartTextarea(document.getElementById("textarea2"));
```
## Update
Because of the usual 24-hour cache by CDN providers, you should replace the @latest tag with @(the latest version number) for immediate update to the latest version. It's always the safest to use the current stable version @1.0.9.
## Credits
This project's Find and Replace functionality is based on Jens Fischer's StackOverflow answer on ["Find and Replace for an Textarea"](https://stackoverflow.com/questions/7781099/find-and-replace-for-an-textarea/7781395#7781395).
The Find & Replace, Replace All, and Case Sensitive icons are based on [Visual Studio Code](https://github.com/Microsoft/vscode)'s icons. The design of the find and replace panel is heavily based VS Code's.
## License
This project is licensed under the terms of the MIT license.