Bump prettier from 1.19.1 to 2.0.1 (#1060)

* Bump prettier from 1.19.1 to 2.0.1 Bumps [prettier](https://github.com/prettier/prettier) from 1.19.1 to 2.0.1. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/1.19.1...2.0.1) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> * Update formatting Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Panayiotis Lipiridis <lipiridis@gmail.com>
2020-03-23 13:05:07 +02:00 · 2020-03-23 13:05:07 +02:00 · 722c498abe
commit 722c498abe
parent 251fa27c65
46 changed files with 170 additions and 170 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12261,9 +12261,9 @@
      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
    },
    "prettier": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz",
+      "integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==",
      "dev": true
    },
    "prettier-linter-helpers": {
--- a/package.json
+++ b/package.json
@ -33,7 +33,7 @@
    "lint-staged": "10.0.8",
    "node-sass": "4.13.1",
    "pepjs": "0.5.2",
-    "prettier": "1.19.1",
+    "prettier": "2.0.1",
    "rewire": "5.0.0",
    "typescript": "3.8.3"
  },
--- a/public/index.html
+++ b/public/index.html
@ -159,7 +159,7 @@
        width="40"
        height="40"
        viewBox="0 0 250 250"
-        style="position: absolute; top: 0; right: 0"
+        style="position: absolute; top: 0; right: 0;"
      >
        <a
          href="https://github.com/excalidraw/excalidraw"
@ -170,7 +170,7 @@
          <path
            class="octo-arm"
            d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
-            style="transform-origin: 130px 106px"
+            style="transform-origin: 130px 106px;"
            fill="#fff"
          />
          <path
--- a/scripts/build-node.js
+++ b/scripts/build-node.js
@ -29,7 +29,7 @@ config.entry = "./src/index-node";
 // By default, webpack is going to replace the require of the canvas.node file
 // to just a string with the path of the canvas.node file. We need to tell
 // webpack to avoid rewriting that dependency.
