adds a search bar to the filetree to show/hide files. Also supports regex parsing.
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)
[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.
I have implemented another addon, wrapSelection! it allows characters like parenthesis and quotes to wrap selected text rather than replacing the selection:
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
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.
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)
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;
}
`);
})()
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!
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.
