Merge pull request #222 from HarryChen0506/dev

Release 1.3.0

.eslintrc

@@ -1,33 +1,57 @@
 {
-  "parser": "babel-eslint",
-  "extends": "airbnb",
+  "extends": ["airbnb-typescript"],
   "env": {
     "browser": true,
     "jest": true
   },
   "rules": {
     "jsx-a11y/href-no-hash": [0],
     "jsx-a11y/click-events-have-key-events": [0],
-    "jsx-a11y/anchor-is-valid": [ "error", {
-      "components": [ "Link" ],
-      "specialLink": [ "to" ]
-    }],
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": ["Link"],
+        "specialLink": ["to"]
+      }
+    ],
+    "jsx-a11y/no-noninteractive-element-interactions": "off",
+    "jsx-a11y/mouse-events-have-key-events": "off",
     "jsx-a11y/no-static-element-interactions": [0],
+    "jsx-a11y/no-autofocus": "off",
+    "react/sort-comp": "off",
+    "react/no-array-index-key": "off",
+    "react/no-did-update-set-state": "off",
+    "react/no-access-state-in-setstate": "off",
     "react/react-in-jsx-scope": [0],
     "react/forbid-prop-types": [0],
-    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
+    "react/require-default-props": [0],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "react/destructuring-assignment": [0],
     "import/extensions": [0],
     "import/no-unresolved": [0],
     "arrow-body-style": ["error", "as-needed", { "requireReturnForObjectLiteral": true }],
     "arrow-parens": ["error", "always"],
-    "space-before-function-paren": ["error", {"anonymous": "always", "named": "never", "asyncArrow": "always"}],
+    "space-before-function-paren": ["error", { "anonymous": "always", "named": "never", "asyncArrow": "always" }],
     "object-curly-newline": ["error", { "consistent": true }],
     "function-paren-newline": ["error", "consistent"],
-    "class-methods-use-this": [0]
+    "class-methods-use-this": [0],
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error"],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "max-len": ["error", { "code": 200 }],
+    "no-alert": "off",
+    "max-classes-per-file": "off",
+    "no-plusplus": "off",
+    "no-restricted-syntax": "off",
+    "no-console": "off",
+    "default-case": "off",
+    "consistent-return": "off",
+    "no-return-assign": "off"
   },
   "parserOptions": {
-    "ecmaFeatures": {
-      "experimentalObjectRestSpread": true
-    }
+    "project": "./tsconfig.json"
   }
 }

.github/workflows/main.yml

@@ -47,12 +47,16 @@ jobs:
     - name: Coverage
       run: yarn run coverage
     - name: Upload bundles
-      uses: actions/upload-artifact@v1
+      uses: actions/upload-artifact@v2
       with:
         name: lib
-        path: lib
+        path: |
+          esm
+          cjs
+          lib
+          preview
     - name: Upload coverage
-      uses: actions/upload-artifact@v1
+      uses: actions/upload-artifact@v2
       with:
         name: coverage
         path: coverage

.gitignore

@@ -19,10 +19,11 @@ node_modules/
 .npm
 
 # dist
