[Fix] Shift+Tab on single line removes starting tab

[bombillazo]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @uiw/react-textarea-code-editor@2.1.1 for the project I'm working on.

Shift+Tab works when selecting multiple lines but not when the cursor is in a single line.

Here is the diff that solved my problem:

diff --git a/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js b/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js
index f019f90..0ea03b3 100644
--- a/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js
+++ b/node_modules/@uiw/react-textarea-code-editor/cjs/shortcuts.js
@@ -17,7 +17,11 @@ function shortcuts(e) {
   if (code === 'tab') {
     (0, _utils.stopPropagation)(e);
     if (api.start === api.end) {
-      api.insertText('  ').position(api.start + 2, api.end + 2);
+      if (e.shiftKey) {
+        api.lineStarRemove('  ');
+      } else {
+        api.insertText('  ').position(api.start + 2, api.end + 2);
+      }
     } else if (api.getSelectedValue().indexOf('\n') > -1 && e.shiftKey) {
       api.lineStarRemove('  ');
     } else if (api.getSelectedValue().indexOf('\n') > -1) {
diff --git a/node_modules/@uiw/react-textarea-code-editor/dist/editor.js b/node_modules/@uiw/react-textarea-code-editor/dist/editor.js
index c805142..94b166e 100644
--- a/node_modules/@uiw/react-textarea-code-editor/dist/editor.js
+++ b/node_modules/@uiw/react-textarea-code-editor/dist/editor.js
@@ -42953,7 +42953,7 @@ function shortcuts(e){var api=new SelectionText(e.target);/**
    * 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
-   */var code=(e.code||e.nativeEvent.code).toLocaleLowerCase();if(code==='tab'){stopPropagation(e);if(api.start===api.end){api.insertText('  ').position(api.start+2,api.end+2);}else if(api.getSelectedValue().indexOf('\n')>-1&&e.shiftKey){api.lineStarRemove('  ');}else if(api.getSelectedValue().indexOf('\n')>-1){api.lineStarInstert('  ');}else{api.insertText('  ').position(api.start+2,api.end);}api.notifyChange();}else if(code==='enter'){stopPropagation(e);var indent="\n".concat(api.getIndentText());api.insertText(indent).position(api.start+indent.length,api.start+indent.length);api.notifyChange();}else if(code&&/^(quote|backquote|bracketleft|digit9|comma)$/.test(code)&&api.getSelectedValue()){stopPropagation(e);var val=api.getSelectedValue();var txt='';switch(code){case'quote':txt="'".concat(val,"'");if(e.shiftKey){txt="\"".concat(val,"\"");}break;case'backquote':txt="`".concat(val,"`");break;case'bracketleft':txt="[".concat(val,"]");if(e.shiftKey){txt="{".concat(val,"}");}break;case'digit9':txt="(".concat(val,")");break;case'comma':txt="<".concat(val,">");break;}api.insertText(txt);api.notifyChange();}}
+   */var code=(e.code||e.nativeEvent.code).toLocaleLowerCase();if(code==='tab'){stopPropagation(e);if(api.start===api.end){if(e.shiftKey){api.lineStarRemove('  ');}else{api.insertText('  ').position(api.start + 2, api.end + 2);};}else if(api.getSelectedValue().indexOf('\n')>-1&&e.shiftKey){api.lineStarRemove('  ');}else if(api.getSelectedValue().indexOf('\n')>-1){api.lineStarInstert('  ');}else{api.insertText('  ').position(api.start+2,api.end);}api.notifyChange();}else if(code==='enter'){stopPropagation(e);var indent="\n".concat(api.getIndentText());api.insertText(indent).position(api.start+indent.length,api.start+indent.length);api.notifyChange();}else if(code&&/^(quote|backquote|bracketleft|digit9|comma)$/.test(code)&&api.getSelectedValue()){stopPropagation(e);var val=api.getSelectedValue();var txt='';switch(code){case'quote':txt="'".concat(val,"'");if(e.shiftKey){txt="\"".concat(val,"\"");}break;case'backquote':txt="`".concat(val,"`");break;case'bracketleft':txt="[".concat(val,"]");if(e.shiftKey){txt="{".concat(val,"}");}break;case'digit9':txt="(".concat(val,")");break;case'comma':txt="<".concat(val,">");break;}api.insertText(txt);api.notifyChange();}}
 ;// CONCATENATED MODULE: ./src/styles.ts
 var container={position:'relative',textAlign:'left',boxSizing:'border-box',padding:0,overflow:'hidden'};var styles_textarea={position:'absolute',top:0,left:0,height:'100%',width:'100%',resize:'none',color:'inherit',opacity:0.8,overflow:'hidden',MozOsxFontSmoothing:'grayscale',WebkitFontSmoothing:'antialiased',WebkitTextFillColor:'transparent'};var editor={margin:0,border:0,background:'none',boxSizing:'inherit',display:'inherit',fontFamily:'inherit',fontSize:'inherit',fontStyle:'inherit',fontVariantLigatures:'inherit',fontWeight:'inherit',letterSpacing:'inherit',lineHeight:'inherit',tabSize:'inherit',textIndent:'inherit',textRendering:'inherit',textTransform:'inherit',whiteSpace:'pre-wrap',wordBreak:'keep-all',overflowWrap:'break-word',outline:0};
 ;// CONCATENATED MODULE: ./src/style/index.less
diff --git a/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js b/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js
index 25bc764..7a4390d 100644
--- a/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js
+++ b/node_modules/@uiw/react-textarea-code-editor/esm/shortcuts.js
@@ -11,7 +11,11 @@ export default function shortcuts(e) {
   if (code === 'tab') {
     stopPropagation(e);
     if (api.start === api.end) {
-      api.insertText('  ').position(api.start + 2, api.end + 2);
+      if (e.shiftKey) {
+        api.lineStarRemove('  ');
+      } else {
+        api.insertText('  ').position(api.start + 2, api.end + 2);
+      }
     } else if (api.getSelectedValue().indexOf('\n') > -1 && e.shiftKey) {
       api.lineStarRemove('  ');
     } else if (api.getSelectedValue().indexOf('\n') > -1) {
diff --git a/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts b/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts
index 8e0a2c8..5a91851 100644
--- a/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts
+++ b/node_modules/@uiw/react-textarea-code-editor/src/shortcuts.ts
@@ -13,7 +13,11 @@ export default function shortcuts(e: React.KeyboardEvent<HTMLTextAreaElement>) {
   if (code === 'tab') {
     stopPropagation(e);
     if (api.start === api.end) {
-      api.insertText('  ').position(api.start + 2, api.end + 2);
+      if (e.shiftKey) {
+        api.lineStarRemove('  ');
+      } else {
+        api.insertText('  ').position(api.start + 2, api.end + 2);
+      }
     } else if (api.getSelectedValue().indexOf('\n') > -1 && e.shiftKey) {
       api.lineStarRemove('  ');
     } else if (api.getSelectedValue().indexOf('\n') > -1) {

This issue body was partially generated by patch-package.

[bombillazo]

Any feedback on this?

[jaywcjlove]

@bombillazo Welcome to submit PR, I think this feature can be added.

[bombillazo]

@jaywcjlove done https://github.com/uiwjs/react-textarea-code-editor/pull/150