feat: add autoFocus props. #88

Author: jaywcjlove

README.md

@@ -105,6 +105,8 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
   width?: string;
   minWidth?: string;
   maxWidth?: string;
+  /** focus on the editor. */
+  autoFocus?: boolean;
   theme?: 'light' | 'dark';
   /**
    * Fired whenever a change occurs to the document.

package.json

@@ -57,18 +57,18 @@
     ]
   },
   "devDependencies": {
-    "@codemirror/lang-javascript": "0.19.1",
+    "@codemirror/lang-cpp": "0.19.1",
     "@codemirror/lang-html": "0.19.1",
+    "@codemirror/lang-java": "0.19.1",
+    "@codemirror/lang-javascript": "0.19.1",
     "@codemirror/lang-json": "0.19.1",
-    "@codemirror/lang-python": "0.19.2",
+    "@codemirror/lang-lezer": "0.19.1",
     "@codemirror/lang-markdown": "0.19.1",
-    "@codemirror/lang-xml": "0.19.1",
-    "@codemirror/lang-java": "0.19.1",
+    "@codemirror/lang-php": "0.19.1",
+    "@codemirror/lang-python": "0.19.2",
     "@codemirror/lang-rust": "0.19.1",
-    "@codemirror/lang-cpp": "0.19.1",
     "@codemirror/lang-sql": "0.19.3",
-    "@codemirror/lang-lezer": "0.19.1",
-    "@codemirror/lang-php": "0.19.1",
+    "@codemirror/lang-xml": "0.19.1",
     "@kkt/less-modules": "6.11.0",
     "@kkt/raw-modules": "6.11.0",
     "@kkt/scope-plugin-options": "6.11.0",

src/index.tsx

@@ -19,6 +19,8 @@ export interface ReactCodeMirrorProps extends Omit<EditorStateConfig, 'doc' | 'e
   width?: string;
   minWidth?: string;
   maxWidth?: string;
+  /** focus on the editor. */
+  autoFocus?: boolean;
   theme?: 'light' | 'dark';
   /**
    * Fired whenever a change occurs to the document.
@@ -40,11 +42,11 @@ export interface ReactCodeMirrorRef {
 }
 
 export default React.forwardRef<ReactCodeMirrorRef, ReactCodeMirrorProps>((props, ref) => {
-  const { className, value, selection, extensions = [], onChange, theme, height, minHeight, maxHeight, width, minWidth, maxWidth, ...other } = props;
+  const { className, value, selection, extensions = [], onChange, autoFocus, theme, height, minHeight, maxHeight, width, minWidth, maxWidth, ...other } = props;
   const editor = useRef<HTMLDivElement>(null);
   const { state, view, container, setContainer } = useCodeMirror({
     container: editor.current,
-    value, theme, height, minHeight, maxHeight, width, minWidth, maxWidth,
+    value, autoFocus, theme, height, minHeight, maxHeight, width, minWidth, maxWidth,
     selection,
     onChange,
     extensions,

src/useCodeMirror.ts

@@ -12,7 +12,7 @@ export interface UseCodeMirror extends ReactCodeMirrorProps {
 }
 
 export function useCodeMirror(props: UseCodeMirror) {
-  const { value, selection, onChange, extensions = [], theme = 'light', height = '', minHeight = '', maxHeight ='', width = '', minWidth = '', maxWidth = '' } = props;
+  const { value, selection, onChange, extensions = [], autoFocus, theme = 'light', height = '', minHeight = '', maxHeight ='', width = '', minWidth = '', maxWidth = '' } = props;
   const [container, setContainer] = useState(props.container);
   const [view, setView] = useState<EditorView>();
   const [state, setState] = useState<EditorState>();
@@ -73,5 +73,11 @@ export function useCodeMirror(props: UseCodeMirror) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [theme, extensions, height, minHeight, maxHeight, width, minWidth, maxWidth]);
 
+  useEffect(() => {
+    if (autoFocus && view) {
+      view.focus()
+    }
+  }, [autoFocus, view])
+
   return { state, setState, view, setView, container, setContainer }
 }

website/App.tsx

@@ -52,6 +52,7 @@ let count = 0
 
 export default function App() {
   const [mode, setMode] = useState('javascript');
+  const [autofocus, setAutofocus] = useState(false);
   const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>('light');
   const [code, setCode] = useState('');
   const [extensions, setExtensions] = useState<Extension[]>();
@@ -104,6 +105,7 @@ export default function App() {
         height={height}
         theme={theme}
         extensions={extensions}
+        autoFocus={autofocus}
         className={styles.codemirror}
         onChange={(value) => {
           // console.log('value:', value);
@@ -124,6 +126,10 @@ export default function App() {
         }}>
           change code
         </button>
+        <label>
+          <input type="checkbox" checked={autofocus} onChange={(evn) => setAutofocus(evn.target.checked)} />
+          autoFocus
+        </label>
       </div>
       <MarkdownPreview className={styles.markdown} source={DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '')} />
       <div className={styles.footer}>