@bitrise/bitkit 13.360.0 → 13.361.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.360.0",
+  "version": "13.361.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"

package/src/Components/Note/NoteMarkdownContent.tsx

@@ -8,6 +8,7 @@ import Link from '../Link/Link';
 import List from '../List/List';
 import ListItem from '../List/ListItem';
 import Text from '../Text/Text';
+import codeBlockText from './codeBlockText';
 
 type GapType = Exclude<BoxProps['gap'], undefined>;
 
@@ -44,9 +45,10 @@ const defaultComponents = (size: 'sm' | 'md' | 'lg', gap: GapType = '16'): Compo
     li: ({ node: _, ...props }) => <ListItem {...props} />,
     ol: ({ node: _, ...props }) => <List variant="simple-ordered" {...props} />,
     p: ({ node: _, ...props }) => <Text {...props} />,
-    pre: ({ node: _, ...props }) => (
+    // The parser closes a code block with a newline, which would render as an empty last line.
+    pre: ({ node: _, children }) => (
       <CodeSnippet variant="multi" size={codeSize}>
-        {props.children as string}
+        {codeBlockText(children).replace(/\n$/, '')}
       </CodeSnippet>
     ),
     ul: ({ node: _, ...props }) => <List {...props} />,

package/src/Components/Note/codeBlockText.ts

@@ -0,0 +1,22 @@
+import { Children, isValidElement, ReactNode } from 'react';
+
+/**
+ * Collects the text of a markdown code block.
+ *
+ * A fenced code block arrives as `<pre><code>…</code></pre>`, so the nested `<code>` would also go
+ * through the `code` component of MarkdownContent and wrap the block in an inline CodeSnippet.
+ * Passing the text instead keeps the block a single element, and it is what CodeSnippet's copy
+ * button puts on the clipboard.
+ *
+ * Note that this flattens any markup inside the block, so a rehype plugin that decorates code
+ * (syntax highlighting, for instance) contributes its text but not its elements.
+ */
+export const codeBlockText = (children: ReactNode): string =>
+  // Children.toArray already drops null, undefined and booleans.
+  Children.toArray(children)
+    .map((child) =>
+      isValidElement<{ children?: ReactNode }>(child) ? codeBlockText(child.props.children) : String(child),
+    )
+    .join('');
+
+export default codeBlockText;