@vertesia/ui 0.24.0-dev.202601221707

package/src/widgets/codemirror/CodeMirrorEditor.tsx

@@ -0,0 +1,122 @@
+import debounce from 'debounce';
+import { RefObject, useEffect, useMemo, useRef } from 'react';
+
+import { Extension, Text } from '@codemirror/state';
+import { EditorView, ViewUpdate } from '@codemirror/view';
+import { useSafeLayoutEffect } from '@vertesia/ui/core';
+
+import { getSharedEditorState } from './CodemirrorStateSingleton';
+import { IEditorApi } from "./MonacoEditor.js";
+
+export class EditorApi implements IEditorApi {
+    constructor(public editor: EditorView) { }
+    setValue(value?: string) {
+        this.editor.dispatch({
+            changes: {
+                from: 0,
+                to: this.editor.state.doc.length,
+                insert: value || "",
+            },
+        });
+    }
+    getValue() {
+        return this.editor.state.doc.toString();
+    }
+}
+
+const customTheme = EditorView.theme({
+    "&": { fontSize: "14px", fontFamily: "monospace" },
+    ".cm-content": { fontFamily: "inherit" },
+    ".cm-scroller": { fontFamily: "inherit" },
+    ".cm-gutters": { backgroundColor: "transparent", color: "#ddd" },
+    ".cm-focused": { outline: "none" },
+    ".cm-cursor": {
+        borderLeft: "2px solid #808080",
+        borderLeftColor: "#808080",
+        animation: "blink 1.2s step-start infinite"
+    },
+    "@keyframes blink": { "50%": { opacity: 0 } }
+});
+
+const baseExtensions = [
+    customTheme,
+    EditorView.lineWrapping,
+];
+
+function updateListenerExtension(cb: (update: ViewUpdate) => void) {
+    return EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+            cb(update);
+        }
+    });
+};
+
+interface CodeMirrorEditorProps {
+    value?: string | Text;
+    className?: string;
+    editorRef?: RefObject<EditorApi | undefined>;
+    extensions: Extension;
+    onChange?: (update: ViewUpdate) => void;
+    debounceTimeout?: number; // use a value > 0 to debounce on change events
+}
+
+/**
+ * The className is only used on the first rendering - the editor class will not be updated if the property changes
+**/
+export function CodeMirrorEditor({ onChange, value, className, editorRef, extensions, debounceTimeout = 0 }: CodeMirrorEditorProps) {
+    const ref = useRef<HTMLDivElement | null>(null);
+
+    // the onChange property may change so we need to store it in a
+    // reference to be able to update it when it changes without
+    // re-registering the listener on codemirror since codemirror can only register
+    // listeners at creation
+    const onChangeRef = useRef<(update: ViewUpdate) => void | undefined>(undefined);
+    useEffect(() => {
+        if (onChange) {
+            onChangeRef.current = debounceTimeout > 0
+                ? debounce(onChange, debounceTimeout)
+                : onChange;
+            return () => {
+                // WE MUST NOT CANCEL THE DEBOUNCE even if we unset the onChange impl
+                // otherwise some updates will never happens
+                onChangeRef.current = undefined;
+            };
+        }
+    }, [onChange, debounceTimeout]);
+
+    const component = useMemo(() => <div ref={ref} className={className} />, [className]);
+
+    useSafeLayoutEffect(() => {
+        if (ref.current) {
+            let actualExtensions = [...baseExtensions, updateListenerExtension((update) => {
+                onChangeRef.current?.(update);
+            })];
+            if (Array.isArray(extensions)) {
+                actualExtensions = actualExtensions.concat(extensions);
+            } else if (extensions) {
+                actualExtensions.push(extensions);
+            }
+
+            const sharedState = getSharedEditorState(value, actualExtensions);
+
+            const editor = new EditorView({
+                state: sharedState,
+                parent: ref.current,
+            });
+
+            const api = new EditorApi(editor);
+            if (editorRef) {
+                editorRef.current = api;
+            }
+
+            return () => {
+                editor.destroy();
+                if (editorRef) {
+                    editorRef.current = undefined;
+                }
+            };
+        }
+    }, [component, extensions]);
+
+    return component;
+}

package/src/widgets/codemirror/CodemirrorStateSingleton.tsx

