fix: var highlight problme (#214)

web/app/components/app/configuration/features/chat-group/opening-statement/index.tsx

@@ -56,10 +56,11 @@ const OpeningStatement: FC<IOpeningStatementProps> = ({
   }, [value])
 
   const coloredContent = (tempValue || '')
-    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
-    .replace(/\n/g, '<br />')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
+    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
+    .replace(/\n/g, '<br />')
+    
 
 
   const handleEdit = () => {

web/app/components/base/block-input/index.tsx

@@ -68,10 +68,11 @@ const BlockInput: FC<IBlockInputProps> = ({
   })
 
   const coloredContent = (currentValue || '')
-    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
-    .replace(/\n/g, '<br />')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
+    .replace(regex, varHighlightHTML({ name: '$1' })) // `<span class="${highLightClassName}">{{$1}}</span>`
+    .replace(/\n/g, '<br />')
+    
 
   // Not use useCallback. That will cause out callback get old data.
   const handleSubmit = () => {