Keep errors, elements and comments consistent (#2340)

Co-authored-by: David Luzar <luzar.david@gmail.com>

.lintstagedrc.js

 const { CLIEngine } = require("eslint");
 
 // see https://github.com/okonet/lint-staged#how-can-i-ignore-files-from-eslintignore-
-//  for explanation
+// for explanation
 const cli = new CLIEngine({});
 
 module.exports = {

src/actions/actionProperties.tsx

       appState,
     );
     const shouldUpdateForNonLinearElements = targetElements.length
-      ? targetElements.every((e) => !isLinearElement(e))
+      ? targetElements.every((el) => !isLinearElement(el))
       : !isLinearElementType(appState.elementType);
     const shouldUpdateForLinearElements = targetElements.length
       ? targetElements.every(isLinearElement)

src/clipboard.ts

   try {
     PREFER_APP_CLIPBOARD = false;
     await copyTextToSystemClipboard(json);
-  } catch (err) {
+  } catch (error) {
     PREFER_APP_CLIPBOARD = true;
-    console.error(err);
+    console.error(error);
   }
 };
 
   }
 
   // if system clipboard contains spreadsheet, use it even though it's
-  //  technically possible it's staler than in-app clipboard
+  // technically possible it's staler than in-app clipboard
   const spreadsheetResult = parsePotentialSpreadsheet(systemClipboard);
   if (spreadsheetResult) {
     return spreadsheetResult;
     return appClipboardData;
   } catch {
     // system clipboard doesn't contain excalidraw elements → return plaintext
-    //  unless we set a flag to prefer in-app clipboard because browser didn't
-    //  support storing to system clipboard on copy
+    // unless we set a flag to prefer in-app clipboard because browser didn't
+    // support storing to system clipboard on copy
     return PREFER_APP_CLIPBOARD && appClipboardData.elements
       ? appClipboardData
       : { text: systemClipboard };
   if (probablySupportsClipboardWriteText) {
     try {
       // NOTE: doesn't work on FF on non-HTTPS domains, or when document
-      //  not focused
+      // not focused
       await navigator.clipboard.writeText(text || "");
       copied = true;
     } catch (error) {
   }
 
   // Note that execCommand doesn't allow copying empty strings, so if we're
-  //  clearing clipboard using this API, we must copy at least an empty char
+  // clearing clipboard using this API, we must copy at least an empty char
   if (!copied && !copyTextViaExecCommand(text || " ")) {
     throw new Error("couldn't copy");
   }

src/components/App.tsx

           collabForceLoadFlag,
         );
         // if loading same room as the one previously unloaded within 15sec
-        //  force reload without prompting
+        // force reload without prompting
         if (previousRoom === roomID && Date.now() - timestamp < 15000) {
           return true;
         }
     history.clear();
   };
 
