feat: support code block language selection

src/system/EditorSystemComponent.tsx

@@ -30,7 +30,8 @@ export const {
       editorRootElementRef: 'editorRootElementRef',
       viewMode: 'viewMode',
       linkAutocompleteSuggestions: 'linkAutocompleteSuggestions',
-      imageAutocompleteSuggestions: 'imageAutocompleteSuggestions'
+      imageAutocompleteSuggestions: 'imageAutocompleteSuggestions',
+      codeBlockLanguages: 'codeBlockLanguages'
     },
     events: {
       onChange: 'onChange'

src/system/Sandpack.ts

@@ -96,9 +96,18 @@ const defaultSandpackConfig: SandpackConfig = {
   ]
 }
 
+const defaultCodeBlockLanguages = {
+  js: 'JavaScript',
+  ts: 'TypeScript',
+  tsx: 'TypeScript (React)',
+  jsx: 'JavaScript (React)',
+  css: 'CSS'
+}
+
 export const [SandpackSystem] = system(
   (r, [{ activeEditor, activeEditorType, createEditorSubscription }]) => {
     const sandpackConfig = r.node<SandpackConfig>(defaultSandpackConfig)
+    const codeBlockLanguages = r.node(defaultCodeBlockLanguages)
     const insertSandpack = r.node<string>()
     const insertCodeBlock = r.node<true>()
 
@@ -170,6 +179,7 @@ export const [SandpackSystem] = system(
     })
 
     return {
+      codeBlockLanguages,
       insertSandpack,
       insertCodeBlock,
       sandpackConfig

src/ui/MDXEditor.tsx

@@ -97,12 +97,35 @@ export interface MDXEditorProps {
    * The initial view mode for the editor. Defaults to `ViewMode.editor`.
    */
   viewMode?: ViewMode
+  /**
+   * Triggered when the markdown content changes.
+   */
   onChange?: (markdown: string) => void
+  /**
+   * The CSS class name to be applied to the wrapper element of the component.
+   */
   className?: string
+  /**
+   * The CSS class name to be applied to the content editable element.
+   */
   contentEditableClassName?: string
+  /**
+   * The options to be used when parsing the markdown content.
+   * @see the {@link MarkdownParseOptions} interface for more details.
+   */
   markdownParseOptions?: Partial<MarkdownParseOptions>
+  /**
+   * The {@link https://lexical.dev/ Lexical nodes} used by the editor.
+   */
   lexicalNodes?: Klass<LexicalNode>[]
+  /**
+   * The options used when converting the lexical tree to markdown.
+   */
   lexicalConvertOptions?: Partial<ExportMarkdownFromLexicalOptions>
+  /**
+   * The supported code block languages.
+   */
+  codeBlockLanguages?: Record<string, string>
 }
 
 const defaultNodeDecorators: NodeDecoratorComponents = {

src/ui/ToolbarPlugin/CodeBlockLanguageSelect.tsx

@@ -5,9 +5,10 @@ import { useEmitterValues } from '../../system/EditorSystemComponent'
 import { $getNodeByKey } from 'lexical'
 import { CodeBlockEditorType } from '../../types/ActiveEditorType'
 import { CodeBlockNode } from '../../nodes'
+import styles from '../styles.module.css'
 
 export function CodeBlockLanguageSelect() {
-  const [activeEditorType, activeEditor] = useEmitterValues('activeEditorType', 'activeEditor')
+  const [activeEditorType, activeEditor, codeBlockLanguages] = useEmitterValues('activeEditorType', 'activeEditor', 'codeBlockLanguages')
 
   const nodeLanguage = React.useMemo(() => {
     let language!: string
@@ -31,11 +32,13 @@ export function CodeBlockLanguageSelect() {
         })
       }}
     >
-      <SelectTrigger placeholder="Language" />
-      <SelectContent>
-        <SelectItem value="js">JavaScript</SelectItem>
-        <SelectItem value="ts">TypeScript</SelectItem>
-        <SelectItem value="css">CSS</SelectItem>
+      <SelectTrigger placeholder="Language" className={styles.toolbarCodeBlockLanguageSelectTrigger} />
+      <SelectContent className={styles.toolbarCodeBlockLanguageSelectContent}>
+        {Object.entries(codeBlockLanguages).map(([value, label]) => (
+          <SelectItem key={value} value={value}>
+            {label}
+          </SelectItem>
+        ))}
       </SelectContent>
     </Select.Root>
   )

src/ui/ToolbarPlugin/SelectPieces.tsx

@@ -15,9 +15,9 @@ export const SelectItem = React.forwardRef<HTMLDivElement | null, { className?:
   }
 )
 
-export const SelectTrigger: React.FC<{ placeholder: string }> = ({ placeholder }) => {
+export const SelectTrigger: React.FC<{ placeholder: string; className?: string }> = ({ placeholder, className }) => {
   return (
-    <Select.Trigger aria-label={placeholder} className={styles.toolbarNodeKindSelectTrigger}>
+    <Select.Trigger aria-label={placeholder} className={classNames(styles.toolbarNodeKindSelectTrigger, className)}>
       <Select.Value placeholder={placeholder} />
       <Select.Icon className={styles.toolbarNodeKindSelectDropdownArrow}>
         <DropDownIcon />
@@ -44,7 +44,7 @@ export const SelectContent: React.FC<{ children: React.ReactNode; className?: st
 export const SelectButtonTrigger: React.FC<{ children: React.ReactNode; title: string; className?: string }> = ({
   children,
   title,
-  className,
+  className
 }) => {
   return (
     <Select.Trigger className={classNames(styles.toolbarButtonSelectTrigger, className)} title={title}>

src/ui/styles.module.css

@@ -214,7 +214,9 @@
 }
 
 .toolbarNodeKindSelectContainer, 
-.toolbarButtonDropdownContainer {
+.toolbarButtonDropdownContainer,
+.toolbarCodeBlockLanguageSelectContent
+{
   z-index: 60;
   width: var(--spacing-36);
   border-bottom-left-radius: var(--radius-base);
@@ -261,6 +263,12 @@
   padding-inline-end: var(--spacing-1);
 }
 
+.toolbarCodeBlockLanguageSelectTrigger, 
+.toolbarCodeBlockLanguageSelectContent 
+{
+  width: var(--spacing-48);
+}
+
 .toolbarNodeKindSelectItem {
   cursor: default;
   display: flex;