TH live code editor [1 MILLION PAGEVIEW UPDATE]

Posted 4 years, 10 months ago (Edited 4 months, 29 days ago) by circlejourney
I've made a World for code editor discussion and suggestion! It would be great if you could post suggestions there so they're all in one place.

Toyhouse code editor with live preview

Bookmark it on Toyhouse

rsle267.png

Preview your HTML/CSS code in various layouts as you type.

Toyhouse watermark previewer

Bookmark it on Toyhouse

mekM2EJ.png

Preview watermarks applied to images without uploading and regenerating.


A couple of code utilities for making certain aspects of using Toyhouse less tedious! The code editor shows a live preview of code as you type it, and the watermark previewer lets you preview the appearance of watermarks on images.

I created these tools to help make coding and applying watermarks easier. I'm not affiliated with Toyhouse and I'm maintaining these for fun in my free time. (If you'd like to support me, you can donate to my ko-fi.)

These are works in progress, and I've been fixing all bugs that I find/am informed of. I'm always happy for feedback, suggestions and bug reports! Do check the "known issues" section on the website to see what has already been reported.

circlejourney

CCpZkil.png

Testing a much-requested feature--a button that will let you import existing public profiles to replace the placeholder text. I also threw in a code import feature while I was at it. Help me test it here!

Astronnut I've also attempted to fix the issues you mentioned but I don't have an apple computer so if you've got the time, let me know if the editor is working ok for you in Safari now, thanks!

Skykristal

those are awesome new features, I would really love to test it but unfortunately the site isn´t reachable :o (the other, normal stable one works fine, just not this link)

circlejourney

Skykristal oops yeah there was a typo in the link, it should work now! thanks for mentioning it!

Battalia

The unstable version is working great for me! Loving the ability to fill the metadata! The only thing I would have to say is it didn't seem to import the tab spaces, so all the code was on the left side with no spacing, that's definitely something that would need to be adjusted. It also didn't want to render a paragraph of text at first for some reason but scrolling around a bit fixed this? Idk what's going on there but figured I'd mention it

circlejourney

Battalia thanks for mentioning the tab issue--it should be fixed now! I'm not sure about the paragraph not rendering, but if scrolling fixed it then it may be a browser render issue rather than anything I could fix on the code editor's end. Thanks again!

Endercoil

hi! ive had two issues with the unstable version:

1: The reset button doesnt seem to reset what the import back to blank (at least i assume that's what its supposed to do?)

2: Importing html seems to import the blurb on the side instead of the main profile's html. tried it on a character without a blurb and it worked just fine though. 

circlejourney

Endercoil thanks for mentioning it! I've fixed both bugs (as far as I can tell), let me know if it's working OK for you now, cause those should be the last issues, and then I'll merge it into the main version!

Endercoil

Looks like it works fine! 

Grinalbi

Thank you so much for this (and the freebies that you put out)!! Made editing my stuff a lot less intimidating what with the live preview

Rook

Omg you are an absolute LEGEND, thank you so much for providing these tools!!! I'm so excited to try them out!

Harrie

As great a feature as this import html is, I do worry a great deal about the security risk. Obviously people can technically do the same thing with inspect element, but it's a lot more involved than providing a button for it, and personally I do not want to set my pages to log-in only or add a content warning when theres nothing to warn for.

So, since TH does not have an API that I'm aware of, I think the easiest way to ensure people are only importing their own codes or codes they have permission to import, is for people to add a key to their profile that signals to circlejourney that it's okay to import. E.g.:

<div class="circlejourney" style="display:none;"></div>

So as long as it finds an element with the class circlejourney, then it can import.

That makes this an opt-in process rather than an opt-out one that also changes how TH functions

circlejourney

Harrie that's a good point, and I like that idea! I figured that people wouldn't go through the tedium but you're right that that's probably never stopped anyone and the importer makes it much easier. I've disabled the feature for now, I will fix it at the next opportunity, thanks for the feedback!

DonutMunchie

I'm having a problem with both versions being stuck in a loading loop. Works fine on Chrome Incognito though.

circlejourney

DonutMunchie I think that is probably because some of the outdated source files are cached by your browser. If you could hit Ctrl+shift+R that may fix it. (I am unsure of the equivalent shortcut for Mac)