├── .eslintignore
├── .eslintrc.cjs
├── .github
    └── workflows
    │   └── deploy-gh-pages.yml
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .vscode
    └── extensions.json
├── LICENSE
├── README.md
├── electron-preload.cjs
├── electron.cjs
├── forge.config.cjs
├── index.html
├── package-lock.json
├── package.json
├── preview_dark.png
├── preview_light.png
├── public
    ├── favicon.icns
    ├── favicon.ico
    ├── favicon.png
    ├── favicon.svg
    ├── favicon@1x.png
    ├── favicon@2x.png
    └── service-worker.js
├── src
    ├── App.svelte
    ├── global.css
    ├── global.d.ts
    ├── lib
    │   ├── Close.svelte
    │   ├── Editor.svelte
    │   ├── Fullscreen.svelte
    │   ├── Hide.svelte
    │   ├── IconButton.svelte
    │   ├── Statistics.svelte
    │   ├── Stopwatch.svelte
    │   ├── Theme.svelte
    │   ├── Time.svelte
    │   ├── Titlebar.svelte
    │   ├── stores
    │   │   ├── app.ts
    │   │   └── editor.ts
    │   └── utils
    │   │   ├── calculatePosition
    │   │       └── index.ts
    │   │   ├── classnames
    │   │       └── index.ts
    │   │   ├── countCharacters
    │   │       └── index.ts
    │   │   ├── countParagraphs
    │   │       └── index.ts
    │   │   ├── countSentences
    │   │       └── index.ts
    │   │   ├── countWords
    │   │       └── index.ts
    │   │   ├── fullscreen
    │   │       └── index.ts
    │   │   └── persistenceStorage
    │   │       └── index.ts
    ├── main.ts
    ├── registerServiceWorker.ts
    └── vite-env.d.ts
├── svelte.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /dist
 5 | /out
 6 | /package
 7 | .env
 8 | .env.*
 9 | !.env.example
10 | 
11 | # Ignore files for PNPM, NPM and YARN
12 | pnpm-lock.yaml
13 | package-lock.json
14 | yarn.lock
15 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   parser: "@typescript-eslint/parser",
 4 |   extends: [
 5 |     "eslint:recommended",
 6 |     "plugin:@typescript-eslint/recommended",
 7 |     "prettier",
 8 |   ],
 9 |   plugins: ["svelte3", "@typescript-eslint"],
10 |   ignorePatterns: ["*.cjs"],
11 |   overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
12 |   settings: {
13 |     "svelte3/typescript": () => require("typescript"),
14 |   },
15 |   parserOptions: {
16 |     sourceType: "module",
17 |     ecmaVersion: 2020,
18 |   },
19 |   env: {
20 |     browser: true,
21 |     es2017: true,
22 |     node: true,
23 |   },
24 | };
25 | 


--------------------------------------------------------------------------------
/.github/workflows/deploy-gh-pages.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ['main']
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: 'pages'
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   # Single deploy job since we're just deploying
25 |   deploy:
26 |     environment:
27 |       name: github-pages
28 |       url: ${{ steps.deployment.outputs.page_url }}
29 |     runs-on: ubuntu-latest
30 |     steps:
31 |       - name: Checkout
32 |         uses: actions/checkout@v3
33 |       - name: Set up Node
34 |         uses: actions/setup-node@v3
35 |         with:
36 |           node-version: 18
37 |           cache: 'npm'
38 |       - name: Install dependencies
39 |         run: npm install
40 |       - name: Build
41 |         run: npm run frontend:build:web
42 |       - name: Setup Pages
43 |         uses: actions/configure-pages@v3
44 |       - name: Upload artifact
45 |         uses: actions/upload-pages-artifact@v1
46 |         with:
47 |           # Upload dist repository
48 |           path: './dist'
49 |       - name: Deploy to GitHub Pages
50 |         id: deployment
51 |         uses: actions/deploy-pages@v1
52 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | out/


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /dist
 5 | /out
 6 | /.svelte-kit
 7 | /package
 8 | .env
 9 | .env.*
