add compressData and decompressData to the npm package

2022-07-23 16:11:10 +00:00
48 changed files with 128 additions and 8231 deletions
@@ -10,16 +10,11 @@ jobs:
    runs-on: ubuntu-latest
    steps:
-      - name: Checkout repository
+      - uses: actions/checkout@v2
-        uses: actions/checkout@v3
+      - uses: docker/build-push-action@v2
      - name: Login to DockerHub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Build and push
+          repository: excalidraw/excalidraw
-        uses: docker/build-push-action@v3
+          tag_with_ref: true
-        with:
+          tag_with_sha: true
          context: .
          push: true
          tags: excalidraw/excalidraw:latest
@@ -19,6 +19,7 @@ logs
 node_modules
 npm-debug.log*
 package-lock.json
 static
 yarn-debug.log*
 yarn-error.log*
 src/packages/excalidraw/types
@@ -1,20 +0,0 @@
 # Dependencies
 /node_modules
 # Production
 /build
 # Generated files
 .docusaurus
 .cache-loader
 # Misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
@@ -1,41 +0,0 @@
 # Website
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 ### Installation
 ```
 $ yarn
 ```
 ### Local Development
 ```
 $ yarn start
 ```
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 ### Build
 ```
 $ yarn build
 ```
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 ### Deployment
 Using SSH:
 ```
 $ USE_SSH=true yarn deploy
 ```
 Not using SSH:
 ```
 $ GIT_USER=<Your GitHub username> yarn deploy
 ```
 If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
@@ -1,3 +0,0 @@
 module.exports = {
  presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
 };
@@ -1,6 +0,0 @@
 ---
 sidebar_position: 1
 title: Overview
 ---
 In development. For now, refer to [excalidraw Readme](https://github.com/excalidraw/excalidraw/blob/master/README.md).
@@ -1,8 +0,0 @@
 ---
 sidebar_position: 1
 title: Introduction
 ---
 Want to integrate Excalidraw into your app? Head over to the [package docs](/docs/package/overview).
 If you're looking into the Excalidraw codebase itself, start [here](/docs/codebase/overview).
@@ -1,6 +0,0 @@
 ---
 sidebar_position: 1
 title: Overview
 ---
 In development. For now, refer to [excalidraw package readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md).
@@ -1,121 +0,0 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 /** @type {import('@docusaurus/types').Config} */
 const config = {
  title: "Excalidraw developer docs",
  tagline:
    "For Excalidraw contributors or those integrating the Excalidraw editor",
  url: "https://docs.excalidraw.com.com",
  baseUrl: "/",
  onBrokenLinks: "throw",
  onBrokenMarkdownLinks: "warn",
  favicon: "img/favicon.ico",
  organizationName: "Excalidraw", // Usually your GitHub org/user name.
  projectName: "excalidraw", // Usually your repo name.
  // Even if you don't use internalization, you can use this field to set useful
  // metadata like html lang. For example, if your site is Chinese, you may want
  // to replace "en" with "zh-Hans".
  i18n: {
    defaultLocale: "en",
    locales: ["en"],
  },
  presets: [
    [
      "classic",
      /** @type {import('@docusaurus/preset-classic').Options} */
      ({
        docs: {
          sidebarPath: require.resolve("./sidebars.js"),
          // Please change this to your repo.
          editUrl: "https://github.com/excalidraw/docs/tree/master/",
        },
        theme: {
          customCss: require.resolve("./src/css/custom.css"),
        },
      }),
    ],
  ],
  themeConfig:
    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
    ({
      navbar: {
        title: "Excalidraw Docs",
        logo: {
          alt: "Excalidraw Logo",
          src: "img/logo.svg",
        },
        items: [
          {
            type: "doc",
            docId: "get-started",
            position: "left",
            label: "Get started",
          },
          {
            to: "https://blog.excalidraw.com",
            label: "Blog",
            position: "left",
          },
          {
            to: "https://github.com/excalidraw/excalidraw",
            label: "GitHub",
            position: "right",
          },
        ],
      },
      footer: {
        style: "dark",
        links: [
          {
            title: "Docs",
            items: [
              {
                label: "Get Started",
                to: "/docs/get-started",
              },
            ],
          },
          {
            title: "Community",
            items: [
              {
                label: "Discord",
                href: "https://discord.gg/UexuTaE",
              },
              {
                label: "Twitter",
                href: "https://twitter.com/excalidraw",
              },
            ],
          },
          {
            title: "More",
            items: [
              {
                label: "Blog",
                to: "https://blog.excalidraw.com",
              },
              {
                label: "GitHub",
                to: "https://github.com/excalidraw/excalidraw",
              },
            ],
          },
        ],
        copyright: `Made with ❤️ Built with Docusaurus`,
      },
      prism: {
        theme: lightCodeTheme,
        darkTheme: darkCodeTheme,
      },
    }),
 };
 module.exports = config;
@@ -1,46 +0,0 @@
 {
  "name": "docs",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "docusaurus": "docusaurus",
    "start": "docusaurus start --port 3003",
    "build": "docusaurus build",
    "swizzle": "docusaurus swizzle",
    "deploy": "docusaurus deploy",
    "clear": "docusaurus clear",
    "serve": "docusaurus serve",
    "write-translations": "docusaurus write-translations",
    "write-heading-ids": "docusaurus write-heading-ids",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@docusaurus/core": "2.0.0-rc.1",
    "@docusaurus/preset-classic": "2.0.0-rc.1",
    "@mdx-js/react": "^1.6.22",
    "clsx": "^1.2.1",
    "prism-react-renderer": "^1.3.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@docusaurus/module-type-aliases": "2.0.0-rc.1",
    "@tsconfig/docusaurus": "^1.0.5",
    "typescript": "^4.7.4"
  },
  "browserslist": {
    "production": [
      ">0.5%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "node": ">=16.14"
  }
 }
@@ -1,31 +0,0 @@
 /**
 * Creating a sidebar enables you to:
 - create an ordered group of docs
 - render a sidebar for each doc of that group
 - provide next/previous navigation
 The sidebars can be generated from the filesystem, or explicitly defined here.
 Create as many sidebars as you want.
 */
 // @ts-check
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure
  tutorialSidebar: [{ type: "autogenerated", dirName: "." }],
  // But you can create a sidebar manually
  /*
  tutorialSidebar: [
    {
      type: 'category',
      label: 'Tutorial',
      items: ['hello'],
    },
  ],
   */
 };
 module.exports = sidebars;
