fix: improve component editors

src/screens/Compose/ComponentView.styled.ts

@@ -1,10 +1,11 @@
 import { ICON_LOCK } from '@Style/icons';
 import { StyleKit } from '@Style/StyleKit';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/Ionicons';
 import WebView from 'react-native-webview';
 import styled from 'styled-components/native';
 
-export const FlexContainer = styled.View`
+export const FlexContainer = styled(SafeAreaView)`
   flex: 1;
   background-color: ${({ theme }) => theme.stylekitBackgroundColor};
 `;

src/screens/Compose/ComponentView.tsx

@@ -197,13 +197,6 @@ export const ComponentView = ({
     })()`;
   };
 
-  // const setRef = ref => {
-  //   if (ref) {
-  //     console.log(ref);
-  //     webViewRef.current = { postMessage: ref.postMessage };
-  //   }
-  // };
-
   return (
     <FlexContainer>
       {liveComponent?.item.valid_until &&

src/screens/Compose/Compose.tsx

@@ -23,6 +23,7 @@ import {
   ContentType,
   isPayloadSourceRetrieved,
   NoteMutator,
+  PayloadSource,
   Platform,
   SNComponent,
   SNNote,
@@ -222,7 +223,6 @@ export const Compose = (): JSX.Element => {
       /** Same editor, no change */
       return { updatedEditor: associatedEditor, changed: false };
     }
-
     await application?.componentGroup.activateComponent(associatedEditor);
     return { updatedEditor: associatedEditor, changed: true };
   }, [application, editorComponent, note]);
@@ -302,12 +302,20 @@ export const Compose = (): JSX.Element => {
     const removeEditorNoteValueChangeObserver = editor?.addNoteValueChangeObserver(
       (newNote, source) => {
         if (isPayloadSourceRetrieved(source!)) {
-          setNote(newNote);
+          if (
+            !editorComponent ||
+            (editorComponent && source !== PayloadSource.ComponentRetrieved)
+          ) {
+            setNote(newNote);
+          }
+
           setTitle(newNote.title);
           setNoteText(newNote.text);
         }
         if (newNote.locked !== note?.locked) {
-          setNote(newNote);
+          if (note) {
+            setNote(newNote);
+          }
         }
         if (newNote.lastSyncBegan && newNote.lastSyncEnd) {
           if (
@@ -330,6 +338,8 @@ export const Compose = (): JSX.Element => {
     };
   }, [
     editor,
+    editorComponent,
+    note,
     note?.locked,
     setStatus,
     showAllChangesSavedStatus,

src/screens/Notes/NoteList.tsx

@@ -108,7 +108,6 @@ export const NoteList = (props: Props): JSX.Element => {
         renderTags={renderTags}
         // options={props.options}
         highlighted={item.uuid === props.selectedNoteId}
-        // handleAction={props.handleAction}
       />
     );
   };
@@ -158,11 +157,12 @@ export const NoteList = (props: Props): JSX.Element => {
             keyboardDismissMode={'interactive'}
             keyboardAppearance={styleKit?.keyboardColorForActiveTheme()}
             inputBorderRadius={4}
+            tintColorSearch={theme.stylekitForegroundColor}
             inputStyle={[
               styles.androidSearch,
               {
                 backgroundColor: theme.stylekitContrastBackgroundColor,
-                color: theme.stylekitForegroundColor,
+                // color: theme.stylekitForegroundColor,
               },
             ]}
           />

src/screens/SideMenu/NoteSideMenu.tsx

@@ -31,6 +31,7 @@ import {
   ComponentMutator,
   ContentType,
   NoteMutator,
+  PayloadSource,
   SNComponent,
   SNNote,
   SNSmartTag,
@@ -106,9 +107,11 @@ export const NoteSideMenu = (props: Props) => {
       }
     );
     const removeEditorNoteValueChangeObserver = editor?.addNoteValueChangeObserver(
-      newNote => {
+      (newNote, source) => {
         if (mounted) {
-          setNote(newNote);
+          if (source !== PayloadSource.ComponentRetrieved) {
+            setNote(newNote);
+          }
         }
       }
     );
@@ -121,6 +124,7 @@ export const NoteSideMenu = (props: Props) => {
   }, [editor]);
 
   useEffect(() => {
+    let isMounted = true;
     const removeComponentsObserver = application?.streamItems(
       ContentType.Component,
       async () => {
@@ -130,12 +134,16 @@ export const NoteSideMenu = (props: Props) => {
         const displayComponents = sortAlphabetically(
           application!.componentManager!.componentsForArea(ComponentArea.Editor)
         );
-
-        setComponents(displayComponents);
+        if (isMounted) {
+          setComponents(displayComponents);
+        }
       }
     );
 
-    return removeComponentsObserver;
+    return () => {
+      isMounted = false;
+      removeComponentsObserver && removeComponentsObserver();
+    };
   }, [application, note]);
 
   const disassociateComponentWithCurrentNote = useCallback(
@@ -170,9 +178,7 @@ export const NoteSideMenu = (props: Props) => {
         note!
       );
       if (!component) {
-        console.log('plain click', note?.prefersPlainEditor);
         if (!note?.prefersPlainEditor) {
-          console.log('prefers plain');
           await application?.changeItem(note!.uuid, mutator => {
             const noteMutator = mutator as NoteMutator;
             noteMutator.prefersPlainEditor = true;