From 2bed812df1be640797441f4cd506b56e85d29a1c Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Thu, 3 Aug 2023 18:24:25 +0500
Subject: [PATCH] mobile: fix editor

---
 apps/mobile/app/screens/editor/tiptap/types.ts        |  2 +-
 apps/mobile/app/stores/use-setting-store.ts           |  4 ++--
 packages/editor-mobile/src/hooks/useSettings.ts       |  2 +-
 packages/editor/src/extensions/font-size/font-size.ts |  1 -
 packages/editor/src/toolbar/components/counter.tsx    | 11 ++++++++---
 packages/editor/src/toolbar/components/more-tools.tsx |  1 +
 .../editor/src/toolbar/components/toolbar-group.tsx   |  4 ++--
 packages/editor/src/toolbar/popups/color-picker.tsx   |  7 ++++++-
 packages/theme/src/emotion/theme-provider.tsx         |  9 ++++++++-
 9 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/apps/mobile/app/screens/editor/tiptap/types.ts b/apps/mobile/app/screens/editor/tiptap/types.ts
index 41e5981db..9ffe93b36 100644
--- a/apps/mobile/app/screens/editor/tiptap/types.ts
+++ b/apps/mobile/app/screens/editor/tiptap/types.ts
@@ -48,7 +48,7 @@ export type Settings = {
   keyboardShown?: boolean;
   doubleSpacedLines?: boolean;
   corsProxy: string;
-  fontSize: string;
+  fontSize: number;
   fontFamily: string;
   dateFormat: string;
   timeFormat: string;
diff --git a/apps/mobile/app/stores/use-setting-store.ts b/apps/mobile/app/stores/use-setting-store.ts
index 440fe8a3d..e165d35bc 100644
--- a/apps/mobile/app/stores/use-setting-store.ts
+++ b/apps/mobile/app/stores/use-setting-store.ts
@@ -69,7 +69,7 @@ export type Settings = {
   corsProxy: string;
   disableRealtimeSync?: boolean;
   notificationSound?: Sound & { platform: PlatformOSType };
-  defaultFontSize: string;
+  defaultFontSize: number;
   defaultFontFamily: string;
   colorScheme: "dark" | "light";
   lighTheme: ThemeDefinition;
@@ -149,7 +149,7 @@ export const defaultSettings: SettingStore["settings"] = {
   reminderNotificationMode: "urgent",
   notificationSound: undefined,
   defaultFontFamily: "sans-serif",
-  defaultFontSize: "16",
+  defaultFontSize: 16,
   colorScheme: "light",
   lighTheme: ThemeLight,
   darkTheme: ThemeDark
diff --git a/packages/editor-mobile/src/hooks/useSettings.ts b/packages/editor-mobile/src/hooks/useSettings.ts
index 627eb4f58..1ced7d836 100644
--- a/packages/editor-mobile/src/hooks/useSettings.ts
+++ b/packages/editor-mobile/src/hooks/useSettings.ts
@@ -32,7 +32,7 @@ const initialState = {
   readonly: globalThis.readonly,
   doubleSpacedLines: true,
   fontFamily: "sans-serif",
-  fontSize: "16px",
+  fontSize: 16,
   timeFormat: "12-hour",
   dateFormat: "DD-MM-YYYY"
 };
diff --git a/packages/editor/src/extensions/font-size/font-size.ts b/packages/editor/src/extensions/font-size/font-size.ts
index e0c3a4110..92ffb5170 100644
--- a/packages/editor/src/extensions/font-size/font-size.ts
+++ b/packages/editor/src/extensions/font-size/font-size.ts
@@ -57,7 +57,6 @@ export const FontSize = Extension.create<FontSizeOptions>({
               if (!attributes.fontSize) {
                 return {};
               }
-
               return {
                 style: `font-size: ${attributes.fontSize}`
               };
diff --git a/packages/editor/src/toolbar/components/counter.tsx b/packages/editor/src/toolbar/components/counter.tsx
index 96ef25f6f..fc8e0eb7a 100644
--- a/packages/editor/src/toolbar/components/counter.tsx
+++ b/packages/editor/src/toolbar/components/counter.tsx
@@ -37,7 +37,6 @@ function _Counter(props: CounterProps) {
         alignItems: "stretch",
         borderRadius: "default",
         overflow: "hidden",
-        height: "100%",
         cursor: "pointer",
         ":hover": {
           bg: "hover-secondary"
@@ -51,7 +50,10 @@ function _Counter(props: CounterProps) {
         title={`Decrease ${title}`}
         icon="minus"
         variant={"small"}
-        onClick={onDecrease}
+        onClick={(e) => {
+          e.stopPropagation();
+          onDecrease();
+        }}
       />
 
       <Text
@@ -71,7 +73,10 @@ function _Counter(props: CounterProps) {
         title={`Increase ${title}`}
         icon="plus"
         variant={"small"}
-        onClick={onIncrease}
+        onClick={(e) => {
+          e.stopPropagation();
+          onIncrease();
+        }}
       />
     </Flex>
   );
diff --git a/packages/editor/src/toolbar/components/more-tools.tsx b/packages/editor/src/toolbar/components/more-tools.tsx
index 13d02d0b6..117ef0015 100644
--- a/packages/editor/src/toolbar/components/more-tools.tsx
+++ b/packages/editor/src/toolbar/components/more-tools.tsx
@@ -52,6 +52,7 @@ export function MoreTools(props: MoreToolsProps) {
       />
       <PopupWrapper
         isOpen={isOpen}
+        scope="editorToolbar"
         group={group || "toolbarGroup"}
         id={popupId}
         onClosed={onClosed}
diff --git a/packages/editor/src/toolbar/components/toolbar-group.tsx b/packages/editor/src/toolbar/components/toolbar-group.tsx
index 8cf521571..58e12c998 100644
--- a/packages/editor/src/toolbar/components/toolbar-group.tsx
+++ b/packages/editor/src/toolbar/components/toolbar-group.tsx
@@ -39,8 +39,8 @@ export function ToolbarGroup(props: ToolbarGroupProps) {
     <Flex
       className="toolbar-group"
       sx={{
-        gap: "small",
-        p: "small",
+        gap: [0, 0, "small"],
+        p: ["4px", "4px", "small"],
         flexShrink: 0,
         ...sx
       }}
diff --git a/packages/editor/src/toolbar/popups/color-picker.tsx b/packages/editor/src/toolbar/popups/color-picker.tsx
index 55f968bd3..835e51107 100644
--- a/packages/editor/src/toolbar/popups/color-picker.tsx
+++ b/packages/editor/src/toolbar/popups/color-picker.tsx
@@ -238,7 +238,12 @@ export function ColorPicker(props: ColorPickerProps) {
           {onClose && (
             <Button
               variant={"icon"}
-              sx={{ display: ["block", "none"], px: 2 }}
+              sx={{
+                display: ["block", "none"],
+                px: 2,
+                width: "50px",
+                alignSelf: "center"
+              }}
               onClick={onClose}
             >
               <Icon path={Icons.close} size="big" />
diff --git a/packages/theme/src/emotion/theme-provider.tsx b/packages/theme/src/emotion/theme-provider.tsx
index e24f14452..9a1f3b2e2 100644
--- a/packages/theme/src/emotion/theme-provider.tsx
+++ b/packages/theme/src/emotion/theme-provider.tsx
@@ -27,6 +27,7 @@ import {
 } from "../";
 import React, { ForwardedRef, PropsWithChildren, useMemo } from "react";
 import { Box, BoxProps } from "@theme-ui/components";
+import { useTheme } from "@emotion/react";
 
 export type EmotionThemeProviderProps = {
   scope?: keyof ThemeScopes;
@@ -44,6 +45,7 @@ function _EmotionThemeProvider(
     className,
     ...restProps
   } = props;
+  const emotionTheme = useTheme();
   const theme = useThemeEngineStore((store) => store.theme);
   const themeScope = useThemeColors(scope);
   const { colors } = themeScope;
@@ -58,7 +60,12 @@ function _EmotionThemeProvider(
   );
 
   return (
-    <ThemeProvider theme={themeProperties}>
+    <ThemeProvider
+      theme={{
+        ...(emotionTheme || themeProperties),
+        colors: themeProperties.colors
+      }}
+    >
       <NNScopedThemeProvider value={scope}>
         {injectCssVars ? (
           <Box