@@ -1,62 +0,0 @@
 import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 const FeatureList = [
  {
    title: "Learn how Excalidraw works",
    Svg: require("@site/static/img/undraw_innovative.svg").default,
    description: (
      <>Want to contribute to Excalidraw but got lost in the codebase?</>
    ),
  },
  {
    title: "Integrate Excalidraw",
    Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
    description: (
      <>
        Want to build your own app powered by Excalidraw by don't know where to
        start?
      </>
    ),
  },
  {
    title: "Help us improve",
    Svg: require("@site/static/img/undraw_add_files.svg").default,
    description: (
      <>
        Are the docs missing something? Anything you had trouble understanding
        or needs an explanation? Come contribute to the docs to make them even
        better!
      </>
    ),
  },
 ];
 function Feature({ Svg, title, description }) {
  return (
    <div className={clsx("col col--4")}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
 }
 export default function HomepageFeatures() {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
 }
@@ -1,70 +0,0 @@
 import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.css";
 type FeatureItem = {
  title: string;
  Svg: React.ComponentType<React.ComponentProps<"svg">>;
  description: JSX.Element;
 };
 const FeatureList: FeatureItem[] = [
  {
    title: "Easy to Use",
    Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
    description: (
      <>
        Docusaurus was designed from the ground up to be easily installed and
        used to get your website up and running quickly.
      </>
    ),
  },
  {
    title: "Focus on What Matters",
    Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
    description: (
      <>
        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
        ahead and move your docs into the <code>docs</code> directory.
      </>
    ),
  },
  {
    title: "Powered by React",
    Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
    description: (
      <>
        Extend or customize your website layout by reusing React. Docusaurus can
        be extended while reusing the same header and footer.
      </>
    ),
  },
 ];
 function Feature({ title, Svg, description }: FeatureItem) {
  return (
    <div className={clsx("col col--4")}>
      <div className="text--center">
        <Svg className={styles.featureSvg} role="img" />
      </div>
      <div className="text--center padding-horiz--md">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </div>
  );
 }
 export default function HomepageFeatures(): JSX.Element {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
 }
@@ -1,11 +0,0 @@
 .features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
 }
 .featureSvg {
  height: 200px;
  width: 200px;
 }
