chore: bump Prettier to the latest (#4185)

src/components/App.tsx

@@ -794,7 +794,8 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   public async componentDidMount() {
-    this.excalidrawContainerValue.container = this.excalidrawContainerRef.current;
+    this.excalidrawContainerValue.container =
+      this.excalidrawContainerRef.current;
 
     if (
       process.env.NODE_ENV === ENV.TEST ||
@@ -836,10 +837,8 @@ class App extends React.Component<AppProps, AppState> {
       this.resizeObserver = new ResizeObserver(() => {
         // compute isMobile state
         // ---------------------------------------------------------------------
-        const {
-          width,
-          height,
-        } = this.excalidrawContainerRef.current!.getBoundingClientRect();
+        const { width, height } =
+          this.excalidrawContainerRef.current!.getBoundingClientRect();
         this.isMobile =
           width < MQ_MAX_WIDTH_PORTRAIT ||
           (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE);
@@ -1243,9 +1242,8 @@ class App extends React.Component<AppProps, AppState> {
     async (event: ClipboardEvent | null) => {
       // #686
       const target = document.activeElement;
-      const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
-        target,
-      );
+      const isExcalidrawActive =
+        this.excalidrawContainerRef.current?.contains(target);
       if (!isExcalidrawActive) {
         return;
       }
@@ -2207,7 +2205,10 @@ class App extends React.Component<AppProps, AppState> {
       }));
       this.resetShouldCacheIgnoreZoomDebounced();
     } else {
-      gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;
+      gesture.lastCenter =
+        gesture.initialDistance =
+        gesture.initialScale =
+          null;
     }
 
     if (isHoldingSpace || isPanning || isDraggingScrollBar) {
@@ -2516,13 +2517,11 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
 
-    const onPointerMove = this.onPointerMoveFromPointerDownHandler(
-      pointerDownState,
-    );
+    const onPointerMove =
+      this.onPointerMoveFromPointerDownHandler(pointerDownState);
 
-    const onPointerUp = this.onPointerUpFromPointerDownHandler(
-      pointerDownState,
-    );
+    const onPointerUp =
+      this.onPointerUpFromPointerDownHandler(pointerDownState);
 
     const onKeyDown = this.onKeyDownFromPointerDownHandler(pointerDownState);
     const onKeyUp = this.onKeyUpFromPointerDownHandler(pointerDownState);
@@ -2727,10 +2726,11 @@ class App extends React.Component<AppProps, AppState> {
         allHitElements: [],
         wasAddedToSelection: false,
         hasBeenDuplicated: false,
-        hasHitCommonBoundingBoxOfSelectedElements: this.isHittingCommonBoundingBoxOfSelectedElements(
-          origin,
-          selectedElements,
-        ),
+        hasHitCommonBoundingBoxOfSelectedElements:
+          this.isHittingCommonBoundingBoxOfSelectedElements(
+            origin,
+            selectedElements,
+          ),
       },
       drag: {
         hasOccurred: false,
@@ -2807,14 +2807,15 @@ class App extends React.Component<AppProps, AppState> {
       const elements = this.scene.getElements();
       const selectedElements = getSelectedElements(elements, this.state);
       if (selectedElements.length === 1 && !this.state.editingLinearElement) {
-        const elementWithTransformHandleType = getElementWithTransformHandleType(
-          elements,
-          this.state,
-          pointerDownState.origin.x,
-          pointerDownState.origin.y,
-          this.state.zoom,
-          event.pointerType,
-        );
+        const elementWithTransformHandleType =
+          getElementWithTransformHandleType(
+            elements,
+            this.state,
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+            this.state.zoom,
+            event.pointerType,
+          );
         if (elementWithTransformHandleType != null) {
           this.setState({
             resizingElement: elementWithTransformHandleType.element,
@@ -2890,9 +2891,10 @@ class App extends React.Component<AppProps, AppState> {
         );
 
         const hitElement = pointerDownState.hit.element;
-        const someHitElementIsSelected = pointerDownState.hit.allHitElements.some(
-          (element) => this.isASelectedElement(element),
-        );
+        const someHitElementIsSelected =
+          pointerDownState.hit.allHitElements.some((element) =>
+            this.isASelectedElement(element),
+          );
         if (
           (hitElement === null || !someHitElementIsSelected) &&
           !event.shiftKey &&
@@ -3554,8 +3556,8 @@ class App extends React.Component<AppProps, AppState> {
                   ? {
                       // if using ctrl/cmd, select the hitElement only if we
                       // haven't box-selected anything else
-                      [pointerDownState.hit.element
-                        .id]: !elementsWithinSelection.length,
+                      [pointerDownState.hit.element.id]:
+                        !elementsWithinSelection.length,
                     }
                   : null),
               },
@@ -4429,7 +4431,9 @@ class App extends React.Component<AppProps, AppState> {
                 // This will only work as of Chrome 86,
                 // but can be safely ignored on older releases.
                 const item = event.dataTransfer.items[0];
-                (file as any).handle = await (item as any).getAsFileSystemHandle();
+                (file as any).handle = await (
+                  item as any
+                ).getAsFileSystemHandle();
               } catch (error: any) {
                 console.warn(error.name, error.message);
               }
@@ -4551,10 +4555,8 @@ class App extends React.Component<AppProps, AppState> {
     const type = element ? "element" : "canvas";
 
     const container = this.excalidrawContainerRef.current!;
-    const {
-      top: offsetTop,
-      left: offsetLeft,
-    } = container.getBoundingClientRect();
+    const { top: offsetTop, left: offsetLeft } =
+      container.getBoundingClientRect();
     const left = event.clientX - offsetLeft;
     const top = event.clientY - offsetTop;
 

src/components/CheckboxItem.tsx

@@ -13,9 +13,11 @@ export const CheckboxItem: React.FC<{
       className={clsx("Checkbox", { "is-checked": checked })}
       onClick={(event) => {
         onChange(!checked);
-        ((event.currentTarget as HTMLDivElement).querySelector(
-          ".Checkbox-box",
-        ) as HTMLButtonElement).focus();
+        (
+          (event.currentTarget as HTMLDivElement).querySelector(
+            ".Checkbox-box",
+          ) as HTMLButtonElement
+        ).focus();
       }}
     >
       <button className="Checkbox-box" role="checkbox" aria-checked={checked}>

src/components/LayerUI.tsx

@@ -426,34 +426,34 @@ const LayerUI = ({
       return null;
     }
 
-    const createExporter = (type: ExportType): ExportCB => async (
-      exportedElements,
-    ) => {
-      const fileHandle = await exportCanvas(
-        type,
-        exportedElements,
-        appState,
-        files,
-        {
-          exportBackground: appState.exportBackground,
-          name: appState.name,
-          viewBackgroundColor: appState.viewBackgroundColor,
-        },
-      )
-        .catch(muteFSAbortError)
-        .catch((error) => {
-          console.error(error);
-          setAppState({ errorMessage: error.message });
-        });
+    const createExporter =
+      (type: ExportType): ExportCB =>
+      async (exportedElements) => {
+        const fileHandle = await exportCanvas(
+          type,
+          exportedElements,
+          appState,
+          files,
+          {
+            exportBackground: appState.exportBackground,
+            name: appState.name,
+            viewBackgroundColor: appState.viewBackgroundColor,
+          },
+        )
+          .catch(muteFSAbortError)
+          .catch((error) => {
+            console.error(error);
+            setAppState({ errorMessage: error.message });
+          });
 
-      if (
-        appState.exportEmbedScene &&
-        fileHandle &&
-        isImageFileHandle(fileHandle)
-      ) {
-        setAppState({ fileHandle });
-      }
-    };
+        if (
+          appState.exportEmbedScene &&
+          fileHandle &&
+          isImageFileHandle(fileHandle)
+        ) {
+          setAppState({ fileHandle });
+        }
+      };
 
     return (
       <ImageExportDialog
@@ -709,7 +709,8 @@ const LayerUI = ({
               {!viewModeEnabled && (
                 <div
                   className={clsx("undo-redo-buttons zen-mode-transition", {
-                    "layer-ui__wrapper__footer-left--transition-bottom": zenModeEnabled,
+                    "layer-ui__wrapper__footer-left--transition-bottom":
+                      zenModeEnabled,
                   })}
                 >
                   {actionManager.renderAction("undo", { size: "small" })}
@@ -723,7 +724,8 @@ const LayerUI = ({
           className={clsx(
             "layer-ui__wrapper__footer-center zen-mode-transition",
             {
-              "layer-ui__wrapper__footer-left--transition-bottom": zenModeEnabled,
+              "layer-ui__wrapper__footer-left--transition-bottom":
+                zenModeEnabled,
             },
           )}
         >

src/components/Tooltip.tsx

@@ -34,10 +34,8 @@ const updateTooltip = (
     width: itemWidth,
   } = item.getBoundingClientRect();
 
-  const {
-    width: labelWidth,
-    height: labelHeight,
-  } = tooltip.getBoundingClientRect();
+  const { width: labelWidth, height: labelHeight } =
+    tooltip.getBoundingClientRect();
 
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;

src/components/icons.tsx

@@ -30,8 +30,12 @@ export const createIcon = (
   d: string | React.ReactNode,
   opts: number | Opts = 512,
 ) => {
-  const { width = 512, height = width, mirror, style } =
-    typeof opts === "number" ? ({ width: opts } as Opts) : opts;
+  const {
+    width = 512,
+    height = width,
+    mirror,
+    style,
+  } = typeof opts === "number" ? ({ width: opts } as Opts) : opts;
   return (
     <svg
       aria-hidden="true"