fix: CodeBlock fixes (select menu, bundled languages, paste from VS Code) (#1219)

* fix: Import only from a single Shiki bundle

* fix: Select options styling on Chrome, Linux

* fix: Detect proper language ID when parsing from HTML

* fix: Support "typescriptreact" alias for tsx

* minor code change

* remove setting cursor position when inserting code block

---------

Co-authored-by: matthewlipski <[email protected]>
Co-authored-by: yousefed <[email protected]>

Author: 3 people

packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts

@@ -18,20 +18,20 @@ export async function handleVSCodePaste<
   }
 
   const text = event.clipboardData!.getData("text/plain");
-  const vscode = event.clipboardData!.getData("vscode-editor-data");
-  const vscodeData = vscode ? JSON.parse(vscode) : undefined;
-  const language = vscodeData?.mode;
 
   if (!text) {
     return false;
   }
 
   if (!schema.nodes.codeBlock) {
     view.pasteText(text);
-
     return true;
   }
 
+  const vscode = event.clipboardData!.getData("vscode-editor-data");
+  const vscodeData = vscode ? JSON.parse(vscode) : undefined;
+  const language = vscodeData?.mode;
+
   if (!language) {
     return false;
   }

packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -47,11 +47,15 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
     };
   },
   addAttributes() {
+    const supportedLanguages = this.options
+      .supportedLanguages as SupportedLanguageConfig[];
+
     return {
       language: {
         default: this.options.defaultLanguage,
         parseHTML: (inputElement) => {
           let element = inputElement as HTMLElement | null;
+          let language: string | null = null;
 
           if (
             element?.tagName === "DIV" &&
@@ -67,20 +71,26 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           const dataLanguage = element?.getAttribute("data-language");
 
           if (dataLanguage) {
-            return dataLanguage.toLowerCase();
+            language = dataLanguage.toLowerCase();
+          } else {
+            const classNames = [...(element?.className.split(" ") || [])];
+            const languages = classNames
+              .filter((className) => className.startsWith("language-"))
+              .map((className) => className.replace("language-", ""));
+            const [classLanguage] = languages;
+
+            language = classLanguage.toLowerCase();
           }
 
-          const classNames = [...(element?.className.split(" ") || [])];
-          const languages = classNames
-            .filter((className) => className.startsWith("language-"))
-            .map((className) => className.replace("language-", ""));
-          const [language] = languages;
-
           if (!language) {
             return null;
           }
 
-          return language.toLowerCase();
+          return (
+            supportedLanguages.find(({ match }) => {
+              return match.includes(language);
+            })?.id || this.options.defaultLanguage
+          );
         },
         renderHTML: (attributes) => {
           return attributes.language && attributes.language !== "text"

packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts

@@ -1,4 +1,4 @@
-import { bundledLanguagesInfo } from "shiki/bundle/web";
+import { bundledLanguagesInfo } from "shiki";
 
 export type SupportedLanguageConfig = {
   id: string;
@@ -14,30 +14,50 @@ export const defaultSupportedLanguages: SupportedLanguageConfig[] = [
   },
   ...bundledLanguagesInfo
     .filter((lang) => {
-      return ![
-        "angular-html",
-        "angular-ts",
-        "astro",
-        "blade",
-        "coffee",
-        "handlebars",
-        "html-derivative",
-        "http",
-        "imba",
-        "jinja",
-        "jison",
-        "json5",
-        "marko",
-        "mdc",
-        "stylus",
-        "ts-tags",
+      return [
+        "c",
+        "cpp",
+        "css",
+        "glsl",
+        "graphql",
+        "haml",
+        "html",
+        "java",
+        "javascript",
+        "json",
+        "jsonc",
+        "jsonl",
+        "jsx",
+        "julia",
+        "less",
+        "markdown",
+        "mdx",
+        "php",
+        "postcss",
+        "pug",
+        "python",
+        "r",
+        "regexp",
+        "sass",
+        "scss",
+        "shellscript",
+        "sql",
+        "svelte",
+        "typescript",
+        "vue",
+        "vue-html",
+        "wasm",
+        "wgsl",
+        "xml",
+        "yaml",
       ].includes(lang.id);
     })
     .map((lang) => ({
       match: [lang.id, ...(lang.aliases || [])],
       id: lang.id,
       name: lang.name,
     })),
+  { id: "tsx", name: "TSX", match: ["tsx", "typescriptreact"] },
   {
     id: "haskell",
     name: "Haskell",

packages/core/src/editor/Block.css

@@ -299,6 +299,9 @@ NESTED BLOCKS
   transition: opacity 0.3s;
   transition-delay: 1s;
 }
+.bn-block-content[data-content-type="codeBlock"] > div > select > option {
+  color: black;
+}
 .bn-block-content[data-content-type="codeBlock"]:hover > div > select,
 .bn-block-content[data-content-type="codeBlock"] > div > select:focus {
   opacity: 0.5;

packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -176,14 +176,9 @@ export function getDefaultSlashMenuItems<
   if (checkDefaultBlockTypeInSchema("codeBlock", editor)) {
     items.push({
       onItemClick: () => {
-        const pos = editor._tiptapEditor.state.selection.from;
-
         insertOrUpdateBlock(editor, {
           type: "codeBlock",
         });
-
-        // Move the cursor inside the code block
-        editor._tiptapEditor.commands.setTextSelection(pos);
       },
       badge: formatKeyboardShortcut("Mod-Alt-c"),
       key: "code_block",