TH Editor v1.11 beta

Posted 5 months, 23 days ago by circlejourney
TH Editor v1.11 beta
Mood: brain can't come to the phone right now

Version 1.11 beta: Check it out here (this version gives you a fresh local storage)

This is a weird update. I've migrated the editor's code storage to indexed databases. For most users, this version's behaviour will not be noticeably different...but for a small number, this update could majorly malfunction. (Detailed explanation below.) I just want to make sure that as few people as possible are experiencing the latter, by tightening up error handling before I push this to the live version. The main things needing testing are:

  • Whether the code editor even loads.
  • Whether you get any browser popups asking you for permission to store data locally.
  • Autosave behaviour: that your work is autosaving and being restored properly between sessions.
  • Loading and saving local files.
  • The backup/restore feature.
Thank you in advance for your help!

Detailed explanation.

I received multiple bug reports from (understandably) frustrated users whose code had completely disappeared from the editor except for the last line. I also witnessed this bug myself, but it was impossible to reproduce reliably, so while I had a hunch that it was because browsers were evicting the saved data from the localStorage, I couldn't test any solutions.

Anyway, today I figured it might just make practical sense to migrate local save data to an indexed database anyway. Unlike localStorage, IDBs have a much higher size quota, and that limit can be removed by the user. It just seems like a much more robust solution than localStorage, which was never designed to save huge chunks of data.

The big problem (or so I understand) is that some users might actually have IDB access disallowed by default, so I really want to test that the new version 1. actually works for most, and 2. is not too disruptive.

It was a pretty involved migration, and I had to restructure a lot of stuff under the hood...all for what should be an invisible end result. If I did everything correctly, your browser should automatically migrate your local storage to an indexed database, and you'll see nothing other than a console message that reads, "Upgraded database to version 1."

If you do notice anything weird happening, like...the code editor not loading at all...that's a thing that could happen too. Do let me know if this is the case for you.

TODO:

  • WYSIWYG toggle: Add clearer/more intuitive instructions. Maybe turn off WYSIWYG when you click the text field?
  • Lorem Ipsum: Add variants, maybe make a better generator.
#codeposting #theditor

Comments


This user is not visible to guests.

Yeah, that's more or less the idea with this one - since at the moment I don't intend to add a secondary editor to allow users to apply styling directly in the preview. Although, letting users type straight into a blank preview to start the profile off is not a bad idea, hmmm.

Do you think instructions that clarify how it's best used would help, or is this intuitive enough to figure out?

This user is not visible to guests.

I'm with you there, starting the user off with a paragraph element or something would make this much more intuitive to use. Thank you!

This user is not visible to guests.

Endercoil uniuniverse Waltz Yuzuriha lonelymutt R-A-Z-I-E-L dogstarlite Highlanderro KizunaYui purrdri CCynical Fainthed misquery-monarch saku_sthetic DreamingMage18

Just pinging on the same bulletin again because it's at the same link, but I've now added a (much requested) WYSIWYG toggle! When active, it lets you type directly into the theme preview, and should update the HTML editor when you turn WYSIWYG off. I'd love to know how easy you find it to use, or if any behaviour is weird/confusing and how I can tidy it up. EDIT: If you could drop any WIP code in and see how it feels to use the new feature, I'd appreciate it a lot. thank you!

I've been doing some testing on the WYSIWYG settings and I am happy to say that it DOES in fact work! I'm going to continue to run tests on multiple codes, as there have been many kinds of codes that mention turning this setting ON will cause the code to crash, but currently the one I am working on has been working smoothly without an issue. 

image.png?ex=656b4a85&is=6558d585&hm=43c

As seen here, the setting is set to ON, and I am able to edit the code on the left side without any issues. Of course, this is still a large code and my first test run, so this doesn't mean there won't be issues, so I will notify you if I spot anything that needs to be fixed! But from the looks of it, things are doing just fine! 

Thanks for helping me test it! I'm wondering, which codes make it crash? I would love to dig into the problem and see if I can fix it.

