fix: conditional hook and code block styles

storybookjs · Sep 22, 2024 · ac77e37 · ac77e37
1 parent 3947328
commit ac77e37
Showing 1 changed file with 32 additions and 20 deletions.
diff --git a/packages/ondevice-notes/src/components/Notes.tsx b/packages/ondevice-notes/src/components/Notes.tsx
@@ -36,17 +36,6 @@ export const Notes = ({ active, api }: NotesProps) => {
     return () => channel.off(SET_CURRENT_STORY, handleSetCurrentStory);
   }, [api, active]);
 
-  if (!active || !story) {
-    return null;
-  }
-
-  const text: string =
-    story?.parameters && story.parameters[PARAM_KEY] ? story.parameters[PARAM_KEY] : '';
-
-  if (!text) return null;
-
-  const textAfterFormatted: string = text ? text.trim() : '';
-
   const themedMarkdownStyles = useMemo(
     () => ({
       body: {
@@ -55,9 +44,6 @@ export const Notes = ({ active, api }: NotesProps) => {
       hr: {
         backgroundColor: theme.color.defaultText,
       },
-      blockquote: {
-        borderColor: theme.color.defaultText,
-      },
       table: {
         borderColor: theme.color.defaultText,
       },
@@ -66,17 +52,44 @@ export const Notes = ({ active, api }: NotesProps) => {
       },
       blocklink: {
         borderColor: theme.color.defaultText,
-      }
+      },
+      code_inline: {
+        color: theme.color.defaultText,
+        backgroundColor: theme.background.app,
+      },
+      code_block: {
+        color: theme.color.defaultText,
+        backgroundColor: theme.background.app,
+      },
+      fence: {
+        color: theme.color.defaultText,
+        backgroundColor: theme.background.app,
+      },
+      blockquote: {
+        borderColor: theme.color.defaultText,
+        backgroundColor: theme.background.app,
+      },
     }),
-    [theme.color.defaultText]);
+    [theme.color.defaultText, theme.background.app]
+  );
+
+  if (!active || !story) {
+    return null;
+  }
+
+  const text: string =
+    story?.parameters && story.parameters[PARAM_KEY] ? story.parameters[PARAM_KEY] : '';
+
+  if (!text) return null;
+
+  const textAfterFormatted: string = text ? text.trim() : '';
+
   return (
     <View style={styles.container}>
       {textAfterFormatted && (
         <ErrorBoundary>
           {/* @ts-ignore has the wrong types */}
-          <Markdown style={themedMarkdownStyles}>
-            {textAfterFormatted}
-          </Markdown>
+          <Markdown style={themedMarkdownStyles}>{textAfterFormatted}</Markdown>
         </ErrorBoundary>
       )}
     </View>
@@ -86,4 +99,3 @@ export const Notes = ({ active, api }: NotesProps) => {
 const styles = StyleSheet.create({
   container: { flex: 1, padding: 10 },
 });
-