@@ -0,0 +1,39 @@
+import { EditorState, Text } from '@codemirror/state';
+
+let stateInstance: EditorState | null = null;
+
+/**
+ * Returns a shared instance of CodeMirror's EditorState.
+ * If the instance doesn't exist, it creates one with the given initial content.
+ *
+ * @param initialDoc - The initial content for the editor, either as a `string` or `Text`.
+ * @param extensions - Optional extensions to be applied to the editor.
+ * @returns The shared EditorState instance.
+**/
+export const getSharedEditorState = (
+    initialDoc: string | Text = "",
+    extensions: any[] = []
+): EditorState => {
+    const doc = typeof initialDoc === "string" ? Text.of(initialDoc.split("\n")) : initialDoc;
+
+    if (!stateInstance) {
+        stateInstance = EditorState.create({
+            doc,
+            extensions,
+        });
+    } else if (stateInstance.doc.toString() !== doc.toString()) {
+        stateInstance = EditorState.create({
+            doc,
+            extensions,
+        });
+    }
+
+    return stateInstance;
+};
+
+/**
+ * Resets the singleton instance (useful for testing or reinitializing).
+**/
+export const resetSharedEditorState = () => {
+    stateInstance = null;
+};

package/src/widgets/codemirror/MonacoEditor.tsx

@@ -0,0 +1,200 @@
+import { Editor } from '@monaco-editor/react';
+import { useTheme } from '@vertesia/ui/core';
+import debounce from 'debounce';
+import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type * as monaco from 'monaco-editor';
+
+
+// Define our own editor API interface
+// todo: remove code-mirror dependency after migrating all editors to monaco, and then remove this export
+export interface IEditorApi {
+    getValue(): string;
+    setValue(value?: string): void;
+}
+
+// Define Monaco ViewUpdate interface
+interface ViewUpdate {
+    docChanged: boolean;
+    state: {
+        doc: {
+            toString(): string;
+            length: number;
+        };
+    };
+}
+
+export class VEditorApi implements IEditorApi {
+    constructor(private VgetValue: () => string, private VsetValue: (value: string) => void) { }
+
+    getValue() {
+        return this.VgetValue();
+    }
+
+    setValue(value?: string) {
+        this.VsetValue(value || '');
+    }
+}
+
+interface MonacoEditorProps {
+    value?: string;
+    className?: string;
+    editorRef?: RefObject<IEditorApi | undefined>;
+    language?: string;
+    onChange?: (update: ViewUpdate) => void;
+    debounceTimeout?: number;
+    theme?: string;
+    options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    beforeMount?: (monaco: typeof import('monaco-editor')) => void;
+    onMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
+    defaultValue?: string;
+}
+
+export function MonacoEditor({
+    onChange,
+    value = '',
+    className,
+    editorRef,
+    language = 'javascript',
+    debounceTimeout = 0,
+    options = {},
+    beforeMount,
+    onMount,
+    defaultValue
+}: MonacoEditorProps) {
+    const [editorValue, setEditorValue] = useState(value);
+    const editorInstanceRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const { theme } = useTheme();
+
+    const getValueRef = useRef(() => editorValue);
+    const setValueRef = useRef((newValue: string) => {
+        setEditorValue(newValue);
+        if (editorInstanceRef.current) {
+            editorInstanceRef.current.setValue(newValue);
+        }
+    });
+
+    useEffect(() => {
+        getValueRef.current = () => editorValue;
+    }, [editorValue]);
+
+    useEffect(() => {
+        if (editorRef) {
+            editorRef.current = new VEditorApi(
+                () => getValueRef.current(),
+                (value: string) => setValueRef.current(value)
+            );
+        }
+        return () => {
+            if (editorRef) {
+                editorRef.current = undefined;
+            }
+        };
+    }, [editorRef]);
+
+    const debouncedOnChange = useMemo(() => {
+        if (!onChange) return undefined;
+
+        if (debounceTimeout > 0) {
+            return debounce((update: ViewUpdate) => onChange(update), debounceTimeout);
+        } else {
+            return onChange;
+        }
+    }, [onChange, debounceTimeout]);
+
+    const handleEditorChange = useCallback((newValue: string | undefined) => {
+        const actualValue = newValue || '';
+        setEditorValue(actualValue);
+
+        if (debouncedOnChange) {
+            const update = {
+                docChanged: true,
+                state: {
+                    doc: {
+                        toString: () => actualValue,
+                        length: actualValue.length
+                    }
+                }
+            } as unknown as ViewUpdate;
+            // Using type assertion through unknown to avoid complex type mocking
+
+            debouncedOnChange(update);
+        }
+    }, [debouncedOnChange]);
+
+    const handleEditorDidMount = useCallback((editor: monaco.editor.IStandaloneCodeEditor, monacoInstance: typeof import('monaco-editor')) => {
+        editorInstanceRef.current = editor;
+        // Update the setValue ref to use the actual editor instance
+        setValueRef.current = (newValue: string) => {
+            setEditorValue(newValue);
+            editor.setValue(newValue);
+        };
+
+        // Set up custom theme for better error line highlighting
+        monacoInstance.editor.defineTheme('errorLineTheme', {
+            base: theme === 'dark' ? 'vs-dark' : 'vs',
+            inherit: true,
+            rules: [],
+            colors: {
+                'editorError.background': '#ffebee',
+                'editorError.border': '#f44336',
+            },
+        });
+
+        monacoInstance.editor.setTheme('errorLineTheme');
+
+        // Call custom onMount if provided
+        onMount?.(editor);
+    }, [language, onMount, theme]);
+
+    // Update editor value when prop changes
+    useEffect(() => {
+        if (value !== editorValue) {
+            setEditorValue(value);
+            if (editorInstanceRef.current) {
+                editorInstanceRef.current.setValue(value);
+            }
+        }
+    }, [value]);
+
+    const defaultOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
+        fontSize: 14,
+        fontFamily: 'monospace',
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        wordWrap: 'on' as const,
+        lineNumbers: 'on' as const,
+        folding: false,
+        lineDecorationsWidth: 0,
+        lineNumbersMinChars: 3,
+        automaticLayout: true,
+        glyphMargin: true, // Enable better error reporting
+        renderValidationDecorations: 'on', // Show error squiggles
+        renderLineHighlight: 'line', // Highlight entire line for errors
+        hover: {
+            enabled: true,
+            delay: 100
+        }, // Enable hover for error messages
+        quickSuggestions: {
+            other: true,
+            comments: true,
+            strings: true
+        }, // Show problems panel information
+        ...options
+    };
+
+    return (
+        <div className={className}>
+            <Editor
+                height="100%"
+                theme={theme === 'dark' ? 'vs-dark' : 'light'}
+                language={language}
+                value={editorValue}
+                onChange={handleEditorChange}
+                onMount={handleEditorDidMount}
+                beforeMount={beforeMount}
+                options={defaultOptions}
+                defaultValue={defaultValue || ''}
+            />
+        </div>
+    );
+}

