fix(lexical-playground): code lang display (#2658)

Author: LuciNyan

packages/lexical-code/src/index.ts

@@ -82,6 +82,35 @@ type SerializedCodeHighlightNode = Spread<
   SerializedTextNode
 >;
 
+export const CODE_LANGUAGE_FRIENDLY_NAME_MAP: Record<string, string> = {
+  c: 'C',
+  clike: 'C-like',
+  css: 'CSS',
+  html: 'HTML',
+  js: 'JavaScript',
+  markdown: 'Markdown',
+  objc: 'Objective-C',
+  plain: 'Plain Text',
+  py: 'Python',
+  rust: 'Rust',
+  sql: 'SQL',
+  swift: 'Swift',
+  xml: 'XML',
+};
+
+export const CODE_LANGUAGE_MAP: Record<string, string> = {
+  javascript: 'js',
+  md: 'markdown',
+  plaintext: 'plain',
+  python: 'py',
+  text: 'plain',
+};
+
+export function getLanguageFriendlyName(lang: string) {
+  const _lang = CODE_LANGUAGE_MAP[lang] || lang;
+  return CODE_LANGUAGE_FRIENDLY_NAME_MAP[_lang] || _lang;
+}
+
 const mapToPrismLanguage = (
   language: string | null | undefined,
 ): string | null | undefined => {

packages/lexical-playground/src/plugins/CodeActionMenuPlugin.css

@@ -2,7 +2,6 @@
   height: 35.8px;
   font-size: 10px;
   color: rgba(0, 0, 0, 0.5);
-  text-transform: uppercase;
   position: absolute;
   display: flex;
   align-items: center;

packages/lexical-playground/src/plugins/CodeActionMenuPlugin.tsx

@@ -8,7 +8,7 @@
 
 import './CodeActionMenuPlugin.css';
 
-import {$isCodeNode, CodeNode} from '@lexical/code';
+import {$isCodeNode, CodeNode, getLanguageFriendlyName} from '@lexical/code';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {
   $getNearestNodeFromDOMNode,
@@ -149,11 +149,13 @@ function CodeActionMenuContainer(): JSX.Element {
     });
   }
 
+  const codeFriendlyName = getLanguageFriendlyName(lang);
+
   return (
     <>
       {isShown ? (
         <div className="code-action-menu-container" style={{...position}}>
-          <div className="code-highlight-language">{lang}</div>
+          <div className="code-highlight-language">{codeFriendlyName}</div>
           <button className="menu-item" onClick={handleClick} aria-label="copy">
             {isCopyCompleted ? (
               <i className="format success" />

packages/lexical-playground/src/plugins/ToolbarPlugin.tsx

@@ -16,7 +16,12 @@ import type {
 
 import './ToolbarPlugin.css';
 
-import {$createCodeNode, $isCodeNode} from '@lexical/code';
+import {
+  $createCodeNode,
+  $isCodeNode,
+  CODE_LANGUAGE_FRIENDLY_NAME_MAP,
+  CODE_LANGUAGE_MAP,
+} from '@lexical/code';
 import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
 import {
   $isListNode,
@@ -109,30 +114,19 @@ const blockTypeToBlockName = {
   quote: 'Quote',
 };
 
-const CODE_LANGUAGE_OPTIONS: [string, string][] = [
-  ['', '- Select language -'],
-  ['c', 'C'],
-  ['clike', 'C-like'],
-  ['css', 'CSS'],
-  ['html', 'HTML'],
-  ['js', 'JavaScript'],
-  ['markdown', 'Markdown'],
-  ['objc', 'Objective-C'],
-  ['plain', 'Plain Text'],
-  ['py', 'Python'],
-  ['rust', 'Rust'],
-  ['sql', 'SQL'],
-  ['swift', 'Swift'],
-  ['xml', 'XML'],
-];
-
-const CODE_LANGUAGE_MAP = {
-  javascript: 'js',
-  md: 'markdown',
-  plaintext: 'plain',
-  python: 'py',
-  text: 'plain',
-};
+function getCodeLanguageOptions(): [string, string][] {
+  const options: [string, string][] = [['', '- Select language -']];
+
+  for (const [lang, friendlyName] of Object.entries(
+    CODE_LANGUAGE_FRIENDLY_NAME_MAP,
+  )) {
+    options.push([lang, friendlyName]);
+  }
+
+  return options;
+}
+
+const CODE_LANGUAGE_OPTIONS = getCodeLanguageOptions();
 
 function getSelectedNode(selection: RangeSelection): TextNode | ElementNode {
   const anchor = selection.anchor;