From 8851faf788ca21cb58dbe973b9a8a9f1b87230d7 Mon Sep 17 00:00:00 2001
From: florent <flavelle@neogeo.fr>
Date: Wed, 27 Jul 2022 09:30:04 +0200
Subject: [PATCH] markdown editor on projects list
---
.../Project/Detail/ProjectHeader.vue | 2 +-
src/components/Projects/ProjectsListItem.vue | 25 ++++++++++++++++++-
2 files changed, 25 insertions(+), 2 deletions(-)
diff --git a/src/components/Project/Detail/ProjectHeader.vue b/src/components/Project/Detail/ProjectHeader.vue
index 7a6006c6..c9588d7a 100644
--- a/src/components/Project/Detail/ProjectHeader.vue
+++ b/src/components/Project/Detail/ProjectHeader.vue
@@ -304,7 +304,7 @@ export default {
}
#preview {
- height: 10em;
+ max-height: 10em;
overflow: scroll;
}
diff --git a/src/components/Projects/ProjectsListItem.vue b/src/components/Projects/ProjectsListItem.vue
index 983186fe..37d03f00 100644
--- a/src/components/Projects/ProjectsListItem.vue
+++ b/src/components/Projects/ProjectsListItem.vue
@@ -21,7 +21,16 @@
{{ project.title }}
</router-link>
<div class="description">
- <p>{{ project.description }}</p>
+ <textarea
+ :id="`editor-${project.slug}`"
+ :value="project.description"
+ :data-preview="`#preview-${project.slug}`"
+ hidden
+ />
+ <div
+ :id="`preview-${project.slug}`"
+ class="preview"
+ />
</div>
<div class="meta">
<span class="right floated">
@@ -74,6 +83,7 @@
</template>
<script>
+import TextareaMarkdown from 'textarea-markdown';
import { mapState } from 'vuex';
@@ -100,6 +110,11 @@ export default {
},
},
+ mounted() {
+ let textarea = document.getElementById(`editor-${this.project.slug}`);
+ new TextareaMarkdown(textarea);
+ },
+
methods: {
refreshId() {
const crypto = window.crypto || window.msCrypto;
@@ -110,3 +125,11 @@ export default {
};
</script>
+
+<style lang="less" scoped>
+.preview {
+ max-height: 10em;
+ overflow: scroll;
+ margin-bottom: 0.8em;
+}
+</style>
--
GitLab