package/src/widgets/codemirror/index.ts

@@ -0,0 +1,6 @@
+
+export { CodeMirrorEditor } from "./CodeMirrorEditor.js"
+export type { EditorApi } from "./CodeMirrorEditor.js"
+
+export { MonacoEditor, VEditorApi } from "./MonacoEditor.js"
+export type { IEditorApi } from "./MonacoEditor.js"

package/src/widgets/form/Form.tsx

@@ -0,0 +1,180 @@
+
+import type { JSONSchemaObject } from "@vertesia/common";
+import { Button, FormItem } from "@vertesia/ui/core";
+import clsx from "clsx";
+import { Plus, Trash2 } from "lucide-react";
+import { ComponentType, ReactNode, SyntheticEvent, useState } from "react";
+import { FormContext, FormContextProvider, InputComponentProps, useForm } from "./FormContext.js";
+import { ManagedListProperty, ManagedObject, ManagedObjectBase, ManagedProperty, Node } from "./ManagedObject.js";
+import { Input } from "./inputs.js";
+
+interface FormProps {
+    object: ManagedObject;
+    components?: Record<string, ComponentType<InputComponentProps>>;
+    children?: ReactNode | ReactNode[];
+    onSubmit?: (data: JSONSchemaObject) => void;
+    onChange?: (prop: Node) => void;
+    disabled?: boolean;
+}
+export function Form({ object, components, onSubmit, children, onChange, disabled }: FormProps) {
+    const _onSubmit = (evt: SyntheticEvent) => {
+        evt.stopPropagation();
+        evt.preventDefault();
+        onSubmit && onSubmit(object.value);
+    }
+    object.observer = onChange;
+    return (
+        <FormContextProvider value={new FormContext(object, components || {}, disabled ?? false)}>
+            <form className="w-full" onSubmit={_onSubmit}>
+                {children}
+            </form>
+        </FormContextProvider >
+    )
+}
+
+function GeneratedFormFields() {
+    const ctx = useForm();
+    return (
+        <div className='flex flex-col gap-4 w-full'>
+            {
+                ctx.object.properties.map(renderProperty)
+            }
+        </div>
+    )
+}
+
+export function GeneratedForm({ children, ...props }: FormProps) {
+    return (
+        <Form {...props}>
+            <GeneratedFormFields />
+            {children}
+        </Form>
+    )
+}
+
+function renderProperty(prop: Node) {
+    if (prop.isList) {
+        return <ListField key={prop.name} object={prop as ManagedListProperty} />
+    } else if (prop.isObject) {
+        return <CompositeField key={prop.name} object={prop as ManagedObjectBase} />
+    } else {
+        return <ScalarField key={prop.name} object={prop as ManagedProperty} />
+    }
+}
+
+function renderItemProperty(prop: Node, editor?: string) {
+    if (prop.isList) {
+        return <ListField object={prop as ManagedListProperty} />
+    } else if (prop.isObject) {
+        return <CompositeField object={prop as ManagedObjectBase} />
+    } else {
+        return <ScalarField object={prop as ManagedProperty} editor={editor} />
+    }
+}
+
+interface ScalarFieldProps {
+    object: ManagedProperty;
+    inline?: boolean;
+    editor?: string; // if present overwrite the object schema editor
+}
+export function ScalarField({ object, editor, inline = false }: ScalarFieldProps) {
+    if (!editor) {
+        editor = object.schema.editor;
+    }
+    const { components, disabled } = useForm();
+    const Component = (editor && components[editor]) || Input;
+    const inputType = object.getInputType();
+    if (inputType === 'checkbox') {
+        inline = true;
+    }
+
+    const handleOnChange = (event: any) => {
+        if (disabled) return;
+        if (object.schema.isBoolean) {
+            object.value = event.target.checked;
+        } else if (object.schema.isNumber) {
+            object.value = parseFloat(event.target.value);
+        } else {
+            object.value = event.target.value;
+        }
+    }
+
+    if (object.isListItem) {
+        // List items don't need the FormItem wrapper (no label, description, etc.)
+        return <Component object={object} type={inputType} onChange={handleOnChange} disabled={disabled} />;
+    }
+
+    return (
+        <FormItem label={object.title} required={object.schema.isRequired} description={object.schema.description}
+            className={clsx('flex', inline ? 'flex-row items-center' : 'flex-col')}>
+            <Component object={object} type={inputType} onChange={handleOnChange} disabled={disabled} />
+        </FormItem>
+    )
+}
+
+interface ObjectFormProps {
+    object: ManagedObjectBase;
+}
+function CompositeField({ object }: ObjectFormProps) {
+    return (
+        <div className="flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 dark:border-l-slate-600">
+            {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
+            {
+                object.properties.map(renderProperty)
+            }
+        </div>
+    )
+}
+
+interface ListFieldProps {
+    object: ManagedListProperty;
+}
+function ListField({ object }: ListFieldProps) {
+    const [value, setValue] = useState<any[]>(object.value || []);
+    const { disabled } = useForm();
+
+    const addItem = () => {
+        if (disabled) return;
+        object.add();
+        setValue([...object.value]);
+    };
+
+    const deleteItem = (index: number) => {
+        if (disabled) return;
+        object.remove(index);
+        setValue([...object.value]);
+    };
+
+    return (
+        <div className="flex flex-col gap-4 my-4 py-2 pl-4 border-l-4 border-l-solid border-l-slate-100 darK:border-l-slate-600">
+            {!object.isListItem && <div className='text-gray-900 dark:text-gray-200 font-semibold'>{object.title}</div>}
+            {
+                object.items.map((item, index) => {
+                    return <ListItem key={`${index}-${value[index] ?? ''}`} object={item} list={object} onDelete={() => deleteItem(index)} disabled={disabled} />;
+                })
+            }
+            <div>
+                <Button variant='secondary' onClick={addItem} disabled={disabled}><Plus className="size-6" /> Add</Button>
+            </div>
+        </div>
+    )
+}
+
+interface ListItemProps {
+    list: ManagedListProperty;
+    object: Node & { index: number };
+    onDelete: () => void;
+    disabled?: boolean;
+}
+function ListItem({ list, object, onDelete, disabled }: ListItemProps) {
+    return (
+        <div className='flex gap-2 w-full'>
+            <div className="flex-1">
+                {
+                    renderItemProperty(object, list.schema.arraySchema.editor)
+                }
+            </div>
+            <Button variant='secondary' onClick={onDelete} disabled={disabled}><Trash2 className='size-4' /></Button>
+        </div>
+    )
+}

package/src/widgets/form/FormContext.ts

@@ -0,0 +1,41 @@
+import { ComponentType, createContext, useContext } from "react";
+import { ManagedObject, ManagedObjectBase, Node } from "./ManagedObject.js";
+
+const FieldSetContext = createContext<ManagedObjectBase | undefined>(undefined);
+const FieldSetContextProvider = FieldSetContext.Provider;
+
+export function useFieldSet() {
+    const ctx = useContext(FieldSetContext);
+    if (!ctx) {
+        throw new Error('useFieldSet must be used within a Form or FieldSet element');
+    }
+    return ctx;
+}
+
+export interface InputComponentProps {
+    object: Node;
+    type: string; // the editor/input type
+    onChange?: (event: any) => void;
+    disabled?: boolean;
+}
+export class FormContext {
+    constructor(public object: ManagedObject,
+        public components: Record<string, ComponentType<InputComponentProps>> = {},
+        public disabled: boolean = false) {
+    }
+
+}
+
+const _FormContext = createContext<FormContext | undefined>(undefined);
+
+export function useForm() {
+    const ctx = useContext(_FormContext);
+    if (!ctx) {
+        throw new Error('useForm must be used within a Form element');
+    }
+    return ctx;
+}
+
+const FormContextProvider = _FormContext.Provider;
+
+export { FieldSetContextProvider, FormContextProvider };