@bitrise/bitkit 12.27.0 → 12.28.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.27.0",
+  "version": "12.28.0",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -35,8 +35,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-focus-lock": "^2.9.1",
-    "react-markdown": "^8.0.7",
-    "rehype-sanitize": "^5.0.1"
+    "react-markdown": "^8.0.7"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { useStyleConfig } from '@chakra-ui/react';
+import Box from '../Box/Box';
+
+const CodeBlock = ({ children }: { children: ReactNode }) => {
+  const css = useStyleConfig('CodeBlock');
+  return (
+    <Box __css={css} as="pre">
+      {children}
+    </Box>
+  );
+};
+
+export default CodeBlock;

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -1,6 +1,5 @@
+import { ComponentProps } from 'react';
 import ReactMarkdown, { Components } from 'react-markdown';
-import rehypeSanitize from 'rehype-sanitize';
-import { Code } from '@chakra-ui/react';
 
 import List from '../List/List';
 import ListItem from '../List/ListItem';
@@ -8,7 +7,7 @@ import Box from '../Box/Box';
 import Divider from '../Divider/Divider';
 import Text from '../Text/Text';
 
-const components: Components = {
+const defaultComponents: Components = {
   h1: ({ node, ...props }) => <Text size="6" {...props} />,
   h2: ({ node, ...props }) => <Text paddingTop="12" size="5" {...props} />,
   h3: ({ node, ...props }) => <Text paddingTop="12" size="4" fontWeight="bold" {...props} />,
@@ -17,7 +16,6 @@ const components: Components = {
   h6: ({ node, ...props }) => <Text paddingTop="12" size="1" fontWeight="bold" {...props} />,
   p: ({ node, ...props }) => <Text {...props} />,
   hr: () => <Divider my="16" borderColor="separator.primary" size="2" />,
-  pre: ({ node, ...props }) => <Code {...props} />,
   ul: ({ node, ordered, ...props }) => <List paddingBottom="8" {...props} />,
   ol: ({ node, ordered, ...props }) => <List paddingBottom="8" isOrdered {...props} />,
   li: ({ node, ordered, ...props }) => <ListItem {...props} />,
@@ -35,10 +33,15 @@ const components: Components = {
     </Box>
   ),
 };
-const NoteMarkdownContent = ({ md }: { md: string }) => {
+type NoteMarkdownContentProps = { md: string } & Pick<
+  ComponentProps<typeof ReactMarkdown>,
+  'components' | 'rehypePlugins'
+>;
+const NoteMarkdownContent = ({ md, components, ...rest }: NoteMarkdownContentProps) => {
+  const extendedComponents = { ...defaultComponents, ...components };
   return (
     <Box display="flex" flexDirection="column" gap="16">
-      <ReactMarkdown rehypePlugins={[rehypeSanitize]} components={components}>
+      <ReactMarkdown components={extendedComponents} {...rest}>
         {md}
       </ReactMarkdown>
     </Box>

package/src/index.ts

@@ -288,3 +288,4 @@ export { default as Tag } from './Components/Tag/Tag';
 
 export { default as Note } from './Components/Note/Note';
 export { default as MarkdownContent } from './Components/Note/NoteMarkdownContent';
+export { default as CodeBlock } from './Components/CodeBlock/CodeBlock';

package/src/theme.ts

@@ -37,7 +37,7 @@ import SidebarItem from './Components/Sidebar/SidebarItem.theme';
 import SegmentedControl from './Components/SegmentedControl/SegmentedControl.theme';
 import Tag from './Components/Tag/Tag.theme';
 import Note from './Components/Note/Note.theme';
-import Code from './Components/Code/Code.theme';
+import CodeBlock from './Components/CodeBlock/CodeBlock.theme';
 
 import breakpoints from './Foundations/Breakpoints/Breakpoints';
 import colors from './Foundations/Colors/Colors';
@@ -122,7 +122,7 @@ const theme = {
     SegmentedControl,
     Tag,
     Note,
-    Code,
+    CodeBlock,
   },
 };