diff --git a/output/forms.eslint.txt b/output/forms.eslint.txt
new file mode 100644
index 0000000000..f8b9a7fa90
--- /dev/null
+++ b/output/forms.eslint.txt
@@ -0,0 +1,5 @@
+
+/home/travis/build/Talend/ui/packages/forms/src/UIForm/fields/Code/Code.component.js
+  47:20  error  'value' is already declared in the upper scope  no-shadow
+
+✖ 1 problem (1 error, 0 warnings)
diff --git a/packages/components/src/ImportLazy/ImportLazy.component.js b/packages/components/src/ImportLazy/ImportLazy.component.js
new file mode 100644
index 0000000000..2af2a76295
--- /dev/null
+++ b/packages/components/src/ImportLazy/ImportLazy.component.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Skeleton from '../Skeleton';
+
+function DefaultSkeleton() {
+	return (
+		<div>
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.small} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.button} />
+		</div>
+	);
+}
+
+/**
+ * ImportLazy component replace the need for react lazy
+ */
+export function ImportLazy({skeleton, name, version, path, varName, children}) {
+	const [added, setAdded] = React.useState(false);
+	const [loaded, setLoaded] = React.useState(false);
+	React.useEffect(() => {
+		const src = window.Talend.getAssetUrl({name, version, path});
+		const onload = () => {
+			if (!varName) {
+				setLoaded(true);
+			}
+		};
+		window.Talend.addScript({src, onload});
+		if (varName) {
+			const intervalId = setInterval(() => {
+				if (window[varName]) {
+					clearInterval(intervalId);
+					setLoaded(true);
+				}
+			}, 200);
+		}
+	}, []);
+	if (added && loaded) {
+		if (typeof children[0] === 'function') {
+			return children[0](loaded);
+		}
+		return children;
+	}
+	if (skeleton) {
+		return skeleton;
+	}
+	return <DefaultSkeleton />;
+}
+
+ImportLazy.propTypes = {
+	children: PropTypes.node,
+	skeleton: PropTypes.node,
+};
diff --git a/packages/components/src/ImportLazy/index.js b/packages/components/src/ImportLazy/index.js
new file mode 100644
index 0000000000..effcb2adbc
--- /dev/null
+++ b/packages/components/src/ImportLazy/index.js
@@ -0,0 +1 @@
+export { ImportLazy } from './ImportLazy.component';
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 3c4f71047d..107e5f9a93 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -22,6 +22,7 @@ import CollapsiblePanel from './CollapsiblePanel';
 import ConfirmDialog from './ConfirmDialog';
 import Datalist from './Datalist';
 import { ModelViewer, RecordsViewer } from './DataViewer';
+import { ImportLazy } from './ImportLazy';
 import {
 	DatePicker,
 	InputDatePicker,
@@ -165,4 +166,5 @@ export {
 	VirtualizedList,
 	WithDrawer,
 	getTheme,
+	ImportLazy,
 };
diff --git a/packages/forms/src/UIForm/fields/Code/Code.component.js b/packages/forms/src/UIForm/fields/Code/Code.component.js
index 3676e033a8..d6a01d17ab 100644
--- a/packages/forms/src/UIForm/fields/Code/Code.component.js
+++ b/packages/forms/src/UIForm/fields/Code/Code.component.js
@@ -1,161 +1,143 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { withTranslation } from 'react-i18next';
 import keyCode from 'keycode';
+import { ImportLazy, Skeleton } from '@talend/react-components';
 import FieldTemplate from '../FieldTemplate';
-import TextArea from '../TextArea';
+
 import { generateId, generateDescriptionId, generateErrorId } from '../../Message/generateId';
 import getDefaultT from '../../../translate';
 import { I18N_DOMAIN_FORMS } from '../../../constants';
 
-let CodeWidget = TextArea;
-let AceEditor;
+function CodeSkeleton() {
+	return (
+		<div>
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.small} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.button} />
+		</div>
+	);
+}
+
 const DEFAULT_SET_OPTIONS = {
 	enableBasicAutocompletion: true,
 	enableLiveAutocompletion: true,
 	enableSnippets: true,
 };
 