@@ -1,43 +0,0 @@
 /**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */
 /* You can override the default Infima variables here. */
 :root {
  --ifm-color-primary: #6965db;
  --ifm-color-primary-dark: #5b57d1;
  --ifm-color-primary-darker: #5b57d1;
  --ifm-color-primary-darkest: #4a47b1;
  --ifm-color-primary-light: #5b57d1;
  --ifm-color-primary-lighter: #5b57d1;
  --ifm-color-primary-lightest: #5b57d1;
  --ifm-code-font-size: 95%;
 }
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
  --ifm-color-primary: #5650f0;
  --ifm-color-primary-dark: #4b46d8;
  --ifm-color-primary-darker: #4b46d8;
  --ifm-color-primary-darkest: #3e39be;
  --ifm-color-primary-light: #3f3d64;
  --ifm-color-primary-lighter: #3f3d64;
  --ifm-color-primary-lightest: #3f3d64;
 }
 .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
 }
 [data-theme="dark"] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
 }
 [data-theme="dark"] .navbar__logo {
  filter: invert(93%) hue-rotate(180deg);
 }
@@ -1,42 +0,0 @@
 import React from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "@site/src/components/Homepage";
 function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <header className={clsx("hero hero--primary", styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/get-started"
          >
            Get started
          </Link>
        </div>
      </div>
    </header>
  );
 }
 export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />"
    >
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
 }
@@ -1,27 +0,0 @@
 /**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */
 .heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
 }
 [data-theme="dark"] .heroBanner {
  color: #fff;
 }
@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
 }
 .buttons {
  display: flex;
  align-items: center;
  justify-content: center;
 }
@@ -1,42 +0,0 @@
 import React from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "@site/src/components/Homepage";
 function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <header className={clsx("hero hero--primary", styles.heroBanner)}>
      <div className="container">
        <h1 className="hero__title">{siteConfig.title}</h1>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/get-started"
          >
            Get started
          </Link>
        </div>
      </div>
    </header>
  );
 }
 export default function Home() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />"
    >
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
 }
@@ -1,7 +0,0 @@
 ---
 title: Markdown page example
 ---
 # Markdown page example
 You don't need React to write simple standalone pages.
