torcAddons, an addon package for the glitch editor!

The Gallery
1

hi there!

i’ve been using glitch for a while and i love it, but over time there were a few features i’ve really wanted to see. so i decided to add them myself!

feel free to use them as you’d like: GitHub - torcado194/glitch-torcAddons

here is a list of addons i have implemented currently:

fileSearch

UserScript download

adds a search bar to the filetree to show/hide files. Also supports regex parsing.

fileSearch.gif

favorite

adds a “favorite” star button next to each file, allowing you to add or remove files to a favorites list.
a list of favorited files is displayed above the filetree. favorites are saved to local storage and are tied to the project.

favorite.gif

indentGuides

adds visual guides to indentation in the code

indentGuides.gif

pasteAndIndent

automatically correctly indents code when you paste it. you can prevent this behavior with ctrl+shift+v.

pasteAndIndent.gif

colors

adds a visual color component next to css colors

colors.gif

wrapSelection

allows certain characters to wrap selections rather than replace the selection, such as (parentheses)

wrapSelection.gif

[Deprecated]

filetree

adds a (real) filetree view to the file browser, including directory collapsing.
it also comes with a file searchbar, automatically hiding files not matching the search.

filetree.gif

any feedback or suggestions is welcome!
thanks :heart:

26 Likes
2

This is so cool!
Hype!

3 Likes
4

wow these are all really incredible changes!

1 Like
5

I have implemented another addon, wrapSelection! it allows characters like parenthesis and quotes to wrap selected text rather than replacing the selection:

wrapSelection.gif
DNTErVJ.gif800×680

feel free to get it from the github :blush: :heart:

3 Likes
6

Hey @torcado this looks very cool. However my tamper monkey says its not valid. Would anyone be able to help?

7

sorry about that! to be fair i hadn’t actually tested with tampermonkey before now. the main issue is that the script needs to run at ‘document-start’, which you can define in the settings tab of the script

but now that’s not necessary as i have updated all the scripts in the repository to the UserScript format, which includes details about when the script needs to run on the page.

you can install the UserScripts from this page: https://openuserjs.org/users/torcado/scripts
additionally, these will auto-update in your extension when i push updates to the repository :smile:

let me know if you have any issues!

1 Like
8

Works like a charm. Thanks so much!

1 Like
9

For some reason the UserScripts aren’t working…

image
image.png1939×1080 270 KB

EDIT: I managed to fix it by changing the order of when the torcAddons main script was executed.

10

yep, the base driver needs to be executed first. though it’s not a super elegant solution, I may update the add-ons so that they wait an arbitrary amount of time for the base to load.
for now, tampermonkey allows you to change the order they execute, either by dragging them on the main extension page or changing their order number in their individual settings tabs

11

i love this and would love to see more as well as somthing where you could input your own code to add, as well as for the color addon make it have the checker for transparency (it uses tranparency with no bg rn so you cant see if its just a actual blend of the background color ofr if its transparent)

12

good suggestion for a transparency checkered background!

I’m not sure exactly what you mean about a section for adding your own code, do you mean a way to write your own script, for instance, utilizing the helper methods of the extension? if so, you can do this fairly easily by writing your own userscript and referencing the torcAddons object just like the other scripts. most of the userscript extensions I’ve seen make it pretty easy to write your own code.

thank you for the suggestions!

13

i mean like maby just add a little settings thing or somthing so for say you can edit what thing will wrap around (after all some of them might be helpful like : would wrap for emojis in md ect and you can set thoughs in a more visual way not to make it too hard)

14

and you could make the indent settings 4 spaces insted of 2 if you like quad space indents ect (i acutaly added that myself)

15

also actualy had a good idea: kinda like the faviort thing you can hide files and show them with a button to clean up clutter from files that you dont need to edit (package.json images ect)

edit becauce it wont let me post:
i have to go now i guess so ill do it tomorow

another edit

i have made the ffinal version of the script (i didnt like the circles bc there was too little room as it is so the checker looked bad so its a square now) if you want then back i can re add them but other than that i have a wit thing im ming to toggle the checker bg to solid white, black, and grey as well as black and whit cehecker and white and grey so thats why i used the array imgs in here

