Common markdown component with common styling

src/components/DevRefPage.tsx

@@ -53,7 +53,7 @@ export const DevRefPage = ({ open, onClose }: DevRefPageProps) => {
   return (
     <MarkdownPage
       title={i18n.get("Developer Reference")}
-      text={text}
+      text={text || ""}
       open={open}
       onClose={onClose}
     />

src/components/LegalAgreementDialog.tsx

@@ -25,7 +25,6 @@
 import { useContext, useEffect, useState } from "react";
 import { Store } from "redux";
 import { ReactReduxContext } from "react-redux";
-import Markdown from "react-markdown";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
@@ -36,8 +35,9 @@ import CircularProgress from "@mui/material/CircularProgress";
 import CheckIcon from "@mui/icons-material/Check";
 
 import i18n from "@/i18n";
-import { ControlState } from "@/states/controlState";
 import { makeStyles } from "@/util/styles";
+import { ControlState } from "@/states/controlState";
+import Markdown from "@/components/Markdown";
 
 const styles = makeStyles({
   icon: (theme) => ({
@@ -108,7 +108,7 @@ export default function LegalAgreementDialog({
           {markdownText === null ? (
             <CircularProgress />
           ) : (
-            <Markdown children={markdownText} linkTarget="_blank" />
+            <Markdown text={markdownText} />
           )}
         </DialogContentText>
       </DialogContent>

src/components/Markdown.tsx

@@ -0,0 +1,67 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2019-2024 by the xcube development team and contributors.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+ * of the Software, and to permit persons to whom the Software is furnished to do
+ * so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useMemo } from "react";
+import { useTheme } from "@mui/material";
+import OriginalMarkdown from "react-markdown";
+
+interface MarkdownProps {
+  text?: string;
+}
+
+export default function Markdown({ text }: MarkdownProps) {
+  const theme = useTheme();
+  const components = useMemo(
+    () => ({
+      a: (props: Record<string, unknown>) => {
+        const { node: _, ...rest } = props;
+        return (
+          <a
+            {...rest}
+            style={{
+              color: theme.palette.mode === "dark" ? "#90caf9" : "#1e90ff",
+            }}
+          />
+        );
+      },
+      code: (props: Record<string, unknown>) => {
+        const { node: _, ...rest } = props;
+        return <code {...rest} style={{ color: "grey" }} />;
+      },
+    }),
+    [theme],
+  );
+
+  if (!text) {
+    return null;
+  }
+
+  return (
+    <OriginalMarkdown
+      children={text}
+      components={components}
+      linkTarget="_blank"
+    />
+  );
+}

src/components/MarkdownPage.tsx

@@ -23,7 +23,6 @@
  */
 
 import React from "react";
-import Markdown from "react-markdown";
 import Dialog from "@mui/material/Dialog";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
@@ -36,6 +35,7 @@ import { TransitionProps } from "@mui/material/transitions";
 
 import { makeStyles } from "@/util/styles";
 import { styled } from "@mui/system";
+import Markdown from "@/components/Markdown";
 
 const styles = makeStyles({
   dialog: (theme) => ({
@@ -104,7 +104,7 @@ const MarkdownPage: React.FC<MarkdownPageProps> = ({
       </AppBar>
       <DialogContent sx={styles.dialog}>
         <StyledDiv>
-          <Markdown children={text} linkTarget="_blank" />
+          <Markdown text={text} />
         </StyledDiv>
       </DialogContent>
     </Dialog>

src/components/MarkdownPopover.tsx

@@ -22,10 +22,10 @@
  * SOFTWARE.
  */
 
-import Markdown from "react-markdown";
 import Popover from "@mui/material/Popover";
 import Paper from "@mui/material/Paper";
-import { useTheme } from "@mui/material";
+
+import Markdown from "@/components/Markdown";
 
 interface MarkdownPopoverProps {
   anchorEl: HTMLElement | null;
@@ -40,29 +40,9 @@ export default function MarkdownPopover({
   open,
   onClose,
 }: MarkdownPopoverProps) {
-  const theme = useTheme();
   if (!markdownText) {
     return null;
   }
-
-  const components = {
-    a: (props: Record<string, unknown>) => {
-      const { node: _, ...rest } = props;
-      return (
-        <a
-          {...rest}
-          style={{
-            color: theme.palette.mode === "dark" ? "#90caf9" : "#1e90ff",
-          }}
-        />
-      );
-    },
-    code: (props: Record<string, unknown>) => {
-      const { node: _, ...rest } = props;
-      return <code {...rest} style={{ color: "green" }} />;
-    },
-  };
-
   return (
     <Popover anchorEl={anchorEl} open={open} onClose={onClose}>
       <Paper
@@ -74,11 +54,7 @@ export default function MarkdownPopover({
           paddingRight: 2,
         }}
       >
-        <Markdown
-          children={markdownText}
-          components={components}
-          linkTarget="_blank"
-        />
+        <Markdown text={markdownText} />
       </Paper>
     </Popover>
   );

src/resources/config.json

@@ -25,6 +25,7 @@
     "allowRefresh": true,
     "allowSharing": true,
     "allowUserVariables": true,
+    "allowViewModePython": true,
     "allow3D": true
   }
 }