-lib/
-lib/*
-dist/
-dist/*
+esm
+cjs
+lib
+dist
+preview
 
 # Logs and databases #
 ######################

.prettierrc

@@ -1,6 +1,6 @@
 {
   "semi": true,
   "singleQuote": true,
-  "printWidth": 120,
+  "printWidth": 200,
   "trailingComma": "all"
 }

README.md

@@ -1,5 +1,4 @@
-react-markdown-editor-lite
-========
+# react-markdown-editor-lite
 
 [![NPM package][npm-version-image]][npm-url]
 [![NPM downloads][npm-downloads-image]][npm-url]
@@ -8,24 +7,25 @@ react-markdown-editor-lite
 
 [中文说明](README_CN.md)
 
-* A light-weight(20KB zipped) Markdown editor of React component
-* Supports TypeScript
-* Supports custom markdown parser
-* Full markdown support
-* Supports pluggable function bars
-* Full control over UI
-* Supports image uploading and dragging
-* Supports synced scrolling between editor and preview
-* 一款轻量的基于React的Markdown编辑器, 压缩后代码只有20KB
-* 支持TypeScript
-* 支持自定义Markdown解析器
-* 支持常用的Markdown编辑功能，如加粗，斜体等等...
-* 支持插件化的功能键
-* 界面可配置, 如只显示编辑区或预览区
-* 支持图片上传或拖拽
-* 支持编辑区和预览区同步滚动
+- A light-weight(20KB zipped) Markdown editor of React component
+- Supports TypeScript
+- Supports custom markdown parser
+- Full markdown support
+- Supports pluggable function bars
+- Full control over UI
+- Supports image uploading and dragging
+- Supports synced scrolling between editor and preview
+- 一款轻量的基于 React 的 Markdown 编辑器, 压缩后代码只有 20KB
+- 支持 TypeScript
+- 支持自定义 Markdown 解析器
+- 支持常用的 Markdown 编辑功能，如加粗，斜体等等...
+- 支持插件化的功能键
+- 界面可配置, 如只显示编辑区或预览区
+- 支持图片上传或拖拽
+- 支持编辑区和预览区同步滚动
 
 ## Demo
+
 Online demo <br>[https://harrychen0506.github.io/react-markdown-editor-lite/](https://harrychen0506.github.io/react-markdown-editor-lite/)
 
 Default configuration
@@ -36,7 +36,6 @@ Pluggable bars
 
 ![image](https://github.com//HarryChen0506/react-markdown-editor-lite/blob/master/image/react-markdown-editor-lite-v1.0.0-plugins.PNG?raw=true)
 
-
 ## Install
 
 ```shell
@@ -46,18 +45,20 @@ yarn add react-markdown-editor-lite
 ```
 
 ## Basic usage
+
 Following steps:
-* Import react-markdown-editor-lite
-* Register plugins if required
-* Initialize a markdown parser, such as markdown-it
-* Start usage
+
+- Import react-markdown-editor-lite
+- Register plugins if required
+- Initialize a markdown parser, such as markdown-it
+- Start usage
 
 ```js
 // import react, react-markdown-editor-lite, and a markdown parser you like
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import MarkdownIt from 'markdown-it'
-import MdEditor from 'react-markdown-editor-lite'
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import MarkdownIt from 'markdown-it';
+import MdEditor from 'react-markdown-editor-lite';
 // import style manually
 import 'react-markdown-editor-lite/lib/index.css';
 
@@ -68,24 +69,20 @@ import 'react-markdown-editor-lite/lib/index.css';
 const mdParser = new MarkdownIt(/* Markdown-it options */);
 
 // Finish!
