Markdown for description

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## [Unreleased]
 
+### Added
+- Markdown rendering for Description
+ [#381](https://github.com/nextcloud/cookbook/pull/381) @thembeat
+
 ### Changed
 - Using computed property in recipe view
  [#522](https://github.com/nextcloud/cookbook/pull/522/) @seyfeb

package.json

@@ -25,9 +25,11 @@
  "@nextcloud/moment": "^1.1.1",
  "@nextcloud/vue": "^1.5.0",
  "lozad": "^1.16.0",
+ "v-markdown-editor": "^1.2.6",
  "vue": "^2.6.11",
  "vue-i18n": "^8.17.1",
  "vue-router": "^3.1.6",
+ "vue-showdown": "^2.4.1",
  "vuex": "^3.1.3"
  },
  "devDependencies": {

src/components/EditInputField.vue

@@ -3,8 +3,9 @@
  <label>
  {{ fieldLabel }}
  </label>
- <input v-if="fieldType!=='textarea'" :type="fieldType" v-model="content" @input="handleInput" />
- <textarea v-if="fieldType==='textarea'" v-model="content" @input="handleInput" />
+ <markdown-editor class='editor' v-if="fieldType==='markdown'" :type="textarea" v-model="content" @input="handleInput" toolbar='' />
+ <input v-else-if="fieldType!=='textarea'" :type="fieldType" v-model="content" @input="handleInput" />
+ <textarea v-else-if="fieldType==='textarea'" v-model="content" @input="handleInput" />
  </fieldset>
 </template>
 
@@ -64,7 +65,17 @@ fieldset > textarea {
  resize: vertical;
 }
 
- @media(max-width:1199px) { fieldset > input, fieldset > textarea {
+fieldset > .editor {
+ width: calc(100% - 11em);
+}
+
+fieldset > .editor {
+ min-height: 10em;
+ resize: vertical;
+ radius: 2;
+}
+
+ @media(max-width:1199px) { fieldset > input, fieldset > textarea, fieldset > .editor {
  width: 100%;
  }}
 

src/components/RecipeEdit.vue

@@ -1,7 +1,7 @@
 <template>
  <div class="wrapper">
  <EditInputField :fieldType="'text'" :fieldLabel="t('cookbook', 'Name')" v-model="recipe['name']" />
- <EditInputField :fieldType="'textarea'" :fieldLabel="t('cookbook', 'Description')" v-model="recipe['description']" />
+ <EditInputField :fieldType="'markdown'" :fieldLabel="t('cookbook', 'Description')" v-model="recipe['description']" />
  <EditInputField :fieldType="'url'" :fieldLabel="t('cookbook', 'URL')" v-model="recipe['url']" />
  <EditImageField :fieldLabel="t('cookbook', 'Image')" v-model="recipe['image']" />
  <EditTimeField :fieldLabel="t('cookbook', 'Preparation time')" v-model="prepTime" />

src/components/RecipeView.vue

@@ -25,7 +25,7 @@
  </span>
  </p>
 
- <p class="description">{{ $store.state.recipe.description }}</p>
+ <VueShowdown :markdown="$store.state.recipe.description" class="markdown-description"/>
  <p v-if="$store.state.recipe.url">
  <strong>{{ t('cookbook', 'Source') }}: </strong><a target="_blank" :href="$store.state.recipe.url" class='source-url'>{{ $store.state.recipe.url }}</a>
  </p>
@@ -473,9 +473,31 @@ export default {
  vertical-align: middle;
  }
 
- .nutrition-items {
- list-style-type: none;
- }
+ div.meta {
+ margin: 0 1rem;
+ }
+ 
+ .markdown-description >>> ol > li {
+ list-style-type: numbered;
+ }
+ 
+ .markdown-description >>> ul > li {
+ list-style-type: disc;
+ }
+ 
+ .markdown-description >>> ol > li,
+ .markdown-description >>> ul > li {
+ margin-left: 20px;
+ }
+ 
+ .markdown-description >>> a {
+ text-decoration: underline;
+ }
+
+ .nutrition-items {
+ list-style-type: none;
+ }
+
 
  main {
  flex-basis: calc(100% - 22rem);

src/main.js

@@ -14,6 +14,11 @@ import store from './store'
 //import AppNavi from './components/AppNavi'
 import AppMain from './components/AppMain'
 
+//Markdown
+import VueShowdown from 'vue-showdown'
+import Editor from 'v-markdown-editor'
+import 'v-markdown-editor/dist/v-markdown-editor.css'
+
 (function (OC, window) {
  'use strict'
 
@@ -170,6 +175,14 @@ import AppMain from './components/AppMain'
  Vue.prototype.$window = window
  Vue.prototype.OC = OC
 
+ //Markdown for Vue
+ Vue.use(VueShowdown, {
+ //set default flavor for Markdown
+ flavor: 'vanilla',
+ })
+ Vue.use(Editor);
+
+
  // Pass translation engine to Vue
  Vue.prototype.t = window.t