markdown editor

vue3/src/apps/tandoor/Tandoor.vue

@@ -13,9 +13,9 @@
 
 
         <v-main>
-            <v-container class="pa-0 ma-0 mb-2">
-                <router-view></router-view>
-            </v-container>
+
+            <router-view></router-view>
+
         </v-main>
 
         <v-bottom-navigation grow>

vue3/src/apps/tandoor/main.ts

@@ -4,7 +4,7 @@ import {createPinia} from 'pinia'
 // @ts-ignore
 import App from './Tandoor.vue'
 
-
+import mavonEditor from 'mavon-editor'
 import 'vite/modulepreload-polyfill';
 import vuetify from "@/vuetify";
 import ShoppingListPage from "@/pages/ShoppingListPage.vue";
@@ -36,5 +36,6 @@ app.use(createPinia())
 app.use(vuetify)
 app.use(router)
 app.use(luxonPlugin)
+app.use(mavonEditor) // TODO only use on pages that need it
 
 app.mount('#app')

vue3/src/components/inputs/StepMarkdownEditor.vue

@@ -0,0 +1,74 @@
+<template>
+    <mavon-editor v-model="mutable_step.instruction" :autofocus="false"
+                  style="z-index: auto" :id="'id_instruction_' + mutable_step.id"
+                  :language="'en'"
+                  :toolbars="md_editor_toolbars" :defaultOpen="'edit'">
+        <template #left-toolbar-after>
+            <span class="op-icon-divider"></span>
+            <button
+                type="button"
+                @click="mutable_step.instruction+= ' {{ scale(100) }}'"
+                class="op-icon fas fa-times"
+                aria-hidden="true"
+                title="Scalable Number"
+            ></button>
+        </template>
+    </mavon-editor>
+</template>
+
+<script lang="ts">
+
+import {defineComponent, PropType} from 'vue'
+import {Step} from "@/openapi";
+import 'mavon-editor/dist/css/index.css'
+
+export default defineComponent({
+    name: "StepMarkdownEditor",
+    props: {
+        step: {type: Object as PropType<Step>, required: true}
+    },
+    data() {
+        return {
+            mutable_step: {} as Step,
+
+            md_editor_toolbars: {
+                bold: true,
+                italic: true,
+                header: true,
+                underline: true,
+                strikethrough: true,
+                mark: false,
+                superscript: true,
+                subscript: true,
+                quote: true,
+                ol: true,
+                ul: true,
+                link: true,
+                imagelink: false,
+                code: true,
+                table: false,
+                fullscreen: false,
+                readmodel: false,
+                htmlcode: false,
+                help: true,
+                undo: true,
+                redo: true,
+                navigation: true,
+                alignleft: false,
+                aligncenter: false,
+                alignright: false,
+                subfield: true,
+                preview: true,
+            }
+        }
+    },
+    mounted() {
+        this.mutable_step = this.step
+    },
+})
+</script>
+
+
+<style scoped>
+
+</style>

vue3/src/pages/RecipeEditPage.vue

@@ -1,69 +1,83 @@
 <template>
+    <v-container>
 
-    <v-form>
-        <v-text-field
-            label="Name"
-            v-model="recipe.name"
-        ></v-text-field>
+        <v-form>
+            <v-text-field
+                label="Name"
+                v-model="recipe.name"
+            ></v-text-field>
 
-        <v-textarea
-            label="Description"
-            v-model="recipe.description"
-            clearable
-        ></v-textarea>
+            <v-textarea
+                label="Description"
+                v-model="recipe.description"
+                clearable
+            ></v-textarea>
 
-        <v-combobox
-            label="Keywords"
-            v-model="recipe.keywords"
-            :items="keywords"
-            item-title="name"
-            multiple
-            clearable
-            chips
-        ></v-combobox>
+            <v-combobox
+                label="Keywords"
+                v-model="recipe.keywords"
+                :items="keywords"
+                item-title="name"
+                multiple
+                clearable
+                chips
+            ></v-combobox>
 
-        <v-row>
-            <v-col>
-                <v-text-field
-                    v-model.number="recipe.waitingTime"
-                    label="Waiting Time (min)"
-                ></v-text-field>
-            </v-col>
-            <v-col>
-                <v-text-field
-                    v-model.number="recipe.workingTime"
-                    label="Working Time (min)"
-                ></v-text-field>
-            </v-col>
-        </v-row>
+            <v-row>
+                <v-col>
+                    <v-text-field
+                        v-model.number="recipe.waitingTime"
+                        label="Waiting Time (min)"
+                    ></v-text-field>
+                </v-col>
+                <v-col>
+                    <v-text-field
+                        v-model.number="recipe.workingTime"
+                        label="Working Time (min)"
+                    ></v-text-field>
+                </v-col>
+            </v-row>
 
-        <v-row>
-            <v-col>
-                <v-text-field
-                    v-model.number="recipe.servings"
-                    label="Servings"
-                ></v-text-field>
-            </v-col>
-            <v-col>
-                <v-text-field
-                    v-model="recipe.servingsText"
-                    label="Servings Text"
-                ></v-text-field>
-            </v-col>
-        </v-row>
+            <v-row>
+                <v-col>
+                    <v-text-field
+                        v-model.number="recipe.servings"
+                        label="Servings"
+                    ></v-text-field>
+                </v-col>
+                <v-col>
+                    <v-text-field
+                        v-model="recipe.servingsText"
+                        label="Servings Text"
+                    ></v-text-field>
+                </v-col>
+            </v-row>
+
+            <v-row v-for="step in recipe.steps">
+                <!--TODO  name, time, recipe, file(s), ingredients, quick add ingredients -->
+                <v-col>
+                    <step-markdown-editor :step="step"></step-markdown-editor>
+                </v-col>
+            </v-row>
+
+        </v-form>
+
+        <v-btn @click="updateRecipe()">Save</v-btn>
+        <v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
+    </v-container>
 
-    </v-form>
 
-    <v-btn @click="updateRecipe()">Save</v-btn>
-    <v-btn :to="{name: 'view_recipe', params: {id: recipe_id}}">View</v-btn>
 </template>
 
 <script lang="ts">
 import {defineComponent, PropType} from 'vue'
 import {ApiApi, Keyword, Recipe} from "@/openapi";
+import StepMarkdownEditor from "@/components/inputs/StepMarkdownEditor.vue";
+
 
 export default defineComponent({
     name: "RecipeEditPage",
+    components: {StepMarkdownEditor},
     props: {
         recipe_id: {type: String, required: false},
     },