js editor

src/pages/rules/EditRuleBook.vue

@@ -3,7 +3,7 @@ import {useRoute, useRouter} from "vue-router";
 import {ref, watch} from "vue";
 import {useDebounceFn} from "@vueuse/core";
 import log from "loglevel";
-import {useRuleBooksStore} from "@/rules";
+import {ScriptEditor, useRuleBooksStore} from "@/rules";
 import {PlusIcon, TrashIcon} from "@heroicons/vue/24/outline";
 import {routeNames} from "@/routes";
 import {SliderCheckbox} from "@/components";
@@ -100,8 +100,7 @@ watch(useRoute(), async route => {
       </div>
       <div class="flex flex-col grow border-b-1">
         Script:
-        <textarea class="script-editor mt-2 mb-2" spellcheck="false" v-model="script" rows="20"
-                  placeholder="// activity, transaction, ledgers are available — branch on activity.type"></textarea>
+        <ScriptEditor class="mt-2 mb-2" v-model="script" />
       </div>
     </div>
     <div class="mt-2 justify-end flex">
@@ -110,13 +109,4 @@ watch(useRoute(), async route => {
       </div>
     </div>
   </div>
-</template>
-
-<style scoped>
-@reference "@/style.css";
-
-.script-editor {
-  @apply bg-slate-900 text-slate-100 font-mono text-sm p-2 rounded w-full resize-y;
-  tab-size: 2;
-}
-</style>
+</template>