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>

package-lock.json

@@ -12261,9 +12261,9 @@
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
     "prettier": {
-      "version": "1.19.1",
+      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.0.1.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+      "integrity": "sha512-piXGBcY1zoFOG0MvHpNE5reAGseLmaCRifQ/fmfF49BcYkInEs/naD/unxGNAeOKFA5+JxVrPyMvMlpzcd20UA==",
       "dev": true
     },
     "prettier-linter-helpers": {

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"
   },

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

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,

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(),
   )}`;

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),
 });

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"

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",
 });

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));
       }}
     />
   ),

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()),

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)}
+        onChange={(event) => updateData(+event.target.value)}
-        onWheel={event => {
+        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>
   ),

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",
 });

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,
 });

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+]")

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(

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 }),

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")}
 

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,

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" : ""}

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={() => {

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);
       }

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}

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>

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])
     );
   },
 );

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({});
                       }}

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,
 ) {

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

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 }));
   });
 }

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,

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,

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)) {

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);

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") {

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);
 }

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;

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();

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),
+    x: normalizeScroll(sum(allCoords, (coords) => coords.x) / allCoords.length),
-    y: normalizeScroll(sum(allCoords, coords => coords.y) / allCoords.length),
+    y: normalizeScroll(sum(allCoords, (coords) => coords.y) / allCoords.length),
   };
 }
 

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,

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();

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 xs = points.map((point) => point[0]);
-  const ys = points.map(point => point[1]);
+  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],

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) {

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)
+        .filter((handler) => handler !== undefined)
-        .forEach(handler => {
+        .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,

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,
   ) {

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 &&

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(

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.