10 | !.env.example
11 | 
12 | # Ignore files for PNPM, NPM and YARN
13 | pnpm-lock.yaml
14 | package-lock.json
15 | yarn.lock
16 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "plugins": ["prettier-plugin-svelte"],
3 |   "pluginSearchDirs": ["."],
4 |   "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
5 | }
6 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["svelte.svelte-vscode"]
3 | }
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Stepan Kurennykh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Writer
 2 | 
 3 | Writer is a distraction-free text editor to improve your writing skills. It includes statistics, stopwatch, dark/light theme and many other little tricks to make your writing experience more pleasant.
 4 | 
 5 | I started this project to help myself to improve my writing skills, especially IELTS writing part. While I was experimenting with many tools and approaches, I discovered that the best way to level-up is to eliminate any grammar and spellcheckers and focus solely on the process of writing. Unfortunately, I couldn't find the right app for me because all of them either they had bad design/interface, IMHO, or they were bloated with unnecessary futures or spellcheckers.
 6 | 
 7 | The app has statistics that shows how many characters, words, sentences, or paragraphs you have written. It's helpful when you're trying to meet some goals, for example, at least 250 words for IELTS essay part. Moreover, the app has a stopwatch that you can use to track your writing speed or create the pressure to emulate exam conditions.
 8 | 
 9 | The app available [online](https://stoope.github.io/writer/). For the better experience, I recommend building your own desktop version
10 | 
11 | ![Screenshot](preview_dark.png)
12 | ![Screenshot](preview_light.png)
13 | 
14 | ## Prerequisites
15 | 
16 | You must have `nodejs` >= 18 and `npm` >= 9 to run and build this app. Work with early versions is not guaranteed.
17 | 
18 | ## Install
19 | 
20 | ```bash
21 | git clone https://github.com/stoope/writer.git
22 | npm install
23 | ```
24 | 
25 | ## Run
26 | 
27 | ```bash
28 | npm run start
29 | ```
30 | 
31 | ## Build
32 | 
33 | You might have to change the `electron-forge` configuration file `forge.config.cjs` to build the app for your specific platform.
34 | 
35 | ```bash
36 | npm run build
37 | ```
38 | 
39 | After build, you could find the app under `out` folder.
40 | 
41 | ## Your help is appreciated!
42 | 
43 | If you want to discuss your ideas or create a Pull Requests you're welcome!
44 | 


--------------------------------------------------------------------------------
/electron-preload.cjs:
--------------------------------------------------------------------------------
1 | const { ipcRenderer, contextBridge } = require("electron");
2 | 
3 | contextBridge.exposeInMainWorld("ipcRenderer", {
4 |   send: ipcRenderer.send.bind(ipcRenderer),
5 |   on: ipcRenderer.on.bind(ipcRenderer),
6 |   invoke: ipcRenderer.invoke.bind(ipcRenderer),
7 | });
8 | 


--------------------------------------------------------------------------------
/electron.cjs:
--------------------------------------------------------------------------------
 1 | const { app, BrowserWindow, ipcMain, Menu, nativeTheme } = require("electron");
 2 | const path = require("path");
 3 | const Store = require("electron-store");
 4 | 
 5 | const store = new Store();
 6 | 
 7 | const WINDOW_BONDS_KEY = "editor:winBounds";
 8 | 
 9 | const isMac = process.platform === "darwin";
10 | 
11 | const createWindow = async () => {
12 |   const windowBound = store.get(WINDOW_BONDS_KEY) ?? {};
13 | 
14 |   const mainWindow = new BrowserWindow({
15 |     width: 600,
16 |     height: 800,
17 |     minWidth: 360,
18 |     minHeight: 360,
19 |     icon: path.join(
20 |       __dirname,
21 |       "public",
22 |       { darwin: "favicon.icns", linux: "favicon.png", win32: "favicon.ico" }[
23 |         process.platform
24 |       ] || "favicon.ico"
25 |     ),
26 |     frame: !isMac,
27 |     skipTaskbar: isMac,
28 |     autoHideMenuBar: isMac,
29 |     webPreferences: {
30 |       backgroundThrottling: false,
31 |       preload: path.resolve(__dirname, "electron-preload.cjs"),
32 |       contextIsolation: true,
33 |     },
34 |     ...windowBound,
35 |   });
36 | 
37 |   ipcMain.handle("toggleFullscreen", function () {
38 |     mainWindow.setFullScreen(!mainWindow.isFullScreen());
39 |   });
40 | 
41 |   ipcMain.handle("close", function () {
42 |     app.quit();
43 |   });
44 | 
45 |   ipcMain.handle("minimize", function () {
46 |     mainWindow.minimize();
47 |   });
48 | 
49 |   ipcMain.handle("setSetting", function (_event, { key, value }) {
50 |     if (key === "app:theme") {
51 |       nativeTheme.themeSource = value;
52 |     }
53 |     return store.set(key, value);
54 |   });
55 | 
56 |   ipcMain.handle("getSetting", function (_event, { key }) {
57 |     return store.get(key);
58 |   });
59 | 
60 |   mainWindow.on("close", function () {
61 |     store.set(WINDOW_BONDS_KEY, mainWindow.getBounds());
62 |   });
63 | 
64 |   mainWindow.on("closed", function () {
65 |     app.quit();
66 |   });
67 | 
68 |   if (process.env.NODE_ENV !== "development") {
69 |     await mainWindow.loadFile(path.join(__dirname, "dist", "index.html"));
70 |   } else {
71 |     await mainWindow.loadURL("http://localhost:3000/");
72 |   }
73 | 
74 |   if (process.env.NODE_ENV === "development") {
75 |     mainWindow.webContents.openDevTools();
76 |   }
77 | };
78 | 
79 | app.whenReady().then(() => {
80 |   createWindow();
81 | 
82 |   app.on("activate", () => {
83 |     if (BrowserWindow.getAllWindows().length === 0) createWindow();
84 |   });
85 | });
86 | 
87 | app.on("window-all-closed", () => {
88 |   if (!isMac) app.quit();
89 | });
90 | 


--------------------------------------------------------------------------------
/forge.config.cjs:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const fs = require("fs");
 3 | 
 4 | module.exports = {
 5 |   packagerConfig: {
 6 |     icon: "./public/favicon",
 7 |   },
 8 |   rebuildConfig: {},
 9 |   makers: [
10 |     {
11 |       name: "@electron-forge/maker-squirrel",
12 |       config: {},
13 |     },
14 |     {
15 |       name: "@electron-forge/maker-zip",
16 |       platforms: ["darwin"],
17 |     },
18 |     {
19 |       name: "@electron-forge/maker-deb",
20 |       config: {},
21 |     },
22 |   ],
23 |   publishers: [
24 |     {
25 |       name: "@electron-forge/publisher-github",
26 |       config: {
27 |         repository: {
28 |           owner: "stoope",
29 |           name: "writer",
30 |         },
31 |         prerelease: false,
32 |         draft: false,
33 |       },
34 |     },
35 |   ],
36 | };
37 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 6 |     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
 7 |     <meta
 8 |       http-equiv="Content-Security-Policy"
 9 |       content="default-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline';"
10 |     />
11 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
12 |     <title>Writer</title>
13 |     <meta name="description" content="Distraction free writer" />
14 |     <script>
15 |       document.addEventListener("DOMContentLoaded", function (event) {
16 |         let theme = localStorage.getItem("app:theme");
17 | 
18 |         if (theme !== null) {
19 |           theme = JSON.parse(theme);
20 |           document.body.classList.remove("light-theme");
21 |           document.body.classList.remove("dark-theme");
22 |           if (theme === "light") {
23 |             document.body.classList.add("light-theme");
24 |           } else if (theme === "dark") {
25 |             document.body.classList.add("dark-theme");
26 |           }
27 |         }
28 |       });
29 |     </script>
30 |   </head>
31 |   <body>
32 |     <div id="app"></div>
33 |     <script type="module" src="/src/main.ts"></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "writer",
 3 |   "description": "Writer without distractions",
 4 |   "private": true,
 5 |   "version": "1.0.0",
 6 |   "type": "module",
 7 |   "main": "electron.cjs",
 8 |   "scripts": {
 9 |     "start": "NODE_ENV=development concurrently \"npm run frontend:start\" \"npm run electron:start\"",
10 |     "frontend:start": "vite --port 3000 --host localhost",
11 |     "frontend:start:web": "VITE_WEB=true vite --port 3000 --host localhost",
12 |     "frontend:build": "vite build",
13 |     "frontend:build:web": "VITE_WEB=true vite build",
14 |     "frontend:preview": "vite preview",
15 |     "frontend:check": "svelte-check --tsconfig ./tsconfig.json",
16 |     "electron:start": "electron .",
17 |     "electron:build": "electron-forge make",
18 |     "build": "npm run frontend:build && npm run electron:build",
19 |     "package": "electron-forge package",
20 |     "publish": "electron-forge publish",
21 |     "lint": "prettier --plugin-search-dir . --check . && eslint .",
22 |     "format": "prettier --plugin-search-dir . --write ."
23 |   },
24 |   "devDependencies": {
25 |     "@electron-forge/cli": "^6.0.5",
26 |     "@electron-forge/maker-deb": "^6.0.5",
27 |     "@electron-forge/maker-rpm": "^6.0.5",
28 |     "@electron-forge/maker-squirrel": "^6.0.5",
29 |     "@electron-forge/maker-zip": "^6.0.5",
30 |     "@electron-forge/publisher-github": "^6.0.5",
31 |     "@sveltejs/vite-plugin-svelte": "^2.0.3",
32 |     "@tsconfig/svelte": "^3.0.0",
33 |     "@types/debounce": "^1.2.1",
34 |     "@typescript-eslint/eslint-plugin": "^5.54.0",
35 |     "@typescript-eslint/parser": "^5.54.0",
36 |     "concurrently": "^7.6.0",
37 |     "electron": "^23.1.1",
38 |     "eslint": "^8.35.0",
39 |     "eslint-config-prettier": "^8.6.0",
40 |     "eslint-plugin-svelte3": "^4.0.0",
41 |     "prettier": "^2.8.4",
42 |     "prettier-plugin-svelte": "^2.9.0",
43 |     "svelte": "^3.55.1",
44 |     "svelte-check": "^3.0.4",
45 |     "tslib": "^2.5.0",
46 |     "typescript": "^4.9.5",
47 |     "vite": "^4.1.4"
48 |   },
49 |   "dependencies": {
50 |     "@fontsource/courier-prime": "^4.5.9",
51 |     "@fontsource/fira-code": "^4.5.13",
52 |     "debounce": "^1.2.1",
53 |     "electron-squirrel-startup": "^1.0.0",
54 |     "electron-store": "^8.1.0"
55 |   },
56 |   "volta": {
57 |     "node": "18.14.1"
58 |   },
59 |   "engines": {
60 |     "node": ">=18",
61 |     "npm": ">=9"
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/preview_dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stoope/writer/8c7a01a8b1251e6df3d60297026ec6ffbe2a3ecf/preview_dark.png


--------------------------------------------------------------------------------
/preview_light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stoope/writer/8c7a01a8b1251e6df3d60297026ec6ffbe2a3ecf/preview_light.png


--------------------------------------------------------------------------------
/public/favicon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stoope/writer/8c7a01a8b1251e6df3d60297026ec6ffbe2a3ecf/public/favicon.icns


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stoope/writer/8c7a01a8b1251e6df3d60297026ec6ffbe2a3ecf/public/favicon.ico


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stoope/writer/8c7a01a8b1251e6df3d60297026ec6ffbe2a3ecf/public/favicon.png


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 3 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 4 | 	 viewBox="0 0 509.287 509.287" xml:space="preserve">
 5 | <circle style="fill:#6EB1E1;" cx="254.644" cy="254.644" r="254.644"/>
 6 | <path style="fill:#F0582F;" d="M460.461,453.001H48.826c-17.632,0-29.838-16.276-26.787-35.264l30.517-182.082H457.07
 7 | 	l30.517,182.082C490.299,436.726,478.093,453.001,460.461,453.001z"/>
 8 | <path style="fill:#414753;" d="M425.197,294.315H84.09L65.78,403.836c-2.713,15.258,7.46,28.482,21.701,28.482h334.665
 9 | 	c14.241,0,24.413-13.224,21.701-28.482L425.197,294.315z"/>
10 | <path style="fill:#646B79;" d="M468.26,182.421l-37.637-39.332l0,0H78.665l0,0l-37.637,39.332v46.453h11.189v7.121h404.514v-7.121
11 | 	h11.189v-46.453H468.26z M422.485,193.272H86.803l8.816-21.701H413.33L422.485,193.272z"/>
12 | <rect x="121.388" y="56.286" style="fill:#F1F3F7;" width="266.511" height="136.646"/>
13 | <g>
14 | 	<path style="fill:#FFFFFC;" d="M122.744,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
15 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C126.474,304.148,124.779,302.453,122.744,302.453z"/>
16 | 	<path style="fill:#FFFFFC;" d="M150.209,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
17 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C153.939,304.148,152.244,302.453,150.209,302.453z"/>
18 | 	<path style="fill:#FFFFFC;" d="M177.674,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
19 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C181.404,304.148,179.709,302.453,177.674,302.453z"/>
20 | 	<path style="fill:#FFFFFC;" d="M204.8,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
21 | 		H204.8c2.034,0,4.069-1.695,4.069-4.069v-13.563C208.869,304.148,207.174,302.453,204.8,302.453z"/>
22 | 	<path style="fill:#FFFFFC;" d="M232.265,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
23 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C236.334,304.148,234.638,302.453,232.265,302.453z"/>
24 | 	<path style="fill:#FFFFFC;" d="M259.73,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
25 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C263.799,304.148,262.103,302.453,259.73,302.453z"/>
26 | 	<path style="fill:#FFFFFC;" d="M287.195,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
27 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C291.264,304.148,289.229,302.453,287.195,302.453z"/>
28 | 	<path style="fill:#FFFFFC;" d="M314.66,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
29 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C318.389,304.148,316.694,302.453,314.66,302.453z"/>
30 | 	<path style="fill:#FFFFFC;" d="M342.125,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
31 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C345.854,304.148,344.159,302.453,342.125,302.453z"/>
32 | 	<path style="fill:#FFFFFC;" d="M369.589,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
33 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C373.319,304.148,371.624,302.453,369.589,302.453z"/>
34 | 	<path style="fill:#FFFFFC;" d="M397.054,302.453h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
35 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C400.784,304.148,399.089,302.453,397.054,302.453z"/>
36 | 	<path style="fill:#FFFFFC;" d="M122.744,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
37 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C126.474,366.199,124.779,364.503,122.744,364.503z"/>
38 | 	<path style="fill:#FFFFFC;" d="M150.209,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
39 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C153.939,366.199,152.244,364.503,150.209,364.503z"/>
40 | 	<path style="fill:#FFFFFC;" d="M177.674,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
41 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C181.404,366.199,179.709,364.503,177.674,364.503z"/>
42 | 	<path style="fill:#FFFFFC;" d="M204.8,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
43 | 		H204.8c2.034,0,4.069-1.695,4.069-4.069v-13.563C208.869,366.199,207.174,364.503,204.8,364.503z"/>
44 | 	<path style="fill:#FFFFFC;" d="M232.265,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
45 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C236.334,366.199,234.638,364.503,232.265,364.503z"/>
46 | 	<path style="fill:#FFFFFC;" d="M259.73,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
47 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C263.799,366.199,262.103,364.503,259.73,364.503z"/>
48 | 	<path style="fill:#FFFFFC;" d="M287.195,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
49 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C291.264,366.199,289.229,364.503,287.195,364.503z"/>
50 | 	<path style="fill:#FFFFFC;" d="M314.66,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
51 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C318.389,366.199,316.694,364.503,314.66,364.503z"/>
52 | 	<path style="fill:#FFFFFC;" d="M342.125,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
53 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C345.854,366.199,344.159,364.503,342.125,364.503z"/>
54 | 	<path style="fill:#FFFFFC;" d="M369.589,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
55 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C373.319,366.199,371.624,364.503,369.589,364.503z"/>
56 | 	<path style="fill:#FFFFFC;" d="M397.054,364.503h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
57 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C400.784,366.199,399.089,364.503,397.054,364.503z"/>
58 | 	<path style="fill:#FFFFFC;" d="M108.842,333.309H93.584c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
59 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C112.911,335.004,111.216,333.309,108.842,333.309z"/>
60 | 	<path style="fill:#FFFFFC;" d="M136.307,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
61 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C140.376,335.004,138.681,333.309,136.307,333.309z"/>
62 | 	<path style="fill:#FFFFFC;" d="M163.772,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
63 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C167.841,335.004,166.146,333.309,163.772,333.309z"/>
64 | 	<path style="fill:#FFFFFC;" d="M191.237,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
65 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C195.306,335.004,193.272,333.309,191.237,333.309z"/>
66 | 	<path style="fill:#FFFFFC;" d="M218.702,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
67 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C222.432,335.004,220.736,333.309,218.702,333.309z"/>
68 | 	<path style="fill:#FFFFFC;" d="M246.167,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
69 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C249.897,335.004,248.201,333.309,246.167,333.309z"/>
70 | 	<path style="fill:#FFFFFC;" d="M273.632,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
71 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C277.362,335.004,275.666,333.309,273.632,333.309z"/>
72 | 	<path style="fill:#FFFFFC;" d="M300.758,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
73 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C304.827,335.004,303.131,333.309,300.758,333.309z"/>
74 | 	<path style="fill:#FFFFFC;" d="M328.223,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
75 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C332.291,335.004,330.596,333.309,328.223,333.309z"/>
76 | 	<path style="fill:#FFFFFC;" d="M355.687,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
77 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C359.756,335.004,358.061,333.309,355.687,333.309z"/>
78 | 	<path style="fill:#FFFFFC;" d="M383.152,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
79 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C387.221,335.004,385.187,333.309,383.152,333.309z"/>
80 | 	<path style="fill:#FFFFFC;" d="M410.617,333.309h-15.258c-2.034,0-4.069,1.695-4.069,4.069v13.563c0,2.034,1.695,4.069,4.069,4.069
81 | 		h15.258c2.034,0,4.069-1.695,4.069-4.069v-13.563C414.347,335.004,412.652,333.309,410.617,333.309z"/>
82 | 	<path style="fill:#FFFFFC;" d="M343.481,397.732H161.06c-1.356,0-2.374,1.356-2.374,2.713v14.241c0,1.695,1.017,2.713,2.374,2.713
83 | 		h182.76c1.356,0,2.373-1.356,2.373-2.713v-14.241C345.854,399.089,344.837,397.732,343.481,397.732z"/>
84 | </g>
85 | <g>
86 | 	<rect x="157.669" y="94.94" style="fill:#BDBDBE;" width="111.894" height="12.546"/>
87 | 	<rect x="157.669" y="132.917" style="fill:#BDBDBE;" width="194.289" height="12.546"/>
88 | 	<rect x="157.669" y="171.232" style="fill:#BDBDBE;" width="194.289" height="12.546"/>
89 | </g>
90 | </svg>


--------------------------------------------------------------------------------
/public/favicon@1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stoope/writer/8c7a01a8b1251e6df3d60297026ec6ffbe2a3ecf/public/favicon@1x.png


--------------------------------------------------------------------------------
/public/favicon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stoope/writer/8c7a01a8b1251e6df3d60297026ec6ffbe2a3ecf/public/favicon@2x.png


--------------------------------------------------------------------------------
/public/service-worker.js:
--------------------------------------------------------------------------------
 1 | const cacheName = "v1";
 2 | 
 3 | self.addEventListener("fetch", async function (event) {
 4 |   if (event.request.destination === "font") {
 5 |     event.respondWith(
 6 |       caches.open(cacheName).then((cache) => {
 7 |         return cache.match(event.request).then((cachedResponse) => {
 8 |           const fetchedResponse = fetch(event.request).then(
 9 |             (networkResponse) => {
10 |               cache.put(event.request, networkResponse.clone());
11 | 
12 |               return networkResponse;
13 |             }
14 |           );
15 | 
16 |           return cachedResponse || fetchedResponse;
17 |         });
18 |       })
19 |     );
20 |   } else {
21 |     return;
22 |   }
23 | });
24 | 


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import "@fontsource/fira-code/latin-400.css";
 3 |   import Editor from "./lib/Editor.svelte";
 4 |   import Statistics from "./lib/Statistics.svelte";
 5 |   import Stopwatch from "./lib/Stopwatch.svelte";
 6 |   import Titlebar from "./lib/Titlebar.svelte";
 7 | </script>
 8 | 
 9 | <main class="container">
10 |   <Titlebar />
11 |   <div class="editor">
12 |     <Editor />
13 |   </div>
14 |   <div class="stopwatch">
15 |     <Stopwatch />
16 |   </div>
17 |   <div class="statistics">
18 |     <Statistics />
19 |   </div>
20 | </main>
21 | 
22 | <style>
23 |   .container {
24 |     -webkit-app-region: no-drag;
25 |     max-width: 750px;
26 |     padding: 2.5rem 2rem 1rem 2rem;
27 |     height: 100%;
28 |     margin-left: auto;
29 |     margin-right: auto;
30 |     display: grid;
31 |     grid-template-columns: auto 1fr;
32 |     grid-template-rows: 1fr auto;
33 |     gap: 1rem;
34 |     grid-template-areas:
35 |       "editor editor"
36 |       "stopwatch statistics";
37 |   }
38 | 
39 |   .editor {
40 |     grid-area: editor;
41 |   }
42 | 
43 |   .stopwatch {
44 |     grid-area: stopwatch;
45 |     user-select: none;
46 |   }
47 | 
48 |   .statistics {
49 |     grid-area: statistics;
50 |     margin-left: auto;
51 |     user-select: none;
52 |     display: grid;
53 |     align-items: center;
54 |   }
55 | 
56 |   @media only screen and (max-width: 560px) {
57 |     .container {
58 |       grid-template-columns: 1fr;
59 |       grid-template-rows: 1fr auto auto;
60 |       gap: 1rem;
61 |       grid-template-areas:
62 |         "editor"
63 |         "stopwatch"
64 |         "statistics";
65 |     }
66 | 
67 |     .statistics {
68 |       margin-right: auto;
69 |       margin-left: auto;
70 |     }
71 | 
72 |     .stopwatch {
73 |       margin-right: auto;
74 |       margin-left: auto;
75 |     }
76 |   }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/src/global.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   --background: rgb(var(--background-rgb));
  3 |   --foreground: rgb(var(--foreground-rgb));
  4 |   --accent: var(--cyan);
  5 |   --black: rgb(var(--black-rgb));
  6 |   --white: rgb(var(--white-rgb));
  7 |   --comment: rgb(var(--comment-rgb));
  8 |   --comment-rgb: 121, 112, 169;
  9 |   --selection-rgb: 69, 65, 88;
 10 |   --cyan-rgb: 128, 255, 234;
 11 |   --green-rgb: 138, 255, 128;
 12 |   --orange-rgb: 255, 202, 128;
 13 |   --pink-rgb: 255, 128, 191;
 14 |   --purple-rgb: 149, 128, 255;
 15 |   --red-rgb: 255, 149, 128;
 16 |   --yellow-rgb: 255, 255, 128;
 17 |   --black-rgb: 34, 33, 44;
 18 |   --white-rgb: 248, 248, 242;
 19 |   --selection-rgb-light: 176, 172, 194;
 20 |   --cyan-rgb-light: 0, 229, 191;
 21 |   --green-rgb-light: 18, 229, 0;
 22 |   --orange-rgb-light: 229, 133, 0;
 23 |   --pink-rgb-light: 229, 0, 113;
 24 |   --purple-rgb-light: 37, 0, 229;
 25 |   --red-rgb-light: 229, 37, 0;
 26 |   --yellow-rgb-light: 229, 229, 0;
 27 |   -webkit-app-region: drag;
 28 | }
 29 | 
 30 | body {
 31 |   background-color: var(--background);
 32 |   color: var(--foreground);
 33 |   font-size: 16px;
 34 |   font-family: "Fira Code", monospace;
 35 | }
 36 | 
 37 | @media (prefers-color-scheme: dark) {
 38 |   body:not(.light-theme) {
 39 |     --background-rgb: var(--black-rgb);
 40 |     --foreground-rgb: var(--white-rgb);
 41 |     --selection: rgb(var(--selection-rgb));
 42 |     --cyan: rgb(var(--cyan-rgb));
 43 |     --green: rgb(var(--green-rgb));
 44 |     --orange: rgb(var(--orange-rgb));
 45 |     --pink: rgb(var(--pink-rgb));
 46 |     --purple: rgb(var(--purple-rgb));
 47 |     --red: rgb(var(--red-rgb));
 48 |     --yellow: rgb(var(--yellow-rgb));
 49 |   }
 50 | }
 51 | body.dark-theme:not(.light-theme) {
 52 |   --background-rgb: var(--black-rgb);
 53 |   --foreground-rgb: var(--white-rgb);
 54 |   --selection: rgb(var(--selection-rgb));
 55 |   --cyan: rgb(var(--cyan-rgb));
 56 |   --green: rgb(var(--green-rgb));
 57 |   --orange: rgb(var(--orange-rgb));
 58 |   --pink: rgb(var(--pink-rgb));
 59 |   --purple: rgb(var(--purple-rgb));
 60 |   --red: rgb(var(--red-rgb));
 61 |   --yellow: rgb(var(--yellow-rgb));
 62 | }
 63 | 
 64 | @media (prefers-color-scheme: light) {
 65 |   body:not(.dark-theme) {
 66 |     --background-rgb: var(--white-rgb);
 67 |     --foreground-rgb: var(--black-rgb);
 68 |     --accent: var(--orange);
 69 |     --selection: rgb(var(--selection-rgb-light));
 70 |     --cyan: rgb(var(--cyan-rgb-light));
 71 |     --green: rgb(var(--green-rgb-light));
 72 |     --orange: rgb(var(--orange-rgb-light));
 73 |     --pink: rgb(var(--pink-rgb-light));
 74 |     --purple: rgb(var(--purple-rgb-light));
 75 |     --red: rgb(var(--red-rgb-light));
 76 |     --yellow: rgb(var(--yellow-rgb-light));
 77 |   }
 78 | }
 79 | body.light-theme:not(.dark-theme) {
 80 |   --background-rgb: var(--white-rgb);
 81 |   --foreground-rgb: var(--black-rgb);
 82 |   --accent: var(--orange);
 83 |   --selection: rgb(var(--selection-rgb-light));
 84 |   --cyan: rgb(var(--cyan-rgb-light));
 85 |   --green: rgb(var(--green-rgb-light));
 86 |   --orange: rgb(var(--orange-rgb-light));
 87 |   --pink: rgb(var(--pink-rgb-light));
 88 |   --purple: rgb(var(--purple-rgb-light));
 89 |   --red: rgb(var(--red-rgb-light));
 90 |   --yellow: rgb(var(--yellow-rgb-light));
 91 | }
 92 | 
 93 | * {
 94 |   box-sizing: border-box;
 95 |   padding: 0;
 96 |   margin: 0;
 97 | }
 98 | 
 99 | ::selection {
100 |   color: var(--foreground);
101 |   background-color: var(--selection);
102 |   opacity: 1;
103 | }
104 | 
105 | html,
106 | body,
107 | #app {
108 |   height: 100%;
109 | }
110 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | declare interface Window {
3 |   ipcRenderer: {
4 |     invoke(channel: string, ...args: any[]): Promise<any>;
5 |     send(channel: string, ...args: any[]): void;
6 |     on(channel: string, listener: (event: any, ...args: any[]) => void): this;
7 |   };
8 | }
9 | 


