feat(basic-setup): add tabSize options (#400).

Author: jaywcjlove

extensions/basic-setup/README.md

@@ -107,6 +107,12 @@ export interface BasicSetupOptions extends MinimalSetupOptions {
   foldKeymap?: boolean;
   completionKeymap?: boolean;
   lintKeymap?: boolean;
+  /**
+   * Facet for overriding the unit by which indentation happens. Should be a string consisting either entirely of spaces or entirely of tabs. When not set, this defaults to 2 spaces
+   * https://codemirror.net/docs/ref/#language.indentUnit
+   * @default 2
+   */
+  tabSize?: number;
 }
 /**
 This is an extension value that just pulls together a number of

extensions/basic-setup/src/index.ts

@@ -20,6 +20,7 @@ import {
   syntaxHighlighting,
   defaultHighlightStyle,
   bracketMatching,
+  indentUnit,
   foldKeymap,
 } from '@codemirror/language';
 
@@ -45,6 +46,12 @@ export interface BasicSetupOptions extends MinimalSetupOptions {
   foldKeymap?: boolean;
   completionKeymap?: boolean;
   lintKeymap?: boolean;
+  /**
+   * Facet for overriding the unit by which indentation happens. Should be a string consisting either entirely of spaces or entirely of tabs. When not set, this defaults to 2 spaces
+   * https://codemirror.net/docs/ref/#language.indentUnit
+   * @default 2
+   */
+  tabSize?: number;
 }
 
 /**
@@ -126,6 +133,8 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   if (options.crosshairCursor !== false) extensions.push(crosshairCursor());
   if (options.highlightActiveLine !== false) extensions.push(highlightActiveLine());
   if (options.highlightSelectionMatches !== false) extensions.push(highlightSelectionMatches());
+  if (options.tabSize && typeof options.tabSize === 'number')
+    extensions.push(indentUnit.of(' '.repeat(options.tabSize)));
 
   return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
 };

package.json

@@ -23,11 +23,6 @@
   "engines": {
     "node": ">=16.0.0"
   },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx,less,json}": [
-      "prettier --write"
-    ]
-  },
   "devDependencies": {
     "@kkt/ncc": "^1.0.13",
     "@kkt/less-modules": "^7.2.0",

www/src/pages/extensions/basic-setup/index.tsx

@@ -37,6 +37,7 @@ export const BasicSetupDoc = () => {
   }, []);
 
   const [basicSetup, setBasicSetup] = useState<BasicSetupOptions>({});
+  console.log('basicSetup', basicSetup);
   return (
     <PageWarpper>
       <CodeMirror
@@ -48,6 +49,15 @@ export const BasicSetupDoc = () => {
         extensions={[langs.markdown()]}
       />
       <Warpper>
+        <select
+          value={basicSetup.tabSize}
+          onChange={(evn) => setBasicSetup({ ...basicSetup, tabSize: Number(evn.target.value || '2') })}
+        >
+          <option value={2}>2</option>
+          <option value={4}>4</option>
+          <option value={6}>6</option>
+          <option value={8}>8</option>
+        </select>
         <Options
           checked={basicSetup.lineNumbers !== false}
           onChange={(evn) => setBasicSetup({ ...basicSetup, lineNumbers: evn.target.checked })}