@vertesia/ui 1.5.0-dev.20260722.120446Z → 1.5.0-dev.20260804.124748Z

package/src/widgets/monacoEditor/MonacoEditor.tsx

@@ -40,6 +40,39 @@ export interface IEditorApi {
     setValue(value?: string): void;
 }
 
+/**
+ * Registry of JSON schemas keyed by model path. Monaco's JSON language service is configured
+ * globally (per language, not per editor), so every mounted editor's schema must be re-applied
+ * together — each entry is scoped to its own model via `fileMatch`, so editors never see each
+ * other's schema.
+ */
+const jsonSchemaRegistry = new Map<string, object>();
+let jsonSchemaModelCounter = 0;
+
+/** The JSON language defaults API — present at runtime once monaco's JSON contribution is
+ * loaded, but typed as a deprecated stub in the bundled monaco-editor typings. */
+interface JsonLanguageDefaults {
+    setDiagnosticsOptions(options: {
+        validate?: boolean;
+        enableSchemaRequest?: boolean;
+        schemas?: { uri: string; fileMatch?: string[]; schema?: object }[];
+    }): void;
+}
+
+function applyJsonSchemas(monacoInstance: typeof import('monaco-editor')) {
+    const jsonDefaults = (monacoInstance.languages as unknown as { json?: { jsonDefaults?: JsonLanguageDefaults } })
+        .json?.jsonDefaults;
+    jsonDefaults?.setDiagnosticsOptions({
+        validate: true,
+        enableSchemaRequest: false,
+        schemas: Array.from(jsonSchemaRegistry.entries()).map(([modelPath, schema]) => ({
+            uri: `vertesia://schemas/${encodeURIComponent(modelPath)}`,
+            fileMatch: [modelPath],
+            schema,
+        })),
+    });
+}
+
 // Define Monaco ViewUpdate interface
 export interface ViewUpdate {
     docChanged: boolean;
@@ -80,6 +113,12 @@ interface MonacoEditorProps {
     onMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) => void;
     defaultValue?: string;
     useCustomFolding?: boolean;
+    /**
+     * JSON Schema applied to this editor's content (language must be 'json'). Drives
+     * completion, hover documentation, and validation squiggles. Scoped to this editor
+     * instance only — other JSON editors keep their own (or no) schema.
+     */
+    jsonSchema?: object;
 }
 
 export function MonacoEditor({
@@ -95,10 +134,17 @@ export function MonacoEditor({
     onMount,
     defaultValue,
     useCustomFolding = false,
+    jsonSchema,
 }: MonacoEditorProps) {
     const [editorValue, setEditorValue] = useState(value || defaultValue || '');
     const editorInstanceRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
     const monacoInstanceRef = useRef<typeof import('monaco-editor') | null>(null);
+    // Stable per-instance model path: required to scope a jsonSchema to THIS editor's model.
+    // Callers may pass an explicit `path`; otherwise one is generated when a schema is set.
+    const [generatedPath] = useState(() =>
+        jsonSchema ? `inmemory://vertesia/json/${++jsonSchemaModelCounter}.json` : undefined,
+    );
+    const modelPath = path ?? generatedPath;
     const { theme } = useTheme();
     const resolvedTheme =
         theme === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme;
@@ -182,6 +228,11 @@ export function MonacoEditor({
             editorInstanceRef.current = editor;
             monacoInstanceRef.current = monacoInstance;
 
+            if (jsonSchema && modelPath && language === 'json') {
+                jsonSchemaRegistry.set(modelPath, jsonSchema);
+                applyJsonSchemas(monacoInstance);
+            }
+
             if (useCustomFolding) {
                 registerCustomFoldingProviders(monacoInstance);
             }
@@ -212,11 +263,29 @@ export function MonacoEditor({
             // Call custom onMount if provided
             onMount?.(editor, monacoInstance);
         },
-        [onMount, resolvedTheme, useCustomFolding, foldAllCodeBlocks],
+        [onMount, resolvedTheme, useCustomFolding, foldAllCodeBlocks, jsonSchema, modelPath, language],
     );
 
-    // Update editor value when prop changes from outside
+    // Unregister this editor's schema on unmount so the global JSON diagnostics config
+    // doesn't accumulate schemas for dead models.
+    useEffect(() => {
+        return () => {
+            if (jsonSchema && modelPath && jsonSchemaRegistry.delete(modelPath) && monacoInstanceRef.current) {
+                applyJsonSchemas(monacoInstanceRef.current);
+            }
+        };
+    }, [jsonSchema, modelPath]);
+
+    // Apply external `value`/`defaultValue` changes to the model — but NEVER while the user is
+    // actively typing. If the editor has focus, an incoming value is almost always a stale echo of
+    // this editor's own (possibly debounced or reformatted) onChange output flowing back in through
+    // a controlled `value` prop. Re-applying it would jump the caret and drop the characters typed
+    // during the round-trip. We skip while focused; genuine external updates land once the editor is
+    // blurred. Explicit programmatic updates go through the editor ref (`setValue`) and are exempt.
     useEffect(() => {
+        if (editorInstanceRef.current?.hasTextFocus()) {
+            return;
+        }
         setEditorValue((currentValue) => {
             if (effectiveValue === currentValue) {
                 return currentValue;
@@ -228,9 +297,11 @@ export function MonacoEditor({
         });
     }, [effectiveValue]);
 
-    // Re-fold code blocks when value prop changes externally
+    // Re-fold code blocks when the value changes externally — same focus guard, so folding never
+    // moves the selection out from under an actively typing user.
     useEffect(() => {
         if (!effectiveValue || !useCustomFolding || !editorInstanceRef.current || !monacoInstanceRef.current) return;
+        if (editorInstanceRef.current.hasTextFocus()) return;
         const editor = editorInstanceRef.current;
         const monacoInstance = monacoInstanceRef.current;
         const timer = setTimeout(() => foldAllCodeBlocks(editor, monacoInstance), 300);
@@ -259,7 +330,7 @@ export function MonacoEditor({
         renderValidationDecorations: 'on', // Show error squiggles
         renderLineHighlight: 'line', // Highlight entire line for errors
         hover: {
-            enabled: true,
+            enabled: 'on',
             delay: 100,
         }, // Enable hover for error messages
         quickSuggestions: {
@@ -277,13 +348,18 @@ export function MonacoEditor({
                 height="100%"
                 theme={resolvedTheme === 'dark' ? 'vs-dark' : 'light'}
                 language={language}
-                path={path}
-                value={editorValue}
+                path={modelPath}
                 onChange={handleEditorChange}
                 onMount={handleEditorDidMount}
                 beforeMount={beforeMount}
                 options={defaultOptions}
-                defaultValue={defaultValue || ''}
+                // Uncontrolled: seed the initial content once via `defaultValue` and never bind a
+                // reactive `value`. @monaco-editor/react re-applies a changed `value` prop through
+                // `executeEdits(..., forceMoveMarkers: true)` whenever it differs from the live
+                // model, snapping the caret to the END of the content — the cursor jump we are
+                // eliminating whenever a caller feeds its own onChange output back into `value`.
+                // All external updates instead flow through the focus-guarded sync effect above.
+                defaultValue={effectiveValue}
             />
         </div>
     );

package/src/widgets/xml-viewer/hooks/useXMLViewer.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { parseXML } from './useXMLViewer';
+
+describe('parseXML', () => {
+    it('parses valid XML', () => {
+        const result = parseXML('<root><item id="1">value</item></root>');
+
+        expect(result.valid).toBe(true);
+        expect(result.json).not.toBeNull();
+    });
+
+    it('allows parsererror elements in valid XML content', () => {
+        const result = parseXML('<root><parsererror>expected content</parsererror></root>');
+
+        expect(result.valid).toBe(true);
+        expect(result.json).not.toBeNull();
+    });
+
+    it('rejects invalid XML', () => {
+        const result = parseXML('<root><item></root>');
+
+        expect(result.valid).toBe(false);
+        expect(result.json).toBeNull();
+        expect(result.errorMessage).toContain('Fail to parse:');
+    });
+});

package/src/widgets/xml-viewer/hooks/useXMLViewer.ts

@@ -1,5 +1,4 @@
 import { XMLParser } from 'fast-xml-parser';
-import { SyntaxValidator } from 'fast-xml-validator';
 import { useMemo } from 'react';
 import { ATTRIBUTE_CDATA, ATTRIBUTE_COMMENT } from '../constants';
 
@@ -13,24 +12,30 @@ const parser = new XMLParser({
     parseTagValue: false,
 });
 
-export default function useXMLViewer(xml: string) {
-    return useMemo(() => {
-        try {
-            const validationResult = SyntaxValidator.validate(xml);
-            if (validationResult !== true) {
-                throw new Error(validationResult.err.msg || 'Invalid XML!');
-            }
-
-            const json = parser.parse(xml);
+export function parseXML(xml: string) {
+    try {
+        const validationDocument = new DOMParser().parseFromString(xml, 'application/xml');
+        const parserError =
+            validationDocument.documentElement.localName === 'parsererror'
+                ? validationDocument.documentElement
+                : undefined;
+        if (parserError) {
+            throw new Error(parserError.textContent?.trim() || 'Invalid XML!');
+        }
 
-            if (typeof xml === 'string' && xml.trim().length > 0 && json.length === 0) {
-                throw new Error('Invalid XML!');
-            }
+        const json = parser.parse(xml);
 
-            return { json, valid: true };
-        } catch (e) {
-            const error = e as Error;
-            return { json: null, valid: false, errorMessage: `Fail to parse: ${error.message}` };
+        if (xml.trim().length > 0 && json.length === 0) {
+            throw new Error('Invalid XML!');
         }
-    }, [xml]);
+
+        return { json, valid: true };
+    } catch (error: unknown) {
+        const message = error instanceof Error ? error.message : String(error);
+        return { json: null, valid: false, errorMessage: `Fail to parse: ${message}` };
+    }
+}
+
+export default function useXMLViewer(xml: string) {
+    return useMemo(() => parseXML(xml), [xml]);
 }