Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/t-eckert/minnote
A small, local text editor for the web.
https://github.com/t-eckert/minnote
minimal-apps note-taking typescript vite
Last synced: 6 days ago
JSON representation
A small, local text editor for the web.
- Host: GitHub
- URL: https://github.com/t-eckert/minnote
- Owner: t-eckert
- Created: 2021-07-03T16:01:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-27T02:24:41.000Z (about 3 years ago)
- Last Synced: 2024-04-16T02:18:08.796Z (7 months ago)
- Topics: minimal-apps, note-taking, typescript, vite
- Language: TypeScript
- Homepage: https://minnote.io/
- Size: 101 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#  [Minnote](https://minnote.io/)
A small, local text editor in the browser.
### Clone repo and run locally with yarn
```bash
git clone https://github.com/t-eckert/minnote.git
cd minnote
yarn
yarn dev
```
This will tell [Vite](https://vitejs.dev/) to run the project and serve it to `localhost:3000`.
```
> Local: http://localhost:3000/
> Network: use `--host` to expose
```
### Run locally with npm instead of yarn
```bash
npm i
npm run dev
```
## Page hooks
The application is separated into hooks for:
* Entering text with `textbox`
* Copying text to the clipboard with `copy`
* Toggling the `menu` with `menuToggle`
* Saving the text to `localStorage` with `storage`
```ts
const textbox = document.getElementById("textbox") as HTMLTextAreaElement | null
const copy = document.getElementById("copy") as HTMLButtonElement
const menu = document.getElementById("menu")
const menuToggle = document.getElementById("menu-toggle") as HTMLButtonElement | null
const storage = window.localStorage
```
## State
The initial state of the menu is set to `closed`.
```ts
const key = "textbox"
let menuState: MenuState = "closed"
```
## Actions
Actions include:
* Handling storage with `saveToStorage`, `loadFromStorage`, `save`, and `load`
* Handling the clipboard with `copyToClipboard` and `copyToClipboardFallback`
* Handling menu state with `toggleMenu`
### Storage actions
```ts
const saveToStorage = (key: string, text: string) => {
storage.setItem(key, text)
}
const loadFromStorage = (key: string): string | null => {
return storage.getItem(key)
}
const save = (textbox: HTMLTextAreaElement) => {
saveToStorage(key, textbox.value)
}
const load = (textbox: HTMLTextAreaElement) => {
textbox.value = loadFromStorage(key) || ""
}
```
### Clipboard actions
```ts
const copyToClipboard = (text: string) => {
if (!navigator.clipboard) {
copyToClipboardFallback(text);
return;
}
navigator.clipboard.writeText(text).then(function () {
}, function (_) {
});
}
const copyToClipboardFallback = (text: string) => {
var textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
}
finally {
document.body.removeChild(textArea);
}
}
```
### Menu action
```ts
const toggleMenu = () => {
if (menu && menuState === "closed") {
menu.hidden = false
menuState = "opened"
} else if (menu && menuState === "opened") {
menu.hidden = true
menuState = "closed"
}
}
```