fix(CodeSnippetBlock): prevent text from inheriting font styles from the theme

packages/code-snippet-block/src/CodeSnippetBlock.tsx

@@ -7,22 +7,22 @@ import { merge } from '@frontify/fondue/rte';
 import { type BlockProps, radiusStyleMap, setAlpha, toRgbaString } from '@frontify/guideline-blocks-settings';
 import './styles.css';
 import { StyleProvider } from '@frontify/guideline-blocks-shared';
-import { langs } from '@uiw/codemirror-extensions-langs';
 import * as themes from '@uiw/codemirror-themes-all';
-import CodeMirror, { type Extension } from '@uiw/react-codemirror';
+import CodeMirror from '@uiw/react-codemirror';
 import debounce from 'lodash-es/debounce';
 import { type FC, useEffect, useMemo, useState } from 'react';
 
 import { DEFAULT_BORDER_COLOR } from './constants';
 import { headerThemes } from './headerThemes';
+import { useCodeMirrorExtensions } from './hooks/useCodeMirrorExtensions';
 import { type Language, type Settings, languageNameMap } from './types';
 
 export const CodeSnippetBlock: FC<BlockProps> = ({ appBridge }) => {
     const [blockSettings, setBlockSettings] = useBlockSettings<Settings>(appBridge);
     const isEditing = useEditorState(appBridge);
     const [contentValue] = useState(blockSettings.content);
     const [selectedLanguage, setSelectedLanguage] = useState(blockSettings.language ?? 'plain');
-    const extensions = [] as Extension[];
+    const extensions = useCodeMirrorExtensions(selectedLanguage);
     const [isCopied, setIsCopied] = useState(false);
     const [isCopyTooltipOpen, setIsCopyTooltipOpen] = useState(false);
     const labelId = useMemo(() => `${appBridge.context('blockId').get()}-header`, [appBridge]);
@@ -62,18 +62,6 @@ export const CodeSnippetBlock: FC<BlockProps> = ({ appBridge }) => {
             </>
         );
 
-    const getCurrentLanguageFromLangs = () => {
-        if (selectedLanguage !== 'plain' && Object.keys(langs).includes(selectedLanguage)) {
-            return langs[selectedLanguage];
-        }
-        return null;
-    };
-
-    const activeLanguage = getCurrentLanguageFromLangs();
-    if (activeLanguage) {
-        extensions.push(activeLanguage());
-    }
-
     const customCornerRadiusStyle = {
         borderRadius: blockSettings.hasExtendedCustomRadius
             ? `${blockSettings.extendedRadiusTopLeft} ${blockSettings.extendedRadiusTopRight} ${blockSettings.extendedRadiusBottomRight} ${blockSettings.extendedRadiusBottomLeft}`
@@ -119,7 +107,7 @@ export const CodeSnippetBlock: FC<BlockProps> = ({ appBridge }) => {
                             <div
                                 data-test-id="code-snippet-header"
                                 className="tw-py-2 tw-px-3 tw-bg-black-5 tw-border-b tw-border-black-10 tw-text-small tw-flex tw-justify-between tw-items-center"
-                                style={getStyle()}
+                                style={{ ...getStyle(), letterSpacing: 'normal' }}
                             >
                                 {isEditing ? (
                                     <div

packages/code-snippet-block/src/hooks/useCodeMirrorExtensions.ts

@@ -0,0 +1,32 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { EditorView } from '@codemirror/view';
+import { langs } from '@uiw/codemirror-extensions-langs';
+import { type Extension } from '@uiw/react-codemirror';
+import { useMemo } from 'react';
+
+import { type Language } from '../types';
+
+export const useCodeMirrorExtensions = (selectedLanguage: Language): Extension[] =>
+    useMemo(() => {
+        const extensions: Extension[] = [];
+
+        if (selectedLanguage !== 'plain' && Object.keys(langs).includes(selectedLanguage)) {
+            extensions.push(langs[selectedLanguage]());
+        }
+
+        // Prevent inherited typography from overriding CodeMirror token styling.
+        extensions.push(
+            EditorView.theme({
+                '&.cm-editor': {
+                    letterSpacing: 'normal',
+                },
+                '.cm-content, .cm-line': {
+                    letterSpacing: 'normal',
+                    color: 'initial',
+                },
+            })
+        );
+
+        return extensions;
+    }, [selectedLanguage]);