fix

.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
-!yarn.lock
+!.env

.github/dependabot.yml

@@ -1,33 +1,36 @@
 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,8 +6,9 @@ on:
       - master
 
 jobs:
-  build-docker:
+  build:
     runs-on: ubuntu-latest
+
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1
       - run: docker build -t excalidraw .

.github/workflows/build-packages.yml

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

.github/workflows/cancel.yml

@@ -9,6 +9,7 @@ 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@v2
+      - uses: actions/checkout@v1
 
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
         with:
           node-version: 14.x
 
       - name: Install and lint
         run: |
-          yarn --frozen-lockfile
-          yarn test:other
-          yarn test:code
-          yarn test:typecheck
+          npm ci
+          npm run test:other
+          npm run test:code
+          npm run 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@v2
+        uses: actions/setup-node@v1
         with:
           node-version: 14.x
 
       - name: Create report file
         run: |
-          yarn locales-coverage
+          npm run 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=$(yarn locales-coverage:description | grep '^[^>]')
+          body=$(npm run 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,8 +8,9 @@ on:
       - synchronize
 
 jobs:
-  semantic:
+  main:
     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,23 +6,28 @@ on:
       - master
 
 jobs:
-  sentry:
+  release:
     runs-on: ubuntu-latest
+
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1.0.0
+
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
         with:
           node-version: 14.x
+
       - name: Install and build
         run: |
-          yarn --frozen-lockfile
-          yarn build:app
+          npm ci
+          npm run 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,13 +5,16 @@ on: pull_request
 jobs:
   test:
     runs-on: ubuntu-latest
+
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v1
+
       - name: Setup Node.js 14.x
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v1
         with:
           node-version: 14.x
+
       - name: Install and test
         run: |
-          yarn --frozen-lockfile
-          yarn test:app
+          npm ci
+          npm run 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

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

Dockerfile

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

README.md

@@ -86,12 +86,6 @@ 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
@@ -100,14 +94,14 @@ git clone https://github.com/excalidraw/excalidraw.git
 
 #### Commands
 
-| 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 |
+| 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 |
 
 #### Docker Compose
 

docker-compose.yml

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

package.json

@@ -19,20 +19,21 @@
     ]
   },
   "dependencies": {
-    "@sentry/browser": "6.2.0",
-    "@sentry/integrations": "6.2.0",
+    "@sentry/browser": "6.1.0",
+    "@sentry/integrations": "6.1.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.14.0",
+    "browser-fs-access": "0.13.1",
     "clsx": "1.1.1",
-    "firebase": "8.2.9",
+    "firebase": "8.2.7",
     "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",
@@ -42,20 +43,18 @@
     "pwacompat": "2.0.17",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "4.0.2",
     "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": "8.1.0",
+    "eslint-config-prettier": "7.2.0",
     "eslint-plugin-prettier": "3.3.1",
-    "firebase-tools": "9.5.0",
+    "firebase-tools": "9.3.0",
     "husky": "4.3.8",
     "jest-canvas-mock": "2.3.1",
     "lint-staged": "10.5.4",
@@ -64,7 +63,7 @@
     "rewire": "5.0.0"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=12.0.0"
   },
   "homepage": ".",
   "husky": {
@@ -79,29 +78,28 @@
     "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": "yarn build:app && yarn build:version",
+    "build": "npm run build:app && npm run build:version",
     "eject": "react-scripts eject",
-    "fix:code": "yarn test:code --fix",
-    "fix:other": "yarn prettier --write",
-    "fix": "yarn fix:other && yarn fix:code",
+    "fix:code": "npm run test:code -- --fix",
+    "fix:other": "npm run prettier -- --write",
+    "fix": "npm run fix:other && npm run 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": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
+    "test:all": "npm run test:typecheck && npm run test:code && npm run test:other && npm run 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": "yarn prettier --list-different",
+    "test:other": "npm run prettier -- --list-different",
     "test:typecheck": "tsc",
-    "test:update": "yarn test:app --updateSnapshot --watchAll=false",
-    "test": "yarn test:app"
+    "test:update": "npm run test:app -- --updateSnapshot --watchAll=false",
+    "test": "npm run 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("Virgil.woff2");
+  src: url("FG_Virgil.woff2");
   font-display: swap;
 }
 