// ==UserScript==
// @name         torcAddons-colors
// @namespace    http://torcado.com
// @description  adds a visual color component next to css-colors
// @version      1.1.1
// @author       torcado (helped by mse)
// @license      MIT
// @icon         http://torcado.com/torcAddons/icon.png
// @run-at       document-start
// @grant        none
// @include      http*://glitch.com/edit/*
// @updateURL    https://openuserjs.org/meta/torcado/torcAddons-colors.meta.js
// @downloadURL  https://openuserjs.org/src/scripts/torcado/torcAddons-colors.user.js
// ==/UserScript==


/*
 * torcAddons-colors | v1.1.1
 * adds a visual color component next to css-colors
 * by torcado
 */
(()=>{
    let t = torcAddons;

    t.addEventListener('codeUpdate', addColors);

    let matchList = [
        /#([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3}|)/ig, // hex
        /(rgba|rgb)\([^)]+\)/ig,
        /(hsla|hsl)\([^)]+\)/ig,
        /(hsva|hsv)\([^)]+\)/ig
    ];

    let imgs = [`url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAPElEQVQoU2NctWrVfwY08OrVK4bs7Gx0YQbGoah4ypQpGB5kY2Nj+PPnD6YH/wMBuuj06dMZREREhoViAMufRqrIqJ7oAAAAAElFTkSuQmCC)`, `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAOUlEQVQoU2NkYGD4D8QooL6+nqGhoQFdmIFxKCoGegbDgwICAgwfPnzA9OB/IEAXBYVEY2PjsFAMAGXqPG9D3naPAAAAAElFTkSuQmCC)`]

    function addColors(){
        // NOTE: this could instead be pulled from application.getCurrentSession().cm.display.view
        $('.torc-color').remove();
        $('.torc-color-bg').remove();
        $('span[role="presentation"]').each(function(){
            let text = $(this).text();
            for(let i = 0; i < matchList.length; i++){
                if(matchList[i].test(text)){
                    $(this).append(`<div class="torc-color-bg" style="background-image: ${imgs[1]}"></div>`);
                    $(this).append(`<div class="torc-color" style="background-color: ${text.match(matchList[i])}"></div>`);
                    break;
                }
            }
        })
    }

    /* ======== css ======== */

    t.addCSS(`
.torc-color {
    width: 11px;
    height: 11px;
    margin-top: 3px;
    margin-left: 3px;
    position: absolute;
    display: inline-block;
}
.torc-color-bg {
    width: 13px;
    height: 13px;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: -15px;
    border: 1px solid #888888;
    position: absolute;
    display: inline-block;
}
    `);

})()
16

image

By adding this line, editor will auto-collapse folders on start. Think it’s very nice to see!

image
image.png435×926 33.8 KB

17

Hey folks, we’ve released an update to the Editor that turns on a folder-style file list display. Read more about it at Now your folders act like folders!.

Please let us know if you encounter any issues - that topic is a great place to add your comments.

Thanks for your patience, and we hope this is useful! Happy Glitching!

18

@cori awesome, great work guys! Thanks for adding this to the core site!

having the tree collapsed by default may be preferable to some people, seeing as @jarvis394 made this edit themselves (which is nice, thank you!)

but I find it a little cumbersome. so I added another addon to save the tree state across loads! :blush:
this will leave the tree in the same layout as you left it.
download it here: https://openuserjs.org/scripts/torcado/torcAddons-treeState
or here: https://github.com/torcado194/glitch-torcAddons/blob/master/treeState/torcAddon-treeState.js

feel free to try it out. if there are any issues, let me know! :heart:

1 Like
19

Hey @torcado,

Good job with the work! It is great to see that you’ve made these addons for ease of use.
However, it would like to inform you that there is an error emitted by the user-script:

Uncaught TypeError: Cannot read property 'contains' of undefined
    at eval (userscript.html?id=b5685958-6ecb-402c-9137-53c47d4fd331:93)
    at NodeList.forEach (<anonymous>)
    at eval (userscript.html?id=b5685958-6ecb-402c-9137-53c47d4fd331:92)
    at Array.forEach (<anonymous>)
    at MutationObserver.eval (userscript.html?id=b5685958-6ecb-402c-9137-53c47d4fd331:90)

Furthermore, are you using a custom theme for Glitch? Seems so, if yes, is it publicly available and accessible, I’d love to use this theme in my daily usage.

Thanks and later.

20

