fix: Unable to access localStorage in document embedded in iframe with third party cookies blocked (#4777)

* fix: Pasting from Microsoft Office pastes image. Closes #3058

* fix: Use Storage wrapper implementation for all editor calls to localStorage

closes #4776

app/hooks/usePersistedState.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Primitive } from "utility-types";
+import Storage from "@shared/utils/Storage";
 import Logger from "~/utils/Logger";
-import Storage from "~/utils/Storage";
 import useEventListener from "./useEventListener";
 
 type Options = {

app/models/Document.ts

@@ -2,13 +2,13 @@ import { addDays, differenceInDays } from "date-fns";
 import { floor } from "lodash";
 import { action, autorun, computed, observable, set } from "mobx";
 import { ExportContentType } from "@shared/types";
+import Storage from "@shared/utils/Storage";
 import parseTitle from "@shared/utils/parseTitle";
 import { isRTL } from "@shared/utils/rtl";
 import DocumentsStore from "~/stores/DocumentsStore";
 import User from "~/models/User";
 import type { NavigationNode } from "~/types";
 import { client } from "~/utils/ApiClient";
-import Storage from "~/utils/Storage";
 import ParanoidModel from "./ParanoidModel";
 import View from "./View";
 import Field from "./decorators/Field";

app/stores/AuthStore.ts

@@ -3,6 +3,7 @@ import invariant from "invariant";
 import { observable, action, computed, autorun, runInAction } from "mobx";
 import { getCookie, setCookie, removeCookie } from "tiny-cookie";
 import { TeamPreferences, UserPreferences } from "@shared/types";
+import Storage from "@shared/utils/Storage";
 import { getCookieDomain, parseDomain } from "@shared/utils/domains";
 import RootStore from "~/stores/RootStore";
 import Policy from "~/models/Policy";
@@ -11,7 +12,6 @@ import User from "~/models/User";
 import env from "~/env";
 import { client } from "~/utils/ApiClient";
 import Desktop from "~/utils/Desktop";
-import Storage from "~/utils/Storage";
 
 const AUTH_STORE = "AUTH_STORE";
 const NO_REDIRECT_PATHS = ["/", "/create", "/home"];

app/stores/UiStore.ts

@@ -1,8 +1,8 @@
 import { action, autorun, computed, observable } from "mobx";
 import { light as defaultTheme } from "@shared/styles/theme";
+import Storage from "@shared/utils/Storage";
 import Document from "~/models/Document";
 import type { ConnectionStatus } from "~/scenes/Document/components/MultiplayerEditor";
-import Storage from "~/utils/Storage";
 
 const UI_STORE = "UI_STORE";
 

app/utils/Storage.ts

@@ -1,56 +0,0 @@
-/**
- * Storage is a wrapper class for localStorage that allow safe usage when
- * localStorage is not available.
- */
-export default class Storage {
-  /**
-   * Set a value in localStorage. For efficiency, this method will remove the
-   * value if it is undefined.
-   *
-   * @param key The key to set under.
-   * @param value The value to set
-   */
-  static set<T>(key: string, value: T) {
-    try {
-      if (value === undefined) {
-        this.remove(key);
-      } else {
-        localStorage.setItem(key, JSON.stringify(value));
-      }
-    } catch (error) {
-      // no-op Safari private mode
-    }
-  }
-
-  /**
-   * Get a value from localStorage.
-   *
-   * @param key The key to get.
-   * @returns The value or undefined if it doesn't exist.
-   */
-  static get(key: string) {
-    try {
-      const value = localStorage.getItem(key);
-      if (typeof value === "string") {
-        return JSON.parse(value);
-      }
-    } catch (error) {
-      // no-op Safari private mode
-    }
-
-    return undefined;
-  }
-
-  /**
-   * Remove a value from localStorage.
-   *
-   * @param key The key to remove.
-   */
-  static remove(key: string) {
-    try {
-      localStorage.removeItem(key);
-    } catch (error) {
-      // no-op Safari private mode
-    }
-  }
-}