chore: update deps

Author: funn1est

.babelrc

@@ -1,5 +1,17 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "corejs": {
+          "version": "2",
+          "proposals": true
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
   "plugins": [
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-class-properties",

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - "8"
+  - "14"
 install:
   - npm i -g codecov
   - yarn

package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "scripts": {
     "precommit": "lint-staged",
-    "start": "webpack-dev-server --config webpack.config.dev.js --progress",
+    "start": "webpack serve --config webpack.config.dev.js --progress",
     "build": "webpack --config webpack.config.prod.js --progress",
     "test": "jest --config .jest.config.js",
     "test:watch": "npm run test -- --watch",
@@ -17,26 +17,30 @@
     "lint:style": "stylelint \"src/**/*.scss\" --syntax scss"
   },
   "dependencies": {
-    "antd": "3.18.2",
-    "axios": "^0.18.0",
+    "@tiptap/react": "^2.0.0-beta.61",
+    "@tiptap/starter-kit": "^2.0.0-beta.98",
+    "antd": "^3.26.20",
+    "axios": "^0.21.1",
     "classnames": "^2.2.5",
+    "easymde": "^2.15.0",
     "enquire-js": "^0.2.1",
     "immutable": "^4.0.0-rc.12",
+    "marked": "^3.0.0",
     "moment": "^2.22.1",
     "prop-types": "^15.6.1",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-helmet": "^5.2.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-helmet": "^6.1.0",
     "react-infinite-scroller": "^1.1.4",
-    "react-markdown": "^4.0.8",
     "react-redux": "^7.0.3",
     "react-router-config": "^5.0.0",
     "react-router-dom": "^5.0.0",
-    "react-simplemde-editor": "^4.0.1",
-    "redux": "4.0.1",
+    "react-simplemde-editor": "^5.0.1",
+    "redux": "4.1.1",
     "redux-actions": "^2.3.0",
     "redux-immutable": "^4.0.0",
-    "redux-thunk": "^2.2.0"
+    "redux-thunk": "^2.2.0",
+    "turndown": "^7.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -45,52 +49,61 @@
     "@babel/plugin-transform-runtime": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^9.5.1",
+    "autoprefixer": "^10.3.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.6",
     "babel-plugin-import": "^1.11.2",
-    "clean-webpack-plugin": "^2.0.2",
+    "clean-webpack-plugin": "^4.0.0-alpha.0",
+    "core-js": "^2.6.12",
     "css-loader": "^2.1.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.13.1",
     "enzyme-to-json": "^3.3.3",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-prettier": "^4.3.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-compat": "^3.1.1",
-    "eslint-plugin-import": "2.17.3",
+    "eslint-plugin-import": "2.24.1",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.13.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.0.6",
-    "husky": "^2.3.0",
-    "jest": "^24.8.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.2",
+    "husky": "^7.0.1",
+    "jest": "^27.0.6",
     "jest-localstorage-mock": "^2.2.0",
-    "less": "^3.0.1",
+    "less": "^3.13.1",
     "less-loader": "^5.0.0",
-    "lint-staged": "^8.1.7",
-    "mockdate": "^2.0.2",
-    "node-sass": "^4.12.0",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^1.17.1",
-    "react-hot-loader": "4.8.8",
+    "lint-staged": "^11.1.2",
+    "mkdirp": "^1.0.4",
+    "mockdate": "^3.0.5",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^4.3.0",
+    "prettier": "^2.3.2",
+    "react-hot-loader": "4.13.0",
     "redux-devtools-extension": "^2.13.2",
     "redux-mock-store": "^1.5.1",
-    "sass-loader": "7.1.0",
-    "sinon": "^7.3.2",
-    "style-loader": "0.23.1",
-    "stylelint": "10.0.1",
-    "stylelint-config-prettier": "^5.2.0",
-    "stylelint-config-standard": "^18.3.0",
-    "sw-precache-webpack-plugin": "^0.11.5",
-    "url-loader": "^1.0.1",
-    "webpack": "4.32.2",
-    "webpack-bundle-analyzer": "^3.3.2",
-    "webpack-cli": "3.3.2",
-    "webpack-dev-server": "^3.4.1",
-    "webpack-manifest-plugin": "^2.0.1",
-    "webpack-merge": "^4.1.2"
+    "sass": "^1.38.0",
+    "sass-loader": "^10.2.0",
+    "sinon": "^11.1.2",
+    "style-loader": "^2.0.0",
+    "stylelint": "13.13.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^22.0.0",
+    "sw-precache-webpack-plugin": "^1.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.46.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "webpack-merge": "^5.8.0"
   },
+  "browserslist": [
+    ">1%",
+    "last 4 versions",
+    "Firefox ESR",
+    "not ie < 9"
+  ],
   "lint-staged": {
     "src/**/*.{js,jsx}": [
       "prettier --write",

postcss.config.js

@@ -1,12 +1,6 @@
 module.exports = {
   plugins: [
     require('autoprefixer')({
-      browsers: [
-        '>1%',
-        'last 4 versions',
-        'Firefox ESR',
-        'not ie < 9',
-      ],
       flexbox: 'no-2009',
     }),
   ],

src/components/Tiptap/Tiptap.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import marked from 'marked';
+
+const Tiptap = ({ content, editable = false }) => {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: marked(content || ''),
+    editable,
+  });
+
+  return <EditorContent editor={editor} />;
+};
+
+Tiptap.propTypes = {
+  content: PropTypes.string.isRequired,
+  editable: PropTypes.bool,
+};
+
+export default Tiptap;

src/components/Tiptap/index.js

@@ -0,0 +1 @@
+export { default } from './Tiptap';

src/router.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { renderRoutes } from 'react-router-config';
-import { LocaleProvider } from 'antd';
+import { ConfigProvider } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import { asyncRender } from 'utils';
 import ScrollToTop from 'components/ScrollToTop';
@@ -65,11 +65,11 @@ const routerConfig = [
 
 const App = () => {
   return (
-    <LocaleProvider locale={zhCN}>
+    <ConfigProvider locale={zhCN}>
       <Router>
         <ScrollToTop>{renderRoutes(routerConfig)}</ScrollToTop>
       </Router>
-    </LocaleProvider>
+    </ConfigProvider>
   );
 };
 

src/routes/Topic/components/TopicContent.js

@@ -5,10 +5,10 @@ import { connect } from 'react-redux';
 import { Map } from 'immutable';
 import { timeUtils } from 'utils';
 import { Card, Button, Avatar, Switch, Icon, Tag, Divider } from 'antd';
-import Markdown from 'react-markdown';
 import { collectTopic } from '../TopicRedux';
 import { editTopic } from '../../Post/PostRedux';
 import styles from './TopicContent.scss';
+import Tiptap from '../../../components/Tiptap';
 
 export class TopicContentComponent extends React.Component {
   constructor(props) {
@@ -108,7 +108,7 @@ export class TopicContentComponent extends React.Component {
           ]
         }
       >
-        <Markdown className="markdown-body" source={topicData.get('content')} />
+        <Tiptap content={topicData.get('content')} />
       </Card>
     );
   }
@@ -129,7 +129,7 @@ const Collect = ({ loadingCollect, isCollect, onClickCollect }) => {
   );
 };
 
-const TopicContentCollect = connect(state => ({
+const TopicContentCollect = connect((state) => ({
   loadingCollect: state.getIn(['topic', 'loadingCollect']),
   isCollect: state.getIn(['topic', 'isCollect']),
 }))(Collect);
@@ -159,7 +159,7 @@ Collect.propTypes = {
 
 export default withRouter(
   connect(
-    state => ({
+    (state) => ({
       loading: state.getIn(['topic', 'loading']),
       topicData: state.getIn(['topic', 'topicData']),
       currentUser: state.getIn(['login', 'userData']),

src/routes/Topic/components/TopicReplies.js

@@ -5,9 +5,9 @@ import { Link } from 'react-router-dom';
 import { List as ImmutableList } from 'immutable';
 import { timeUtils } from 'utils';
 import { Card, List, Avatar, Tag, Divider } from 'antd';
-import Markdown from 'react-markdown';
 import TopicUp from './TopicUp';
 import styles from './TopicReplies.scss';
+import Tiptap from '../../../components/Tiptap';
 
 const Replies = ({
   repliesResult,
@@ -80,7 +80,7 @@ const Reply = ({
           <TopicUp replyId={replyId} onClickUp={onClickUp} />
         </div>
       }
-      description={<Markdown className="markdown-body" source={content} />}
+      description={<Tiptap content={content} />}
     />
   </List.Item>
 );
@@ -139,7 +139,7 @@ Reply.propTypes = {
   onClickUp: PropTypes.func.isRequired,
 };
 
-export default connect(state => ({
+export default connect((state) => ({
   repliesResult: state.getIn(['topic', 'repliesData', 'result']),
   authorName: state.getIn(['topic', 'topicData', 'author', 'loginname']),
 }))(Replies);

webpack.config.dev.js

@@ -1,30 +1,32 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const merge = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const base = require('./webpack.config');
 
 const dev = {
   mode: 'development',
-  entry: [
-    path.resolve('src', 'index.js'),
-  ],
+  entry: [path.resolve('src', 'index.js')],
   output: {
     path: path.resolve('dist'),
     publicPath: '/',
     filename: 'static/js/[name].js',
     chunkFilename: 'static/js/[name].min.js',
   },
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'eval-cheap-module-source-map',
   devServer: {
-    contentBase: './dist',
-    publicPath: '/',
-    inline: true,
+    compress: true,
     hot: true,
     historyApiFallback: true,
     host: '0.0.0.0',
-    disableHostCheck: true,
+    allowedHosts: 'all',
     port: 3000,
+    static: {
+      publicPath: './dist',
+    },
+    devMiddleware: {
+      publicPath: '/',
+    },
   },
   plugins: [
     new HtmlWebpackPlugin({

webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 
 module.exports = {
   resolve: {
-    extensions: ['.js', '.json', '.css', '.scss', '.less'],
+    extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.less'],
     modules: [path.resolve('src'), path.resolve('node_modules')],
   },
   module: {