chore: fix various typos (#4857)

Found via `codespell -q 3 -S ./src/locales,./yarn.lock,./src/packages/excalidraw/yarn.lock -L afterall,doubleclick,originaly,reenable,whats,sur`

src/actions/shortcuts.ts

@@ -71,6 +71,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
 
 export const getShortcutFromShortcutName = (name: ShortcutName) => {
   const shortcuts = shortcutMap[name];
-  // if multiple shortcuts availiable, take the first one
+  // if multiple shortcuts available, take the first one
   return shortcuts && shortcuts.length > 0 ? shortcuts[0] : "";
 };

src/charts.ts

@@ -103,7 +103,7 @@ const transposeCells = (cells: string[][]) => {
 };
 
 export const tryParseSpreadsheet = (text: string): ParseSpreadsheetResult => {
-  // Copy/paste from excel, spreadhseets, tsv, csv.
+  // Copy/paste from excel, spreadsheets, tsv, csv.
   // For now we only accept 2 columns with an optional header
 
   // Check for tab separated values

src/clipboard.ts

@@ -124,7 +124,7 @@ const getSystemClipboard = async (
 };
 
 /**
- * Attemps to parse clipboard. Prefers system clipboard.
+ * Attempts to parse clipboard. Prefers system clipboard.
  */
 export const parseClipboard = async (
   event: ClipboardEvent | null,

src/components/App.tsx

@@ -2245,7 +2245,7 @@ class App extends React.Component<AppProps, AppState> {
         element,
       ]);
 
-      // case: creating new text not centered to parent elemenent → offset Y
+      // case: creating new text not centered to parent element → offset Y
       // so that the text is centered to cursor position
       if (!parentCenterPosition) {
         mutateElement(element, {
@@ -3006,7 +3006,7 @@ class App extends React.Component<AppProps, AppState> {
         /*
          * Reenable next paste in case of disabled middle click paste for
          * any reason:
-         * - rigth click paste
+         * - right click paste
          * - empty clipboard
          */
         const enableNextPaste = () => {
@@ -4742,7 +4742,7 @@ class App extends React.Component<AppProps, AppState> {
       const width = height * (image.naturalWidth / image.naturalHeight);
 
       // add current imageElement width/height to account for previous centering
-      // of the placholder image
+      // of the placeholder image
       const x = imageElement.x + imageElement.width / 2 - width / 2;
       const y = imageElement.y + imageElement.height / 2 - height / 2;
 

src/components/LayerUI.tsx

@@ -238,7 +238,7 @@ const LayerUI = ({
         className={CLASSES.SHAPE_ACTIONS_MENU}
         padding={2}
         style={{
-          // we want to make sure this doesn't overflow so substracting 200
+          // we want to make sure this doesn't overflow so subtracting 200
           // which is approximately height of zoom footer and top left menu items with some buffer
           // if active file name is displayed, subtracting 248 to account for its height
           maxHeight: `${appState.height - (appState.fileHandle ? 248 : 200)}px`,

src/element/collision.ts

@@ -646,7 +646,7 @@ const getCorners = (
 
 // Returns intersection of `line` with `segment`, with `segment` moved by
 // `gap` in its polar direction.
-// If intersection conincides with second segment point returns empty array.
+// If intersection coincides with second segment point returns empty array.
 const intersectSegment = (
   line: GA.Line,
   segment: [GA.Point, GA.Point],

src/element/linearElementEditor.ts

@@ -401,7 +401,7 @@ export class LinearElementEditor {
       ret.hitElement = element;
     } else {
       // You might be wandering why we are storing the binding elements on
-      // LinearElementEditor and passing them in, insted of calculating them
+      // LinearElementEditor and passing them in, instead of calculating them
       // from the end points of the `linearElement` - this is to allow disabling
       // binding (which needs to happen at the point the user finishes moving
       // the point).

src/element/sizeHelpers.test.ts

@@ -32,7 +32,7 @@ describe("getPerfectElementSize", () => {
     expect(width).toEqual(135);
     expect(height).toEqual(135);
   });
-  it("should return height:0 and width:0 when width and heigh are 0", () => {
+  it("should return height:0 and width:0 when width and height are 0", () => {
     const { height, width } = getPerfectElementSize("arrow", 0, 0);
     expect(width).toEqual(0);
     expect(height).toEqual(0);

src/element/textWysiwyg.tsx

@@ -114,7 +114,7 @@ export const textWysiwyg = ({
 
       let maxHeight = updatedElement.height;
       let width = updatedElement.width;
-      // Set to element height by default since thats
+      // Set to element height by default since that's
       // what is going to be used for unbounded text
       let height = updatedElement.height;
       if (container && updatedElement.containerId) {
@@ -170,7 +170,7 @@ export const textWysiwyg = ({
       const initialLength = editable.value.length;
       editable.value = updatedElement.originalText;
 
-      // restore cursor positon after value updated so it doesn't
+      // restore cursor position after value updated so it doesn't
       // go to the end of text when container auto expanded
       if (
         initialSelectionStart === initialSelectionEnd &&
@@ -275,7 +275,7 @@ export const textWysiwyg = ({
       // as that gets updated below
       const lines = editable.scrollHeight / getApproxLineHeight(font);
       // auto increase height only when lines  > 1 so its
-      // measured correctly and vertically alignes for
+      // measured correctly and vertically aligns for
       // first line as well as setting height to "auto"
       // doubles the height as soon as user starts typing
       if (isBoundToContainer(element) && lines > 1) {
@@ -414,7 +414,7 @@ export const textWysiwyg = ({
   };
 
   /**
-   * @returns indeces of start positions of selected lines, in reverse order
+   * @returns indices of start positions of selected lines, in reverse order
    */
   const getSelectedLinesStartIndices = () => {
     let { selectionStart, selectionEnd, value } = editable;

src/ga.ts

@@ -62,7 +62,7 @@ const NVECTOR_BASE = ["1", "e0", "e1", "e2", "e01", "e20", "e12", "e012"];
 export const nvector = (value: number = 0, index: number = 0): NVector => {
   const result = [0, 0, 0, 0, 0, 0, 0, 0];
   if (index < 0 || index > 7) {
-    throw new Error(`Expected \`index\` betwen 0 and 7, got \`${index}\``);
+    throw new Error(`Expected \`index\` between 0 and 7, got \`${index}\``);
   }
   if (value !== 0) {
     result[index] = value;

src/galines.ts

@@ -7,7 +7,7 @@ import { Line, Point } from "./ga";
  *
  * This maps to a standard formula `a * x + b * y + c`.
  *
- * `(-b, a)` correponds to a 2D vector parallel to the line. The lines
+ * `(-b, a)` corresponds to a 2D vector parallel to the line. The lines
  * have a natural orientation, corresponding to that vector.
  *
  * The magnitude ("norm") of the line is `sqrt(a ^ 2 + b ^ 2)`.

src/packages/excalidraw/CHANGELOG.md

@@ -20,7 +20,7 @@ Please add the latest change on the top under the correct section.
 - Add `onLinkOpen` prop which will be triggered when clicked on element hyperlink if present [#4694](https://github.com/excalidraw/excalidraw/pull/4694).
 - Support updating library using [`updateScene`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#updateScene) API [#4546](https://github.com/excalidraw/excalidraw/pull/4546).
 
-- Introduced primary colors to the app. The colors can be overriden. Check [readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#customizing-styles) on how to do so [#4387](https://github.com/excalidraw/excalidraw/pull/4387).
+- Introduced primary colors to the app. The colors can be overridden. Check [readme](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#customizing-styles) on how to do so [#4387](https://github.com/excalidraw/excalidraw/pull/4387).
 
 - [`exportToBlob`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportToBlob) now automatically sets `appState.exportBackground` to `true` if exporting to `image/jpeg` MIME type (to ensure that alpha channel is not compressed to black color) [#4342](https://github.com/excalidraw/excalidraw/pull/4342).
 
@@ -115,7 +115,7 @@ Please add the latest change on the top under the correct section.
 
 - Sync local storage state across tabs when out of sync [#4545](https://github.com/excalidraw/excalidraw/pull/4545)
 
-- Support contextMenuLabel to be of function type to support dynmaic labels [#4654](https://github.com/excalidraw/excalidraw/pull/4654)
+- Support contextMenuLabel to be of function type to support dynamic labels [#4654](https://github.com/excalidraw/excalidraw/pull/4654)
 
 - Support decreasing/increasing `fontSize` via keyboard [#4553](https://github.com/excalidraw/excalidraw/pull/4553)
 
@@ -438,10 +438,10 @@ Please add the latest change on the top under the correct section.
 
 - Added prop [`autoFocus`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#autoFocus) to focus the excalidraw component on page load when enabled, defaults to false [#3691](https://github.com/excalidraw/excalidraw/pull/3691).
 
-  Note: Earlier Excalidraw component was focussed by default on page load, you need to enable `autoFocus` prop to retain the same behaviour.
+  Note: Earlier Excalidraw component was focused by default on page load, you need to enable `autoFocus` prop to retain the same behaviour.
 
 - Added prop `UIOptions.canvasActions.export.renderCustomUI` to support Custom UI rendering inside export dialog [#3666](https://github.com/excalidraw/excalidraw/pull/3666).
-- Added prop `UIOptions.canvasActions.saveAsImage` to show/hide the **Save as image** button in the canvas actions. Defauls to `true` hence the **Save as Image** button is rendered [#3662](https://github.com/excalidraw/excalidraw/pull/3662).
+- Added prop `UIOptions.canvasActions.saveAsImage` to show/hide the **Save as image** button in the canvas actions. Defaults to `true` hence the **Save as Image** button is rendered [#3662](https://github.com/excalidraw/excalidraw/pull/3662).
 
 - Export dialog can be customised with [`UiOptions.canvasActions.export`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportOpts) [#3658](https://github.com/excalidraw/excalidraw/pull/3658).
 
@@ -489,7 +489,7 @@ Please add the latest change on the top under the correct section.
 
 - Exporting redesign [#3613](https://github.com/excalidraw/excalidraw/pull/3613)
 
-- Auto-position tooltip and suport overflowing container [#3631](https://github.com/excalidraw/excalidraw/pull/3631)
+- Auto-position tooltip and support overflowing container [#3631](https://github.com/excalidraw/excalidraw/pull/3631)
 
 - Auto release @excalidraw/excalidraw-next on every change [#3614](https://github.com/excalidraw/excalidraw/pull/3614)
 

src/packages/excalidraw/README.md

@@ -425,7 +425,7 @@ Here you can try saving the data to your backend or local storage for example.
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
 
-| Name | Type | Descrption |
+| Name | Type | Description |
 | --- | --- | --- |
 | `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. |
 | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) | The App state with which Excalidraw should be mounted. |
@@ -679,7 +679,7 @@ Enable this if you want Excalidraw to handle keyboard even if the component isn'
 
 #### `onLibraryChange`
 
-Ths callback if supplied will get triggered when the library is updated and has the below signature.
+This callback if supplied will get triggered when the library is updated and has the below signature.
 
 <pre>
 (items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void | Promise<any>

src/packages/excalidraw/README_NEXT.md

@@ -431,7 +431,7 @@ Here you can try saving the data to your backend or local storage for example.
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
 
-| Name | Type | Descrption |
+| Name | Type | Description |
 | --- | --- | --- |
 | `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L78) | The elements with which Excalidraw should be mounted. |
 | `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) | The App state with which Excalidraw should be mounted. |
@@ -685,7 +685,7 @@ Enable this if you want Excalidraw to handle keyboard even if the component isn'
 
 #### `onLibraryChange`
 
-Ths callback if supplied will get triggered when the library is updated and has the below signature.
+This callback if supplied will get triggered when the library is updated and has the below signature.
 
 <pre>
 (items: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => void | Promise<any>

src/packages/excalidraw/example/App.js

@@ -7,7 +7,7 @@ import "./App.scss";
 import initialData from "./initialData";
 import { MIME_TYPES } from "../../../constants";
 
-// This is so that we use the bundled excalidraw.developement.js file instead
+// This is so that we use the bundled excalidraw.development.js file instead
 // of the actual source code
 const { exportToCanvas, exportToSvg, exportToBlob } = window.Excalidraw;
 const Excalidraw = window.Excalidraw.default;

src/packages/excalidraw/example/public/index.html

@@ -20,7 +20,7 @@
     <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
 
-    <!-- This is so that we use the bundled excalidraw.developement.js file instead
+    <!-- This is so that we use the bundled excalidraw.development.js file instead
     of the actual source code -->
     <script src="./excalidraw.development.js"></script>
 

src/points.ts

@@ -37,7 +37,7 @@ export const rescalePoints = (
   );
 
   if (scaledPoints.length === 2) {
-    // we don't tranlate two-point lines
+    // we don't translate two-point lines
     return scaledPoints;
   }
 

src/scene/export.ts

@@ -104,7 +104,7 @@ export const exportToSvg = async (
   }
   const [minX, minY, width, height] = getCanvasSize(elements, exportPadding);
 
-  // initialze SVG root
+  // initialize SVG root
   const svgRoot = document.createElementNS(SVG_NS, "svg");
   svgRoot.setAttribute("version", "1.1");
   svgRoot.setAttribute("xmlns", SVG_NS);

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

@@ -9212,7 +9212,7 @@ exports[`regression tests given a group of selected elements with an element tha
 
 exports[`regression tests given a group of selected elements with an element that is not selected inside the group common bounding box when element that is not selected is clicked should switch selection to not selected element on pointer up: [end of test] number of renders 1`] = `20`;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] appState 1`] = `
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] appState 1`] = `
 Object {
   "collaborators": Map {},
   "currentChartType": "bar",
@@ -9298,7 +9298,7 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 0 1`] = `
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 0 1`] = `
 Object {
   "angle": 0,
   "backgroundColor": "#fa5252",
@@ -9326,7 +9326,7 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 1 1`] = `
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] element 1 1`] = `
 Object {
   "angle": 0,
   "backgroundColor": "#fa5252",
@@ -9354,7 +9354,7 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] history 1`] = `
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] history 1`] = `
 Object {
   "recording": false,
   "redoStack": Array [],
@@ -9475,9 +9475,9 @@ Object {
 }
 `;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `2`;
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of elements 1`] = `2`;
 
-exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partialy overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `18`;
+exports[`regression tests given a selected element A and a not selected element B with higher z-index than A and given B partially overlaps A when there's a shift-click on the overlapped section B is added to the selection: [end of test] number of renders 1`] = `18`;
 
 exports[`regression tests given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up: [end of test] appState 1`] = `
 Object {

src/tests/reconciliation.test.ts

@@ -148,7 +148,7 @@ describe("elements reconciliation", () => {
 
     // non-annotated elements
     // -------------------------------------------------------------------------
-    // usually when we sync elements they should always be annonated with
+    // usually when we sync elements they should always be annotated with
     // their (preceding elements) parents, but let's test a couple of cases when
     // they're not for whatever reason (remote clients are on older version...),
     // in which case the first synced element either replaces existing element

src/tests/regressionTests.test.tsx

@@ -946,7 +946,7 @@ describe("regression tests", () => {
 
   it(
     "given a selected element A and a not selected element B with higher z-index than A " +
-      "and given B partialy overlaps A " +
+      "and given B partially overlaps A " +
       "when there's a shift-click on the overlapped section B is added to the selection",
     () => {
       UI.clickTool("rectangle");

src/types.ts

@@ -365,9 +365,9 @@ export type PointerDownState = Readonly<{
   };
   withCmdOrCtrl: boolean;
   drag: {
-    // Might change during the pointer interation
+    // Might change during the pointer interaction
     hasOccurred: boolean;
-    // Might change during the pointer interation
+    // Might change during the pointer interaction
     offset: { x: number; y: number } | null;
   };
   // We need to have these in the state so that we can unsubscribe them