├── .github
    └── ISSUE_TEMPLATE
    │   └── website-support-request.md
├── .gitignore
├── .ortfo
    └── description.md
├── Justfile
├── LICENSE
├── README.md
├── core.js
├── docs
    └── index.html
├── google-sheets.js
├── icon.ai
├── icon.png
├── icon128.png
├── icon16.png
├── icon48.png
├── logotype.png
└── manifest.json


/.github/ISSUE_TEMPLATE/website-support-request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Website support request
 3 | about: Request support for a new website
 4 | title: Add support for …
 5 | labels: ''
 6 | assignees: gwennlbh
 7 | 
 8 | ---
 9 | 
10 | **Link to the website you wanna see support for:** 
11 | 
12 | Please make sure that you:
13 | 
14 | - [ ] Checked before if the website is not impossible to implement: see [the other issues](https://github.com/gwennlbh/smooth-cursorify/issues?q=is%3Aissue%20).
15 | - [ ] If I know how to do it, checked that the site does not use a `<textarea>` for its text entry (you can do so by right-clicking the place where the cursor is, and click on "Inspect element" -- it'll show the current code that represents the page, with the element you clicked selected. If that element starts with `<textarea`, smooth cursorify cannot modify the cursor)
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | Compiled
2 | smoothcursorify.zip
3 | 


--------------------------------------------------------------------------------
/.ortfo/description.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | tags: [web extension]
 3 | made with: [javascript]
 4 | layout:
 5 | - m1
 6 | - p1
 7 | - p2
 8 | - [l1, p3]
 9 | - [l2, l3]
10 | ---
11 | 
12 | # Smooth Cursorify
13 | 
14 | :: fr
15 | 
16 | ![Vidéo de présentation](../demo.mp4)
17 | 
18 | Microsoft Word possède une fonctionnalité esthétique assez plaisante qui consiste en l'animation du curseur de texte:
19 | au lieu de brusquement sauter de caractère en caractère, son mouvement est subtilement animé, ce qui donne un résultat assez agréable pour certains.
20 | 
21 | Cependant, j'utilise Google Docs. J'ai donc créé cette extension, qui applique des animations aux curseurs de plusieurs éditeurs de texte en ligne, tel que Google Docs ou encore Overleaf, un éditeur de code [LaTeX](https://ewen.works/using/latex).
22 | 
23 | Cette extension a reçu [9 avis](https://chrome.google.com/webstore/detail/smooth-cursorify/ohhjfajndpfpbimipmehmdkblnbelaec?hl=fr&authuser=0), tous étant favorables, avec 5 étoiles. Elle a également été citée dans un [post reddit](https://www.reddit.com/r/firefox/comments/gpo9vu/is_there_a_way_to_get_a_smooth_typing/).
24 | 
25 | [Post reddit](https://www.reddit.com/r/firefox/comments/gpo9vu/is_there_a_way_to_get_a_smooth_typing/)
26 | 
27 | [Google Chrome Web Store](https://chrome.google.com/webstore/detail/smooth-cursorify/ohhjfajndpfpbimipmehmdkblnbelaec)
28 | 
29 | [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/smooth-cursorify/)
30 | 
31 | 
32 | :: en
33 | 
34 | ![Demo video](../demo.mp4)
35 | 
36 | Microsoft Word has an aesthetically pleasing feature that consists of the animation of the text cursor:
37 | Instead of abruptly jumping from character to character, its movement is subtly animated, which gives a rather pleasing result for some.
38 | 
39 | However, I use Google Docs. So I created this extension, which applies animations to the cursors of several online text editors, such as Google Docs or Overleaf, a [LaTeX](https://ewen.works/using/latex) code editor.
40 | 
41 | This extension has received [9 reviews](https://chrome.google.com/webstore/detail/smooth-cursorify/ohhjfajndpfpbimipmehmdkblnbelaec?hl=fr&authuser=0), all of them favorable, with 5 stars. It was also mentioned in a [reddit post](https://www.reddit.com/r/firefox/comments/gpo9vu/is_there_a_way_to_get_a_smooth_typing/).
42 | 
43 | [Reddit post](https://www.reddit.com/r/firefox/comments/gpo9vu/is_there_a_way_to_get_a_smooth_typing/)
44 | 
45 | [Google Chrome Web Store](https://chrome.google.com/webstore/detail/smooth-cursorify/ohhjfajndpfpbimipmehmdkblnbelaec)
46 | 
47 | [Firefox Add-ons](https://addons.mozilla.org/en-US/firefox/addon/smooth-cursorify/)
48 | 


--------------------------------------------------------------------------------
/Justfile:
--------------------------------------------------------------------------------
1 | package:
2 | 	rm smoothcursorify.zip || true
3 | 	zip -r smoothcursorify.zip . -x .git/**
4 | 	zip -d smoothcursorify.zip .git/**
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This is free and unencumbered software released into the public domain.
 2 | 
 3 | Anyone is free to copy, modify, publish, use, compile, sell, or
 4 | distribute this software, either in source code form or as a compiled
 5 | binary, for any purpose, commercial or non-commercial, and by any
 6 | means.
 7 | 
 8 | In jurisdictions that recognize copyright laws, the author or authors
 9 | of this software dedicate any and all copyright interest in the
10 | software to the public domain. We make this dedication for the benefit
11 | of the public at large and to the detriment of our heirs and
12 | successors. We intend this dedication to be an overt act of
13 | relinquishment in perpetuity of all present and future rights to this
14 | software under copyright law.
15 | 
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 | 
24 | For more information, please refer to <http://unlicense.org>
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |     <img src="./logotype.png" alt="SmoothCursorify" height="150px">
 3 |     <p align="center">Apply a Microsoft Word-like smooth caret animation to multiple online editors.</p>
 4 |     <p align="center"><a href="https://addons.mozilla.org/fr/firefox/addon/smooth-cursorify/">Firefox</a>&nbsp;&bull;&nbsp;<a href="https://chrome.google.com/webstore/detail/smooth-cursorify/ohhjfajndpfpbimipmehmdkblnbelaec?hl=fr&authuser=0">Chrome</a>&nbsp;&bull;&nbsp;<a href="https://www.youtube.com/watch?v=35It5ijWl_0">Demo video</a>&nbsp;&bull;&nbsp;<a href="https://gwennlbh.github.io/smooth-cursorify/">Bookmarklets</a></p>
 5 | </p>
 6 | 
 7 | ![Mozilla Add-on downloads](https://img.shields.io/amo/dw/smooth-cursorify?label=firefox%20downloads)
 8 | ![Chrome Web Store users](https://img.shields.io/chrome-web-store/users/ohhjfajndpfpbimipmehmdkblnbelaec?label=chrome%20users)
 9 | 
10 | 
11 |   
12 | ## Supported websites
13 | > Please open an issue to request a new website
14 | 
15 | * Google Docs (https://docs.google.com/) 
16 | * Overleaf (https://www.overleaf.com/) 
17 | 
18 | ### To be released
19 | 
20 | * Google Sheets (https://sheets.google.com/): the cursor is not transitioned, but the border around the active cell is (thanks @JaduaStudios)
21 | * Typst (https://typst.app)
22 | * LeetCode (https://leetcode.com/)
23 | 
24 | ## How does it work?
25 | 
26 | Some websites use custom rendering engines to edit rich text, instead of relying on `contenteditable` or using a plain `<textarea>`/`<input>`. When using such custom methods, the cursor is not the native one, and is instead an HTML element, that can be stylized like any other. For example, Google Docs uses a 2-pixels-wide div with a black background to render its cursor.
27 | 
28 | Since those cursors are plain HTML elements, they can be **stylized**, that's where this extension comes in.
29 | 
30 | The process is simple:
31 | 
32 | 1. Find the element
33 | 2. Append `transition: all 80ms` to its style tag
34 | 
35 | The problem with this is that methods using the native cursor can't really have them applied: we _can't_ access the system cursor to style it with CSS.
36 | 
37 | ## Contribute a new website
38 | 
39 | Thanks a lot :)
40 | 
41 | For an example of what adding support for a new site looks like: https://github.com/gwennlbh/smooth-cursorify/commit/9aeaf6faf9e6c2edbbcd7194660b6faedc7d893e
42 | 
43 | 1. Find the HTML element that shows the cursor: 
44 |   1. open the dev tools / inspect element
45 |   2. find the element that represents the cursor
46 | 2. Add the pages where the cursor exists in manifest.json `content_scripts` > `matches`. For example, if the site you're adding support for has cursors in `https://example.com/document/....`, add `"https://example.com/document/*"` to the `matches` array.
47 | 3. Add your [CSS Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) for the element you found after all the others, in `core.js`
48 | 4. Mention the website in the README.md file alongside others in the "Not released yet" section
49 | 4. Create a pull request with your changes
50 | 
51 | 
52 | ## Manual installation
53 | If you want to install this extension manually:
54 | 
55 | 1. Download this repository
56 | 2. Load the extension
57 |   * On Firefox:
58 |     1. Open <about:debugging>
59 |     2. Click "This Firefox"
60 |     3. Click "Load temporary addon"
61 |     4. Navigate to the repository's folder and select the `manifest.json` file.
62 |   * On Chrome: 
63 |     1. Open <chrome://extensions>
64 |     2. Toggle on "Developer mode"
65 |     3. Click "Load unpacked extension"
66 |     4. Select the repository's folder
67 | 


--------------------------------------------------------------------------------
/core.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  *
 3 |  * Add your selectors here!
 4 |  * How to:
 5 |  * - "your selector" for a selector that will be applied on all sites
 6 |  * - ["your selector", "example.com"] for a selector that will be applied only on example.com. Useful if your selector is not that specific and could create weird effects on other sites.
 7 |  */
 8 | 
 9 | declareStyles([
10 |   // Monaco: Leetcode, and probably others
11 |   ".monaco-editor .cursor",
12 |   // Codemirror: Typst, Codepen
13 |   ".cm-cursorLayer .cm-cursor",
14 |   ".cm-cursorLayer .cm-fat-cursor", // Vim normal mode cursor
15 |   ".CodeMirror-cursors .CodeMirror-cursor",
16 |   // Kix: Google Docs
17 |   [".kix-cursor", "docs.google.com"],
18 |   // ACE: Overleaf
19 |   ".ace_cursor_layer .ace_cursor",
20 | ])
21 | 
22 | function declareStyles(selectors) {
23 |   console.log("SmoothCursorify: Adding styles...", selectors)
24 |   // Find smooth cursorify style tag
25 |   let style = document.head.querySelector(
26 |     'style[data-extension="smoothcursorify"]'
27 |   )
28 | 
29 |   // Create it if it doesn't exist
30 |   if (!style) {
31 |     style = document.createElement("style")
32 |     style.dataset.extension = "smoothcursorify"
33 |     document.head.appendChild(style)
34 |   }
35 | 
36 |   for (let selector of selectors) {
37 |     // Handle scoped selectors
38 |     if (Array.isArray(selector)) {
39 |       selector = selector[0]
40 |       if (new URL(window.location.href).hostname !== selector[1]) {
41 |         continue
42 |       }
43 |     }
44 | 
45 |     style.appendChild(
46 |       document.createTextNode(
47 |         `${selector} { transition: all 80ms ease !important }`
48 |       )
49 |     )
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <h1>Bookmarklet links〜</h1>
 2 | <ul>
 3 | <li>Google Docs (https://docs.google.com/) ·
 4 | <a href="javascript:(function()%7Bvar%20cursor%20%3D%20document.getElementsByClassName(%22kix-cursor%22)%5B0%5D%0Avar%20cursor_style%20%3D%20cursor.getAttribute(%22style%22)%3B%0Acursor.setAttribute('style'%2C%20cursor_style%2B%22%20transition%3A%20all%2080ms%3B%22)%3B%7D)()%3B">bookmarklet</a></li>
 5 | <li>Overleaf (https://www.overleaf.com/) ·
 6 | <a href="javascript:(function()%7Bvar%20carets%20%3D%20document.querySelectorAll('.ace_cursor-layer%20.ace_cursor')%0Aconsole.info(%60%5Bsmooth-cursorify%5D%20Got%20cursor%20elements%3A%20%24%7BJSON.stringify(carets)%7D%60)%0Avar%20curCount%20%3D%200%0Acarets.forEach((caret)%20%3D%3E%20%7B%0A%20%20var%20caret_styles%20%3D%20caret.getAttribute(%22style%22)%0A%20%20caret.setAttribute(%22style%22%2C%20caret_styles%20%2B%20%22%20transition%3A%20all%2080ms%3B%22)%0A%20%20curCount%2B%2B%0A%7D)%0Aconsole.info(%60%5Bsmooth-cursorify%5D%20Applied%20styles%20to%20%24%7BcurCount%7D%20cursor(s)%60)%7D)()%3B">bookmarklet</a></li>
 7 | </ul>
 8 | <h2>What is this???</h2>
 9 | <a href="https://github.com/ewen-lbh/smooth-cursorify">See the project on github</a>
10 | 


--------------------------------------------------------------------------------
/google-sheets.js:
--------------------------------------------------------------------------------
 1 | var targetElements = document.getElementsByClassName("active-cell-border");
 2 | 
 3 | for (var i = 0; i < targetElements.length; i++) {
 4 |   var element = targetElements[i];
 5 |   if (element.classList.contains("active-cell-border")) {
 6 |     var parent = element.parentElement;
 7 | 
 8 |     while (parent) {
 9 |       parent.style.transition = "all 80ms";
10 |       parent = parent.parentElement;
11 |     }
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/icon.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwennlbh/smooth-cursorify/c9649aa4748cf398050327225e0eacdea5f5ff42/icon.ai


--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwennlbh/smooth-cursorify/c9649aa4748cf398050327225e0eacdea5f5ff42/icon.png


--------------------------------------------------------------------------------
/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwennlbh/smooth-cursorify/c9649aa4748cf398050327225e0eacdea5f5ff42/icon128.png


--------------------------------------------------------------------------------
/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwennlbh/smooth-cursorify/c9649aa4748cf398050327225e0eacdea5f5ff42/icon16.png


--------------------------------------------------------------------------------
/icon48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwennlbh/smooth-cursorify/c9649aa4748cf398050327225e0eacdea5f5ff42/icon48.png


--------------------------------------------------------------------------------
/logotype.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gwennlbh/smooth-cursorify/c9649aa4748cf398050327225e0eacdea5f5ff42/logotype.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Smooth Cursorify",
 3 |   "short_name": "Smooth Cursorify",
 4 |   "version": "0.2.1",
 5 |   "manifest_version": 3,
 6 |   "description": "Apply a Microsoft Word-like smooth caret animation to multiple online editors",
 7 |   "content_scripts": [
 8 |     {
 9 |       "matches": [
10 |         "https://docs.google.com/document/*",
11 |         "https://www.overleaf.com/project/*",
12 |         "https://typst.app/project/*",
13 |         "https://codepen.io/pen/*",
14 |         "https://codepen.io/pen",
15 |         "https://leetcode.com/problems/*"
16 |       ],
17 |       "js": ["core.js"]
18 |     },
19 |     {
20 |       "matches": [
21 |         "https://docs.google.com/spreadsheets/*",
22 |         "http://docs.google.com/spreadsheets/*"
23 |       ],
24 |       "js": ["google-sheets.js"]
25 |     }
26 |   ],
27 |   "icons": {
28 |     "16": "icon16.png",
29 |     "48": "icon48.png",
30 |     "128": "icon128.png"
31 |   },
32 |   "content_security_policy": {}
33 | }
34 | 


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