feat: modify placeholder control props.

Author: jaywcjlove

src/useCodeMirror.ts

@@ -115,7 +115,20 @@ export function useCodeMirror(props: UseCodeMirror) {
       view.dispatch({ effects: StateEffect.reconfigure.of(getExtensions) });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [theme, extensions, height, minHeight, maxHeight, width, minWidth, maxWidth, editable, indentWithTab, basicSetup]);
+  }, [
+    theme,
+    extensions,
+    placeholder,
+    height,
+    minHeight,
+    maxHeight,
+    width,
+    minWidth,
+    maxWidth,
+    editable,
+    indentWithTab,
+    basicSetup,
+  ]);
 
   useEffect(() => {
     if (autoFocus && view) {

website/App.tsx

@@ -127,6 +127,7 @@ let count = 0;
 
 export default function App() {
   const [mode, setMode] = useState('javascript');
+  const [placeholder, setPlaceholder] = useState('Please enter the code.');
   const [autofocus, setAutofocus] = useState(false);
   const [editable, setEditable] = useState(true);
   const [theme, setTheme] = useState<ReactCodeMirrorProps['theme']>('light');
@@ -191,7 +192,7 @@ export default function App() {
         extensions={extensions}
         autoFocus={autofocus}
         className={styles.codemirror}
-        placeholder="Please enter the code."
+        placeholder={placeholder}
         onChange={(value) => {
           // console.log('value:', value);
         }}
@@ -232,6 +233,10 @@ export default function App() {
           <input type="checkbox" checked={editable} onChange={(evn) => setEditable(evn.target.checked)} />
           editable
         </label>
+        <label>
+          placeholder:
+          <input type="text" value={placeholder} onChange={(evn) => setPlaceholder(evn.target.value)} />
+        </label>
       </div>
       <MarkdownPreview
         className={styles.markdown}