-  /** Completely resets scene & history.
-   * Do not use for clear scene user action. */
+  // Completely resets scene & history.
+  // Do not use for clear scene user action.
   private resetScene = withBatchedUpdates(() => {
     this.scene.replaceAllElements([]);
     this.setState({
 
     if (isCollaborationScene) {
       // when joining a room we don't want user's local scene data to be merged
-      //  into the remote scene
+      // into the remote scene
       this.resetScene();
 
       this.initializeSocketClient({ showLoadingState: true });
       !isSavedToFirebase(this.portal, syncableElements)
     ) {
       // this won't run in time if user decides to leave the site, but
-      //  the purpose is to run in immediately after user decides to stay
+      // the purpose is to run in immediately after user decides to stay
       this.saveCollabRoomToFirebase(syncableElements);
 
       event.preventDefault();
     const { atLeastOneVisibleElement, scrollBars } = renderScene(
       elements.filter((element) => {
         // don't render text element that's being currently edited (it's
-        //  rendered on remote only)
+        // rendered on remote only)
         return (
           !this.state.editingElement ||
           this.state.editingElement.type !== "text" ||
       const elementUnderCursor = document.elementFromPoint(cursorX, cursorY);
       if (
         // if no ClipboardEvent supplied, assume we're pasting via contextMenu
-        //  thus these checks don't make sense
+        // thus these checks don't make sense
         event &&
         (!(elementUnderCursor instanceof HTMLCanvasElement) ||
           isWritableElement(target))
       const roomKey = roomMatch[2];
 
       // fallback in case you're not alone in the room but still don't receive
-      //  initial SCENE_UPDATE message
+      // initial SCENE_UPDATE message
       this.socketInitializationTimer = setTimeout(
         this.initializeSocket,
         INITIAL_SCENE_UPDATE_TIMEOUT,
                 decryptedData.payload.socketID;
 
               // NOTE purposefully mutating collaborators map in case of
-              //  pointer updates so as not to trigger LayerUI rerender
+              // pointer updates so as not to trigger LayerUI rerender
               this.setState((state) => {
                 if (!state.collaborators.has(socketId)) {
                   state.collaborators.set(socketId, {});
         if (elements) {
           this.handleRemoteSceneUpdate(elements, { initFromSnapshot: true });
         }
-      } catch (e) {
+      } catch (error) {
         // log the error and move on. other peers will sync us the scene.
-        console.error(e);
+        console.error(error);
       }
     }
   };
     });
 
     // do an initial update to re-initialize element position since we were
-    //  modifying element's x/y for sake of editor (case: syncing to remote)
+    // modifying element's x/y for sake of editor (case: syncing to remote)
     updateElement(element.text);
   }
 
 
     if (existingTextElement) {
       // if text element is no longer centered to a container, reset
-      //  verticalAlign to default because it's currently internal-only
+      // verticalAlign to default because it's currently internal-only
       if (!parentCenterPosition || element.textAlign !== "center") {
         mutateElement(element, { verticalAlign: DEFAULT_VERTICAL_ALIGN });
       }
       ]);
 
       // case: creating new text not centered to parent elemenent → offset Y
-      //  so that the text is centered to cursor position
+      // so that the text is centered to cursor position
       if (!parentCenterPosition) {
         mutateElement(element, {
           y: element.y - element.baseline / 2,
     event: React.MouseEvent<HTMLCanvasElement>,
   ) => {
     // case: double-clicking with arrow/line tool selected would both create
-    //  text and enter multiElement mode
+    // text and enter multiElement mode
     if (this.state.multiElement) {
       return;
     }
 
       if (lastPoint === lastCommittedPoint) {
         // if we haven't yet created a temp point and we're beyond commit-zone
-        //  threshold, add a point
+        // threshold, add a point
         if (
           distance2d(
             scenePointerX - rx,
         } else {
           document.documentElement.style.cursor = CURSOR_TYPE.POINTER;
           // in this branch, we're inside the commit zone, and no uncommitted
-          //  point exists. Thus do nothing (don't add/remove points).
+          // point exists. Thus do nothing (don't add/remove points).
         }
       } else {
         // cursor moved inside commit zone, and there's uncommitted point,
-        //  thus remove it
+        // thus remove it
         if (
           points.length > 2 &&
           lastCommittedPoint &&
     // fixes pointermove causing selection of UI texts #32
     event.preventDefault();
     // Preventing the event above disables default behavior
-    //  of defocusing potentially focused element, which is what we
-    //  want when clicking inside the canvas.
+    // of defocusing potentially focused element, which is what we
+    // want when clicking inside the canvas.
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
             }
 
             // Add hit element to selection. At this point if we're not holding
-            //  SHIFT the previously selected element(s) were deselected above
-            //  (make sure you use setState updater to use latest state)
+            // SHIFT the previously selected element(s) were deselected above
+            // (make sure you use setState updater to use latest state)
             if (
               !someHitElementIsSelected &&
               !pointerDownState.hit.hasHitCommonBoundingBoxOfSelectedElements
     pointerDownState: PointerDownState,
   ): void => {
     // if we're currently still editing text, clicking outside
-    //  should only finalize it, not create another (irrespective
-    //  of state.elementLocked)
+    // should only finalize it, not create another (irrespective
+    // of state.elementLocked)
     if (this.state.editingElement?.type === "text") {
       return;
     }
         },
       }));
       // clicking outside commit zone → update reference for last committed
-      //  point
+      // point
       mutateElement(multiElement, {
         lastCommittedPoint: multiElement.points[multiElement.points.length - 1],
       });
       );
 
       // for arrows/lines, don't start dragging until a given threshold
-      //  to ensure we don't create a 2-point arrow by mistake when
-      //  user clicks mouse in a way that it moves a tiny bit (thus
-      //  triggering pointermove)
+      // to ensure we don't create a 2-point arrow by mistake when
+      // user clicks mouse in a way that it moves a tiny bit (thus
+      // triggering pointermove)
       if (
         !pointerDownState.drag.hasOccurred &&
         (this.state.elementType === "arrow" ||
               if (
                 this.state.selectedElementIds[element.id] ||
                 // case: the state.selectedElementIds might not have been
-                //  updated yet by the time this mousemove event is fired
+                // updated yet by the time this mousemove event is fired
                 (element.id === hitElement?.id &&
                   pointerDownState.hit.wasAddedToSelection)
               ) {
         selectionElement: null,
         cursorButton: "up",
         // text elements are reset on finalize, and resetting on pointerup
-        //  may cause issues with double taps
+        // may cause issues with double taps
         editingElement:
           multiElement || isTextElement(this.state.editingElement)
             ? this.state.editingElement
           if (this.state.selectedElementIds[hitElement.id]) {
             if (isSelectedViaGroup(this.state, hitElement)) {
               // We want to unselect all groups hitElement is part of
-              //  as well as all elements that are part of the groups
-              //  hitElement is part of
+              // as well as all elements that are part of the groups
+              // hitElement is part of
               const idsOfSelectedElementsThatAreInGroups = hitElement.groupIds
                 .flatMap((groupId) =>
                   getElementsInGroup(this.scene.getElements(), groupId),

src/components/Portal.tsx

     const newElements = sceneElements
       .reduce((elements, element) => {
         // if the remote element references one that's currently
-        //  edited on local, skip it (it'll be added in the next
-        //  step)
+        // edited on local, skip it (it'll be added in the next step)
         if (
           element.id === this.app.state.editingElement?.id ||
           element.id === this.app.state.resizingElement?.id ||

src/data/blob.ts

       },
       localAppState,
     );
-  } catch {
+  } catch (error) {
+    console.error(error.message);
     throw new Error(t("alerts.couldNotLoadInvalidFile"));
   }
 };

src/data/firebase.ts

     return firebaseSceneVersionCache.get(portal.socket) === sceneVersion;
   }
   // if no room exists, consider the room saved so that we don't unnecessarily
-  //  prevent unload (there's nothing we could do at that point anyway)
+  // prevent unload (there's nothing we could do at that point anyway)
   return true;
 };
 
   const { roomID, roomKey, socket } = portal;
   if (
     // if no room exists, consider the room saved because there's nothing we can
-    //  do at this point
+    // do at this point
     !roomID ||
     !roomKey ||
     !socket ||

src/data/library.ts

         }
 
         // detect z-index difference by checking the excalidraw elements
-        //  are in order
+        // are in order
         return libraryItem.every((libItemExcalidrawItem, idx) => {
           return (
             libItemExcalidrawItem.id === targetLibraryItem[idx].id &&
         Library.libraryCache = JSON.parse(JSON.stringify(items));
 
         resolve(items);
-      } catch (e) {
-        console.error(e);
+      } catch (error) {
+        console.error(error);
         resolve([]);
       }
     });
     try {
       const serializedItems = JSON.stringify(items);
       // cache optimistically so that consumers have access to the latest
-      //  immediately
+      // immediately
       Library.libraryCache = JSON.parse(serializedItems);
       localStorage.setItem(STORAGE_KEYS.LOCAL_STORAGE_LIBRARY, serializedItems);
-    } catch (e) {
+    } catch (error) {
       Library.libraryCache = prevLibraryItems;
-      console.error(e);
+      console.error(error);
     }
   };
 }

src/data/restore.ts

   const base: Pick<T, keyof ExcalidrawElement> = {
     type: element.type,
     // all elements must have version > 0 so getSceneVersion() will pick up
-    //  newly added elements
+    // newly added elements
     version: element.version || 1,
     versionNonce: element.versionNonce ?? 0,
     isDeleted: element.isDeleted ?? false,
     case "diamond":
       return restoreElementWithProperties(element, {});
 
-    // don't use default case so as to catch a missing an element type case
-    //  (we also don't want to throw, but instead return void so we
-    //   filter out these unsupported elements from the restored array)
+    // Don't use default case so as to catch a missing an element type case.
+    // We also don't want to throw, but instead return void so we filter
+    // out these unsupported elements from the restored array.
   }
 };
 
 ): ExcalidrawElement[] => {
   return (elements || []).reduce((elements, element) => {
     // filtering out selection, which is legacy, no longer kept in elements,
-    //  and causing issues if retained
+    // and causing issues if retained
     if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
       const migratedElement = restoreElement(element);
       if (migratedElement) {
     ...nextAppState,
     offsetLeft: appState.offsetLeft || 0,
     offsetTop: appState.offsetTop || 0,
-    /* Migrates from previous version where appState.zoom was a number */
+    // Migrates from previous version where appState.zoom was a number
     zoom:
       typeof appState.zoom === "number"
         ? {

src/element/linearElementEditor.ts

     );
 
     // if we clicked on a point, set the element as hitElement otherwise
-    //  it would get deselected if the point is outside the hitbox area
+    // it would get deselected if the point is outside the hitbox area
     if (clickedPointIndex > -1) {
       ret.hitElement = element;
     } else {
     const pointHandles = this.getPointsGlobalCoordinates(element);
     let idx = pointHandles.length;
     // loop from right to left because points on the right are rendered over
-    //  points on the left, thus should take precedence when clicking, if they
-    //  overlap
+    // points on the left, thus should take precedence when clicking, if they
+    // overlap
     while (--idx > -1) {
       const point = pointHandles[idx];
       if (
     const { points } = element;
 
     // in case we're moving start point, instead of modifying its position
-    //  which would break the invariant of it being at [0,0], we move
-    //  all the other points in the opposite direction by delta to
-    //  offset it. We do the same with actual element.x/y position, so
-    //  this hacks are completely transparent to the user.
+    // which would break the invariant of it being at [0,0], we move
+    // all the other points in the opposite direction by delta to
+    // offset it. We do the same with actual element.x/y position, so
+    // this hacks are completely transparent to the user.
     let offsetX = 0;
     let offsetY = 0;
 
       nextPoints.splice(pointIndex, 1);
       if (pointIndex === 0) {
         // if deleting first point, make the next to be [0,0] and recalculate
-        //  positions of the rest with respect to it
+        // positions of the rest with respect to it
         offsetX = nextPoints[0][0];
         offsetY = nextPoints[0][1];
         nextPoints = nextPoints.map((point, idx) => {

src/element/newElement.ts

 };
 
 // Simplified deep clone for the purpose of cloning ExcalidrawElement only
-//  (doesn't clone Date, RegExp, Map, Set, Typed arrays etc.)
+// (doesn't clone Date, RegExp, Map, Set, Typed arrays etc.)
 //
 // Adapted from https://github.com/lukeed/klona
 export const deepCopyElement = (val: any, depth: number = 0) => {

src/element/textWysiwyg.tsx

   const { zoom, offsetTop, offsetLeft } = appState;
   const degree = (180 * angle) / Math.PI;
   // offsets must be multiplied by 2 to account for the division by 2 of
-  //  the whole expression afterwards
+  // the whole expression afterwards
   return `translate(${((width - offsetLeft * 2) * (zoom.value - 1)) / 2}px, ${
     ((height - offsetTop * 2) * (zoom.value - 1)) / 2
   }px) scale(${zoom.value}) rotate(${degree}deg)`;
   const rebindBlur = () => {
     window.removeEventListener("pointerup", rebindBlur);
     // deferred to guard against focus traps on various UIs that steal focus
-    //  upon pointerUp
+    // upon pointerUp
     setTimeout(() => {
       editable.onblur = handleSubmit;
       // case: clicking on the same property → no change → no update → no focus
       editable.onblur = null;
       window.addEventListener("pointerup", rebindBlur);
       // handle edge-case where pointerup doesn't fire e.g. due to user
-      //  alt-tabbing away
+      // alt-tabbing away
       window.addEventListener("blur", handleSubmit);
     }
   };
 
   editable.onblur = handleSubmit;
   // reposition wysiwyg in case of window resize. Happens on mobile when
-  //  device keyboard is opened.
+  // device keyboard is opened.
   window.addEventListener("resize", updateWysiwygStyle);
   window.addEventListener("pointerdown", onPointerDown);
   window.addEventListener("wheel", stopEvent, {

src/renderer/renderElement.ts

         const shouldTemporarilyAttach = rtl && !context.canvas.isConnected;
         if (shouldTemporarilyAttach) {
           // to correctly render RTL text mixed with LTR, we have to append it
-          //  to the DOM
+          // to the DOM
           document.body.appendChild(context.canvas);
         }
         context.canvas.setAttribute("dir", rtl ? "rtl" : "ltr");
         ? DASHARRAY_DOTTED
         : undefined,
     // for non-solid strokes, disable multiStroke because it tends to make
-    //  dashes/dots overlay each other
+    // dashes/dots overlay each other
     disableMultiStroke: element.strokeStyle !== "solid",
     // for non-solid strokes, increase the width a bit to make it visually
-    //  similar to solid strokes, because we're also disabling multiStroke
+    // similar to solid strokes, because we're also disabling multiStroke
     strokeWidth:
       element.strokeStyle !== "solid"
         ? element.strokeWidth + 0.5
         : element.strokeWidth,
     // when increasing strokeWidth, we must explicitly set fillWeight and
-    //  hachureGap because if not specified, roughjs uses strokeWidth to
-    //  calculate them (and we don't want the fills to be modified)
+    // hachureGap because if not specified, roughjs uses strokeWidth to
+    // calculate them (and we don't want the fills to be modified)
     fillWeight: element.strokeWidth / 2,
     hachureGap: element.strokeWidth * 4,
     roughness: element.roughness,

src/renderer/renderScene.ts

     renderSelection = true,
     // Whether to employ render optimizations to improve performance.
     // Should not be turned on for export operations and similar, because it
-    //  doesn't guarantee pixel-perfect output.
+    // doesn't guarantee pixel-perfect output.
     renderOptimizations = false,
     renderGrid = true,
   }: {

src/scene/Scene.ts

       }
     });
     // done not for memory leaks, but to guard against possible late fires
-    //  (I guess?)
+    // (I guess?)
     this.callbacks.clear();
   }
 }

src/serviceWorker.tsx

               // but the previous service worker will still serve the older
               // content until all client tabs are closed.
 
-              // console.log(
-              //   "New content is available and will be used when all " +
-              //     "tabs for this page are closed.",
-              // );
+              console.info(
+                "New content is available and will be used when all tabs for this page are closed.",
+              );
 
               // Execute callback
               if (config && config.onUpdate) {
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
 
-              // console.log("Content is cached for offline use.");
+              console.info("Content is cached for offline use.");
 
               // Execute callback
               if (config && config.onSuccess) {
         registerValidSW(swUrl, config);
       }
     })
-    .catch(() => {
-      // console.log(
-      //   "No internet connection found. App is running in offline mode.",
-      // );
+    .catch((error) => {
+      console.info(
+        "No internet connection found. App is running in offline mode.",
+        error.message,
+      );
     });
 };
 

src/tests/binding.test.tsx

       expect(API.getSelectedElement().type).toBe("arrow");
 
       // NOTE this mouse down/up + await needs to be done in order to repro
-      //  the issue, due to https://github.com/excalidraw/excalidraw/blob/46bff3daceb602accf60c40a84610797260fca94/src/components/App.tsx#L740
+      // the issue, due to https://github.com/excalidraw/excalidraw/blob/46bff3daceb602accf60c40a84610797260fca94/src/components/App.tsx#L740
       mouse.reset();
       expect(h.state.editingLinearElement).not.toBe(null);
       mouse.down(0, 0);

src/tests/export.test.tsx

       text: "😀",
     }),
     // can't get jsdom text measurement to work so this is a temp hack
-    //  to ensure the element isn't stripped as invisible
+    // to ensure the element isn't stripped as invisible
     width: 16,
     height: 16,
   },

src/tests/regressionTests.test.tsx

     expect(API.getSelectedElements().length).toBe(3);
 
     // clicking on first rectangle that is part of the group should select
-    //  that group (exclusively)
+    // that group (exclusively)
     mouse.clickOn(rect1);
     expect(API.getSelectedElements().length).toBe(2);
     expect(Object.keys(h.state.selectedGroupIds).length).toBe(1);
     mouse.up(100, 100);
 
     // Select first rectangle while keeping third one selected.
-    // Third rectangle is selected because it was the last element
-    //  to be created.
+    // Third rectangle is selected because it was the last element to be created.
     mouse.reset();
     Keyboard.withModifierKeys({ shift: true }, () => {
       mouse.click();
     });
     expect(API.getSelectedElements().length).toBe(3);
 
-    // pointer down o first rectangle that is
-    // part of the group
+    // Pointer down o first rectangle that is part of the group
     mouse.reset();
     Keyboard.withModifierKeys({ shift: true }, () => {
       mouse.down();

src/types.ts

   startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
   suggestedBindings: SuggestedBinding[];
   // element being edited, but not necessarily added to elements array yet
-  //  (e.g. text element when typing into the input)
+  // (e.g. text element when typing into the input)
   editingElement: NonDeletedExcalidrawElement | null;
   editingLinearElement: LinearElementEditor | null;
   elementType: typeof SHAPES[number]["value"];

src/utils.ts

   line.innerText = text
     .split("\n")
     // replace empty lines with single space because leading/trailing empty
-    //  lines would be stripped from computation
+    // lines would be stripped from computation
     .map((x) => x || " ")
     .join("\n");
   const width = line.offsetWidth;

src/zindex.ts

       return false;
     }
     // if we're editing group, find closest sibling irrespective of whether
-    //  there's a different-group element between them (for legacy reasons)
+    // there's a different-group element between them (for legacy reasons)
     if (appState.editingGroupId) {
       return element.groupIds.includes(appState.editingGroupId);
     }
 
   if (elementsInSiblingGroup.length) {
     // assumes getElementsInGroup() returned elements are sorted
-    //  by zIndex (ascending)
+    // by zIndex (ascending)
     return direction === "left"
       ? elements.indexOf(elementsInSiblingGroup[0])
       : elements.indexOf(