Make the tournament welcome message nicer to edit

[czlee]

The current paradigm made sense a few years ago, nowadays we should probably provide a page where this can be edited and ideally previewed before being saved.

Also, I sort of suspect this can (and should) be made a tournament preference rather than a field of Tournament.

[philipbelesky]

As a note there are lots of drop-in style WYSYWG editors designed to be used with free text fields like this. Getting them to work on the frontend (i.e. as part of a preference field) might be a bit more difficult than using them in the admin area.

[czlee]

I tried the CKEditor one, which is the first editor listed on that page.

The good: It works like a charm. Even works with other languages. Works with Ctrl+ keyboard shortcuts (like Ctrl+B for bold). Can insert links, tables, images (but not upload them—this is a good thing, I'd rather not have to set up media).

The bad: It's really heavy. Like, requires a gazillion static resources. Is it really worth it, just for this?

I had also tried the django-markdownx package, but counterintuitively (to me) this ended up being more hassle: you can't (easily) disable image upload, and you have to override the widget to get it to play nice with our form, and it stores the input as Markdown (does not convert to HTML) which means we'd have to convert it again on the public page and there's no template tag to do this.

[philipbelesky]

Yea, I'm skeptical as to how many people use the welcome message at all, so adding a bunch of statics/dependencies might not be worth it. Perhaps one of the other markdown packages, like this might be more easily overridden / amenable? Installing a simple markdown-to-html template tag wouldn't be that bad either.

[czlee]

That's the same one I linked to above, that I said I'd already tried! 😝

[czlee]

Though more to the point, I thought that too—but then thought, people would probably use the welcome message more if it were more accessible?

[philipbelesky]

Oops, I think I got my clipboards mixed up. This was what I think I meant to link to which also happens to have an inbuilt markdown template tag. Definitely would probably more used if more accessible; although the reliance on a) Markdown and b) the backend admin editor undercuts that a little bit.

[czlee]

Ah, lol. Without having studied martor, the backend admin thing isn't likely to be an issue—typically the main implementation is in the widget, and everything else (form field, model field) is just a subclass that overrides with the new widget. So we just do the same in our forms directly. I actually prefer that approach, because I think the former violates the separation of concerns.

[czlee]

I tried the Martor one, but unsuccessfully: Also, I can't get the preview function to work. But I tried their demo and it works great, so I'm probably doing something wrong with integrating it into Tabbycat.

Do you want to have a crack at the CKEditor branch and see if you think the static files are excessive? There are a lot but maybe I'm just overreacting.

For what it's worth, I can't say I'm overly concerned about the reliance on Markdown, I think it's accessible enough that it can be learnt quickly. So if we can get them both to work, and the deluge of static files isn't a concern, I'm probably roughly indifferent between them. One potential discriminant: CKEditor seems fully translated; Martor seems to only translate the word "Preview", leaving the rest of it in English.

[czlee]

Oh, instructions:

1. Check out the relevant branch, feature/#543-ckeditor or feature/#543-martor.
2. pip install -r requirements_common.txt If you just pip install django-ckeditor and pip install martor that'll also do the trick.
3. dj collectstatic
4. dj runserver

[philipbelesky]

Have tried both. While it's only 11mb all up having an extra 2.5k static files for CKEditor does just seem kind of odd. I have the same Martor problem with the preview not working, which is odd as its CSS/JS seems to be loading fine.

I've had a look around and had setup summernote purely on the front-end. Technically we should just be able to do a pure drop-in replacement for the text field; but that does require adding a few build steps and relying on the ID of the form field not changing. So perfectly viable but potentially brittle. Turns out summernote actually has a django plugin so I made another branch with that option.

Anyway; check out #453-summernote. It's lightweight and seems to work well. Install instructions are as per your last message.

[czlee]

Ooooh that's cute, I like that one. Am I right in assessing that its static files are one-tenth that of CKEditor? If it's lightweight enough for you then happy to run with that!

Its Arabic translations aren't complete (French and Spanish are), but I don't think that's a dealbreaker.

(Also, kind of funny that it just adds the image inline into the HTML!)

[philipbelesky]

Yea, the static files are around 1/10th the size in quantity and file size. I've merged it in to develop so feel free to close this if that's the last thing to do.