improve styles

hyperglass/ui/components/markdown/elements.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   OrderedList,
   UnorderedList,
   Code as ChakraCode,
@@ -8,24 +9,43 @@ import {
   Heading as ChakraHeading,
   Checkbox as ChakraCheckbox,
   ListItem as ChakraListItem,
+  useToken,
 } from '@chakra-ui/react';
 
-import { TD, TH, Table as ChakraTable } from './table';
-
 import { CodeBlock as CustomCodeBlock, If } from '~/components';
+import { useColorValue } from '~/context';
+import { TD, TH, Table as ChakraTable } from './table';
 
 import type {
   BoxProps,
   TextProps,
   CodeProps,
   LinkProps,
+  ChakraProps,
   HeadingProps,
   DividerProps,
 } from '@chakra-ui/react';
 import type { TCheckbox, TList, THeading, TCodeBlock, TTableData, TListItem } from './types';
 
-export const Checkbox = (props: TCheckbox) => {
-  const { checked, ...rest } = props;
+type MDProps = {
+  node: Dict;
+};
+
+function hasNode<C>(p: any): p is C & MDProps {
+  return 'node' in p;
+}
+
+function clean<P extends ChakraProps>(props: P): P {
+  if (hasNode<P>(props)) {
+    const { node, ...rest } = props;
+    const r = (rest as unknown) as P;
+    return r;
+  }
+  return props;
+}
+
+export const Checkbox = (props: TCheckbox & MDProps) => {
+  const { checked, node, ...rest } = props;
   return <ChakraCheckbox isChecked={checked} {...rest} />;
 };
 
@@ -43,9 +63,13 @@ export const List = (props: TList) => {
   );
 };
 
-export const ListItem = (props: TListItem) => {
-  const { checked, ...rest } = props;
-  return checked ? <Checkbox checked={checked} {...rest} /> : <ChakraListItem {...rest} />;
+export const ListItem = (props: TListItem & MDProps) => {
+  const { checked, node, ...rest } = props;
+  return checked ? (
+    <Checkbox checked={checked} node={node} {...rest} />
+  ) : (
+    <ChakraListItem {...rest} />
+  );
 };
 
 export const Heading = (props: THeading) => {
@@ -60,10 +84,13 @@ export const Heading = (props: THeading) => {
     6: { as: 'h6', size: 'sm', fontWeight: 'bold' },
   } as { [i: number]: HeadingProps };
 
-  return <ChakraHeading {...levelMap[level]} {...rest} />;
+  return <ChakraHeading {...levelMap[level]} {...clean<Omit<THeading, 'level'>>(rest)} />;
 };
 
-export const Link = (props: LinkProps) => <ChakraLink isExternal {...props} />;
+export const Link = (props: LinkProps) => {
+  const color = useColorValue('blue.500', 'blue.300');
+  return <ChakraLink isExternal color={color} {...clean<LinkProps>(props)} />;
+};
 
 export const CodeBlock = (props: TCodeBlock) => <CustomCodeBlock>{props.value}</CustomCodeBlock>;
 
@@ -81,7 +108,21 @@ export const TableData = (props: TTableData) => {
   );
 };
 
-export const Paragraph = (props: TextProps) => <ChakraText {...props} />;
-export const InlineCode = (props: CodeProps) => <ChakraCode children={props.children} />;
-export const Divider = (props: DividerProps) => <ChakraDivider {...props} />;
-export const Table = (props: BoxProps) => <ChakraTable {...props} />;
+export const Paragraph = (props: TextProps) => (
+  <ChakraText
+    my={4}
+    css={{
+      '&:first-of-type': { marginTop: useToken('space', 2) },
+      '&:last-of-type': { marginBottom: 0 },
+    }}
+    {...clean<TextProps>(props)}
+  />
+);
+export const InlineCode = (props: CodeProps) => (
+  <ChakraCode borderRadius="md" px={1} {...clean<CodeProps>(props)} />
+);
+export const Divider = (props: DividerProps) => (
+  <ChakraDivider my={2} {...clean<DividerProps>(props)} />
+);
+export const Table = (props: BoxProps) => <ChakraTable {...clean<BoxProps>(props)} />;
+export const Br = (props: BoxProps) => <Box as="br" m={16} {...clean<BoxProps>(props)} />;