Add full page markdown editor widget

.pre-commit-config.yaml

@@ -46,4 +46,5 @@ repos:
       rev: v0.4.0
       hooks:
           - id: biome-check
+            language_version: lts
             additional_dependencies: ["@biomejs/biome@^1.8.3"]

app/config/settings.py

@@ -791,7 +791,9 @@ def get_private_ip():
 MACHINA_BASE_TEMPLATE_NAME = "base.html"
 MACHINA_PROFILE_AVATARS_ENABLED = False
 MACHINA_FORUM_NAME = "Grand Challenge Forums"
-MACHINA_MARKUP_WIDGET = "grandchallenge.core.widgets.MarkdownEditorWidget"
+MACHINA_MARKUP_WIDGET = (
+    "grandchallenge.core.widgets.MarkdownEditorInlineWidget"
+)
 MACHINA_MARKUP_LANGUAGE = (
     "grandchallenge.core.templatetags.bleach.md2html",
     {"link_blank_target": True},

app/grandchallenge/algorithms/forms.py

@@ -73,7 +73,10 @@
 from grandchallenge.core.guardian import get_objects_for_user
 from grandchallenge.core.templatetags.bleach import clean
 from grandchallenge.core.templatetags.remove_whitespace import oxford_comma
-from grandchallenge.core.widgets import JSONEditorWidget, MarkdownEditorWidget
+from grandchallenge.core.widgets import (
+    JSONEditorWidget,
+    MarkdownEditorInlineWidget,
+)
 from grandchallenge.evaluation.utils import get
 from grandchallenge.groups.forms import UserGroupForm
 from grandchallenge.hanging_protocols.models import VIEW_CONTENT_SCHEMA
@@ -293,9 +296,9 @@ class Meta:
         )
         widgets = {
             "description": TextInput,
-            "job_create_page_markdown": MarkdownEditorWidget,
-            "additional_terms_markdown": MarkdownEditorWidget,
-            "result_template": MarkdownEditorWidget,
+            "job_create_page_markdown": MarkdownEditorInlineWidget,
+            "additional_terms_markdown": MarkdownEditorInlineWidget,
+            "result_template": MarkdownEditorInlineWidget,
             "publications": Select2MultipleWidget,
             "modalities": Select2MultipleWidget,
             "structures": Select2MultipleWidget,
@@ -606,13 +609,13 @@ class Meta:
             "editor_notes",
         )
         widgets = {
-            "summary": MarkdownEditorWidget,
-            "mechanism": MarkdownEditorWidget,
-            "uses_and_directions": MarkdownEditorWidget,
-            "validation_and_performance": MarkdownEditorWidget,
-            "warnings": MarkdownEditorWidget,
-            "common_error_messages": MarkdownEditorWidget,
-            "editor_notes": MarkdownEditorWidget,
+            "summary": MarkdownEditorInlineWidget,
+            "mechanism": MarkdownEditorInlineWidget,
+            "uses_and_directions": MarkdownEditorInlineWidget,
+            "validation_and_performance": MarkdownEditorInlineWidget,
+            "warnings": MarkdownEditorInlineWidget,
+            "common_error_messages": MarkdownEditorInlineWidget,
+            "editor_notes": MarkdownEditorInlineWidget,
         }
         help_texts = {
             "validation_and_performance": "If you have performance metrics about your algorithm, you can report them here. We recommend doing this in a table. <br>"

app/grandchallenge/archives/forms.py

@@ -33,7 +33,10 @@
     WorkstationUserFilterMixin,
 )
 from grandchallenge.core.guardian import get_objects_for_user
-from grandchallenge.core.widgets import JSONEditorWidget, MarkdownEditorWidget
+from grandchallenge.core.widgets import (
+    JSONEditorWidget,
+    MarkdownEditorInlineWidget,
+)
 from grandchallenge.groups.forms import UserGroupForm
 from grandchallenge.hanging_protocols.models import VIEW_CONTENT_SCHEMA
 from grandchallenge.reader_studies.models import ReaderStudy
@@ -99,7 +102,7 @@ class Meta:
         )
         widgets = {
             "description": TextInput,
-            "detail_page_markdown": MarkdownEditorWidget,
+            "detail_page_markdown": MarkdownEditorInlineWidget,
             "algorithms": Select2MultipleWidget,
             "publications": Select2MultipleWidget,
             "modalities": Select2MultipleWidget,

app/grandchallenge/blogs/forms.py

@@ -5,7 +5,7 @@
 
 from grandchallenge.blogs.models import Post
 from grandchallenge.core.forms import SaveFormInitMixin
-from grandchallenge.core.widgets import MarkdownEditorWidget
+from grandchallenge.core.widgets import MarkdownEditorInlineWidget
 from grandchallenge.groups.forms import UserGroupForm
 
 
@@ -43,7 +43,10 @@ class Meta:
 class PostUpdateForm(PostForm):
     class Meta(PostForm.Meta):
         fields = (*PostForm.Meta.fields, "published", "content")
-        widgets = {**PostForm.Meta.widgets, "content": MarkdownEditorWidget}
+        widgets = {
+            **PostForm.Meta.widgets,
+            "content": MarkdownEditorInlineWidget,
+        }
 
 
 class AuthorsForm(UserGroupForm):

app/grandchallenge/challenges/forms.py

@@ -16,7 +16,7 @@
 from django_select2.forms import Select2MultipleWidget
 
 from grandchallenge.challenges.models import Challenge, ChallengeRequest
-from grandchallenge.core.widgets import MarkdownEditorWidget
+from grandchallenge.core.widgets import MarkdownEditorInlineWidget
 from grandchallenge.subdomains.utils import reverse_lazy
 
 information_items = (
@@ -81,7 +81,7 @@ class Meta:
             "organizations": Select2MultipleWidget,
             "series": Select2MultipleWidget,
             "publications": Select2MultipleWidget,
-            "registration_page_markdown": MarkdownEditorWidget,
+            "registration_page_markdown": MarkdownEditorInlineWidget,
         }
         help_texts = {
             "publications": format_lazy(

app/grandchallenge/core/static/js/markdownx_full_page.js

@@ -0,0 +1,18 @@
+// Sync the height of the preview element to the height of the editor element.
+// This lets the user adjust the height of both elements by resizing the editor.
+document.addEventListener("DOMContentLoaded", () => {
+    const elements = document.getElementsByClassName("markdownx-full-page");
+    for (const element of elements) {
+        const editor = element.querySelector(".markdownx-editor");
+        const preview = element.querySelector(".markdownx-preview");
+        preview.style.height = `${editor.clientHeight}px`;
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                if (entry.contentBoxSize) {
+                    preview.style.height = `${editor.clientHeight}px`;
+                }
+            }
+        });
+        resizeObserver.observe(editor);
+    }
+});

app/grandchallenge/core/templates/markdownx/admin_widget.html

@@ -4,4 +4,4 @@
 
 <link href="{% static "css/admin_markdown.css" %}" type="text/css" rel="stylesheet">
 
-{% include "markdownx/widget.html" %}
+{% include "markdownx/inline_widget.html" %}

app/grandchallenge/core/templates/markdownx/full_page_widget.html

@@ -0,0 +1,18 @@
+<div class="markdownx markdownx-full-page">
+    <div>
+        {% include "markdownx/partials/notes.html" %}
+    </div>
+    {% include "markdownx/partials/toolbar.html" %}
+    <div class="row no-gutters">
+        <div class="col-md-6">
+            <div id="editor-{{ widget.attrs.id }}" aria-labelledby="editor-panel-{{ widget.attrs.id }}">
+                {% include "markdownx/partials/textarea.html" %}
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="border" id="preview-{{ widget.attrs.id }}" aria-labelledby="preview-panel-{{ widget.attrs.id }}">
+                <div class="markdownx-preview overflow-auto"></div>
+            </div>
+        </div>
+    </div>
+</div>

app/grandchallenge/core/templates/markdownx/inline_widget.html

@@ -0,0 +1,22 @@
+<div>
+    <ul class="nav nav-tabs" id="myTab" role="tablist">
+        <li class="nav-item">
+            <a class="nav-link active" id="editor-tab-{{ widget.attrs.id }}" data-toggle="tab" href="#editor-{{ widget.attrs.id }}" role="tab" aria-controls="editor-{{ widget.attrs.id }}" aria-selected="true">Editor</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="preview-tab-{{ widget.attrs.id }}" data-toggle="tab" href="#preview-{{ widget.attrs.id }}" role="tab" aria-controls="preview-{{ widget.attrs.id }}" aria-selected="false">Preview</a>
+        </li>
+    </ul>
+</div>
+<div class="markdownx tab-content">
+    <div class="tab-pane fade show active" id="editor-{{ widget.attrs.id }}" role="tabpanel" aria-labelledby="editor-tab-{{ widget.attrs.id }}">
+        {% include "markdownx/partials/toolbar.html" %}
+        {% include "markdownx/partials/textarea.html" %}
+        <div class="¨m-0">
+            {% include "markdownx/partials/notes.html" %}
+        </div>
+    </div>
+    <div class="tab-pane fade" id="preview-{{ widget.attrs.id }}" role="tabpanel" aria-labelledby="preview-tab-{{ widget.attrs.id }}">
+        <div class="markdownx-preview"></div>
+    </div>
+</div>

app/grandchallenge/core/templates/markdownx/partials/notes.html

@@ -0,0 +1,7 @@
+<p class="text-muted small">
+    You can use
+    <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet" target="_blank">markdown syntax</a>
+    here. Drag and drop images to upload them to the server. For code blocks with python syntax highlighting
+    use ```python ```. See <a href="https://pygments.org/languages/">here</a> for a list of other
+    supported languages. To embed YouTube videos use [youtube id].
+</p>

app/grandchallenge/core/templates/markdownx/partials/textarea.html

@@ -0,0 +1,3 @@
+<div class="text-monospace">
+    {% include 'django/forms/widgets/textarea.html' %}
+</div>

app/grandchallenge/core/templates/markdownx/partials/toolbar.html

@@ -0,0 +1,12 @@
+<markdown-toolbar for="{{ widget.attrs.id }}">
+    <md-header class="btn btn-sm" title="Heading"><i class="fas fa-heading"></i></md-header>
+    <md-bold class="btn btn-sm" title="Bold"><i class="fas fa-bold"></i></md-bold>
+    <md-italic class="btn btn-sm" title="Italic"><i class="fas fa-italic"></i></md-italic>
+    <md-unordered-list class="btn btn-sm" title="Unordered List"><i class="fas fa-list-ul"></i>
+    </md-unordered-list>
+    <md-ordered-list class="btn btn-sm" title="Ordered List"><i class="fas fa-list-ol"></i>
+    </md-ordered-list>
+    <md-quote class="btn btn-sm" title="Quote"><i class="fas fa-quote-left"></i></md-quote>
+    <md-code class="btn btn-sm" title="Inline Code"><i class="fas fa-code"></i></md-code>
+    <md-link class="btn btn-sm" title="Link"><i class="fas fa-link"></i></md-link>
+</markdown-toolbar>

app/grandchallenge/core/widgets.py

@@ -63,7 +63,9 @@ def render(self, name, value, attrs=None, renderer=None):
         )
 
 
-class MarkdownEditorWidget(MarkdownxWidget):
+class MarkdownEditorInlineWidget(MarkdownxWidget):
+    template_name = "markdownx/inline_widget.html"
+
     @property
     def media(self):
         return forms.Media(
@@ -92,3 +94,20 @@ def media(self):
                 "vendored/bootstrap/js/bootstrap.bundle.min.js",
             ],
         )
+
+
+class MarkdownEditorFullPageWidget(MarkdownEditorInlineWidget):
+    """Customized MarkdownX widget with side-by-side panes."""
+
+    template_name = "markdownx/full_page_widget.html"
+
+    def __init__(self, attrs=None):
+        default_attrs = {"rows": "40"}
+        if attrs:
+            default_attrs.update(attrs)
+        super().__init__(default_attrs)
+
+    class Media:
+        js = [
+            "js/markdownx_full_page.js",
+        ]

app/grandchallenge/documentation/forms.py

@@ -2,7 +2,7 @@
 from crispy_forms.layout import Submit
 from django import forms
 
