System themes in external editors (#291)

* wip: theme refactor

* fix: merge themes order

* feat: system themes in editors

* chore: remove unused code

ios/Podfile.lock

@@ -337,7 +337,7 @@ PODS:
   - RNVectorIcons (7.1.0):
     - React
   - sn-textview (1.0.0):
-    - React
+    - React-Core
   - SNReactNative (1.0.0):
     - React-Core
   - TrustKit (1.6.3)
@@ -579,7 +579,7 @@ SPEC CHECKSUMS:
   RNSearchBar: 5ed8e13ba8a6c701fbd2afdfe4164493d24b2aee
   RNStoreReview: 62d6afd7c37db711a594bbffca6b0ea3a812b7a8
   RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59
-  sn-textview: f478ee79531da2c7b129c4ea3b20c665e75e1f4b
+  sn-textview: 43135d1feb6e97994b8475b6a1e6e3c902d6b189
   SNReactNative: 3fa6096f78bea7dbd329c897ee854f73666d20db
   TrustKit: a2f0c3a926f0a3ce3c082db9a39f1f540dbb04cb
   Yoga: 3ebccbdd559724312790e7742142d062476b698e

package.json

@@ -54,7 +54,7 @@
     "react-navigation-header-buttons": "^5.0.2",
     "sn-textview": "standardnotes/sn-textview#d62eee0",
     "sncrypto": "standardnotes/sncrypto#5f8cd36",
-    "snjs": "standardnotes/snjs#ebb7a3a",
+    "snjs": "standardnotes/snjs#ebb7a3a2d55e697d356c7bc7dd5a83d028f0e516",
     "standard-notes-rn": "standardnotes/standard-notes-rn#996b016",
     "styled-components": "^5.2.0"
   },

src/App.tsx

@@ -29,7 +29,7 @@ const AppComponent: React.FC<{
   const setStyleKitRef = useCallback((node: StyleKit | undefined) => {
     if (node) {
       node.addThemeChangeObserver(() => {
-        setActiveTheme(node.theme);
+        setActiveTheme(node.variables);
       });
     }
 

src/lib/ComponentManager.ts

@@ -1,7 +1,12 @@
-import { SNAlertService, SNComponentManager } from 'snjs';
+import { MobileTheme } from '@Style/StyleKit';
+import { objectToCss } from '@Style/Util/CSSParser';
+import { Base64 } from 'js-base64';
+import { SNAlertService, SNComponent, SNComponentManager } from 'snjs';
 import { PermissionDialog } from 'snjs/dist/@types/services/component_manager';
 
 export default class ComponentManager extends SNComponentManager {
+  private mobileActiveTheme?: MobileTheme;
+
   async presentPermissionsDialog(dialog: PermissionDialog) {
     const text = `${dialog.component.name} would like to interact with your ${dialog.permissionsString}`;
     const approved = await (this.alertService! as SNAlertService).confirm(
@@ -13,4 +18,29 @@ export default class ComponentManager extends SNComponentManager {
     );
     dialog.callback(approved);
   }
+
+  /** @override */
+  urlForComponent(component: SNComponent) {
+    if (component.isTheme()) {
+      const theme = component as MobileTheme;
+      const cssData = objectToCss(theme.mobileContent.variables);
+      const encoded = Base64.encodeURI(cssData);
+      return `data:text/css;base64,${encoded}`;
+    } else {
+      return super.urlForComponent(component);
+    }
+  }
+
+  public setMobileActiveTheme(theme: MobileTheme) {
+    this.mobileActiveTheme = theme;
+  }
+
+  /** @override */
+  getActiveThemes() {
+    if (this.mobileActiveTheme) {
+      return [this.mobileActiveTheme];
+    } else {
+      return [];
+    }
+  }
 }

src/screens/SideMenu/MainSideMenu.tsx

@@ -3,7 +3,7 @@ import { useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { SCREEN_SETTINGS } from '@Screens/screens';
 import { ICON_BRUSH, ICON_SETTINGS } from '@Style/icons';
-import { StyleKit, StyleKitContext, ThemeContent } from '@Style/StyleKit';
+import { MobileTheme, StyleKit, StyleKitContext } from '@Style/StyleKit';
 import {
   CustomActionSheetOption,
   useCustomActionSheet,
@@ -60,7 +60,7 @@ export const MainSideMenu = ({ drawerRef }: Props): JSX.Element => {
   });
 
   const onSystemThemeSelect = useCallback(
-    async (selectedTheme: ThemeContent) => {
+    async (selectedTheme: MobileTheme) => {
       styleKit?.activateSystemTheme(selectedTheme.uuid);
     },
     [styleKit]
@@ -153,7 +153,7 @@ export const MainSideMenu = ({ drawerRef }: Props): JSX.Element => {
     return unsubscribeStreamThemes;
   }, [application]);
 
-  const iconDescriptorForTheme = (currentTheme: SNTheme | ThemeContent) => {
+  const iconDescriptorForTheme = (currentTheme: SNTheme | MobileTheme) => {
     const desc = {
       type: 'circle',
       side: 'right' as 'right',