feat(mantine, code-editor): support custom tabSize (#4014)

Author: aboissinot-coveo

packages/mantine/src/components/code-editor/CodeEditor.tsx

@@ -72,6 +72,12 @@ interface CodeEditorProps
      * @default 'local'
      */
     monacoLoader?: 'cdn' | 'local';
+    /**
+     * Options to pass to the monaco editor.
+     * Currently only supporting [`tabSize`](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IStandaloneEditorConstructionOptions.html#tabSize).
+     *
+     */
+    options?: Pick<monacoEditor.IStandaloneEditorConstructionOptions, 'tabSize'>;
 }
 
 const defaultProps: Partial<CodeEditorProps> = {
@@ -101,6 +107,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
         maxHeight,
         disabled,
         monacoLoader,
+        options: {tabSize} = {tabSize: 2},
         ...others
     } = useProps('CodeEditor', defaultProps, props);
     const [loaded, setLoaded] = useState(false);
@@ -230,7 +237,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
                     formatOnPaste: true,
                     fontSize: px(theme.fontSizes.xs) as number,
                     readOnly: disabled,
-                    tabSize: 2,
+                    tabSize,
                 }}
                 value={_value}
                 onChange={handleChange}

packages/website/src/examples/form/code-editor/CodeEditorPython.demo.tsx

@@ -3,16 +3,17 @@ import {CodeEditor, useForm} from '@coveord/plasma-mantine';
 const Demo = () => {
     const form = useForm({
         initialValues: {
-            code: 'def my_extension():\n\tprint("Not implemented yet.")\n\nmy_extension()',
+            code: 'def my_extension():\n    print("Not implemented yet.")\n\nmy_extension()',
         },
     });
 
     return (
         <CodeEditor
             language="python"
             label="Extension"
-            description="Define an extension using Python"
+            description="Define an extension using Python and a custom tab size."
             monacoLoader="cdn"
+            options={{tabSize: 4}}
             {...form.getInputProps('code')}
         />
     );