Fix #923: Use same markdown widget for all content fields (rules, description,...

Fix #923: Use same markdown widget for all content fields (rules, description, reports, notes, etc.)

api/funkwhale_api/common/utils.py

@@ -250,36 +250,42 @@ def join_queries_or(left, right):
 
 
 def render_markdown(text):
-    return markdown.markdown(text, extensions=["nl2br"])
-
-
-HTMl_CLEANER = bleach.sanitizer.Cleaner(
+    return markdown.markdown(text, extensions=["nl2br", "extra"])
+
+
+SAFE_TAGS = [
+    "p",
+    "a",
+    "abbr",
+    "acronym",
+    "b",
+    "blockquote",
+    "code",
+    "em",
+    "i",
+    "li",
+    "ol",
+    "strong",
+    "ul",
+]
+HTMl_CLEANER = bleach.sanitizer.Cleaner(strip=True, tags=SAFE_TAGS)
+
+HTML_PERMISSIVE_CLEANER = bleach.sanitizer.Cleaner(
     strip=True,
-    tags=[
-        "p",
-        "a",
-        "abbr",
-        "acronym",
-        "b",
-        "blockquote",
-        "code",
-        "em",
-        "i",
-        "li",
-        "ol",
-        "strong",
-        "ul",
-    ],
+    tags=SAFE_TAGS + ["h1", "h2", "h3", "h4", "h5", "h6", "div", "section", "article"],
+    attributes=["class", "rel", "alt", "title"],
 )
 
 HTML_LINKER = bleach.linkifier.Linker()
 
 
-def clean_html(html):
-    return HTMl_CLEANER.clean(html)
+def clean_html(html, permissive=False):
+    return (
+        HTML_PERMISSIVE_CLEANER.clean(html) if permissive else HTMl_CLEANER.clean(html)
+    )
 
 
-def render_html(text, content_type):
+def render_html(text, content_type, permissive=False):
     rendered = render_markdown(text)
     if content_type == "text/html":
         rendered = text
@@ -288,7 +294,7 @@ def render_html(text, content_type):
     else:
         rendered = render_markdown(text)
     rendered = HTML_LINKER.linkify(rendered)
-    return clean_html(rendered).strip().replace("\n", "")
+    return clean_html(rendered, permissive=permissive).strip().replace("\n", "")
 
 
 def render_plain_text(html):

api/funkwhale_api/common/views.py

@@ -191,5 +191,10 @@ class TextPreviewView(views.APIView):
         if "text" not in payload:
             return response.Response({"detail": "Invalid input"}, status=400)
 
-        data = {"rendered": utils.render_html(payload["text"], "text/markdown")}
+        permissive = payload.get("permissive", False)
+        data = {
+            "rendered": utils.render_html(
+                payload["text"], "text/markdown", permissive=permissive
+            )
+        }
         return response.Response(data, status=200)

api/funkwhale_api/instance/dynamic_preferences_registry.py

@@ -38,9 +38,7 @@ class InstanceLongDescription(types.StringPreference):
     name = "long_description"
     verbose_name = "Long description"
     default = ""
-    help_text = (
-        "Instance long description, displayed in the about page (markdown allowed)."
-    )
+    help_text = "Instance long description, displayed in the about page."
     widget = widgets.Textarea
     field_kwargs = {"required": False}
 
@@ -52,9 +50,7 @@ class InstanceTerms(types.StringPreference):
     name = "terms"
     verbose_name = "Terms of service"
     default = ""
-    help_text = (
-        "Terms of service and privacy policy for your instance (markdown allowed)."
-    )
+    help_text = "Terms of service and privacy policy for your instance."
     widget = widgets.Textarea
     field_kwargs = {"required": False}
 
@@ -66,7 +62,7 @@ class InstanceRules(types.StringPreference):
     name = "rules"
     verbose_name = "Rules"
     default = ""
-    help_text = "Rules/Code of Conduct (markdown allowed)."
+    help_text = "Rules/Code of Conduct."
     widget = widgets.Textarea
     field_kwargs = {"required": False}
 

api/tests/common/test_utils.py

@@ -103,27 +103,40 @@ def test_join_url(start, end, expected):
 
 
 @pytest.mark.parametrize(
-    "text, content_type, expected",
+    "text, content_type, permissive, expected",
     [
-        ("hello world", "text/markdown", "<p>hello world</p>"),
-        ("hello world", "text/plain", "<p>hello world</p>"),
-        ("<strong>hello world</strong>", "text/html", "<strong>hello world</strong>"),
+        ("hello world", "text/markdown", False, "<p>hello world</p>"),
+        ("hello world", "text/plain", False, "<p>hello world</p>"),
+        (
+            "<strong>hello world</strong>",
+            "text/html",
+            False,
+            "<strong>hello world</strong>",
+        ),
         # images and other non whitelisted html should be removed
-        ("hello world\n![img](src)", "text/markdown", "<p>hello world</p>"),
+        ("hello world\n![img](src)", "text/markdown", False, "<p>hello world</p>"),
         (
             "hello world\n\n<script></script>\n\n<style></style>",
             "text/markdown",
+            False,
             "<p>hello world</p>",
         ),
         (
             "<p>hello world</p><script></script>\n\n<style></style>",
             "text/html",
+            False,
             "<p>hello world</p>",
         ),
+        (
+            '<p class="foo">hello world</p><script></script>\n\n<style></style>',
+            "text/markdown",
+            True,
+            '<p class="foo">hello world</p>',
+        ),
     ],
 )
-def test_render_html(text, content_type, expected):
-    result = utils.render_html(text, content_type)
+def test_render_html(text, content_type, permissive, expected):
+    result = utils.render_html(text, content_type, permissive=permissive)
     assert result == expected
 
 

api/tests/common/test_views.py

@@ -281,3 +281,15 @@ def test_can_render_text_preview(api_client, db):
     expected = {"rendered": utils.render_html(payload["text"], "text/markdown")}
     assert response.status_code == 200
     assert response.data == expected
+
+
+def test_can_render_text_preview_permissive(api_client, db):
+    payload = {"text": "Hello world", "permissive": True}
+    url = reverse("api:v1:text-preview")
+    response = api_client.post(url, payload)
+
+    expected = {
+        "rendered": utils.render_html(payload["text"], "text/markdown", permissive=True)
+    }
+    assert response.status_code == 200
+    assert response.data == expected

changes/changelog.d/923.enhancement

+Use same markdown widget for all content fields (rules, description, reports, notes, etc.)

front/src/components/admin/SettingsGroup.vue

@@ -17,24 +17,25 @@
         <label :for="setting.identifier">{{ setting.verbose_name }}</label>
         <p v-if="setting.help_text">{{ setting.help_text }}</p>
       </template>
+      <content-form v-if="setting.fieldType === 'markdown'" v-model="values[setting.identifier]" v-bind="setting.fieldParams" />
       <input
         :id="setting.identifier"
         :name="setting.identifier"
-        v-if="setting.field.widget.class === 'PasswordInput'"
+        v-else-if="setting.field.widget.class === 'PasswordInput'"
         type="password"
         class="ui input"
         v-model="values[setting.identifier]" />
       <input
         :id="setting.identifier"
         :name="setting.identifier"
-        v-if="setting.field.widget.class === 'TextInput'"
+        v-else-if="setting.field.widget.class === 'TextInput'"
         type="text"
         class="ui input"
         v-model="values[setting.identifier]" />
       <input
         :id="setting.identifier"
         :name="setting.identifier"
-        v-if="setting.field.class === 'IntegerField'"
+        v-else-if="setting.field.class === 'IntegerField'"
         type="number"
         class="ui input"
         v-model.number="values[setting.identifier]" />
@@ -149,7 +150,7 @@ export default {
         byIdentifier[e.identifier] = e
       })
       return this.group.settings.map(e => {
-        return byIdentifier[e]
+        return {...byIdentifier[e.name], fieldType: e.fieldType, fieldParams: e.fieldParams || {}}
       })
     },
     fileSettings () {

front/src/components/common/ContentForm.vue

@@ -26,13 +26,20 @@
       </template>
       <template v-else>
         <div class="ui transparent input">
-          <textarea ref="textarea" :name="fieldId" :id="fieldId" rows="5" v-model="newValue" :placeholder="labels.placeholder"></textarea>
+          <textarea
+            ref="textarea"
+            :name="fieldId"
+            :id="fieldId"
+            :rows="rows"
+            v-model="newValue"
+            :required="required"
+            :placeholder="placeholder || labels.placeholder"></textarea>
         </div>
         <div class="ui very small hidden divider"></div>
       </template>
     </div>
     <div class="ui bottom attached segment">
-      <span :class="['right', 'floated', {'ui red text': remainingChars < 0}]">
+      <span :class="['right', 'floated', {'ui red text': remainingChars < 0}]" v-if="charLimit">
         {{ remainingChars }}
       </span>
       <p>
@@ -49,7 +56,12 @@ export default {
   props: {
     value: {type: String, default: ""},
     fieldId: {type: String, default: "change-content"},
+    placeholder: {type: String, default: null},
     autofocus: {type: Boolean, default: false},
+    charLimit: {type: Number, default: 5000, required: false},
+    rows: {type: Number, default: 5, required: false},
+    permissive: {type: Boolean, default: false},
+    required: {type: Boolean, default: false},
   },
   data () {
     return {
@@ -57,7 +69,6 @@ export default {
       preview: null,
       newValue: this.value,
       isLoadingPreview: false,
-      charLimit: 5000,
     }
   },
   mounted () {
@@ -71,7 +82,7 @@ export default {
     async loadPreview () {
       this.isLoadingPreview = true
       try {
-        let response = await axios.post('text-preview/', {text: this.value})
+        let response = await axios.post('text-preview/', {text: this.newValue, permissive: this.permissive})
         this.preview = response.data.rendered
       } catch {
 
@@ -86,11 +97,12 @@ export default {
       }
     },
     remainingChars () {
-      return this.charLimit - this.value.length
+      return this.charLimit - (this.value || "").length
     }
   },
   watch: {
     newValue (v) {
+      this.preview = null
       this.$emit('input', v)
     },
     value: {
@@ -104,7 +116,7 @@ export default {
       immediate: true,
     },
     async isPreviewing (v) {
-      if (v && !!this.value && this.preview === null) {
+      if (v && !!this.value && this.preview === null && !this.isLoadingPreview) {
         await this.loadPreview()
       }
       if (!v) {

front/src/components/library/EditForm.vue

@@ -79,7 +79,7 @@
         </template>
         <template v-else-if="fieldConfig.type === 'content'">
           <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>
-          <textarea v-model="values[fieldConfig.id].text" :name="fieldConfig.id" :id="fieldConfig.id" rows="3"></textarea>
+          <content-form v-model="values[fieldConfig.id].text" :field-id="fieldConfig.id" :rows="3"></content-form>
         </template>
         <template v-else-if="fieldConfig.type === 'attachment'">
           <label :for="fieldConfig.id">{{ fieldConfig.label }}</label>

front/src/components/manage/moderation/NoteForm.vue

@@ -7,7 +7,7 @@
       </ul>
     </div>
     <div class="field">
-      <textarea name="change-summary" required v-model="summary" id="change-summary" rows="3" :placeholder="labels.summaryPlaceholder"></textarea>
+      <content-form field-id="change-summary" :required="true" v-model="summary" :rows="3" :placeholder="labels.summaryPlaceholder"></content-form>
     </div>
     <button :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']" type="submit" :disabled="isLoading">
       <translate translate-context="Content/Moderation/Button.Label/Verb">Add note</translate>

front/src/components/moderation/ReportModal.vue

@@ -44,7 +44,7 @@
           <p>
             <translate translate-context="*/*/Field,Help">Use this field to provide additional context to the moderator that will handle your report.</translate>
           </p>
-          <textarea name="report-summary" id="report-summary" rows="8" v-model="summary"></textarea>
+          <content-form field-id="report-summary" :rows="8" v-model="summary"></content-form>
         </div>
       </form>
       <div v-else-if="isLoadingReportTypes" class="ui inline active loader">

front/src/views/admin/Settings.vue

@@ -92,74 +92,81 @@ export default {
           label: instanceLabel,
           id: "instance",
           settings: [
-            "instance__name",
-            "instance__short_description",
-            "instance__long_description",
-            "instance__contact_email",
-            "instance__rules",
-            "instance__terms",
-            "instance__banner",
-            "instance__support_message"
+            {name: "instance__name"},
+            {name: "instance__short_description"},
+            {name: "instance__long_description", fieldType: 'markdown', fieldParams: {charLimit: null, permissive: true}},
+            {name: "instance__contact_email"},
+            {name: "instance__rules", fieldType: 'markdown', fieldParams: {charLimit: null, permissive: true}},
+            {name: "instance__terms", fieldType: 'markdown', fieldParams: {charLimit: null, permissive: true}},
+            {name: "instance__banner"},
+            {name: "instance__support_message", fieldType: 'markdown', fieldParams: {charLimit: null, permissive: true}},
           ]
         },
         {
           label: usersLabel,
           id: "users",
           settings: [
-            "users__registration_enabled",
-            "common__api_authentication_required",
-            "users__default_permissions",
-            "users__upload_quota"
+            {name: "users__registration_enabled"},
+            {name: "common__api_authentication_required"},
+            {name: "users__default_permissions"},
+            {name: "users__upload_quota"},
           ]
         },
         {
           label: musicLabel,
           id: "music",
           settings: [
-            "music__transcoding_enabled",
-            "music__transcoding_cache_duration"
+            {name: "music__transcoding_enabled"},
+            {name: "music__transcoding_cache_duration"},
           ]
         },
         {
           label: playlistsLabel,
           id: "playlists",
-          settings: ["playlists__max_tracks"]
+          settings: [
+            {name: "playlists__max_tracks"},
+          ]
         },
         {
           label: moderationLabel,
           id: "moderation",
           settings: [
-            "moderation__allow_list_enabled",
-            "moderation__allow_list_public",
-            "moderation__unauthenticated_report_types",
+            {name: "moderation__allow_list_enabled"},
+            {name: "moderation__allow_list_public"},
+            {name: "moderation__unauthenticated_report_types"},
           ]
         },
         {
           label: federationLabel,
           id: "federation",
           settings: [
-            "federation__enabled",
-            "federation__collection_page_size",
-            "federation__music_cache_duration",
-            "federation__actor_fetch_delay"
+            {name: "federation__enabled"},
+            {name: "federation__collection_page_size"},
+            {name: "federation__music_cache_duration"},
+            {name: "federation__actor_fetch_delay"},
           ]
         },
         {
           label: subsonicLabel,
           id: "subsonic",
-          settings: ["subsonic__enabled"]
+          settings: [
+            {name: "subsonic__enabled"},
+          ]
         },
         {
           label: uiLabel,
           id: "ui",
-          settings: ["ui__custom_css", "instance__funkwhale_support_message_enabled"]
+          settings: [
+            {name: "ui__custom_css"},
+            {name: "instance__funkwhale_support_message_enabled"},
+          ]
         },
         {
           label: statisticsLabel,
           id: "statistics",
           settings: [
-            "instance__nodeinfo_stats_enabled",
-            "instance__nodeinfo_private"
+            {name: "instance__nodeinfo_stats_enabled"},
+            {name: "instance__nodeinfo_private"},
           ]
         }
       ]