Applied custom editor color rules (#384)

* Add flow validation and highlighting support in the editor

* Refactor editor to use Monaco react type definitions for improved type safety

Author: stijnpotters1

pnpm-lock.yaml

@@ -192,6 +192,21 @@ body {
   background: rgba(34, 197, 94, 0.08) !important;
 }
 
+.monaco-flow-attribute {
+  color: #a8a8a8 !important;
+  font-style: italic !important;
+}
+
+.monaco-flow-attribute-value {
+  color: #a8a8a8 !important;
+  font-style: italic !important;
+}
+
+.dark .monaco-flow-attribute,
+.dark .monaco-flow-attribute-value {
+  color: #808080 !important;
+}
+
 :root {
   /* Allotment Styling */
   --focus-border: var(--color-brand);

src/main/frontend/app/app.css

@@ -1,5 +1,9 @@
 import RulerCrossPenIcon from '/icons/solar/Ruler Cross Pen.svg?react'
 import Editor, { type Monaco, type OnMount } from '@monaco-editor/react'
+type ITextModel = Monaco['editor']['ITextModel']
+type FindMatch = Monaco['editor']['FindMatch']
+type IModelDeltaDecoration = Monaco['editor']['IModelDeltaDecoration']
+type IEditorDecorationsCollection = Monaco['editor']['IEditorDecorationsCollection']
 import clsx from 'clsx'
 import XsdFeatures from 'monaco-xsd-code-completion/esm/XsdFeatures'
 import 'monaco-xsd-code-completion/src/style.css'
@@ -111,7 +115,6 @@ function mapToValidationErrors(rawErrors: readonly XMLValidationError[], model:
 
   return rawErrors
     .map((e) => {
-      // Use the reported line number, capped to the model
       const lineNumber = Math.max(1, Math.min(e.loc?.lineNumber ?? 1, totalLines))
       const { startColumn, endColumn } = findErrorRange(model.getLineContent(lineNumber), e.message)
       return { message: e.message, lineNumber, startColumn, endColumn }
@@ -159,6 +162,72 @@ function isConfigurationFile(fileExtension: string) {
   return fileExtension === 'xml'
 }
 
+async function validateFlow(content: string, model: ITextModel): Promise<ValidationError[]> {
+  const flowFragment = extractFlowElements(content)
+  if (!flowFragment) return []
+
+  const wrapped = wrapFlowXml(flowFragment)
+  const startLine = findFlowElementsStartLine(content)
+
+  const flowResult = await validateXML({
+    xml: [{ fileName: 'flow.xml', contents: wrapped }],
+    schema: [{ fileName: 'flowconfig.xsd', contents: flowXsd }],
+  })
+
+  return mapToValidationErrors(flowResult.errors, model).map((err) => ({
+    ...err,
+    lineNumber: err.lineNumber + startLine,
+    startColumn: 1,
+    endColumn: model.getLineLength(err.lineNumber + startLine),
+  }))
+}
+
+async function validateConfiguration(content: string, xsd: string, model: ITextModel): Promise<ValidationError[]> {
+  const result = await validateXML({
+    xml: [{ fileName: 'config.xml', contents: content }],
+    schema: [{ fileName: 'FrankConfig.xsd', contents: xsd }],
+  })
+
+  if (!result.valid && result.errors.length === 0) {
+    return [notWellFormedError(model)]
+  }
+
+  const filtered = result.errors.filter(
+    (e) => !e.message.includes('{urn:frank-flow}') && !e.message.includes('Skipping attribute use prohibition'),
+  )
+
+  return mapToValidationErrors(filtered, model)
+}
+
+/**
+ * Maps a single Monaco regex match to decoration objects.
+ */
+function mapMatchToDecorations(match: FindMatch): IModelDeltaDecoration[] {
+  const keyText = match.matches![1]
+  const valueText = match.matches![3]
+
+  return [
+    {
+      range: {
+        startLineNumber: match.range.startLineNumber,
+        startColumn: match.range.startColumn,
+        endLineNumber: match.range.startLineNumber,
+        endColumn: match.range.startColumn + keyText.length,
+      },
+      options: { inlineClassName: 'monaco-flow-attribute' },
+    },
+    {
+      range: {
+        startLineNumber: match.range.startLineNumber,
+        startColumn: match.range.endColumn - valueText.length,
+        endLineNumber: match.range.startLineNumber,
+        endColumn: match.range.endColumn,
+      },
+      options: { inlineClassName: 'monaco-flow-attribute-value' },
+    },
+  ]
+}
+
 export default function CodeEditor() {
   const theme = useTheme()
   const project = useProjectStore.getState().project
@@ -173,6 +242,7 @@ export default function CodeEditor() {
   const monacoReference = useRef<Monaco | null>(null)
   const xsdContentRef = useRef<string | null>(null)
   const errorDecorationsRef = useRef<{ clear: () => void } | null>(null)
+  const flowDecorationsRef = useRef<IEditorDecorationsCollection | null>(null)
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const savedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const validationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -195,6 +265,30 @@ export default function CodeEditor() {
 
   const isDiffTab = activeTab.type === 'diff'
 
+  const applyFlowHighlighter = useCallback(() => {
+    const editor = editorReference.current
+    const model = editor?.getModel()
+
+    if (!editor || !model || fileLanguage !== 'xml') return
+
+    const matches = model.findMatches(
+      String.raw`\b(xmlns:flow|flow:[\w-]+)(\s*=\s*)("[^"]*"|'[^']*')`,
+      false,
+      true,
+      false,
+      null,
+      true,
+    )
+
+    const decorations = matches.flatMap((match) => mapMatchToDecorations(match))
+
+    if (flowDecorationsRef.current) {
+      flowDecorationsRef.current.set(decorations)
+    } else {
+      flowDecorationsRef.current = editor.createDecorationsCollection(decorations)
+    }
+  }, [fileLanguage])
+
   const performSave = useCallback(
     (content?: string) => {
       if (!project || !activeTabFilePath || isDiffTab) return
@@ -292,64 +386,27 @@ export default function CodeEditor() {
 
   const runSchemaValidation = useCallback(
     async (content: string) => {
-      const monaco = monacoReference.current
       const editor = editorReference.current
       const xsdContent = xsdContentRef.current
-      if (!monaco || !editor || !xsdContent) return
+      if (!editor || !xsdContent) return
 
       const validationId = ++validationCounterRef.current
+      const model = editor.getModel() as ITextModel
+      if (!model) return
 
       try {
-        const model = editor.getModel()
-        if (!model) return
-
-        const flowFragment = extractFlowElements(content)
-        let flowErrors: ValidationError[] = []
-
-        if (flowFragment) {
-          const wrapped = wrapFlowXml(flowFragment)
-          const startLine = findFlowElementsStartLine(content)
-
-          const flowResult = await validateXML({
-            xml: [{ fileName: 'flow.xml', contents: wrapped }],
-            schema: [{ fileName: 'flowconfig.xsd', contents: flowXsd }],
-          })
-
-          // Map errors and offset the line numbers
-          flowErrors = mapToValidationErrors(flowResult.errors, model).map((errorInformation) => ({
-            ...errorInformation,
-            lineNumber: errorInformation.lineNumber + startLine, // shift relative to full file
-            startColumn: 1,
-            endColumn: model.getLineLength(errorInformation.lineNumber + startLine),
-          }))
-        }
-        const result = await validateXML({
-          xml: [{ fileName: 'config.xml', contents: content }],
-          schema: [{ fileName: 'FrankConfig.xsd', contents: xsdContent }],
-        })
+        const [flowErrors, frankErrors] = await Promise.all([
+          validateFlow(content, model),
+          validateConfiguration(content, xsdContent, model),
+        ])
 
         if (validationId !== validationCounterRef.current) return
 
-        if (!result.valid && result.errors.length === 0) {
-          applyValidationDecorations([notWellFormedError(model)])
-          return
-        }
-
-        // Filter out errors mentioning the flow namespace
-        const filteredErrors = result.errors.filter(
-          (error) =>
-            !error.message.includes('{urn:frank-flow}') &&
-            !error.message.includes('Skipping attribute use prohibition'), // This gets prompted by flowelements being present in the xml, harmless so we filter it out
-        )
-        const frankErrors = mapToValidationErrors(filteredErrors, model)
-
-        // Then merge the FlowErrors and the FrankErrors
         applyValidationDecorations([...frankErrors, ...flowErrors])
       } catch {
-        if (validationId !== validationCounterRef.current) return
-        const model = editor.getModel()
-        if (!model) return
-        applyValidationDecorations([notWellFormedError(model)])
+        if (validationId === validationCounterRef.current) {
+          applyValidationDecorations([notWellFormedError(model)])
+        }
       }
     },
     [applyValidationDecorations],
@@ -391,6 +448,8 @@ export default function CodeEditor() {
     monacoReference.current = monacoInstance
     setEditorMounted(true)
 
+    applyFlowHighlighter()
+
     editor.addAction({
       id: 'save-file',
       label: 'Save File',
@@ -428,7 +487,6 @@ export default function CodeEditor() {
     return useEditorTabStore.subscribe(
       (state) => state.activeTabFilePath,
       (newActiveTab, oldActiveTab) => {
-        if (oldActiveTab && oldActiveTab !== newActiveTab) flushPendingSave()
         if (oldActiveTab && oldActiveTab !== newActiveTab) {
           const currentEditor = editorReference.current
           if (currentEditor) {
@@ -501,6 +559,10 @@ export default function CodeEditor() {
       errorDecorationsRef.current.clear()
       errorDecorationsRef.current = null
     }
+    // Also clear flow decorations when switching files
+    if (flowDecorationsRef.current) {
+      flowDecorationsRef.current.set([])
+    }
     const monaco = monacoReference.current
     const editor = editorReference.current
     if (monaco && editor) {
@@ -512,7 +574,8 @@ export default function CodeEditor() {
   useEffect(() => {
     if (!fileContent || !xsdLoaded || isDiffTab || fileLanguage !== 'xml') return
     runSchemaValidation(fileContent)
-  }, [fileContent, xsdLoaded, isDiffTab, runSchemaValidation, fileLanguage])
+    applyFlowHighlighter() // Refresh highlighter when schema is loaded or content changes
+  }, [fileContent, xsdLoaded, isDiffTab, runSchemaValidation, fileLanguage, applyFlowHighlighter])
 
   useEffect(() => {
     if (!fileContent || !activeTabFilePath || !editorReference.current || isDiffTab) return
@@ -635,12 +698,15 @@ export default function CodeEditor() {
               <div className="h-full">
                 <Editor
                   language={fileLanguage}
-                  theme={`vs-${theme}`}
+                  theme={theme === 'dark' ? 'vs-dark' : 'vs'}
                   value={fileContent}
                   onMount={handleEditorMount}
                   onChange={(value) => {
                     scheduleSave()
-                    if (value && fileLanguage === 'xml') scheduleSchemaValidation(value)
+                    if (value && fileLanguage === 'xml') {
+                      scheduleSchemaValidation(value)
+                      applyFlowHighlighter() // Real-time highlight updates
+                    }
                   }}
                   options={{ automaticLayout: true, quickSuggestions: false }}
                 />

src/main/frontend/app/routes/editor/editor.tsx

@@ -591,7 +591,7 @@ function FlowCanvas() {
     addNodeAtPosition(position, parsedData.name)
   }
 
-  const onDragEnd = (event: React.DragEvent) => {
+  const onDragEnd = () => {
     setDraggedName(null)
     setParentId(null)
   }