-config.externals = function(context, request, callback) {
+config.externals = function (context, request, callback) {
  if (/\.node$/.test(request)) {
    return callback(
      null,
--- a/scripts/build-version.js
+++ b/scripts/build-version.js
@ -4,9 +4,9 @@ const fs = require("fs");
 const path = require("path");
 const asar = require("asar");

-const zero = digit => `0${digit}`.slice(-2);
+const zero = (digit) => `0${digit}`.slice(-2);

-const versionDate = date => {
+const versionDate = (date) => {
  const date_ = `${date.getFullYear()}-${zero(date.getMonth() + 1)}-${zero(
    date.getDate(),
  )}`;
--- a/src/actions/actionCanvas.tsx
+++ b/src/actions/actionCanvas.tsx
@ -26,7 +26,7 @@ export const actionChangeViewBackgroundColor = register({
          label={t("labels.canvasBackground")}
          type="canvasBackground"
          color={appState.viewBackgroundColor}
-          onChange={color => updateData(color)}
+          onChange={(color) => updateData(color)}
        />
      </div>
    );
@ -35,9 +35,9 @@ export const actionChangeViewBackgroundColor = register({

 export const actionClearCanvas = register({
  name: "clearCanvas",
-  perform: elements => {
+  perform: (elements) => {
    return {
-      elements: elements.map(element =>
+      elements: elements.map((element) =>
        newElementWith(element, { isDeleted: true }),
      ),
      appState: getDefaultAppState(),
@ -97,7 +97,7 @@ export const actionZoomIn = register({
      }}
    />
  ),
-  keyTest: event =>
+  keyTest: (event) =>
    (event.code === KEY_CODES.EQUAL || event.code === KEY_CODES.NUM_ADD) &&
    (event[KEYS.CTRL_OR_CMD] || event.shiftKey),
 });
@ -124,7 +124,7 @@ export const actionZoomOut = register({
      }}
    />
  ),
-  keyTest: event =>
+  keyTest: (event) =>
    (event.code === KEY_CODES.MINUS || event.code === KEY_CODES.NUM_SUBTRACT) &&
    (event[KEYS.CTRL_OR_CMD] || event.shiftKey),
 });
@ -151,7 +151,7 @@ export const actionResetZoom = register({
      }}
    />
  ),
-  keyTest: event =>
+  keyTest: (event) =>
    (event.code === KEY_CODES.ZERO || event.code === KEY_CODES.NUM_ZERO) &&
    (event[KEYS.CTRL_OR_CMD] || event.shiftKey),
 });
--- a/src/actions/actionDeleteSelected.tsx
+++ b/src/actions/actionDeleteSelected.tsx
@ -25,7 +25,7 @@ export const actionDeleteSelected = register({
  },
  contextItemLabel: "labels.delete",
  contextMenuOrder: 3,
-  keyTest: event => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE,
+  keyTest: (event) => event.key === KEYS.BACKSPACE || event.key === KEYS.DELETE,
  PanelComponent: ({ elements, appState, updateData }) => (
    <ToolButton
      type="button"
--- a/src/actions/actionDuplicateSelection.ts
+++ b/src/actions/actionDuplicateSelection.ts
@ -27,5 +27,5 @@ export const actionDuplicateSelection = register({
    };
  },
  contextItemLabel: "labels.duplicateSelection",
-  keyTest: event => event[KEYS.CTRL_OR_CMD] && event.key === "d",
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "d",
 });
--- a/src/actions/actionExport.tsx
+++ b/src/actions/actionExport.tsx
@ -34,7 +34,7 @@ export const actionChangeExportBackground = register({
      <input
        type="checkbox"
        checked={appState.exportBackground}
-        onChange={event => updateData(event.target.checked)}
+        onChange={(event) => updateData(event.target.checked)}
      />{" "}
      {t("labels.withBackground")}
    </label>
@ -44,7 +44,7 @@ export const actionChangeExportBackground = register({
 export const actionSaveScene = register({
  name: "saveScene",
  perform: (elements, appState, value) => {
-    saveAsJSON(elements, appState).catch(error => console.error(error));
+    saveAsJSON(elements, appState).catch((error) => console.error(error));
    return { commitToHistory: false };
  },
  PanelComponent: ({ updateData }) => (
@ -84,7 +84,7 @@ export const actionLoadScene = register({
          .then(({ elements, appState }) => {
            updateData({ elements: elements, appState: appState });
          })
-          .catch(error => console.error(error));
+          .catch((error) => console.error(error));
      }}
    />
  ),
--- a/src/actions/actionHistory.tsx
+++ b/src/actions/actionHistory.tsx
@ -35,7 +35,7 @@ const writeData = (
    const nextElementMap = getElementMap(nextElements);
    return {
      elements: nextElements
-        .map(nextElement =>
+        .map((nextElement) =>
          newElementWith(
            prevElementMap[nextElement.id] || nextElement,
            nextElement,
@ -44,9 +44,9 @@ const writeData = (
        .concat(
          prevElements
            .filter(
-              prevElement => !nextElementMap.hasOwnProperty(prevElement.id),
+              (prevElement) => !nextElementMap.hasOwnProperty(prevElement.id),
            )
-            .map(prevElement =>
+            .map((prevElement) =>
              newElementWith(prevElement, { isDeleted: true }),
            ),
        ),
@ -62,7 +62,7 @@ const testUndo = (shift: boolean) => (event: KeyboardEvent) =>

 type ActionCreator = (history: SceneHistory) => Action;

-export const createUndoAction: ActionCreator = history => ({
+export const createUndoAction: ActionCreator = (history) => ({
  name: "undo",
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.undoOnce()),
@ -78,7 +78,7 @@ export const createUndoAction: ActionCreator = history => ({
  commitToHistory: () => false,
 });

-export const createRedoAction: ActionCreator = history => ({
+export const createRedoAction: ActionCreator = (history) => ({
  name: "redo",
  perform: (elements, appState) =>
    writeData(elements, appState, () => history.redoOnce()),
--- a/src/actions/actionProperties.tsx
+++ b/src/actions/actionProperties.tsx
@ -18,7 +18,7 @@ const changeProperty = (
  appState: AppState,
  callback: (element: ExcalidrawElement) => ExcalidrawElement,
 ) => {
-  return elements.map(element => {
+  return elements.map((element) => {
    if (appState.selectedElementIds[element.id]) {
      return callback(element);
    }
@ -26,7 +26,7 @@ const changeProperty = (
  });
 };

-const getFormValue = function<T>(
+const getFormValue = function <T>(
  elements: readonly ExcalidrawElement[],
  appState: AppState,
  getAttribute: (element: ExcalidrawElement) => T,
@ -46,7 +46,7 @@ export const actionChangeStrokeColor = register({
  name: "changeStrokeColor",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el =>
+      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
          strokeColor: value,
        }),
@ -64,7 +64,7 @@ export const actionChangeStrokeColor = register({
        color={getFormValue(
          elements,
          appState,
-          element => element.strokeColor,
+          (element) => element.strokeColor,
          appState.currentItemStrokeColor,
        )}
        onChange={updateData}
@ -77,7 +77,7 @@ export const actionChangeBackgroundColor = register({
  name: "changeBackgroundColor",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el =>
+      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
          backgroundColor: value,
        }),
@ -95,7 +95,7 @@ export const actionChangeBackgroundColor = register({
        color={getFormValue(
          elements,
          appState,
-          element => element.backgroundColor,
+          (element) => element.backgroundColor,
          appState.currentItemBackgroundColor,
        )}
        onChange={updateData}
@ -108,7 +108,7 @@ export const actionChangeFillStyle = register({
  name: "changeFillStyle",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el =>
+      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
          fillStyle: value,
        }),
@ -130,10 +130,10 @@ export const actionChangeFillStyle = register({
        value={getFormValue(
          elements,
          appState,
-          element => element.fillStyle,
+          (element) => element.fillStyle,
          appState.currentItemFillStyle,
        )}
-        onChange={value => {
+        onChange={(value) => {
          updateData(value);
        }}
      />
@ -145,7 +145,7 @@ export const actionChangeStrokeWidth = register({
  name: "changeStrokeWidth",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el =>
+      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
          strokeWidth: value,
        }),
@ -167,10 +167,10 @@ export const actionChangeStrokeWidth = register({
        value={getFormValue(
          elements,
          appState,
-          element => element.strokeWidth,
+          (element) => element.strokeWidth,
          appState.currentItemStrokeWidth,
        )}
-        onChange={value => updateData(value)}
+        onChange={(value) => updateData(value)}
      />
    </fieldset>
  ),
@ -180,7 +180,7 @@ export const actionChangeSloppiness = register({
  name: "changeSloppiness",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el =>
+      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
          roughness: value,
        }),
@ -202,10 +202,10 @@ export const actionChangeSloppiness = register({
        value={getFormValue(
          elements,
          appState,
-          element => element.roughness,
+          (element) => element.roughness,
          appState.currentItemRoughness,
        )}
-        onChange={value => updateData(value)}
+        onChange={(value) => updateData(value)}
      />
    </fieldset>
  ),
@ -215,7 +215,7 @@ export const actionChangeOpacity = register({
  name: "changeOpacity",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el =>
+      elements: changeProperty(elements, appState, (el) =>
        newElementWith(el, {
          opacity: value,
        }),
@ -232,8 +232,8 @@ export const actionChangeOpacity = register({
        min="0"
        max="100"
        step="10"
-        onChange={event => updateData(+event.target.value)}
-        onWheel={event => {
+        onChange={(event) => updateData(+event.target.value)}
+        onWheel={(event) => {
          event.stopPropagation();
          const target = event.target as HTMLInputElement;
          const STEP = 10;
@ -251,7 +251,7 @@ export const actionChangeOpacity = register({
          getFormValue(
            elements,
            appState,
-            element => element.opacity,
+            (element) => element.opacity,
            appState.currentItemOpacity,
          ) ?? undefined
        }
@ -264,7 +264,7 @@ export const actionChangeFontSize = register({
  name: "changeFontSize",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el => {
+      elements: changeProperty(elements, appState, (el) => {
        if (isTextElement(el)) {
          const element: ExcalidrawTextElement = newElementWith(el, {
            font: `${value}px ${el.font.split("px ")[1]}`,
@ -298,10 +298,10 @@ export const actionChangeFontSize = register({
        value={getFormValue(
          elements,
          appState,
-          element => isTextElement(element) && +element.font.split("px ")[0],
+          (element) => isTextElement(element) && +element.font.split("px ")[0],
          +(appState.currentItemFont || DEFAULT_FONT).split("px ")[0],
        )}
-        onChange={value => updateData(value)}
+        onChange={(value) => updateData(value)}
      />
    </fieldset>
  ),
@ -311,7 +311,7 @@ export const actionChangeFontFamily = register({
  name: "changeFontFamily",
  perform: (elements, appState, value) => {
    return {
-      elements: changeProperty(elements, appState, el => {
+      elements: changeProperty(elements, appState, (el) => {
        if (isTextElement(el)) {
          const element: ExcalidrawTextElement = newElementWith(el, {
            font: `${el.font.split("px ")[0]}px ${value}`,
@ -344,10 +344,10 @@ export const actionChangeFontFamily = register({
        value={getFormValue(
          elements,
          appState,
-          element => isTextElement(element) && element.font.split("px ")[1],
+          (element) => isTextElement(element) && element.font.split("px ")[1],
          (appState.currentItemFont || DEFAULT_FONT).split("px ")[1],
        )}
-        onChange={value => updateData(value)}
+        onChange={(value) => updateData(value)}
      />
    </fieldset>
  ),
--- a/src/actions/actionSelectAll.ts
+++ b/src/actions/actionSelectAll.ts
@ -16,5 +16,5 @@ export const actionSelectAll = register({
    };
  },
  contextItemLabel: "labels.selectAll",
-  keyTest: event => event[KEYS.CTRL_OR_CMD] && event.key === "a",
+  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === "a",
 });
--- a/src/actions/actionStyles.ts
+++ b/src/actions/actionStyles.ts
@ -13,7 +13,7 @@ let copiedStyles: string = "{}";
 export const actionCopyStyles = register({
  name: "copyStyles",
  perform: (elements, appState) => {
-    const element = elements.find(el => appState.selectedElementIds[el.id]);
+    const element = elements.find((el) => appState.selectedElementIds[el.id]);
    if (element) {
      copiedStyles = JSON.stringify(element);
    }
@ -22,7 +22,7 @@ export const actionCopyStyles = register({
    };
  },
  contextItemLabel: "labels.copyStyles",
-  keyTest: event =>
+  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === "C",
  contextMenuOrder: 0,
 });
@ -35,7 +35,7 @@ export const actionPasteStyles = register({
      return { elements, commitToHistory: false };
    }
    return {
-      elements: elements.map(element => {
+      elements: elements.map((element) => {
        if (appState.selectedElementIds[element.id]) {
          const newElement = newElementWith(element, {
            backgroundColor: pastedElement?.backgroundColor,
@ -59,7 +59,7 @@ export const actionPasteStyles = register({
    };
  },
  contextItemLabel: "labels.pasteStyles",
-  keyTest: event =>
+  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && event.shiftKey && event.key === "V",
  contextMenuOrder: 1,
 });
--- a/src/actions/actionZindex.tsx
+++ b/src/actions/actionZindex.tsx
@ -31,7 +31,7 @@ export const actionSendBackward = register({
  },
  contextItemLabel: "labels.sendBackward",
  keyPriority: 40,
-  keyTest: event =>
+  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && !event.shiftKey && event.code === "BracketLeft",
  PanelComponent: ({ updateData }) => (
    <button
@ -59,7 +59,7 @@ export const actionBringForward = register({
  },
  contextItemLabel: "labels.bringForward",
  keyPriority: 40,
-  keyTest: event =>
+  keyTest: (event) =>
    event[KEYS.CTRL_OR_CMD] && !event.shiftKey && event.code === "BracketRight",
  PanelComponent: ({ updateData }) => (
    <button
@ -86,7 +86,7 @@ export const actionSendToBack = register({
    };
  },
  contextItemLabel: "labels.sendToBack",
-  keyTest: event => {
+  keyTest: (event) => {
    return isDarwin
      ? event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === "BracketLeft"
      : event[KEYS.CTRL_OR_CMD] &&
@ -122,7 +122,7 @@ export const actionBringToFront = register({
    };
  },
  contextItemLabel: "labels.bringToFront",
-  keyTest: event => {
+  keyTest: (event) => {
    return isDarwin
      ? event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === "BracketRight"
      : event[KEYS.CTRL_OR_CMD] &&
@ -133,7 +133,7 @@ export const actionBringToFront = register({
    <button
      type="button"
      className="zIndexButton"
-      onClick={event => updateData(null)}
+      onClick={(event) => updateData(null)}
      title={`${t("labels.bringToFront")} ${
        isDarwin
          ? getShortcutKey("CtrlOrCmd+Alt+]")
--- a/src/actions/manager.tsx
+++ b/src/actions/manager.tsx
@ -33,14 +33,14 @@ export class ActionManager implements ActionsManagerInterface {
  }

  registerAll(actions: readonly Action[]) {
-    actions.forEach(action => this.registerAction(action));
+    actions.forEach((action) => this.registerAction(action));
  }

  handleKeyDown(event: KeyboardEvent) {
    const data = Object.values(this.actions)
      .sort((a, b) => (b.keyPriority || 0) - (a.keyPriority || 0))
      .filter(
-        action =>
+        (action) =>
          action.keyTest &&
          action.keyTest(event, this.getAppState(), this.getElements()),
      );
@ -58,16 +58,16 @@ export class ActionManager implements ActionsManagerInterface {
    this.updater(action.perform(this.getElements(), this.getAppState(), null));
  }

-  getContextMenuItems(actionFilter: ActionFilterFn = action => action) {
+  getContextMenuItems(actionFilter: ActionFilterFn = (action) => action) {
    return Object.values(this.actions)
      .filter(actionFilter)
-      .filter(action => "contextItemLabel" in action)
+      .filter((action) => "contextItemLabel" in action)
      .sort(
        (a, b) =>
          (a.contextMenuOrder !== undefined ? a.contextMenuOrder : 999) -
          (b.contextMenuOrder !== undefined ? b.contextMenuOrder : 999),
      )
-      .map(action => ({
+      .map((action) => ({
        label: action.contextItemLabel ? t(action.contextItemLabel) : "",
        action: () => {
          this.updater(
--- a/src/clipboard.ts
+++ b/src/clipboard.ts
@ -81,7 +81,7 @@ export async function getClipboardContent(
 export async function copyCanvasToClipboardAsPng(canvas: HTMLCanvasElement) {
  return new Promise((resolve, reject) => {
    try {
-      canvas.toBlob(async function(blob: any) {
+      canvas.toBlob(async function (blob: any) {
        try {
          await navigator.clipboard.write([
            new window.ClipboardItem({ "image/png": blob }),
--- a/src/components/Actions.tsx
+++ b/src/components/Actions.tsx
@ -22,7 +22,7 @@ export function SelectedShapeActions({
    <div className="panelColumn">
      {renderAction("changeStrokeColor")}
      {(hasBackground(elementType) ||
-        targetElements.some(element => hasBackground(element.type))) && (
+        targetElements.some((element) => hasBackground(element.type))) && (
        <>
          {renderAction("changeBackgroundColor")}

@ -31,7 +31,7 @@ export function SelectedShapeActions({
      )}

      {(hasStroke(elementType) ||
-        targetElements.some(element => hasStroke(element.type))) && (
+        targetElements.some((element) => hasStroke(element.type))) && (
        <>
          {renderAction("changeStrokeWidth")}

@ -40,7 +40,7 @@ export function SelectedShapeActions({
      )}

      {(hasText(elementType) ||
-        targetElements.some(element => hasText(element.type))) && (
+        targetElements.some((element) => hasText(element.type))) && (
        <>
          {renderAction("changeFontSize")}

--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -111,7 +111,7 @@ import { actionFinalize } from "../actions";
 function withBatchedUpdates<
  TFunction extends ((event: any) => void) | (() => void)
 >(func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never) {
-  return (event => {
+  return ((event) => {
    unstable_batchedUpdates(func as TFunction, event);
  }) as TFunction;
 }
@ -183,7 +183,7 @@ export class App extends React.Component<any, AppState> {
          appState={this.state}
          setAppState={this.setAppState}
          actionManager={this.actionManager}
-          elements={globalSceneState.getAllElements().filter(element => {
+          elements={globalSceneState.getAllElements().filter((element) => {
            return !element.isDeleted;
          })}
          setElements={this.setElements}
@ -201,7 +201,7 @@ export class App extends React.Component<any, AppState> {
            }}
            width={canvasWidth}
            height={canvasHeight}
-            ref={canvas => {
+            ref={(canvas) => {
              // canvas is null when unmounting
              if (canvas !== null) {
                this.canvas = canvas;
@ -220,7 +220,7 @@ export class App extends React.Component<any, AppState> {
            onPointerMove={this.handleCanvasPointerMove}
            onPointerUp={this.removePointer}
            onPointerCancel={this.removePointer}
-            onDrop={event => {
+            onDrop={(event) => {
              const file = event.dataTransfer.files[0];
              if (
                file?.type === "application/json" ||
@ -234,7 +234,7 @@ export class App extends React.Component<any, AppState> {
                      commitToHistory: false,
                    }),
                  )
-                  .catch(error => console.error(error));
+                  .catch((error) => console.error(error));
              }
            }}
          >
@ -260,7 +260,7 @@ export class App extends React.Component<any, AppState> {
      if (res.commitToHistory) {
        history.resumeRecording();
      }
-      this.setState(state => ({
+      this.setState((state) => ({
        ...res.appState,
        isCollaborating: state.isCollaborating,
        collaborators: state.collaborators,
@ -276,7 +276,7 @@ export class App extends React.Component<any, AppState> {
    this.saveDebounced.flush();
  });

-  private disableEvent: EventHandlerNonNull = event => {
+  private disableEvent: EventHandlerNonNull = (event) => {
    event.preventDefault();
  };
  private unmounted = false;
@ -400,7 +400,7 @@ export class App extends React.Component<any, AppState> {
  private onResize = withBatchedUpdates(() => {
    globalSceneState
      .getAllElements()
-      .forEach(element => invalidateShapeForElement(element));
+      .forEach((element) => invalidateShapeForElement(element));
    this.setState({});
  });

@ -586,7 +586,7 @@ export class App extends React.Component<any, AppState> {
    const dx = x - elementsCenterX;
    const dy = y - elementsCenterY;

-    const newElements = clipboardElements.map(element =>
+    const newElements = clipboardElements.map((element) =>
      duplicateElement(element, {
        x: element.x + dx - minX,
        y: element.y + dy - minY,
@ -631,7 +631,7 @@ export class App extends React.Component<any, AppState> {
  };

  toggleLock = () => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
      elementLocked: !prevState.elementLocked,
      elementType: prevState.elementLocked
        ? "selection"
@ -767,7 +767,7 @@ export class App extends React.Component<any, AppState> {
              break;
            case "MOUSE_LOCATION":
              const { socketID, pointerCoords } = decryptedData.payload;
-              this.setState(state => {
+              this.setState((state) => {
                if (!state.collaborators.has(socketID)) {
                  state.collaborators.set(socketID, {});
                }
@ -787,7 +787,7 @@ export class App extends React.Component<any, AppState> {
        this.socketInitialized = true;
      });
      this.socket.on("room-user-change", (clients: string[]) => {
-        this.setState(state => {
+        this.setState((state) => {
          const collaborators: typeof state.collaborators = new Map();
          for (const socketID of clients) {
            if (state.collaborators.has(socketID)) {
@ -901,7 +901,7 @@ export class App extends React.Component<any, AppState> {
        ? ELEMENT_SHIFT_TRANSLATE_AMOUNT
        : ELEMENT_TRANSLATE_AMOUNT;
      globalSceneState.replaceAllElements(
-        globalSceneState.getAllElements().map(el => {
+        globalSceneState.getAllElements().map((el) => {
          if (this.state.selectedElementIds[el.id]) {
            const update: { x?: number; y?: number } = {};
            if (event.key === KEYS.ARROW_LEFT) {
@ -1039,7 +1039,7 @@ export class App extends React.Component<any, AppState> {
      globalSceneState.replaceAllElements(
        globalSceneState
          .getAllElements()
-          .filter(element => element.id !== elementAtPosition.id),
+          .filter((element) => element.id !== elementAtPosition.id),
      );

      const centerElementX = elementAtPosition.x + elementAtPosition.width / 2;
@ -1097,7 +1097,7 @@ export class App extends React.Component<any, AppState> {
      font: element.font,
      opacity: this.state.currentItemOpacity,
      zoom: this.state.zoom,
-      onSubmit: text => {
+      onSubmit: (text) => {
        if (text) {
          globalSceneState.replaceAllElements([
            ...globalSceneState.getAllElements(),
@ -1105,7 +1105,7 @@ export class App extends React.Component<any, AppState> {
            newTextElement({ ...element, text, font: element.font }),
          ]);
        }
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
          selectedElementIds: {
            ...prevState.selectedElementIds,
            [element.id]: true,
@ -1477,7 +1477,7 @@ export class App extends React.Component<any, AppState> {
          // otherwise, it will trigger selection based on current
          // state of the box
          if (!this.state.selectedElementIds[hitElement.id]) {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
              selectedElementIds: {
                ...prevState.selectedElementIds,
                [hitElement!.id]: true,
@ -1557,7 +1557,7 @@ export class App extends React.Component<any, AppState> {
        opacity: this.state.currentItemOpacity,
        font: this.state.currentItemFont,
        zoom: this.state.zoom,
-        onSubmit: text => {
+        onSubmit: (text) => {
          if (text) {
            globalSceneState.replaceAllElements([
              ...globalSceneState.getAllElements(),
@ -1568,7 +1568,7 @@ export class App extends React.Component<any, AppState> {
              }),
            ]);
          }
-          this.setState(prevState => ({
+          this.setState((prevState) => ({
            selectedElementIds: {
              ...prevState.selectedElementIds,
              [element.id]: true,
@ -1619,7 +1619,7 @@ export class App extends React.Component<any, AppState> {
          this.actionManager.executeAction(actionFinalize);
          return;
        }
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
          selectedElementIds: {
            ...prevState.selectedElementIds,
            [multiElement.id]: true,
@ -1644,7 +1644,7 @@ export class App extends React.Component<any, AppState> {
          roughness: this.state.currentItemRoughness,
          opacity: this.state.currentItemOpacity,
        });
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
          selectedElementIds: {
            ...prevState.selectedElementIds,
            [element.id]: false,
@ -2057,7 +2057,7 @@ export class App extends React.Component<any, AppState> {
            window.devicePixelRatio,
          );

-          selectedElements.forEach(element => {
+          selectedElements.forEach((element) => {
            mutateElement(element, {
              x: element.x + x - lastX,
              y: element.y + y - lastY,
@ -2139,7 +2139,7 @@ export class App extends React.Component<any, AppState> {
          globalSceneState.getAllElements(),
          draggingElement,
        );
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
          selectedElementIds: {
            ...prevState.selectedElementIds,
            ...elementsWithinSelection.reduce((map, element) => {
@ -2196,7 +2196,7 @@ export class App extends React.Component<any, AppState> {
        } else if (draggingOccurred && !multiElement) {
          if (!elementLocked) {
            resetCursor();
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
              draggingElement: null,
              elementType: "selection",
              selectedElementIds: {
@ -2205,7 +2205,7 @@ export class App extends React.Component<any, AppState> {
              },
            }));
          } else {
-            this.setState(prevState => ({
+            this.setState((prevState) => ({
              draggingElement: null,
              selectedElementIds: {
                ...prevState.selectedElementIds,
@ -2242,7 +2242,7 @@ export class App extends React.Component<any, AppState> {
        globalSceneState.replaceAllElements(
          globalSceneState
            .getAllElements()
-            .filter(el => el.id !== resizingElement.id),
+            .filter((el) => el.id !== resizingElement.id),
        );
      }

@ -2256,14 +2256,14 @@ export class App extends React.Component<any, AppState> {
      // selection unchanged
      if (hitElement && !draggingOccurred && !hitElementWasAddedToSelection) {
        if (event.shiftKey) {
-          this.setState(prevState => ({
+          this.setState((prevState) => ({
            selectedElementIds: {
              ...prevState.selectedElementIds,
              [hitElement!.id]: false,
            },
          }));
        } else {
-          this.setState(prevState => ({
+          this.setState((prevState) => ({
            selectedElementIds: { [hitElement!.id]: true },
          }));
        }
@ -2276,7 +2276,7 @@ export class App extends React.Component<any, AppState> {
      }

      if (!elementLocked) {
-        this.setState(prevState => ({
+        this.setState((prevState) => ({
          selectedElementIds: {
            ...prevState.selectedElementIds,
            [draggingElement.id]: true,
@ -2341,7 +2341,7 @@ export class App extends React.Component<any, AppState> {
              label: t("labels.copyAsPng"),
              action: this.copyToClipboardAsPng,
            },
-          ...this.actionManager.getContextMenuItems(action =>
+          ...this.actionManager.getContextMenuItems((action) =>
            this.canvasOnlyActions.includes(action.name),
          ),
        ],
@ -2370,7 +2370,7 @@ export class App extends React.Component<any, AppState> {
          action: this.copyToClipboardAsPng,
        },
        ...this.actionManager.getContextMenuItems(
-          action => !this.canvasOnlyActions.includes(action.name),
+          (action) => !this.canvasOnlyActions.includes(action.name),
        ),
      ],
      top: event.clientY,
--- a/src/components/ButtonSelect.tsx
+++ b/src/components/ButtonSelect.tsx
@ -13,7 +13,7 @@ export function ButtonSelect<T>({
 }) {
  return (
    <div className="buttonList">
-      {options.map(option => (
+      {options.map((option) => (
        <label
          key={option.text}
          className={value === option.value ? "active" : ""}
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@ -18,7 +18,7 @@ const keyBindings = [
  ["a", "s", "d", "f", "g"],
 ].flat();

-const Picker = function({
+const Picker = function ({
  colors,
  color,
  onChange,
@ -114,7 +114,7 @@ const Picker = function({
      <div className="color-picker-triangle"></div>
      <div
        className="color-picker-content"
-        ref={el => {
+        ref={(el) => {
          if (el) {
            gallery.current = el;
          }
@ -131,7 +131,7 @@ const Picker = function({
            aria-keyshortcuts={keyBindings[i]}
            style={{ backgroundColor: _color }}
            key={_color}
-            ref={el => {
+            ref={(el) => {
              if (el && i === 0) {
                firstItem.current = el;
              }
@ -145,9 +145,7 @@ const Picker = function({
          >
            {_color === "transparent" ? (
              <div className="color-picker-transparent"></div>
-            ) : (
-              undefined
-            )}
+            ) : undefined}
            <span className="color-picker-keybinding">{keyBindings[i]}</span>
          </button>
        ))}
@ -155,7 +153,7 @@ const Picker = function({
          <ColorInput
            color={color}
            label={label}
-            onChange={color => {
+            onChange={(color) => {
              onChange(color);
            }}
            ref={colorInput}
@ -196,7 +194,7 @@ const ColorInput = React.forwardRef(
          spellCheck={false}
          className="color-picker-input"
          aria-label={label}
-          onChange={event => {
+          onChange={(event) => {
            const value = event.target.value.toLowerCase();
            if (value.match(colorRegex)) {
              onChange(value === "transparent" ? "transparent" : `#${value}`);
@ -204,7 +202,7 @@ const ColorInput = React.forwardRef(
            setInnerValue(value);
          }}
          value={(innerValue || "").replace(/^#/, "")}
-          onPaste={event => onChange(event.clipboardData.getData("text"))}
+          onPaste={(event) => onChange(event.clipboardData.getData("text"))}
          onBlur={() => setInnerValue(color)}
          ref={inputRef}
        />
@ -244,7 +242,7 @@ export function ColorPicker({
        <ColorInput
          color={color}
          label={label}
-          onChange={color => {
+          onChange={(color) => {
            onChange(color);
          }}
        />
@ -255,7 +253,7 @@ export function ColorPicker({
            <Picker
              colors={colors[type]}
              color={color || null}
-              onChange={changedColor => {
+              onChange={(changedColor) => {
                onChange(changedColor);
              }}
              onClose={() => {
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@ -26,7 +26,7 @@ function ContextMenu({ options, onCloseRequest, top, left }: Props) {
    >
      <ul
        className="context-menu"
-        onContextMenu={event => event.preventDefault()}
+        onContextMenu={(event) => event.preventDefault()}
      >
        {options.map((option, idx) => (
          <li key={idx} onClick={onCloseRequest}>
@ -69,7 +69,7 @@ function handleClose() {
 export default {
  push(params: ContextMenuParams) {
    const options = Array.of<ContextMenuOption>();
-    params.options.forEach(option => {
+    params.options.forEach((option) => {
      if (option) {
        options.push(option);
      }
--- a/src/components/ExportDialog.tsx
+++ b/src/components/ExportDialog.tsx
@ -152,7 +152,7 @@ function ExportModal({
            {actionManager.renderAction("changeProjectName")}
          </div>
          <Stack.Row gap={2}>
-            {scales.map(s => (
+            {scales.map((s) => (
              <ToolButton
                key={s}
                size="s"
@ -174,7 +174,7 @@ function ExportModal({
              <input
                type="checkbox"
                checked={exportSelected}
-                onChange={event =>
+                onChange={(event) =>
                  setExportSelected(event.currentTarget.checked)
                }
                ref={onlySelectedInput}
--- a/src/components/LanguageList.tsx
+++ b/src/components/LanguageList.tsx
@ -22,7 +22,7 @@ export function LanguageList({
        value={currentLanguage}
        aria-label={i18n.t("buttons.selectLanguage")}
      >
-        {languages.map(language => (
+        {languages.map((language) => (
          <option key={language.lng} value={language.lng}>
            {language.label}
          </option>
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@ -73,7 +73,7 @@ export const LayerUI = React.memo(
          onExportToPng={createExporter("png")}
          onExportToSvg={createExporter("svg")}
          onExportToClipboard={createExporter("clipboard")}
-          onExportToBackend={exportedElements => {
+          onExportToBackend={(exportedElements) => {
            if (canvas) {
              exportCanvas(
                "backend",
@ -143,7 +143,7 @@ export const LayerUI = React.memo(
              )}
            </Stack.Col>
            <Section heading="shapes">
-              {heading => (
+              {(heading) => (
                <Stack.Col gap={4} align="start">
                  <Stack.Row gap={1}>
                    <Island padding={1}>
@ -184,7 +184,7 @@ export const LayerUI = React.memo(
        </FixedSideContainer>
        <footer role="contentinfo">
          <LanguageList
-            onChange={lng => {
+            onChange={(lng) => {
              setLanguage(lng);
              setAppState({});
            }}
@ -228,7 +228,7 @@ export const LayerUI = React.memo(
    return (
      prev.language === next.language &&
      prev.elements === next.elements &&
-      keys.every(key => prevAppState[key] === nextAppState[key])
+      keys.every((key) => prevAppState[key] === nextAppState[key])
    );
  },
 );
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@ -40,7 +40,7 @@ export function MobileMenu({
    <>
      <FixedSideContainer side="top">
        <Section heading="shapes">
-          {heading => (
+          {(heading) => (
            <Stack.Col gap={4} align="center">
              <Stack.Row gap={1}>
                <Island padding={1}>
@ -87,7 +87,7 @@ export function MobileMenu({
                  <fieldset>
                    <legend>{t("labels.language")}</legend>
                    <LanguageList
-                      onChange={lng => {
+                      onChange={(lng) => {
                        setLanguage(lng);
                        setAppState({});
                      }}
--- a/src/components/ToolButton.tsx
+++ b/src/components/ToolButton.tsx
@ -35,7 +35,7 @@ type ToolButtonProps =

 const DEFAULT_SIZE: ToolIconSize = "m";

-export const ToolButton = React.forwardRef(function(
+export const ToolButton = React.forwardRef(function (
  props: ToolButtonProps,
  ref,
 ) {
--- a/src/components/TopErrorBoundary.tsx
+++ b/src/components/TopErrorBoundary.tsx
@ -34,7 +34,7 @@ export class TopErrorBoundary extends React.Component<
        _localStorage[key] = value;
      }
    }
-    this.setState(state => ({
+    this.setState((state) => ({
      hasError: true,
      unresolvedError: state.unresolvedError
        ? state.unresolvedError.concat(error)
@ -60,7 +60,7 @@ export class TopErrorBoundary extends React.Component<
        }
      }

-      this.setState(state => ({
+      this.setState((state) => ({
        unresolvedError: null,
        stack: `${
          state.stack ? `${state.stack}\n\n================\n\n${stack}` : stack
--- a/src/data/blob.ts
+++ b/src/data/blob.ts
@ -27,7 +27,7 @@ export async function loadFromBlob(blob: any) {
  if ("text" in Blob) {
    contents = await blob.text();
  } else {
-    contents = await new Promise(resolve => {
+    contents = await new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsText(blob, "utf8");
      reader.onloadend = () => {
@ -41,7 +41,7 @@ export async function loadFromBlob(blob: any) {
  if (!elements.length) {
    return Promise.reject("Cannot load invalid json");
  }
-  return new Promise<DataState>(resolve => {
+  return new Promise<DataState>((resolve) => {
    resolve(restore(elements, appState, { scrollToContent: true }));
  });
 }
--- a/src/data/json.ts
+++ b/src/data/json.ts
@ -14,7 +14,7 @@ export function serializeAsJSON(
      type: "excalidraw",
      version: 1,
      source: window.location.origin,
-      elements: elements.filter(element => !element.isDeleted),
+      elements: elements.filter((element) => !element.isDeleted),
      appState: cleanAppStateForExport(appState),
    },
    null,
--- a/src/data/localStorage.ts
+++ b/src/data/localStorage.ts
@ -12,7 +12,7 @@ export function saveToLocalStorage(
 ) {
  localStorage.setItem(
    LOCAL_STORAGE_KEY,
-    JSON.stringify(elements.filter(element => !element.isDeleted)),
+    JSON.stringify(elements.filter((element) => !element.isDeleted)),
  );
  localStorage.setItem(
    LOCAL_STORAGE_KEY_STATE,
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@ -15,12 +15,12 @@ export function restore(
  opts?: { scrollToContent: boolean },
 ): DataState {
  const elements = savedElements
-    .filter(el => {
+    .filter((el) => {
      // filtering out selection, which is legacy, no longer kept in elements,
      //  and causing issues if retained
      return el.type !== "selection" && !isInvisiblySmallElement(el);
    })
-    .map(element => {
+    .map((element) => {
      let points: Point[] = [];
      if (element.type === "arrow") {
        if (Array.isArray(element.points)) {
--- a/src/element/bounds.ts
+++ b/src/element/bounds.ts
@ -192,7 +192,7 @@ export function getCommonBounds(elements: readonly ExcalidrawElement[]) {
  let minY = Infinity;
  let maxY = -Infinity;

-  elements.forEach(element => {
+  elements.forEach((element) => {
    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
    minX = Math.min(minX, x1);
    minY = Math.min(minY, y1);
--- a/src/element/collision.ts
+++ b/src/element/collision.ts
@ -45,7 +45,7 @@ export function hitTest(
    const a = Math.abs(element.width) / 2;
    const b = Math.abs(element.height) / 2;

-    [0, 1, 2, 3].forEach(x => {
+    [0, 1, 2, 3].forEach((x) => {
      const xx = a * tx;
      const yy = b * ty;

@ -179,7 +179,7 @@ export function hitTest(
    const relY = y - element.y;

    // hit thest all "subshapes" of the linear element
-    return shape.some(subshape =>
+    return shape.some((subshape) =>
      hitTestRoughShape(subshape.sets, relX, relY, lineThreshold),
    );
  } else if (element.type === "text") {
--- a/src/element/index.ts
+++ b/src/element/index.ts
@ -37,7 +37,7 @@ export function getSyncableElements(elements: readonly ExcalidrawElement[]) {
  // There are places in Excalidraw where synthetic invisibly small elements are added and removed.
  // It's probably best to keep those local otherwise there might be a race condition that
  // gets the app into an invalid state. I've never seen it happen but I'm worried about it :)
-  return elements.filter(el => !isInvisiblySmallElement(el));
+  return elements.filter((el) => !isInvisiblySmallElement(el));
 }

 export function getElementMap(elements: readonly ExcalidrawElement[]) {
@ -55,5 +55,5 @@ export function getDrawingVersion(elements: readonly ExcalidrawElement[]) {
 }

 export function hasNonDeletedElements(elements: readonly ExcalidrawElement[]) {
-  return elements.some(element => !element.isDeleted);
+  return elements.some((element) => !element.isDeleted);
 }
--- a/src/element/resizeTest.ts
+++ b/src/element/resizeTest.ts
@ -20,7 +20,7 @@ export function resizeTest(

  const handlers = handlerRectangles(element, zoom, pointerType);

-  const filter = Object.keys(handlers).filter(key => {
+  const filter = Object.keys(handlers).filter((key) => {
    const handler = handlers[key as HandlerRectanglesRet]!;
    if (!handler) {
      return false;
--- a/src/element/textWysiwyg.tsx
+++ b/src/element/textWysiwyg.tsx
@ -64,7 +64,7 @@ export function textWysiwyg({
    backfaceVisibility: "hidden",
  });

-  editable.onpaste = ev => {
+  editable.onpaste = (ev) => {
    try {
      const selection = window.getSelection();
      if (!selection?.rangeCount) {
@ -91,7 +91,7 @@ export function textWysiwyg({
    }
  };

-  editable.onkeydown = ev => {
+  editable.onkeydown = (ev) => {
    if (ev.key === KEYS.ESCAPE) {
      ev.preventDefault();
      handleSubmit();
--- a/src/gesture.ts
+++ b/src/gesture.ts
@ -4,8 +4,8 @@ import { normalizeScroll } from "./scene";
 export function getCenter(pointers: Map<number, PointerCoords>) {
  const allCoords = Array.from(pointers.values());
  return {
-    x: normalizeScroll(sum(allCoords, coords => coords.x) / allCoords.length),
-    y: normalizeScroll(sum(allCoords, coords => coords.y) / allCoords.length),
+    x: normalizeScroll(sum(allCoords, (coords) => coords.x) / allCoords.length),
+    y: normalizeScroll(sum(allCoords, (coords) => coords.y) / allCoords.length),
  };
 }

--- a/src/i18n.ts
+++ b/src/i18n.ts
@ -26,7 +26,7 @@ const fallbackLanguage = languages[0];

 export function setLanguage(newLng: string | undefined) {
  currentLanguage =
-    languages.find(language => language.lng === newLng) || fallbackLanguage;
+    languages.find((language) => language.lng === newLng) || fallbackLanguage;

  languageDetector.cacheUserLanguage(currentLanguage.lng);
 }
@ -69,7 +69,7 @@ export function t(path: string, replacement?: { [key: string]: string }) {
 const languageDetector = new LanguageDetector();
 languageDetector.init({
  languageUtils: {
-    formatLanguageCode: function(lng: string) {
+    formatLanguageCode: function (lng: string) {
      return lng;
    },
    isWhitelisted: () => true,
--- a/src/index.tsx
+++ b/src/index.tsx
@ -8,7 +8,7 @@ import "./styles.scss";
 // Block pinch-zooming on iOS outside of the content area
 document.addEventListener(
  "touchmove",
-  function(event) {
+  function (event) {
    // @ts-ignore
    if (event.scale !== 1) {
      event.preventDefault();
--- a/src/points.ts
+++ b/src/points.ts
@ -1,8 +1,8 @@
 import { Point } from "./types";

 export function getSizeFromPoints(points: readonly Point[]) {
-  const xs = points.map(point => point[0]);
-  const ys = points.map(point => point[1]);
+  const xs = points.map((point) => point[0]);
+  const ys = points.map((point) => point[1]);
  return {
    width: Math.max(...xs) - Math.min(...xs),
    height: Math.max(...ys) - Math.min(...ys),
@ -13,7 +13,7 @@ export function rescalePoints(
  nextDimensionSize: number,
  prevPoints: readonly Point[],
 ): Point[] {
-  const prevDimValues = prevPoints.map(point => point[dimension]);
+  const prevDimValues = prevPoints.map((point) => point[dimension]);
  const prevMaxDimension = Math.max(...prevDimValues);
  const prevMinDimension = Math.min(...prevDimValues);
  const prevDimensionSize = prevMaxDimension - prevMinDimension;
@ -22,7 +22,7 @@ export function rescalePoints(

  let nextMinDimension = Infinity;

-  const scaledPoints = prevPoints.map(prevPoint =>
+  const scaledPoints = prevPoints.map((prevPoint) =>
    prevPoint.map((value, currentDimension) => {
      if (currentDimension !== dimension) {
        return value;
@ -36,7 +36,7 @@ export function rescalePoints(
  const translation = prevMinDimension - nextMinDimension;

  const nextPoints = scaledPoints.map(
-    scaledPoint =>
+    (scaledPoint) =>
      scaledPoint.map((value, currentDimension) => {
        return currentDimension === dimension ? value + translation : value;
      }) as [number, number],
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@ -86,7 +86,7 @@ function drawElementOnCanvas(
    }
    case "arrow":
    case "line": {
-      (getShapeForElement(element) as Drawable[]).forEach(shape =>
+      (getShapeForElement(element) as Drawable[]).forEach((shape) =>
        rc.draw(shape),
      );
      break;
@ -372,7 +372,7 @@ export function renderElementToSvg(
      generateElement(element, generator);
      const group = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
      const opacity = element.opacity / 100;
-      (getShapeForElement(element) as Drawable[]).forEach(shape => {
+      (getShapeForElement(element) as Drawable[]).forEach((shape) => {
        const node = rsvg.draw(shape);
        if (opacity !== 1) {
          node.setAttribute("stroke-opacity", `${opacity}`);
@ -402,7 +402,7 @@ export function renderElementToSvg(
        const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
        const lineHeight = element.height / lines.length;
        const offset = element.height - element.baseline;
-        const fontSplit = element.font.split(" ").filter(d => !!d.trim());
+        const fontSplit = element.font.split(" ").filter((d) => !!d.trim());
        let fontFamily = fontSplit[0];
        let fontSize = "20px";
        if (fontSplit.length > 1) {
--- a/src/renderer/renderScene.ts
+++ b/src/renderer/renderScene.ts
@ -52,7 +52,7 @@ export function renderScene(
    return { atLeastOneVisibleElement: false };
  }

-  const elements = allElements.filter(element => !element.isDeleted);
+  const elements = allElements.filter((element) => !element.isDeleted);

  const context = canvas.getContext("2d")!;
  context.scale(scale, scale);
@ -86,7 +86,7 @@ export function renderScene(
  context.scale(sceneState.zoom, sceneState.zoom);

  // Paint visible elements
-  const visibleElements = elements.filter(element =>
+  const visibleElements = elements.filter((element) =>
    isVisibleElement(
      element,
      normalizedCanvasWidth,
@ -95,7 +95,7 @@ export function renderScene(
    ),
  );

-  visibleElements.forEach(element => {
+  visibleElements.forEach((element) => {
    renderElement(element, rc, context, renderOptimizations, sceneState);
  });

@ -116,7 +116,7 @@ export function renderScene(
    const dashledLinePadding = 4 / sceneState.zoom;

    context.translate(sceneState.scrollX, sceneState.scrollY);
-    selectedElements.forEach(element => {
+    selectedElements.forEach((element) => {
      const [
        elementX1,
        elementY1,
@ -148,8 +148,8 @@ export function renderScene(
      context.fillStyle = "#fff";
      const handlers = handlerRectangles(selectedElements[0], sceneState.zoom);
      Object.values(handlers)
-        .filter(handler => handler !== undefined)
-        .forEach(handler => {
+        .filter((handler) => handler !== undefined)
+        .forEach((handler) => {
          const lineWidth = context.lineWidth;
          context.lineWidth = 1 / sceneState.zoom;
          context.fillRect(handler[0], handler[1], handler[2], handler[3]);
@ -219,7 +219,7 @@ export function renderScene(
    const strokeStyle = context.strokeStyle;
    context.fillStyle = SCROLLBAR_COLOR;
    context.strokeStyle = "rgba(255,255,255,0.8)";
-    [scrollBars.horizontal, scrollBars.vertical].forEach(scrollBar => {
+    [scrollBars.horizontal, scrollBars.vertical].forEach((scrollBar) => {
      if (scrollBar) {
        roundRect(
          context,
@ -288,7 +288,7 @@ export function renderSceneToSvg(
    return;
  }
  // render elements
-  elements.forEach(element => {
+  elements.forEach((element) => {
    if (!element.isDeleted) {
      renderElementToSvg(
        element,
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@ -20,7 +20,7 @@ export function exportToCanvas(
    scale?: number;
    viewBackgroundColor: string;
  },
-  createCanvas: (width: number, height: number) => any = function(
+  createCanvas: (width: number, height: number) => any = function (
    width,
    height,
  ) {
--- a/src/scene/scrollbars.ts
+++ b/src/scene/scrollbars.ts
@ -102,7 +102,7 @@ export function isOverScrollBars(scrollBars: ScrollBars, x: number, y: number) {
  const [isOverHorizontalScrollBar, isOverVerticalScrollBar] = [
    scrollBars.horizontal,
    scrollBars.vertical,
-  ].map(scrollBar => {
+  ].map((scrollBar) => {
    return (
      scrollBar &&
      scrollBar.x <= x &&
--- a/src/scene/selection.ts
+++ b/src/scene/selection.ts
@ -13,7 +13,7 @@ export function getElementsWithinSelection(
    selectionX2,
    selectionY2,
  ] = getElementAbsoluteCoords(selection);
-  return elements.filter(element => {
+  return elements.filter((element) => {
    const [
      elementX1,
      elementY1,
@ -36,7 +36,7 @@ export function deleteSelectedElements(
  appState: AppState,
 ) {
  return {
-    elements: elements.map(el => {
+    elements: elements.map((el) => {
      if (appState.selectedElementIds[el.id]) {
        return newElementWith(el, { isDeleted: true });
      }
@ -66,7 +66,7 @@ export function isSomeElementSelected(
  elements: readonly ExcalidrawElement[],
  appState: AppState,
 ): boolean {
-  return elements.some(element => appState.selectedElementIds[element.id]);
+  return elements.some((element) => appState.selectedElementIds[element.id]);
 }

 /**
@ -80,7 +80,7 @@ export function getCommonAttributeOfSelectedElements<T>(
 ): T | null {
  const attributes = Array.from(
    new Set(
-      getSelectedElements(elements, appState).map(element =>
+      getSelectedElements(elements, appState).map((element) =>
        getAttribute(element),
      ),
    ),
@ -92,7 +92,7 @@ export function getSelectedElements(
  elements: readonly ExcalidrawElement[],
  appState: AppState,
 ): readonly ExcalidrawElement[] {
-  return elements.filter(element => appState.selectedElementIds[element.id]);
+  return elements.filter((element) => appState.selectedElementIds[element.id]);
 }

 export function getTargetElement(
--- a/src/zindex.ts
+++ b/src/zindex.ts
@ -90,7 +90,7 @@ export function moveAllLeft<T>(elements: T[], indicesToMove: number[]) {
  indicesToMove.sort((a: number, b: number) => a - b);

  // Copy the elements to move
-  const leftMostElements = indicesToMove.map(index => elements[index]);
+  const leftMostElements = indicesToMove.map((index) => elements[index]);

  const reversedIndicesToMove = indicesToMove
    // We go from right to left to avoid overriding elements.
@ -170,7 +170,9 @@ export function moveAllRight<T>(elements: T[], indicesToMove: number[]) {
  );

  // Copy the elements to move
-  const rightMostElements = reversedIndicesToMove.map(index => elements[index]);
+  const rightMostElements = reversedIndicesToMove.map(
+    (index) => elements[index],
+  );

  indicesToMove = reversedIndicesToMove
    // We go from left to right to avoid overriding elements.