Allow to disable/enable escaping in AutosizeCodeEditor (#75)

* update escaping for CodeEditor * Update components changelog --------- Co-authored-by: asimonok <[email protected]>
VolkovLabs · Dec 12, 2024 · 6e3f595 · 6e3f595
1 parent 60f975e
commit 6e3f595
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 22 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.8.0 (2024-12-12)
+
+### Features / Enhancements
+
+- Allow to disable/enable escaping in AutosizeCodeEditor (#75)
+
 ## 3.7.0 (2024-12-02)
 
 ### Features / Enhancements

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.7.0"
+  "version": "3.8.0"
 }
diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.test.tsx
@@ -132,14 +132,44 @@ describe('AutosizeCodeEditor', () => {
 
   it('Should call onBlur if onBlur is provided', () => {
     const onBlur = jest.fn();
-    render(getComponent({ onBlur, value: '1line\n' }));
+    render(getComponent({ isEscaping: true, onBlur, value: '1line\n' }));
 
     fireEvent.blur(selectors.field());
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith('1line\\n');
   });
 
+  it('Should not escape value onBlur if option not specified', () => {
+    const onBlur = jest.fn();
+    render(getComponent({ isEscaping: false, onBlur, value: '1line\n' }));
+
+    fireEvent.blur(selectors.field());
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith('1line\n');
+  });
+
+  it('Should escape value onChange if value should be escaping', () => {
+    const onChange = jest.fn();
+    render(getComponent({ isEscaping: true, onChange, value: 'none' }));
+
+    fireEvent.change(selectors.field(), { target: { value: '1line\n' } });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith('1line\\n');
+  });
+
+  it('Should not escape value onChange if option not specified', () => {
+    const onChange = jest.fn();
+    render(getComponent({ isEscaping: false, onChange, value: 'none' }));
+
+    fireEvent.change(selectors.field(), { target: { value: '1line\n' } });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith('1line\n');
+  });
+
   it('Should update height if props changed', () => {
     const { rerender } = render(getComponent({}));
 

diff --git a/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx b/packages/components/src/components/AutosizeCodeEditor/AutosizeCodeEditor.tsx
@@ -13,8 +13,20 @@ import { Toolbar } from './Toolbar';
  * Properties
  */
 type Props = React.ComponentProps<typeof CodeEditor> & {
+  /**
+   * Min height
+   */
   minHeight?: number;
+
+  /**
+   * Max height
+   */
   maxHeight?: number;
+
+  /**
+   * Should escape value
+   */
+  isEscaping?: boolean;
 };
 
 /**
@@ -54,6 +66,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
   onEditorDidMount,
   monacoOptions,
   showMiniMap,
+  isEscaping = false,
   ...restProps
 }) => {
   /**
@@ -75,36 +88,39 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
    */
   const [height, setHeight] = useState(getHeightByValue(value, minHeight, maxHeight));
 
+  /**
+   * Set end of line to \n to all OS
+   */
+  const setEndLine = useCallback(
+    (editor: monacoType.editor.IStandaloneCodeEditor, monaco: typeof monacoType): void => {
+      if (isEscaping) {
+        const model = editor.getModel();
+        model?.setEOL(monaco.editor.EndOfLineSequence.LF);
+      }
+    },
+    [isEscaping]
+  );
+
   /**
    * Editor did mount handler
    */
   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);
-
+      setEndLine(editor, monaco);
       setMonacoEditor(editor);
       if (onEditorDidMount) {
         onEditorDidMount(editor, monaco);
       }
     },
-    [onEditorDidMount]
+    [setEndLine, onEditorDidMount]
   );
 
   /**
    * Modal editor did mount handler
    */
   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);
-
+      setEndLine(editor, monaco);
       setMonacoEditorModal(editor);
       if (monacoEditor) {
         const positionsParams: monacoType.Position | null = monacoEditor?.getPosition();
@@ -124,30 +140,30 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         onEditorDidMount(editor, monaco);
       }
     },
-    [monacoEditor, onEditorDidMount]
+    [setEndLine, monacoEditor, onEditorDidMount]
   );
 
   /**
    * Change value
    */
   const onChangeValue = useCallback(
     (value: string) => {
-      const currentValue = value.replaceAll('\n', '\\n');
+      const currentValue = isEscaping ? value.replaceAll('\n', '\\n') : value;
       onChange?.(currentValue);
       setHeight(getHeightByValue(value, minHeight, maxHeight));
     },
-    [maxHeight, minHeight, onChange]
+    [maxHeight, minHeight, onChange, isEscaping]
   );
 
   /**
    * onBlur handler
    */
   const onBlurUpdate = useCallback(
     (value: string) => {
-      const currentValue = value.replaceAll('\n', '\\n');
+      const currentValue = isEscaping ? value.replaceAll('\n', '\\n') : value;
       onBlur?.(currentValue);
     },
-    [onBlur]
+    [onBlur, isEscaping]
   );
 
   /**
@@ -169,7 +185,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
         setCurrentMonacoOptions={setCurrentMonacoOptions}
       />
       <CodeEditor
-        value={value.replaceAll('\\n', '\n')}
+        value={isEscaping ? value.replaceAll('\\n', '\n') : value}
         showMiniMap={isShowMiniMap}
         height={staticHeight ?? height}
         monacoOptions={currentMonacoOptions}
@@ -200,7 +216,7 @@ export const AutosizeCodeEditor: React.FC<Props> = ({
             setCurrentMonacoOptions={setCurrentMonacoOptions}
           />
           <CodeEditor
-            value={value.replaceAll('\\n', '\n')}
+            value={isEscaping ? value.replaceAll('\\n', '\n') : value}
             showMiniMap={isShowMiniMap}
             containerStyles={styles.modalEditor}
             monacoOptions={currentMonacoOptions}