From f06c040b509b273068a9da59b3089d213a35452b Mon Sep 17 00:00:00 2001 From: wvffle Date: Mon, 25 Jul 2022 18:41:03 +0000 Subject: [PATCH] Add markdown enhancements This commit will bring: - Linking to other users with `@username` - Linking to tags with `#tag` - Opening external links in new tab (Fix #1647) - Single line breaks to avoid confusion for non-technical users (Fix #1377) - :unamused: support... - Email encoding in markdown - Markdown editor now auto-resizes to accomodate content (Fix #1379) NOTE: This only works in very few places. We need to wait for #1835 to have those features available widely --- .gitpod.yml | 3 + front/package.json | 19 +- front/src/components/AboutPod.vue | 16 +- front/src/components/Home.vue | 8 +- front/src/components/SanitizedHtml.vue | 7 + front/src/components/audio/track/Widget.vue | 6 +- front/src/components/auth/Plugin.vue | 120 +-- front/src/components/common/ContentForm.vue | 169 ++-- .../manage/moderation/InstancePolicyCard.vue | 36 +- .../components/manage/moderation/NoteForm.vue | 94 +- .../manage/moderation/NotesThread.vue | 6 +- .../manage/moderation/ReportCard.vue | 318 +++---- .../manage/moderation/UserRequestCard.vue | 122 +-- .../moderation/useReportConfigs.ts | 2 +- front/src/composables/useMarkdown.ts | 55 ++ front/src/style/components/_content_form.scss | 13 + front/src/types.ts | 101 +- front/src/utils/index.ts | 6 - front/src/views/Notifications.vue | 192 ++-- .../views/admin/moderation/ReportDetail.vue | 2 +- front/vite.config.ts | 12 +- front/yarn.lock | 900 +++++++++++++++--- 22 files changed, 1493 insertions(+), 714 deletions(-) create mode 100644 front/src/composables/useMarkdown.ts diff --git a/.gitpod.yml b/.gitpod.yml index 9632d94da..c70293618 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -32,6 +32,8 @@ tasks: poetry run python manage.py gitpod dev - name: Frontend + env: + VUE_EDITOR: code before: cd front init: | yarn install @@ -42,6 +44,7 @@ tasks: env: COMPOSE_FILE: /workspace/funkwhale/.gitpod/docker-compose.yml ENV_FILE: /workspace/funkwhale/.gitpod/.env + VUE_EDITOR: code command: | clear echo "" diff --git a/front/package.json b/front/package.json index 23ea89142..06dab1a23 100644 --- a/front/package.json +++ b/front/package.json @@ -18,31 +18,35 @@ "postinstall": "yarn run fix-fomantic-css" }, "dependencies": { + "@tiptap/starter-kit": "^2.0.0-beta.191", + "@tiptap/vue-3": "^2.0.0-beta.96", "@vue/runtime-core": "3.2.37", "@vueuse/core": "8.9.4", "@vueuse/integrations": "8.9.4", "axios": "0.27.2", - "axios-auth-refresh": "3.3.1", + "axios-auth-refresh": "3.3.3", "diff": "5.1.0", - "dompurify": "2.3.8", + "dompurify": "2.3.10", "focus-trap": "6.9.4", "fomantic-ui-css": "2.8.8", "howler": "2.2.3", "js-logger": "1.6.1", "lodash-es": "4.17.21", + "mavon-editor": "^3.0.0-beta", "moment": "2.29.4", "qs": "6.11.0", "register-service-worker": "1.7.2", "sanitize-html": "2.7.1", - "sass": "1.53.0", + "sass": "1.54.0", "showdown": "2.1.0", "text-clipper": "2.2.0", + "tiptap-markdown": "^0.5.0", "transliteration": "2.3.5", "vue": "3.2.37", "vue-gettext": "2.1.12", "vue-plyr": "7.0.0", "vue-router": "4.1.2", - "vue-tsc": "0.38.9", + "vue-tsc": "0.39.0", "vue-upload-component": "3.1.2", "vue-virtual-scroller": "^2.0.0-alpha.1", "vue3-gettext": "2.3.0", @@ -66,7 +70,7 @@ "@typescript-eslint/eslint-plugin": "5.30.7", "@vitejs/plugin-vue": "3.0.1", "@vue/compiler-sfc": "3.2.37", - "@vue/eslint-config-standard": "7.0.0", + "@vue/eslint-config-standard": "8.0.0", "@vue/eslint-config-typescript": "11.0.0", "@vue/test-utils": "2.0.2", "@vue/tsconfig": "0.1.3", @@ -79,14 +83,15 @@ "eslint-plugin-n": "15.2.4", "eslint-plugin-node": "11.1.0", "eslint-plugin-promise": "6.0.0", - "eslint-plugin-vue": "9.2.0", + "eslint-plugin-vue": "9.3.0", "jest-cli": "28.1.3", "moxios": "0.4.0", "sinon": "14.0.0", "ts-jest": "28.0.7", "typescript": "4.7.4", - "vite": "3.0.2", + "vite": "3.0.3", "vite-plugin-pwa": "0.12.3", + "vite-plugin-vue-inspector": "1.0.1", "vue-jest": "3.0.7", "workbox-core": "6.5.3", "workbox-precaching": "6.5.3", diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue index 21e29f5aa..644d684a8 100644 --- a/front/src/components/AboutPod.vue +++ b/front/src/components/AboutPod.vue @@ -1,13 +1,11 @@ diff --git a/front/src/components/audio/track/Widget.vue b/front/src/components/audio/track/Widget.vue index 2835eaf08..0397debe3 100644 --- a/front/src/components/audio/track/Widget.vue +++ b/front/src/components/audio/track/Widget.vue @@ -46,7 +46,7 @@ const fetchData = async (url = props.url) => { count.value = response.data.count const newObjects = !props.isActivity - ? response.data.results.map((track: Track) => { track }) + ? response.data.results.map((track: Track) => ({ track })) : response.data.results objects.push(...newObjects) @@ -62,7 +62,7 @@ fetchData() const emit = defineEmits(['count']) watch(count, (to) => emit('count', to)) -if (props.websocketHandlers.includes('Listen')) { +watch(() => props.websocketHandlers.includes('Listen'), (to) => { useWebSocketHandler('Listen', (event) => { // TODO (wvffle): Add reactivity to recently listened / favorited / added (#1316, #1534) // count.value += 1 @@ -70,7 +70,7 @@ if (props.websocketHandlers.includes('Listen')) { // objects.unshift(event as Listening) // objects.pop() }) -} +})