torcAddons, an addon package for the glitch editor!

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: https://github.com/torcado194/glitch-torcAddons

here is a list of addons i have implemented currently:

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.

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.

indentGuides

adds visual guides to indentation in the code

pasteAndIndent

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

colors

adds a visual color component next to css colors

wrapSelection

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


any feedback or suggestions is welcome!
thanks :heart:

12 Likes

This is so cool!
Hype!

3 Likes

wow these are all really incredible changes!

1 Like

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

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

1 Like

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

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!

Works like a charm. Thanks so much!

1 Like

For some reason the UserScripts aren’t working…


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

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

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)

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!

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)

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

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;
}
    `);

})()

image

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

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!

@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

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.

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

Thanks for the quick reply and the update!