Implement markdown preview for notes
This commit is contained in:
Raimund Schlüßler
parent
fc1ad9d1f9
commit
98dad676dd
7 changed files with 249 additions and 9 deletions
118
css/src/markdown.scss
Normal file
118
css/src/markdown.scss
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
/**
|
||||
* Markdown rendering
|
||||
*/
|
||||
#markdown {
|
||||
width: 100% !important;
|
||||
min-height: 40px;
|
||||
cursor: text;
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
* {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
a {
|
||||
opacity: 0.5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--color-background-dark, $color-lightgrey);
|
||||
padding: 3px;
|
||||
overflow: auto;
|
||||
|
||||
code {
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 50vh;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
margin: 0px 10px 0px 0px;
|
||||
line-height: 10px;
|
||||
font-size: 10px;
|
||||
display: inline-block;
|
||||
min-height: 12px;
|
||||
}
|
||||
|
||||
li input[type='checkbox'].checkbox + label::before {
|
||||
margin-left: -15px;
|
||||
|
||||
}
|
||||
input[type='checkbox'].checkbox + label::before {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
margin-right: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
li input[type='checkbox'].checkbox:not(:checked) + label::before {
|
||||
background-color: $color-main-background;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 10px;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
background-color: var(--color-background-dark, $color-lightgrey);
|
||||
}
|
||||
td, th {
|
||||
border: 1px solid var(--color-background-darker, $color-darkgrey);
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
font-size: 17.5px;
|
||||
border-left: 5px solid var(--color-background-dark);
|
||||
}
|
||||
}
|
||||
|
|
@ -1049,8 +1049,6 @@
|
|||
|
||||
.display-view {
|
||||
cursor: text;
|
||||
display: block;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.edit-view {
|
||||
|
|
|
|||
|
|
@ -24,3 +24,4 @@
|
|||
@import './src/sprites-color';
|
||||
@import './src/sprites-bw';
|
||||
@import './src/style';
|
||||
@import './src/markdown';
|
||||
|
|
|
|||
52
package-lock.json
generated
52
package-lock.json
generated
|
|
@ -1967,7 +1967,6 @@
|
|||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
|
||||
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"sprintf-js": "~1.0.2"
|
||||
}
|
||||
|
|
@ -4535,8 +4534,7 @@
|
|||
"entities": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
|
||||
"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
|
||||
"dev": true
|
||||
"integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
|
||||
},
|
||||
"env-variable": {
|
||||
"version": "0.0.5",
|
||||
|
|
@ -9598,6 +9596,14 @@
|
|||
"type-check": "~0.3.2"
|
||||
}
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.1.0.tgz",
|
||||
"integrity": "sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==",
|
||||
"requires": {
|
||||
"uc.micro": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"linkifyjs": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.7.tgz",
|
||||
|
|
@ -10050,6 +10056,33 @@
|
|||
"integrity": "sha512-lbRZ2mE3Q9RtLjxZBZ9+IMl68DKIXaVAhwvwn9pmjnPLS0h/6kyBMgNhqi1xFJ/2yv6cSyv0jbiZavZv93JkkA==",
|
||||
"dev": true
|
||||
},
|
||||
"markdown-it": {
|
||||
"version": "8.4.2",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.2.tgz",
|
||||
"integrity": "sha512-GcRz3AWTqSUphY3vsUqQSFMbgR38a4Lh3GWlHRh/7MRwz8mcu9n2IO7HOh+bXHrR9kOPDl5RNCaEsrneb+xhHQ==",
|
||||
"requires": {
|
||||
"argparse": "^1.0.7",
|
||||
"entities": "~1.1.1",
|
||||
"linkify-it": "^2.0.0",
|
||||
"mdurl": "^1.0.1",
|
||||
"uc.micro": "^1.0.5"
|
||||
}
|
||||
},
|
||||
"markdown-it-emoji": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-emoji/-/markdown-it-emoji-1.4.0.tgz",
|
||||
"integrity": "sha1-m+4OmpkKljupbfaYDE/dsF37Tcw="
|
||||
},
|
||||
"markdown-it-link-attributes": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-link-attributes/-/markdown-it-link-attributes-2.1.0.tgz",
|
||||
"integrity": "sha1-MqdMlPfFzf0Iho0r7inG+nCggyQ="
|
||||
},
|
||||
"markdown-it-task-lists": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz",
|
||||
"integrity": "sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA=="
|
||||
},
|
||||
"markdown-table": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-1.1.2.tgz",
|
||||
|
|
@ -10104,6 +10137,11 @@
|
|||
"integrity": "sha512-FSYbp3lyKjyj3E7fMl6rYvUdX0FBXaluGqlFoYESWQlyUTq8R+wp0rkFxoYFqZlHCvsUXGjyJmLQSnXToYhOSA==",
|
||||
"dev": true
|
||||
},
|
||||
"mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
"integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
|
||||
},
|
||||
"mem": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
|
||||
|
|
@ -14505,8 +14543,7 @@
|
|||
"sprintf-js": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
|
||||
"dev": true
|
||||
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
|
||||
},
|
||||
"sshpk": {
|
||||
"version": "1.14.2",
|
||||
|
|
@ -16302,6 +16339,11 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"uc.micro": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
|
||||
"integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.4.9",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,11 @@
|
|||
"ical.js": "~1.3.0",
|
||||
"jstimezonedetect": "",
|
||||
"linkifyjs": "~2.1.7",
|
||||
"markdown-it": "~8.4.2",
|
||||
"markdown-it-emoji": "~1.4.0",
|
||||
"markdown-it-link-attributes": "~2.1.0",
|
||||
"markdown-it-task-lists": "~2.1.1",
|
||||
"linkify-it": "~2.1.0",
|
||||
"nextcloud-vue": "^0.4.6",
|
||||
"p-limit": "^2.1.0",
|
||||
"uuid": "^3.3.2",
|
||||
|
|
|
|||
71
src/components/Markdown.vue
Normal file
71
src/components/Markdown.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!--
|
||||
Nextcloud - Tasks
|
||||
|
||||
@author Raimund Schlüßler
|
||||
@copyright 2019 Raimund Schlüßler <raimund.schluessler@mailbox.org>
|
||||
|
||||
This library is free software; you can redistribute it and/or
|
||||
modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
|
||||
License as published by the Free Software Foundation; either
|
||||
version 3 of the License, or any later version.
|
||||
|
||||
This library is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU AFFERO GENERAL PUBLIC LICENSE for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public
|
||||
License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div ref="markdown-container" class="markdown-body" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import Mila from 'markdown-it-link-attributes'
|
||||
import MarkdownItEmoji from 'markdown-it-emoji'
|
||||
import Mitl from 'markdown-it-task-lists'
|
||||
|
||||
export default {
|
||||
name: 'Markdown',
|
||||
props: {
|
||||
source: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
linkify: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
let md = new MarkdownIt({
|
||||
linkify: this.linkify
|
||||
})
|
||||
.use(MarkdownItEmoji)
|
||||
.use(Mila, {
|
||||
attrs: {
|
||||
target: '_blank',
|
||||
rel: 'nofollow'
|
||||
}
|
||||
})
|
||||
.use(Mitl)
|
||||
return {
|
||||
md: md
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
source: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
this.$nextTick(_ => {
|
||||
this.$refs['markdown-container'].innerHTML = this.md.render(val)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -245,7 +245,10 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
@click="editProperty('note', $event)"
|
||||
>
|
||||
<div :class="{'editing': edit=='note'}" class="content-fakeable">
|
||||
<div v-linkify="task.note" class="display-view" />
|
||||
<markdown id="markdown"
|
||||
:source="task.note"
|
||||
class="display-view"
|
||||
/>
|
||||
<div class="edit-view">
|
||||
<div class="expandingArea active">
|
||||
<pre><span>{{ tmpTask.note }}</span><br><br></pre>
|
||||
|
|
@ -280,6 +283,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
import { mapState, mapGetters, mapActions } from 'vuex'
|
||||
import { valid, overdue } from '../store/storeHelper'
|
||||
import { DatetimePicker, Multiselect } from 'nextcloud-vue'
|
||||
import Markdown from './Markdown'
|
||||
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
import { linkify } from '../directives/linkify.js'
|
||||
|
|
@ -287,7 +291,8 @@ import { linkify } from '../directives/linkify.js'
|
|||
export default {
|
||||
components: {
|
||||
DatetimePicker,
|
||||
Multiselect
|
||||
Multiselect,
|
||||
Markdown,
|
||||
},
|
||||
directives: {
|
||||
ClickOutside,
|
||||
|
|
|
|||
Loading…
Reference in a new issue