diff --git a/src/ace-config.ts b/src/ace-config.ts index 39650f00..507d176a 100644 --- a/src/ace-config.ts +++ b/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') diff --git a/src/views/system/WordsView.vue b/src/views/system/WordsView.vue index 8625ac8a..a88e86c6 100644 --- a/src/views/system/WordsView.vue +++ b/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('identifiers') const expandedHelp = ref(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>({ identifiers: '', releaseGroups: '', @@ -474,7 +486,21 @@ onMounted(() => { {{ t('setting.words.entryCount', { count: activeSectionCount }) }} + { 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;