feat: reset button (#682)

website/src/components/ResetConfig.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import IconReset from '../icons/Reset.vue'
+
+const state = defineModel()
+const config = `
+# YAML Rule is more powerful!
+# https://ast-grep.github.io/guide/rule-config.html#rule
+rule:
+  any:
+    - pattern: console.log($A)
+    - pattern: console.debug($A)
+fix:
+  logger.log($A)
+`.trim()
+
+const onReset = () => {
+  state.value.config = config
+  state.value.query = 'console.log($MATCH)'
+  state.value.rewrite = 'logger.log($MATCH)'
+}
+</script>
+
+<template>
+  <button class="reset" title="Reset your config" @click="onReset">
+    <IconReset />
+  </button>
+</template>
+
+<style scoped>
+.reset {
+  width: 2em;
+  height: 2em;
+  border-radius: 50%;
+  padding: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

website/src/components/editors/Monaco.vue

@@ -98,6 +98,15 @@ watch(isDark, () => {
   monaco.editor.setTheme(isDark.value ? 'vs-dark' : 'vs')
 })
 
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (editor.value?.getValue() === value) return
+    editor.value?.setValue(value || '')
+  },
+  { immediate: true },
+)
+
 const transformHighlight = (match: number[]) => {
     const [sr, sc, er, ec] = match
     return {
@@ -193,4 +202,4 @@ onBeforeUnmount(() => {
 .monaco-match-span {
   background-color: var(--theme-highlight3);
 }
-</style>
+</style>

website/src/icons/Reset.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+      <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+      <path d="M20 4v5h-5" />
+    </g>
+  </svg>
+</template>