From 8f412f9487c10b4fde00ff5c6d695c7917d4ce30 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Wed, 1 May 2024 16:29:12 +0500
Subject: [PATCH] editor: fix padding of react node views on mobile

---
 .../editor/src/extensions/react/react-node-view.tsx  | 12 ++++++++++--
 packages/theme/src/emotion/theme-provider.tsx        |  3 +++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/extensions/react/react-node-view.tsx b/packages/editor/src/extensions/react/react-node-view.tsx
index ecb70ca35..a9121fa63 100644
--- a/packages/editor/src/extensions/react/react-node-view.tsx
+++ b/packages/editor/src/extensions/react/react-node-view.tsx
@@ -32,6 +32,7 @@ import { Editor, NodeViewRendererProps } from "@tiptap/core";
 import { __serializeForClipboard, EditorView } from "prosemirror-view";
 import { EmotionThemeProvider } from "@notesnook/theme";
 import { isAndroid, isiOS } from "../../utils/platform";
+import { useToolbarStore } from "../../toolbar/stores/toolbar-store";
 
 // This is hacky workaround to manually handle serialization when
 // drag/dropping on mobile devices.
@@ -158,9 +159,16 @@ export class ReactNodeView<P extends ReactNodeViewProps> implements NodeView {
 
   Component: FunctionComponent = () => {
     if (!this.options.component) return null;
-
     return (
-      <EmotionThemeProvider scope="editor" injectCssVars={false}>
+      <EmotionThemeProvider
+        scope="editor"
+        injectCssVars={false}
+        theme={
+          useToolbarStore.getState().isMobile
+            ? { space: [0, 10, 12, 20] }
+            : undefined
+        }
+      >
         <this.options.component
           {...(this.options.props as P)}
           pos={this.pos}
diff --git a/packages/theme/src/emotion/theme-provider.tsx b/packages/theme/src/emotion/theme-provider.tsx
index 7de3b35c7..cc9dd9529 100644
--- a/packages/theme/src/emotion/theme-provider.tsx
+++ b/packages/theme/src/emotion/theme-provider.tsx
@@ -33,6 +33,7 @@ import { useTheme } from "@emotion/react";
 export type EmotionThemeProviderProps = {
   scope?: keyof ThemeScopes;
   injectCssVars?: boolean;
+  theme?: Partial<Theme>;
 } & Omit<BoxProps, "variant" | "ref">;
 
 function _EmotionThemeProvider(
@@ -44,6 +45,7 @@ function _EmotionThemeProvider(
     scope = "base",
     injectCssVars = true,
     className,
+    theme: partialTheme,
     ...restProps
   } = props;
   const emotionTheme = useTheme() as Theme;
@@ -66,6 +68,7 @@ function _EmotionThemeProvider(
         ...(emotionTheme && "space" in emotionTheme
           ? emotionTheme
           : themeProperties),
+        ...partialTheme,
         colors: themeProperties.colors
       }}
     >