From 3874355953c594f0a1862c17298fcca22ebcc144 Mon Sep 17 00:00:00 2001 From: konrad Date: Tue, 14 Jul 2020 19:26:05 +0000 Subject: [PATCH] Add easymde & markdown preview for editing descriptions and comments (#183) Make sure no text from previous mounts is left in the editor text field Make preview not the default when rendering descrition settings Add option to show editor by default while still having the option to show preview Add option to show editor by default while still having the option to show preview Use editor component for edit labels Use editor component for edit team Use editor component for edit namespace Use editor component for edit list Use editor component for edit task Make sure we find all checkboxes Fix checking wrong checkbox Make finding and replacing checkboxes in a function actually work Add upading text with checked checkboxes Lazy load editor Remove preview since we have a better one Make easymde smaller by default Add image upload from comments Rename easymde component to editor Only show preview button if editing is currently active Make editor tabs look better when commenting Make comments meta look better Don't try to update if the value was initially set Use editor to render and edit comments Make preview optional Make tabs look better Don't switch to preview after editing Centralize attachment state Render markdown by default Fix title being "null" Fix loading attachment images Add standalone preview Fix callback url Add onsuccess callback Add file upload Fix date parsing once and for all Add more props for upload and such Fix editor border color Fix changing text after mounting Add link to guide Fix sizing of icons Add timeout for changes Add all easymde icons Co-authored-by: kolaente Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/183 --- package.json | 2 + src/components/input/easymde.vue | 96 ---- src/components/input/editor.vue | 415 ++++++++++++++++++ src/components/tasks/edit-task.vue | 45 +- .../tasks/mixins/attachmentUpload.js | 32 ++ src/components/tasks/partials/attachments.vue | 21 +- src/components/tasks/partials/comments.vue | 68 ++- src/main.js | 10 +- src/services/attachment.js | 15 +- src/store/index.js | 3 + src/store/modules/attachments.js | 24 + src/store/modules/tasks.js | 1 + src/styles/components/comments.scss | 16 +- src/styles/theme/variables.scss | 2 + src/views/labels/ListLabels.vue | 22 +- src/views/list/EditList.vue | 8 +- src/views/namespaces/EditNamespace.vue | 18 +- src/views/tasks/TaskDetailView.vue | 27 +- src/views/teams/EditTeam.vue | 10 +- yarn.lock | 5 + 20 files changed, 661 insertions(+), 179 deletions(-) delete mode 100644 src/components/input/easymde.vue create mode 100644 src/components/input/editor.vue create mode 100644 src/components/tasks/mixins/attachmentUpload.js create mode 100644 src/store/modules/attachments.js diff --git a/package.json b/package.json index f295b1f46..feba190b6 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,9 @@ "camel-case": "4.1.1", "copy-to-clipboard": "3.3.1", "date-fns": "2.14.0", + "dompurify": "^2.0.12", "lodash": "4.17.19", + "marked": "^1.1.0", "register-service-worker": "1.7.1", "snake-case": "3.0.3", "v-tooltip": "2.0.3", diff --git a/src/components/input/easymde.vue b/src/components/input/easymde.vue deleted file mode 100644 index 5b95cfb3c..000000000 --- a/src/components/input/easymde.vue +++ /dev/null @@ -1,96 +0,0 @@ - - - - - diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue new file mode 100644 index 000000000..11c17d16e --- /dev/null +++ b/src/components/input/editor.vue @@ -0,0 +1,415 @@ + + + + + diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue index 5886ada72..9fdb8b553 100644 --- a/src/components/tasks/edit-task.vue +++ b/src/components/tasks/edit-task.vue @@ -3,17 +3,28 @@
- +
- +
@@ -106,7 +117,10 @@
- +
@@ -118,10 +132,10 @@ - Cancel - - -
+
{{ c.author.username }}  {{ formatDateSince(c.created) }} - · edited {{ formatDateSince(c.updated) }} -
-

- {{c.comment}} -

-
- Edit ·  - Remove -
+ · + edited {{ formatDateSince(c.updated) }} +
+ +
+ Remove
@@ -44,10 +40,21 @@
- +
- +
@@ -67,9 +74,16 @@ diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue index d19dc8845..58dd96e6e 100644 --- a/src/views/teams/EditTeam.vue +++ b/src/views/teams/EditTeam.vue @@ -29,20 +29,21 @@
- + v-model="team.description" + :preview-is-default="false" + />
- @@ -207,6 +208,7 @@ }, components: { multiselect, + editor: () => import(/* webpackPrefetch: true */ '../../components/input/editor'), }, created() { this.teamService = new TeamService() diff --git a/yarn.lock b/yarn.lock index ab44a2dc4..ad806ae0e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5069,6 +5069,11 @@ domhandler@^2.3.0: dependencies: domelementtype "1" +dompurify@^2.0.12: + version "2.0.12" + resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.0.12.tgz#284a2b041e1c60b8e72d7b4d2fadad36141254ae" + integrity sha512-Fl8KseK1imyhErHypFPA8qpq9gPzlsJ/EukA6yk9o0gX23p1TzC+rh9LqNg1qvErRTc0UNMYlKxEGSfSh43NDg== + domutils@1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"