Use EditableField for notes editor

dashboard/src/components/EditableField.vue

@@ -2,6 +2,7 @@
 
 import { ref, watch, nextTick, useTemplateRef } from 'vue';
 import { Button, FormGroup, TextInput } from '@cloudron/pankow';
+import { marked } from 'marked';
 
 const props = defineProps({
   label: { type: String, required: true },
@@ -10,6 +11,8 @@ const props = defineProps({
   disabled: { type: Boolean, default: false },
   saving: { type: Boolean, default: false },
   multiline: { type: Boolean, default: false },
+  markdown: { type: Boolean, default: false },
+  rows: { type: Number, default: 2 },
 });
 
 const emit = defineEmits(['save']);
@@ -52,12 +55,13 @@ function cancel() {
     <label>{{ label }} <sup v-if="helpUrl"><a :href="helpUrl" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
     <div v-if="editing" style="display: flex; align-items: center; gap: 6px">
       <TextInput v-if="!multiline" ref="textInput" v-model="draftValue" @keydown.enter="save()" :disabled="saving"/>
-      <textarea v-else ref="textInput" rows="2" cols="80" v-model="draftValue" @keydown.enter="save()" :disabled="saving"></textarea>
+      <textarea v-else ref="textInput" :rows="rows" cols="80" v-model="draftValue" :disabled="saving"></textarea>
       <Button tool @click="save" :disabled="saving">{{ $t('main.dialog.save') }}</Button>
       <Button tool plain secondary @click="cancel" :disabled="saving">{{ $t('main.dialog.cancel') }}</Button>
     </div>
     <div v-else>
-      <div>{{ value }}</div>
+      <div v-if="markdown" v-html="marked.parse(value)"></div>
+      <div v-else>{{ value }}</div>
     </div>
   </FormGroup>