SmartTextarea
A simplistic textarea in browser that supports undo, redo, find, and replace.
Features
Find and Replace
- Find previous occurence
- Find next occurence
- Find and replace
- 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
- Press Ctrl+Z to undo
- 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
- jsDelivr
<html>
<head>
...
<link href="https://cdn.jsdelivr.net/npm/smart-textarea@latest/dist/main.css" rel="stylesheet">
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/smart-textarea@latest/dist/bundle.js"></script>
<script>
// Convert textareas to smartTextareas here
// See the Usage example below
</script>
</body>
</html>
- Unpkg:
<html>
<head>
...
<link href="https://unpkg.com/smart-textarea@latest/dist/main.css" rel="stylesheet">
</head>
<body>
...
<script src="https://unpkg.com/smart-textarea@latest/dist/bundle.js"></script>
<script>
// Convert textareas to smartTextareas here
// See the Usage example below
</script>
</body>
</html>
Usage
The simplest way is to import the compressed and bundled JS and CSS files directly in your HTML file.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>
Smart Textarea Test
</title>
<!--Load stylesheet for the find & replace box and context menu-->
<link rel="stylesheet" href="node_modules/smart-textarea/dist/main.css">
<body>
<textarea id="textarea1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</textarea>
<!--You can have more than one smartTextarea. They will all function independently-->
<textarea id="textarea2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</textarea>
<!--Load script file for smartTextarea-->
<script src="node_modules/smart-textarea/dist/bundle.js"></script>
<!--Convert a normal textarea to a smartTextarea-->
<script>
const smartTextarea1 = new SmartTextarea(document.getElementById("textarea1"));
const smartTextarea2 = new SmartTextarea(document.getElementById("textarea2"));
</script>
</html>
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". The Find & Replace, Replace All, and Case Sensitive icons are based on Visual Studio Code'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.