From 30a68789ed26bfe686016f82138286f43656af0d Mon Sep 17 00:00:00 2001
From: l9c <16722567+l9c@users.noreply.github.com>
Date: Thu, 17 Oct 2024 00:42:49 +0800
Subject: [PATCH] feat: add optional indentWidth (#175)

---
 core/README.md        |  4 ++++
 core/src/Editor.tsx   |  7 ++++++-
 core/src/shortcuts.ts | 14 ++++++++------
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/core/README.md b/core/README.md
index ea50fa2c..3d715d20 100644
--- 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
index ca9c1088..31203961 100644
--- 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
index 5a918518..a6c1c77f 100644
--- a/core/src/shortcuts.ts
+++ b/core/src/shortcuts.ts
@@ -2,7 +2,7 @@ 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
@@ -10,20 +10,22 @@ export default function shortcuts(e: React.KeyboardEvent<HTMLTextAreaElement>) {
    * 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') {