@@ -1,4 +0,0 @@
 <svg viewBox="0 0 80 180" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
 	<path d="M22.197 150.382c-4.179-3.359-10.618-9.051-15.702-13.946l-4.01-3.813.734-5.009c.396-2.732 1.13-8.083 1.582-11.839.508-3.757 1.017-7.286 1.186-7.798.226-.683 0-1.025-.621-1.025-1.073 0-1.13.285 1.807-9.107a617.602 617.602 0 0 1 2.203-7.229c.113-.398.565-.569 1.073-.398.508.227.791.683.621 1.081-.169.455.113.911.565 1.082.621.227.565.683-.395 2.333-1.525 2.562-5.422 24.419-5.648 31.477-.17 5.009-.17 5.066 1.92 7.912 2.033 2.789 6.721 7.001 13.951 12.351 2.033 1.537 4.067 3.245 4.631 3.814.848 1.024 1.243.74 8.36-6.887 4.123-4.383 8.698-8.88 10.166-10.018l2.711-2.049-2.089-4.44c-1.13-2.391-5.705-11.612-10.223-20.377-9.433-18.442-7.513-16.678-18.47-16.849l-7.117-.056-2.372-2.733c-2.485-2.903-2.824-3.984-1.638-5.805.452-.627.791-1.651.791-2.277 0-1.025.395-1.196 2.655-1.309 1.412-.057 2.711-.228 2.88-.399.17-.171.396-3.7.565-7.855l.226-7.513-3.784-8.197C2.485 39.844 0 33.583 0 31.533c0-1.081.226-1.992.452-1.992.565 0 .565.057 23.553 48.382 10.675 22.426 20.785 43.544 22.479 47.016 1.695 3.472 3.22 6.659 3.333 7.115.113.512-3.785 4.439-9.998 9.961-5.591 5.008-10.505 9.562-10.957 10.074-1.299 1.594-3.219 1.082-6.665-1.707Zm1.921-65.458c-2.599-5.066-2.712-5.123-9.828-5.464-6.27-.342-6.383-.285-6.383.911 0 .683-.226 1.593-.508 2.049-.339.512-.113 1.423.678 2.675l1.242 1.935h5.649c3.106.057 6.664.285 7.907.512 1.243.228 2.316.342 2.429.285.113-.057-.452-1.366-1.186-2.903Zm-4.745-9.107c-.452-1.195-1.638-3.7-2.598-5.578-1.581-3.188-1.751-3.301-2.146-1.992-.226.797-.396 3.13-.452 5.236-.057 4.155-.17 4.098 4.575 4.383l1.525.057-.904-2.106Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
 	<path d="M23.892 136.835c-1.017-.74-1.299-1.48-1.299-3.358 0-2.22.169-2.562 1.694-3.188 1.525-.626 1.92-.569 3.671.626 2.316 1.594 2.373 1.992.678 4.554-1.468 2.22-2.937 2.618-4.744 1.366Zm3.219-2.049c.904-1.594.339-2.789-1.355-2.789-1.525 0-2.203 1.536-1.356 3.073.678 1.253 1.977 1.139 2.711-.284ZM59.306 124.028c0-.285-.339-.569-.735-.569-.339 0-1.299-1.594-2.033-3.529-2.259-5.92-24.852-50.943-24.908-49.52 0 .74-.339 1.252-.904 1.252-.791 0-.904-.456-.565-2.675.339-2.562.113-3.131-7.907-18.841-4.519-8.936-9.376-18.271-10.788-20.775-1.469-2.619-2.598-5.465-2.711-6.66-.17-2.049.056-2.334 4.97-6.603 2.824-2.504 6.439-5.635 8.02-7.058C28.862 2.504 32.194-.114 33.098.057c1.356.228 22.31 22.369 22.367 23.622 0 .569-1.017 9.221-2.259 19.238-2.147 17.076-4.18 37.055-3.954 38.99.169 1.196-.678 7.229-1.299 9.847-.509 2.05-.283 2.903 3.784 12.238 2.372 5.521 5.479 12.295 6.834 15.027 1.299 2.732 2.429 5.123 2.429 5.294 0 .17-.395.284-.847.284-.452 0-.847-.228-.847-.569ZM46.315 81.509c.621-3.984 1.864-13.547 2.767-21.231 1.751-14.116 3.785-29.769 4.349-33.753.339-1.993.113-2.391-3.558-6.489-6.382-7.229-13.16-14.344-15.476-16.165l-2.146-1.708-11.014 10.359C11.07 21.971 10.223 22.939 10.844 24.077c.339.626 3.22 5.92 6.383 11.725 3.163 5.806 7.342 13.547 9.263 17.19 1.977 3.7 3.784 6.887 4.123 7.058.395.228.508-5.521.395-17.759-.226-18.271-.169-18.328 1.638-17.929.226 0 .396 9.221.396 20.434v20.377l5.93 11.953c3.276 6.603 5.987 11.896 6.1 11.84.113-.058.678-3.416 1.243-7.457Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
 </svg>
@@ -1,7 +0,0 @@
 {
  // This file is not used in compilation. It is here just for a nice editor experience.
  "extends": "@tsconfig/docusaurus/tsconfig.json",
  "compilerOptions": {
    "baseUrl": "."
  }
 }
@@ -26,8 +26,8 @@
    "@tldraw/vec": "1.7.1",
    "@types/jest": "27.4.0",
    "@types/pica": "5.1.3",
-    "@types/react": "18.0.15",
+    "@types/react": "17.0.39",
-    "@types/react-dom": "18.0.6",
+    "@types/react-dom": "17.0.11",
    "@types/socket.io-client": "1.4.36",
    "browser-fs-access": "0.29.1",
    "clsx": "1.1.1",
@@ -47,8 +47,8 @@
    "png-chunks-extract": "1.0.0",
    "points-on-curve": "0.2.0",
    "pwacompat": "2.0.17",
-    "react": "18.2.0",
+    "react": "17.0.2",
-    "react-dom": "18.2.0",
+    "react-dom": "17.0.2",
    "react-scripts": "4.0.3",
    "roughjs": "4.5.2",
    "sass": "1.51.0",
@@ -1,21 +0,0 @@
 const { exec } = require("child_process");
 // get files changed between prev and head commit
 exec(`git diff --name-only HEAD^ HEAD`, async (error, stdout, stderr) => {
  if (error || stderr) {
    console.error(error);
    process.exit(1);
  }
  const changedFiles = stdout.trim().split("\n");
  const docFiles = changedFiles.filter((file) => {
    return file.indexOf("docs") >= 0;
  });
  if (!docFiles.length) {
    console.info("Skipping building docs as no valid diff found");
    process.exit(0);
  }
  // Exit code 1 to build the docs in ignoredBuildStep
  process.exit(1);
 });
