Enable markdown renderer for more than just help texts

rdmo/core/utils.py

@@ -372,6 +372,9 @@ def markdown2html(markdown_string):
     # adoption of the normal markdown function
     html = markdown(force_str(markdown_string)).strip()
 
+    # strip the outer paragraph
+    html = re.sub(r'^<p>(.*?)</p>$',r'\1', html)
+
     # convert `[<string>]{<title>}` to <span title="<title>"><string></span> to allow for underlined tooltips
     html = re.sub(
         r'\[(.*?)\]\{(.*?)\}',

rdmo/management/assets/js/components/element/Catalog.js

@@ -48,7 +48,8 @@ const Catalog = ({ config, catalog, elementActions, display='list',
       </div>
       <div>
         <p>
-          <strong>{gettext('Catalog')}{': '}</strong> {catalog.title}
+          <strong>{gettext('Catalog')}{': '}</strong>
+          <span dangerouslySetInnerHTML={{ __html: catalog.title }}></span>
         </p>
         {
           get(config, 'display.uri.catalogs', true) &&

rdmo/management/assets/js/components/element/Option.js

@@ -34,7 +34,8 @@ const Option = ({ config, option, elementActions, display='list', indent=0, filt
       </div>
       <div>
         <p>
-          <strong>{gettext('Option')}{': '}</strong> {option.text}
+          <strong>{gettext('Option')}{': '}</strong>
+          <span dangerouslySetInnerHTML={{ __html: option.text }}></span>
         </p>
         {
           get(config, 'display.uri.options', true) &&

rdmo/management/assets/js/components/element/Page.js

@@ -54,7 +54,8 @@ const Page = ({ config, page, configActions, elementActions, display='list', ind
       </div>
       <div>
         <p>
-          <strong>{gettext('Page')}{': '}</strong> {page.title}
+          <strong>{gettext('Page')}{': '}</strong>
+          <span dangerouslySetInnerHTML={{ __html: page.title }}></span>
         </p>
         {
           get(config, 'display.uri.pages', true) && <p>

rdmo/management/assets/js/components/element/Question.js

@@ -42,7 +42,7 @@ const Question = ({ config, question, elementActions, display='list', indent=0,
       <div>
         <p>
           <strong className={question.is_optional ? 'text-muted' : ''}>{gettext('Question')}{': '}</strong>
-          {question.text}
+          <span dangerouslySetInnerHTML={{ __html: question.text }}></span>
         </p>
         {
           get(config, 'display.uri.questions', true) && <p>

rdmo/management/assets/js/components/element/QuestionSet.js

@@ -53,7 +53,8 @@ const QuestionSet = ({ config, questionset, configActions, elementActions, displ
       </div>
       <div>
         <p>
-          <strong>{gettext('Question set')}{': '}</strong> {questionset.title}
+          <strong>{gettext('Question set')}{': '}</strong>
+          <span dangerouslySetInnerHTML={{ __html: questionset.title }}></span>
         </p>
         {
           get(config, 'display.uri.questionsets', true) && <p>

rdmo/management/assets/js/components/element/Section.js

@@ -51,7 +51,8 @@ const Section = ({ config, section, configActions, elementActions, display='list
       </div>
       <div>
         <p>
-          <strong>{gettext('Section')}{': '}</strong> {section.title}
+          <strong>{gettext('Section')}{': '}</strong>
+          <span dangerouslySetInnerHTML={{ __html: section.title }}></span>
         </p>
         {
           get(config, 'display.uri.sections', true) &&

rdmo/management/assets/js/components/element/Task.js

@@ -43,7 +43,7 @@ const Task = ({ config, task, elementActions, filter=false, filterSites=false, f
         <div>
           <p>
             <strong>{gettext('Task')}{': '}</strong>
-            {task.title}
+            <span dangerouslySetInnerHTML={{ __html: task.title }}></span>
           </p>
           {
             get(config, 'display.uri.tasks', true) && <p>

rdmo/management/assets/js/components/element/View.js

@@ -40,6 +40,9 @@ const View = ({ config, view, elementActions, filter=false, filterSites=false, f
         <div>
           <p>
             <strong>{gettext('View')}{': '}</strong>
+            <span dangerouslySetInnerHTML={{ __html: view.title }}></span>
+          </p>
+          <p>
             <CodeLink className="code-views" uri={view.uri} onClick={() => fetchEdit()} />
           </p>
           <ElementErrors element={view} />

rdmo/options/serializers/v1/option.py

@@ -3,6 +3,7 @@
 from rdmo.core.serializers import (
     ElementModelSerializerMixin,
     ElementWarningSerializerMixin,
+    MarkdownSerializerMixin,
     ReadOnlyObjectPermissionSerializerMixin,
     ThroughModelSerializerMixin,
     TranslationSerializerMixin,
@@ -14,7 +15,10 @@
 
 class OptionSerializer(ThroughModelSerializerMixin, TranslationSerializerMixin,
                        ElementModelSerializerMixin, ElementWarningSerializerMixin,
-                       ReadOnlyObjectPermissionSerializerMixin, serializers.ModelSerializer):
+                       ReadOnlyObjectPermissionSerializerMixin, MarkdownSerializerMixin,
+                       serializers.ModelSerializer):
+
+    markdown_fields = ('text', 'help')
 
     model = serializers.SerializerMethodField()
     uri_path = serializers.CharField(required=True)

rdmo/projects/forms.py

@@ -20,24 +20,32 @@ class CatalogChoiceField(forms.ModelChoiceField):
     _unavailable_icon = ' (<span class="fa fa-eye-slash" aria-hidden="true"></span>)'
 
     def label_from_instance(self, obj):
+        rendered_title = markdown2html(obj.title)
+        rendered_help = markdown2html(obj.help)
+
         if obj.available is False:
-            return mark_safe('<div class="text-muted">{}{}</br>{}</div>'.format(
-                obj.title, self._unavailable_icon, markdown2html(obj.help)
-            ))
+            return mark_safe(f'<div class="text-muted"><p>{rendered_title}{self._unavailable_icon}</p>'
+                             f'<p>{rendered_help}</p></div>')
 
-        return mark_safe(f'<b>{obj.title}</b></br>{markdown2html(obj.help)}')
+        return mark_safe(f'<p><b>{rendered_title}</b></p><p>{rendered_help}</p>')
 
 
 class TasksMultipleChoiceField(forms.ModelMultipleChoiceField):
 
     def label_from_instance(self, obj):
-        return mark_safe(f'<b>{obj.title}</b></br>{markdown2html(obj.text)}')
+        rendered_title = markdown2html(obj.title)
+        rendered_text = markdown2html(obj.text)
+
+        return mark_safe(f'<b>{rendered_title}</b></br>{rendered_text}')
 
 
 class ViewsMultipleChoiceField(forms.ModelMultipleChoiceField):
 
     def label_from_instance(self, obj):
-        return mark_safe(f'<b>{obj.title}</b></br>{markdown2html(obj.help)}')
+        rendered_title = markdown2html(obj.title)
+        rendered_help = markdown2html(obj.help)
+
+        return mark_safe(f'<b>{rendered_title}</b></br>{rendered_help}')
 
 
 class ProjectForm(forms.ModelForm):

rdmo/projects/progress.py

@@ -4,6 +4,7 @@
 from django.db.models import Exists, OuterRef, Q
 
 from rdmo.conditions.models import Condition
+from rdmo.core.utils import markdown2html
 from rdmo.questions.models import Page, Question, QuestionSet
 
 
@@ -52,7 +53,7 @@ def compute_navigation(section, project, snapshot=None):
         navigation_section = {
             'id': catalog_section.id,
             'uri': catalog_section.uri,
-            'title': catalog_section.title,
+            'title': markdown2html(catalog_section.title),
             'first': catalog_section.elements[0].id if section.elements else None
         }
         if catalog_section.id == section.id:
@@ -71,7 +72,7 @@ def compute_navigation(section, project, snapshot=None):
                 navigation_section['pages'].append({
                     'id': page.id,
                     'uri': page.uri,
-                    'title': page.title,
+                    'title': markdown2html(page.title),
                     'show': show,
                     'count': count,
                     'total': total

rdmo/projects/serializers/v1/overview.py

@@ -1,10 +1,13 @@
 from rest_framework import serializers
 
+from rdmo.core.serializers import MarkdownSerializerMixin
 from rdmo.projects.models import Project
 from rdmo.questions.models import Catalog
 
 
-class CatalogSerializer(serializers.ModelSerializer):
+class CatalogSerializer(MarkdownSerializerMixin, serializers.ModelSerializer):
+
+    markdown_fields = ('title', )
 
     class Meta:
         model = Catalog

rdmo/projects/serializers/v1/page.py

@@ -4,6 +4,7 @@
 
 from rdmo.conditions.models import Condition
 from rdmo.core.serializers import ElementModelSerializerMixin, MarkdownSerializerMixin
+from rdmo.core.utils import markdown2html
 from rdmo.options.models import Option, OptionSet
 from rdmo.questions.models import Page, Question, QuestionSet
 from rdmo.questions.utils import get_widget_class
@@ -53,7 +54,7 @@ class Meta:
 
 class QuestionSerializer(ElementModelSerializerMixin, MarkdownSerializerMixin, serializers.ModelSerializer):
 
-    markdown_fields = ('help', )
+    markdown_fields = ('help', 'text')
 
     model = serializers.SerializerMethodField()
     conditions = ConditionSerializer(default=None, many=True)
@@ -102,7 +103,7 @@ def get_widget_class(self, obj):
 
 class QuestionSetSerializer(ElementModelSerializerMixin, MarkdownSerializerMixin, serializers.ModelSerializer):
 
-    markdown_fields = ('help', )
+    markdown_fields = ('title', 'help')
 
     model = serializers.SerializerMethodField()
     elements = serializers.SerializerMethodField()
@@ -135,7 +136,7 @@ def get_verbose_name(self, obj):
 
 class PageSerializer(MarkdownSerializerMixin, serializers.ModelSerializer):
 
-    markdown_fields = ('help', )
+    markdown_fields = ('title', 'help')
 
     elements = serializers.SerializerMethodField()
     section = serializers.SerializerMethodField()
@@ -170,7 +171,7 @@ def get_section(self, obj):
         section = self.context['catalog'].get_section_for_page(obj)
         return {
            'id': section.id,
-           'title': section.title,
+           'title': markdown2html(section.title),
            'first': section.elements[0].id if section.elements else None
         } if section else {}
 

rdmo/projects/static/projects/js/project_questions/services.js

@@ -71,7 +71,7 @@ angular.module('project_questions')
 
     service.init = function(project_id) {
         service.settings = resources.settings.get();
-        service.project = resources.projects.get({id: project_id, detail_action: 'overview'});
+        service.project = resources.projects.get({id: project_id, detail_action: 'overview'})
 
         $q.all([
             service.settings.$promise,
@@ -89,6 +89,9 @@ angular.module('project_questions')
                 service.initView(path);
             }
 
+            // mark the catalog title 'safe'
+            service.project.catalog.title = $sce.trustAsHtml(service.project.catalog.title);
+
             // enable back/forward button of browser, i.e. location changes
             $rootScope.$on('$locationChangeSuccess', function (scope, next, current) {
                 var path = $location.path().replace(/\//g, '');
@@ -284,6 +287,16 @@ angular.module('project_questions')
             id: service.project.id,
             detail_id: future.page.section.id,
             detail_action: 'navigation'
+        }, function(response) {
+            response.forEach(function(section) {
+                section.title = $sce.trustAsHtml(section.title);
+
+                if (angular.isDefined(section.pages)) {
+                    section.pages.forEach(function(page) {
+                        page.title = $sce.trustAsHtml(page.title);
+                    })
+                }
+            })
         });
 
         return future.navigation.$promise
@@ -293,8 +306,10 @@ angular.module('project_questions')
         // store attributes in a separate array
         if (page.attribute !== null) future.attributes.push(page.attribute);
 
-        // mark the help text of the question set 'save'
+        // mark the help text of the question set 'safe'
         page.help = $sce.trustAsHtml(page.help);
+        page.title = $sce.trustAsHtml(page.title);
+        page.section.title = $sce.trustAsHtml(page.section.title);
 
         // init questions and question sets
         page.elements.forEach(function(element) {
@@ -312,8 +327,9 @@ angular.module('project_questions')
         // store questionsets in a separate array
         future.questionsets.push(questionset);
 
-        // mark the help text of the question set 'save'
+        // mark the help text of the question set 'safe'
         questionset.help = $sce.trustAsHtml(questionset.help);
+        questionset.title = $sce.trustAsHtml(questionset.title);
 
         // init questions and question sets
         questionset.elements.forEach(function(element) {
@@ -334,6 +350,7 @@ angular.module('project_questions')
 
         // mark the help text of the question set 'save'
         question.help = $sce.trustAsHtml(question.help);
+        question.text = $sce.trustAsHtml(question.text);
 
         // this is a question!
         question.isQuestion = true;

rdmo/projects/templates/projects/project_answers_element.html

@@ -1,9 +1,10 @@
+{% load core_tags %}
 {% load view_tags %}
 
 {% if element.text %}
     {# this is a question #}
 
-    <p><strong>{{ element.text }}</strong></p>
+    <p><strong class="question-label">{{ element.text|markdown }}</strong></p>
 
     {% get_set_prefixes element.attribute project=project_wrapper as set_prefixes %}
     {% for set_prefix in set_prefixes %}

rdmo/projects/templates/projects/project_answers_tree.html

@@ -1,10 +1,12 @@
+{% load core_tags %}
+
 {% for section in project_wrapper.catalog.sections %}
 
-    <h2>{{ section.title }}</h2>
+    <h2>{{ section.title|markdown }}</h2>
 
     {% for page in section.pages %}
 
-        <h3>{{ page.title }}</h3>
+        <h3>{{ page.title|markdown }}</h3>
 
         {% for element in page.elements %}
 

rdmo/projects/templates/projects/project_detail_header_catalog.html

@@ -9,5 +9,9 @@
 </p>
 {% endif %}
 
-<strong>{{ project.catalog.title }}</strong><br/>
-{{ project.catalog.help|markdown }}
+<p>
+    <strong>{{ project.catalog.title|markdown }}</strong>
+</p>
+<p>
+    {{ project.catalog.help|markdown }}
+</p>

rdmo/projects/templates/projects/project_detail_issues.html

@@ -33,7 +33,7 @@ <h2>{% trans 'Tasks' %}</h2>
                 <tr>
                     <td>
                         <a href="{% url 'issue' project.pk issue.pk %}">
-                            {{ issue.task.title }}
+                            {{ issue.task.title|markdown }}
                         </a>
                     </td>
                     <td>{{ issue.task.text|markdown }}</td>

rdmo/projects/templates/projects/project_detail_views.html

@@ -30,7 +30,7 @@ <h2>{% trans 'Views' %}</h2>
                 {% for view in views %}
                 <tr>
                     <td>
-                        <a href="{% url 'project_view' project.pk view.pk %}">{{ view.title }}</a>
+                        <a href="{% url 'project_view' project.pk view.pk %}">{{ view.title|markdown }}</a>
                     </td>
                     <td>{{ view.help|markdown }}</td>
                     <td class="text-right">

rdmo/projects/templates/projects/project_questions.html

@@ -51,9 +51,7 @@
     <div class="project-questions-form" ng-show="service.page.id" ng-cloak>
         {% include 'projects/project_questions_head.html' %}
 
-        <h2>
-            {$ service.page.title $}
-        </h2>
+        <h2 ng-bind-html="service.page.title"></h2>
 
         <div class="help-text" ng-bind-html="service.page.help"></div>
 

rdmo/projects/templates/projects/project_questions_element.html

@@ -1,6 +1,6 @@
 <div class="col-md-12" ng-hide="element.isQuestion" ng-init="questionset = element">
     <div ng-hide="valueset.hidden.questionsets[questionset.id]">
-        <strong>{$ questionset.title $}</strong>
+        <strong ng-bind-html="questionset.title"></strong>
 
         <div class="help-text" ng-bind-html="questionset.help"></div>
 

rdmo/projects/templates/projects/project_questions_head.html

@@ -9,7 +9,7 @@
     </li>
     <li>
         <a href="" ng-click="service.jump(service.page.section)">
-        <span> {$ service.page.section.title $} </span>
+            <span ng-bind-html="service.page.section.title"></span>
         </a>
     </li>
 </ul>