feat: add optional indentWidth (#175)

uiwjs · Oct 16, 2024 · 30a6878 · 30a6878
1 parent 624e0f1
commit 30a6878
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/core/README.md b/core/README.md
@@ -294,6 +294,10 @@ interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextA
    */
   minHeight?: number;
   onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void | boolean;
+  /**
+   * The number of spaces for indentation when pressing tab key. Default: `2`.
+   */
+  indentWidth?: number
 }
 ```
 

diff --git a/core/src/Editor.tsx b/core/src/Editor.tsx
@@ -31,6 +31,10 @@ export interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HT
    */
   minHeight?: number;
   onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void | boolean;
+  /**
+   * The number of spaces for indentation when pressing tab key. Default: `2`.
+   */
+  indentWidth?: number;
 }
 
 export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((props, ref) => {
@@ -46,6 +50,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
     style,
     rehypePlugins,
     onChange,
+    indentWidth = 2,
     ...other
   } = props;
 
@@ -93,7 +98,7 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
   const keyDown = (evn: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (other.readOnly) return;
     if (!other.onKeyDown || other.onKeyDown(evn) !== false) {
-      shortcuts(evn);
+      shortcuts(evn, indentWidth);
     }
   };
 

diff --git a/core/src/shortcuts.ts b/core/src/shortcuts.ts
@@ -2,28 +2,30 @@ import React from 'react';
 import { stopPropagation } from './utils';
 import { SelectionText } from './SelectionText';
 
-export default function shortcuts(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+export default function shortcuts(e: React.KeyboardEvent<HTMLTextAreaElement>, indentWidth: number = 2) {
   const api = new SelectionText(e.target as HTMLTextAreaElement);
   /**
    * Support of shortcuts for React v16
    * https://github.com/uiwjs/react-textarea-code-editor/issues/128
    * https://blog.saeloun.com/2021/04/23/react-keyboard-event-code.html
    */
   const code = (e.code || e.nativeEvent.code).toLocaleLowerCase();
+  const indent = ' '.repeat(indentWidth);
+
   if (code === 'tab') {
     stopPropagation(e);
     if (api.start === api.end) {
       if (e.shiftKey) {
-        api.lineStarRemove('  ');
+        api.lineStarRemove(indent);
       } else {
-        api.insertText('  ').position(api.start + 2, api.end + 2);
+        api.insertText(indent).position(api.start + indentWidth, api.end + indentWidth);
       }
     } else if (api.getSelectedValue().indexOf('\n') > -1 && e.shiftKey) {
-      api.lineStarRemove('  ');
+      api.lineStarRemove(indent);
     } else if (api.getSelectedValue().indexOf('\n') > -1) {
-      api.lineStarInstert('  ');
+      api.lineStarInstert(indent);
     } else {
-      api.insertText('  ').position(api.start + 2, api.end);
+      api.insertText(indent).position(api.start + indentWidth, api.end);
     }
     api.notifyChange();
   } else if (code === 'enter') {