feat: close mobile canvas menu on canvas pointerdown

src/actions/actionCanvas.tsx

@@ -55,6 +55,7 @@ export const actionClearCanvas = register({
         exportBackground: appState.exportBackground,
         exportEmbedScene: appState.exportEmbedScene,
         gridSize: appState.gridSize,
+        shouldAddWatermark: appState.shouldAddWatermark,
         showStats: appState.showStats,
         pasteDialog: appState.pasteDialog,
       },

src/actions/actionExport.tsx

@@ -71,6 +71,24 @@ export const actionChangeExportEmbedScene = register({
   ),
 });
 
+export const actionChangeShouldAddWatermark = register({
+  name: "changeShouldAddWatermark",
+  perform: (_elements, appState, value) => {
+    return {
+      appState: { ...appState, shouldAddWatermark: value },
+      commitToHistory: false,
+    };
+  },
+  PanelComponent: ({ appState, updateData }) => (
+    <CheckboxItem
+      checked={appState.shouldAddWatermark}
+      onChange={(checked) => updateData(checked)}
+    >
+      {t("labels.addWatermark")}
+    </CheckboxItem>
+  ),
+});
+
 export const actionSaveScene = register({
   name: "saveScene",
   perform: async (elements, appState, value) => {

src/actions/types.ts

@@ -66,6 +66,7 @@ export type ActionName =
   | "changeProjectName"
   | "changeExportBackground"
   | "changeExportEmbedScene"
+  | "changeShouldAddWatermark"
   | "saveScene"
   | "saveAsScene"
   | "loadScene"

src/appState.ts

@@ -61,6 +61,7 @@ export const getDefaultAppState = (): Omit<
     selectedElementIds: {},
     selectedGroupIds: {},
     selectionElement: null,
+    shouldAddWatermark: false,
     shouldCacheIgnoreZoom: false,
     showHelpDialog: false,
     showStats: false,
@@ -140,6 +141,7 @@ const APP_STATE_STORAGE_CONF = (<
   selectedElementIds: { browser: true, export: false },
   selectedGroupIds: { browser: true, export: false },
   selectionElement: { browser: false, export: false },
+  shouldAddWatermark: { browser: true, export: false },
   shouldCacheIgnoreZoom: { browser: true, export: false },
   showHelpDialog: { browser: false, export: false },
   showStats: { browser: true, export: false },

src/components/App.tsx

@@ -1204,16 +1204,11 @@ class App extends React.Component<AppProps, AppState> {
     // event.touches.length === 1 will also prevent inserting text when user's zooming
     if (didTapTwice && event.touches.length === 1) {
       const [touch] = event.touches;
-      this.handleCanvasDoubleClick(
-        {
-          clientX: touch.clientX,
-          clientY: touch.clientY,
-          ctrlKey: false,
-          metaKey: false,
-          altKey: false,
-        },
-        false,
-      );
+      // @ts-ignore
+      this.handleCanvasDoubleClick({
+        clientX: touch.clientX,
+        clientY: touch.clientY,
+      });
       didTapTwice = false;
       clearTimeout(tappedTwiceTimer);
     }
@@ -1885,7 +1880,6 @@ class App extends React.Component<AppProps, AppState> {
     sceneX,
     sceneY,
     insertAtParentCenter = true,
-    createTextIfNotExists = true,
   }: {
     /** X position to insert text at */
     sceneX: number;
@@ -1893,14 +1887,9 @@ class App extends React.Component<AppProps, AppState> {
     sceneY: number;
     /** whether to attempt to insert at element center if applicable */
     insertAtParentCenter?: boolean;
-    createTextIfNotExists?: boolean;
   }) => {
     const existingTextElement = this.getTextElementAtPosition(sceneX, sceneY);
 
-    // if (!existingTextElement && !createTextIfNotExists) {
-    //   return;
-    // }
-
     const parentCenterPosition =
       insertAtParentCenter &&
       this.getTextWysiwygSnappedToCenterPosition(
@@ -1972,11 +1961,7 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private handleCanvasDoubleClick = (
-    event: Pick<
-      React.PointerEvent<HTMLCanvasElement>,
-      "clientX" | "clientY" | "ctrlKey" | "metaKey" | "altKey"
-    >,
-    createTextIfNotExists = true,
+    event: React.MouseEvent<HTMLCanvasElement>,
   ) => {
     // case: double-clicking with arrow/line tool selected would both create
     // text and enter multiElement mode
@@ -2047,7 +2032,6 @@ class App extends React.Component<AppProps, AppState> {
         sceneX,
         sceneY,
         insertAtParentCenter: !event.altKey,
-        createTextIfNotExists,
       });
     }
   };
@@ -2296,115 +2280,119 @@ class App extends React.Component<AppProps, AppState> {
     invalidateContextMenu = true;
   };
 
-  private handleCanvasPointerDown = (
-    event: React.PointerEvent<HTMLCanvasElement>,
-  ) => {
-    event.persist();
+  private handleCanvasPointerDown = withBatchedUpdates(
+    (event: React.PointerEvent<HTMLCanvasElement>) => {
+      event.persist();
 
-    // remove any active selection when we start to interact with canvas
-    // (mainly, we care about removing selection outside the component which
-    //  would prevent our copy handling otherwise)
-    const selection = document.getSelection();
-    if (selection?.anchorNode) {
-      selection.removeAllRanges();
-    }
+      if (this.state.openMenu === "canvas") {
+        this.setState({ openMenu: null });
+      }
 
-    this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event);
-    this.maybeCleanupAfterMissingPointerUp(event);
+      // remove any active selection when we start to interact with canvas
+      // (mainly, we care about removing selection outside the component which
+      //  would prevent our copy handling otherwise)
+      const selection = document.getSelection();
+      if (selection?.anchorNode) {
+        selection.removeAllRanges();
+      }
 
-    if (isPanning) {
-      return;
-    }
+      this.maybeOpenContextMenuAfterPointerDownOnTouchDevices(event);
+      this.maybeCleanupAfterMissingPointerUp(event);
 
-    this.setState({
-      lastPointerDownWith: event.pointerType,
-      cursorButton: "down",
-    });
-    this.savePointer(event.clientX, event.clientY, "down");
+      if (isPanning) {
+        return;
+      }
 
-    if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
-      return;
-    }
+      this.setState({
+        lastPointerDownWith: event.pointerType,
+        cursorButton: "down",
+      });
+      this.savePointer(event.clientX, event.clientY, "down");
 
-    // only handle left mouse button or touch
-    if (
-      event.button !== POINTER_BUTTON.MAIN &&
-      event.button !== POINTER_BUTTON.TOUCH
-    ) {
-      return;
-    }
+      if (this.handleCanvasPanUsingWheelOrSpaceDrag(event)) {
+        return;
+      }
 
-    this.updateGestureOnPointerDown(event);
+      // only handle left mouse button or touch
+      if (
+        event.button !== POINTER_BUTTON.MAIN &&
+        event.button !== POINTER_BUTTON.TOUCH
+      ) {
+        return;
+      }
 
-    // don't select while panning
-    if (gesture.pointers.size > 1) {
-      return;
-    }
+      this.updateGestureOnPointerDown(event);
 
-    // State for the duration of a pointer interaction, which starts with a
-    // pointerDown event, ends with a pointerUp event (or another pointerDown)
-    const pointerDownState = this.initialPointerDownState(event);
+      // don't select while panning
+      if (gesture.pointers.size > 1) {
+        return;
+      }
 
-    if (this.handleDraggingScrollBar(event, pointerDownState)) {
-      return;
-    }
+      // State for the duration of a pointer interaction, which starts with a
+      // pointerDown event, ends with a pointerUp event (or another pointerDown)
+      const pointerDownState = this.initialPointerDownState(event);
 
-    this.clearSelectionIfNotUsingSelection();
-    this.updateBindingEnabledOnPointerMove(event);
+      if (this.handleDraggingScrollBar(event, pointerDownState)) {
+        return;
+      }
 
-    if (this.handleSelectionOnPointerDown(event, pointerDownState)) {
-      return;
-    }
+      this.clearSelectionIfNotUsingSelection();
+      this.updateBindingEnabledOnPointerMove(event);
 
-    if (this.state.elementType === "text") {
-      this.handleTextOnPointerDown(event, pointerDownState);
-      return;
-    } else if (
-      this.state.elementType === "arrow" ||
-      this.state.elementType === "line"
-    ) {
-      this.handleLinearElementOnPointerDown(
-        event,
-        this.state.elementType,
+      if (this.handleSelectionOnPointerDown(event, pointerDownState)) {
+        return;
+      }
+
+      if (this.state.elementType === "text") {
+        this.handleTextOnPointerDown(event, pointerDownState);
+        return;
+      } else if (
+        this.state.elementType === "arrow" ||
+        this.state.elementType === "line"
+      ) {
+        this.handleLinearElementOnPointerDown(
+          event,
+          this.state.elementType,
+          pointerDownState,
+        );
+      } else if (this.state.elementType === "freedraw") {
+        this.handleFreeDrawElementOnPointerDown(
+          event,
+          this.state.elementType,
+          pointerDownState,
+        );
+      } else {
+        this.createGenericElementOnPointerDown(
+          this.state.elementType,
+          pointerDownState,
+        );
+      }
+
+      const onPointerMove = this.onPointerMoveFromPointerDownHandler(
         pointerDownState,
       );
-    } else if (this.state.elementType === "freedraw") {
-      this.handleFreeDrawElementOnPointerDown(
-        event,
-        this.state.elementType,
+
+      const onPointerUp = this.onPointerUpFromPointerDownHandler(
         pointerDownState,
       );
-    } else {
-      this.createGenericElementOnPointerDown(
-        this.state.elementType,
-        pointerDownState,
-      );
-    }
 
-    const onPointerMove = this.onPointerMoveFromPointerDownHandler(
-      pointerDownState,
-    );
+      const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
+      const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
 
-    const onPointerUp = this.onPointerUpFromPointerDownHandler(
-      pointerDownState,
-    );
+      lastPointerUp = onPointerUp;
 
-    const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
-    const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
-
-    lastPointerUp = onPointerUp;
-
-    if (!this.state.viewModeEnabled) {
-      window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
-      window.addEventListener(EVENT.POINTER_UP, onPointerUp);
-      window.addEventListener(EVENT.KEYDOWN, onKeyDown);
-      window.addEventListener(EVENT.KEYUP, onKeyUp);
-      pointerDownState.eventListeners.onMove = onPointerMove;
-      pointerDownState.eventListeners.onUp = onPointerUp;
-      pointerDownState.eventListeners.onKeyUp = onKeyUp;
-      pointerDownState.eventListeners.onKeyDown = onKeyDown;
-    }
-  };
+      if (!this.state.viewModeEnabled) {
+        window.addEventListener(EVENT.POINTER_MOVE, onPointerMove);
+        window.addEventListener(EVENT.POINTER_UP, onPointerUp);
+        window.addEventListener(EVENT.KEYDOWN, onKeyDown);
+        window.addEventListener(EVENT.KEYUP, onKeyUp);
+        pointerDownState.eventListeners.onMove = onPointerMove;
+        pointerDownState.eventListeners.onUp = onPointerUp;
+        pointerDownState.eventListeners.onKeyUp = onKeyUp;
+        pointerDownState.eventListeners.onKeyDown = onKeyDown;
+      }
+    },
+  );
 
   private maybeOpenContextMenuAfterPointerDownOnTouchDevices = (
     event: React.PointerEvent<HTMLCanvasElement>,
@@ -3206,7 +3194,7 @@ class App extends React.Component<AppProps, AppState> {
         const selectedElements = getSelectedElements(
           this.scene.getElements(),
           this.state,
-        ).filter((element) => element.id !== this.state.editingElement?.id);
+        );
         // prevent dragging even if we're no longer holding cmd/ctrl otherwise
         // it would have weird results (stuff jumping all over the screen)
         if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl) {

src/components/CheckboxItem.scss

@@ -2,20 +2,16 @@
 
 .excalidraw {
   .Checkbox {
-    margin: 4px 0.3em;
+    margin: 3px 0.3em;
     display: flex;
     align-items: center;
 
     cursor: pointer;
     user-select: none;
 
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
+    &:hover:not(.is-checked) .Checkbox-box {
       box-shadow: 0 0 0 2px #{$oc-blue-4};
-    }
 
-    &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
       svg {
         display: block;
         opacity: 0.3;

src/components/ExportDialog.scss

@@ -108,7 +108,7 @@
     }
     &:active {
       background-color: var(--button-color-darkest);
-      box-shadow: none;
+      box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%);
     }
 
     svg {

src/components/ImageExportDialog.tsx

@@ -101,7 +101,11 @@ const ImageExportModal = ({
   const [scale, setScale] = useState(defaultScale);
   const [exportSelected, setExportSelected] = useState(someElementIsSelected);
   const previewRef = useRef<HTMLDivElement>(null);
-  const { exportBackground, viewBackgroundColor } = appState;
+  const {
+    exportBackground,
+    viewBackgroundColor,
+    shouldAddWatermark,
+  } = appState;
 
   const exportedElements = exportSelected
     ? getSelectedElements(elements, appState)
@@ -122,6 +126,7 @@ const ImageExportModal = ({
         viewBackgroundColor,
         exportPadding,
         scale,
+        shouldAddWatermark,
       });
 
       // if converting to blob fails, there's some problem that will
@@ -145,6 +150,7 @@ const ImageExportModal = ({
     exportPadding,
     viewBackgroundColor,
     scale,
+    shouldAddWatermark,
   ]);
 
   return (
@@ -180,6 +186,7 @@ const ImageExportModal = ({
             const [width, height] = getExportSize(
               exportedElements,
               exportPadding,
+              shouldAddWatermark,
               _scale,
             );
 

src/components/LayerUI.tsx

@@ -419,6 +419,7 @@ const LayerUI = ({
         name: appState.name,
         viewBackgroundColor: appState.viewBackgroundColor,
         scale,
+        shouldAddWatermark: appState.shouldAddWatermark,
       })
         .catch(muteFSAbortError)
         .catch((error) => {

src/components/LibraryUnit.tsx

@@ -39,6 +39,7 @@ export const LibraryUnit = ({
     const svg = exportToSvg(elementsToRender, {
       exportBackground: false,
       viewBackgroundColor: oc.white,
+      shouldAddWatermark: false,
     });
     for (const child of ref.current!.children) {
       if (child.tagName !== "svg") {

src/components/PasteChartDialog.tsx

@@ -38,6 +38,7 @@ const ChartPreviewBtn = (props: {
     const svg = exportToSvg(elements, {
       exportBackground: false,
       viewBackgroundColor: oc.white,
+      shouldAddWatermark: false,
     });
 
     const previewNode = previewRef.current!;

src/components/icons.tsx

@@ -90,8 +90,14 @@ export const exportFile = createIcon(
 
 export const exportImage = createIcon(
   <>
-    <path d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z" />
-    <path d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z" />
+    <path
+      d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z"
+      fill-rule="nonzero"
+    />
+    <path
+      d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+      fill-rule="nonzero"
+    />
   </>,
   { width: 576, height: 512, mirror: true },
 );

src/data/index.ts

@@ -24,12 +24,14 @@ export const exportCanvas = async (
     viewBackgroundColor,
     name,
     scale = 1,
+    shouldAddWatermark,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     viewBackgroundColor: string;
     name: string;
     scale?: number;
+    shouldAddWatermark: boolean;
   },
 ) => {
   if (elements.length === 0) {
@@ -42,6 +44,7 @@ export const exportCanvas = async (
       viewBackgroundColor,
       exportPadding,
       scale,
+      shouldAddWatermark,
       metadata:
         appState.exportEmbedScene && type === "svg"
           ? await (
@@ -68,6 +71,7 @@ export const exportCanvas = async (
     viewBackgroundColor,
     exportPadding,
     scale,
+    shouldAddWatermark,
   });
   tempCanvas.style.display = "none";
   document.body.appendChild(tempCanvas);

src/index-node.ts

@@ -69,6 +69,7 @@ const canvas = exportToCanvas(
   {
     exportBackground: true,
     viewBackgroundColor: "#ffffff",
+    shouldAddWatermark: false,
     scale: 1,
   },
   createCanvas,

src/packages/excalidraw/CHANGELOG.md

@@ -11,17 +11,6 @@ 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
-
-## Excalidraw API
-
-### Refactor
-
-#### BREAKING CHANGE
-
-- Removed `shouldAddWatermark: boolean` attribute from options for [export](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#export-utilities) APIs [#3639](https://github.com/excalidraw/excalidraw/pull/3639).
-- Removed `appState.shouldAddWatermark` so in case you were passing `shouldAddWatermark` in [initialData.AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) it will not work anymore.
-
 ## 0.8.0 (2021-05-15)
 
 ## Excalidraw API

src/packages/excalidraw/README.md

@@ -823,4 +823,5 @@ This function returns a svg with the exported elements.
 | --- | --- | --- | --- |
 | exportBackground | boolean | true | Indicates whether background should be exported |
 | viewBackgroundColor | string | #fff | The default background color |
+| shouldAddWatermark | boolean | false | Indicates whether watermark should be exported |
 | exportWithDarkMode | boolean | false | Indicates whether to export with dark mode |

src/packages/excalidraw/README_NEXT.md

@@ -829,4 +829,5 @@ This function returns a svg with the exported elements.
 | --- | --- | --- | --- |
 | exportBackground | boolean | true | Indicates whether background should be exported |
 | viewBackgroundColor | string | #fff | The default background color |
+| shouldAddWatermark | boolean | false | Indicates whether watermark should be exported |
 | exportWithDarkMode | boolean | false | Indicates whether to export with dark mode |

src/packages/excalidraw/package.json

@@ -48,11 +48,11 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@babel/core": "7.14.3",
+    "@babel/core": "7.14.2",
     "@babel/plugin-transform-arrow-functions": "7.13.0",
     "@babel/plugin-transform-async-to-generator": "7.13.0",
     "@babel/plugin-transform-runtime": "7.13.15",
-    "@babel/plugin-transform-typescript": "7.14.3",
+    "@babel/plugin-transform-typescript": "7.13.0",
     "@babel/preset-env": "7.14.2",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
@@ -60,7 +60,7 @@
     "babel-loader": "8.2.2",
     "babel-plugin-transform-class-properties": "6.24.1",
     "cross-env": "7.0.3",
-    "css-loader": "5.2.6",
+    "css-loader": "5.2.4",
     "file-loader": "6.2.0",
     "mini-css-extract-plugin": "1.6.0",
     "postcss-loader": "5.3.0",
@@ -68,7 +68,7 @@
     "terser-webpack-plugin": "5.1.2",
     "ts-loader": "8.1.0",
     "typescript": "4.2.4",
-    "webpack": "5.37.1",
+    "webpack": "5.37.0",
     "webpack-bundle-analyzer": "4.4.1",
     "webpack-cli": "4.7.0"
   },

src/packages/excalidraw/yarn.lock

@@ -14,17 +14,17 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
   integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
 
-"@babel/core@7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
-  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
+"@babel/core@7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.2.tgz#54e45334ffc0172048e5c93ded36461d3ad4c417"
+  integrity sha512-OgC1mON+l4U4B4wiohJlQNUU3H73mpTyYY3j/c8U9dr9UagGGSm+WFpzjy/YLdoyjiG++c1kIDgxCo/mLwQJeQ==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.3"
+    "@babel/generator" "^7.14.2"
     "@babel/helper-compilation-targets" "^7.13.16"
     "@babel/helper-module-transforms" "^7.14.2"
     "@babel/helpers" "^7.14.0"
-    "@babel/parser" "^7.14.3"
+    "@babel/parser" "^7.14.2"
     "@babel/template" "^7.12.13"
     "@babel/traverse" "^7.14.2"
     "@babel/types" "^7.14.2"
@@ -35,10 +35,10 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.14.2", "@babel/generator@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.3.tgz#0c2652d91f7bddab7cccc6ba8157e4f40dcedb91"
-  integrity sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==
+"@babel/generator@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.2.tgz#d5773e8b557d421fd6ce0d5efa5fd7fc22567c30"
+  integrity sha512-OnADYbKrffDVai5qcpkMxQ7caomHOoEwjkouqnN2QhydAjowFAZcsdecFIRUBdb+ZcruwYE4ythYmF1UBZU5xQ==
   dependencies:
     "@babel/types" "^7.14.2"
     jsesc "^2.5.1"
@@ -69,16 +69,27 @@
     browserslist "^4.14.5"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.3.tgz#832111bcf4f57ca57a4c5b1a000fc125abc6554a"
-  integrity sha512-BnEfi5+6J2Lte9LeiL6TxLWdIlEv9Woacc1qXzXBgbikcOzMRM2Oya5XGg/f/ngotv1ej2A/b+3iJH8wbS1+lQ==
+"@babel/helper-create-class-features-plugin@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.0.tgz#28d04ad9cfbd1ed1d8b988c9ea7b945263365846"
+  integrity sha512-twwzhthM4/+6o9766AW2ZBHpIHPSGrPGk1+WfHiu13u/lBnggXGNYCpeAyVfNwGDKfkhEDp+WOD/xafoJ2iLjA==
+  dependencies:
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-member-expression-to-functions" "^7.13.0"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/helper-replace-supers" "^7.13.0"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+
+"@babel/helper-create-class-features-plugin@^7.14.0":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.1.tgz#1fe11b376f3c41650ad9fedc665b0068722ea76c"
+  integrity sha512-r8rsUahG4ywm0QpGcCrLaUSOuNAISR3IZCg4Fx05Ozq31aCUrQsTLH6KPxy0N5ULoQ4Sn9qjNdGNtbPWAC6hYg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.14.2"
+    "@babel/helper-function-name" "^7.12.13"
     "@babel/helper-member-expression-to-functions" "^7.13.12"
     "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.14.3"
+    "@babel/helper-replace-supers" "^7.13.12"
     "@babel/helper-split-export-declaration" "^7.12.13"
 
 "@babel/helper-create-regexp-features-plugin@^7.12.13":
@@ -150,6 +161,13 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
+"@babel/helper-member-expression-to-functions@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.0.tgz#6aa4bb678e0f8c22f58cdb79451d30494461b091"
+  integrity sha512-yvRf8Ivk62JwisqV1rFRMxiSMDGnN6KH1/mDMmIrij4jztpQNRoHqqMG3U6apYbGRPJpgPalhva9Yd06HlUxJQ==
+  dependencies:
+    "@babel/types" "^7.13.0"
+
 "@babel/helper-member-expression-to-functions@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz#dfe368f26d426a07299d8d6513821768216e6d72"
@@ -209,6 +227,16 @@
     "@babel/traverse" "^7.12.13"
     "@babel/types" "^7.12.13"
 
+"@babel/helper-replace-supers@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.13.0.tgz#6034b7b51943094cb41627848cb219cb02be1d24"
+  integrity sha512-Segd5me1+Pz+rmN/NFBOplMbZG3SqRJOBlY+mA0SxAv6rjj7zJqr1AVr3SfzUVTLCv7ZLU5FycOM/SBGuLPbZw==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.13.0"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/traverse" "^7.13.0"
+    "@babel/types" "^7.13.0"
+
 "@babel/helper-replace-supers@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz#6442f4c1ad912502481a564a7386de0c77ff3804"
@@ -219,16 +247,6 @@
     "@babel/traverse" "^7.13.0"
     "@babel/types" "^7.13.12"
 
-"@babel/helper-replace-supers@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.3.tgz#ca17b318b859d107f0e9b722d58cf12d94436600"
-  integrity sha512-Rlh8qEWZSTfdz+tgNV/N4gz1a0TMNwCUcENhMjHTHKp3LseYH5Jha0NSlyTQWMnjbYcwFt+bqAMqSLHVXkQ6UA==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.13.12"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/traverse" "^7.14.2"
-    "@babel/types" "^7.14.2"
-
 "@babel/helper-simple-access@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
@@ -293,10 +311,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.12.13", "@babel/parser@^7.14.2", "@babel/parser@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
-  integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
+"@babel/parser@^7.12.13", "@babel/parser@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.2.tgz#0c1680aa44ad4605b16cbdcc5c341a61bde9c746"
+  integrity sha512-IoVDIHpsgE/fu7eXBeRWt8zLbDrSvD7H1gpomOkPpBoEN8KCruCqSDdqo8dddwQQrui30KSvQBaMUOJiuFu6QQ==
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
   version "7.13.12"
@@ -824,12 +842,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-typescript@7.14.3", "@babel/plugin-transform-typescript@^7.13.0":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.3.tgz#44f67f725a60cccee33d9d6fee5e4f338258f34f"
-  integrity sha512-G5Bb5pY6tJRTC4ag1visSgiDoGgJ1u1fMUgmc2ijLkcIdzP83Q1qyZX4ggFQ/SkR+PNOatkaYC+nKcTlpsX4ag==
+"@babel/plugin-transform-typescript@7.13.0", "@babel/plugin-transform-typescript@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz#4a498e1f3600342d2a9e61f60131018f55774853"
+  integrity sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.14.3"
+    "@babel/helper-create-class-features-plugin" "^7.13.0"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-typescript" "^7.12.13"
 
@@ -1405,15 +1423,15 @@ braces@^3.0.1:
     fill-range "^7.0.1"
 
 browserslist@^4.14.5, browserslist@^4.16.3:
-  version "4.16.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
-  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
+  version "4.16.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
+  integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
   dependencies:
-    caniuse-lite "^1.0.30001219"
-    colorette "^1.2.2"
-    electron-to-chromium "^1.3.723"
+    caniuse-lite "^1.0.30001181"
+    colorette "^1.2.1"
+    electron-to-chromium "^1.3.649"
     escalade "^3.1.1"
-    node-releases "^1.1.71"
+    node-releases "^1.1.70"
 
 buffer-from@^1.0.0:
   version "1.1.1"
@@ -1433,10 +1451,20 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-caniuse-lite@^1.0.30001196, caniuse-lite@^1.0.30001219:
-  version "1.0.30001230"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71"
-  integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
+camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
+caniuse-lite@^1.0.30001181:
+  version "1.0.30001187"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz#5706942631f83baa5a0218b7dfa6ced29f845438"
+  integrity sha512-w7/EP1JRZ9552CyrThUnay2RkZ1DXxKe/Q2swTC4+LElLh9RRYrL1Z+27LlakB8kzY0fSmHw9mc7XYDUKAKWMA==
+
+caniuse-lite@^1.0.30001196:
+  version "1.0.30001214"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001214.tgz#70f153c78223515c6d37a9fde6cd69250da9d872"
+  integrity sha512-O2/SCpuaU3eASWVaesQirZv1MSjUNOvmugaD8zNSJqw6Vv5SGwoOpA9LJs3pNPfM745nxqPvfZY3MQKY4AKHYg==
 
 chalk@^1.1.3:
   version "1.1.3"
@@ -1583,14 +1611,15 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-loader@5.2.6:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1"
-  integrity sha512-0wyN5vXMQZu6BvjbrPdUJvkCzGEO24HC7IS7nW4llc6BBFC+zwR9CKtYGv63Puzsg10L/o12inMY5/2ByzfD6w==
+css-loader@5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.4.tgz#e985dcbce339812cb6104ef3670f08f9893a1536"
+  integrity sha512-OFYGyINCKkdQsTrSYxzGSFnGS4gNjcXkKkQgWxK138jgnPt+lepxdjSZNc8sHAl5vP3DhsJUxufWIjOwI8PMMw==
   dependencies:
+    camelcase "^6.2.0"
     icss-utils "^5.1.0"
     loader-utils "^2.0.0"
-    postcss "^8.2.15"
+    postcss "^8.2.10"
     postcss-modules-extract-imports "^3.0.0"
     postcss-modules-local-by-default "^4.0.0"
     postcss-modules-scope "^3.0.0"
@@ -1630,10 +1659,10 @@ duplexer@^0.1.2:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
-electron-to-chromium@^1.3.723:
-  version "1.3.739"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.739.tgz#f07756aa92cabd5a6eec6f491525a64fe62f98b9"
-  integrity sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==
+electron-to-chromium@^1.3.649:
+  version "1.3.666"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.666.tgz#59f3ce1e45b860a0ebe439b72664354efbb8bc62"
+  integrity sha512-/mP4HFQ0fKIX4sXltG6kfcoGrfNDZwCIyWbH2SIcVaa9u7Rm0HKjambiHNg5OEruicTl9s1EwbERLwxZwk19aw==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -2166,20 +2195,20 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-nanoid@^3.1.23:
-  version "3.1.23"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
-  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
+nanoid@^3.1.22:
+  version "3.1.22"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
+  integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
 
 neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-node-releases@^1.1.71:
-  version "1.1.72"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
-  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
+node-releases@^1.1.70:
+  version "1.1.70"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08"
+  integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==
 
 normalize-range@^0.1.2:
   version "0.1.2"
@@ -2347,14 +2376,14 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^8.2.15:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.0.tgz#b1a713f6172ca427e3f05ef1303de8b65683325f"
-  integrity sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==
+postcss@^8.2.10:
+  version "8.2.10"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.10.tgz#ca7a042aa8aff494b334d0ff3e9e77079f6f702b"
+  integrity sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==
   dependencies:
     colorette "^1.2.2"
-    nanoid "^3.1.23"
-    source-map-js "^0.6.2"
+    nanoid "^3.1.22"
+    source-map "^0.6.1"
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -2574,11 +2603,6 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
-
 source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -2825,10 +2849,10 @@ webpack-sources@^2.1.1:
     source-list-map "^2.0.1"
     source-map "^0.6.1"
 
-webpack@5.37.1:
-  version "5.37.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.37.1.tgz#2deb5acd350583c1ab9338471f323381b0b0c14b"
-  integrity sha512-btZjGy/hSjCAAVHw+cKG+L0M+rstlyxbO2C+BOTaQ5/XAnxkDrP5sVbqWhXgo4pL3X2dcOib6rqCP20Zr9PLow==
+webpack@5.37.0:
+  version "5.37.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.37.0.tgz#2ab00f613faf494504eb2beef278dab7493cc39d"
+  integrity sha512-yvdhgcI6QkQkDe1hINBAJ1UNevqNGTVaCkD2SSJcB8rcrNNl922RI8i2DXUAuNfANoxwsiXXEA4ZPZI9q2oGLA==
   dependencies:
     "@types/eslint-scope" "^3.7.0"
     "@types/estree" "^0.0.47"

src/packages/utils.ts

@@ -26,11 +26,15 @@ export const exportToCanvas = ({
     { elements, appState },
     null,
   );
-  const { exportBackground, viewBackgroundColor } = restoredAppState;
+  const {
+    exportBackground,
+    viewBackgroundColor,
+    shouldAddWatermark,
+  } = restoredAppState;
   return _exportToCanvas(
     getNonDeletedElements(restoredElements),
     { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
-    { exportBackground, viewBackgroundColor },
+    { exportBackground, viewBackgroundColor, shouldAddWatermark },
     (width: number, height: number) => {
       const canvas = document.createElement("canvas");
       const ret = getDimensions(width, height);

src/packages/utils/package.json

@@ -34,22 +34,22 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "7.14.3",
+    "@babel/core": "7.14.2",
     "@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.14.3",
+    "@babel/plugin-transform-typescript": "7.13.0",
     "@babel/preset-env": "7.14.1",
     "@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.2.6",
+    "css-loader": "5.2.4",
     "file-loader": "6.2.0",
     "sass-loader": "11.1.1",
     "ts-loader": "8.1.0",
     "webpack": "5.37.1",
-    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-bundle-analyzer": "4.4.1",
     "webpack-cli": "4.7.0"
   },
   "bugs": "https://github.com/excalidraw/excalidraw/issues",

src/packages/utils/yarn.lock

@@ -14,17 +14,17 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
   integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
 
-"@babel/core@7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
-  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
+"@babel/core@7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.2.tgz#54e45334ffc0172048e5c93ded36461d3ad4c417"
+  integrity sha512-OgC1mON+l4U4B4wiohJlQNUU3H73mpTyYY3j/c8U9dr9UagGGSm+WFpzjy/YLdoyjiG++c1kIDgxCo/mLwQJeQ==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.3"
+    "@babel/generator" "^7.14.2"
     "@babel/helper-compilation-targets" "^7.13.16"
     "@babel/helper-module-transforms" "^7.14.2"
     "@babel/helpers" "^7.14.0"
-    "@babel/parser" "^7.14.3"
+    "@babel/parser" "^7.14.2"
     "@babel/template" "^7.12.13"
     "@babel/traverse" "^7.14.2"
     "@babel/types" "^7.14.2"
@@ -35,10 +35,10 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.14.2", "@babel/generator@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.3.tgz#0c2652d91f7bddab7cccc6ba8157e4f40dcedb91"
-  integrity sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==
+"@babel/generator@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.2.tgz#d5773e8b557d421fd6ce0d5efa5fd7fc22567c30"
+  integrity sha512-OnADYbKrffDVai5qcpkMxQ7caomHOoEwjkouqnN2QhydAjowFAZcsdecFIRUBdb+ZcruwYE4ythYmF1UBZU5xQ==
   dependencies:
     "@babel/types" "^7.14.2"
     jsesc "^2.5.1"
@@ -69,16 +69,27 @@
     browserslist "^4.14.5"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.3.tgz#832111bcf4f57ca57a4c5b1a000fc125abc6554a"
-  integrity sha512-BnEfi5+6J2Lte9LeiL6TxLWdIlEv9Woacc1qXzXBgbikcOzMRM2Oya5XGg/f/ngotv1ej2A/b+3iJH8wbS1+lQ==
+"@babel/helper-create-class-features-plugin@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.0.tgz#28d04ad9cfbd1ed1d8b988c9ea7b945263365846"
+  integrity sha512-twwzhthM4/+6o9766AW2ZBHpIHPSGrPGk1+WfHiu13u/lBnggXGNYCpeAyVfNwGDKfkhEDp+WOD/xafoJ2iLjA==
+  dependencies:
+    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-member-expression-to-functions" "^7.13.0"
+    "@babel/helper-optimise-call-expression" "^7.12.13"
+    "@babel/helper-replace-supers" "^7.13.0"
+    "@babel/helper-split-export-declaration" "^7.12.13"
+
+"@babel/helper-create-class-features-plugin@^7.14.0":
+  version "7.14.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.1.tgz#1fe11b376f3c41650ad9fedc665b0068722ea76c"
+  integrity sha512-r8rsUahG4ywm0QpGcCrLaUSOuNAISR3IZCg4Fx05Ozq31aCUrQsTLH6KPxy0N5ULoQ4Sn9qjNdGNtbPWAC6hYg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.14.2"
+    "@babel/helper-function-name" "^7.12.13"
     "@babel/helper-member-expression-to-functions" "^7.13.12"
     "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.14.3"
+    "@babel/helper-replace-supers" "^7.13.12"
     "@babel/helper-split-export-declaration" "^7.12.13"
 
 "@babel/helper-create-regexp-features-plugin@^7.12.13":
@@ -236,16 +247,6 @@
     "@babel/traverse" "^7.13.0"
     "@babel/types" "^7.13.12"
 
-"@babel/helper-replace-supers@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.3.tgz#ca17b318b859d107f0e9b722d58cf12d94436600"
-  integrity sha512-Rlh8qEWZSTfdz+tgNV/N4gz1a0TMNwCUcENhMjHTHKp3LseYH5Jha0NSlyTQWMnjbYcwFt+bqAMqSLHVXkQ6UA==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.13.12"
-    "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/traverse" "^7.14.2"
-    "@babel/types" "^7.14.2"
-
 "@babel/helper-simple-access@^7.13.12":
   version "7.13.12"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.13.12.tgz#dd6c538afb61819d205a012c31792a39c7a5eaf6"
@@ -310,10 +311,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.12.13", "@babel/parser@^7.14.2", "@babel/parser@^7.14.3":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
-  integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
+"@babel/parser@^7.12.13", "@babel/parser@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.2.tgz#0c1680aa44ad4605b16cbdcc5c341a61bde9c746"
+  integrity sha512-IoVDIHpsgE/fu7eXBeRWt8zLbDrSvD7H1gpomOkPpBoEN8KCruCqSDdqo8dddwQQrui30KSvQBaMUOJiuFu6QQ==
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
   version "7.13.12"
@@ -801,12 +802,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-typescript@7.14.3", "@babel/plugin-transform-typescript@^7.13.0":
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.3.tgz#44f67f725a60cccee33d9d6fee5e4f338258f34f"
-  integrity sha512-G5Bb5pY6tJRTC4ag1visSgiDoGgJ1u1fMUgmc2ijLkcIdzP83Q1qyZX4ggFQ/SkR+PNOatkaYC+nKcTlpsX4ag==
+"@babel/plugin-transform-typescript@7.13.0", "@babel/plugin-transform-typescript@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz#4a498e1f3600342d2a9e61f60131018f55774853"
+  integrity sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.14.3"
+    "@babel/helper-create-class-features-plugin" "^7.13.0"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-typescript" "^7.12.13"
 
@@ -1353,15 +1354,15 @@ braces@^3.0.1:
     fill-range "^7.0.1"
 
 browserslist@^4.14.5, browserslist@^4.16.3:
-  version "4.16.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
-  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
+  version "4.16.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
+  integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
   dependencies:
-    caniuse-lite "^1.0.30001219"
-    colorette "^1.2.2"
-    electron-to-chromium "^1.3.723"
+    caniuse-lite "^1.0.30001181"
+    colorette "^1.2.1"
+    electron-to-chromium "^1.3.649"
     escalade "^3.1.1"
-    node-releases "^1.1.71"
+    node-releases "^1.1.70"
 
 buffer-from@^1.0.0:
   version "1.1.1"
@@ -1376,10 +1377,15 @@ call-bind@^1.0.0:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
-caniuse-lite@^1.0.30001219:
-  version "1.0.30001230"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001230.tgz#8135c57459854b2240b57a4a6786044bdc5a9f71"
-  integrity sha512-5yBd5nWCBS+jWKTcHOzXwo5xzcj4ePE/yjtkZyUV1BTUmrBaA9MRGC+e7mxnqXSA90CmCA8L3eKLaSUkt099IQ==
+camelcase@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+  integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
+caniuse-lite@^1.0.30001181:
+  version "1.0.30001187"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001187.tgz#5706942631f83baa5a0218b7dfa6ced29f845438"
+  integrity sha512-w7/EP1JRZ9552CyrThUnay2RkZ1DXxKe/Q2swTC4+LElLh9RRYrL1Z+27LlakB8kzY0fSmHw9mc7XYDUKAKWMA==
 
 chalk@^1.1.3:
   version "1.1.3"
@@ -1515,14 +1521,15 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-css-loader@5.2.6:
-  version "5.2.6"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.6.tgz#c3c82ab77fea1f360e587d871a6811f4450cc8d1"
-  integrity sha512-0wyN5vXMQZu6BvjbrPdUJvkCzGEO24HC7IS7nW4llc6BBFC+zwR9CKtYGv63Puzsg10L/o12inMY5/2ByzfD6w==
+css-loader@5.2.4:
+  version "5.2.4"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.4.tgz#e985dcbce339812cb6104ef3670f08f9893a1536"
+  integrity sha512-OFYGyINCKkdQsTrSYxzGSFnGS4gNjcXkKkQgWxK138jgnPt+lepxdjSZNc8sHAl5vP3DhsJUxufWIjOwI8PMMw==
   dependencies:
+    camelcase "^6.2.0"
     icss-utils "^5.1.0"
     loader-utils "^2.0.0"
-    postcss "^8.2.15"
+    postcss "^8.2.10"
     postcss-modules-extract-imports "^3.0.0"
     postcss-modules-local-by-default "^4.0.0"
     postcss-modules-scope "^3.0.0"
@@ -1562,10 +1569,10 @@ duplexer@^0.1.2:
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
-electron-to-chromium@^1.3.723:
-  version "1.3.739"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.739.tgz#f07756aa92cabd5a6eec6f491525a64fe62f98b9"
-  integrity sha512-+LPJVRsN7hGZ9EIUUiWCpO7l4E3qBYHNadazlucBfsXBbccDFNKUBAgzE68FnkWGJPwD/AfKhSzL+G+Iqb8A4A==
+electron-to-chromium@^1.3.649:
+  version "1.3.666"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.666.tgz#59f3ce1e45b860a0ebe439b72664354efbb8bc62"
+  integrity sha512-/mP4HFQ0fKIX4sXltG6kfcoGrfNDZwCIyWbH2SIcVaa9u7Rm0HKjambiHNg5OEruicTl9s1EwbERLwxZwk19aw==
 
 emojis-list@^3.0.0:
   version "3.0.0"
@@ -2054,20 +2061,20 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-nanoid@^3.1.23:
-  version "3.1.23"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
-  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
+nanoid@^3.1.22:
+  version "3.1.22"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.22.tgz#b35f8fb7d151990a8aebd5aa5015c03cf726f844"
+  integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
 
 neo-async@^2.6.2:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-node-releases@^1.1.71:
-  version "1.1.72"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
-  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
+node-releases@^1.1.70:
+  version "1.1.70"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.70.tgz#66e0ed0273aa65666d7fe78febe7634875426a08"
+  integrity sha512-Slf2s69+2/uAD79pVVQo8uSiC34+g8GWY8UH2Qtqv34ZfhYrxpYpfzs9Js9d6O0mbDmALuxaTlplnBTnSELcrw==
 
 npm-run-path@^4.0.1:
   version "4.0.1"
@@ -2199,14 +2206,14 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^8.2.15:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.0.tgz#b1a713f6172ca427e3f05ef1303de8b65683325f"
-  integrity sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==
+postcss@^8.2.10:
+  version "8.2.10"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.10.tgz#ca7a042aa8aff494b334d0ff3e9e77079f6f702b"
+  integrity sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==
   dependencies:
     colorette "^1.2.2"
-    nanoid "^3.1.23"
-    source-map-js "^0.6.2"
+    nanoid "^3.1.22"
+    source-map "^0.6.1"
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -2421,11 +2428,6 @@ source-list-map@^2.0.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
-
 source-map-support@~0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
@@ -2609,10 +2611,10 @@ watchpack@^2.0.0:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
 
-webpack-bundle-analyzer@4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.2.tgz#39898cf6200178240910d629705f0f3493f7d666"
-  integrity sha512-PIagMYhlEzFfhMYOzs5gFT55DkUdkyrJi/SxJp8EF3YMWhS+T9vvs2EoTetpk5qb6VsCq02eXTlRDOydRhDFAQ==
+webpack-bundle-analyzer@4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.1.tgz#c71fb2eaffc10a4754d7303b224adb2342069da1"
+  integrity sha512-j5m7WgytCkiVBoOGavzNokBOqxe6Mma13X1asfVYtKWM3wxBiRRu1u1iG0Iol5+qp9WgyhkMmBAcvjEfJ2bdDw==
   dependencies:
     acorn "^8.0.4"
     acorn-walk "^8.0.0"

src/scene/export.ts

@@ -1,13 +1,21 @@
 import rough from "roughjs/bin/rough";
+import oc from "open-color";
+import { newTextElement } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { getCommonBounds } from "../element/bounds";
 import { renderScene, renderSceneToSvg } from "../renderer/renderScene";
 import { distance, SVG_NS } from "../utils";
 import { AppState } from "../types";
-import { THEME_FILTER } from "../constants";
+import { t } from "../i18n";
+import {
+  DEFAULT_FONT_FAMILY,
+  DEFAULT_VERTICAL_ALIGN,
+  THEME_FILTER,
+} from "../constants";
 import { getDefaultAppState } from "../appState";
 
 export const SVG_EXPORT_TAG = `<!-- svg-source:excalidraw -->`;
+const WATERMARK_HEIGHT = 16;
 
 export const exportToCanvas = (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -17,11 +25,13 @@ export const exportToCanvas = (
     exportPadding = 10,
     viewBackgroundColor,
     scale = 1,
+    shouldAddWatermark,
   }: {
     exportBackground: boolean;
     exportPadding?: number;
     scale?: number;
     viewBackgroundColor: string;
+    shouldAddWatermark: boolean;
   },
   createCanvas: (
     width: number,
@@ -33,7 +43,13 @@ export const exportToCanvas = (
     return { canvas: tempCanvas, scale };
   },
 ) => {
-  const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
+  const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
+
+  const [minX, minY, width, height] = getCanvasSize(
+    sceneElements,
+    exportPadding,
+    shouldAddWatermark,
+  );
 
   const { canvas: tempCanvas, scale: newScale = scale } = createCanvas(
     width,
@@ -41,7 +57,7 @@ export const exportToCanvas = (
   );
 
   renderScene(
-    elements,
+    sceneElements,
     appState,
     null,
     newScale,
@@ -78,6 +94,7 @@ export const exportToSvg = (
     viewBackgroundColor,
     exportWithDarkMode,
     scale = 1,
+    shouldAddWatermark,
     metadata = "",
   }: {
     exportBackground: boolean;
@@ -85,10 +102,17 @@ export const exportToSvg = (
     scale?: number;
     viewBackgroundColor: string;
     exportWithDarkMode?: boolean;
+    shouldAddWatermark: boolean;
     metadata?: string;
   },
 ): SVGSVGElement => {
-  const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
+  const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
+
+  const [minX, minY, width, height] = getCanvasSize(
+    sceneElements,
+    exportPadding,
+    shouldAddWatermark,
+  );
 
   // initialze SVG root
   const svgRoot = document.createElementNS(SVG_NS, "svg");
@@ -130,7 +154,7 @@ export const exportToSvg = (
   }
 
   const rsvg = rough.svg(svgRoot);
-  renderSceneToSvg(elements, rsvg, svgRoot, {
+  renderSceneToSvg(sceneElements, rsvg, svgRoot, {
     offsetX: -minX + exportPadding,
     offsetY: -minY + exportPadding,
   });
@@ -138,14 +162,52 @@ export const exportToSvg = (
   return svgRoot;
 };
 
+const getElementsAndWatermark = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  shouldAddWatermark: boolean,
+): readonly NonDeletedExcalidrawElement[] => {
+  let _elements = [...elements];
+
+  if (shouldAddWatermark) {
+    const [, , maxX, maxY] = getCommonBounds(elements);
+    _elements = [..._elements, getWatermarkElement(maxX, maxY)];
+  }
+
+  return _elements;
+};
+
+const getWatermarkElement = (maxX: number, maxY: number) => {
+  return newTextElement({
+    text: t("labels.madeWithExcalidraw"),
+    fontSize: WATERMARK_HEIGHT,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    textAlign: "right",
+    verticalAlign: DEFAULT_VERTICAL_ALIGN,
+    x: maxX,
+    y: maxY + WATERMARK_HEIGHT,
+    strokeColor: oc.gray[5],
+    backgroundColor: "transparent",
+    fillStyle: "hachure",
+    strokeWidth: 1,
+    strokeStyle: "solid",
+    roughness: 1,
+    opacity: 100,
+    strokeSharpness: "sharp",
+  });
+};
+
 // calculate smallest area to fit the contents in
 const getCanvasSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
+  shouldAddWatermark: boolean,
 ): [number, number, number, number] => {
   const [minX, minY, maxX, maxY] = getCommonBounds(elements);
   const width = distance(minX, maxX) + exportPadding * 2;
-  const height = distance(minY, maxY) + exportPadding + exportPadding;
+  const height =
+    distance(minY, maxY) +
+    exportPadding +
+    (shouldAddWatermark ? 0 : exportPadding);
 
   return [minX, minY, width, height];
 };
@@ -153,11 +215,15 @@ const getCanvasSize = (
 export const getExportSize = (
   elements: readonly NonDeletedExcalidrawElement[],
   exportPadding: number,
+  shouldAddWatermark: boolean,
   scale: number,
 ): [number, number] => {
+  const sceneElements = getElementsAndWatermark(elements, shouldAddWatermark);
+
   const [, , width, height] = getCanvasSize(
-    elements,
+    sceneElements,
     exportPadding,
+    shouldAddWatermark,
   ).map((dimension) => Math.trunc(dimension * scale));
 
   return [width, height];

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

@@ -57,6 +57,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -220,6 +221,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -527,6 +529,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -834,6 +837,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -995,6 +999,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -1192,6 +1197,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -1446,6 +1452,7 @@ Object {
     "id3": true,
   },
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -1763,6 +1770,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -2483,6 +2491,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -2790,6 +2799,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -3101,6 +3111,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -3481,6 +3492,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -3737,6 +3749,7 @@ Object {
     "id4": true,
   },
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -4053,6 +4066,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -4154,6 +4168,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,

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

@@ -121,9 +121,11 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should not hide an
             >
               <path
                 d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z"
+                fill-rule="nonzero"
               />
               <path
                 d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+                fill-rule="nonzero"
               />
             </svg>
           </div>
@@ -320,9 +322,11 @@ exports[`<Excalidraw/> Test UIOptions prop should not hide any UI element when t
             >
               <path
                 d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z"
+                fill-rule="nonzero"
               />
               <path
                 d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+                fill-rule="nonzero"
               />
             </svg>
           </div>

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

@@ -68,6 +68,7 @@ Object {
     "id5": true,
   },
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -535,6 +536,7 @@ Object {
     "id5": true,
   },
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -984,6 +986,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -1761,6 +1764,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -1969,6 +1973,7 @@ Object {
     "id5": true,
   },
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -2421,6 +2426,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -2670,6 +2676,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -2836,6 +2843,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -3275,6 +3283,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -3513,6 +3522,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -3718,6 +3728,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -3959,6 +3970,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -4211,6 +4223,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -4613,6 +4626,7 @@ Object {
     "x": 500,
     "y": 500,
   },
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -4885,6 +4899,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -5177,6 +5192,7 @@ Object {
     "x": 110,
     "y": 110,
   },
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -5362,6 +5378,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -5525,6 +5542,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -5984,6 +6002,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -6294,6 +6313,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -8344,6 +8364,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -8706,6 +8727,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -8958,6 +8980,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -9211,6 +9234,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -9520,6 +9544,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -9683,6 +9708,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -9846,6 +9872,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -10009,6 +10036,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -10202,6 +10230,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -10395,6 +10424,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -10600,6 +10630,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -10793,6 +10824,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -10956,6 +10988,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -11119,6 +11152,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -11312,6 +11346,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -11475,6 +11510,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -11691,6 +11727,7 @@ Object {
     "id4": true,
   },
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -12399,6 +12436,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -12647,6 +12685,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": true,
   "showHelpDialog": false,
   "showStats": false,
@@ -12746,6 +12785,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -12850,6 +12890,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -13022,6 +13063,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -13336,6 +13378,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -13546,6 +13589,7 @@ Object {
     "id10": true,
   },
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -14353,6 +14397,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -14456,6 +14501,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -15233,6 +15279,7 @@ Object {
     "x": 0,
     "y": 0,
   },
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -15635,6 +15682,7 @@ Object {
     "x": 0,
     "y": 0,
   },
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -15883,6 +15931,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": true,
   "showHelpDialog": false,
   "showStats": false,
@@ -15984,6 +16033,7 @@ Object {
   },
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -16479,6 +16529,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,
@@ -16578,6 +16629,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,

src/tests/packages/__snapshots__/utils.test.ts.snap

@@ -54,6 +54,7 @@ Object {
   "selectedElementIds": Object {},
   "selectedGroupIds": Object {},
   "selectionElement": null,
+  "shouldAddWatermark": false,
   "shouldCacheIgnoreZoom": false,
   "showHelpDialog": false,
   "showStats": false,

src/tests/scene/export.test.ts

@@ -13,6 +13,7 @@ describe("exportToSvg", () => {
   const DEFAULT_OPTIONS = {
     exportBackground: false,
     viewBackgroundColor: "#ffffff",
+    shouldAddWatermark: false,
   };
 
   it("with default arguments", () => {
@@ -36,6 +37,17 @@ describe("exportToSvg", () => {
     );
   });
 
+  it("with watermark", () => {
+    const svgElement = exportUtils.exportToSvg(ELEMENTS, {
+      ...DEFAULT_OPTIONS,
+      shouldAddWatermark: true,
+    });
+
+    expect(svgElement.querySelector("text")?.textContent).toMatchInlineSnapshot(
+      `"Made with Excalidraw"`,
+    );
+  });
+
   it("with dark mode", () => {
     const svgElement = exportUtils.exportToSvg(ELEMENTS, {
       ...DEFAULT_OPTIONS,

src/types.ts

@@ -58,6 +58,7 @@ export type AppState = {
   exportBackground: boolean;
   exportEmbedScene: boolean;
   exportWithDarkMode: boolean;
+  shouldAddWatermark: boolean;
   currentItemStrokeColor: string;
   currentItemBackgroundColor: string;
   currentItemFillStyle: ExcalidrawElement["fillStyle"];