sorry about that! new update fixes that

I am using a custom theme! here’s an upload, i may add this into torcAddons if there’s interest in it.

1 Like
21

Thanks for the quick reply and the update!

22

how would you apply the theme

23

its purely css, so you can use a css injector such as stylus. there are a bunch out there (stay away from one named “stylish” though)

alternatively if you already have a userscript extension like tampermonkey you can write a script that injects css for you, like this

24

Hey! I just updated the main torcAddons.js script to fix a couple of issues:

  1. if you load a project and are looking at a markdown file (or any other non-code file) the extension will now properly load components. (previously, you had to click on a different code file to get it to load)
  2. if the glitch project disconnects and reconnects, the extension will reload all the components instead of requiring you to refresh the page.

Your userscript extension should update this automatically, otherwise you can download it here!

Thanks! :heart:

2 Likes
25

I was wondering why I had to refresh the page after the editor reloaded…

Thanks for the update.

1 Like
26

Wow @torcado, this is so COOL!

1 Like
27

i know right!

this is amazing, i am downloading all of these later!

1 Like
28

@torcado
is it possible to add more userscripts to the torc addons list?

29

@torcado Wow, Great job! Can’t wait to use these!

1 Like
30

torcAddons.js is built to make it easier to write addon scripts.
The repository is mostly meant for my own addons, but if you want to make your own addon utilizing the script, feel free! I may link it in the readme :smiley:

Thanks for the kind words everyone :blush:

31

thank you so much!!!

we can now use this and make the editor look even cooler!

1 Like
32

ok
thanks for the info!

1 Like
33

this, is amazing, but why does the update button not work, did u not implement it yet?

34

*** installs stylus, and adds in a bunch of css lines to make his eyes not hurt***
i never knew about this stuff till this post

1 Like
35

Just looked into it, there’s an issue with the script if you have torcAddons-filetree enabled (creating top-level files causes an error, I may update the script to simply disable it since the filetree is now built into glitch!). The update button is supposed to add a new top-level file named ‘.torc-update’, if you remove/disable torcAddons-filetree it should do that.

After that, you may need to add the file to the watchlist. The github page shows an example:

adds an ‘update’ button which allows a project to update without needing to edit a watched file this works well in conjunction with the following watch.json file:

{ "install": { "include": [ "^.torc-update$" ] }, "throttle": 10 }

you can learn more about glitch’s watch.json here

basically, manualUpdate modifies the contents of .torc-update whenever you click the button, which causes the project to update (as long as it’s watching for changes to that file)

36

I had noticed this and was about to report it to you, so should I just disable the script?

37

yep, I’d say so! the only thing it does right now is move the tree above the favorites box, if you have that enabled. I may re-implement the searchbar as a separate addon!
I’m probably going to push a small update that just disables the script.

1 Like
38

please do such, it breaks everything every time i use it, plus, 2 search bars pop up

39

I updated it right after sending that reply!

1 Like
40

oh thank the lord :wink:

when i get home tonight, that is the first thing im checking

41

oh, when will a custom search bar be re-released?

42

you can also just remove the script from your userscript manager, it doesn’t do anything anymore.

I don’t have a timeframe for the search bar. maybe ill look into it this weekend if I have the time!

43

ok!

this will become extremely useful for my bot service…

44

@torcado

hey, i made a new addon to go along side with the manual update addon, you can find it here, it adds a manual watch.json addition script
https://greasyfork.org/en/scripts/395299-torcaddons-watch-json-file

45

and i broke it, fixing it again…

46

Hi, it is great but could you make a how to use guide?

It’s just because it is my first time using scripts like this

47

there will most likely be one soon :wink:

just can’t get to busy… plus i broke the user script XD

supposed to append after the update button from manual update… @torcado may be able to explain what it is supposed to do

48

Tampermonkey. Install the addon. Boom done. @random

49

alright, new addon!

fileSearch

UserScript download

adds a search bar to the filetree to show/hide files. Also supports regex parsing.

fileSearch.gif

This is more or less a port of the previous search bar, but i added a regex parser because why not.

enjoy! :heart:

50

@J-Tech-Foundation oh awesome, nice job! it would be even better if it could detect if a watch.json already exists and insert "^.torc-update" into it if there is one

@random I’d love to help out in whatever way i can! what exactly would you want a how-to guide on? making your own addon scripts?

