Update AutosizeCodeEditor (#70)

* upd AutosizeCodeEditor * Fix typo --------- Co-authored-by: asimonok <[email protected]>
VolkovLabs · Nov 26, 2024 · 8e0b080 · 8e0b080
1 parent 5d8c53b
commit 8e0b080
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -89,5 +89,5 @@
     "typecheck": "tsc --emitDeclarationOnly false --noEmit"
   },
   "types": "dist/index.d.ts",
-  "version": "3.5.0"
+  "version": "3.5.1"
 }
diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx
@@ -17,6 +17,21 @@ const InTestIds = {
   field: createSelector('data-testid field'),
 };
 
+const defaultModel = {
+  setEOL: jest.fn(),
+};
+
+const defaultMonaco = {
+  editor: {
+    EndOfLineSequence: {
+      '0': 'LF',
+      '1': 'CRLF',
+      LF: 0,
+      CRLF: 1,
+    },
+  },
+} as any;
+
 const editor = {
   getPosition: () => ({
     lineNumber: 12,
@@ -27,6 +42,7 @@ const editor = {
   revealLineInCenter: (value: any) => value,
   getSelection: () => null,
   executeEdits: (source: any, edits: any) => true,
+  getModel: () => defaultModel,
 };
 
 /**
@@ -46,7 +62,7 @@ jest.mock('@grafana/ui', () => ({
     /**
      * Call the onEditorDidMount callback with the editor instance
      */
-    onEditorDidMount(editor, '');
+    onEditorDidMount(editor, defaultMonaco);
 
     return (
       <textarea

diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx
@@ -79,6 +79,12 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
    */
   const onEditorDidMountMain = useCallback(
     (editor: monacoType.editor.IStandaloneCodeEditor, monaco: typeof monacoType) => {
+      /**
+       * Set end of line to \n to all OS
+       */
+      const model = editor.getModel();
+      model?.setEOL(monaco.editor.EndOfLineSequence.LF);
+
       setMonacoEditor(editor);
       if (onEditorDidMount) {
         onEditorDidMount(editor, monaco);
@@ -92,6 +98,12 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
    */
   const modalEditorDidMount = useCallback(
     (editor: monacoType.editor.IStandaloneCodeEditor, monaco: typeof monacoType) => {
+      /**
+       * Set end of line to \n to all OS
+       */
+      const model = editor.getModel();
+      model?.setEOL(monaco.editor.EndOfLineSequence.LF);
+
       setMonacoEditorModal(editor);
       if (monacoEditor) {
         const positionsParams: monacoType.Position | null = monacoEditor?.getPosition();
@@ -133,13 +145,14 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         setCurrentMonacoOptions={setCurrentMonacoOptions}
       />
       <CodeEditor
-        value={value}
+        value={value.replaceAll('\\n', '\n')}
         showMiniMap={isShowMiniMap}
         height={staticHeight ?? height}
         monacoOptions={currentMonacoOptions}
         onEditorDidMount={onEditorDidMountMain}
         onChange={(value) => {
-          onChange?.(value);
+          const currentValue = value.replaceAll('\n', '\\n');
+          onChange?.(currentValue);
           setHeight(getHeightByValue(value, minHeight, maxHeight));
         }}
         {...restProps}
@@ -166,13 +179,14 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
             setCurrentMonacoOptions={setCurrentMonacoOptions}
           />
           <CodeEditor
-            value={value}
+            value={value.replaceAll('\\n', '\n')}
             showMiniMap={isShowMiniMap}
             containerStyles={styles.modalEditor}
             monacoOptions={currentMonacoOptions}
             onEditorDidMount={modalEditorDidMount}
             onChange={(value) => {
-              onChange?.(value);
+              const currentValue = value.replaceAll('\n', '\\n');
+              onChange?.(currentValue);
               setHeight(getHeightByValue(value, minHeight, maxHeight));
             }}
             {...restProps}

diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2021",
     "module": "esnext",
     "jsx": "react",
     "sourceMap": true,