feat(YDBSyntaxHighlighter): separate component, load languages on demand

src/components/ConnectToDB/ConnectToDBDialog.tsx

@@ -5,8 +5,8 @@ import {Dialog, Tabs} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {LinkWithIcon} from '../LinkWithIcon/LinkWithIcon';
+import {YDBSyntaxHighlighterLazy} from '../SyntaxHighlighter/lazy';
 
-import {ConnectToDBSyntaxHighlighterLazy} from './ConnectToDBSyntaxHighlighter/lazy';
 import {getDocsLink} from './getDocsLink';
 import i18n from './i18n';
 import {getSnippetCode} from './snippets';
@@ -52,7 +52,12 @@ function ConnectToDBDialog({open, onClose, database, endpoint}: ConnectToDBDialo
                     className={b('dialog-tabs')}
                 />
                 <div className={b('snippet-container')}>
-                    <ConnectToDBSyntaxHighlighterLazy language={activeTab} text={snippet} />
+                    <YDBSyntaxHighlighterLazy
+                        language={activeTab}
+                        text={snippet}
+                        transparentBackground={false}
+                        withCopy
+                    />
                 </div>
                 {docsLink ? (
                     <LinkWithIcon

src/components/ConnectToDB/i18n/en.json

@@ -5,7 +5,6 @@
   "documentation": "Documentation",
 
   "close": "Close",
-  "copy": "Copy",
 
   "docs_bash": "https://ydb.tech/docs/en/concepts/connect",
   "docs_cpp": "https://ydb.tech/docs/en/dev/example-app/example-cpp",

src/components/ConnectToDB/ConnectToDBSyntaxHighlighter/ConnectToDBSyntaxHighlighter.scss → src/components/SyntaxHighlighter/YDBSyntaxHighlighter.scss

@@ -1,12 +1,10 @@
-@use '../../../styles/mixins.scss';
+@use '../../styles/mixins.scss';
 
-.ydb-connect-to-db-syntax-highlighter {
-    &__wrapper {
-        position: relative;
-        z-index: 0;
+.ydb-syntax-highlighter {
+    position: relative;
+    z-index: 0;
 
-        height: 100%;
-    }
+    height: 100%;
 
     &__sticky-container {
         z-index: 1;

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import {ClipboardButton} from '@gravity-ui/uikit';
+import {nanoid} from '@reduxjs/toolkit';
+import {PrismLight as ReactSyntaxHighlighter} from 'react-syntax-highlighter';
+
+import i18n from './i18n';
+import {b} from './shared';
+import {useSyntaxHighlighterStyle} from './themes';
+import type {Language} from './types';
+import {yql} from './yql';
+
+import './YDBSyntaxHighlighter.scss';
+
+async function registerLanguage(lang: Language) {
+    if (lang === 'yql') {
+        ReactSyntaxHighlighter.registerLanguage('yql', yql);
+    } else {
+        const {default: syntax} = await import(
+            `react-syntax-highlighter/dist/esm/languages/prism/${lang}`
+        );
+        ReactSyntaxHighlighter.registerLanguage(lang, syntax);
+    }
+}
+
+type YDBSyntaxHighlighterProps = {
+    text: string;
+    language: Language;
+    className?: string;
+    transparentBackground?: boolean;
+    withCopy?: boolean;
+};
+
+export function YDBSyntaxHighlighter({
+    text,
+    language,
+    className,
+    transparentBackground = true,
+    withCopy,
+}: YDBSyntaxHighlighterProps) {
+    const [highlighterKey, setHighlighterKey] = React.useState('');
+
+    const style = useSyntaxHighlighterStyle(transparentBackground);
+
+    React.useEffect(() => {
+        async function registerLangAndUpdateKey() {
+            await registerLanguage(language);
+            setHighlighterKey(nanoid());
+        }
+        registerLangAndUpdateKey();
+    }, [language]);
+
+    const renderCopyButton = () => {
+        if (withCopy) {
+            return (
+                <div className={b('sticky-container')}>
+                    <ClipboardButton
+                        view="flat-secondary"
+                        size="s"
+                        className={b('copy')}
+                        text={text}
+                    >
+                        {i18n('copy')}
+                    </ClipboardButton>
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    return (
+        <div className={b(null, className)}>
+            {renderCopyButton()}
+
+            <ReactSyntaxHighlighter
+                key={highlighterKey}
+                language={language}
+                style={style}
+                customStyle={{height: '100%'}}
+            >
+                {text}
+            </ReactSyntaxHighlighter>
+        </div>
+    );
+}

src/components/SyntaxHighlighter/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "copy": "Copy"
+}

src/components/SyntaxHighlighter/i18n/index.ts

@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-syntax-highlighter';
+
+export default registerKeysets(COMPONENT, {en});

src/components/SyntaxHighlighter/lazy.ts

@@ -0,0 +1,6 @@
+import {lazyComponent} from '../../utils/lazyComponent';
+
+export const YDBSyntaxHighlighterLazy = lazyComponent(
+    () => import('./YDBSyntaxHighlighter'),
+    'YDBSyntaxHighlighter',
+);

src/components/SyntaxHighlighter/shared.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../utils/cn';
+
+export const b = cn('ydb-syntax-highlighter');

src/components/SyntaxHighlighter/themes.ts

@@ -0,0 +1,123 @@
+import {useThemeValue} from '@gravity-ui/uikit';
+import {materialLight, vscDarkPlus} from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+export const lightTransparent = {
+    ...materialLight,
+    'pre[class*="language-"]': {
+        ...materialLight['pre[class*="language-"]'],
+        background: 'transparent',
+        margin: 0,
+    },
+    'code[class*="language-"]': {
+        ...materialLight['code[class*="language-"]'],
+        background: 'transparent',
+        color: 'var(--g-color-text-primary)',
+        whiteSpace: 'pre-wrap' as const,
+    },
+    comment: {
+        color: '#969896',
+    },
+    string: {
+        color: '#a31515',
+    },
+    tablepath: {
+        color: '#338186',
+    },
+    function: {
+        color: '#7a3e9d',
+    },
+    udf: {
+        color: '#7a3e9d',
+    },
+    type: {
+        color: '#4d932d',
+    },
+    boolean: {
+        color: '#608b4e',
+    },
+    constant: {
+        color: '#608b4e',
+    },
+    variable: {
+        color: '#001188',
+    },
+};
+
+export const darkTransparent = {
+    ...vscDarkPlus,
+    'pre[class*="language-"]': {
+        ...vscDarkPlus['pre[class*="language-"]'],
+        background: 'transparent',
+        margin: 0,
+    },
+    'code[class*="language-"]': {
+        ...vscDarkPlus['code[class*="language-"]'],
+        background: 'transparent',
+        color: 'var(--g-color-text-primary)',
+        whiteSpace: 'pre-wrap' as const,
+    },
+    comment: {
+        color: '#969896',
+    },
+    string: {
+        color: '#ce9178',
+    },
+    tablepath: {
+        color: '#338186',
+    },
+    function: {
+        color: '#9e7bb0',
+    },
+    udf: {
+        color: '#9e7bb0',
+    },
+    type: {
+        color: '#6A8759',
+    },
+    boolean: {
+        color: '#608b4e',
+    },
+    constant: {
+        color: '#608b4e',
+    },
+    variable: {
+        color: '#74b0df',
+    },
+};
+
+const dark: Record<string, React.CSSProperties> = {
+    ...darkTransparent,
+    'pre[class*="language-"]': {
+        ...darkTransparent['pre[class*="language-"]'],
+        background: vscDarkPlus['pre[class*="language-"]'].background,
+        scrollbarColor: `var(--g-color-scroll-handle) transparent`,
+    },
+    'code[class*="language-"]': {
+        ...darkTransparent['code[class*="language-"]'],
+        whiteSpace: 'pre',
+    },
+};
+
+const light: Record<string, React.CSSProperties> = {
+    ...lightTransparent,
+    'pre[class*="language-"]': {
+        ...lightTransparent['pre[class*="language-"]'],
+        background: 'var(--g-color-base-misc-light)',
+        scrollbarColor: `var(--g-color-scroll-handle) transparent`,
+    },
+    'code[class*="language-"]': {
+        ...lightTransparent['code[class*="language-"]'],
+        whiteSpace: 'pre',
+    },
+};
+
+export function useSyntaxHighlighterStyle(transparentBackground?: boolean) {
+    const themeValue = useThemeValue();
+    const isDark = themeValue === 'dark' || themeValue === 'dark-hc';
+
+    if (transparentBackground) {
+        return isDark ? darkTransparent : lightTransparent;
+    }
+
+    return isDark ? dark : light;
+}

src/components/SyntaxHighlighter/types.ts

@@ -0,0 +1,10 @@
+export type Language =
+    | 'bash'
+    | 'cpp'
+    | 'csharp'
+    | 'go'
+    | 'java'
+    | 'javascript'
+    | 'php'
+    | 'python'
+    | 'yql';