feat: highlight word list comments (#524)

src/ace-config.ts

@@ -530,6 +530,56 @@ function registerJinja2Mode() {
   )
 }
 
+function registerWordListMode() {
+  aceModule.define?.(
+    'ace/mode/word_list_highlight_rules',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextHighlightRules = require('./text_highlight_rules').TextHighlightRules
+
+      const WordListHighlightRules = function (this: any) {
+        this.$rules = {
+          start: [
+            {
+              token: 'comment.word-list',
+              regex: /^#.*/,
+            },
+          ],
+        }
+
+        this.normalizeRules()
+      }
+
+      oop.inherits(WordListHighlightRules, TextHighlightRules)
+      exports.WordListHighlightRules = WordListHighlightRules
+    },
+  )
+
+  aceModule.define?.(
+    'ace/mode/word_list',
+    ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text', 'ace/mode/word_list_highlight_rules'],
+    (require: any, exports: any) => {
+      const oop = require('../lib/oop')
+      const TextMode = require('./text').Mode
+      const WordListHighlightRules = require('./word_list_highlight_rules').WordListHighlightRules
+
+      const Mode = function (this: any) {
+        TextMode.call(this)
+        this.HighlightRules = WordListHighlightRules
+      }
+
+      oop.inherits(Mode, TextMode)
+
+      ;(function (this: any) {
+        this.$id = 'ace/mode/word_list'
+      }).call(Mode.prototype)
+
+      exports.Mode = Mode
+    },
+  )
+}
+
 ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
 ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
 ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
@@ -555,4 +605,5 @@ ace.config.setModuleUrl('ace/snippets/css', snippertsCssUrl)
 ace.config.setModuleUrl('ace/snippets/ini', snippertsIniUrl)
 
 registerJinja2Mode()
+registerWordListMode()
 ace.require('ace/ext/language_tools')

src/views/system/WordsView.vue

@@ -2,11 +2,13 @@
 import { useToast } from 'vue-toastification'
 import api from '@/api'
 import { useI18n } from 'vue-i18n'
+import { useTheme } from 'vuetify'
 
 const Draggable = defineAsyncComponent(() => import('vuedraggable').then(module => module.default))
 
 const { t } = useI18n()
 const $toast = useToast()
+const { global: globalTheme } = useTheme()
 
 type TextSectionKey = 'identifiers' | 'releaseGroups' | 'customization' | 'excludeWords'
 type WordSectionKey = TextSectionKey | 'episodeRules'
@@ -44,6 +46,16 @@ const activeSection = ref<WordSectionKey>('identifiers')
 const expandedHelp = ref<string | null>(null)
 const saving = ref(false)
 
+const textEditorTheme = computed(() => (globalTheme.current.value.dark ? 'github_dark' : 'github_light_default'))
+const textEditorOptions = {
+  fontSize: 13.6,
+  highlightActiveLine: false,
+  scrollPastEnd: 0,
+  showGutter: false,
+  showPrintMargin: false,
+  tabSize: 2,
+}
+
 const savedTextValues = reactive<Record<TextSectionKey, string>>({
   identifiers: '',
   releaseGroups: '',
@@ -474,7 +486,21 @@ onMounted(() => {
               <span>{{ t('setting.words.entryCount', { count: activeSectionCount }) }}</span>
             </div>
 
+            <VAceEditor
+              v-if="activeSection === 'identifiers'"
+              v-model:value="activeTextValue"
+              lang="word_list"
+              :theme="textEditorTheme"
+              :options="textEditorOptions"
+              :placeholder="activeTextPlaceholder"
+              :print-margin="false"
+              :min-lines="11"
+              :max-lines="11"
+              wrap
+              class="words-text-editor"
+            />
             <VTextarea
+              v-else
               v-model="activeTextValue"
               class="words-textarea"
               :placeholder="activeTextPlaceholder"
@@ -842,6 +868,18 @@ onMounted(() => {
   background: transparent;
 }
 
+.words-text-editor {
+  overflow: hidden;
+  min-block-size: 15.8rem;
+  border: 1px solid rgba(var(--v-theme-on-surface), var(--v-border-opacity));
+  border-radius: var(--app-surface-radius);
+}
+
+.words-text-editor :deep(.ace_comment) {
+  color: rgb(var(--v-theme-success)) !important;
+  font-style: normal;
+}
+
 .words-inline-hint {
   display: flex;
   align-items: flex-start;
@@ -1085,6 +1123,10 @@ onMounted(() => {
     min-block-size: 18rem;
   }
 
+  .words-text-editor {
+    min-block-size: 18rem;
+  }
+
   .words-rule-toolbar {
     align-items: stretch;
     flex-direction: column;