Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Django field for Quill input #655

Merged
merged 18 commits into from
Sep 1, 2022
Merged

Django field for Quill input #655

merged 18 commits into from
Sep 1, 2022

Conversation

rabstejnek
Copy link
Collaborator

@rabstejnek rabstejnek commented Jul 14, 2022

QuillField / QuillWidget

Added a new QuillField field and QuillWidget widget for use in Django forms. This removes the need to manually quillify any textareas where we want HTML content, and allows for a centralized place to clean and validate incoming HTML data.

Cleaning/validating

Cleaning is now performed on passed in HTML to resolve any rendering issues and to make sure any content doesn't look out of place within the app.

Validation is done on links, since this is something that can't be handled automatically through cleaning; if a link is given that doesn't fall within our constraints, then a validation error is given:

image

Notes:

  • This needs to be added to epi v2.

Bugs:

  • A console error is given when the field media is first loaded, since it's dependent on jQuery. This same error is given where Django selectable is used.
    • The reason it still works is because we also include the form media within the template, so it is presumably loaded a second time; again, this is a fix also implemented for Django selectable.

@rabstejnek rabstejnek changed the title WIP: Quill widget QuillField Jul 18, 2022
@rabstejnek rabstejnek changed the title QuillField Django Quill field Jul 18, 2022
@rabstejnek rabstejnek changed the title Django Quill field Django field for Quill input Jul 18, 2022
@rabstejnek rabstejnek requested a review from shapiromatron July 18, 2022 12:40
@rabstejnek
Copy link
Collaborator Author

@shapiromatron I added two more commits that I believe are helpful, but can be safely reverted if you disagree.

  • 8360797 brings in form media in base.html if the form exists; this way we don't have to remember to include it on a case by case basis, and we can be assured that it is brought in after jQuery (which most of our form media relies on)
  • f8d1811 removes form media from being added by the crispy django tag; this was causing console errors since it brings in javascript thats dependent on jQuery without jQuery being brought in yet

@shapiromatron shapiromatron changed the base branch from main to next August 31, 2022 11:59
Copy link
Owner

@shapiromatron shapiromatron left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really well done! Glad to merge this one in; sorry it took so long...

@@ -95,6 +92,9 @@ def helper(self):


class ImportForm(SearchForm):
class Meta(SearchForm.Meta):
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow, that's a nice trick

@@ -107,6 +107,9 @@
<script type="text/javascript" src="{% static 'vendor/jqueryui/1.10.3/jquery-ui.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/htmx/1.6.1/htmx.min.js' %}"></script>
{% render_bundle 'main' %}
{% if form %}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is very nice. we do have to watch out to make sure that we still need to add form.media on any htmx stuff, but that makes sense conceptually so i like this pattern

@@ -98,4 +99,7 @@ export default function() {
q.stc.enableModals();
}
});

// restore original focus
$(focusedItem).focus();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fyi; I added this, now I think quill doesn't mess with which form field is focused on anymore

".who.int",
"sciencedirect.com",
"doi.org",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also added doi.org as a valid URL

@shapiromatron shapiromatron merged commit cd413cc into next Sep 1, 2022
@shapiromatron shapiromatron deleted the quill-widget branch September 1, 2022 20:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants