handle newlines and html conversions correctly in area_notes

enabling linebreaks in django cause the html tags to show up in edit mode. requirement is to have newlines handled accordingly in both viewing and editing.
Signbank · Sep 22, 2024 · e82eea0 · e82eea0
1 parent 37aef83
commit e82eea0
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/signbank/dictionary/templates/dictionary/gloss_detail.html b/signbank/dictionary/templates/dictionary/gloss_detail.html
@@ -343,7 +343,7 @@ <h4 class="modal-title" id="glossvideo{{glossvideo.pk}}-ModalLabel">{% blocktran
                 {# Translators: Information about a Gloss #}
                 <tr>
                     <th>{% blocktrans %}Notes:{% endblocktrans %}</th>
-                    <td class='edit edit_area_notes' id='notes'>{% value gloss.notes|linebreaks %}</td>
+                    <td class='edit edit_area_notes' id='notes'>{% value gloss.notes|linebreaksbr %}</td>
                 </tr>
                 {# Translators: Information about a Gloss #}
                 <tr>

diff --git a/signbank/dictionary/templates/dictionary/public_gloss_detail.html b/signbank/dictionary/templates/dictionary/public_gloss_detail.html
@@ -60,7 +60,7 @@ <h4>{% blocktrans %}Translation equivalents{% endblocktrans %}</h4>
             <header>
                 <h4>{% blocktrans %}Notes{% endblocktrans %}</h4>
             </header>
-            <p>{% if gloss.notes %}{{gloss.notes|linebreaks}}
+            <p>{% if gloss.notes %}{{gloss.notes|linebreaksbr}}
                 {% else %}<em>{% blocktrans %}No notes.{% endblocktrans %}</em>{% endif %}</p>
             </section>
         </div>

diff --git a/signbank/static/js/gloss_edit.js b/signbank/static/js/gloss_edit.js
@@ -163,7 +163,19 @@ function configure_edit() {
          type      : 'textarea',
          width     : 400,
          rows      : 3,
-         onblur    : 'ignore',
+         // onedit & callback & onreset: handle newlines and html conversions in jeditable.
+         onedit    : function(_settings, original) {
+            // Use innerText which contains newlines `\n`
+            original.innerHTML = original.innerText;
+         },
+         onreset   : function(_settings, original) {
+            // Replace newlines with `<br>` for returned value
+            original.replace(/\n/g, '<br>');
+         },
+         callback  : function(value, _settings) {
+            // Replace newlines with `<br>` for returned value
+            this.innerHTML = value.replace(/\n/g, '<br>');
+         },
      });
      $('.edit_url').editable(edit_post_url, {
          type      : 'text',