feat(code-blocks): add language picker

.changeset/gold-wombats-jog.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-editor": minor
+---
+
+add codeblock language picker

site/index.ts

@@ -321,6 +321,15 @@ domReady(() => {
             ],
             highlighting: {
                 highlightedNodeTypes: ["stack_snippet_lang"],
+                languages: [
+                    "javascript",
+                    "java",
+                    "python",
+                    "ruby",
+                    "rust",
+                    "csharp",
+                    "go",
+                ],
             },
         },
         imageUpload: imageUploadOptions,

src/rich-text/commands/code-block.ts

@@ -358,3 +358,31 @@ export function toggleInlineCode(
     // If we found neither newline nor softbreak, toggle the inline code mark.
     return toggleMark(state.schema.marks.code)(state, dispatch);
 }
+
+function isSelectionInCodeBlock(
+    state: EditorState
+): { pos: number; node: ProseMirrorNode } | null {
+    const { $from } = state.selection;
+    if ($from.parent.type.name === "code_block") {
+        return { pos: $from.before(), node: $from.parent };
+    }
+    return null;
+}
+
+export function openCodeBlockLanguagePicker(
+    state: EditorState,
+    dispatch: (tr: Transaction) => void
+) {
+    const codeBlock = isSelectionInCodeBlock(state);
+    if (!codeBlock) {
+        return false;
+    }
+    const { pos, node } = codeBlock;
+
+    // Setting isEditingLanguage to true will open the language picker
+    const newAttrs = { ...node.attrs, isEditingLanguage: true };
+    if (dispatch) {
+        dispatch(state.tr.setNodeMarkup(pos, undefined, newAttrs));
+    }
+    return true;
+}

src/rich-text/editor.ts

@@ -50,6 +50,10 @@ export interface RichTextOptions extends CommonViewOptions {
     highlighting?: {
         /** Which prosemirror nodes should have highlighting? Defaults to "code_block", which will always be highlighted */
         highlightedNodeTypes?: string[];
+        /** Which languages appear as suggestions in the dropdown? */
+        languages?: string[];
+        /** The maximum number of languages to show in the dropdown */
+        maxSuggestions?: number;
     };
 }
 
@@ -149,8 +153,18 @@ export class RichTextEditor extends BaseView {
                     ],
                 }),
                 nodeViews: {
-                    code_block: (node) => {
-                        return new CodeBlockView(node);
+                    code_block: (
+                        node,
+                        view: EditorView,
+                        getPos: () => number
+                    ) => {
+                        return new CodeBlockView(
+                            node,
+                            view,
+                            getPos,
+                            this.options.highlighting?.languages || [],
+                            this.options.highlighting?.maxSuggestions
+                        );
                     },
                     image(
                         node: ProseMirrorNode,

src/rich-text/key-bindings.ts

@@ -33,6 +33,7 @@ import {
     splitCodeBlockAtStartOfDoc,
     exitInclusiveMarkCommand,
     escapeUnselectableCommand,
+    openCodeBlockLanguagePicker,
 } from "./commands";
 
 export function allKeymaps(
@@ -45,6 +46,7 @@ export function allKeymaps(
         "Mod-]": indentCodeBlockLinesCommand,
         "Mod-[": unindentCodeBlockLinesCommand,
         "Enter": splitCodeBlockAtStartOfDoc,
+        "Mod-;": openCodeBlockLanguagePicker,
     });
 
     const tableKeymap = caseNormalizeKeymap({