markdown editor

2025-12-24 02:39:20 -05:00 · 2024-03-02 10:15:39 +01:00
parent 76eecedfb5
commit e0f7ce5de9
6 changed files with 182 additions and 54 deletions
--- a/vue3/package.json
+++ b/vue3/package.json
@@ -12,9 +12,11 @@
    "@mdi/font": "7.2.96",
    "@types/luxon": "^3.4.2",
    "luxon": "^3.4.4",
+    "mavon-editor": "^3.0.1",
    "pinia": "^2.1.7",
    "vue": "^3.4.15",
    "vue-router": "4",
+    "vuedraggable": "^4.1.0",
    "vuetify": "^3.3.15"
  },
  "devDependencies": {
--- a/vue3/src/apps/tandoor/Tandoor.vue
+++ b/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>
--- a/vue3/src/apps/tandoor/main.ts
+++ b/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')
--- a/vue3/src/components/inputs/StepMarkdownEditor.vue
+++ b/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>
--- a/vue3/src/pages/RecipeEditPage.vue
+++ b/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},
    },
--- a/vue3/yarn.lock
+++ b/vue3/yarn.lock
@@ -424,11 +424,21 @@ combined-stream@^1.0.8:
  dependencies:
    delayed-stream "~1.0.0"

+commander@^2.20.3:
+  version "2.20.3"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
+
 computeds@^0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
  integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==

+cssfilter@0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/cssfilter/-/cssfilter-0.0.10.tgz#c6d2672632a2e5c83e013e6864a42ce8defd20ae"
+  integrity sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==
+
 cssstyle@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a"
@@ -621,6 +631,13 @@ magic-string@^0.30.6:
  dependencies:
    "@jridgewell/sourcemap-codec" "^1.4.15"

+mavon-editor@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/mavon-editor/-/mavon-editor-3.0.1.tgz#0c2660569ded5b29e59d0e429af61eb618783a90"
+  integrity sha512-973cYCwv+AB+fcecsU6Ua6UXATxDMaY0Q7QzKQ/GmRW1sg+3DolZDnCGXth7XHDgrmqKTO57N42fVYujt0wfFw==
+  dependencies:
+    xss "^1.0.10"
+
 mime-db@1.52.0:
  version "1.52.0"
  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -760,6 +777,11 @@ semver@^7.5.4:
  dependencies:
    lru-cache "^6.0.0"

+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
+
 source-map-js@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
@@ -875,6 +897,13 @@ vue@^3.4.15:
    "@vue/server-renderer" "3.4.19"
    "@vue/shared" "3.4.19"

+vuedraggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
+  dependencies:
+    sortablejs "1.14.0"
+
 vuetify@^3.3.15:
  version "3.5.4"
  resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-3.5.4.tgz#f919c5194995a123815c277a95812bc230e33464"
@@ -927,6 +956,14 @@ xmlchars@^2.2.0:
  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==

+xss@^1.0.10:
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.14.tgz#4f3efbde75ad0d82e9921cc3c95e6590dd336694"
+  integrity sha512-og7TEJhXvn1a7kzZGQ7ETjdQVS2UfZyTlsEdDOqvQF7GoxNfY+0YLCzBy1kPdsDDx4QuNAonQPddpsn6Xl/7sw==
+  dependencies:
+    commander "^2.20.3"
+    cssfilter "0.0.10"
+
 yallist@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"