chore: Update to the latest Cascadia and remove ttf

Bumps [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) from 1.3.8 to 1.3.9.
- [Release notes](https://github.com/webpack-contrib/mini-css-extract-plugin/releases)
- [Changelog](https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/CHANGELOG.md)
- [Commits](https://github.com/webpack-contrib/mini-css-extract-plugin/compare/v1.3.8...v1.3.9)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.dockerignore

@@ -1,10 +1,10 @@
 *
+!.env
+!.eslintrc.json
+!.npmrc
+!.prettierrc
+!package.json
 !public/
 !src/
-!.npmrc
-!.eslintrc.json
-!.prettierrc
-!package-lock.json
-!package.json
 !tsconfig.json
-!.env
+!yarn.lock

.github/dependabot.yml

@@ -1,36 +1,33 @@
 version: 2
 updates:
   - package-ecosystem: npm
-    directory: "/"
+    directory: /
     schedule:
       interval: weekly
       day: sunday
       time: "01:00"
-    open-pull-requests-limit: 99
     reviewers:
       - lipis
     assignees:
       - lipis
 
   - package-ecosystem: npm
-    directory: "/src/packages/excalidraw/"
+    directory: /src/packages/excalidraw/
     schedule:
       interval: weekly
       day: sunday
       time: "01:00"
-    open-pull-requests-limit: 99
     reviewers:
       - ad1992
     assignees:
       - ad1992
 
   - package-ecosystem: npm
-    directory: "/src/packages/utils/"
+    directory: /src/packages/utils/
     schedule:
       interval: weekly
       day: sunday
       time: "01:00"
-    open-pull-requests-limit: 99
     reviewers:
       - ad1992
     assignees:

.github/workflows/build-docker.yml

@@ -6,9 +6,8 @@ on:
       - master
 
 jobs:
-  build:
+  build-docker:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
       - run: docker build -t excalidraw .

.github/workflows/build-packages.yml

@@ -7,27 +7,23 @@ on:
   pull_request:
 
 jobs:
-  build:
+  packages:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
-
+      - uses: actions/checkout@v2
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14.x
-
       - name: Install dependencies
         run: |
-          npm ci
-          npm ci --prefix src/packages/excalidraw
-          npm ci --prefix src/packages/utils
-
+          yarn --frozen-lockfile
+          yarn --cwd src/packages/excalidraw
+          yarn --cwd src/packages/utils
       - name: Build @excalidraw/excalidraw
         run: |
-          npm run pack --prefix src/packages/excalidraw
-
+          yarn --cwd src/packages/excalidraw run pack
       - name: Build @excalidraw/utils
         run: |
-          npm run pack --prefix src/packages/utils
+          yarn --cwd src/packages/utils run pack

.github/workflows/cancel.yml

@@ -9,7 +9,6 @@ on:
 jobs:
   cancel:
     runs-on: ubuntu-latest
-
     timeout-minutes: 3
     steps:
       - uses: styfle/cancel-workflow-action@0.6.0

.github/workflows/lint.yml

@@ -7,16 +7,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
 
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14.x
 
       - name: Install and lint
         run: |
-          npm ci
-          npm run test:other
-          npm run test:code
-          npm run test:typecheck
+          yarn --frozen-lockfile
+          yarn test:other
+          yarn test:code
+          yarn test:typecheck

.github/workflows/locales-coverage.yml

@@ -3,7 +3,7 @@ name: Build locales coverage
 on:
   push:
     branches:
-      - "l10n_master"
+      - l10n_master
 
 jobs:
   locales:
@@ -15,13 +15,13 @@ jobs:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14.x
 
       - name: Create report file
         run: |
-          npm run locales-coverage
+          yarn locales-coverage
           FILE_CHANGED=$(git diff src/locales/percentages.json)
           if [ ! -z "${FILE_CHANGED}" ]; then
             git config --global user.name 'Excalidraw Bot'
@@ -33,7 +33,7 @@ jobs:
       - name: Construct comment body
         id: getCommentBody
         run: |
-          body=$(npm run locales-coverage:description | grep '^[^>]')
+          body=$(yarn locales-coverage:description | grep '^[^>]')
           body="${body//'%'/'%25'}"
           body="${body//$'\n'/'%0A'}"
           body="${body//$'\r'/'%0D'}"

.github/workflows/semantic-pr-title.yml

@@ -1,4 +1,4 @@
-name: "Semantic PR title"
+name: Semantic PR title
 
 on:
   pull_request_target:
@@ -8,9 +8,8 @@ on:
       - synchronize
 
 jobs:
-  main:
+  semantic:
     runs-on: ubuntu-latest
-
     steps:
       - uses: amannn/action-semantic-pull-request@v3.0.0
         env:

.github/workflows/sentry-production.yml

@@ -1,4 +1,4 @@
-name: New Sentry Production Release
+name: New Sentry production release
 
 on:
   push:
@@ -6,28 +6,23 @@ on:
       - master
 
 jobs:
-  release:
+  sentry:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v1.0.0
-
+      - uses: actions/checkout@v2
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14.x
-
       - name: Install and build
         run: |
-          npm ci
-          npm run build:app
+          yarn --frozen-lockfile
+          yarn build:app
         env:
           CI: true
-
       - name: Install Sentry
         run: |
           curl -sL https://sentry.io/get-cli/ | bash
-
       - name: Create new Sentry release
         run: |
           export SENTRY_RELEASE=$(sentry-cli releases propose-version)

.github/workflows/test.yml

@@ -5,16 +5,13 @@ on: pull_request
 jobs:
   test:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v1
-
+      - uses: actions/checkout@v2
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: 14.x
-
       - name: Install and test
         run: |
-          npm ci
-          npm run test:app
+          yarn --frozen-lockfile
+          yarn test:app

.gitignore

@@ -16,7 +16,7 @@ firebase
 logs
 node_modules
 npm-debug.log*
+package-lock.json
 static
 yarn-debug.log*
 yarn-error.log*
-yarn.lock

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "proseWrap": "never",
-  "trailingComma": "all"
-}

Dockerfile

@@ -2,13 +2,13 @@ FROM node:14-alpine AS build
 
 WORKDIR /opt/node_app
 
-COPY package.json package-lock.json ./
-RUN npm i --no-optional
+COPY package.json yarn.lock ./
+RUN yarn --ignore-optional
 
 ARG NODE_ENV=production
 
 COPY . .
-RUN npm run build:app:docker
+RUN yarn build:app:docker
 
 FROM nginx:1.17-alpine
 

README.md

@@ -86,6 +86,12 @@ Try out [`@excalidraw/excalidraw`](https://www.npmjs.com/package/@excalidraw/exc
 
 These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
 
+#### Requirements
+
+- [Node.js](https://nodejs.org/en/)
+- [Yarn](https://yarnpkg.com/getting-started/install)
+- [Git](https://git-scm.com/downloads)
+
 #### Clone the repo
 
 ```bash
@@ -94,14 +100,14 @@ git clone https://github.com/excalidraw/excalidraw.git
 
 #### Commands
 
-| Command               | Description                       |
-| --------------------- | --------------------------------- |
-| `npm install`         | Install the dependencies          |
-| `npm start`           | Run the project                   |
-| `npm run fix`         | Reformat all files with Prettier  |
-| `npm test`            | Run tests                         |
-| `npm run test:update` | Update test snapshots             |
-| `npm run test:code`   | Test for formatting with Prettier |
+| Command            | Description                       |
+| ------------------ | --------------------------------- |
+| `yarn`             | Install the dependencies          |
+| `yarn start`       | Run the project                   |
+| `yarn fix`         | Reformat all files with Prettier  |
+| `yarn test`        | Run tests                         |
+| `yarn test:update` | Update test snapshots             |
+| `yarn test:code`   | Test for formatting with Prettier |
 
 #### Docker Compose
 

docker-compose.yml

@@ -18,7 +18,7 @@ services:
     volumes:
       - ./:/opt/node_app/app:delegated
       - ./package.json:/opt/node_app/package.json
-      - ./package-lock.json:/opt/node_app/package-lock.json
+      - ./yarn.lock:/opt/node_app/yarn.lock
       - notused:/opt/node_app/app/node_modules
 
 volumes:

package.json

@@ -19,21 +19,20 @@
     ]
   },
   "dependencies": {
-    "@sentry/browser": "6.1.0",
-    "@sentry/integrations": "6.1.0",
+    "@sentry/browser": "6.2.0",
+    "@sentry/integrations": "6.2.0",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.5",
     "@types/jest": "26.0.20",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.1",
     "@types/socket.io-client": "1.4.35",
-    "browser-fs-access": "0.13.1",
+    "browser-fs-access": "0.14.0",
     "clsx": "1.1.1",
-    "firebase": "8.2.7",
+    "firebase": "8.2.9",
     "i18next-browser-languagedetector": "6.0.1",
     "lodash.throttle": "4.1.1",
     "nanoid": "3.1.20",
-    "node-sass": "4.14.1",
     "open-color": "1.8.0",
     "pako": "1.0.11",
     "png-chunk-text": "1.0.0",
@@ -43,18 +42,20 @@
     "pwacompat": "2.0.17",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-scripts": "4.0.2",
+    "react-scripts": "4.0.3",
     "roughjs": "4.3.1",
+    "sass": "1.32.8",
     "socket.io-client": "2.3.1",
     "typescript": "4.1.5"
   },
   "devDependencies": {
+    "@excalidraw/prettier-config": "1.0.2",
     "@types/lodash.throttle": "4.1.6",
     "@types/pako": "1.0.1",
     "@types/resize-observer-browser": "0.1.5",
-    "eslint-config-prettier": "7.2.0",
+    "eslint-config-prettier": "8.1.0",
     "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.3.0",
+    "firebase-tools": "9.5.0",
     "husky": "4.3.8",
     "jest-canvas-mock": "2.3.1",
     "lint-staged": "10.5.4",
@@ -63,7 +64,7 @@
     "rewire": "5.0.0"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.0.0"
   },
   "homepage": ".",
   "husky": {
@@ -78,28 +79,29 @@
     "resetMocks": false
   },
   "name": "excalidraw",
+  "prettier": "@excalidraw/prettier-config",
   "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
     "build:app:docker": "REACT_APP_DISABLE_SENTRY=true react-scripts build",
     "build:app": "REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build": "npm run build:app && npm run build:version",
+    "build": "yarn build:app && yarn build:version",
     "eject": "react-scripts eject",
-    "fix:code": "npm run test:code -- --fix",
-    "fix:other": "npm run prettier -- --write",
-    "fix": "npm run fix:other && npm run fix:code",
+    "fix:code": "yarn test:code --fix",
+    "fix:other": "yarn prettier --write",
+    "fix": "yarn fix:other && yarn fix:code",
     "locales-coverage": "node scripts/build-locales-coverage.js",
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "react-scripts start",
-    "test:all": "npm run test:typecheck && npm run test:code && npm run test:other && npm run test:app -- --watchAll=false",
+    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
     "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --ignore-path .gitignore --ext .js,.ts,.tsx .",
     "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
-    "test:other": "npm run prettier -- --list-different",
+    "test:other": "yarn prettier --list-different",
     "test:typecheck": "tsc",
-    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
-    "test": "npm run test:app"
+    "test:update": "yarn test:app --updateSnapshot --watchAll=false",
+    "test": "yarn test:app"
   }
 }

public/fonts.css

@@ -1,7 +1,7 @@
 /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
 @font-face {
   font-family: "Virgil";
-  src: url("FG_Virgil.woff2");
+  src: url("Virgil.woff2");
   font-display: swap;
 }
 

public/index.html

@@ -60,7 +60,7 @@
 
     <link
       rel="preload"
-      href="FG_Virgil.woff2"
+      href="Virgil.woff2"
       as="font"
       type="font/woff2"
       crossorigin="anonymous"
@@ -86,7 +86,9 @@
     />
 
     <link rel="stylesheet" href="fonts.css" type="text/css" />
-
+    <script>
+      window.EXCALIDRAW_ASSET_PATH = "/";
+    </script>
     <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script
       async

scripts/build-node.js

@@ -5,7 +5,7 @@
 
 // In order to run:
 //   npm install canvas # please do not check it in
-//   npm run build-node
+//   yarn build-node
 //   node build/static/js/build-node.js
 //   open test.png
 

src/actions/actionExport.tsx

@@ -5,6 +5,7 @@ import { ProjectName } from "../components/ProjectName";
 import { ToolButton } from "../components/ToolButton";
 import "../components/ToolIcon.scss";
 import { Tooltip } from "../components/Tooltip";
+import { DarkModeToggle, Appearence } from "../components/DarkModeToggle";
 import { loadFromJSON, saveAsJSON } from "../data";
 import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
@@ -204,3 +205,31 @@ export const actionLoadScene = register({
     />
   ),
 });
+
+export const actionExportWithDarkMode = register({
+  name: "exportWithDarkMode",
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, exportWithDarkMode: value },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        marginTop: "-45px",
+        marginBottom: "10px",
+      }}
+    >
+      <DarkModeToggle
+        value={appState.exportWithDarkMode ? "dark" : "light"}
+        onChange={(appearance: Appearence) => {
+          updateData(appearance === "dark");
+        }}
+        title={t("labels.toggleExportColorScheme")}
+      />
+    </div>
+  ),
+});

src/actions/types.ts

@@ -85,7 +85,8 @@ export type ActionName =
   | "alignHorizontallyCentered"
   | "distributeHorizontally"
   | "distributeVertically"
-  | "viewMode";
+  | "viewMode"
+  | "exportWithDarkMode";
 
 export interface Action {
   name: ActionName;

src/appState.ts

@@ -40,6 +40,7 @@ export const getDefaultAppState = (): Omit<
     errorMessage: null,
     exportBackground: true,
     exportEmbedScene: false,
+    exportWithDarkMode: false,
     fileHandle: null,
     gridSize: null,
     height: window.innerHeight,
@@ -118,6 +119,7 @@ const APP_STATE_STORAGE_CONF = (<
   errorMessage: { browser: false, export: false },
   exportBackground: { browser: true, export: false },
   exportEmbedScene: { browser: true, export: false },
+  exportWithDarkMode: { browser: true, export: false },
   fileHandle: { browser: false, export: false },
   gridSize: { browser: true, export: true },
   height: { browser: false, export: false },

src/components/App.tsx

@@ -672,19 +672,24 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     scene.appState = {
       ...scene.appState,
-      ...calculateScrollCenter(
-        scene.elements,
-        {
-          ...scene.appState,
-          width: this.state.width,
-          height: this.state.height,
-          offsetTop: this.state.offsetTop,
-          offsetLeft: this.state.offsetLeft,
-        },
-        null,
-      ),
       isLoading: false,
     };
+    if (initialData?.scrollToCenter) {
+      scene.appState = {
+        ...scene.appState,
+        ...calculateScrollCenter(
+          scene.elements,
+          {
+            ...scene.appState,
+            width: this.state.width,
+            height: this.state.height,
+            offsetTop: this.state.offsetTop,
+            offsetLeft: this.state.offsetLeft,
+          },
+          null,
+        ),
+      };
+    }
 
     this.resetHistory();
     this.syncActionResult({
@@ -972,6 +977,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       },
       {
         renderOptimizations: true,
+        renderScrollbars: !isMobile(),
       },
     );
     if (scrollBars) {

src/components/DarkModeToggle.tsx

@@ -10,13 +10,18 @@ export type Appearence = "light" | "dark";
 export const DarkModeToggle = (props: {
   value: Appearence;
   onChange: (value: Appearence) => void;
+  title?: string;
 }) => {
+  const title = props.title
+    ? props.title
+    : props.value === "dark"
+    ? t("buttons.lightMode")
+    : t("buttons.darkMode");
+
   return (
     <label
       className={`ToolIcon ToolIcon_type_floating ToolIcon_size_M`}
-      title={
-        props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode")
-      }
+      title={title}
     >
       <input
         className="ToolIcon_type_checkbox ToolIcon_toggle_opaque"
@@ -25,11 +30,7 @@ export const DarkModeToggle = (props: {
           props.onChange(event.target.checked ? "dark" : "light")
         }
         checked={props.value === "dark"}
-        aria-label={
-          props.value === "dark"
-            ? t("buttons.lightMode")
-            : t("buttons.darkMode")
-        }
+        aria-label={title}
       />
       <div className="ToolIcon__icon">
         {props.value === "light" ? ICONS.MOON : ICONS.SUN}

src/components/ExportDialog.tsx

@@ -19,6 +19,9 @@ import { ToolButton } from "./ToolButton";
 const scales = [1, 2, 3];
 const defaultScale = scales.includes(devicePixelRatio) ? devicePixelRatio : 1;
 
+const supportsContextFilters =
+  "filter" in document.createElement("canvas").getContext("2d")!;
+
 export const ErrorCanvasPreview = () => {
   return (
     <div>
@@ -128,6 +131,8 @@ const ExportModal = ({
   return (
     <div className="ExportDialog">
       <div className="ExportDialog__preview" ref={previewRef} />
+      {supportsContextFilters &&
+        actionManager.renderAction("exportWithDarkMode")}
       <Stack.Col gap={2} align="center">
         <div className="ExportDialog__actions">
           <Stack.Row gap={2}>

src/constants.ts

@@ -1,4 +1,5 @@
 import { FontFamily } from "./element/types";
+import cssVariables from "./css/variables.module.scss";
 
 export const APP_NAME = "Excalidraw";
 
@@ -107,3 +108,5 @@ export const MODES = {
   ZEN: "zenMode",
   GRID: "gridMode",
 };
+
+export const APPEARANCE_FILTER = cssVariables.appearanceFilter;

src/css/theme.scss

@@ -1,4 +1,5 @@
 @import "open-color/open-color.scss";
+@import "./variables.module.scss";
 
 :root {
   --appearance-filter: none;
@@ -45,7 +46,7 @@
   }
 
   &.Appearance_dark {
-    --appearance-filter: invert(93%) hue-rotate(180deg);
+    --appearance-filter: #{$appearance-filter};
     --button-destructive-bg-color: #5a0000;
     --button-destructive-color: #{$oc-red-3};
     --button-gray-1: #363636;

src/css/variables.module.scss

@@ -2,7 +2,9 @@
 
 // keep up to date with is-mobile.tsx
 $is-mobile-query: "(max-width: 600px), (max-height: 500px) and (max-width: 1000px)";
+$appearance-filter: "invert(93%) hue-rotate(180deg)";
 
 :export {
   isMobileQuery: unquote($is-mobile-query);
+  appearanceFilter: unquote($appearance-filter);
 }

src/data/index.ts

@@ -41,6 +41,7 @@ export const exportCanvas = async (
   if (type === "svg" || type === "clipboard-svg") {
     const tempSvg = exportToSvg(elements, {
       exportBackground,
+      exportWithDarkMode: appState.exportWithDarkMode,
       viewBackgroundColor,
       exportPadding,
       scale,

src/data/types.ts

@@ -15,6 +15,7 @@ export interface ImportedDataState {
   source?: string;
   elements?: DataState["elements"] | null;
   appState?: Partial<DataState["appState"]> | null;
+  scrollToCenter?: boolean;
 }
 
 export interface LibraryData {

src/excalidraw-app/collab/CollabWrapper.tsx

@@ -256,6 +256,7 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
         if (elements) {
           scenePromise.resolve({
             elements,
+            scrollToCenter: true,
           });
         }
       } catch (error) {
@@ -307,7 +308,10 @@ class CollabWrapper extends PureComponent<Props, CollabState> {
                 init: true,
               });
               // noop if already resolved via init from firebase
-              scenePromise.resolve({ elements: reconciledElements });
+              scenePromise.resolve({
+                elements: reconciledElements,
+                scrollToCenter: true,
+              });
             }
             break;
           }

src/excalidraw-app/index.tsx

@@ -13,7 +13,7 @@ import { ExcalidrawImperativeAPI } from "../components/App";
 import { ErrorDialog } from "../components/ErrorDialog";
 import { TopErrorBoundary } from "../components/TopErrorBoundary";
 import { APP_NAME, EVENT, TITLE_TIMEOUT, VERSION_TIMEOUT } from "../constants";
-import { ImportedDataState } from "../data/types";
+import { DataState, ImportedDataState } from "../data/types";
 import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
@@ -75,7 +75,11 @@ const initializeScene = async (opts: {
 
   const initialData = importFromLocalStorage();
 
-  let scene = await loadScene(null, null, initialData);
+  let scene: DataState & { scrollToCenter?: boolean } = await loadScene(
+    null,
+    null,
+    initialData,
+  );
 
   let roomLinkData = getCollaborationLinkData(window.location.href);
   const isExternalScene = !!(id || jsonMatch || roomLinkData);
@@ -94,6 +98,7 @@ const initializeScene = async (opts: {
       } else if (jsonMatch) {
         scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
       }
+      scene.scrollToCenter = true;
       if (!roomLinkData) {
         window.history.replaceState({}, APP_NAME, window.location.origin);
       }

src/global.d.ts

@@ -12,6 +12,7 @@ interface Document {
 interface Window {
   ClipboardItem: any;
   __EXCALIDRAW_SHA__: string | undefined;
+  EXCALIDRAW_ASSET_PATH: string | undefined;
   gtag: Function;
 }
 

src/index-node.ts

@@ -54,8 +54,8 @@ const elements = [
   },
 ];
 
-registerFont("./public/FG_Virgil.ttf", { family: "Virgil" });
-registerFont("./public/Cascadia.ttf", { family: "Cascadia" });
+registerFont("./public/Virgil.woff2", { family: "Virgil" });
+registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
 
 const canvas = exportToCanvas(
   elements as any,

src/index.tsx

@@ -4,7 +4,6 @@ import ExcalidrawApp from "./excalidraw-app";
 
 import "./excalidraw-app/pwa";
 import "./excalidraw-app/sentry";
-
 window.__EXCALIDRAW_SHA__ = process.env.REACT_APP_GIT_SHA;
 
 ReactDOM.render(<ExcalidrawApp />, document.getElementById("root"));

src/locales/en.json

@@ -92,7 +92,8 @@
     "centerHorizontally": "Center horizontally",
     "distributeHorizontally": "Distribute horizontally",
     "distributeVertically": "Distribute vertically",
-    "viewMode": "View mode"
+    "viewMode": "View mode",
+    "toggleExportColorScheme": "Toggle export color scheme"
   },
   "buttons": {
     "clearReset": "Reset the canvas",

src/packages/excalidraw/CHANGELOG.md

@@ -12,18 +12,34 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
-## [Unreleased]
+## 0.4.0
 
 ## Excalidraw API
 
 ### Features
 
-- Export [`restore`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L182), [`restoreAppState`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L144) and [`restoreElements`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L128) to host
+- Expose `window.EXCALIDRAW_ASSET_PATH` which host can use to load assets from a different URL. By default it will be loaded from `https://unpkg.com/@excalidraw/excalidraw{currentVersion}/dist/`[#3068](https://github.com/excalidraw/excalidraw/pull/3068).
+
+  Also now the assets will have a hash in filename so cache bursting can easily happen with version bump.
+
+- Add support for `scrollToCenter` in [initialData](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L18) so host can control whether to scroll to center on mount [#3070](https://github.com/excalidraw/excalidraw/pull/3070).
+
+- Export [`restore`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L182), [`restoreAppState`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L144) and [`restoreElements`](https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L128) to host [#3049](https://github.com/excalidraw/excalidraw/pull/3049)
 
 ### Fixes
 
 - Show user state only when [userState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L35) is passed on remote pointers during collaboration [#3050](https://github.com/excalidraw/excalidraw/pull/3050)
 
+## Excalidraw Library
+
+### Features
+
+- Adjust line-confirm-threshold based on zoom [#2884](https://github.com/excalidraw/excalidraw/pull/2884)
+
+### Fixes
+
+- Hide scrollbars on mobile [#3044](https://github.com/excalidraw/excalidraw/pull/3044)
+
 ## 0.3.1
 
 ## Excalidraw API

src/packages/excalidraw/README.md

@@ -20,13 +20,9 @@ After installation you will see a folder `excalidraw-assets` in `dist` directory
 
 Move the folder `excalidraw-assets` to the path where your assets are served.
 
-By default it will try to load the files from `{rootUrl}/excalidraw-assets/`
+By default it will try to load the files from `https://unpkg.com/@excalidraw/excalidraw/{currentVersion}/dist/`
 
-With **Webpack**, if you want to load the files from different path you can use <pre><a href="https://webpack.js.org/guides/public-path/#on-the-fly">`__webpack_public_path__`</a></pre>.
-
-With **create-react-app**, the assets can be served from `public/static/js/excalidraw-assets`since CRA tries to load the assets from `{rootUrl}/static/js` path by default.
-
-You can update the value of `PUBLIC_URL` if you want to serve it from a different URL.
+If you want to load assets from a different path you can set a variable `window.EXCALIDRAW_ASSET_PATH` to the url from where you want to load the assets.
 
 ### Demo
 
@@ -286,10 +282,11 @@ Here you can try saving the data to your backend or local storage for example.
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
 
-| name | type |
-| --- | --- |
-| elements | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) |
-| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) |
+| Name | Type | Descrption |
+| --- | --- | --- |
+| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. |
+| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37) | The App state with which Excalidraw should be mounted. |
+| `scrollToCenter` | boolean | This attribute implies whether to scroll to the nearest element to center once Excalidraw is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToCenter` is false so that scroll positions are retained |
 
 ```json
 {

src/packages/excalidraw/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, forwardRef } from "react";
+import "./publicPath";
 
 import { InitializeApp } from "../../components/InitializeApp";
 import App from "../../components/App";

src/packages/excalidraw/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/excalidraw.min.js",
   "files": [
     "dist/*"
@@ -41,24 +41,24 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/plugin-transform-arrow-functions": "7.12.13",
-    "@babel/plugin-transform-async-to-generator": "7.12.13",
-    "@babel/plugin-transform-runtime": "7.12.15",
-    "@babel/plugin-transform-typescript": "7.12.16",
-    "@babel/preset-env": "7.12.16",
+    "@babel/core": "7.13.8",
+    "@babel/plugin-transform-arrow-functions": "7.13.0",
+    "@babel/plugin-transform-async-to-generator": "7.13.0",
+    "@babel/plugin-transform-runtime": "7.13.8",
+    "@babel/plugin-transform-typescript": "7.13.0",
+    "@babel/preset-env": "7.13.8",
     "@babel/preset-react": "7.12.13",
-    "@babel/preset-typescript": "7.12.16",
+    "@babel/preset-typescript": "7.13.0",
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.0.2",
+    "css-loader": "5.1.0",
     "file-loader": "6.2.0",
-    "mini-css-extract-plugin": "1.3.6",
+    "mini-css-extract-plugin": "1.3.9",
     "sass-loader": "11.0.1",
     "terser-webpack-plugin": "5.1.1",
     "ts-loader": "8.0.17",
-    "webpack": "5.21.2",
+    "webpack": "5.24.2",
     "webpack-bundle-analyzer": "4.4.0",
     "webpack-cli": "4.5.0"
   },
@@ -68,6 +68,6 @@
   "scripts": {
     "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
-    "pack": "npm run build:umd && npm pack"
+    "pack": "yarn build:umd && yarn pack"
   }
 }

src/packages/excalidraw/publicPath.js

@@ -0,0 +1,9 @@
+import { ENV } from "../../constants";
+import pkg from "./package.json";
+if (process.env.NODE_ENV !== ENV.TEST) {
+  /* eslint-disable */
+  /* global __webpack_public_path__:writable */
+  __webpack_public_path__ =
+    window.EXCALIDRAW_ASSET_PATH ||
+    `https://unpkg.com/${pkg.name}@${pkg.version}/dist/`;
+}

src/packages/excalidraw/webpack.prod.config.js

@@ -13,7 +13,8 @@ module.exports = {
     library: "Excalidraw",
     libraryTarget: "umd",
     filename: "[name].js",
-    chunkFilename: "excalidraw-assets/[name].js",
+    chunkFilename: "excalidraw-assets/[name]-[contenthash].js",
+    publicPath: "",
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".css", ".scss"],

src/packages/utils/package.json

@@ -34,19 +34,21 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.12.16",
-    "@babel/plugin-transform-arrow-functions": "7.12.13",
-    "@babel/plugin-transform-async-to-generator": "7.12.13",
+    "@babel/core": "7.13.8",
+    "@babel/plugin-transform-arrow-functions": "7.13.0",
+    "@babel/plugin-transform-async-to-generator": "7.13.0",
     "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/plugin-transform-typescript": "7.12.16",
-    "@babel/preset-env": "7.12.16",
-    "@babel/preset-typescript": "7.12.16",
+    "@babel/plugin-transform-typescript": "7.13.0",
+    "@babel/preset-env": "7.13.8",
+    "@babel/preset-typescript": "7.13.0",
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
+    "css-loader": "5.1.0",
     "file-loader": "6.2.0",
+    "sass-loader": "11.0.1",
     "ts-loader": "8.0.17",
-    "webpack": "5.21.2",
+    "webpack": "5.24.2",
     "webpack-bundle-analyzer": "4.4.0",
     "webpack-cli": "4.5.0"
   },
@@ -55,6 +57,6 @@
   "scripts": {
     "build:umd": "cross-env NODE_ENV=production webpack --config webpack.prod.config.js",
     "build:umd:withAnalyzer": "cross-env NODE_ENV=production ANALYZER=true webpack --config webpack.prod.config.js",
-    "pack": "npm run build:umd && npm pack"
+    "pack": "yarn build:umd && npm pack"
   }
 }

src/packages/utils/webpack.prod.config.js

@@ -13,13 +13,18 @@ module.exports = {
     libraryTarget: "umd",
   },
   resolve: {
-    extensions: [".tsx", ".ts", ".js"],
+    extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
   },
   optimization: {
     runtimeChunk: false,
   },
   module: {
     rules: [
+      {
+        test: /\.(sa|sc|c)ss$/,
+        exclude: /node_modules/,
+        use: ["style-loader", { loader: "css-loader" }, "sass-loader"],
+      },
       {
         test: /\.(ts|tsx|js)$/,
         use: [

src/renderer/renderScene.ts

@@ -49,6 +49,7 @@ import {
 } from "../element/transformHandles";
 import { viewportCoordsToSceneCoords, supportsEmoji } from "../utils";
 import { UserIdleState } from "../excalidraw-app/collab/types";
+import { APPEARANCE_FILTER } from "../constants";
 
 const hasEmojiSupport = supportsEmoji();
 
@@ -211,6 +212,10 @@ export const renderScene = (
   const normalizedCanvasWidth = canvas.width / scale;
   const normalizedCanvasHeight = canvas.height / scale;
 
+  if (sceneState.exportWithDarkMode) {
+    context.filter = APPEARANCE_FILTER;
+  }
+
   // Paint background
   if (typeof sceneState.viewBackgroundColor === "string") {
     const hasTransparence =

src/scene/export.ts

@@ -7,7 +7,11 @@ import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
 import { distance, SVG_NS } from "../utils";
 import { AppState } from "../types";
 import { t } from "../i18n";
-import { DEFAULT_FONT_FAMILY, DEFAULT_VERTICAL_ALIGN } from "../constants";
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_VERTICAL_ALIGN,
+  APPEARANCE_FILTER,
+} from "../constants";
 import { getDefaultAppState } from "../appState";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
@@ -61,6 +65,7 @@ export const exportToCanvas = (
     tempCanvas,
     {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
+      exportWithDarkMode: appState.exportWithDarkMode,
       scrollX: -minX + exportPadding,
       scrollY: -minY + exportPadding,
       zoom: getDefaultAppState().zoom,
@@ -87,6 +92,7 @@ export const exportToSvg = (
     exportBackground,
     exportPadding = 10,
     viewBackgroundColor,
+    exportWithDarkMode,
     scale = 1,
     shouldAddWatermark,
     metadata = "",
@@ -95,6 +101,7 @@ export const exportToSvg = (
     exportPadding?: number;
     scale?: number;
     viewBackgroundColor: string;
+    exportWithDarkMode?: boolean;
     shouldAddWatermark: boolean;
     metadata?: string;
   },
@@ -114,6 +121,9 @@ export const exportToSvg = (
   svgRoot.setAttribute("viewBox", `0 0 ${width} ${height}`);
   svgRoot.setAttribute("width", `${width * scale}`);
   svgRoot.setAttribute("height", `${height * scale}`);
+  if (exportWithDarkMode) {
+    svgRoot.setAttribute("filter", APPEARANCE_FILTER);
+  }
 
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
@@ -122,7 +132,7 @@ export const exportToSvg = (
     <style>
       @font-face {
         font-family: "Virgil";
-        src: url("https://excalidraw.com/FG_Virgil.woff2");
+        src: url("https://excalidraw.com/Virgil.woff2");
       }
       @font-face {
         font-family: "Cascadia";

src/scene/types.ts

@@ -6,6 +6,7 @@ export type SceneState = {
   scrollY: number;
   // null indicates transparent bg
   viewBackgroundColor: string | null;
+  exportWithDarkMode?: boolean;
   zoom: Zoom;
   shouldCacheIgnoreZoom: boolean;
   remotePointerViewportCoords: { [id: string]: { x: number; y: number } };

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -29,6 +29,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -489,6 +490,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -955,6 +957,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -1730,6 +1733,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -1933,6 +1937,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -2390,6 +2395,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -2642,6 +2648,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -2805,6 +2812,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -3281,6 +3289,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -3588,6 +3597,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -3791,6 +3801,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4034,6 +4045,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4285,6 +4297,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4667,6 +4680,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -4961,6 +4975,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -5267,6 +5282,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -5474,6 +5490,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -5637,6 +5654,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -6089,6 +6107,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -6406,6 +6425,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -8439,6 +8459,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -8800,6 +8821,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9054,6 +9076,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9306,6 +9329,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9620,6 +9644,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9783,6 +9808,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -9946,6 +9972,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10109,6 +10136,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10302,6 +10330,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10495,6 +10524,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10688,6 +10718,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -10881,6 +10912,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11044,6 +11076,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11207,6 +11240,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11400,6 +11434,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11563,6 +11598,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -11756,6 +11792,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12471,6 +12508,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12723,6 +12761,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12824,6 +12863,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -12923,6 +12963,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13086,6 +13127,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13393,6 +13435,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13700,6 +13743,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -13863,6 +13907,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -14058,6 +14103,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -14306,6 +14352,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -14629,6 +14676,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -15467,6 +15515,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -15774,6 +15823,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16081,6 +16131,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16459,6 +16510,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16625,6 +16677,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -16945,6 +16998,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17183,6 +17237,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17437,6 +17492,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17763,6 +17819,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -17862,6 +17919,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -18025,6 +18083,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -18845,6 +18904,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -18944,6 +19004,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -19697,6 +19758,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20101,6 +20163,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20373,6 +20436,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20474,6 +20538,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -20971,6 +21036,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,
@@ -21070,6 +21136,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "exportEmbedScene": false,
+  "exportWithDarkMode": false,
   "fileHandle": null,
   "gridSize": null,
   "height": 768,

src/tests/fixtures/smiley_embedded_v2.svg

@@ -5,7 +5,7 @@
     <style>
       @font-face {
         font-family: "Virgil";
-        src: url("https://excalidraw.com/FG_Virgil.woff2");
+        src: url("https://excalidraw.com/Virgil.woff2");
       }
       @font-face {
         font-family: "Cascadia";
@@ -13,4 +13,4 @@
       }
     </style>
   </defs>
-  <rect x="0" y="0" width="56" height="77" fill="#ffffff"></rect><g transform="translate(10 10) rotate(0 18 28.5)"><text x="0" y="41" font-family="Virgil, Segoe UI Emoji" font-size="36px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">😀</text></g></svg>
+  <rect x="0" y="0" width="56" height="77" fill="#ffffff"></rect><g transform="translate(10 10) rotate(0 18 28.5)"><text x="0" y="41" font-family="Virgil, Segoe UI Emoji" font-size="36px" fill="#c92a2a" text-anchor="start" style="white-space: pre;" direction="ltr">😀</text></g></svg>

src/tests/fixtures/test_embedded_v1.svg

@@ -5,7 +5,7 @@
     <style>
       @font-face {
         font-family: "Virgil";
-        src: url("https://excalidraw.com/FG_Virgil.woff2");
+        src: url("https://excalidraw.com/Virgil.woff2");
       }
       @font-face {
         font-family: "Cascadia";
@@ -13,4 +13,4 @@
       }
     </style>
   </defs>
-  <rect x="0" y="0" width="97" height="77" fill="#ffffff"></rect><g transform="translate(10 10) rotate(0 38.5 28.5)"><text x="0" y="41" font-family="Virgil, Segoe UI Emoji" font-size="36px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">test</text></g></svg>
+  <rect x="0" y="0" width="97" height="77" fill="#ffffff"></rect><g transform="translate(10 10) rotate(0 38.5 28.5)"><text x="0" y="41" font-family="Virgil, Segoe UI Emoji" font-size="36px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">test</text></g></svg>

src/tests/scroll.test.tsx

@@ -30,6 +30,7 @@ describe("appState", () => {
               height: ELEM_HEIGHT,
             }),
           ],
+          scrollToCenter: true,
         }}
       />,
     );

src/types.ts

@@ -57,6 +57,7 @@ export type AppState = {
   elementLocked: boolean;
   exportBackground: boolean;
   exportEmbedScene: boolean;
+  exportWithDarkMode: boolean;
   shouldAddWatermark: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;