@apify/ui-library 0.81.2-fixsimplemarkdownmargin-d4806f.1 → 0.82.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.81.2-fixsimplemarkdownmargin-d4806f.1+ab7720a21b8",
+    "version": "0.82.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -58,7 +58,7 @@
         "@types/react": "^18.2.74",
         "@types/styled-components": "^5.1.34",
         "eslint-plugin-react": "^7.32.2",
-        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-sonarjs": "^1.0.3",
         "recast": "^0.23.9",
         "style-dictionary": "^4.4.0",
@@ -69,5 +69,5 @@
         "src",
         "style"
     ],
-    "gitHead": "ab7720a21b8a0e09071c800450cd89b2c12e139c"
+    "gitHead": "785557421fddb4de7a2dfcc66d0bfa1018d1327e"
 }

package/src/components/code/code_block/code_block.tsx

@@ -202,7 +202,7 @@ export const CodeBlock = ({
                 code={currentCode}
                 linePrefixes={linePrefixes}
                 highlightLines={currentHighlightLines}
-                language={currentLanguage || 'text'}
+                language={currentLanguage}
                 size={size}
                 ref={syntaxHighlighterRef}
                 isSingleLine={false}

package/src/components/code/prism_highlighter.tsx

@@ -3,7 +3,7 @@ import _ from 'lodash';
 import type { HighlightProps } from 'prism-react-renderer';
 import { Highlight, Prism, themes } from 'prism-react-renderer';
 import type { ReactNode } from 'react';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
@@ -46,6 +46,39 @@ const loadLanguages = async () => {
 
 void loadLanguages();
 
+/**
+ * Detects the language of the code based on common keywords. We need it for user-generated content
+ * @param code The code to analyze.
+ */
+const useDetectedLanguage = (code: string, passedLanguage?: string) => useMemo(() => {
+    if (passedLanguage) return passedLanguage;
+    const tests = [
+        { lang: 'rust', keywords: ['fn main()', 'let mut', 'println!', 'pub struct', 'use std::'] },
+        { lang: 'http', keywords: ['GET /', 'POST /', 'HTTP/1.1', 'Host:', 'Content-Type:'] },
+        { lang: 'bash', keywords: ['#!/bin/bash', 'echo ', 'cd ', 'ls'] },
+        { lang: 'markup', keywords: ['<div', '<span', '<html', '<!DOCTYPE', '</'] },
+        { lang: 'xml-doc', keywords: ['<?xml', '<doc', '<summary', '</doc>'] },
+        { lang: 'yaml', keywords: ['version:', 'services:', 'name:'] },
+        { lang: 'docker', keywords: ['FROM ', 'RUN ', 'CMD ', 'ENTRYPOINT', 'EXPOSE'] },
+        { lang: 'python', keywords: ['def ', 'import ', 'print(', 'self', 'None'] },
+        { lang: 'javascript', keywords: ['function', 'const', 'let', '=>', 'console.log', 'var'] },
+        { lang: 'typescript', keywords: ['interface ', 'type ', ': string', ': number', 'as const'] },
+    ];
+
+    const scored = tests.map((test) => {
+        let score = 0;
+        for (const kw of test.keywords) {
+            if (code.includes(kw)) score += 1;
+        }
+        return { lang: test.lang, score };
+    });
+
+    const max = _.maxBy(scored, 'score');
+
+    if (max?.score && max.score > 0) return max.lang;
+    return undefined;
+}, [code, passedLanguage]);
+
 type PreWrapperProps = {
     $hasLinePrefixes: boolean,
     $isSingleLine: boolean
@@ -146,7 +179,7 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
     size = 'regular',
     linePrefixes = {},
     highlightLines = [],
-    language = 'javascript',
+    language,
     className,
     isSingleLine,
     ...rest
@@ -155,10 +188,12 @@ export const PrismSyntaxHighlighter = forwardRef<HTMLPreElement, SyntaxHighlight
     const hasLinePrefixes = !_.isEmpty(linePrefixes);
     const highlightedLinesObject = useRef<Record<number, boolean>>(Object.fromEntries(highlightLines.map((e) => [e, true])));
 
+    const effectiveLanguage = useDetectedLanguage(rest.code || '', language) ?? 'javascript';
+
     return (
         <Highlight
             theme={uiTheme === 'DARK' ? themes.nightOwl : themes.oneLight}
-            language={language}
+            language={effectiveLanguage}
             {...rest}
         >
             {({ className: prismClassName, tokens, getLineProps, getTokenProps }) => (

package/src/components/simple_markdown/simple_markdown.tsx

@@ -15,7 +15,9 @@ import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
 import { Box } from '../box.js';
 import { isUrlExternal } from '../link.js';
 import { cleanMarkdown } from '../readme_renderer/utils.js';
-import { Heading, HeadingContent, Text, TextContent } from '../text/index.js';
+import { HeadingContent } from '../text/heading_content.js';
+import { Heading, Text } from '../text/index.js';
+import { TextContent } from '../text/text_content.js';
 import {
     MarkdownBlockQuote,
     MarkdownCode,
@@ -110,12 +112,12 @@ export const defaultRemarkPlugins = [remarkGfm];
 
 // TODO: Add Image component
 const regularMarkdownSizeComponents: Components = {
-    h1: ({ children }) => <HeadingContent mb='space16' type='heading1'>{children}</HeadingContent>,
-    h2: ({ children }) => <HeadingContent mb='space16' type='heading2'>{children}</HeadingContent>,
-    h3: ({ children }) => <HeadingContent mb='space16' type='heading3'>{children}</HeadingContent>,
-    h4: ({ children }) => <HeadingContent mb='space16' type='heading4'>{children}</HeadingContent>,
-    h5: ({ children }) => <HeadingContent mb='space16' type='heading5'>{children}</HeadingContent>,
-    h6: ({ children }) => <HeadingContent mb='space16' type='heading6'>{children}</HeadingContent>,
+    h1: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading1'>{children}</HeadingContent>,
+    h2: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading2'>{children}</HeadingContent>,
+    h3: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading3'>{children}</HeadingContent>,
+    h4: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading4'>{children}</HeadingContent>,
+    h5: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading5'>{children}</HeadingContent>,
+    h6: ({ children }) => <HeadingContent mt='space32' mb='space16' type='heading6'>{children}</HeadingContent>,
     p: ({ children }) => (<TextContent my='space16'>{children}</TextContent>),
     strong: ({ children }) => <TextContent as='strong' weight='bold'>{children}</TextContent>,
     b: ({ children }) => <TextContent as='b' weight='bold'>{children}</TextContent>,
@@ -130,12 +132,12 @@ const regularMarkdownSizeComponents: Components = {
 };
 
 const smallMarkdownSizeComponents: Components = {
-    h1: ({ children }) => <Heading mb='space16' type='title2xl'>{children}</Heading>,
-    h2: ({ children }) => <Heading mb='space16' type='titleXl'>{children}</Heading>,
-    h3: ({ children }) => <Heading mb='space16' type='titleL'>{children}</Heading>,
-    h4: ({ children }) => <Heading mb='space16' type='titleM'>{children}</Heading>,
-    h5: ({ children }) => <Heading mb='space16' type='titleS'>{children}</Heading>,
-    h6: ({ children }) => <Heading mb='space16' type='titleXs'>{children}</Heading>,
+    h1: ({ children }) => <Heading mt='space32' mb='space16' type='title2xl'>{children}</Heading>,
+    h2: ({ children }) => <Heading mt='space32' mb='space16' type='titleXl'>{children}</Heading>,
+    h3: ({ children }) => <Heading mt='space32' mb='space16' type='titleL'>{children}</Heading>,
+    h4: ({ children }) => <Heading mt='space32' mb='space16' type='titleM'>{children}</Heading>,
+    h5: ({ children }) => <Heading mt='space32' mb='space16' type='titleS'>{children}</Heading>,
+    h6: ({ children }) => <Heading mt='space32' mb='space16' type='titleXs'>{children}</Heading>,
     p: ({ children }) => (<Text my='space16'>{children}</Text>),
     strong: ({ children }) => <Text as='strong' weight='bold'>{children}</Text>,
     b: ({ children }) => <Text as='b' weight='bold'>{children}</Text>,