Merge branch '923-markdown-preview' into 'develop'

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

Closes #923

See merge request funkwhale/funkwhale!1025
This commit is contained in:
Eliot Berriot 2020-02-06 15:56:54 +01:00
commit 447b7b164d
12 changed files with 128 additions and 75 deletions

View File

@ -250,36 +250,42 @@ def join_queries_or(left, right):
def render_markdown(text):
return markdown.markdown(text, extensions=["nl2br"])
return markdown.markdown(text, extensions=["nl2br", "extra"])
HTMl_CLEANER = bleach.sanitizer.Cleaner(
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):

View File

@ -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)

View File

@ -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}

View File

@ -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

View File

@ -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

View File

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

View File

@ -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 () {

View File

@ -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) {

View File

@ -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>

View File

@ -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>

View File

@ -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">

View File

@ -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"},
]
}
]