Closed AbhayVAshokan closed 1 month ago
Hey @AbhayVAshokan , can I work on this issue.
@parthiv360 please do if you are interested to take it up
Hey @AbhayVAshokan can you look into this PR. Thanks
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
This should resolve it https://github.com/ueberdosis/tiptap/pull/5406
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