@coveord/plasma-mantine 52.18.0 → 52.19.0

package/dist/cjs/components/code-editor/CodeEditor.d.ts

@@ -1,6 +1,8 @@
 import { DefaultProps, InputWrapperBaseProps, Selectors } from '@mantine/core';
 import { FunctionComponent } from 'react';
-declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
+declare const useStyles: (params: {
+    error?: boolean;
+}, options?: import("@mantine/core").UseStylesOptions<string>) => {
     classes: {
         root: string;
         editor: string;

package/dist/cjs/components/code-editor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA6IzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;YAA0C,OAAO;;;;;;;;CAW7D,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoJzD,CAAC"}

package/dist/cjs/components/code-editor/CodeEditor.js

@@ -24,14 +24,18 @@ var _hooks1 = require("../../hooks");
 var _xml = require("./languages/xml");
 var _copyToClipboard = require("../copyToClipboard");
 var _search = require("./search");
-var useStyles = (0, _core.createStyles)(function(theme) {
+var useStyles = (0, _core.createStyles)(function(theme, param) {
+    var error = param.error;
     return {
         root: {},
         editor: {
             border: "1px solid ".concat(theme.colors.gray[2]),
             borderRadius: theme.defaultRadius,
             backgroundColor: theme.colorScheme === "light" ? theme.white : theme.black,
-            height: "100%"
+            height: "100%",
+            outlineColor: error ? theme.colors.red[6] : null,
+            outlineStyle: error ? "solid" : "none",
+            outlineWidth: "thin"
         }
     };
 });
@@ -63,7 +67,10 @@ var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _sliced_to_array._((0, _react1.useState)(false), 2), loaded = _useState[0], setLoaded = _useState[1];
-    var _useStyles = useStyles(), classes = _useStyles.classes, theme = _useStyles.theme;
+    var _useState1 = _sliced_to_array._((0, _react1.useState)(false), 2), containsError = _useState1[0], setContainsError = _useState1[1];
+    var _useStyles = useStyles({
+        error: containsError
+    }), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _sliced_to_array._((0, _hooks.useUncontrolled)({
         value: value,
         defaultValue: defaultValue,
@@ -120,6 +127,11 @@ var CodeEditor = function(props) {
             setLoaded(true);
         }
     }, []);
+    var handleValidate = function(markers) {
+        setContainsError(markers.some(function(marker) {
+            return marker.severity === _react.loader.__getMonacoInstance().MarkerSeverity.Error;
+        }));
+    };
     var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Input.Label, _object_spread_props._(_object_spread._({
         required: required
     }, labelProps), {
@@ -162,6 +174,7 @@ var CodeEditor = function(props) {
         pl: "xs",
         className: classes.editor,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default, {
+            onValidate: handleValidate,
             defaultLanguage: language,
             theme: theme.colorScheme === "light" ? "light" : "vs-dark",
             options: {

package/dist/cjs/components/code-editor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CodeEditor","useStyles","createStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","handleSearch","current","focus","trigger","useEffect","_label","Input","Label","_description","Description","_error","Error","mt","Space","h","_header","Box","_buttons","Group","position","spacing","Search","CopyToClipboard","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme, {error}: {error?: boolean}) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n        outlineColor: error ? theme.colors.red[6] : null,\n        outlineStyle: error ? 'solid' : 'none',\n        outlineWidth: 'thin',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [containsError, setContainsError] = useState(false);\n    const {classes, theme} = useStyles({error: containsError});\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setContainsError(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\n        );\n    };\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CodeEditor","useStyles","createStyles","theme","error","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","outlineColor","red","outlineStyle","outlineWidth","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","containsError","setContainsError","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","editorRef","useRef","loadLocalMonaco","monacoInstance","loader","config","monaco","registerLanguages","XML","register","handleSearch","current","focus","trigger","useEffect","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Input","Label","_description","Description","_error","mt","Space","h","_header","Box","_buttons","Group","position","spacing","Search","CopyToClipboard","_editor","p","pl","className","Editor","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","px","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","sx","Math","max"],"mappings":"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"}

package/dist/esm/components/code-editor/CodeEditor.d.ts

@@ -1,6 +1,8 @@
 import { DefaultProps, InputWrapperBaseProps, Selectors } from '@mantine/core';
 import { FunctionComponent } from 'react';
-declare const useStyles: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
+declare const useStyles: (params: {
+    error?: boolean;
+}, options?: import("@mantine/core").UseStylesOptions<string>) => {
     classes: {
         root: string;
         editor: string;

package/dist/esm/components/code-editor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;;;;;;;CAQZ,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA6IzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIH,YAAY,EAGZ,qBAAqB,EAGrB,SAAS,EAIZ,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAC,iBAAiB,EAA8B,MAAM,OAAO,CAAC;AAOrE,QAAA,MAAM,SAAS;YAA0C,OAAO;;;;;;;;CAW7D,CAAC;AAEJ,UAAU,eACN,SAAQ,IAAI,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC,EACvE,YAAY,CAAC,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,CAAC;IAChE,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,kDAAkD;IAClD,QAAQ,CAAC,IAAI,IAAI,CAAC;IAClB,+CAA+C;IAC/C,MAAM,CAAC,IAAI,IAAI,CAAC;IAChB,qDAAqD;IACrD,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CAClC;AASD,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CAoJzD,CAAC"}

package/dist/esm/components/code-editor/CodeEditor.js

@@ -8,19 +8,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Center, createStyles, Group, Input, Loader, px, Space, Stack, useComponentDefaultProps } from "@mantine/core";
 import { useUncontrolled } from "@mantine/hooks";
 import Editor, { loader } from "@monaco-editor/react";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useParentHeight } from "../../hooks";
 import { XML } from "./languages/xml";
 import { CopyToClipboard } from "../copyToClipboard";
 import { Search } from "./search";
-var useStyles = createStyles(function(theme) {
+var useStyles = createStyles(function(theme, param) {
+    var error = param.error;
     return {
         root: {},
         editor: {
             border: "1px solid ".concat(theme.colors.gray[2]),
             borderRadius: theme.defaultRadius,
             backgroundColor: theme.colorScheme === "light" ? theme.white : theme.black,
-            height: "100%"
+            height: "100%",
+            outlineColor: error ? theme.colors.red[6] : null,
+            outlineStyle: error ? "solid" : "none",
+            outlineWidth: "thin"
         }
     };
 });
@@ -52,7 +56,10 @@ export var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _sliced_to_array(useState(false), 2), loaded = _useState[0], setLoaded = _useState[1];
-    var _useStyles = useStyles(), classes = _useStyles.classes, theme = _useStyles.theme;
+    var _useState1 = _sliced_to_array(useState(false), 2), containsError = _useState1[0], setContainsError = _useState1[1];
+    var _useStyles = useStyles({
+        error: containsError
+    }), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _sliced_to_array(useUncontrolled({
         value: value,
         defaultValue: defaultValue,
@@ -107,6 +114,11 @@ export var CodeEditor = function(props) {
             setLoaded(true);
         }
     }, []);
+    var handleValidate = function(markers) {
+        setContainsError(markers.some(function(marker) {
+            return marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error;
+        }));
+    };
     var _label = label ? /*#__PURE__*/ _jsx(Input.Label, _object_spread_props(_object_spread({
         required: required
     }, labelProps), {
@@ -149,6 +161,7 @@ export var CodeEditor = function(props) {
         pl: "xs",
         className: classes.editor,
         children: /*#__PURE__*/ _jsx(Editor, {
+            onValidate: handleValidate,
             defaultLanguage: language,
             theme: theme.colorScheme === "light" ? "light" : "vs-dark",
             options: {

package/dist/esm/components/code-editor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState, useRef} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useRef","useParentHeight","XML","CopyToClipboard","Search","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","classes","finalValue","_value","handleChange","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","_label","Label","_description","Description","_error","Error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {\n    Box,\n    Center,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport {editor as monacoEditor} from 'monaco-editor';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useRef, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\nimport {CopyToClipboard} from '../copyToClipboard';\nimport {Search} from './search';\n\nconst useStyles = createStyles((theme, {error}: {error?: boolean}) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n        outlineColor: error ? theme.colors.red[6] : null,\n        outlineStyle: error ? 'solid' : 'none',\n        outlineWidth: 'thin',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the search icon is clicked  */\n    onSearch?(): void;\n    /** Called whenever the copy icon is clicked */\n    onCopy?(): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onCopy,\n        onSearch,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const [containsError, setContainsError] = useState(false);\n    const {classes, theme} = useStyles({error: containsError});\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n    const editorRef = useRef(null);\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    const handleSearch = () => {\n        if (editorRef.current) {\n            editorRef.current.focus();\n            editorRef.current.trigger('editor', 'actions.find', '');\n            onSearch?.();\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const handleValidate = (markers: monacoEditor.IMarker[]) => {\n        setContainsError(\n            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),\n        );\n    };\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _buttons = (\n        <Group position=\"right\" spacing={0}>\n            <Search handleSearch={handleSearch} />\n            <CopyToClipboard value={_value} onCopy={() => onCopy?.()} />\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                onValidate={handleValidate}\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    editorRef.current = editor;\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(() => onFocus?.());\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_buttons}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["Box","Center","createStyles","Group","Input","Loader","px","Space","Stack","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useRef","useState","useParentHeight","XML","CopyToClipboard","Search","useStyles","theme","error","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","outlineColor","red","outlineStyle","outlineWidth","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onCopy","onSearch","onFocus","value","label","required","labelProps","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","containsError","setContainsError","classes","finalValue","_value","handleChange","parentHeight","ref","editorRef","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","handleSearch","current","focus","trigger","handleValidate","markers","some","marker","severity","__getMonacoInstance","MarkerSeverity","Error","_label","Label","_description","Description","_error","mt","h","_header","_buttons","position","spacing","_editor","p","pl","className","onValidate","defaultLanguage","options","minimap","enabled","wordWrap","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","sx","Math","max"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.18.0",
+  "version": "52.19.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -34,8 +34,8 @@
     "@mantine/utils": "6.0.19",
     "@monaco-editor/react": "4.5.1",
     "@swc/helpers": "0.5.1",
-    "@tanstack/react-table": "8.10.1",
-    "@tanstack/table-core": "8.10.1",
+    "@tanstack/react-table": "8.10.3",
+    "@tanstack/table-core": "8.10.3",
     "dayjs": "1.11.9",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",

package/src/components/code-editor/CodeEditor.tsx

@@ -14,21 +14,25 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
+import {editor as monacoEditor} from 'monaco-editor';
 import Editor, {loader, Monaco} from '@monaco-editor/react';
-import {FunctionComponent, useEffect, useState, useRef} from 'react';
+import {FunctionComponent, useEffect, useRef, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
 import {XML} from './languages/xml';
 import {CopyToClipboard} from '../copyToClipboard';
 import {Search} from './search';
 
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles((theme, {error}: {error?: boolean}) => ({
     root: {},
     editor: {
         border: `1px solid ${theme.colors.gray[2]}`,
         borderRadius: theme.defaultRadius,
         backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,
         height: '100%',
+        outlineColor: error ? theme.colors.red[6] : null,
+        outlineStyle: error ? 'solid' : 'none',
+        outlineWidth: 'thin',
     },
 }));
 
@@ -109,7 +113,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
-    const {classes, theme} = useStyles();
+    const [containsError, setContainsError] = useState(false);
+    const {classes, theme} = useStyles({error: containsError});
     const [_value, handleChange] = useUncontrolled<string>({
         value,
         defaultValue,
@@ -118,7 +123,6 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     });
     const [parentHeight, ref] = useParentHeight();
     const editorRef = useRef(null);
-
     const loadLocalMonaco = async () => {
         const monacoInstance = await import('monaco-editor');
         loader.config({monaco: monacoInstance});
@@ -147,6 +151,12 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     }, []);
 
+    const handleValidate = (markers: monacoEditor.IMarker[]) => {
+        setContainsError(
+            markers.some((marker) => marker.severity === loader.__getMonacoInstance().MarkerSeverity.Error),
+        );
+    };
+
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
             {label}
@@ -183,6 +193,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     const _editor = loaded ? (
         <Box p="md" pl="xs" className={classes.editor}>
             <Editor
+                onValidate={handleValidate}
                 defaultLanguage={language}
                 theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}
                 options={{