-function handleEditorChange({html, text}) {    
-  console.log('handleEditorChange', html, text)
+function handleEditorChange({ html, text }) {
+  console.log('handleEditorChange', html, text);
 }
-export default (props) => {
+export default props => {
   return (
-    <MdEditor
-      style={{ height: "500px" }}
-      renderHTML={(text) => mdParser.render(text)}
-      onChange={handleEditorChange}
-    />
-  )
-}
+    <MdEditor style={{ height: '500px' }} renderHTML={text => mdParser.render(text)} onChange={handleEditorChange} />
+  );
+};
 ```
 
-* Props and configurations see [here](./docs/configure.md)
-* APIs see [here](./docs/api.md)
-* Plugins developer see [here](./docs/plugin.md)
-* Full demo see [src/demo/index.tsx](https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/src/demo/index.tsx)
+- Props and configurations see [here](./docs/configure.md)
+- APIs see [here](./docs/api.md)
+- Plugins developer see [here](./docs/plugin.md)
+- Full demo see [src/demo/index.tsx](https://github.com/HarryChen0506/react-markdown-editor-lite/blob/master/src/demo/index.tsx)
 
 ## Usage in server-side render
 
@@ -100,29 +97,55 @@ import dynamic from 'next/dynamic';
 import 'react-markdown-editor-lite/lib/index.css';
 
 const MdEditor = dynamic(() => import('react-markdown-editor-lite'), {
-  ssr: false
+  ssr: false,
 });
 
 export default function() {
-  return (
-    <MdEditor
-      style={{ height: "500px" }}
-      renderHTML={/* Render function */}
-    />
-  )
+  return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;
+}
+```
+
+With plugins:
+
+```js
+import dynamic from 'next/dynamic';
+import 'react-markdown-editor-lite/lib/index.css';
+
+const MdEditor = dynamic(
+  () => {
+    return new Promise(resolve => {
+      Promise.all([
+        import('react-markdown-editor-lite'),
+        import('./my-plugin'),
+        /** Add more plugins, and use below */
+      ]).then(res => {
+        res[0].default.use(res[1].default);
+        resolve(res[0].default);
+      });
+    });
+  },
+  {
+    ssr: false,
+  },
+);
+
+export default function() {
+  return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;
 }
 ```
 
 Full example see [here](https://codesandbox.io/s/next-js-80bne)
 
 ## Import in Browser
-Since 1.1.0, You can add `script` and `link` tags in your browser and use the global variable `ReactMarkdownEditorLite`. 
+
+Since 1.1.0, You can add `script` and `link` tags in your browser and use the global variable `ReactMarkdownEditorLite`.
 
 You can download these files directly from [![cdnjs][cdnjs-image]][cdnjs-url] [![jsdelivr][jsdelivr-image]][jsdelivr-url] [![unpkg][unpkg-image]][unpkg-url]
 
 Note: you should import react before `ReactMarkdownEditorLite`.
 
 For example, in webpack, you import ReactMarkdownEditorLite by `script` tag in your page, and write webpack config like this:
+
 ```js
 externals: {
   react: 'React',
@@ -138,22 +161,24 @@ externals: {
 * [In Next.js](https://codesandbox.io/s/next-js-80bne)
 
 ## Authors
+
 - ShuangYa [github/sylingd](https://github.com/sylingd)
 - HarryChen0506 [github/HarryChen0506](https://github.com/HarryChen0506)
 
 ## License
+
 [MIT](LICENSE)
 
 [npm-version-image]: https://img.shields.io/npm/v/react-markdown-editor-lite.svg
-[npm-downloads-image]: http://img.shields.io/npm/dm/react-markdown-editor-lite.svg?style=flat
+[npm-downloads-image]: https://img.shields.io/npm/dm/react-markdown-editor-lite.svg?style=flat
 [npm-url]: https://www.npmjs.com/package/react-markdown-editor-lite
 [workflow-image]: https://img.shields.io/github/workflow/status/HarryChen0506/react-markdown-editor-lite/main
 [workflow-url]: https://github.com/HarryChen0506/react-markdown-editor-lite/actions?query=workflow%3Amain
-[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
+[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat
 [license-url]: LICENSE
 [jsdelivr-image]: https://img.shields.io/jsdelivr/npm/hm/react-markdown-editor-lite
 [jsdelivr-url]: https://www.jsdelivr.com/package/npm/react-markdown-editor-lite?path=lib
 [cdnjs-image]: https://img.shields.io/cdnjs/v/react-markdown-editor-lite?style=flat
 [cdnjs-url]: https://cdnjs.com/libraries/react-markdown-editor-lite
 [unpkg-image]: https://img.shields.io/npm/v/react-markdown-editor-lite?label=unpkg&style=flat
-[unpkg-url]: https://unpkg.com/browse/react-markdown-editor-lite/lib/
+[unpkg-url]: https://unpkg.com/browse/react-markdown-editor-lite/lib/