--------------------------------------------------------------------------------
/src/lib/Close.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { focus } from "./stores/editor";
 3 |   import IconButton from "./IconButton.svelte";
 4 | 
 5 |   function toggle() {
 6 |     if (!import.meta.env.VITE_WEB) {
 7 |       window.ipcRenderer.invoke("close");
 8 |     }
 9 |     focus();
10 |   }
11 | </script>
12 | 
13 | <div class="container">
14 |   <IconButton on:click={toggle} class="close-button" title="Close">
15 |     <svg
16 |       xmlns="http://www.w3.org/2000/svg"
17 |       width={10}
18 |       height={10}
19 |       viewBox="0 0 24 24"
20 |       ><path
21 |         d="M4.293 18.293 10.586 12 4.293 5.707a1 1 0 0 1 1.414-1.414L12 10.586l6.293-6.293a1 1 0 1 1 1.414 1.414L13.414 12l6.293 6.293a1 1 0 1 1-1.414 1.414L12 13.414l-6.293 6.293a1 1 0 0 1-1.414-1.414Z"
22 |       /></svg
23 |     ></IconButton
24 |   >
25 | </div>
26 | 
27 | <style>
28 |   .container :global(.close-button) {
29 |     background-color: rgb(var(--red-rgb));
30 |     border-radius: 50%;
31 |     padding: 3px;
32 |     -webkit-app-region: no-drag;
33 |     color: var(--black);
34 |   }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/lib/Editor.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import "@fontsource/courier-prime/latin-400.css";
 3 |   import { onMount } from "svelte";
 4 |   import {
 5 |     ref,
 6 |     value,
 7 |     scrollTop,
 8 |     handleSelectionChange,
 9 |     focus,
10 |   } from "./stores/editor";
11 | 
12 |   onMount(() => {
13 |     focus();
14 | 
15 |     document.addEventListener("selectionchange", handleSelectionChange);
16 | 
17 |     return () => {
18 |       document.removeEventListener("selectionchange", handleSelectionChange);
19 |     };
20 |   });
21 | 
22 |   function handleScroll(event: Event) {
23 |     scrollTop.set((event.target as HTMLTextAreaElement).scrollTop);
24 |   }
25 | </script>
26 | 
27 | <textarea
28 |   bind:this={$ref}
29 |   bind:value={$value}
30 |   spellcheck={false}
31 |   on:scroll={handleScroll}
32 |   class="editor"
33 |   autocomplete="off"
34 |   autocorrect="off"
35 |   autocapitalize="off"
36 | />
37 | 
38 | <style>
39 |   .editor {
40 |     font-family: "Courier Prime", monospace;
41 |     font-size: 1.2rem;
42 |     width: calc(100% - 10px);
43 |     position: relative;
44 |     right: -5px;
45 |     height: 100%;
46 |     -webkit-font-smoothing: antialiased;
47 |     -moz-osx-font-smoothing: grayscale;
48 |     line-height: 1.5rem;
49 |     resize: none;
50 |     background: transparent;
51 |     border: 0;
52 |     color: var(--foreground);
53 |     overflow-y: overlay;
54 |     padding-right: 10px;
55 |   }
56 |   .editor::-webkit-scrollbar-track {
57 |     border: none;
58 |     background-color: transparent;
59 |     border-radius: 10px;
60 |   }
61 | 
62 |   .editor::-webkit-scrollbar {
63 |     width: 0.5rem;
64 |     background-color: transparent;
65 |   }
66 | 
67 |   .editor::-webkit-scrollbar-thumb {
68 |     background-color: rgba(var(--comment-rgb), 0.5);
69 |     border-radius: 10px;
70 |   }
71 | 
72 |   .editor:focus {
73 |     outline: none;
74 |   }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/lib/Fullscreen.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { focus } from "./stores/editor";
 3 |   import { fullscreen } from "./stores/app";
 4 |   import { closeFullscreen, openFullscreen } from "./utils/fullscreen";
 5 |   import IconButton from "./IconButton.svelte";
 6 | 
 7 |   function toggle() {
 8 |     if (import.meta.env.VITE_WEB) {
 9 |       fullscreen.update((value) => {
10 |         try {
11 |           if (value) {
12 |             closeFullscreen();
13 |           } else {
14 |             openFullscreen();
15 |           }
16 |           return !value;
17 |         } catch (error) {}
18 |       });
19 |     } else {
20 |       window.ipcRenderer.invoke("toggleFullscreen");
21 |       fullscreen.update((value) => !value);
22 |     }
23 |     focus();
24 |   }
25 | </script>
26 | 
27 | <div class="container">
28 |   <IconButton
29 |     on:click={toggle}
30 |     class="fullscreen-button"
31 |     title="Toggle fullscreen"
32 |   >
33 |     {#if $fullscreen}
34 |       <svg
35 |         xmlns="http://www.w3.org/2000/svg"
36 |         width={10}
37 |         height={10}
38 |         fill="none"
39 |         viewBox="0 0 24 24"
40 |         ><path
41 |           fill="currentColor"
42 |           d="M21.707 3.707 16.414 9H20a1 1 0 1 1 0 2h-6.003a.997.997 0 0 1-.702-.29l-.004-.005a.997.997 0 0 1-.291-.702V4a1 1 0 1 1 2 0v3.586l5.293-5.293a1 1 0 1 1 1.414 1.414ZM9 20a1 1 0 1 0 2 0v-6.003a.997.997 0 0 0-.997-.997H4a1 1 0 1 0 0 2h3.586l-5.293 5.293a1 1 0 1 0 1.414 1.414L9 16.414V20Z"
43 |         /></svg
44 |       >
45 |     {:else}
46 |       <svg
47 |         xmlns="http://www.w3.org/2000/svg"
48 |         width={10}
49 |         height={10}
50 |         fill="none"
51 |         viewBox="0 0 24 24"
52 |         ><path
53 |           fill="currentColor"
54 |           d="M21.71 2.295a.995.995 0 0 1 .29.702V9a1 1 0 1 1-2 0V5.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L18.586 4H15a1 1 0 1 1 0-2h6c.275 0 .524.111.705.29l.004.005ZM10.707 14.707 5.414 20H9a1 1 0 1 1 0 2H2.997a.997.997 0 0 1-.702-.29l-.004-.005A.997.997 0 0 1 2 21v-6a1 1 0 1 1 2 0v3.586l5.293-5.293a1 1 0 0 1 1.414 1.414Z"
55 |         /></svg
56 |       >{/if}</IconButton
57 |   >
58 | </div>
59 | 
60 | <style>
61 |   .container :global(.fullscreen-button) {
62 |     background-color: rgb(var(--green-rgb));
63 |     border-radius: 50%;
64 |     color: var(--black);
65 |     padding: 3px;
66 |     -webkit-app-region: no-drag;
67 |   }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/lib/Hide.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { focus } from "./stores/editor";
 3 |   import { fullscreen } from "./stores/app";
 4 |   import IconButton from "./IconButton.svelte";
 5 |   import { classnames } from "./utils/classnames";
 6 | 
 7 |   function toggle() {
 8 |     if (!import.meta.env.VITE_WEB) {
 9 |       window.ipcRenderer.invoke("minimize");
10 |     }
11 | 
12 |     focus();
13 |   }
14 | </script>
15 | 
16 | <div class="container">
17 |   <IconButton
18 |     disabled={$fullscreen}
19 |     on:click={toggle}
20 |     class={classnames("hide-button", $fullscreen && "hide-button--fullscreen")}
21 |     title="Minimize"
22 |   >
23 |     <svg
24 |       xmlns="http://www.w3.org/2000/svg"
25 |       width={10}
26 |       height={10}
27 |       viewBox="0 0 24 24"
28 |       ><path d="M2 12a1 1 0 0 1 1-1h18a1 1 0 0 1 0 2H3a1 1 0 0 1-1-1Z" /></svg
29 |     ></IconButton
30 |   >
31 | </div>
32 | 
33 | <style>
34 |   .container :global(.hide-button) {
35 |     border-radius: 50%;
36 |     padding: 3px;
37 |     -webkit-app-region: no-drag;
38 |     color: var(--black);
39 |     background-color: rgb(var(--orange-rgb));
40 |   }
41 |   .container :global(.hide-button--fullscreen) {
42 |     opacity: 0.3;
43 |     background-color: rgba(var(--comment-rgb), 0.2);
44 |   }
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/lib/IconButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { classnames } from "./utils/classnames";
 3 |   export let selected = false;
 4 | </script>
 5 | 
 6 | <button
 7 |   {...$$restProps}
 8 |   class={classnames("container", $$restProps.class)}
 9 |   class:selected
10 |   on:click
11 | >
12 |   <slot />
13 | </button>
14 | 
15 | <style>
16 |   .container {
17 |     color: var(--comment);
18 |     appearance: none;
19 |     border: none;
20 |     cursor: pointer;
21 |     background-color: transparent;
22 |     display: flex;
23 |     align-items: center;
24 |     justify-content: center;
25 |   }
26 |   .container:disabled {
27 |     cursor: default;
28 |   }
29 |   .selected {
30 |     color: var(--accent);
31 |   }
32 | </style>
33 | 


--------------------------------------------------------------------------------
/src/lib/Statistics.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { get } from "svelte/store";
 3 |   import { selectionEnd, selectionStart, value } from "./stores/editor";
 4 |   import { calculatePosition } from "./utils/calculatePosition";
 5 |   import { countCharacters } from "./utils/countCharacters";
 6 |   import { countParagraphs } from "./utils/countParagraphs";
 7 |   import { countSentences } from "./utils/countSentences";
 8 |   import { countWords } from "./utils/countWords";
 9 | 
10 |   let characters = 0;
11 |   let words = 0;
12 |   let sentences = 0;
13 |   let paragraphs = 0;
14 |   let position = 0;
15 | 
16 |   function calculate() {
17 |     let _value = get(value);
18 |     let _selectionEnd = get(selectionEnd);
19 |     let _selectionStart = get(selectionStart);
20 | 
21 |     if (_selectionEnd == _selectionStart) {
22 |       _selectionStart = 0;
23 |       _selectionEnd = _value.length;
24 |     }
25 | 
26 |     characters = countCharacters(_value, _selectionStart, _selectionEnd);
27 |     words = countWords(_value, _selectionStart, _selectionEnd);
28 |     sentences = countSentences(_value, _selectionStart, _selectionEnd);
29 |     paragraphs = countParagraphs(_value, _selectionStart, _selectionEnd);
30 |     position = calculatePosition(_value, _selectionEnd);
31 |   }
32 | 
33 |   value.subscribe(calculate);
34 |   selectionEnd.subscribe(calculate);
35 |   selectionStart.subscribe(calculate);
36 | </script>
37 | 
38 | <span class="container">
39 |   {#if $selectionStart !== $selectionEnd}
40 |     <span class="selection-range" title="Selected range">
41 |       [{$selectionStart},{$selectionEnd}]
42 |     </span>
43 |   {/if}
44 |   <span title="Character count">{characters}C</span>
45 |   <span title="Words count">{words}W</span>
46 |   <span title="Sentences count">{sentences}S</span>
47 |   <span title="Paragraphs count">{paragraphs}P</span>
48 |   <span title="Cursor position" class="position">
49 |     {position.toFixed(2).padStart(6, " ")}%
50 |   </span>
51 | </span>
52 | 
53 | <style>
54 |   .container {
55 |     color: var(--comment);
56 |   }
57 | 
58 |   .selection-range {
59 |     color: var(--accent);
60 |   }
61 | 
62 |   .position {
63 |     white-space: pre;
64 |   }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/lib/Stopwatch.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { focus } from "./stores/editor";
  3 |   import IconButton from "./IconButton.svelte";
  4 | 
  5 |   let timerID;
  6 |   let lastTimerStartTime = 0;
  7 |   let elapsedBeforeLastStart = 0;
  8 |   let running = false;
  9 |   let milliseconds = "000";
 10 |   let seconds = "00";
 11 |   let minutes = "00";
 12 |   let hours = "00";
 13 | 
 14 |   function startTimer() {
 15 |     running = true;
 16 |     lastTimerStartTime = Date.now();
 17 | 
 18 |     timerID = requestAnimationFrame(updateTimer);
 19 |     focus();
 20 |   }
 21 | 
 22 |   function pauseTimer() {
 23 |     running = false;
 24 |     elapsedBeforeLastStart += Date.now() - lastTimerStartTime;
 25 | 
 26 |     cancelAnimationFrame(timerID);
 27 |     focus();
 28 |   }
 29 | 
 30 |   function resetTimer() {
 31 |     running = false;
 32 |     cancelAnimationFrame(timerID);
 33 | 
 34 |     elapsedBeforeLastStart = 0;
 35 |     milliseconds = "000";
 36 |     seconds = "00";
 37 |     minutes = "00";
 38 |     hours = "00";
 39 |     focus();
 40 |   }
 41 | 
 42 |   function formatNumber(number, desiredLength) {
 43 |     const stringNumber = String(number);
 44 |     return stringNumber.padStart(desiredLength, "0");
 45 |   }
 46 | 
 47 |   function updateTimer() {
 48 |     const elapsed = Date.now() - lastTimerStartTime + elapsedBeforeLastStart;
 49 |     const secondsElapsed = elapsed / 1000;
 50 |     const minutesElapsed = secondsElapsed / 60;
 51 |     const hoursElapsed = minutesElapsed / 60;
 52 | 
 53 |     milliseconds = formatNumber(elapsed % 1000, 3);
 54 |     seconds = formatNumber(Math.floor(secondsElapsed) % 60, 2);
 55 |     minutes = formatNumber(Math.floor(minutesElapsed) % 60, 2);
 56 |     hours = formatNumber(Math.floor(hoursElapsed), 2);
 57 | 
 58 |     timerID = requestAnimationFrame(updateTimer);
 59 |   }
 60 | </script>
 61 | 
 62 | <div title="Current time" class="container">
 63 |   <span class:running>
 64 |     {hours}:{minutes}:{seconds}:{milliseconds}
 65 |   </span>
 66 |   <div>
 67 |     {#if running}
 68 |       <IconButton selected={running} on:click={pauseTimer}>
 69 |         <svg
 70 |           width={24}
 71 |           height={24}
 72 |           viewBox="0 0 1024 1024"
 73 |           fill="none"
 74 |           xmlns="http://www.w3.org/2000/svg"
 75 |         >
 76 |           <path
 77 |             fill="currentColor"
 78 |             d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-96-544q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32zm192 0q32 0 32 32v256q0 32-32 32t-32-32V384q0-32 32-32z"
 79 |           />
 80 |         </svg></IconButton
 81 |       >
 82 |     {:else}
 83 |       <IconButton selected={running} on:click={startTimer}>
 84 |         <svg
 85 |           width={24}
 86 |           height={24}
 87 |           viewBox="0 0 1024 1024"
 88 |           fill="none"
 89 |           xmlns="http://www.w3.org/2000/svg"
 90 |         >
 91 |           <path
 92 |             fill="currentColor"
 93 |             d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768zm-48-247.616L668.608 512 464 375.616v272.768zm10.624-342.656 249.472 166.336a48 48 0 0 1 0 79.872L474.624 718.272A48 48 0 0 1 400 678.336V345.6a48 48 0 0 1 74.624-39.936z"
 94 |           />
 95 |         </svg></IconButton
 96 |       >
 97 |     {/if}
 98 |   </div>
 99 |   <div>
100 |     <IconButton selected={running} on:click={resetTimer}>
101 |       <svg
102 |         width={24}
103 |         height={24}
104 |         viewBox="0 0 1024 1024"
105 |         fill="none"
106 |         xmlns="http://www.w3.org/2000/svg"
107 |       >
108 |         <path
109 |           fill="currentColor"
110 |           d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
111 |         />
112 |       </svg></IconButton
113 |     >
114 |   </div>
115 | </div>
116 | 
117 | <style>
118 |   .container {
119 |     display: flex;
120 |     align-items: center;
121 |     color: var(--comment);
122 |   }
123 | 
124 |   .container > :not(:last-child) {
125 |     margin-right: 0.5rem;
126 |   }
127 | 
128 |   .running {
129 |     color: var(--accent);
130 |   }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/src/lib/Theme.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { theme } from "./stores/app";
  3 |   import IconButton from "./IconButton.svelte";
  4 | 
  5 |   function toggle() {
  6 |     theme.update((value) => {
  7 |       if (value === "dark") {
  8 |         return "light";
  9 |       } else if (value === "light") {
 10 |         return "system";
 11 |       } else {
 12 |         return "dark";
 13 |       }
 14 |     });
 15 |     focus();
 16 |   }
 17 | </script>
 18 | 
 19 | <div class="container">
 20 |   <IconButton
 21 |     on:click={toggle}
 22 |     class="theme-button"
 23 |     title={$theme === "dark"
 24 |       ? "Turn on light theme"
 25 |       : $theme === "light"
 26 |       ? "Turn on system theme"
 27 |       : "Turn on dark theme"}
 28 |   >
 29 |     {#if $theme === "dark"}
 30 |       <svg
 31 |         xmlns="http://www.w3.org/2000/svg"
 32 |         width={16}
 33 |         height={16}
 34 |         viewBox="0 0 35 35"
 35 |         ><path
 36 |           fill="currentColor"
 37 |           d="M18.44 34.68a18.22 18.22 0 0 1-2.94-.24 18.18 18.18 0 0 1-15-20.86A18.06 18.06 0 0 1 9.59.63a2.42 2.42 0 0 1 2.61.16 2.39 2.39 0 0 1 1 2.41l-1.3-.1 1.23.22A15.66 15.66 0 0 0 23.34 21a15.82 15.82 0 0 0 8.47.53A2.44 2.44 0 0 1 34.47 25a18.18 18.18 0 0 1-16.03 9.68ZM10.67 2.89a15.67 15.67 0 0 0-5 22.77A15.66 15.66 0 0 0 32.18 24a18.49 18.49 0 0 1-9.65-.64A18.18 18.18 0 0 1 10.67 2.89Z"
 38 |         /></svg
 39 |       >
 40 |     {:else if $theme === "light"}
 41 |       <svg
 42 |         xmlns="http://www.w3.org/2000/svg"
 43 |         width={16}
 44 |         height={16}
 45 |         viewBox="0 0 36 36"
 46 |         ><g data-name="Lager 93"
 47 |           ><g data-name="Sun 3, Brightness 3" transform="translate(2 2)"
 48 |             ><path
 49 |               fill="currentColor"
 50 |               d="M32 14h-4.967c-2 1.769-.779 4 .967 4h4.967c1.999-1.769.779-4-.967-4Z"
 51 |               data-name="Path 68"
 52 |             /><g fill="none" stroke-miterlimit="10" data-name="Path 69"
 53 |               ><path
 54 |                 d="M17.172 10.111a6 6 0 1 0 4.715 4.715 6.01 6.01 0 0 0-4.715-4.715Z"
 55 |               /><path
 56 |                 fill="currentColor"
 57 |                 d="M15.999 14c-.599 0-1.161.265-1.544.726-.274.331-.568.896-.415 1.706.139.731.796 1.388 1.528 1.527.145.027.29.041.43.041.598 0 1.16-.265 1.542-.726.275-.331.57-.896.417-1.703-.139-.734-.796-1.391-1.529-1.53a2.319 2.319 0 0 0-.43-.041m0-4c.384 0 .777.036 1.174.111 2.349.445 4.27 2.366 4.715 4.715A6.006 6.006 0 0 1 15.997 22c-.383 0-.776-.036-1.173-.111-2.348-.445-4.27-2.366-4.714-4.714A6.005 6.005 0 0 1 15.999 10Z"
 58 |               /></g
 59 |             ><rect
 60 |               width="8"
 61 |               height="4"
 62 |               fill="currentColor"
 63 |               data-name="Rectangle 26"
 64 |               rx="1.993"
 65 |               transform="translate(26 14)"
 66 |             /><rect
 67 |               width="8"
 68 |               height="4"
 69 |               fill="currentColor"
 70 |               data-name="Rectangle 27"
 71 |               rx="1.993"
 72 |               transform="rotate(90 -4 22)"
 73 |             /><rect
 74 |               width="8"
 75 |               height="4"
 76 |               fill="currentColor"
 77 |               data-name="Rectangle 28"
 78 |               rx="1.993"
 79 |               transform="rotate(90 10 8)"
 80 |             /><rect
 81 |               width="8"
 82 |               height="4"
 83 |               fill="currentColor"
 84 |               data-name="Rectangle 29"
 85 |               rx="1.993"
 86 |               transform="translate(-2 14)"
 87 |             /><g data-name="Group 22"
 88 |               ><rect
 89 |                 width="6.925"
 90 |                 height="3.766"
 91 |                 fill="currentColor"
 92 |                 data-name="Rectangle 30"
 93 |                 rx="1.883"
 94 |                 transform="rotate(-45 18.994 -24.97)"
 95 |               /></g
 96 |             ><g data-name="Group 23"
 97 |               ><rect
 98 |                 width="3.766"
 99 |                 height="6.925"
100 |                 fill="currentColor"
101 |                 data-name="Rectangle 31"
102 |                 rx="1.883"
103 |                 transform="rotate(-45 42.86 -15.08)"
104 |               /></g
105 |             ><g data-name="Group 24"
106 |               ><rect
107 |                 width="3.766"
108 |                 height="6.925"
109 |                 fill="currentColor"
110 |                 data-name="Rectangle 32"
111 |                 rx="1.883"
112 |                 transform="rotate(-45 5.297 .469)"
113 |               /></g
114 |             ><g data-name="Group 25"
115 |               ><rect
116 |                 width="6.925"
117 |                 height="3.766"
118 |                 fill="currentColor"
119 |                 data-name="Rectangle 33"
120 |                 rx="1.883"
121 |                 transform="rotate(-45 34.55 12.586)"
122 |               /></g
123 |             ></g
124 |           ></g
125 |         ></svg
126 |       >
127 |     {:else if $theme === "system"}
128 |       <svg
129 |         xmlns="http://www.w3.org/2000/svg"
130 |         width={16}
131 |         height={16}
132 |         viewBox="0 0 1920 1920"
133 |         ><path
134 |           fill="currentColor"
135 |           fill-rule="evenodd"
136 |           d="m1739.34 1293.414-105.827 180.818-240.225-80.188-24.509 22.25c-69.91 63.586-150.211 109.666-238.644 136.771l-32.076 9.94-49.468 244.065H835.584l-49.468-244.179-32.076-9.939c-88.432-27.105-168.734-73.185-238.644-136.771l-24.508-22.25-240.226 80.189-105.826-180.82 189.74-164.442-7.453-32.978c-10.39-45.742-15.586-91.483-15.586-135.869 0-44.386 5.195-90.127 15.586-135.868l7.454-32.979-189.741-164.442 105.826-180.819 240.226 80.075 24.508-22.25c69.91-63.585 150.212-109.665 238.644-136.884l32.076-9.826 49.468-244.066h213.007l49.468 244.18 32.076 9.825c88.433 27.219 168.734 73.186 238.644 136.885l24.509 22.25 240.225-80.189 105.826 180.819-189.74 164.442 7.453 32.98c10.39 45.74 15.586 91.481 15.586 135.867 0 44.386-5.195 90.127-15.586 135.869l-7.454 32.978 189.741 164.556Zm-53.76-333.403c0-41.788-3.84-84.48-11.634-127.284l210.184-182.062-199.454-340.856-265.186 88.433c-66.974-55.567-143.322-99.388-223.85-128.414L1140.977.01H743.198l-54.663 269.704c-81.431 29.139-156.424 72.282-223.963 128.414L199.5 309.809.045 650.665l210.07 182.062c-7.68 42.804-11.52 85.496-11.52 127.284 0 41.789 3.84 84.48 11.52 127.172L.046 1269.357 199.5 1610.214l265.186-88.546c66.974 55.68 143.323 99.388 223.85 128.527l54.663 269.816h397.779l54.663-269.703c81.318-29.252 156.424-72.283 223.85-128.527l265.186 88.546 199.454-340.857-210.184-182.174c7.793-42.805 11.633-85.496 11.633-127.285ZM942.075 564.706C724.1 564.706 546.782 742.024 546.782 960c0 217.976 177.318 395.294 395.294 395.294 217.977 0 395.294-177.318 395.294-395.294 0-217.976-177.317-395.294-395.294-395.294m0 677.647c-155.633 0-282.353-126.72-282.353-282.353s126.72-282.353 282.353-282.353S1224.43 804.367 1224.43 960s-126.72 282.353-282.353 282.353"
137 |         /></svg
138 |       >
139 |     {/if}</IconButton
140 |   >
141 | </div>
142 | 
143 | <style>
144 |   .container :global(.theme-button) {
145 |     color: var(--foreground);
146 |     padding: 3px;
147 |     -webkit-app-region: no-drag;
148 |   }
149 | </style>
150 | 


--------------------------------------------------------------------------------
/src/lib/Time.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { onMount } from "svelte";
 3 | 
 4 |   let time = new Date();
 5 | 
 6 |   onMount(() => {
 7 |     const interval = setInterval(() => {
 8 |       time = new Date();
 9 |     }, 1000);
10 | 
11 |     return () => {
12 |       clearInterval(interval);
13 |     };
14 |   });
15 | 
16 |   const formatter = new Intl.DateTimeFormat("en", {
17 |     hour: "numeric",
18 |     hour12: false,
19 |     minute: "numeric",
20 |   });
21 | </script>
22 | 
23 | <div title="Current time" class="container">
24 |   {formatter.format(time)}
25 | </div>
26 | 
27 | <style>
28 |   .container {
29 |     color: var(--comment);
30 |   }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/lib/Titlebar.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import Close from "./Close.svelte";
 3 |   import Fullscreen from "./Fullscreen.svelte";
 4 |   import Hide from "./Hide.svelte";
 5 |   import Theme from "./Theme.svelte";
 6 |   import Time from "./Time.svelte";
 7 |   import { classnames } from "./utils/classnames";
 8 | </script>
 9 | 
10 | <div
11 |   class={classnames("container", import.meta.env.VITE_WEB && "container-web")}
12 | >
13 |   {#if !import.meta.env.VITE_WEB}
14 |     <div class="control close"><Close /></div>
15 |     <div class="control hide"><Hide /></div>
16 |   {/if}
17 |   <div class="control fullscreen"><Fullscreen /></div>
18 |   <div class="control time"><Time /></div>
19 |   <div class="control theme"><Theme /></div>
20 | </div>
21 | 
22 | <style>
23 |   .container {
24 |     position: fixed;
25 |     left: 0;
26 |     right: 0;
27 |     top: 0;
28 |     padding: 0.5rem;
29 |     display: grid;
30 |     grid-template-columns: auto auto auto 1fr auto;
31 |     grid-template-rows: auto;
32 |     gap: 0.5rem;
33 |     grid-template-areas: "close hide fullscreen time theme";
34 |   }
35 |   .container-web {
36 |     grid-template-columns: auto 1fr auto;
37 |     grid-template-areas: "fullscreen time theme";
38 |   }
39 |   .close {
40 |     grid-area: close;
41 |   }
42 |   .hide {
43 |     grid-area: hide;
44 |   }
45 |   .fullscreen {
46 |     grid-area: fullscreen;
47 |   }
48 |   .time {
49 |     grid-area: time;
50 |   }
51 |   .theme {
52 |     grid-area: theme;
53 |   }
54 |   .control {
55 |     display: flex;
56 |     align-items: center;
57 |     justify-content: center;
58 |     -webkit-user-select: none;
59 |     -webkit-app-region: drag;
60 |   }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/src/lib/stores/app.ts:
--------------------------------------------------------------------------------
 1 | import { writable } from "svelte/store";
 2 | import { setItem, getItem } from "../utils/persistenceStorage";
 3 | 
 4 | const THEME_KEY = "app:theme";
 5 | 
 6 | type Theme = "light" | "dark" | "system";
 7 | 
 8 | const setTheme = function (value: Theme) {
 9 |   setItem(THEME_KEY, value);
10 |   switchThemeInApp(value);
11 | };
12 | 
13 | export const theme = writable<Theme>("system");
14 | export const fullscreen = writable<boolean>(false);
15 | 
16 | export function switchThemeInApp(value: Theme) {
17 |   if (import.meta.env.VITE_WEB) {
18 |     document.body.classList.remove("light-theme");
19 |     document.body.classList.remove("dark-theme");
20 |     if (value === "light") {
21 |       document.body.classList.add("light-theme");
22 |     } else if (value === "dark") {
23 |       document.body.classList.add("dark-theme");
24 |     }
25 |   }
26 | }
27 | 
28 | getItem<Theme>(THEME_KEY).then(function (_theme) {
29 |   _theme = _theme ?? "system";
30 | 
31 |   theme.set(_theme ?? "system");
32 | 
33 |   switchThemeInApp(_theme);
34 | 
35 |   requestAnimationFrame(function () {
36 |     document.head.insertAdjacentHTML(
37 |       "beforeend",
38 |       `<style>
39 |       html,
40 |       html *,
41 |       html *:before,
42 |       html *:after {
43 |         transition: color 100ms, background-color 100ms, opacity 100ms;
44 |       }
45 |     </style>`
46 |     );
47 |   });
48 | 
49 |   theme.subscribe(setTheme);
50 | });
51 | 


--------------------------------------------------------------------------------
/src/lib/stores/editor.ts:
--------------------------------------------------------------------------------
 1 | import { debounce } from "debounce";
 2 | import { writable, get } from "svelte/store";
 3 | import { getItem, setItem } from "../utils/persistenceStorage";
 4 | 
 5 | const VALUE_KEY = "editor:value";
 6 | const SELECTION_START_KEY = "editor:selectionStart";
 7 | const SELECTION_END_KEY = "editor:selectionEnd";
 8 | const SCROLL_KEY = "editor:scrollTop";
 9 | 
10 | const setValue = debounce(function (value: string) {
11 |   setItem(VALUE_KEY, value);
12 | }, 100);
13 | 
14 | const setSelectionStart = debounce(function (value: number) {
15 |   setItem(SELECTION_START_KEY, value);
16 | }, 100);
17 | 
18 | const setSelectionEnd = debounce(function (value: number) {
19 |   setItem(SELECTION_END_KEY, value);
20 | }, 100);
21 | 
22 | const setScrollTop = debounce(function (value: number) {
23 |   setItem(SCROLL_KEY, value);
24 | }, 100);
25 | 
26 | export const ref = writable<HTMLTextAreaElement>();
27 | export const value = writable("");
28 | export const scrollTop = writable(0);
29 | export const selectionStart = writable(0);
30 | export const selectionEnd = writable(0);
31 | 
32 | value.subscribe(setValue);
33 | scrollTop.subscribe(setScrollTop);
34 | selectionStart.subscribe(setSelectionStart);
35 | selectionEnd.subscribe(setSelectionEnd);
36 | 
37 | export function handleSelectionChange() {
38 |   selectionStart.set(get(ref).selectionStart ?? 0);
39 |   selectionEnd.set(get(ref).selectionEnd ?? 0);
40 | }
41 | 
42 | export function focus() {
43 |   get(ref).focus();
44 |   get(ref).scrollTop = get(scrollTop);
45 | }
46 | 
47 | Promise.all([
48 |   getItem<string>(VALUE_KEY),
49 |   getItem<number>(SELECTION_START_KEY),
50 |   getItem<number>(SELECTION_END_KEY),
51 |   getItem<number>(SCROLL_KEY),
52 | ]).then(function ([_value, _selectionStart, _selectionEnd, _scrollTop]) {
53 |   value.set(_value ?? "");
54 |   if (_value !== null) {
55 |     get(ref).value = _value;
56 |   }
57 | 
58 |   if (_selectionStart !== null && _selectionEnd !== null) {
59 |     get(ref).setSelectionRange(_selectionStart, _selectionEnd);
60 |   }
61 | 
62 |   if (_scrollTop !== null) {
63 |     get(ref).scrollTop = _scrollTop;
64 |   }
65 | });
66 | 


--------------------------------------------------------------------------------
/src/lib/utils/calculatePosition/index.ts:
--------------------------------------------------------------------------------
 1 | import { countCharacters } from "../countCharacters";
 2 | 
 3 | function clamp(v: number, min: number, max: number) {
 4 |   return v < min ? min : v > max ? max : v;
 5 | }
 6 | 
 7 | function calculatePosition(text: string, selectionEnd: number) {
 8 |   if (selectionEnd <= 0) {
 9 |     return 0;
10 |   }
11 | 
12 |   const before = countCharacters(text, 0, selectionEnd);
13 |   const after = countCharacters(text, selectionEnd, text.length);
14 | 
15 |   if (before + after === 0) {
16 |     return 0;
17 |   }
18 | 
19 |   return clamp((before / (before + after)) * 100, 0, 100);
20 | }
21 | 
22 | export { calculatePosition };
23 | 


--------------------------------------------------------------------------------
/src/lib/utils/classnames/index.ts:
--------------------------------------------------------------------------------
1 | function classnames(
2 |   ...classes: Array<string | undefined | null | false | number>
3 | ) {
4 |   return classes.filter(Boolean).join(" ");
5 | }
6 | 
7 | export { classnames };
8 | 


--------------------------------------------------------------------------------
/src/lib/utils/countCharacters/index.ts:
--------------------------------------------------------------------------------
 1 | const EOL = "\n";
 2 | 
 3 | function countCharacters(
 4 |   text: string,
 5 |   selectionStart: number,
 6 |   selectionEnd: number
 7 | ) {
 8 |   let count = 0;
 9 | 
10 |   for (let i = selectionStart; i < selectionEnd; i += 1) {
11 |     if (/\s/g.test(text[i]) || text[i] === EOL) {
12 |       continue;
13 |     }
14 |     count += 1;
15 |   }
16 | 
17 |   return count;
18 | }
19 | 
20 | export { countCharacters };
21 | 


--------------------------------------------------------------------------------
/src/lib/utils/countParagraphs/index.ts:
--------------------------------------------------------------------------------
 1 | const EOL = "\n";
 2 | 
 3 | function countParagraphs(
 4 |   text: string,
 5 |   selectionStart: number,
 6 |   selectionEnd: number
 7 | ) {
 8 |   let count = 0;
 9 |   let currentLength = 0;
10 | 
11 |   for (let i = selectionStart; i < selectionEnd; i += 1) {
12 |     if (text[i] === EOL) {
13 |       if (currentLength > 0) {
14 |         count += 1;
15 |       }
16 |       currentLength = 0;
17 |     } else {
18 |       if (/\s/g.test(text[i])) {
19 |         continue;
20 |       }
21 |       currentLength += 1;
22 |     }
23 |   }
24 | 
25 |   if (currentLength > 0) {
26 |     count += 1;
27 |   }
28 | 
29 |   return count;
30 | }
31 | 
32 | export { countParagraphs };
33 | 


--------------------------------------------------------------------------------
/src/lib/utils/countSentences/index.ts:
--------------------------------------------------------------------------------
 1 | const EOL = "\n";
 2 | 
 3 | function countSentences(
 4 |   text: string,
 5 |   selectionStart: number,
 6 |   selectionEnd: number
 7 | ) {
 8 |   let count = 0;
 9 |   let currentLength = 0;
10 | 
11 |   for (let i = selectionStart; i < selectionEnd; i += 1) {
12 |     if (/[.!?]/.test(text[i])) {
13 |       if (currentLength > 0) {
14 |         count += 1;
15 |       }
16 |       currentLength = 0;
17 |     } else {
18 |       if (/\s/g.test(text[i]) || text[i] === EOL) {
19 |         continue;
20 |       }
21 |       currentLength += 1;
22 |     }
23 |   }
24 | 
25 |   if (currentLength > 0) {
26 |     count += 1;
27 |   }
28 | 
29 |   return count;
30 | }
31 | 
32 | export { countSentences };
33 | 


--------------------------------------------------------------------------------
/src/lib/utils/countWords/index.ts:
--------------------------------------------------------------------------------
 1 | const EOL = "\n";
 2 | 
 3 | function countWords(
 4 |   text: string,
 5 |   selectionStart: number,
 6 |   selectionEnd: number
 7 | ) {
 8 |   let count = 0;
 9 |   let currentLength = 0;
10 | 
11 |   for (let i = selectionStart; i < selectionEnd; i += 1) {
12 |     if (/\s/g.test(text[i]) || text[i] === EOL) {
13 |       if (currentLength > 0) {
14 |         count += 1;
15 |       }
16 |       currentLength = 0;
17 |     } else {
18 |       currentLength += 1;
19 |     }
20 |   }
21 | 
22 |   if (currentLength > 0) {
23 |     count += 1;
24 |   }
25 | 
26 |   return count;
27 | }
28 | 
29 | export { countWords };
30 | 


--------------------------------------------------------------------------------
/src/lib/utils/fullscreen/index.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-explicit-any */
 2 | 
 3 | function openFullscreen() {
 4 |   const documentElement = document.documentElement;
 5 | 
 6 |   if (documentElement.requestFullscreen) {
 7 |     documentElement.requestFullscreen();
 8 |   } else if ((documentElement as any).webkitRequestFullscreen) {
 9 |     /* Safari */
10 |     (documentElement as any).webkitRequestFullscreen();
11 |   } else if ((documentElement as any).msRequestFullscreen) {
12 |     /* IE11 */
13 |     (documentElement as any).msRequestFullscreen();
14 |   }
15 | }
16 | 
17 | /* Close fullscreen */
18 | function closeFullscreen() {
19 |   if (document.exitFullscreen) {
20 |     document.exitFullscreen();
21 |   } else if ((document as any).webkitExitFullscreen) {
22 |     /* Safari */
23 |     (document as any).webkitExitFullscreen();
24 |   } else if ((document as any).msExitFullscreen) {
25 |     /* IE11 */
26 |     (document as any).msExitFullscreen();
27 |   }
28 | }
29 | 
30 | export { openFullscreen, closeFullscreen };
31 | 


--------------------------------------------------------------------------------
/src/lib/utils/persistenceStorage/index.ts:
--------------------------------------------------------------------------------
 1 | type JSONValue =
 2 |   | string
 3 |   | number
 4 |   | boolean
 5 |   | { [x: string]: JSONValue }
 6 |   | Array<JSONValue>;
 7 | 
 8 | async function setItem(key: string, value: JSONValue) {
 9 |   if (import.meta.env.VITE_WEB) {
10 |     window.localStorage.setItem(key, JSON.stringify(value));
11 |   } else {
12 |     return window.ipcRenderer.invoke("setSetting", { key, value });
13 |   }
14 | }
15 | 
16 | async function getItem<T>(key: string): Promise<T | null> {
17 |   if (import.meta.env.VITE_WEB) {
18 |     try {
19 |       const item = window.localStorage.getItem(key);
20 |       if (item !== null) {
21 |         return JSON.parse(item);
22 |       }
23 |     } catch (error) {
24 |       /* empty */
25 |     }
26 |   } else {
27 |     const item = await window.ipcRenderer.invoke("getSetting", { key });
28 |     return item;
29 |   }
30 |   return null;
31 | }
32 | 
33 | export { setItem, getItem };
34 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import "./global.css";
 2 | import App from "./App.svelte";
 3 | import { registerServiceWorker } from "./registerServiceWorker";
 4 | 
 5 | const app = new App({
 6 |   target: document.getElementById("app"),
 7 | });
 8 | 
 9 | export default app;
10 | 
11 | if (import.meta.env.VITE_WEB) {
12 |   registerServiceWorker();
13 | }
14 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.ts:
--------------------------------------------------------------------------------
 1 | export async function registerServiceWorker() {
 2 |   if ("serviceWorker" in navigator) {
 3 |     try {
 4 |       await navigator.serviceWorker.register("./service-worker.js");
 5 |     } catch (error) {
 6 |       console.error(`Service worker registration failed with ${error}`);
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="svelte" />
2 | /// <reference types="vite/client" />
3 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
2 | 
3 | export default {
4 |   // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
5 |   // for more information about preprocessors
6 |   preprocess: vitePreprocess(),
7 | };
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/svelte/tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "target": "ESNext",
 5 |     "useDefineForClassFields": true,
 6 |     "module": "ESNext",
 7 |     "resolveJsonModule": true,
 8 |     /**
 9 |      * Typecheck JS in `.svelte` and `.js` files by default.
10 |      * Disable checkJs if you'd like to use dynamic types in JS.
11 |      * Note that setting allowJs false does not prevent the use
12 |      * of JS in `.svelte` files.
13 |      */
14 |     "allowJs": true,
15 |     "checkJs": true,
16 |     "isolatedModules": true
17 |   },
18 |   "include": [
19 |     "src/**/*.d.ts",
20 |     "src/**/*.ts",
21 |     "src/**/*.js",
22 |     "src/**/*.svelte",
23 |     "src/constants.cjs"
24 |   ],
25 |   "references": [{ "path": "./tsconfig.node.json" }]
26 | }
27 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "ESNext",
5 |     "moduleResolution": "Node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import { svelte } from "@sveltejs/vite-plugin-svelte";
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [svelte()],
7 |   base: "./",
8 | });
9 | 


--------------------------------------------------------------------------------