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

shared/editor/nodes/CodeFence.ts

@@ -52,8 +52,9 @@ import visualbasic from "refractor/lang/visual-basic";
 import yaml from "refractor/lang/yaml";
 import zig from "refractor/lang/zig";
 
-import { UserPreferences } from "@shared/types";
 import { Dictionary } from "~/hooks/useDictionary";
+import { UserPreferences } from "../../types";
+import Storage from "../../utils/Storage";
 
 import toggleBlockType from "../commands/toggleBlockType";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
@@ -220,7 +221,7 @@ export default class CodeFence extends Node {
   commands({ type, schema }: { type: NodeType; schema: Schema }) {
     return (attrs: Record<string, any>) =>
       toggleBlockType(type, schema.nodes.paragraph, {
-        language: localStorage?.getItem(PERSISTENCE_KEY) || DEFAULT_LANGUAGE,
+        language: Storage.get(PERSISTENCE_KEY, DEFAULT_LANGUAGE),
         ...attrs,
       });
   }
@@ -302,7 +303,7 @@ export default class CodeFence extends Node {
 
       view.dispatch(transaction);
 
-      localStorage?.setItem(PERSISTENCE_KEY, language);
+      Storage.set(PERSISTENCE_KEY, language);
     }
   };
 
@@ -364,7 +365,7 @@ export default class CodeFence extends Node {
   inputRules({ type }: { type: NodeType }) {
     return [
       textblockTypeInputRule(/^```$/, type, () => ({
-        language: localStorage?.getItem(PERSISTENCE_KEY) || DEFAULT_LANGUAGE,
+        language: Storage.get(PERSISTENCE_KEY, DEFAULT_LANGUAGE),
       })),
     ];
   }

shared/editor/nodes/Heading.ts

@@ -8,6 +8,7 @@ import {
 } from "prosemirror-model";
 import { Plugin, Selection } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import Storage from "../../utils/Storage";
 import backspaceToParagraph from "../commands/backspaceToParagraph";
 import splitHeading from "../commands/splitHeading";
 import toggleBlockType from "../commands/toggleBlockType";
@@ -151,9 +152,9 @@ export default class Heading extends Node {
         const persistKey = headingToPersistenceKey(node, this.editor.props.id);
 
         if (collapsed) {
-          localStorage?.setItem(persistKey, "collapsed");
+          Storage.set(persistKey, "collapsed");
         } else {
-          localStorage?.removeItem(persistKey);
+          Storage.remove(persistKey);
         }
 
         view.dispatch(transaction);

shared/editor/plugins/Folding.tsx

@@ -1,6 +1,7 @@
 import { Plugin } from "prosemirror-state";
 import { findBlockNodes } from "prosemirror-utils";
 import { Decoration, DecorationSet } from "prosemirror-view";
+import Storage from "../../utils/Storage";
 import Extension from "../lib/Extension";
 import { headingToPersistenceKey } from "../lib/headingToSlug";
 import findCollapsedNodes from "../queries/findCollapsedNodes";
@@ -40,7 +41,7 @@ export default class Folding extends Extension {
                 block.node,
                 this.editor.props.id
               );
-              const persistedState = localStorage?.getItem(persistKey);
+              const persistedState = Storage.get(persistKey);
 
               if (persistedState === "collapsed") {
                 tr.setNodeMarkup(block.pos, undefined, {