play with some markdown content

apps/exhibition-live/components/form/show/EntityDetailCard.tsx

@@ -20,20 +20,10 @@ import { useSettings } from "../../state/useLocalSettings";
 import NiceModal from "@ebay/nice-modal-react";
 import { EditEntityModal } from "../edit/EditEntityModal";
 import { useModalRegistry } from "../../state";
+import { EntityDetailCardProps } from "./EntityDetailCardProps";
+import { StylizedDetailCard } from "./StylizedDetailCard";
 
-interface OwnProps {
-  typeIRI: string;
-  entityIRI: string;
-  cardInfo: PrimaryFieldResults<string>;
-  cardActionChildren?: React.ReactNode;
-  data: any;
-  readonly?: boolean;
-  inlineEditing?: boolean;
-  onEditClicked?: () => void;
-}
-
-type Props = OwnProps;
-export const EntityDetailCard: FunctionComponent<Props> = ({
+export const EntityDetailCard: FunctionComponent<EntityDetailCardProps> = ({
   typeIRI,
   entityIRI,
   cardInfo,
@@ -42,6 +32,7 @@ export const EntityDetailCard: FunctionComponent<Props> = ({
   readonly,
   inlineEditing,
   onEditClicked,
+  tableProps = {},
 }) => {
   const { t } = useTranslation();
 
@@ -78,45 +69,55 @@ export const EntityDetailCard: FunctionComponent<Props> = ({
 
   return (
     <>
-      <Card>
-        <CardActionArea>
-          {cardInfo.image && (
-            <CardMedia
-              component="img"
-              sx={{ maxHeight: "24em", objectFit: "contain" }}
-              image={cardInfo.image}
-              alt={cardInfo.label}
-            />
-          )}
-          <CardContent>
-            <Typography gutterBottom variant="h5" component="div">
-              {cardInfo.label}
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              {cardInfo.description}
-            </Typography>
-          </CardContent>
-        </CardActionArea>
-        {cardActionChildren !== null && (
-          <CardActions>
-            {typeof cardActionChildren !== "undefined" ? (
-              cardActionChildren
-            ) : (
-              <>
-                {!readonly && (
-                  <Button size="small" color="primary" onClick={editEntry}>
-                    {inlineEditing ? t("edit inline") : t("edit")}
-                  </Button>
-                )}
-              </>
+      {cardInfo.image && cardInfo.description ? (
+        <StylizedDetailCard
+          typeIRI={typeIRI}
+          entityIRI={entityIRI}
+          cardInfo={cardInfo}
+          data={data}
+        />
+      ) : (
+        <Card>
+          <CardActionArea>
+            {cardInfo.image && (
+              <CardMedia
+                component="img"
+                sx={{ maxHeight: "24em", objectFit: "contain" }}
+                image={cardInfo.image}
+                alt={cardInfo.label}
+              />
             )}
-          </CardActions>
-        )}
-      </Card>
+            <CardContent>
+              <Typography gutterBottom variant="h5" component="div">
+                {cardInfo.label}
+              </Typography>
+              <Typography variant="body2" color="text.secondary">
+                {cardInfo.description}
+              </Typography>
+            </CardContent>
+          </CardActionArea>
+          {cardActionChildren !== null && (
+            <CardActions>
+              {typeof cardActionChildren !== "undefined" ? (
+                cardActionChildren
+              ) : (
+                <>
+                  {!readonly && (
+                    <Button size="small" color="primary" onClick={editEntry}>
+                      {inlineEditing ? t("edit inline") : t("edit")}
+                    </Button>
+                  )}
+                </>
+              )}
+            </CardActions>
+          )}
+        </Card>
+      )}
       <LobidAllPropTable
         allProps={data}
         disableContextMenu
         inlineEditing={true}
+        {...tableProps}
       />
       {enableDebug && (
         <>

apps/exhibition-live/components/form/show/EntityDetailCardProps.ts

@@ -0,0 +1,17 @@
+import { PrimaryFieldResults } from "../../utils/types";
+import React from "react";
+import { AllPropTableProps } from "../lobid/LobidAllPropTable";
+
+type OwnProps = {
+  typeIRI: string;
+  entityIRI: string;
+  cardInfo: PrimaryFieldResults<string>;
+  cardActionChildren?: React.ReactNode;
+  data: any;
+  readonly?: boolean;
+  inlineEditing?: boolean;
+  onEditClicked?: () => void;
+  tableProps?: Partial<AllPropTableProps>;
+};
+
+export type EntityDetailCardProps = OwnProps;

apps/exhibition-live/components/form/show/EntityDetailElement.tsx

@@ -12,6 +12,7 @@ import { EntityDetailCard } from "./EntityDetailCard";
 import { useTypeIRIFromEntity } from "../../state";
 import { useTranslation } from "next-i18next";
 import { PrimaryField } from "@slub/edb-core-types";
+import { filterUndefOrNull } from "@slub/edb-core-utils";
 
 type EntityDetailElementProps = {
   typeIRI: string | undefined;
@@ -47,16 +48,24 @@ export const EntityDetailElement = ({
   );
   const { t } = useTranslation();
   const data = initialData || rawData?.document;
+  const fieldDeclaration = useMemo(
+    () => primaryFields[typeName] as PrimaryField,
+    [typeName],
+  );
   const cardInfo = useMemo<PrimaryFieldResults<string>>(() => {
-    const fieldDecl = primaryFields[typeName] as PrimaryField | undefined;
-    if (data && fieldDecl)
-      return applyToEachField(data, fieldDecl, extractFieldIfString);
+    if (data && fieldDeclaration)
+      return applyToEachField(data, fieldDeclaration, extractFieldIfString);
     return {
       label: null,
       description: null,
       image: null,
     };
-  }, [typeName, data]);
+  }, [fieldDeclaration, data]);
+
+  const disabledProperties = useMemo(
+    () => filterUndefOrNull(Object.values(fieldDeclaration)),
+    [fieldDeclaration],
+  );
 
   return (
     <Box sx={{ p: 2, ...(rest.sx || {}) }} {...rest}>
@@ -68,6 +77,7 @@ export const EntityDetailElement = ({
         cardActionChildren={cardActionChildren}
         inlineEditing={inlineEditing}
         readonly={readonly}
+        tableProps={{ disabledProperties }}
       />
     </Box>
   );

apps/exhibition-live/components/form/show/MarkdownContent.tsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import { useRemark } from "react-remark";
+import { Container } from "@mui/material";
+
+export type MarkdownContentProps = {
+  mdDocument: string;
+};
+const MarkdownContent = ({ mdDocument }: MarkdownContentProps) => {
+  const [reactContent, setMarkdownSource] = useRemark();
+
+  useEffect(() => {
+    setMarkdownSource(mdDocument);
+  }, [mdDocument]);
+
+  return <Container>{reactContent}</Container>;
+};
+
+export default MarkdownContent;

apps/exhibition-live/components/form/show/MarkdownContentNoSSR.tsx

@@ -0,0 +1,13 @@
+import dynamic from "next/dynamic";
+
+const DynamicComponentWithNoSSR = dynamic(() => import("./MarkdownContent"), {
+  ssr: false,
+});
+
+export type MarkdownContentProps = {
+  mdDocument: string;
+};
+
+export default (props: MarkdownContentProps) => (
+  <DynamicComponentWithNoSSR {...props} />
+);