-from grandchallenge.core.widgets import MarkdownEditorWidget
+from grandchallenge.core.widgets import MarkdownEditorInlineWidget
 from grandchallenge.documentation.models import DocPage
 
 
@@ -15,7 +15,7 @@ def __init__(self, *args, **kwargs):
     class Meta:
         model = DocPage
         fields = ("title", "content", "parent")
-        widgets = {"content": MarkdownEditorWidget}
+        widgets = {"content": MarkdownEditorInlineWidget}
 
 
 class DocPageUpdateForm(DocPageCreateForm):

app/grandchallenge/emails/forms.py

@@ -1,7 +1,7 @@
 from django import forms
 
 from grandchallenge.core.forms import SaveFormInitMixin
-from grandchallenge.core.widgets import MarkdownEditorWidget
+from grandchallenge.core.widgets import MarkdownEditorInlineWidget
 from grandchallenge.emails.models import Email
 
 
@@ -12,4 +12,4 @@ class Meta:
             "subject",
             "body",
         )
-        widgets = {"body": MarkdownEditorWidget}
+        widgets = {"body": MarkdownEditorInlineWidget}

app/grandchallenge/evaluation/forms.py

@@ -40,7 +40,10 @@
     get_objects_for_user,
 )
 from grandchallenge.core.templatetags.remove_whitespace import oxford_comma
-from grandchallenge.core.widgets import JSONEditorWidget, MarkdownEditorWidget
+from grandchallenge.core.widgets import (
+    JSONEditorWidget,
+    MarkdownEditorInlineWidget,
+)
 from grandchallenge.evaluation.models import (
     EXTRA_RESULT_COLUMNS_SCHEMA,
     CombinedLeaderboard,
@@ -189,7 +192,7 @@ class Meta:
             *algorithm_setting_options,
         )
         widgets = {
-            "submission_page_markdown": MarkdownEditorWidget,
+            "submission_page_markdown": MarkdownEditorInlineWidget,
             "extra_results_columns": JSONEditorWidget(
                 schema=EXTRA_RESULT_COLUMNS_SCHEMA
             ),

app/grandchallenge/flatpages/forms.py

@@ -5,7 +5,7 @@
 from django.contrib.flatpages.models import FlatPage
 from django.contrib.sites.models import Site
 
-from grandchallenge.core.widgets import MarkdownEditorWidget
+from grandchallenge.core.widgets import MarkdownEditorInlineWidget
 
 
 class FlatPageForm(FlatpageForm):
@@ -30,4 +30,4 @@ def __init__(self, *args, **kwargs):
     class Meta:
         model = FlatPage
         fields = ("title", "registration_required", "content")
-        widgets = {"content": MarkdownEditorWidget}
+        widgets = {"content": MarkdownEditorInlineWidget}

app/grandchallenge/organizations/forms.py

@@ -1,7 +1,7 @@
 from django.forms import ModelForm, TextInput
 
 from grandchallenge.core.forms import SaveFormInitMixin
-from grandchallenge.core.widgets import MarkdownEditorWidget
+from grandchallenge.core.widgets import MarkdownEditorInlineWidget
 from grandchallenge.organizations.models import Organization
 
 
@@ -17,6 +17,6 @@ class Meta:
             "detail_page_markdown",
         )
         widgets = {
-            "detail_page_markdown": MarkdownEditorWidget,
+            "detail_page_markdown": MarkdownEditorInlineWidget,
             "description": TextInput,
         }

app/grandchallenge/pages/forms.py

@@ -3,7 +3,7 @@
 from django.db.models import BLANK_CHOICE_DASH
 
 from grandchallenge.core.forms import SaveFormInitMixin
-from grandchallenge.core.widgets import MarkdownEditorWidget
+from grandchallenge.core.widgets import MarkdownEditorInlineWidget
 from grandchallenge.pages.models import Page
 
 
@@ -17,7 +17,7 @@ class Meta:
             "content_markdown",
         )
         widgets = {
-            "content_markdown": MarkdownEditorWidget,
+            "content_markdown": MarkdownEditorInlineWidget,
         }
 
     def clean_display_title(self):