feat: optimize code.

uiwjs · Jan 3, 2023 · c1f128d · c1f128d
1 parent 6d2ea04
commit c1f128d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -137,11 +137,30 @@ const Demo = () => {
 }
 ```
 
+Set (`data-color-mode="dark"`) dark theme.
+
+```jsx
+import CodeEditor from '@uiw/react-textarea-code-editor';
+
+function App() {
+  return (
+    <CodeEditor
+      value="function add(a, b) {\n  return a + b;\n}"
+      data-color-mode="dark"
+    />
+  );
+}
+```
+
 ## Props
 
 ```ts
 interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   prefixCls?: string;
+  /**
+   * Support dark-mode/night-mode
+   */
+  ['data-color-mode']?: 'dark' | 'light';
   /**
    * Set what programming language the code belongs to.
    */

diff --git a/src/index.tsx b/src/index.tsx
@@ -85,39 +85,40 @@ export default React.forwardRef<HTMLTextAreaElement, TextareaCodeEditorProps>((p
     [prefixCls, language, htmlStr],
   );
 
+  const textareaProps: React.TextareaHTMLAttributes<HTMLTextAreaElement> = {
+    autoComplete: 'off',
+    autoCorrect: 'off',
+    spellCheck: 'false',
+    autoCapitalize: 'off',
+    ...other,
+    placeholder,
+    onKeyDown: (evn) => {
+      if (!other.onKeyDown || other.onKeyDown(evn) !== false) {
+        shortcuts(evn);
+      }
+    },
+    style: {
+      ...styles.editor,
+      ...styles.textarea,
+      ...contentStyle,
+      minHeight,
+      ...(placeholder && !value ? { WebkitTextFillColor: 'inherit' } : {}),
+    },
+    onChange: (evn) => {
+      setValue(evn.target.value);
+      onChange && onChange(evn);
+    },
+    className: `${prefixCls}-text`,
+    value: value,
+  };
+
   return (
     <div
       style={{ ...styles.container, ...style }}
       className={`${prefixCls} ${className || ''}`}
       data-color-mode={dataColorMode}
     >
-      <textarea
-        autoComplete="off"
-        autoCorrect="off"
-        spellCheck="false"
-        autoCapitalize="off"
-        {...other}
-        placeholder={placeholder}
-        onKeyDown={(evn) => {
-          if (!other.onKeyDown || other.onKeyDown(evn) !== false) {
-            shortcuts(evn);
-          }
-        }}
-        style={{
-          ...styles.editor,
-          ...styles.textarea,
-          ...contentStyle,
-          minHeight,
-          ...(placeholder && !value ? { WebkitTextFillColor: 'inherit' } : {}),
-        }}
-        ref={textRef}
-        onChange={(evn) => {
-          setValue(evn.target.value);
-          onChange && onChange(evn);
-        }}
-        className={`${prefixCls}-text`}
-        value={value}
-      />
+      <textarea {...textareaProps} ref={textRef} />
       {preView}
     </div>
   );