Allow switching between editor types

galaxyproject · Jan 14, 2025 · 8ee1493 · 8ee1493
1 parent 2c8223e
commit 8ee1493
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 110 deletions.
diff --git a/client/src/components/Markdown/Editor/CodeEditor.vue b/client/src/components/Markdown/Editor/CodeEditor.vue
diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
@@ -3,19 +3,33 @@
         <div id="center" class="d-flex flex-column h-100 w-100">
             <div class="unified-panel-header" unselectable="on">
                 <div class="unified-panel-header-inner">
-                    <div class="panel-header-buttons">
+                    <div class="my-1">
+                        {{ title }}
+                    </div>
+                    <div>
                         <slot name="buttons" />
                         <b-button v-b-tooltip.hover.bottom title="Help" variant="link" role="button" @click="onHelp">
                             <FontAwesomeIcon icon="question" />
                         </b-button>
-                    </div>
-                    <div class="my-1">
-                        {{ title }}
+                        <b-form-radio-group
+                            v-model="editor"
+                            size="sm"
+                            button-variant="outline-primary"
+                            :options="editorOptions"
+                            buttons />
                     </div>
                 </div>
             </div>
             <div class="unified-panel-body">
                 <TextEditor
+                    v-if="editor === 'text'"
+                    :title="title"
+                    :markdown-text="markdownText"
+                    :steps="steps"
+                    :mode="mode"
+                    @update="$emit('update', $event)" />
+                <CellEditor
+                    v-else
                     :title="title"
                     :markdown-text="markdownText"
                     :steps="steps"
@@ -39,6 +53,7 @@ import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
+import CellEditor from "./Editor/CellEditor.vue";
 import TextEditor from "./Editor/TextEditor.vue";
 import MarkdownHelp from "@/components/Markdown/MarkdownHelp.vue";
 
@@ -53,6 +68,13 @@ defineProps<{
 
 const showHelpModal = ref<boolean>(false);
 
+const editorOptions = ref([
+    { text: "Text", value: "text" },
+    { text: "Cells", value: "cells" },
+]);
+
+const editor = ref("text");
+
 function onHelp() {
     showHelpModal.value = true;
 }