Continue TypeScript conversion

.babelrc.js

@@ -7,7 +7,6 @@ module.exports = {
       },
     ],
     "@babel/preset-react",
-    "@babel/preset-flow",
   ],
   env: {
     test: {
@@ -21,9 +20,7 @@ module.exports = {
           },
         ],
         "@babel/preset-react",
-        "@babel/preset-flow",
       ],
-      plugins: ["require-context-hook"],
     },
   },
 };

.eslintrc.js

@@ -3,12 +3,8 @@ module.exports = {
   extends: [
     "plugin:@thibaudcolas/eslint-plugin-cookbook/recommended",
     "plugin:compat/recommended",
-    "plugin:flowtype/recommended",
   ],
-  plugins: ["flowtype"],
   rules: {
-    "flowtype/space-after-type-colon": [0],
-    "flowtype/generic-spacing": [0],
     "@thibaudcolas/cookbook/react/require-default-props": [
       "error",
       { forbidDefaultForRequired: false },

.githooks/pre-commit.6.lint.sh

@@ -9,10 +9,3 @@ if [ -n "$SCSS_STAGED" ];
 then
   npx stylelint $SCSS_STAGED
 fi
-
-FLOW_STAGED=$(grep -e '.flowconfig$' <<< "$STAGED" || true)
-
-if [ -n "$JS_STAGED" ] || [ -n "$FLOW_STAGED" ];
-then
-  npx flow
-fi

.github/workflows/ci.yml

@@ -8,11 +8,11 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version-file: .nvmrc
-      - uses: actions/cache@v2
+      - uses: actions/cache@v3
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/.nvmrc') }}-${{ hashFiles('**/package-lock.json') }}
@@ -31,7 +31,7 @@ jobs:
       - uses: coverallsapp/github-action@master
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: reports
           path: public

.nvmrc

@@ -1 +1 @@
-16
+18

.storybook/main.js

@@ -1,11 +1,8 @@
 const fs = require("fs");
 const path = require("path");
 const webpack = require("webpack");
-const sass = require("sass");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
-require("dotenv").config();
-
 const pkg = require("../package.json");
 
 const examplesPath = path.join(__dirname, "..", "examples");
@@ -19,22 +16,34 @@ const SVG_ICONS = fs.readFileSync(
 const EMBEDLY_API_KEY_PROD = "d23c29a928fe4d89bda46b0291914c9c";
 const EMBEDLY_API_KEY = process.env.EMBEDLY_API_KEY || EMBEDLY_API_KEY_PROD;
 
-const SENTRY_DSN_PROD =
-  "https://[email protected]/251576";
-
 module.exports = {
   stories: ["../examples/**/*.story.*"],
   framework: "@storybook/react",
+  core: {
+    builder: {
+      name: "webpack5",
+      options: {
+        lazyCompilation: true,
+        fsCache: true,
+      },
+    },
+    disableTelemetry: true,
+  },
   staticDirs: ["../public"],
   webpackFinal: (config, { configType }) => {
     const isProduction = configType === "PRODUCTION";
 
-    // See http://webpack.github.io/docs/configuration.html#devtool
     config.devtool = "source-map";
 
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      // "react-dom": path.resolve("..", "node_modules", "react-dom"),
+      // "react-dom/client": path.resolve("..", "node_modules", "react-dom"),
+    };
+
     config.module.rules.push({
       test: /\.(scss|css)$/,
-      loaders: ["style-loader", "css-loader", "sass-loader"],
+      use: ["style-loader", "css-loader", "sass-loader"],
       include: path.resolve(__dirname, "../"),
     });
 
@@ -46,7 +55,6 @@ module.exports = {
         ),
         PKG_VERSION: JSON.stringify(pkg.version),
         SVG_ICONS: JSON.stringify(SVG_ICONS),
-        SENTRY_DSN: JSON.stringify(isProduction ? SENTRY_DSN_PROD : ""),
       }),
     );
 

.storybook/preview.js

@@ -1,20 +1,11 @@
 import "../examples/main.scss";
-import "../examples/utils/polyfills";
 
 const iconWrapper = document.createElement("div");
 iconWrapper.innerHTML = SVG_ICONS;
 document.body.appendChild(iconWrapper);
 
 document.querySelector("html").setAttribute("lang", "en");
 
-if (SENTRY_DSN) {
-  const Sentry = require("@sentry/browser");
-  Sentry.init({
-    dsn: SENTRY_DSN,
-    release: PKG_VERSION,
-  });
-}
-
 const consoleWarn = console.warn;
 
 console.warn = function filterWarnings(msg, ...args) {

README.md

@@ -20,7 +20,7 @@ Draftail aims for a mouse-free, keyboard-centric experience. Here are important
 - API to build custom controls for links, images, and more.
 - Compatibility with the [`draft-js-plugins`](https://www.draft-js-plugins.com) ecosystem to build more advanced extensions.
 
-> This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html), and measures performance and [code coverage](https://coveralls.io/github/springload/draftail). It uses [Flow](https://flow.org/) types. We also try to follow accessibility best practices (tested with [aXe](https://www.axe-core.org/)) – please [get in touch](https://github.com/springload/draftail/issues/149#issuecomment-389476151) if you can help us do better in this area.
+> This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html), and measures performance and [code coverage](https://coveralls.io/github/springload/draftail). We also try to follow accessibility best practices (tested with [aXe](https://www.axe-core.org/)) – please [get in touch](https://github.com/springload/draftail/issues/149#issuecomment-389476151) if you can help us do better in this area.
 
 ## Documentation
 

docs/CONTRIBUTING.md

@@ -48,8 +48,6 @@ nvm use
 npm run start
 # Runs linting.
 npm run lint
-# Start a Flow server for type errors.
-npx flow
 # Re-formats all of the files in the project (with Prettier).
 npm run format
 # Run tests in a watcher.

examples/blocks/EmbedBlock.test.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { shallow } from "enzyme";
+
 import EmbedBlock from "./EmbedBlock";
+
 describe("EmbedBlock", () => {
   it("renders", () => {
     expect(
@@ -20,6 +22,7 @@ describe("EmbedBlock", () => {
       ),
     ).toMatchSnapshot();
   });
+
   it("no data", () => {
     expect(
       shallow(
@@ -34,4 +37,4 @@ describe("EmbedBlock", () => {
       ),
     ).toMatchSnapshot();
   });
-});
+});

examples/blocks/EmbedBlock.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import type { ContentBlock } from "draft-js";
+
 import MediaBlock from "./MediaBlock";
 import type { BlockProps } from "./MediaBlock";
+
 type Props = {
   block: ContentBlock;
   blockProps: BlockProps;
@@ -15,6 +17,7 @@ const EmbedBlock = (props: Props) => {
   const { entity, onEditEntity, onRemoveEntity } = blockProps;
   const { url, title, thumbnail } = entity.getData();
   const isLoading = !url && !title && !thumbnail;
+
   return (
     <MediaBlock {...props} src={thumbnail} label={title} isLoading={isLoading}>
       <a
@@ -42,4 +45,4 @@ const EmbedBlock = (props: Props) => {
   );
 };
 
-export default EmbedBlock;
+export default EmbedBlock;

examples/blocks/ImageBlock.test.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { shallow } from "enzyme";
-import { DraftUtils } from "../../lib";
+
+import { DraftUtils } from "../../src/index";
+
 import ImageBlock from "./ImageBlock";
+
 describe("ImageBlock", () => {
   it("renders", () => {
     expect(
@@ -22,6 +25,7 @@ describe("ImageBlock", () => {
       ),
     ).toMatchSnapshot();
   });
+
   it("alt", () => {
     expect(
       shallow(
@@ -42,9 +46,11 @@ describe("ImageBlock", () => {
       ),
     ).toMatchSnapshot();
   });
+
   it("changeAlt", () => {
     jest.spyOn(DraftUtils, "updateBlockEntity");
     DraftUtils.updateBlockEntity.mockImplementation((e) => e);
+
     const onChange = jest.fn();
     const wrapper = shallow(
       <ImageBlock
@@ -62,19 +68,19 @@ describe("ImageBlock", () => {
         }}
       />,
     );
+
     const currentTarget = document.createElement("input");
     currentTarget.value = "new alt";
-    wrapper.find('[type="text"]').simulate("change", {
-      currentTarget,
-    });
+
+    wrapper.find('[type="text"]').simulate("change", { currentTarget });
+
     expect(onChange).toHaveBeenCalled();
     expect(DraftUtils.updateBlockEntity).toHaveBeenCalledWith(
       expect.any(Object),
       {},
-      expect.objectContaining({
-        alt: "new alt",
-      }),
+      expect.objectContaining({ alt: "new alt" }),
     );
+
     jest.restoreAllMocks();
   });
-});
+});

examples/blocks/ImageBlock.tsx

@@ -1,24 +1,26 @@
 import React, { Component } from "react";
 import type { ContentBlock } from "draft-js";
+
 import MediaBlock from "./MediaBlock";
 import type { BlockProps } from "./MediaBlock";
-import { DraftUtils } from "../../lib/index";
+import { DraftUtils } from "../../src/index";
+
 type Props = {
   block: ContentBlock;
   blockProps: BlockProps;
   textDirectionality: "RTL" | "LTR";
 };
+
 /**
  * Editor block to preview and edit images.
  */
-
 class ImageBlock extends Component<Props> {
   constructor(props: Props) {
     super(props);
+
     this.changeAlt = this.changeAlt.bind(this);
   }
 
-  /* :: changeAlt: (e: Event) => void; */
   changeAlt(e: Event) {
     const { block, blockProps } = this.props;
     const { editorState, onChange } = blockProps;
@@ -27,6 +29,7 @@ class ImageBlock extends Component<Props> {
       const data = {
         alt: e.currentTarget.value,
       };
+
       onChange(DraftUtils.updateBlockEntity(editorState, block, data));
     }
   }
@@ -35,6 +38,7 @@ class ImageBlock extends Component<Props> {
     const { blockProps } = this.props;
     const { entity, onEditEntity, onRemoveEntity } = blockProps;
     const { src, alt } = entity.getData();
+
     return (
       <MediaBlock {...this.props} src={src} label={alt || ""} isLoading={false}>
         <label className="ImageBlock__field">
@@ -61,4 +65,4 @@ class ImageBlock extends Component<Props> {
   }
 }
 
-export default ImageBlock;
+export default ImageBlock;