mobile: fix editor

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;

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

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

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

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>
   );

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}

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

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" />

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