fix: try fixing caret misplacement

src/components/PlainTextFormModal.tsx

@@ -6,7 +6,7 @@ import { forwardRef, useImperativeHandle, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { z } from 'zod'
 
-import { EDITOR_OPTIONS, EDITOR_THEME_DARK, EDITOR_THEME_LIGHT } from '~/constants'
+import { EDITOR_OPTIONS, EDITOR_THEME_DARK, EDITOR_THEME_LIGHT } from '~/constants/editor'
 import { colorSchemeAtom } from '~/store'
 
 import { FormActions } from './FormActions'

src/constants/editor.ts

@@ -0,0 +1,103 @@
+import { EditorProps } from '@monaco-editor/react'
+import { languages } from 'monaco-editor'
+
+export const EDITOR_THEME_DARK = 'vs-dark'
+export const EDITOR_THEME_LIGHT = 'github'
+
+export const EDITOR_OPTIONS: EditorProps['options'] = {
+  fontSize: 14,
+  fontWeight: 'bold',
+  fontFamily: 'monospace',
+  'semanticHighlighting.enabled': true,
+  lineHeight: 1.6,
+  minimap: {
+    enabled: false,
+  },
+  scrollBeyondLastLine: false,
+  renderWhitespace: 'selection',
+  cursorBlinking: 'solid',
+  formatOnPaste: true,
+  insertSpaces: true,
+  tabSize: 2,
+  lineNumbers: 'off',
+  padding: {
+    top: 8,
+    bottom: 8,
+  },
+}
+
+export const EDITOR_LANGUAGE_ROUTINGA: languages.IMonarchLanguage = {
+  // set defaultToken as `invalid` to turn on debug mode
+  // defaultToken: 'invalid',
+  ignoreCase: false,
+  keywords: [
+    'dip',
+    'direct',
+    'domain',
+    'dport',
+    'fallback',
+    'geoip',
+    'must_rules',
+    'geosite',
+    'ipversion',
+    'l4proto',
+    'mac',
+    'pname',
+    'qname',
+    'request',
+    'response',
+    'routing',
+    'sip',
+    'sport',
+    'tcp',
+    'udp',
+    'upstream',
+  ],
+
+  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+  symbols: /[->&!:,]+/,
+
+  operators: ['&&', '!'],
+
+  tokenizer: {
+    root: [
+      [/@[a-zA-Z]\w*/, 'tag'],
+      [/[a-zA-Z]\w*/, { cases: { '@keywords': 'keyword', '@default': 'identifier' } }],
+
+      { include: '@whitespace' },
+
+      [/[{}()]/, '@brackets'],
+
+      [/@symbols/, { cases: { '@operators': 'operator', '@default': '' } }],
+
+      [/\d+/, 'number'],
+
+      [/[,:]/, 'delimiter'],
+
+      [/"([^"\\]|\\.)*$/, 'string.invalid'],
+      [/'([^'\\]|\\.)*$/, 'string.invalid'],
+      [/"/, 'string', '@string_double'],
+      [/'/, 'string', '@string_single'],
+    ],
+
+    string_double: [
+      [/[^\\"]+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/"/, 'string', '@pop'],
+    ],
+
+    string_single: [
+      [/[^\\']+/, 'string'],
+      [/@escapes/, 'string.escape'],
+      [/\\./, 'string.escape.invalid'],
+      [/'/, 'string', '@pop'],
+    ],
+
+    whitespace: [
+      [/[ \t\r\n]+/, 'white'],
+      [/#.*$/, 'comment'],
+    ],
+  },
+}

src/constants/index.ts

@@ -1,6 +1,4 @@
-import { EditorProps } from '@monaco-editor/react'
 import { TFunction } from 'i18next'
-import { languages } from 'monaco-editor'
 import { z } from 'zod'
 
 import { GlobalInput, Policy } from '~/schemas/gql/graphql'
@@ -188,106 +186,6 @@ export enum RuleType {
   group = 'group',
 }
 
-export const EDITOR_THEME_DARK = 'vs-dark'
-export const EDITOR_THEME_LIGHT = 'github'
-
-export const EDITOR_OPTIONS: EditorProps['options'] = {
-  fontSize: 14,
-  fontWeight: 'bold',
-  fontFamily: 'Source Code Pro',
-  'semanticHighlighting.enabled': true,
-  lineHeight: 1.6,
-  minimap: {
-    enabled: false,
-  },
-  scrollBeyondLastLine: false,
-  renderWhitespace: 'selection',
-  cursorBlinking: 'solid',
-  formatOnPaste: true,
-  insertSpaces: true,
-  tabSize: 2,
-  lineNumbers: 'off',
-  padding: {
-    top: 8,
-    bottom: 8,
-  },
-}
-
-export const EDITOR_LANGUAGE_ROUTINGA: languages.IMonarchLanguage = {
-  // set defaultToken as `invalid` to turn on debug mode
-  // defaultToken: 'invalid',
-  ignoreCase: false,
-  keywords: [
-    'dip',
-    'direct',
-    'domain',
-    'dport',
-    'fallback',
-    'geoip',
-    'geosite',
-    'ipversion',
-    'l4proto',
-    'mac',
-    'pname',
-    'qname',
-    'request',
-    'response',
-    'routing',
-    'sip',
-    'sport',
-    'tcp',
-    'udp',
-    'upstream',
-  ],
-
-  escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-
-  symbols: /[->&!:,]+/,
-
-  operators: ['&&', '!'],
-
-  tokenizer: {
-    root: [
-      [/@[a-zA-Z]\w*/, 'tag'],
-      [/[a-zA-Z]\w*/, { cases: { '@keywords': 'keyword', '@default': 'identifier' } }],
-
-      { include: '@whitespace' },
-
-      [/[{}()]/, '@brackets'],
-
-      [/@symbols/, { cases: { '@operators': 'operator', '@default': '' } }],
-
-      [/\d+/, 'number'],
-
-      [/[,:]/, 'delimiter'],
-
-      [/"([^"\\]|\\.)*$/, 'string.invalid'],
-      [/'([^'\\]|\\.)*$/, 'string.invalid'],
-      [/"/, 'string', '@string_double'],
-      [/'/, 'string', '@string_single'],
-    ],
-
-    string_double: [
-      [/[^\\"]+/, 'string'],
-      [/@escapes/, 'string.escape'],
-      [/\\./, 'string.escape.invalid'],
-      [/"/, 'string', '@pop'],
-    ],
-
-    string_single: [
-      [/[^\\']+/, 'string'],
-      [/@escapes/, 'string.escape'],
-      [/\\./, 'string.escape.invalid'],
-      [/'/, 'string', '@pop'],
-    ],
-
-    whitespace: [
-      [/[ \t\r\n]+/, 'white'],
-      [/#.*$/, 'comment'],
-    ],
-  },
-}
-
 export const v2raySchema = z.object({
   ps: z.string().default(''),
   add: z.string().url().nonempty().or(z.string().ip().nonempty()),

src/main.tsx

@@ -17,7 +17,7 @@ import ReactDOM from 'react-dom/client'
 import { App } from '~/App'
 import { i18nInit } from '~/i18n'
 
-import { EDITOR_LANGUAGE_ROUTINGA, EDITOR_THEME_LIGHT } from './constants'
+import { EDITOR_LANGUAGE_ROUTINGA, EDITOR_THEME_LIGHT } from './constants/editor'
 
 dayjs.extend(duration)
 

src/pages/Experiment.tsx

@@ -44,7 +44,8 @@ import { PlainTextFormModal } from '~/components/PlainTextFormModal'
 import { RenameFormModal, RenameFormModalRef } from '~/components/RenameFormModal'
 import { Section } from '~/components/Section'
 import { SimpleCard } from '~/components/SimpleCard'
-import { DialMode, DraggableResourceType, EDITOR_OPTIONS, LogLevel, RuleType } from '~/constants'
+import { DialMode, DraggableResourceType, LogLevel, RuleType } from '~/constants'
+import { EDITOR_OPTIONS } from '~/constants/editor'
 import { Policy } from '~/schemas/gql/graphql'
 
 export const ExperimentPage = () => {