feat: 提供 ts typings

Author: lxfriday

.eslintignore

@@ -1,4 +1,5 @@
 /config/
 /scripts/
 *.test.*
-/main.js
+/main.js
+*.d.ts

README.md

@@ -51,5 +51,6 @@ export default App;
 
 - [x] 自动注入 style 文件
 - [x] 提供对外的 props 配置
+- [x] 提供 ts types
 - [ ] 压缩代码
-- [ ] 提供 ts types
+- [ ] MathJax 更新优化

package.json

@@ -8,6 +8,7 @@
   "module": "lib/Lib.js",
   "homepage": "https://mdnice.com",
   "license": "GPL-3.0",
+  "typings": "./lib/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/zhning12/markdown-nice"

src/App.js

@@ -43,9 +43,9 @@ class App extends Component {
   }
 
   setEditorContent = () => {
-    const {text} = this.props;
-    if (text) {
-      this.props.content.setContent(text);
+    const {defaultText} = this.props;
+    if (defaultText) {
+      this.props.content.setContent(defaultText);
     }
   };
 
@@ -130,13 +130,13 @@ class App extends Component {
 
     return (
       <appContext.Consumer>
-        {({previewType, title, onTitleChange}) => (
+        {({previewType, defaultTitle, onTitleChange}) => (
           <div className="App">
-            <Navbar title={title} onTitleChange={onTitleChange} />
+            <Navbar title={defaultTitle} onTitleChange={onTitleChange} />
             <div className="text-container">
               <div className="text-box" onMouseOver={(e) => this.setCurrentIndex(1, e)}>
                 <CodeMirror
-                  value={this.props.text || this.props.content.content}
+                  value={this.props.content.content}
                   options={{
                     theme: "md-mirror",
                     keyMap: "sublime",

src/Lib.js

@@ -69,25 +69,18 @@ class Lib extends Component {
   }
 
   render() {
-    const {previewType, title, onTitleChange, text, onTextChange} = this.props;
+    const {previewType, defaultTitle, onTitleChange, defaultText, onTextChange} = this.props;
     const appCtx = {
       previewType,
-      title,
+      defaultTitle,
       onTitleChange,
     };
 
     return (
-      <Provider
-        content={content}
-        title={title}
-        userInfo={userInfo}
-        navbar={navbar}
-        dialog={dialog}
-        imageHosting={imageHosting}
-      >
+      <Provider content={content} userInfo={userInfo} navbar={navbar} dialog={dialog} imageHosting={imageHosting}>
         {isPC() ? (
           <appContext.Provider value={appCtx}>
-            <App text={text} onTextChange={onTextChange} />
+            <App defaultText={defaultText} onTextChange={onTextChange} />
           </appContext.Provider>
         ) : (
           <Result
@@ -115,17 +108,17 @@ const style = {
 };
 
 Lib.defaultProps = {
-  title: "Markdown Nice",
+  defaultTitle: "Markdown Nice",
   previewType: "mobile",
   onTitleChange: () => {},
-  text: "",
+  defaultText: "",
   onTextChange: () => {},
 };
 Lib.propTypes = {
-  title: PropTypes.node,
+  defaultTitle: PropTypes.node,
   previewType: PropTypes.oneOf(["mobile", "pc"]),
   onTitleChange: PropTypes.func,
-  text: PropTypes.string,
+  defaultText: PropTypes.string,
   onTextChange: PropTypes.func,
 };
 

src/index.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+declare const PreviewTypes: ["pc", "mobile"];
+
+export declare type PreviewType = (typeof PreviewTypes)[number];
+
+export interface MarkdownNiceProps {
+  /**
+   * 默认标题
+   */
+  defaultTitle?: React.ReactNode;
+  /**
+   * 右侧预览类型 pc 或者 mobile
+   */
+  previewType?: PreviewType;
+  /**
+   * 标题变化监听函数
+   */
+  onTitleChange?: (title: React.ReactNode) => void;
+  /**
+   * 默认编辑器内容
+   */
+  defaultText?: String;
+  /**
+   * 编辑器内容监听函数
+   */
+  onTextChange?: (text: String) => void;
+}
+
+declare class MarkdownNice extends React.Component<MarkdownNiceProps, any> {}
+
+export default MarkdownNice;