From the looks of it, most codes don't cause crashes, but I did some tests and noticed that certain symbols [ones that you can find one other websites] and long documents can cause it to do so [the documents must be imported, and if they are too long it can make a serious lag]. Thankfully, the solution to that problem (at least from what I have seen) is simply to close the tab and reopen it, but it takes a bit longer for it to load. 

This is a VERY RARE thing, but if I spot a document that will cause that, I will send it your way! I haven't had one do that in a while. 

As for the setting for WYSIWYG, people tend to put "do not turn on WYSIWYG" in their documents, and I have been testing those particular codes out. So far I have been lucky and found no issues. 

Haven't had the energy to test this out fully in-depth, but it seems to work okay so far for me! Maybe a little note on the toolbar could remind people to turn WYSIWYG back off to update the code in the editor? It's not entirely obvious when using it how to update it otherwise, but that could just be my goldfish memory speaking lol

Yeah I noticed myself forgetting this as well, in the new version (which is still only on my local device atm) WYSIWYG also now turns off when you click on the HTML editor area, hopefully that's intuitive enough!

Sounds perfect. that's what I was trying actually!

I did update Ace to the latest version a few months ago so they might have changed the way keyboard shortcuts work. There's a cheatsheet here, hopefully it's got what you need: https://defkey.com/ace-editor-shortcuts

I get the feeling you meant to reply to somebody else with this :0

oh no I think TH may have bugged out and not registered that I clicked to a new comment in my inbox to reply LMAO. I'll find that comment

Chromebook [Base Chrome] user - everything pans out fine! Imports load well and nothing of a popup other than the entry popup showed face. Also, I guess this is either a server or an internet thing, but it did take a little longer to load. Also also when I tab out, everything on the display resets for some reason. Kinda odd but I'm sure that can be fixed. 

Thanks for checking it! Hmmm when you say it resets, does the code also disappear or does the page just refresh?

The page seems to refresh to a blank slate, leaving the code intact oddly enough.

Huh, I've been unable to replicate this issue - do you have auto update checked?

Yeah, but i fixed it by refreshing the page i think!

Everything seems to be working on my end! No popups asking about saving data locally, I'm not sure how to check if that's a thing I have turned on or not either.

Using Win10 Chrome btw!

Oh fantastic, if the code editor is working at all, that means you probably have them allowed because it's basically a slightly bigger, more robust cousin of cookies. I've heard that older browsers might have it blocked by default though. So I'll have to put clear instructions up about that.

Niceeee

From the looks of it, everything seems to be working fine on my end, however if I find any problems that occur during some of my test periods, I will come back here and give you an update and let you know! So far, so good! The code doesn't delete, and it loads local files just fine! 

I DID notice that the CSS can be a little wonky, not loading whenever you place an import in or place the overall code in. This could either be a CSS issue itself or simply that the editor might not recognize it right away. I'll continue to test multiple CSS templates and see if the editor recognizes them! 

I’ve had people mention that CSS not working with import statements—when you say import, do you mean the ones that looks like @import(“path/to/resource”)? or more like importing Google fonts.

Sorry for the late reply! That would be both versions: import AND code itself! Neither work.

also, thanks for taking the time to test it and for the feedback! I will be happy to make any changes needed if you run into any bugs.

Not a problem at all! I'm happy to help! I'll keep you updated! <3

from testing it for about 30 min now I'm not seeing it delete my code, but it does load blank until I make any kind of change in the code (literally even just hitting the spacebar on a comment section), then it refreshes and pops up all at once. That happens if I close out of the browser entirely and go back in, and sometimes if i make a new tab, close the old one, and open it again in a new tab. Happened with both Opera GX and Firefox! 

Not sure if that helps any but figured I'd offer in case it does!

oh you’re right, for some reason this only happens on some of my devices/browsers but I didn’t realise till you mentioned it. I just did a quick fix, does it load ok now? (it seems to on my end) Thanks for bringing it up!

just tried and I can't replicate the issue anymore :^) so, hopefully fixed! ty for looking into it so fast! 

May I please be added to the pinglist?

No problem, I've added you and you'll get subsequent pings!

Can I be added to the ping list?

No problem, added you 👍

Thank you sm! <3