public/index.html

@@ -60,7 +60,7 @@
 
     <link
       rel="preload"
-      href="Virgil.woff2"
+      href="FG_Virgil.woff2"
       as="font"
       type="font/woff2"
       crossorigin="anonymous"
@@ -86,9 +86,7 @@
     />
 
     <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
-//   yarn build-node
+//   npm run build-node
 //   node build/static/js/build-node.js
 //   open test.png
 

src/actions/actionExport.tsx

@@ -5,7 +5,6 @@ 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";
@@ -205,31 +204,3 @@ 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,8 +85,7 @@ export type ActionName =
   | "alignHorizontallyCentered"
   | "distributeHorizontally"
   | "distributeVertically"
-  | "viewMode"
-  | "exportWithDarkMode";
+  | "viewMode";
 
 export interface Action {
   name: ActionName;

src/appState.ts

@@ -40,7 +40,6 @@ export const getDefaultAppState = (): Omit<
     errorMessage: null,
     exportBackground: true,
     exportEmbedScene: false,
-    exportWithDarkMode: false,
     fileHandle: null,
     gridSize: null,
     height: window.innerHeight,
@@ -119,7 +118,6 @@ 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,24 +672,19 @@ 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({

src/components/DarkModeToggle.tsx

@@ -10,18 +10,13 @@ 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={title}
+      title={
+        props.value === "dark" ? t("buttons.lightMode") : t("buttons.darkMode")
+      }
     >
       <input
         className="ToolIcon_type_checkbox ToolIcon_toggle_opaque"
@@ -30,7 +25,11 @@ export const DarkModeToggle = (props: {
           props.onChange(event.target.checked ? "dark" : "light")
         }
         checked={props.value === "dark"}
-        aria-label={title}
+        aria-label={
+          props.value === "dark"
+            ? t("buttons.lightMode")
+            : t("buttons.darkMode")
+        }
       />
       <div className="ToolIcon__icon">
         {props.value === "light" ? ICONS.MOON : ICONS.SUN}

src/components/ExportDialog.scss

@@ -66,4 +66,10 @@
       overflow-y: auto;
     }
   }
+
+  .shareable-link--viewonly {
+    svg {
+      width: 1.5em;
+    }
+  }
 }

src/components/ExportDialog.tsx

@@ -12,16 +12,13 @@ import { exportToCanvas, getExportSize } from "../scene/export";
 import { AppState } from "../types";
 import { Dialog } from "./Dialog";
 import "./ExportDialog.scss";
-import { clipboard, exportFile, link } from "./icons";
+import { clipboard, exportFile, eyeIcon, link } from "./icons";
 import Stack from "./Stack";
 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>
@@ -69,7 +66,10 @@ const ExportModal = ({
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
-  onExportToBackend?: ExportCB;
+  onExportToBackend?: (
+    elements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
+  ) => void;
   onCloseRequest: () => void;
 }) => {
   const someElementIsSelected = isSomeElementSelected(elements, appState);
@@ -131,8 +131,6 @@ 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}>
@@ -160,13 +158,23 @@ const ExportModal = ({
               />
             )}
             {onExportToBackend && (
-              <ToolButton
-                type="button"
-                icon={link}
-                title={t("buttons.getShareableLink")}
-                aria-label={t("buttons.getShareableLink")}
-                onClick={() => onExportToBackend(exportedElements)}
-              />
+              <>
+                <ToolButton
+                  type="button"
+                  icon={link}
+                  title={t("buttons.getShareableLink")}
+                  aria-label={t("buttons.getShareableLink")}
+                  onClick={() => onExportToBackend(exportedElements, false)}
+                />
+                <ToolButton
+                  type="button"
+                  icon={eyeIcon}
+                  className="shareable-link--viewonly"
+                  title={t("buttons.getViewonlyShareableLink")}
+                  aria-label={t("buttons.getShareableLink")}
+                  onClick={() => onExportToBackend(exportedElements, true)}
+                />
+              </>
             )}
           </Stack.Row>
           <div className="ExportDialog__name">
@@ -241,7 +249,10 @@ export const ExportDialog = ({
   onExportToPng: ExportCB;
   onExportToSvg: ExportCB;
   onExportToClipboard: ExportCB;
-  onExportToBackend?: ExportCB;
+  onExportToBackend?: (
+    elements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
+  ) => void;
 }) => {
   const [modalIsShown, setModalIsShown] = useState(false);
   const triggerButton = useRef<HTMLButtonElement>(null);

src/components/LayerUI.tsx

@@ -58,6 +58,7 @@ interface LayerUIProps {
   isCollaborating: boolean;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;
@@ -368,9 +369,9 @@ const LayerUI = ({
         onExportToClipboard={createExporter("clipboard")}
         onExportToBackend={
           onExportToBackend
-            ? (elements) => {
+            ? (elements, viewonly) => {
                 onExportToBackend &&
-                  onExportToBackend(elements, appState, canvas);
+                  onExportToBackend(elements, viewonly, appState, canvas);
               }
             : undefined
         }

src/components/icons.tsx

@@ -113,6 +113,10 @@ export const questionCircle = createIcon(
   { mirror: true },
 );
 
+export const eyeIcon = createIcon(
+  "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z",
+);
+
 // Icon imported form Storybook
 // Storybook is licensed under MIT https://github.com/storybookjs/storybook/blob/next/LICENSE
 export const resetZoom = createIcon(

src/constants.ts

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

src/css/theme.scss

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

src/css/variables.module.scss

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

src/excalidraw-app/data/index.ts

@@ -251,6 +251,7 @@ export const loadScene = async (
 export const exportToBackend = async (
   elements: readonly ExcalidrawElement[],
   appState: AppState,
+  viewonly: boolean,
 ) => {
   const json = serializeAsJSON(elements, appState);
   const encoded = new TextEncoder().encode(json);
@@ -288,9 +289,13 @@ export const exportToBackend = async (
     const json = await response.json();
     if (json.id) {
       const url = new URL(window.location.href);
+      url.hash = "#";
+      if (viewonly) {
+        url.hash = `${url.hash}viewonly=true&`;
+      }
       // We need to store the key (and less importantly the id) as hash instead
       // of queryParam in order to never send it to the server
-      url.hash = `json=${json.id},${exportedKey.k!}`;
+      url.hash = `${url.hash}json=${json.id},${exportedKey.k!}`;
       const urlString = url.toString();
       window.prompt(`🔒${t("alerts.uploadedSecurly")}`, urlString);
     } else if (json.error_class === "RequestTooLargeError") {

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 { DataState, ImportedDataState } from "../data/types";
+import { ImportedDataState } from "../data/types";
 import {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
@@ -70,16 +70,11 @@ const initializeScene = async (opts: {
   const searchParams = new URLSearchParams(window.location.search);
   const id = searchParams.get("id");
   const jsonMatch = window.location.hash.match(
-    /^#json=([0-9]+),([a-zA-Z0-9_-]+)$/,
+    /json=([0-9]+),([a-zA-Z0-9_-]+)/,
   );
-
   const initialData = importFromLocalStorage();
 
-  let scene: DataState & { scrollToCenter?: boolean } = await loadScene(
-    null,
-    null,
-    initialData,
-  );
+  let scene = await loadScene(null, null, initialData);
 
   let roomLinkData = getCollaborationLinkData(window.location.href);
   const isExternalScene = !!(id || jsonMatch || roomLinkData);
@@ -98,7 +93,10 @@ const initializeScene = async (opts: {
       } else if (jsonMatch) {
         scene = await loadScene(jsonMatch[1], jsonMatch[2], initialData);
       }
-      scene.scrollToCenter = true;
+      const isViewModeEnabled = !!window.location.hash.match(/#viewonly=true/);
+      if (isViewModeEnabled) {
+        scene.appState.viewModeEnabled = true;
+      }
       if (!roomLinkData) {
         window.history.replaceState({}, APP_NAME, window.location.origin);
       }
@@ -139,6 +137,7 @@ function ExcalidrawWrapper() {
   const [errorMessage, setErrorMessage] = useState("");
   const currentLangCode = languageDetector.detect() || defaultLang.code;
   const [langCode, setLangCode] = useState(currentLangCode);
+  const [viewModeEnabled, setViewModeEnabled] = useState(false);
 
   useLayoutEffect(() => {
     const onResize = () => {
@@ -162,7 +161,6 @@ function ExcalidrawWrapper() {
   if (!initialStatePromiseRef.current.promise) {
     initialStatePromiseRef.current.promise = resolvablePromise<ImportedDataState | null>();
   }
-
   useEffect(() => {
     // Delayed so that the app has a time to load the latest SW
     setTimeout(() => {
@@ -183,12 +181,18 @@ function ExcalidrawWrapper() {
     }
 
     initializeScene({ collabAPI }).then((scene) => {
+      if (scene?.appState?.viewModeEnabled) {
+        setViewModeEnabled(true);
+      }
       initialStatePromiseRef.current.promise.resolve(scene);
     });
 
     const onHashChange = (_: HashChangeEvent) => {
       initializeScene({ collabAPI }).then((scene) => {
         if (scene) {
+          if (scene?.appState?.viewModeEnabled) {
+            setViewModeEnabled(true);
+          }
           excalidrawAPI.updateScene(scene);
         }
       });
@@ -229,6 +233,7 @@ function ExcalidrawWrapper() {
 
   const onExportToBackend = async (
     exportedElements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => {
@@ -237,12 +242,16 @@ function ExcalidrawWrapper() {
     }
     if (canvas) {
       try {
-        await exportToBackend(exportedElements, {
-          ...appState,
-          viewBackgroundColor: appState.exportBackground
-            ? appState.viewBackgroundColor
-            : getDefaultAppState().viewBackgroundColor,
-        });
+        await exportToBackend(
+          exportedElements,
+          {
+            ...appState,
+            viewBackgroundColor: appState.exportBackground
+              ? appState.viewBackgroundColor
+              : getDefaultAppState().viewBackgroundColor,
+          },
+          viewonly,
+        );
       } catch (error) {
         if (error.name !== "AbortError") {
           const { width, height } = canvas;
@@ -277,7 +286,6 @@ function ExcalidrawWrapper() {
     },
     [langCode],
   );
-
   return (
     <>
       <Excalidraw
@@ -292,6 +300,7 @@ function ExcalidrawWrapper() {
         onExportToBackend={onExportToBackend}
         renderFooter={renderFooter}
         langCode={langCode}
+        viewModeEnabled={viewModeEnabled ? viewModeEnabled : undefined}
       />
       {excalidrawAPI && <CollabWrapper excalidrawAPI={excalidrawAPI} />}
       {errorMessage && (

src/global.d.ts

@@ -12,7 +12,6 @@ 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/Virgil.woff2", { family: "Virgil" });
-registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
+registerFont("./public/FG_Virgil.ttf", { family: "Virgil" });
+registerFont("./public/Cascadia.ttf", { family: "Cascadia" });
 
 const canvas = exportToCanvas(
   elements as any,

src/index.tsx

@@ -4,6 +4,7 @@ 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,8 +92,7 @@
     "centerHorizontally": "Center horizontally",
     "distributeHorizontally": "Distribute horizontally",
     "distributeVertically": "Distribute vertically",
-    "viewMode": "View mode",
-    "toggleExportColorScheme": "Toggle export color scheme"
+    "viewMode": "View mode"
   },
   "buttons": {
     "clearReset": "Reset the canvas",
@@ -107,6 +106,7 @@
     "saveAs": "Save as",
     "load": "Load",
     "getShareableLink": "Get shareable link",
+    "getViewonlyShareableLink": "Get View only shareable link",
     "close": "Close",
     "selectLanguage": "Select language",
     "scrollBackToContent": "Scroll back to content",

src/packages/excalidraw/CHANGELOG.md

@@ -12,34 +12,18 @@ 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.
 -->
 
-## 0.4.0
+## [Unreleased]
 
 ## Excalidraw API
 
 ### Features
 
-- 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)
+- 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
 
 ### 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,9 +20,13 @@ 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 `https://unpkg.com/@excalidraw/excalidraw/{currentVersion}/dist/`
+By default it will try to load the files from `{rootUrl}/excalidraw-assets/`
 
-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.
+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.
 
 ### Demo
 
@@ -282,11 +286,10 @@ 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 | 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 |
+| 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) |
 
 ```json
 {

src/packages/excalidraw/index.tsx

@@ -1,5 +1,4 @@
 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.4.0",
+  "version": "0.3.1",
   "main": "dist/excalidraw.min.js",
   "files": [
     "dist/*"
@@ -41,24 +41,24 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@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/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/preset-react": "7.12.13",
-    "@babel/preset-typescript": "7.13.0",
+    "@babel/preset-typescript": "7.12.16",
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.1.0",
+    "css-loader": "5.0.2",
     "file-loader": "6.2.0",
-    "mini-css-extract-plugin": "1.3.9",
+    "mini-css-extract-plugin": "1.3.6",
     "sass-loader": "11.0.1",
     "terser-webpack-plugin": "5.1.1",
     "ts-loader": "8.0.17",
-    "webpack": "5.24.2",
+    "webpack": "5.21.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": "yarn build:umd && yarn pack"
+    "pack": "npm run build:umd && npm pack"
   }
 }

src/packages/excalidraw/publicPath.js

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

src/packages/utils/package.json

@@ -34,21 +34,19 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.13.8",
-    "@babel/plugin-transform-arrow-functions": "7.13.0",
-    "@babel/plugin-transform-async-to-generator": "7.13.0",
+    "@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.10",
-    "@babel/plugin-transform-typescript": "7.13.0",
-    "@babel/preset-env": "7.13.8",
-    "@babel/preset-typescript": "7.13.0",
+    "@babel/plugin-transform-typescript": "7.12.16",
+    "@babel/preset-env": "7.12.16",
+    "@babel/preset-typescript": "7.12.16",
     "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.24.2",
+    "webpack": "5.21.2",
     "webpack-bundle-analyzer": "4.4.0",
     "webpack-cli": "4.5.0"
   },
@@ -57,6 +55,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": "yarn build:umd && npm pack"
+    "pack": "npm run build:umd && npm pack"
   }
 }

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

@@ -13,18 +13,13 @@ module.exports = {
     libraryTarget: "umd",
   },
   resolve: {
-    extensions: [".tsx", ".ts", ".js", ".css", ".scss"],
+    extensions: [".tsx", ".ts", ".js"],
   },
   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,7 +49,6 @@ import {
 } from "../element/transformHandles";
 import { viewportCoordsToSceneCoords, supportsEmoji } from "../utils";
 import { UserIdleState } from "../excalidraw-app/collab/types";
-import { APPEARANCE_FILTER } from "../constants";
 
 const hasEmojiSupport = supportsEmoji();
 
@@ -212,10 +211,6 @@ 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,11 +7,7 @@ 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,
-  APPEARANCE_FILTER,
-} from "../constants";
+import { DEFAULT_FONT_FAMILY, DEFAULT_VERTICAL_ALIGN } from "../constants";
 import { getDefaultAppState } from "../appState";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
@@ -65,7 +61,6 @@ export const exportToCanvas = (
     tempCanvas,
     {
       viewBackgroundColor: exportBackground ? viewBackgroundColor : null,
-      exportWithDarkMode: appState.exportWithDarkMode,
       scrollX: -minX + exportPadding,
       scrollY: -minY + exportPadding,
       zoom: getDefaultAppState().zoom,
@@ -92,7 +87,6 @@ export const exportToSvg = (
     exportBackground,
     exportPadding = 10,
     viewBackgroundColor,
-    exportWithDarkMode,
     scale = 1,
     shouldAddWatermark,
     metadata = "",
@@ -101,7 +95,6 @@ export const exportToSvg = (
     exportPadding?: number;
     scale?: number;
     viewBackgroundColor: string;
-    exportWithDarkMode?: boolean;
     shouldAddWatermark: boolean;
     metadata?: string;
   },
@@ -121,9 +114,6 @@ 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}
@@ -132,7 +122,7 @@ export const exportToSvg = (
     <style>
       @font-face {
         font-family: "Virgil";
-        src: url("https://excalidraw.com/Virgil.woff2");
+        src: url("https://excalidraw.com/FG_Virgil.woff2");
       }
       @font-face {
         font-family: "Cascadia";

src/scene/types.ts

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

src/types.ts

@@ -57,7 +57,6 @@ export type AppState = {
   elementLocked: boolean;
   exportBackground: boolean;
   exportEmbedScene: boolean;
-  exportWithDarkMode: boolean;
   shouldAddWatermark: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
@@ -181,6 +180,7 @@ export interface ExcalidrawProps {
   }) => void;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
+    viewonly: boolean,
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;