From 9f5812fa1b18e27ae66757a56685c257320aa30f Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Fri, 16 Feb 2024 18:54:21 -0700
Subject: [PATCH] Replace `TextAreaAutoGrow` with Ace editor

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

diff --git a/package.json b/package.json
index 35fdbd513c5..7340c6689dd 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@docker/extension-api-client-types": "0.3.4",
     "@kubernetes/client-node": "0.18.1",
     "@rancher/components": "0.1.4",
+    "ace-builds": "^1.32.6",
     "agent-base": "6.0.2",
     "async-mutex": "^0.4.1",
     "console": "0.7.2",
@@ -97,6 +98,7 @@
     "vue-select": "3.20.2",
     "vue-shortkey": "3.1.7",
     "vue-slider-component": "3.2.24",
+    "vue2.7-ace-editor": "^2.2.6",
     "vuex": "3.6.2",
     "which": "4.0.0",
     "xdg-app-paths": "5.5.1",
diff --git a/pkg/rancher-desktop/pages/snapshots/create.vue b/pkg/rancher-desktop/pages/snapshots/create.vue
index 9962262e9d3..f55f1894824 100644
--- a/pkg/rancher-desktop/pages/snapshots/create.vue
+++ b/pkg/rancher-desktop/pages/snapshots/create.vue
@@ -1,8 +1,12 @@
 <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 { VAceEditor } from 'vue2.7-ace-editor';
+import 'ace-builds/src-noconflict/mode-markdown';
+import 'ace-builds/src-noconflict/theme-solarized_dark';
+import 'ace-builds/src-noconflict/theme-chrome';
 import { mapGetters } from 'vuex';
 
 import { Snapshot, SnapshotEvent } from '@pkg/main/snapshots/types';
@@ -18,7 +22,7 @@ export default Vue.extend({
   components: {
     Banner,
     LabeledInput,
-    TextAreaAutoGrow,
+    editor: VAceEditor,
   },
 
   data() {
@@ -142,12 +146,11 @@ export default Vue.extend({
       </div>
       <div class="field description-field">
         <label>{{ t('snapshots.create.description.label') }}</label>
-        <TextAreaAutoGrow
-          ref="descriptionInput"
-          v-model="description"
-          data-test="createSnapshotDescInput"
-          class="input"
-          :disabled="creating"
+        <editor
+          :value="description"
+          lang="markdown"
+          theme="solarized_dark"
+          style="height: 300px"
         />
       </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';
diff --git a/yarn.lock b/yarn.lock
index 13f909af8d9..cf3734b3bed 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3826,6 +3826,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+ace-builds@^1.32.6:
+  version "1.32.6"
+  resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.32.6.tgz#454ec8bc9235fbb960b8d8b86e698f941c104de2"
+  integrity sha512-dO5BnyDOhCnznhOpILzXq4jqkbhRXxNkf3BuVTmyxGyRLrhddfdyk6xXgy+7A8LENrcYoFi/sIxMuH3qjNUN4w==
+
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -13268,6 +13273,13 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue2.7-ace-editor@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/vue2.7-ace-editor/-/vue2.7-ace-editor-2.2.6.tgz#ae379fbb67c3722c7004e034a369e763e30286cc"
+  integrity sha512-VqcabvEJrpRSBeCHdjIzkIPNr4TaoLvMSNJdVK34xUg8ncF8c6saJmfzoJ8C/6kn3Gtg2N06OBM0GPGJJ42T5w==
+  dependencies:
+    resize-observer-polyfill "^1.5.1"
+
 vue@2.7.16:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.16.tgz#98c60de9def99c0e3da8dae59b304ead43b967c9"