51

I think it’s a guide on how to use the scripts, right @random?

52

@khalby786 @torcado wow so many messages… Sorry for the delay

What I need some how-to-guides on how to install, using it and modifying it

53

I will later try to install this in firefox- but it looks great so i can’t wait!

54

i have figured the button is not gonna be an option, if enabled, it is just going to add the file, no buts, no exceptions

55

I’ve tried it, it’s great but the favouriting script does not work

56

What doesn’t work about it? does clicking the star not add it to the list? does it not save between reloads? are there any errors in the console?

57

nope… i think glitch is actually getting confused, doing more debugging later on it

58

there is no star and I cannot add items to a list, I checked if the addon is working and it was enabled

59

did you install the base driver script torcAddons.js as well? all scripts need this one in order to run. please press ctrl+shift+i on your glitch code page to see if there are any errors in the console, which there should be if torcAddons.js is not included

60

hm… i have tried everything, could you try to fix it up? and send it to me?

61

im sorry, i dont know what you’re asking me to do. all the scripts work fine for me, i have no information regarding what is broken. are both of you having issues with torcAddons-favorite.js?
I need more information

62

no, the watch.json addon i made…

it does not work, and i do not know why?

63

Are you getting any errors in the console?

64

nope

nothing at all…

65

@J-Tech-Foundation Would you be able to send a project invite link in PM’s? I would love to help out!

66

uhhh sure… i don’t have the code with meh, i’m at school, not at home,

if u could get the code, on greasy fork, i would be able to show you it

67

Sorry about the late reply

I have downloaded the base driver script and checked but no signs of it working at all. And it is enabled aswell

68

if you open the console, do you see a log like torcAddons v1.4.1 loaded!?

69

there are several small issues with your script

  1. the code is not called at all, which explains why you wouldn’t see any console errors. you are wrapping it in a function but are never calling the function. the fix for this is to simply append () to the code
  2. the script runs earlier than glitch’s application is available. one solution might be to change @run-at to “document-end”. I would opt for the safer solution of just listening to torcAddon’s load event
  3. application.newFile is now async, so FI would be a promise if the file doesnt exist, causing FI.writeToFile to fail. the fix for this is to wait for the promise to resolve before writing to the file

here is a script with all of these fixes: https://gist.github.com/torcado194/c1cff19ca14e0884994a638507b5c7cd

note: to anyone else wanting to use this script, be warned that installing this script will overwrite your project’s existing watch.json file, by J-Tech-Foundation’s design.

:heart:

70

ok, seems good then, ill fix it up

71

and yes, the overwrite i made automatic, so you can’t stop it

72

ok, all good to go, and thank you for re-implementing the search bar!

1 Like
73

This stopped working, there’s an error in the console:
image

74

same, i’m experiencing this aswell, from the looks of it, jquery is initialized after document load now…

1 Like
75

Man, this is cool have you tried enhancing the console a bit more? Or maybe you could enhance project pages with a new layout. I also think we should get autocomplete in the glitch editor. Sadly glitch seems to hide their codemirror object.

76

nope, the code mirror styles is under .Code-Mirror

1 Like
77

Thanks I’ll keep that in mind the next time I look for stuff

78

oh no!! looks like i might have to include jquery myself…
I’ll fix it up soon! thanks for the notification

1 Like
79

@torcado from the looks of it, it is fixable by changing when the addons inject themselves

80

ok, the main script torcAddon.js has been updated

it should automatically update in your userscript extension, otherwise get it here:

(note: this update uses a feature of userscript extensions themselves. I have only tested on greasemonkey, I’m not sure if it works on all extensions or not)

2 Likes
81

hm this doesnt seem to be the case on my end. jQuery seems to have been omitted from glitch entirely, so changing the inject location shouldnt matter. additionally, changing the inject location causes cross origin policy errors in some cases.

This update checks for the existence of jQuery first, and uses the fallback only if it is not found

2 Likes
82

thank you torcado!

man, i was starting to miss your addons

2 Likes
83

you’re too kind :heart:

2 Likes
84

it works now, thanks :333

2 Likes
85

Making things faster is very satsifying for most of us. For example the file search will make finding my files a lot faster (https://www.wired.com/story/coders-efficiency-is-beautiful/).

1 Like