[Bug]: defaultLanguage for CodeBlockLowLight extension is not getting applied

[AbhayVAshokan]

Affected Packages

extension-code-block-lowlight

Version(s)

2.4.0

Bug Description

Inserting a new code block or converting an existing block of text into a code block would select the language as auto. You can verify the behavior Using the CodeBlockLowlight extension in Tiptap.

Instead, I would like the language of all my new code blocks to be "javascript" by default. Passing the defaultLanguage prop as "javascript" in the above example does not yield any changes. The default language stays as "auto".

Browser Used

Chrome

Code Example URL

https://codesandbox.io/p/sandbox/tiptap-codeblocklowlight-chflsw

Expected Behavior

In the provided codesandbox link, I have provided the defaultLanguage prop as "javascript". Ideally, every new code blocks added should be of language "javascript" by default. In this case, the language is detected as "auto".

Additional Context (Optional)

No response

Dependency Updates

• [X] Yes, I've updated all my dependencies.

[parthiv360]

Hey @AbhayVAshokan , can I work on this issue.

[AbhayVAshokan]

@parthiv360 please do if you are interested to take it up

[parthiv360]

Hey @AbhayVAshokan can you look into this PR. Thanks

[nperez0111]

I figure that this is the correct change to make for this PR:

diff --git a/demos/src/Examples/CodeBlockLanguage/React/index.jsx b/demos/src/Examples/CodeBlockLanguage/React/index.jsx
index cdb1d35de..5040a28b7 100644
--- a/demos/src/Examples/CodeBlockLanguage/React/index.jsx
+++ b/demos/src/Examples/CodeBlockLanguage/React/index.jsx
@@ -52,13 +52,13 @@ export default () => {
             return ReactNodeViewRenderer(CodeBlockComponent)
           },
         })
-        .configure({ lowlight }),
+        .configure({ lowlight, defaultLanguage: 'css' }),
     ],
     content: `
         <p>
           That’s a boring paragraph followed by a fenced code block:
         </p>
-        <pre><code class="language-javascript">for (var i=1; i <= 20; i++)
+        <pre><code>for (var i=1; i <= 20; i++)
 {
   if (i % 15 == 0)
     console.log("FizzBuzz");
diff --git a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts b/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
index c1eb4dcbf..3b952e329 100644
--- a/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
+++ b/packages/extension-code-block-lowlight/src/code-block-lowlight.ts
@@ -7,13 +7,6 @@ export interface CodeBlockLowlightOptions extends CodeBlockOptions {
    * The lowlight instance.
    */
   lowlight: any,
-
-  /**
-   * The default language.
-   * @default null
-   * @example 'javascript'
-   */
-  defaultLanguage: string | null | undefined,
 }

 /**
@@ -25,7 +18,6 @@ export const CodeBlockLowlight = CodeBlock.extend<CodeBlockLowlightOptions>({
     return {
       ...this.parent?.(),
       lowlight: {},
-      defaultLanguage: null,
     }
   },

diff --git a/packages/extension-code-block/src/code-block.ts b/packages/extension-code-block/src/code-block.ts
index 8d6b22d4c..122e476b4 100644
--- a/packages/extension-code-block/src/code-block.ts
+++ b/packages/extension-code-block/src/code-block.ts
@@ -22,6 +22,12 @@ export interface CodeBlockOptions {
    * @default true
    */
   exitOnArrowDown: boolean
+  /**
+   * The default language.
+   * @default null
+   * @example 'js'
+   */
+  defaultLanguage: string | null | undefined
   /**
    * Custom HTML attributes that should be added to the rendered HTML tag.
    * @default {}
@@ -71,6 +77,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
       languageClassPrefix: 'language-',
       exitOnTripleEnter: true,
       exitOnArrowDown: true,
+      defaultLanguage: null,
       HTMLAttributes: {},
     }
   },
@@ -88,7 +95,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
   addAttributes() {
     return {
       language: {
-        default: null,
+        default: this.options.defaultLanguage,
         parseHTML: element => {
           const { languageClassPrefix } = this.options
           const classNames = [...(element.firstElementChild?.classList || [])]

If you change the code-block extension, you can change the default language set there and then code-block-lowlight can just use that option

[nperez0111]

This should resolve it https://github.com/ueberdosis/tiptap/pull/5406