Correct spelling mistakes

app/client/ui/ApiKey.ts

@@ -20,7 +20,7 @@ const testId = makeTestId('test-apikey-');
  * ApiKey component shows an api key with controls to change it. Expects `options.apiKey` the api
  * key and shows it if value is truthy along with a 'Delete' button that triggers the
  * `options.onDelete` callback. When `options.apiKey` is falsy, hides it and show a 'Create' button
- * that triggers the `options.onCreate` callback. It is the responsability of the caller to update
+ * that triggers the `options.onCreate` callback. It is the responsibility of the caller to update
  * the `options.apiKey` to its new value.
  */
 export class ApiKey extends Disposable {

app/client/ui/AppUI.ts

@@ -56,7 +56,7 @@ function createMainPage(appModel: AppModel, appObj: App) {
     } else if (err && (err.status === 401 || err.status === 403)) {
       // Generally give access denied error.
       // The exception is for document pages, where we want to allow access to documents
-      // shared publically without being shared specifically with the current user.
+      // shared publicly without being shared specifically with the current user.
       if (appModel.pageType.get() !== 'doc') {
         return createForbiddenPage(appModel);
       }

app/client/ui/ColumnFilterMenu.ts

@@ -207,7 +207,7 @@ export function columnFilterMenu(owner: IDisposableOwner, opts: IFilterMenuOptio
  * On user clicks, if checkbox is checked, it does uncheck all the values, and if the
  * `switchFilterType` is true it also converts the filter into an inclusion filter. But if the
  * checkbox is unchecked, or in the Indeterminate state, it does check all the values, and if the
- * `switchFilterType` is true it also converts the filter into an exlusion filter.
+ * `switchFilterType` is true it also converts the filter into an exclusion filter.
  */
 function buildSummary(label: string|Computed<string>, values: Array<[CellValue, IFilterCount]>,
                       switchFilterType: boolean, model: ColumnFilterMenuModel) {

app/client/ui/FileDialog.ts

@@ -53,7 +53,7 @@ export function openFilePicker(options: FileDialogOptions): Promise<File[]> {
 
 /**
  * Opens the file picker dialog. If files are selected, calls the provided callback.
- * If no files are seleced, will call the callback with an empty list if possible, or more
+ * If no files are selected, will call the callback with an empty list if possible, or more
  * typically not call it at all.
  */
 export function open(options: FileDialogOptions, callback: FilesCB): void {

app/client/ui/MFAConfig.ts

@@ -194,7 +194,7 @@ export class MFAConfig extends Disposable {
               return [
                 this._buildSecurityVerificationForm(ctl, {onSuccess: async (hadSecondStep) => {
                   /**
-                   * If method was unspecified, but second step verification occured, we know that
+                   * If method was unspecified, but second step verification occurred, we know that
                    * the client doesn't have up-to-date 2FA preferences. Close the modal, and force
                    * a refresh of UserMFAPreferences, which should cause the correct buttons to be
                    * rendered once preferences are loaded.

app/client/ui/MakeCopyMenu.ts

@@ -90,7 +90,7 @@ function allowOtherOrgs(doc: Document, app: AppModel): boolean {
 
 
 /**
- * Ask user for the desination and new name, and make a copy of the doc using those.
+ * Ask user for the destination and new name, and make a copy of the doc using those.
  */
 export async function makeCopy(doc: Document, app: AppModel, modalTitle: string): Promise<void> {
   if (!app.currentValidUser) {

app/client/ui/Pages.ts

@@ -75,7 +75,7 @@ function buildDomFromTable(pagesTable: MetaTableModel<PageRec>, activeDoc: Grist
     }
 
     // if user removes a primary view, let's confirm first, because this will remove the
-    // corresponsing table and also all pages that are using this table.
+    // corresponding table and also all pages that are using this table.
     // TODO: once we have raw table view, removing page should remove just the view (not the
     // table), but for now this is the only way to remove a table in the newui.
     actions.onRemove = () => confirmModal(

app/client/ui/TreeViewComponent.ts

@@ -91,7 +91,7 @@ const testId = makeTestId('test-treeview-');
  * item and by highlighting its parent. In order to ensure data consistency, the component prevents
  * dropping an item within its own children. If the cursor leaves the component during a drag, all
  * such visual artifact (handle, target and target's parent) are hidden, but if the cursor re-enter
- * the componet without releasing the mouse, they will show again allowing user to resume dragging.
+ * the component without releasing the mouse, they will show again allowing user to resume dragging.
  */
  // note to self: in the future the model will be updated by the server, which could cause conflicts
  // if the user is dragging at the same time. It could be simpler to freeze the model and to differ
@@ -125,7 +125,7 @@ export class TreeViewComponent extends Disposable {
 
     // While building dom we add listeners to the children of all tree nodes to watch for changes
     // and call this._update. Hence, repeated calls to this._update is likely to add or remove
-    // listeners to the observable that triggered the udpate which is not supported by grainjs and
+    // listeners to the observable that triggered the update which is not supported by grainjs and
     // could fail (possibly infinite loop). Debounce allows for several change to resolve to a
     // single update.
     this._update = debounce(this._update.bind(this), 0, {leading: false});
@@ -230,7 +230,7 @@ export class TreeViewComponent extends Disposable {
 
   // Update this._childrenDom with the content of the new tree. Its rebuilds entirely the tree of
   // items and reuses dom from the old content for each item that were already part of the old
-  // tree. Then takes care of disposing dom for thoses items that were removed from the old tree.
+  // tree. Then takes care of disposing dom for those items that were removed from the old tree.
   private _update() {
     this._childrenDom.set(this._buildChildren(this._model.get().children(), 0));
 

app/client/ui/VisibleFieldsConfig.ts

@@ -423,7 +423,7 @@ function buildCheckbox(...args: IDomArgs<HTMLInputElement>) {
   );
 }
 
-// helper to find checkboxes withing a draggable list. This assumes that checkboxes are the only
+// helper to find checkboxes within a draggable list. This assumes that checkboxes are the only
 // <input> element in draggableElement.
 function findCheckboxes(draggableElement: Element): NodeListOf<HTMLInputElement> {
   return draggableElement.querySelectorAll<HTMLInputElement>('input');