From 4852b7e48bf78d327b1491034531ef381d80943d Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Thu, 15 Feb 2024 16:13:32 -0700
Subject: [PATCH] Replace `TextAreaAutoGrow` with Ace editor

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 .../pages/snapshots/create.vue                | 19 +++++++++++++------
 .../typings/vue2-ace-editor.d.ts              |  1 +
 2 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 pkg/rancher-desktop/typings/vue2-ace-editor.d.ts

diff --git a/pkg/rancher-desktop/pages/snapshots/create.vue b/pkg/rancher-desktop/pages/snapshots/create.vue
index 9962262e9d3..eb59b8e3f5e 100644
--- a/pkg/rancher-desktop/pages/snapshots/create.vue
+++ b/pkg/rancher-desktop/pages/snapshots/create.vue
@@ -1,8 +1,9 @@
 <script lang="ts">
 
-import { Banner, LabeledInput, TextAreaAutoGrow } from '@rancher/components';
+import { Banner, LabeledInput } from '@rancher/components';
 import dayjs from 'dayjs';
 import Vue from 'vue';
+import editor from 'vue2-ace-editor';
 import { mapGetters } from 'vuex';
 
 import { Snapshot, SnapshotEvent } from '@pkg/main/snapshots/types';
@@ -18,7 +19,7 @@ export default Vue.extend({
   components: {
     Banner,
     LabeledInput,
-    TextAreaAutoGrow,
+    editor,
   },
 
   data() {
@@ -45,6 +46,12 @@ export default Vue.extend({
   },
 
   methods: {
+    editorInit() {
+      require('brace/ext/language_tools');
+      require('brace/mode/markdown');
+      require('brace/theme/solarized_dark');
+    },
+
     goBack(event: SnapshotEvent | null) {
       this.$router.push({
         name:   'Snapshots',
@@ -142,12 +149,12 @@ export default Vue.extend({
       </div>
       <div class="field description-field">
         <label>{{ t('snapshots.create.description.label') }}</label>
-        <TextAreaAutoGrow
-          ref="descriptionInput"
+        <editor
           v-model="description"
-          data-test="createSnapshotDescInput"
+          lang="markdown"
+          theme="solarized_dark"
           class="input"
-          :disabled="creating"
+          @init="editorInit"
         />
       </div>
       <div class="actions">
diff --git a/pkg/rancher-desktop/typings/vue2-ace-editor.d.ts b/pkg/rancher-desktop/typings/vue2-ace-editor.d.ts
new file mode 100644
index 00000000000..fd913f9614c
--- /dev/null
+++ b/pkg/rancher-desktop/typings/vue2-ace-editor.d.ts
@@ -0,0 +1 @@
+declare module 'vue2-ace-editor';