editor: fix padding of react node views on mobile

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}

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
       }}
     >