21 votes

Rich Markdown Editor Userscript for Tildes

Some of the discussion in another thread inspired me to try making a user-script that would inject some rich text editor into the tildes desktop site. I have only tried it on Firefox, but figured it might be worth sharing in case anyone finds it useful or has suggestions for improvements.

Install Tampermonkey extension. (Chrome, Firefox).

With the extension installed, this link should be detected as an installable userscript.

https://gist.github.com/allemangD/faf9bb796aad686593404a76b0e372c6/raw/073ca80d9dddc231e3f41c24c1989e8a40b7c243/tildes-easymde.user.js

@ some people who directly said they want a better editor in that thread.

@Eji1700 @arctanh @smoontjes


It injects EasyMDE with some extra css to make it match the Tildes theme. EasyMDE uses FontAwesome for its toolbar icons, but Tildes's content policy seems to make it impossible to use this. Instead, I add some CSS to put plain text in the toolbar buttons. Some nice features

  • Full-screen and side-by-side editors.
  • Spell checker.
  • Auto-save. (Based on the URL and element ID, so each comment reply is saved separately.)
  • Keyboard shortcuts like Ctrl+B, Ctrl+K, etc.
  • Conveniences like "enter" on a list adds an item to the list, or in a quote adds a line to the quote.

It is not perfect, however. It bugs out if you pick the built-in "preview" tab (the editor is still visible but does not update the preview), and it does not understand username mentions or group mentions.

I used it to write this, and the auto-save behavior seems to be fine, but I'm not sure how much I trust it not to lose my work.

Screenshots!

6 comments

  1. [2]
    synergy-unsterile
    Link
    Added to the Customizing Tildes wiki page.

    Added to the Customizing Tildes wiki page.

    5 votes
    1. TangibleLight
      Link Parent
      Thanks! I always forget about the wiki. There's a lot of good stuff on that page.

      Thanks! I always forget about the wiki. There's a lot of good stuff on that page.

      4 votes
  2. [3]
    creesch
    Link
    Very nice! Autosaving comments is also a nice but if I hit cancel and get the "Discard your reply?" popup I feel like that should also clear the autosaved content. Though I am not entirely sure if...

    Very nice! Autosaving comments is also a nice but if I hit cancel and get the "Discard your reply?" popup I feel like that should also clear the autosaved content. Though I am not entirely sure if it is possible to act based on the native confirmation dialogue. It might be possible to replace it outright for a similar result.

    In the same sense when I reply with a top comment a way to clear the saved content might be nice.

    Bit of a tangent, but also good to see that EasyMDE is being maintained again. I looked at using it a while ago (apparently two years ago or so) and thought it was no longer maintained.

    3 votes
    1. [2]
      TangibleLight
      Link Parent
      I agree but I'm not sure at the moment how to do it. When you discard, it should probably discard. When you post, it probably should too. For example if I open the "new post" page, my OP here is...

      I agree but I'm not sure at the moment how to do it. When you discard, it should probably discard. When you post, it probably should too. For example if I open the "new post" page, my OP here is still in the editor.

      But I dont necessarily want to discard the content when you click the button. What happens if there's a network error and posting fails? I want to keep the content in that case.

      I'll think about it and update if I come up with anything.

      2 votes
      1. creesch
        Link Parent
        For the failure scenario maybe store a timestamp and ttl value that is relatively short. That assumes of course that the network error is short lived. More elaborate as far as UI and UX go is not...

        For the failure scenario maybe store a timestamp and ttl value that is relatively short. That assumes of course that the network error is short lived.

        More elaborate as far as UI and UX go is not loading it by default but have an indicator a saved draft is available

        2 votes
  3. priw8
    Link
    Haha, I was literally thinking about making this exact thing too after seeing that discussion, but you beat me to it, nice!

    Haha, I was literally thinking about making this exact thing too after seeing that discussion, but you beat me to it, nice!

    3 votes