@coveord/plasma-mantine 48.17.5 → 48.18.0

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

@@ -22,6 +22,7 @@ var _hooks = require("@mantine/hooks");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("@monaco-editor/react"));
 var _react1 = require("react");
 var _hooks1 = require("../../hooks");
+var _xml = require("./languages/xml");
 var useStyles = (0, _core.createStyles)(function(theme) {
     return {
         root: {},
@@ -59,6 +60,8 @@ var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _slicedToArray((0, _react1.useState)(false), 2), loaded = _useState[0], setLoaded = _useState[1];
+    var _useState1 = _slicedToArray((0, _react1.useState)(false), 2), registered = _useState1[0], setRegistered = _useState1[1];
+    var monaco = (0, _react.useMonaco)();
     var _useStyles = useStyles(), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _slicedToArray((0, _hooks.useUncontrolled)({
         value: value,
@@ -69,7 +72,7 @@ var CodeEditor = function(props) {
     var _useParentHeight = _slicedToArray((0, _hooks1.useParentHeight)(), 2), parentHeight = _useParentHeight[0], ref = _useParentHeight[1];
     var loadLocalMonaco = function() {
         var _ref = _asyncToGenerator(function() {
-            var monaco;
+            var monacoInstance;
             return _tsGenerator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -80,9 +83,9 @@ var CodeEditor = function(props) {
                             })
                         ];
                     case 1:
-                        monaco = _state.sent();
+                        monacoInstance = _state.sent();
                         _react.loader.config({
-                            monaco: monaco
+                            monaco: monacoInstance
                         });
                         setLoaded(true);
                         return [
@@ -102,6 +105,15 @@ var CodeEditor = function(props) {
             setLoaded(true);
         }
     }, []);
+    (0, _react1.useEffect)(function() {
+        if (monaco && language === "xml" && !registered) {
+            _xml.XML.register(monaco);
+            setRegistered(true);
+        }
+    }, [
+        monaco,
+        language
+    ]);
     var _label = label ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Label, _objectSpreadProps(_objectSpread({
         required: required
     }, labelProps), {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\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';\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 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        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\n    const loadLocalMonaco = async () => {\n        const monaco = await import('monaco-editor');\n        loader.config({monaco});\n        setLoaded(true);\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 mt=\"xs\" {...descriptionProps}>\n            {description}\n        </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 _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\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                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: theme.fontSizes.xs,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor) => {\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            {_copyButton}\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","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","loadLocalMonaco","monaco","loader","config","useEffect","_label","Input","Label","_description","Description","mt","_error","Error","Space","h","_header","Box","_copyButton","Group","position","CopyButton","timeout","copied","copy","Tooltip","withArrow","ActionIcon","color","onClick","CheckSize16Px","CopySize16Px","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","spacing","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, useMonaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\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 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        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 [registered, setRegistered] = useState(false);\n    const monaco = useMonaco();\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\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (monaco && language === 'xml' && !registered) {\n            XML.register(monaco);\n            setRegistered(true);\n        }\n    }, [monaco, language]);\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 mt=\"xs\" {...descriptionProps}>\n            {description}\n        </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 _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\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                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: theme.fontSizes.xs,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor) => {\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            {_copyButton}\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","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","registered","setRegistered","monaco","useMonaco","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","loadLocalMonaco","monacoInstance","loader","config","useEffect","XML","register","_label","Input","Label","_description","Description","mt","_error","Error","Space","h","_header","Box","_copyButton","Group","position","CopyButton","timeout","copied","copy","Tooltip","withArrow","ActionIcon","color","onClick","CheckSize16Px","CopySize16Px","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","spacing","sx","Math","max"],"mappings":"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"}

package/dist/cjs/components/code-editor/__mocks__/@monaco-editor/react.js

@@ -14,6 +14,9 @@ _export(exports, {
     },
     loader: function() {
         return loader;
+    },
+    useMonaco: function() {
+        return useMonaco;
     }
 });
 var _jsxRuntime = require("react/jsx-runtime");
@@ -26,5 +29,8 @@ var _default = MockedEditor;
 var loader = {
     config: jest.fn()
 };
+var useMonaco = function() {
+    return jest.fn();
+};
 
 //# sourceMappingURL=react.js.map

package/dist/cjs/components/code-editor/__mocks__/@monaco-editor/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {type EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent} from 'react';\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid=\"monaco-editor\" />;\n\nexport default MockedEditor;\n\nexport const loader = {\n    config: jest.fn(),\n};\n"],"names":["loader","MockedEditor","props","div","data-testid","config","jest","fn"],"mappings":"AAAA;;;;;;;;;;;IAKA,OAA4B;eAA5B;;IAEaA,MAAM;eAANA;;;;AAJb,IAAMC,eAA+C,SAACC;yBAAU,qBAACC;QAAIC,eAAY;;;IAEjF,WAAeH;AAER,IAAMD,SAAS;IAClBK,QAAQC,KAAKC,EAAE;AACnB"}
+{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent} from 'react';\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid=\"monaco-editor\" />;\n\nexport default MockedEditor;\n\nexport const loader = {\n    config: jest.fn(),\n};\n\nexport const useMonaco = () => jest.fn();\n"],"names":["loader","useMonaco","MockedEditor","props","div","data-testid","config","jest","fn"],"mappings":"AAAA;;;;;;;;;;;IAKA,OAA4B;eAA5B;;IAEaA,MAAM;eAANA;;IAIAC,SAAS;eAATA;;;;AARb,IAAMC,eAA+C,SAACC;yBAAU,qBAACC;QAAIC,eAAY;;;IAEjF,WAAeH;AAER,IAAMF,SAAS;IAClBM,QAAQC,KAAKC,EAAE;AACnB;AAEO,IAAMP,YAAY;WAAMM,KAAKC,EAAE"}

package/dist/cjs/components/code-editor/languages/xml.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "XML", {
+    enumerable: true,
+    get: function() {
+        return XML;
+    }
+});
+var _asyncToGenerator = require("@swc/helpers/lib/_async_to_generator.js").default;
+var _tsGenerator = require("@swc/helpers/lib/_ts_generator.js").default;
+var format = function(xml) {
+    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default
+    var PADDING = " ".repeat(2);
+    var reg = /(>)(<)(\/*)/g;
+    var pad = 0;
+    xml = xml.replace(reg, "$1\r\n$2$3");
+    return xml.split("\r\n").map(function(node) {
+        var indent = 0;
+        if (node.match(/.+<\/\w[^>]*>$/)) {
+            indent = 0;
+        } else if (node.match(/^<\/\w/) && pad > 0) {
+            pad -= 1;
+        } else if (node.match(/^<\w[^>]*[^/]>.*$/)) {
+            indent = 1;
+        } else {
+            indent = 0;
+        }
+        pad += indent;
+        return PADDING.repeat(pad - indent) + node;
+    }).join("\r\n");
+};
+var register = function(monaco) {
+    monaco.languages.registerDocumentFormattingEditProvider("xml", {
+        provideDocumentFormattingEdits: function() {
+            var _ref = _asyncToGenerator(function(model) {
+                return _tsGenerator(this, function(_state) {
+                    return [
+                        2,
+                        [
+                            {
+                                range: model.getFullModelRange(),
+                                text: format(model.getValue())
+                            }
+                        ]
+                    ];
+                });
+            });
+            return function(model) {
+                return _ref.apply(this, arguments);
+            };
+        }()
+    });
+};
+var XML = {
+    register: register
+};
+
+//# sourceMappingURL=xml.js.map

package/dist/cjs/components/code-editor/languages/xml.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/code-editor/languages/xml.ts"],"sourcesContent":["import {Monaco} from '@monaco-editor/react';\n\nconst format = (xml: string): string => {\n    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default\n    const PADDING = ' '.repeat(2);\n    const reg = /(>)(<)(\\/*)/g;\n    let pad = 0;\n\n    xml = xml.replace(reg, '$1\\r\\n$2$3');\n\n    return xml\n        .split('\\r\\n')\n        .map((node) => {\n            let indent = 0;\n            if (node.match(/.+<\\/\\w[^>]*>$/)) {\n                indent = 0;\n            } else if (node.match(/^<\\/\\w/) && pad > 0) {\n                pad -= 1;\n            } else if (node.match(/^<\\w[^>]*[^/]>.*$/)) {\n                indent = 1;\n            } else {\n                indent = 0;\n            }\n\n            pad += indent;\n\n            return PADDING.repeat(pad - indent) + node;\n        })\n        .join('\\r\\n');\n};\n\nconst register = (monaco: Monaco): void => {\n    monaco.languages.registerDocumentFormattingEditProvider('xml', {\n        provideDocumentFormattingEdits: async (model) => [\n            {\n                range: model.getFullModelRange(),\n                text: format(model.getValue()),\n            },\n        ],\n    });\n};\n\nexport const XML = {register};\n"],"names":["XML","format","xml","PADDING","repeat","reg","pad","replace","split","map","node","indent","match","join","register","monaco","languages","registerDocumentFormattingEditProvider","provideDocumentFormattingEdits","model","range","getFullModelRange","text","getValue"],"mappings":"AAAA;;;;+BA0CaA;;;eAAAA;;;;;AAxCb,IAAMC,SAAS,SAACC,KAAwB;IACpC,oGAAoG;IACpG,IAAMC,UAAU,IAAIC,MAAM,CAAC;IAC3B,IAAMC,MAAM;IACZ,IAAIC,MAAM;IAEVJ,MAAMA,IAAIK,OAAO,CAACF,KAAK;IAEvB,OAAOH,IACFM,KAAK,CAAC,QACNC,GAAG,CAAC,SAACC,MAAS;QACX,IAAIC,SAAS;QACb,IAAID,KAAKE,KAAK,CAAC,mBAAmB;YAC9BD,SAAS;QACb,OAAO,IAAID,KAAKE,KAAK,CAAC,aAAaN,MAAM,GAAG;YACxCA,OAAO;QACX,OAAO,IAAII,KAAKE,KAAK,CAAC,sBAAsB;YACxCD,SAAS;QACb,OAAO;YACHA,SAAS;QACb,CAAC;QAEDL,OAAOK;QAEP,OAAOR,QAAQC,MAAM,CAACE,MAAMK,UAAUD;IAC1C,GACCG,IAAI,CAAC;AACd;AAEA,IAAMC,WAAW,SAACC,QAAyB;IACvCA,OAAOC,SAAS,CAACC,sCAAsC,CAAC,OAAO;QAC3DC,8BAA8B;uBAAE,kBAAA,SAAOC;;oBAAU;;;4BAC7C;gCACIC,OAAOD,MAAME,iBAAiB;gCAC9BC,MAAMrB,OAAOkB,MAAMI,QAAQ;4BAC/B;;;;;4BAJmCJ;;;;IAM3C;AACJ;AAEO,IAAMnB,MAAM;IAACc,UAAAA;AAAQ"}

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

@@ -11,7 +11,7 @@ interface CodeEditorProps extends Omit<InputWrapperBaseProps, 'inputContainer' |
      *
      * @default 'plaintext'
      */
-    language?: 'plaintext' | 'json' | 'markdown' | 'python';
+    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';
     /** Default value for uncontrolled input */
     defaultValue?: string;
     /** Value for controlled input */

package/dist/definitions/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":"AACA,OAAO,EAMH,YAAY,EAGZ,qBAAqB,EAErB,SAAS,EAKZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAI7D,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,CAAC;IACxD,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,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,CAoIzD,CAAC"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAMH,YAAY,EAGZ,qBAAqB,EAErB,SAAS,EAKZ,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAC,iBAAiB,EAAsB,MAAM,OAAO,CAAC;AAK7D,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,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"}

package/dist/definitions/components/code-editor/__mocks__/@monaco-editor/react.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="jest" />
-import { type EditorProps } from '@monaco-editor/react';
+import { EditorProps } from '@monaco-editor/react';
 import { FunctionComponent } from 'react';
 declare const MockedEditor: FunctionComponent<EditorProps>;
 export default MockedEditor;
 export declare const loader: {
     config: jest.Mock<any, any>;
 };
+export declare const useMonaco: () => jest.Mock<any, any>;
 //# sourceMappingURL=react.d.ts.map

package/dist/definitions/components/code-editor/__mocks__/@monaco-editor/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,WAAW,EAAC,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,WAAW,CAAkD,CAAC;AAEpG,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,MAAM;;CAElB,CAAC"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,OAAO,CAAC;AAExC,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,WAAW,CAAkD,CAAC;AAEpG,eAAe,YAAY,CAAC;AAE5B,eAAO,MAAM,MAAM;;CAElB,CAAC;AAEF,eAAO,MAAM,SAAS,2BAAkB,CAAC"}

package/dist/definitions/components/code-editor/languages/xml.d.ts

@@ -0,0 +1,5 @@
+import { Monaco } from '@monaco-editor/react';
+export declare const XML: {
+    register: (monaco: Monaco) => void;
+};
+//# sourceMappingURL=xml.d.ts.map

package/dist/definitions/components/code-editor/languages/xml.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xml.d.ts","sourceRoot":"","sources":["../../../../../src/components/code-editor/languages/xml.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,sBAAsB,CAAC;AA0C5C,eAAO,MAAM,GAAG;uBAXU,MAAM,KAAG,IAAI;CAWV,CAAC"}

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

@@ -8,9 +8,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckSize16Px, CopySize16Px } from "@coveord/plasma-react-icons";
 import { ActionIcon, Box, Center, CopyButton, createStyles, Group, Input, Loader, Space, Stack, Tooltip, useComponentDefaultProps } from "@mantine/core";
 import { useUncontrolled } from "@mantine/hooks";
-import Editor, { loader } from "@monaco-editor/react";
+import Editor, { loader, useMonaco } from "@monaco-editor/react";
 import { useEffect, useState } from "react";
 import { useParentHeight } from "../../hooks";
+import { XML } from "./languages/xml";
 var useStyles = createStyles(function(theme) {
     return {
         root: {},
@@ -48,6 +49,8 @@ export var CodeEditor = function(props) {
         "monacoLoader"
     ]);
     var _useState = _sliced_to_array(useState(false), 2), loaded = _useState[0], setLoaded = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), registered = _useState1[0], setRegistered = _useState1[1];
+    var monaco = useMonaco();
     var _useStyles = useStyles(), classes = _useStyles.classes, theme = _useStyles.theme;
     var _useUncontrolled = _sliced_to_array(useUncontrolled({
         value: value,
@@ -58,7 +61,7 @@ export var CodeEditor = function(props) {
     var _useParentHeight = _sliced_to_array(useParentHeight(), 2), parentHeight = _useParentHeight[0], ref = _useParentHeight[1];
     var loadLocalMonaco = function() {
         var _ref = _async_to_generator(function() {
-            var monaco;
+            var monacoInstance;
             return _ts_generator(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -67,9 +70,9 @@ export var CodeEditor = function(props) {
                             import("monaco-editor")
                         ];
                     case 1:
-                        monaco = _state.sent();
+                        monacoInstance = _state.sent();
                         loader.config({
-                            monaco: monaco
+                            monaco: monacoInstance
                         });
                         setLoaded(true);
                         return [
@@ -89,6 +92,15 @@ export var CodeEditor = function(props) {
             setLoaded(true);
         }
     }, []);
+    useEffect(function() {
+        if (monaco && language === "xml" && !registered) {
+            XML.register(monaco);
+            setRegistered(true);
+        }
+    }, [
+        monaco,
+        language
+    ]);
     var _label = label ? /*#__PURE__*/ _jsx(Input.Label, _object_spread_props(_object_spread({
         required: required
     }, labelProps), {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\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';\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 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        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\n    const loadLocalMonaco = async () => {\n        const monaco = await import('monaco-editor');\n        loader.config({monaco});\n        setLoaded(true);\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 mt=\"xs\" {...descriptionProps}>\n            {description}\n        </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 _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\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                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: theme.fontSizes.xs,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor) => {\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            {_copyButton}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","Box","Center","CopyButton","createStyles","Group","Input","Loader","Space","Stack","Tooltip","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useParentHeight","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","classes","finalValue","_value","handleChange","parentHeight","ref","loadLocalMonaco","monaco","config","_label","Label","_description","Description","mt","_error","Error","h","_header","_copyButton","position","timeout","copied","copy","withArrow","color","onClick","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","spacing","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, useMonaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\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 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        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 [registered, setRegistered] = useState(false);\n    const monaco = useMonaco();\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\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (monaco && language === 'xml' && !registered) {\n            XML.register(monaco);\n            setRegistered(true);\n        }\n    }, [monaco, language]);\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 mt=\"xs\" {...descriptionProps}>\n            {description}\n        </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 _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\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                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: theme.fontSizes.xs,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor) => {\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            {_copyButton}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","Box","Center","CopyButton","createStyles","Group","Input","Loader","Space","Stack","Tooltip","useComponentDefaultProps","useUncontrolled","Editor","loader","useMonaco","useEffect","useState","useParentHeight","XML","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","registered","setRegistered","monaco","classes","finalValue","_value","handleChange","parentHeight","ref","loadLocalMonaco","monacoInstance","config","register","_label","Label","_description","Description","mt","_error","Error","h","_header","_copyButton","position","timeout","copied","copy","withArrow","color","onClick","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","spacing","sx","Math","max"],"mappings":"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"}

package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js

@@ -8,5 +8,8 @@ export default MockedEditor;
 export var loader = {
     config: jest.fn()
 };
+export var useMonaco = function() {
+    return jest.fn();
+};
 
 //# sourceMappingURL=react.js.map

package/dist/esm/components/code-editor/__mocks__/@monaco-editor/react.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {type EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent} from 'react';\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid=\"monaco-editor\" />;\n\nexport default MockedEditor;\n\nexport const loader = {\n    config: jest.fn(),\n};\n"],"names":["MockedEditor","props","div","data-testid","loader","config","jest","fn"],"mappings":"AAAA;AAGA,IAAMA,eAA+C,SAACC;yBAAU,KAACC;QAAIC,eAAY;;;AAEjF,eAAeH,aAAa;AAE5B,OAAO,IAAMI,SAAS;IAClBC,QAAQC,KAAKC,EAAE;AACnB,EAAE"}
+{"version":3,"sources":["../../../../../../src/components/code-editor/__mocks__/@monaco-editor/react.tsx"],"sourcesContent":["import {EditorProps} from '@monaco-editor/react';\nimport {FunctionComponent} from 'react';\n\nconst MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid=\"monaco-editor\" />;\n\nexport default MockedEditor;\n\nexport const loader = {\n    config: jest.fn(),\n};\n\nexport const useMonaco = () => jest.fn();\n"],"names":["MockedEditor","props","div","data-testid","loader","config","jest","fn","useMonaco"],"mappings":"AAAA;AAGA,IAAMA,eAA+C,SAACC;yBAAU,KAACC;QAAIC,eAAY;;;AAEjF,eAAeH,aAAa;AAE5B,OAAO,IAAMI,SAAS;IAClBC,QAAQC,KAAKC,EAAE;AACnB,EAAE;AAEF,OAAO,IAAMC,YAAY;WAAMF,KAAKC,EAAE;EAAG"}

package/dist/esm/components/code-editor/languages/xml.js

@@ -0,0 +1,50 @@
+import _async_to_generator from "@swc/helpers/src/_async_to_generator.mjs";
+import _ts_generator from "@swc/helpers/src/_ts_generator.mjs";
+var format = function(xml) {
+    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default
+    var PADDING = " ".repeat(2);
+    var reg = /(>)(<)(\/*)/g;
+    var pad = 0;
+    xml = xml.replace(reg, "$1\r\n$2$3");
+    return xml.split("\r\n").map(function(node) {
+        var indent = 0;
+        if (node.match(/.+<\/\w[^>]*>$/)) {
+            indent = 0;
+        } else if (node.match(/^<\/\w/) && pad > 0) {
+            pad -= 1;
+        } else if (node.match(/^<\w[^>]*[^/]>.*$/)) {
+            indent = 1;
+        } else {
+            indent = 0;
+        }
+        pad += indent;
+        return PADDING.repeat(pad - indent) + node;
+    }).join("\r\n");
+};
+var register = function(monaco) {
+    monaco.languages.registerDocumentFormattingEditProvider("xml", {
+        provideDocumentFormattingEdits: function() {
+            var _ref = _async_to_generator(function(model) {
+                return _ts_generator(this, function(_state) {
+                    return [
+                        2,
+                        [
+                            {
+                                range: model.getFullModelRange(),
+                                text: format(model.getValue())
+                            }
+                        ]
+                    ];
+                });
+            });
+            return function(model) {
+                return _ref.apply(this, arguments);
+            };
+        }()
+    });
+};
+export var XML = {
+    register: register
+};
+
+//# sourceMappingURL=xml.js.map

package/dist/esm/components/code-editor/languages/xml.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/code-editor/languages/xml.ts"],"sourcesContent":["import {Monaco} from '@monaco-editor/react';\n\nconst format = (xml: string): string => {\n    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default\n    const PADDING = ' '.repeat(2);\n    const reg = /(>)(<)(\\/*)/g;\n    let pad = 0;\n\n    xml = xml.replace(reg, '$1\\r\\n$2$3');\n\n    return xml\n        .split('\\r\\n')\n        .map((node) => {\n            let indent = 0;\n            if (node.match(/.+<\\/\\w[^>]*>$/)) {\n                indent = 0;\n            } else if (node.match(/^<\\/\\w/) && pad > 0) {\n                pad -= 1;\n            } else if (node.match(/^<\\w[^>]*[^/]>.*$/)) {\n                indent = 1;\n            } else {\n                indent = 0;\n            }\n\n            pad += indent;\n\n            return PADDING.repeat(pad - indent) + node;\n        })\n        .join('\\r\\n');\n};\n\nconst register = (monaco: Monaco): void => {\n    monaco.languages.registerDocumentFormattingEditProvider('xml', {\n        provideDocumentFormattingEdits: async (model) => [\n            {\n                range: model.getFullModelRange(),\n                text: format(model.getValue()),\n            },\n        ],\n    });\n};\n\nexport const XML = {register};\n"],"names":["format","xml","PADDING","repeat","reg","pad","replace","split","map","node","indent","match","join","register","monaco","languages","registerDocumentFormattingEditProvider","provideDocumentFormattingEdits","model","range","getFullModelRange","text","getValue","XML"],"mappings":"AAAA;;AAEA,IAAMA,SAAS,SAACC,KAAwB;IACpC,oGAAoG;IACpG,IAAMC,UAAU,IAAIC,MAAM,CAAC;IAC3B,IAAMC,MAAM;IACZ,IAAIC,MAAM;IAEVJ,MAAMA,IAAIK,OAAO,CAACF,KAAK;IAEvB,OAAOH,IACFM,KAAK,CAAC,QACNC,GAAG,CAAC,SAACC,MAAS;QACX,IAAIC,SAAS;QACb,IAAID,KAAKE,KAAK,CAAC,mBAAmB;YAC9BD,SAAS;QACb,OAAO,IAAID,KAAKE,KAAK,CAAC,aAAaN,MAAM,GAAG;YACxCA,OAAO;QACX,OAAO,IAAII,KAAKE,KAAK,CAAC,sBAAsB;YACxCD,SAAS;QACb,OAAO;YACHA,SAAS;QACb,CAAC;QAEDL,OAAOK;QAEP,OAAOR,QAAQC,MAAM,CAACE,MAAMK,UAAUD;IAC1C,GACCG,IAAI,CAAC;AACd;AAEA,IAAMC,WAAW,SAACC,QAAyB;IACvCA,OAAOC,SAAS,CAACC,sCAAsC,CAAC,OAAO;QAC3DC,8BAA8B;uBAAE,oBAAA,SAAOC;;oBAAU;;;4BAC7C;gCACIC,OAAOD,MAAME,iBAAiB;gCAC9BC,MAAMrB,OAAOkB,MAAMI,QAAQ;4BAC/B;;;;;4BAJmCJ;;;;IAM3C;AACJ;AAEA,OAAO,IAAMK,MAAM;IAACV,UAAAA;AAAQ,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.17.5",
+  "version": "48.18.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

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

@@ -17,10 +17,11 @@ import {
     useComponentDefaultProps,
 } from '@mantine/core';
 import {useUncontrolled} from '@mantine/hooks';
-import Editor, {loader} from '@monaco-editor/react';
+import Editor, {loader, useMonaco} from '@monaco-editor/react';
 import {FunctionComponent, useEffect, useState} from 'react';
 
 import {useParentHeight} from '../../hooks';
+import {XML} from './languages/xml';
 
 const useStyles = createStyles((theme) => ({
     root: {},
@@ -40,7 +41,7 @@ interface CodeEditorProps
      *
      * @default 'plaintext'
      */
-    language?: 'plaintext' | 'json' | 'markdown' | 'python';
+    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';
     /** Default value for uncontrolled input */
     defaultValue?: string;
     /** Value for controlled input */
@@ -103,6 +104,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         ...others
     } = useComponentDefaultProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
+    const [registered, setRegistered] = useState(false);
+    const monaco = useMonaco();
     const {classes, theme} = useStyles();
     const [_value, handleChange] = useUncontrolled<string>({
         value,
@@ -113,8 +116,8 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     const [parentHeight, ref] = useParentHeight();
 
     const loadLocalMonaco = async () => {
-        const monaco = await import('monaco-editor');
-        loader.config({monaco});
+        const monacoInstance = await import('monaco-editor');
+        loader.config({monaco: monacoInstance});
         setLoaded(true);
     };
 
@@ -126,6 +129,13 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         }
     }, []);
 
+    useEffect(() => {
+        if (monaco && language === 'xml' && !registered) {
+            XML.register(monaco);
+            setRegistered(true);
+        }
+    }, [monaco, language]);
+
     const _label = label ? (
         <Input.Label required={required} {...labelProps}>
             {label}

package/src/components/code-editor/__mocks__/@monaco-editor/react.tsx

@@ -1,4 +1,4 @@
-import {type EditorProps} from '@monaco-editor/react';
+import {EditorProps} from '@monaco-editor/react';
 import {FunctionComponent} from 'react';
 
 const MockedEditor: FunctionComponent<EditorProps> = (props) => <div data-testid="monaco-editor" />;
@@ -8,3 +8,5 @@ export default MockedEditor;
 export const loader = {
     config: jest.fn(),
 };
+
+export const useMonaco = () => jest.fn();

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

@@ -3,6 +3,7 @@ import {loader} from '@monaco-editor/react';
 import {render, screen, waitForElementToBeRemoved, within} from '@test-utils';
 
 import {CodeEditor} from '../CodeEditor';
+import {XML} from '../languages/xml';
 
 describe('CodeEditor', () => {
     beforeEach(() => {
@@ -53,4 +54,10 @@ describe('CodeEditor', () => {
         expect(loader.config).not.toHaveBeenCalled();
         expect(screen.getByTestId('monaco-editor')).toBeInTheDocument();
     });
+
+    it('loads the xml language in the monaco instance if the editor language is xml', () => {
+        const xmlLanguageSpy = jest.spyOn(XML, 'register').mockImplementation();
+        render(<CodeEditor label="label" description="description" monacoLoader="cdn" language="xml" />);
+        expect(xmlLanguageSpy).toHaveBeenCalledTimes(1);
+    });
 });

package/src/components/code-editor/languages/xml.ts

@@ -0,0 +1,43 @@
+import {Monaco} from '@monaco-editor/react';
+
+const format = (xml: string): string => {
+    // https://stackoverflow.com/questions/57039218/doesnt-monaco-editor-support-xml-language-by-default
+    const PADDING = ' '.repeat(2);
+    const reg = /(>)(<)(\/*)/g;
+    let pad = 0;
+
+    xml = xml.replace(reg, '$1\r\n$2$3');
+
+    return xml
+        .split('\r\n')
+        .map((node) => {
+            let indent = 0;
+            if (node.match(/.+<\/\w[^>]*>$/)) {
+                indent = 0;
+            } else if (node.match(/^<\/\w/) && pad > 0) {
+                pad -= 1;
+            } else if (node.match(/^<\w[^>]*[^/]>.*$/)) {
+                indent = 1;
+            } else {
+                indent = 0;
+            }
+
+            pad += indent;
+
+            return PADDING.repeat(pad - indent) + node;
+        })
+        .join('\r\n');
+};
+
+const register = (monaco: Monaco): void => {
+    monaco.languages.registerDocumentFormattingEditProvider('xml', {
+        provideDocumentFormattingEdits: async (model) => [
+            {
+                range: model.getFullModelRange(),
+                text: format(model.getValue()),
+            },
+        ],
+    });
+};
+
+export const XML = {register};