@@ -1872,32 +1872,35 @@ class App extends React.Component<AppProps, AppState> {
          this.state,
        );
-        if (selectedElements.length === 1) {
+        if (
-          if (isLinearElement(selectedElements[0])) {
+          selectedElements.length === 1 &&
-            if (
+          isLinearElement(selectedElements[0])
-              !this.state.editingLinearElement ||
+        ) {
-              this.state.editingLinearElement.elementId !==
+          if (
-                selectedElements[0].id
+            !this.state.editingLinearElement ||
-            ) {
+            this.state.editingLinearElement.elementId !== selectedElements[0].id
-              this.history.resumeRecording();
+          ) {
-              this.setState({
+            this.history.resumeRecording();
-                editingLinearElement: new LinearElementEditor(
+            this.setState({
-                  selectedElements[0],
+              editingLinearElement: new LinearElementEditor(
-                  this.scene,
+                selectedElements[0],
-                ),
+                this.scene,
-              });
+              ),
            }
          } else {
            const selectedElement = selectedElements[0];
            this.startTextEditing({
              sceneX: selectedElement.x + selectedElement.width / 2,
              sceneY: selectedElement.y + selectedElement.height / 2,
              shouldBind: true,
            });
            event.preventDefault();
            return;
          }
        } else if (
          selectedElements.length === 1 &&
          !isLinearElement(selectedElements[0])
        ) {
          const selectedElement = selectedElements[0];
          this.startTextEditing({
            sceneX: selectedElement.x + selectedElement.width / 2,
            sceneY: selectedElement.y + selectedElement.height / 2,
            shouldBind: true,
          });
          event.preventDefault();
          return;
        }
      } else if (
        !event.ctrlKey &&
@@ -4,7 +4,6 @@ import "./Card.scss";
 export const Card: React.FC<{
  color: keyof OpenColor | "primary";
  children?: React.ReactNode;
 }> = ({ children, color }) => {
  return (
    <div
@@ -8,7 +8,6 @@ export const CheckboxItem: React.FC<{
  checked: boolean;
  onChange: (checked: boolean, event: React.MouseEvent) => void;
  className?: string;
  children?: React.ReactNode;
 }> = ({ children, checked, onChange, className }) => {
  return (
    <div
@@ -58,7 +58,6 @@ const ExportButton: React.FC<{
  onClick: () => void;
  title: string;
  shade?: number;
  children?: React.ReactNode;
 }> = ({ children, title, onClick, color, shade = 6 }) => {
  return (
    <button
@@ -308,7 +308,7 @@ const LayerUI = ({
          </Stack.Col>
          {!appState.viewModeEnabled && (
            <Section heading="shapes">
-              {(heading: React.ReactNode) => (
+              {(heading) => (
                <Stack.Col gap={4} align="start">
                  <Stack.Row
                    gap={1}
@@ -224,7 +224,7 @@ export const LibraryMenu = ({
  }, [setPublishLibSuccess, publishLibSuccess]);
  const onPublishLibSuccess = useCallback(
-    (data: { url: string; authorName: string }, libraryItems: LibraryItems) => {
+    (data, libraryItems: LibraryItems) => {
      setShowPublishLibraryDialog(false);
      setPublishLibSuccess({ url: data.url, authorName: data.authorName });
      const nextLibItems = libraryItems.slice();
@@ -68,7 +68,7 @@ export const MobileMenu = ({
    return (
      <FixedSideContainer side="top" className="App-top-bar">
        <Section heading="shapes">
-          {(heading: React.ReactNode) => (
+          {(heading) => (
            <Stack.Col gap={4} align="center">
              <Stack.Row gap={1} className="App-toolbar-container">
                <Island padding={1} className="App-toolbar">
@@ -8,7 +8,7 @@ import { useExcalidrawContainer, useDevice } from "./App";
 import { AppState } from "../types";
 import { THEME } from "../constants";
-export const Modal: React.FC<{
+export const Modal = (props: {
  className?: string;
  children: React.ReactNode;
  maxWidth?: number;
@@ -16,7 +16,7 @@ export const Modal: React.FC<{
  labelledBy: string;
  theme?: AppState["theme"];
  closeOnClickOutside?: boolean;
-}> = (props) => {
+}) => {
  const { theme = THEME.LIGHT, closeOnClickOutside = true } = props;
  const modalRoot = useBodyRoot(theme);
@@ -2,11 +2,12 @@ import React from "react";
 import { t } from "../i18n";
 import { useExcalidrawContainer } from "./App";
-export const Section: React.FC<{
+interface SectionProps extends React.HTMLProps<HTMLElement> {
  heading: string;
-  children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
+  children: React.ReactNode | ((header: React.ReactNode) => React.ReactNode);
-  className?: string;
+}
-}> = ({ heading, children, ...props }) => {
+
 export const Section = ({ heading, children, ...props }: SectionProps) => {
  const { id } = useExcalidrawContainer();
  const header = (
    <h2 className="visually-hidden" id={`${id}-${heading}-title`}>
@@ -1,14 +1,8 @@
-import { StrictMode } from "react";
+import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import ExcalidrawApp from "./excalidraw-app";
 import "./excalidraw-app/pwa";
 import "./excalidraw-app/sentry";
 window.__EXCALIDRAW_SHA__ = process.env.REACT_APP_GIT_SHA;
-const rootElement = document.getElementById("root")!;
+
-const root = createRoot(rootElement);
+ReactDOM.render(<ExcalidrawApp />, document.getElementById("root"));
 root.render(
  <StrictMode>
    <ExcalidrawApp />
  </StrictMode>,
 );
@@ -15,6 +15,11 @@ Please add the latest change on the top under the correct section.
 ### Excalidraw API
 #### Features
 - Added [`compressData`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#compressData) and [`decompressData`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#decompressData)
 - Added [`generateEncryptionKey`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#generateEncryptionKey)
 #### Breaking Changes
 - `setToastMessage` API is now renamed to `setToast` API and the function signature is also updated [#5427](https://github.com/excalidraw/excalidraw/pull/5427). You can also pass `duration` and `closable` attributes along with `message`.
@@ -1150,6 +1150,29 @@ loadSceneOrLibraryFromBlob(
 This function loads either scene or library data from the supplied blob. If the blob contains scene data, and you pass `localAppState`, `localAppState` value will be preferred over the `appState` derived from `blob`. Throws if blob doesn't contain neither valid scene data or library data.
 #### `compressData`
 ```js
 const encrytionKey = generateEncryptionKey();
 const buffer = await compressData(
  new TextEncoder().encode(
    serializeAsJSON(elements, appState, files, "database"),
  ),
  { encryptionKey },
 );
 ```
 #### `decompressData`
 ```js
 const { data: decodedBuffer } = await decompressData(new Uint8Array(payload), {
  decryptionKey,
 });
 ```
 #### `generateEncryptionKey`
 #### `getFreeDrawSvgPath`
 **How to use**
@@ -24,10 +24,7 @@ import {
  LibraryItems,
  PointerDownState as ExcalidrawPointerDownState,
 } from "../../../types";
-import {
+import { ExcalidrawElement } from "../../../element/types";
  ExcalidrawElement,
  NonDeletedExcalidrawElement,
 } from "../../../element/types";
 import { ImportedLibraryData } from "../../../data/types";
 declare global {
@@ -252,28 +249,20 @@ export default function App() {
    excalidrawAPI?.updateScene(sceneData);
  };
-  const onLinkOpen = useCallback(
+  const onLinkOpen = useCallback((element, event) => {
-    (
+    const link = element.link;
-      element: NonDeletedExcalidrawElement,
+    const { nativeEvent } = event.detail;
-      event: CustomEvent<{
+    const isNewTab = nativeEvent.ctrlKey || nativeEvent.metaKey;
-        nativeEvent: MouseEvent | React.PointerEvent<HTMLCanvasElement>;
+    const isNewWindow = nativeEvent.shiftKey;
-      }>,
+    const isInternalLink =
-    ) => {
+      link.startsWith("/") || link.includes(window.location.origin);
-      const link = element.link!;
+    if (isInternalLink && !isNewTab && !isNewWindow) {
-      const { nativeEvent } = event.detail;
+      // signal that we're handling the redirect ourselves
-      const isNewTab = nativeEvent.ctrlKey || nativeEvent.metaKey;
+      event.preventDefault();
-      const isNewWindow = nativeEvent.shiftKey;
+      // do a custom redirect, such as passing to react-router
-      const isInternalLink =
+      // ...
-        link.startsWith("/") || link.includes(window.location.origin);
+    }
-      if (isInternalLink && !isNewTab && !isNewWindow) {
+  }, []);
        // signal that we're handling the redirect ourselves
        event.preventDefault();
        // do a custom redirect, such as passing to react-router
        // ...
      }
    },
    [],
  );
  const onCopy = async (type: string) => {
    await exportToClipboard({
@@ -206,6 +206,9 @@ export {
  getFreeDrawSvgPath,
  exportToClipboard,
  mergeLibraryItems,
  generateEncryptionKey,
  compressData,
  decompressData,
 } from "../../packages/utils";
 export { isLinearElement } from "../../element/typeChecks";
@@ -40,8 +40,8 @@
    ]
  },
  "peerDependencies": {
-    "react": "^17.0.2 || ^18.2.0",
+    "react": "^17.0.2",
-    "react-dom": "^17.0.2 || ^18.2.0"
+    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.18.9",
@@ -79,6 +79,6 @@
    "pack": "yarn build:umd && yarn pack",
    "start": "webpack serve --config webpack.dev-server.config.js",
    "install:deps": "yarn install --frozen-lockfile && yarn --cwd ../../../",
-    "build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js && yarn gen:types"
+    "build:example": "EXAMPLE=true webpack --config webpack.dev-server.config.js"
  }
 }
@@ -193,6 +193,8 @@ export const exportToClipboard = async (
  }
 };
 export { decompressData, compressData } from "../data/encode";
 export { generateEncryptionKey } from "../data/encryption";
 export { serializeAsJSON, serializeLibraryAsJSON } from "../data/json";
 export {
  loadFromBlob,
@@ -752,6 +752,12 @@ export const renderElement = (
      generateElementShape(element, generator);
      if (renderConfig.isExporting) {
        const elementWithCanvas = generateElementWithCanvas(
          element,
          renderConfig,
        );
        drawElementFromCanvas(elementWithCanvas, rc, context, renderConfig);
      } else {
        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
        const cx = (x1 + x2) / 2 + renderConfig.scrollX;
        const cy = (y1 + y2) / 2 + renderConfig.scrollY;
@@ -763,12 +769,6 @@ export const renderElement = (
        context.translate(-shiftX, -shiftY);
        drawElementOnCanvas(element, rc, context, renderConfig);
        context.restore();
      } else {
        const elementWithCanvas = generateElementWithCanvas(
          element,
          renderConfig,
        );
        drawElementFromCanvas(elementWithCanvas, rc, context, renderConfig);
      }
      break;
@@ -2227,10 +2227,10 @@
  resolved "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz"
  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
-"@types/react-dom@18.0.6":
+"@types/react-dom@17.0.11":
-  version "18.0.6"
+  version "17.0.11"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
-  integrity sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==
+  integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
  dependencies:
    "@types/react" "*"
@@ -2241,7 +2241,7 @@
  dependencies:
    "@types/react" "^17"
-"@types/react@*":
+"@types/react@*", "@types/react@17.0.39":
  version "17.0.39"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
  integrity sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==
@@ -2250,15 +2250,6 @@
    "@types/scheduler" "*"
    csstype "^3.0.2"
 "@types/react@18.0.15":
  version "18.0.15"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe"
  integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow==
  dependencies:
    "@types/prop-types" "*"
    "@types/scheduler" "*"
    csstype "^3.0.2"
 "@types/react@^17":
  version "17.0.44"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
@@ -10170,13 +10161,14 @@ react-dev-utils@^11.0.3:
    strip-ansi "6.0.0"
    text-table "0.2.0"
-react-dom@18.2.0:
+react-dom@17.0.2:
-  version "18.2.0"
+  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
  dependencies:
    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    object-assign "^4.1.1"
    scheduler "^0.20.2"
 react-error-overlay@^6.0.9:
  version "6.0.9"
@@ -10264,12 +10256,13 @@ react-scripts@4.0.3:
  optionalDependencies:
    fsevents "^2.1.3"
-react@18.2.0:
+react@17.0.2:
-  version "18.2.0"
+  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
 read-pkg-up@^2.0.0:
  version "2.0.0"
@@ -10807,12 +10800,13 @@ saxes@^5.0.1:
  dependencies:
    xmlchars "^2.2.0"
-scheduler@^0.23.0:
+scheduler@^0.20.2:
-  version "0.23.0"
+  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
 schema-utils@^1.0.0:
  version "1.0.0"