-class WrappedTextArea extends React.PureComponent {
-	constructor() {
-		super();
-		// eslint-disable-next-line no-console
-		console.warn('CodeWidget react-ace not found, fallback to Textarea');
-	}
-
-	render() {
-		return <TextArea {...this.props} />;
-	}
-}
-
-// eslint-disable-next-line react/no-multi-comp
-class Code extends React.Component {
-	constructor(props) {
-		super(props);
-		this.onChange = this.onChange.bind(this);
-		this.onFinish = this.onFinish.bind(this);
-		this.onLoad = this.onLoad.bind(this);
-		this.onBlur = this.onBlur.bind(this);
-		this.onKeyDown = this.onKeyDown.bind(this);
-
-		// this hold the last time the ESC is pressed to offer an escape solution from keyboard trap
-		this.lastEsc = null;
-	}
-
-	componentDidUpdate() {
-		this.attachTextareaAttributes();
-	}
+function Code(props) {
+	const { id, isValid, errorMessage, schema, value, valueIsUpdating, t } = props;
+	const { autoFocus, description, options, readOnly = false, title, labelProps } = schema;
+	const descriptionId = generateDescriptionId(id);
+	const errorId = generateErrorId(id);
+	const instructionsId = generateId(id, 'instructions');
+	const containerRef = React.useRef(null);
+	const [editor, setEditor] = React.useState(null);
+
+	useEffect(() => {
+		if (editor) {
+			const textarea = editor.textInput.getElement();
+			textarea.setAttribute('id', id);
+			textarea.setAttribute('aria-describedby', `${instructionsId} ${descriptionId} ${errorId}`);
+		}
+	}, [editor, instructionsId, descriptionId, errorId, id]);
 
-	onChange(value, event) {
-		this.props.onChange(event, { schema: this.props.schema, value });
+	function onChange(value, event) {
+		props.onChange(event, { schema: props.schema, value });
 	}
 
-	onFinish(event) {
-		this.props.onFinish(event, { schema: this.props.schema });
+	function onFinish(event) {
+		props.onFinish(event, { schema: props.schema });
 	}
 
-	onKeyDown(event) {
+	function onKeyDown(event) {
 		if (event.keyCode === keyCode.codes.esc) {
 			const now = Date.now();
-			if (this.lastEsc && this.lastEsc - now < 1000) {
-				this.lastEsc = null;
-				this.ref.focus();
-				this.editor.textInput.getElement().setAttribute('tabindex', -1);
+
+			if (containerRef.current.lastEsc && containerRef.current.lastEsc - now < 1000) {
+				containerRef.current.lastEsc = null;
+				containerRef.current.focus();
+				editor.textInput.getElement().setAttribute('tabindex', -1);
 			} else {
-				this.lastEsc = now;
+				containerRef.current.lastEsc = now;
 			}
 		} else {
-			this.lastEsc = null;
+			containerRef.current.lastEsc = null;
 		}
 	}
 
-	onBlur() {
-		this.editor.textInput.getElement().removeAttribute('tabindex');
-	}
-
-	onLoad(editor) {
-		this.editor = editor;
-		this.attachTextareaAttributes();
+	function onBlur() {
+		editor.textInput.getElement().removeAttribute('tabindex');
 	}
 
-	attachTextareaAttributes() {
-		if (this.editor) {
-			const textarea = this.editor.textInput.getElement();
-			textarea.setAttribute('id', this.props.id);
-			textarea.setAttribute(
-				'aria-describedby',
-				`${this.ids.instructionsId} ${this.ids.descriptionId} ${this.ids.errorId}`,
-			);
-		}
+	function onLoad(ace) {
+		setEditor(ace);
 	}
 
-	render() {
-		const { id, isValid, errorMessage, schema, value, valueIsUpdating, t } = this.props;
-		const { autoFocus, description, options, readOnly = false, title, labelProps } = schema;
-		const descriptionId = generateDescriptionId(id);
-		const errorId = generateErrorId(id);
-		const instructionsId = generateId(id, 'instructions');
-		this.ids = {
-			descriptionId,
-			errorId,
-			instructionsId,
-		};
-
-		return (
-			<FieldTemplate
-				description={description}
-				descriptionId={descriptionId}
-				errorId={errorId}
-				errorMessage={errorMessage}
-				id={id}
-				isValid={isValid}
-				label={title}
-				labelProps={labelProps}
-				required={schema.required}
-				valueIsUpdating={valueIsUpdating}
+	return (
+		<FieldTemplate
+			description={description}
+			descriptionId={descriptionId}
+			errorId={errorId}
+			errorMessage={errorMessage}
+			id={id}
+			isValid={isValid}
+			label={title}
+			labelProps={labelProps}
+			required={schema.required}
+			valueIsUpdating={valueIsUpdating}
+		>
+			<div // eslint-disable-line jsx-a11y/no-static-element-interactions
+				id={id && `${id}-editor-container`}
+				onBlur={onBlur}
+				onKeyDown={onKeyDown}
+				ref={containerRef}
+				tabIndex="-1"
 			>
-				<div // eslint-disable-line jsx-a11y/no-static-element-interactions
-					id={id && `${id}-editor-container`}
-					onBlur={this.onBlur}
-					onKeyDown={this.onKeyDown}
-					ref={ref => {
-						this.ref = ref;
-					}}
-					tabIndex="-1"
-				>
-					<div id={instructionsId} className="sr-only">
-						{t('TF_CODE_ESCAPE', {
-							defaultValue: 'To focus out of the editor, press ESC key twice.',
-						})}
-					</div>
-					<AceEditor
-						key="ace"
-						className="tf-widget-code form-control"
-						editorProps={{ $blockScrolling: Infinity }} // https://github.com/securingsincity/react-ace/issues/29
-						focus={autoFocus}
-						name={`${id}_wrapper`}
-						mode={options && options.language}
-						onBlur={this.onFinish}
-						onLoad={this.onLoad}
-						onChange={this.onChange}
-						// disabled is not supported by ace use readonly
-						// https://github.com/ajaxorg/ace/issues/406
-						readOnly={readOnly || schema.disabled || valueIsUpdating}
-						setOptions={DEFAULT_SET_OPTIONS}
-						showGutter={false}
-						showPrintMargin={false}
-						theme="chrome"
-						value={value}
-						width="auto"
-						{...options}
-					/>
+				<div id={instructionsId} className="sr-only">
+					{t('TF_CODE_ESCAPE', {
+						defaultValue: 'To focus out of the editor, press ESC key twice.',
+					})}
 				</div>
-			</FieldTemplate>
-		);
-	}
+				<ImportLazy
+					skeleton={<CodeSkeleton />}
+					name="react-ace"
+					version="6.2.0"
+					varName="ReactAce"
+					path="/dist/react-ace.min.js"
+				>
+					{AceEditor => (
+						<AceEditor
+							key="ace"
+							className="tf-widget-code form-control"
+							editorProps={{ $blockScrolling: Infinity }} // https://github.com/securingsincity/react-ace/issues/29
+							focus={autoFocus}
+							name={`${id}_wrapper`}
+							mode={options && options.language}
+							onBlur={onFinish}
+							onLoad={onLoad}
+							onChange={onChange}
+							// disabled is not supported by ace use readonly
+							// https://github.com/ajaxorg/ace/issues/406
+							readOnly={readOnly || schema.disabled || valueIsUpdating}
+							setOptions={DEFAULT_SET_OPTIONS}
+							showGutter={false}
+							showPrintMargin={false}
+							theme="chrome"
+							value={value}
+							width="auto"
+							{...options}
+						/>
+					)}
+				</ImportLazy>
+			</div>
+		</FieldTemplate>
+	);
 }
+
 if (process.env.NODE_ENV !== 'production') {
-	WrappedTextArea.propTypes = TextArea.propTypes;
 	Code.propTypes = {
 		id: PropTypes.string,
 		isValid: PropTypes.bool,
@@ -185,14 +167,4 @@ Code.defaultProps = {
 	t: getDefaultT(),
 };
 
-try {
-	/* eslint-disable global-require, import/no-extraneous-dependencies */
-	AceEditor = require('react-ace').default;
-	require('brace/ext/language_tools'); // https://github.com/securingsincity/react-ace/issues/95
-	/* eslint-enable global-require, import/no-extraneous-dependencies */
-	CodeWidget = Code;
-} catch (error) {
-	CodeWidget = WrappedTextArea;
-}
-
-export default withTranslation(I18N_DOMAIN_FORMS)(CodeWidget);
+export default withTranslation(I18N_DOMAIN_FORMS)(Code);
diff --git a/packages/forms/src/UIForm/fields/Code/__snapshots__/Code.component.test.js.snap b/packages/forms/src/UIForm/fields/Code/__snapshots__/Code.component.test.js.snap
index ea71fb4847..21ccc91a82 100644
--- a/packages/forms/src/UIForm/fields/Code/__snapshots__/Code.component.test.js.snap
+++ b/packages/forms/src/UIForm/fields/Code/__snapshots__/Code.component.test.js.snap
@@ -21,54 +21,39 @@ exports[`Code field should render ace-editor in FieldTemplate 1`] = `
     >
       To focus out of the editor, press ESC key twice.
     </div>
-    <ReactAce
-      className="tf-widget-code form-control"
-      cursorStart={1}
-      editorProps={
-        Object {
-          "$blockScrolling": Infinity,
-        }
-      }
-      enableBasicAutocompletion={false}
-      enableLiveAutocompletion={false}
-      focus={true}
-      fontSize={12}
-      height="500px"
-      highlightActiveLine={true}
-      maxLines={null}
-      minLines={null}
-      mode=""
-      name="myCodeWidget_wrapper"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onLoad={[Function]}
-      onPaste={null}
-      onScroll={null}
-      readOnly={false}
-      scrollMargin={
-        Array [
-          0,
-          0,
-          0,
-          0,
-        ]
+    <React.Suspense
+      fallback={
+        <div>
+          Loading...
+        </div>
       }
-      setOptions={
-        Object {
-          "enableBasicAutocompletion": true,
-          "enableLiveAutocompletion": true,
-          "enableSnippets": true,
+    >
+      <UNDEFINED
+        className="tf-widget-code form-control"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
         }
-      }
-      showGutter={false}
-      showPrintMargin={false}
-      style={Object {}}
-      tabSize={4}
-      theme="chrome"
-      value="toto"
-      width="auto"
-      wrapEnabled={false}
-    />
+        focus={true}
+        name="myCodeWidget_wrapper"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onLoad={[Function]}
+        setOptions={
+          Object {
+            "enableBasicAutocompletion": true,
+            "enableLiveAutocompletion": true,
+            "enableSnippets": true,
+          }
+        }
+        showGutter={false}
+        showPrintMargin={false}
+        theme="chrome"
+        value="toto"
+        width="auto"
+      />
+    </React.Suspense>
   </div>
 </FieldTemplate>
 `;
diff --git a/packages/forms/src/deprecated/widgets/CodeWidget/CodeWidget.component.js b/packages/forms/src/deprecated/widgets/CodeWidget/CodeWidget.component.js
index 833e700b4d..8c6b97923b 100644
--- a/packages/forms/src/deprecated/widgets/CodeWidget/CodeWidget.component.js
+++ b/packages/forms/src/deprecated/widgets/CodeWidget/CodeWidget.component.js
@@ -1,110 +1,99 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import PropTypes from 'prop-types';
-import TextareaWidget from 'react-jsonschema-form/lib/components/widgets/TextareaWidget';
+import { importFromCDN, Skeleton } from '@talend/react-components';
 
-let CodeWidget; // eslint-disable-line import/no-mutable-exports
-
-try {
-	// eslint-disable-next-line import/no-extraneous-dependencies, global-require
-	const AceEditor = require('react-ace').default;
-
-	const SET_OPTIONS = {
-		enableBasicAutocompletion: true,
-		enableLiveAutocompletion: true,
-		enableSnippets: true,
-	};
-
-	class AceCodeWidget extends React.Component {
-		static displayName = 'AceCodeWidget';
-
-		constructor(props) {
-			super(props);
-			this.onChange = this.onChange.bind(this);
-			this.onLoad = this.onLoad.bind(this);
-		}
+function CodeSkeleton() {
+	return (
+		<div>
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.small} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />
+			<Skeleton type={Skeleton.TYPES.button} />
+		</div>
+	);
+}
 
-		onChange(value) {
-			if (this.props.onChange) {
-				this.props.onChange(value);
-			}
-		}
+const AceEditor = lazy(() =>
+	importFromCDN({
+		name: 'react-ace',
+		varName: 'ReactAce',
+		version: '6.2.0',
+		path: '/dist/react-ace.min.js',
+	}),
+);
 
-		onLoad(event) {
-			if (this.props.formContext.codeWidgetOnLoad) {
-				this.props.formContext.codeWidgetOnLoad(event.env.editor);
-			}
-		}
+const SET_OPTIONS = {
+	enableBasicAutocompletion: true,
+	enableLiveAutocompletion: true,
+	enableSnippets: true,
+};
 
-		render() {
-			const { id, options, value, disabled, readonly, autofocus } = this.props;
-			// allow override using
-			const contextProps = this.props.formContext && this.props.formContext.codeWidgetProps;
-			let setOptions = SET_OPTIONS;
-			if (contextProps && contextProps.setOptions) {
-				setOptions = { ...SET_OPTIONS, ...contextProps.setOptions };
-				delete contextProps.setOptions;
-			}
-			return (
-				<AceEditor
-					className="tf-widget-code form-control"
-					focus={autofocus || false}
-					name={id}
-					width="auto"
-					mode={options && options.language}
-					onLoad={this.onLoad}
-					onChange={this.onChange}
-					readOnly={readonly}
-					disabled={disabled}
-					setOptions={setOptions}
-					enableSnippets
-					value={value}
-					theme="chrome"
-					showGutter={false}
-					showPrintMargin={false}
-					{...contextProps}
-					{...options}
-				/>
-			);
+function AceCodeWidget(props) {
+	function onChange(value) {
+		if (props.onChange) {
+			props.onChange(value);
 		}
 	}
 
-	if (process.env.NODE_ENV !== 'production') {
-		AceCodeWidget.propTypes = {
-			onChange: PropTypes.func,
-			formContext: PropTypes.shape({
-				codeWidgetProps: PropTypes.object,
-				codeWidgetOnLoad: PropTypes.func,
-			}),
-			id: PropTypes.string,
-			options: PropTypes.shape({
-				language: PropTypes.string,
-			}),
-			value: PropTypes.string,
-			disabled: PropTypes.bool,
-			readonly: PropTypes.bool,
-			autofocus: PropTypes.bool,
-		};
-	}
-
-	CodeWidget = AceCodeWidget;
-} catch (error) {
-	// Fallback to TextareaWidget
-	// eslint-disable-next-line react/no-multi-comp
-	class TextareaCodeWidget extends React.PureComponent {
-		constructor() {
-			super();
-			// eslint-disable-next-line no-console
-			console.warn('CodeWidget react-ace not found, fallback to TextareaWidget', TextareaWidget);
+	function onLoad(event) {
+		if (props.formContext.codeWidgetOnLoad) {
+			props.formContext.codeWidgetOnLoad(event.env.editor);
 		}
+	}
 
-		render() {
-			return <TextareaWidget {...this.props} />;
-		}
+	const { id, options, value, disabled, readonly, autofocus } = props;
+	// allow override using
+	const contextProps = props.formContext && props.formContext.codeWidgetProps;
+	let setOptions = SET_OPTIONS;
+	if (contextProps && contextProps.setOptions) {
+		setOptions = { ...SET_OPTIONS, ...contextProps.setOptions };
+		delete contextProps.setOptions;
 	}
 
-	TextareaCodeWidget.displayName = 'TextareaCodeWidget';
+	return (
+		<Suspense fallback={<CodeSkeleton />}>
+			<AceEditor
+				className="tf-widget-code form-control"
+				focus={autofocus || false}
+				name={id}
+				width="auto"
+				mode={options && options.language}
+				onLoad={onLoad}
+				onChange={onChange}
+				readOnly={readonly}
+				disabled={disabled}
+				setOptions={setOptions}
+				enableSnippets
+				value={value}
+				theme="chrome"
+				showGutter={false}
+				showPrintMargin={false}
+				{...contextProps}
+				{...options}
+			/>
+		</Suspense>
+	);
+}
 
-	CodeWidget = TextareaWidget;
+if (process.env.NODE_ENV !== 'production') {
+	AceCodeWidget.propTypes = {
+		onChange: PropTypes.func,
+		formContext: PropTypes.shape({
+			codeWidgetProps: PropTypes.object,
+			codeWidgetOnLoad: PropTypes.func,
+		}),
+		id: PropTypes.string,
+		options: PropTypes.shape({
+			language: PropTypes.string,
+		}),
+		value: PropTypes.string,
+		disabled: PropTypes.bool,
+		readonly: PropTypes.bool,
+		autofocus: PropTypes.bool,
+	};
 }
 
-export default CodeWidget;
+AceCodeWidget.displayName = 'AceCodeWidget';
+
+export default AceCodeWidget;
diff --git a/packages/forms/src/deprecated/widgets/CodeWidget/__snapshots__/CodeWidget.test.js.snap b/packages/forms/src/deprecated/widgets/CodeWidget/__snapshots__/CodeWidget.test.js.snap
index 727660c500..e7cbc79626 100644
--- a/packages/forms/src/deprecated/widgets/CodeWidget/__snapshots__/CodeWidget.test.js.snap
+++ b/packages/forms/src/deprecated/widgets/CodeWidget/__snapshots__/CodeWidget.test.js.snap
@@ -1,48 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CodeWidget should render ReactAce 1`] = `
-<ReactAce
-  className="tf-widget-code form-control"
-  cursorStart={1}
-  editorProps={Object {}}
-  enableBasicAutocompletion={false}
-  enableLiveAutocompletion={false}
-  enableSnippets={true}
-  focus={false}
-  fontSize={12}
-  height="500px"
-  highlightActiveLine={true}
-  maxLines={null}
-  minLines={null}
-  mode=""
-  name="brace-editor"
-  onChange={[Function]}
-  onLoad={[Function]}
-  onPaste={null}
-  onScroll={null}
-  readOnly={false}
-  scrollMargin={
-    Array [
-      0,
-      0,
-      0,
-      0,
-    ]
-  }
-  setOptions={
-    Object {
-      "enableBasicAutocompletion": true,
-      "enableLiveAutocompletion": true,
-      "enableSnippets": true,
+<AceCodeWidget>
+  <UNDEFINED
+    className="tf-widget-code form-control"
+    enableSnippets={true}
+    focus={false}
+    onChange={[Function]}
+    onLoad={[Function]}
+    setOptions={
+      Object {
+        "enableBasicAutocompletion": true,
+        "enableLiveAutocompletion": true,
+        "enableSnippets": true,
+      }
     }
-  }
-  showGutter={false}
-  showPrintMargin={false}
-  style={Object {}}
-  tabSize={4}
-  theme="chrome"
-  value=""
-  width="auto"
-  wrapEnabled={false}
-/>
+    showGutter={false}
+    showPrintMargin={false}
+    theme="chrome"
+    width="auto"
+  />
+</AceCodeWidget>
 `;
diff --git a/yarn.lock b/yarn.lock
index f862bf2393..7d10a9ae2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5376,7 +5376,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001248, caniuse-lite@^1.0.30001251:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001251:
   version "1.0.30001251"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz#6853a606ec50893115db660f82c094d18f096d85"
   integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A==
@@ -5814,7 +5814,7 @@ color@^3.0.0:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
-colorette@^1.2.1, colorette@^1.2.2, colorette@^1.3.0:
+colorette@^1.2.1, colorette@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af"
   integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==
@@ -7547,7 +7547,7 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.793, electron-to-chromium@^1.3.811:
+electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.811:
   version "1.3.816"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.816.tgz#ab6488b126de92670a6459fe3e746050e0c6276f"
   integrity sha512-/AvJPIJldO0NkwkfpUD7u1e4YEGRFBQpFuvl9oGCcVgWOObsZB1loxVGeVUJB9kmvfsBUUChPYdgRzx6+AKNyg==
@@ -12907,7 +12907,7 @@ node-notifier@^8.0.0:
     uuid "^8.3.0"
     which "^2.0.2"
 
-node-releases@^1.1.61, node-releases@^1.1.73, node-releases@^1.1.75:
+node-releases@^1.1.61, node-releases@^1.1.75:
   version "1.1.75"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.75.tgz#6dd8c876b9897a1b8e5a02de26afa79bb54ebbfe"
   integrity sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==