chore: Compatability with React 17

lint

Author: tommoor

package.json

@@ -7,7 +7,7 @@
   "license": "BSD-3-Clause",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
+    "lint": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet",
     "start": "webpack-serve --config example/webpack.config.js",
     "build": "tsc",
     "prepublish": "yarn build"
@@ -20,7 +20,7 @@
     "copy-to-clipboard": "^3.0.8",
     "lodash": "^4.17.11",
     "markdown-it-container": "^3.0.0",
-    "outline-icons": "^1.21.0-3",
+    "outline-icons": "^1.21.0",
     "prismjs": "^1.19.0",
     "prosemirror-commands": "^1.1.4",
     "prosemirror-dropcursor": "^1.3.2",
@@ -45,9 +45,9 @@
     "typescript": "3.7.5"
   },
   "peerDependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "styled-components": "^5.1.0"
+    "react": "^16.0.0 || ^17.0.0",
+    "react-dom": "^16.0.0 ^17.0.0",
+    "styled-components": "^5.0.0"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.149",
@@ -67,20 +67,22 @@
     "@types/react-dom": "^16.9.5",
     "@types/refractor": "^2.8.0",
     "@types/styled-components": "^4.4.2",
-    "@typescript-eslint/eslint-plugin": "^2.17.0",
-    "@typescript-eslint/parser": "^2.17.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.9.0",
-    "eslint-config-react-app": "^2.1.0",
-    "eslint-plugin-import": "^2.9.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-react": "^7.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.0",
+    "@typescript-eslint/parser": "^4.0.0",
+    "eslint": "^7.13.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.0.8",
     "prettier": "^1.19.1",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "source-map-loader": "^0.2.4",
-    "styled-components": "^5.1.0",
+    "styled-components": "^5.2.1",
     "ts-loader": "^6.2.1",
     "webpack": "^4.29.6",
     "webpack-cli": "^3.2.3",
@@ -104,4 +106,4 @@
     "url": "https://github.com/outline/rich-markdown-editor/issues"
   },
   "homepage": "https://github.com/outline/rich-markdown-editor#readme"
-}
+}

src/index.tsx

@@ -1269,27 +1269,28 @@ const StyledEditor = styled("div")<{
     scrollbar-color: transparent transparent;
 
     &:hover {
-        scrollbar-color: ${props => props.theme.scrollbarThumb} ${props => props.theme.scrollbarBackground};
+      scrollbar-color: ${props => props.theme.scrollbarThumb}
+        ${props => props.theme.scrollbarBackground};
     }
 
     & ::-webkit-scrollbar {
-        height: 14px;
-        background-color: transparent;
+      height: 14px;
+      background-color: transparent;
     }
 
     &:hover ::-webkit-scrollbar {
-        background-color: ${props => props.theme.scrollbarBackground};
+      background-color: ${props => props.theme.scrollbarBackground};
     }
 
     & ::-webkit-scrollbar-thumb {
-        background-color: transparent;
-        border: 3px solid transparent;
-        border-radius: 7px;
+      background-color: transparent;
+      border: 3px solid transparent;
+      border-radius: 7px;
     }
 
     &:hover ::-webkit-scrollbar-thumb {
-        background-color: ${props => props.theme.scrollbarThumb};
-        border-color: ${props => props.theme.scrollbarBackground};
+      background-color: ${props => props.theme.scrollbarThumb};
+      border-color: ${props => props.theme.scrollbarBackground};
     }
   }
 

src/lib/markInputRule.ts

@@ -22,7 +22,7 @@ function getMarksBetween(start: number, end: number, state: EditorState) {
 export default function(
   regexp: RegExp,
   markType: MarkType,
-  getAttrs?: (match) => {}
+  getAttrs?: (match) => Record<string, unknown>
 ): InputRule {
   return new InputRule(
     regexp,

src/lib/markdown/serializer.js

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/camelcase, @typescript-eslint/no-use-before-define */
+/* eslint-disable @typescript-eslint/no-use-before-define */
 // https://raw.githubusercontent.com/ProseMirror/prosemirror-markdown/master/src/to_markdown.js
 // forked for table support