editor: use last set code language as default (#7086)

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>

packages/editor/src/extensions/code-block/code-block.ts

@@ -37,6 +37,7 @@ import { nanoid } from "nanoid";
 import Languages from "./languages.json";
 import { CaretPosition, CodeLine } from "./utils.js";
 import { tiptapKeys } from "@notesnook/common";
+import { config } from "../../utils/config.js";
 
 interface Indent {
   type: "tab" | "space";
@@ -243,7 +244,11 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
             const text = state.doc.textBetween(from, to, "\n");
             tr.replaceSelectionWith(
               this.type.create(
-                { ...attributes, id: createCodeblockId() },
+                {
+                  language: defaultLanguage(),
+                  ...attributes,
+                  id: createCodeblockId()
+                },
                 text ? state.schema.text(text) : null
               )
             );
@@ -435,7 +440,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
         find: backtickInputRegex,
         type: this.type,
         getAttributes: (match) => ({
-          language: match[1],
+          language: match[1] ?? defaultLanguage(),
           id: createCodeblockId()
         })
       }),
@@ -443,7 +448,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
         find: tildeInputRegex,
         type: this.type,
         getAttributes: (match) => ({
-          language: match[1],
+          language: match[1] ?? defaultLanguage(),
           id: createCodeblockId()
         })
       })
@@ -455,7 +460,6 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
       // this plugin creates a code block for pasted content from VS Code
       // we can also detect the copied code language
       new Plugin({
-        key: new PluginKey("codeBlockVSCodeHandler"),
         props: {
           handlePaste: (view, event) => {
             if (!event.clipboardData) {
@@ -505,7 +509,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
                 tr.replaceSelectionWith(
                   this.type.create({
                     id: createCodeblockId(),
-                    language,
+                    language: language || "Plaintext",
                     indentType: indent.type,
                     indentLength: indent.amount
                   })
@@ -526,7 +530,10 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
           }
         }
       }),
-      HighlighterPlugin({ name: this.name, defaultLanguage: "txt" })
+      HighlighterPlugin({
+        name: this.name,
+        defaultLanguage
+      })
     ];
   },
 
@@ -545,7 +552,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
             languageDefinition?.filename ?? languageDefinition?.title ?? "xyz"
           }`.replace(/\s/, "-")
         );
-        content.classList.add("scroll-bar")
+        content.classList.add("scroll-bar");
         content.style.whiteSpace = "pre";
         // caret is not visible if content element width is 0px
         content.style.minWidth = "20px";
@@ -733,3 +740,7 @@ export function inferLanguage(node: Element) {
 function createCodeblockId() {
   return `codeblock-${nanoid(12)}`;
 }
+
+function defaultLanguage() {
+  return config.get<string>("codeBlockLanguage", "Plaintext");
+}

packages/editor/src/extensions/code-block/component.tsx

@@ -30,6 +30,7 @@ import { CodeBlockAttributes } from "./code-block.js";
 import Languages from "./languages.json";
 import { useThemeEngineStore } from "@notesnook/theme";
 import { strings } from "@notesnook/intl";
+import { config } from "../../utils/config.js";
 
 export function CodeblockComponent(
   props: ReactNodeViewProps<CodeBlockAttributes>
@@ -215,6 +216,7 @@ export function CodeblockComponent(
         <LanguageSelector
           selectedLanguage={languageDefinition?.filename || "Plaintext"}
           onLanguageSelected={(language) => {
+            config.set("codeBlockLanguage", language);
             updateAttributes(
               { language },
               { addToHistory: true, preventUpdate: false }
@@ -296,7 +298,7 @@ function LanguageSelector(props: LanguageSelectorProps) {
               variant={"menuitem"}
               sx={{
                 textAlign: "left",
-                py: 1,
+                flexShrink: 0,
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center"

packages/editor/src/extensions/code-block/highlighter.ts

@@ -69,7 +69,7 @@ function getDecorations({
   defaultLanguage
 }: {
   block: NodeWithPos;
-  defaultLanguage: string | null | undefined;
+  defaultLanguage: () => string | null | undefined;
 }) {
   const decorations: Decoration[] = [];
   const languages = refractor.listLanguages();
@@ -77,7 +77,7 @@ function getDecorations({
   const { node, pos } = block;
   const code = node.textContent;
 
-  const language = node.attrs.language || defaultLanguage;
+  const language = node.attrs.language || defaultLanguage();
   const nodes = languages.includes(language)
     ? getHighlightNodes(refractor.highlight(code, language))
     : null;
@@ -107,7 +107,7 @@ export function HighlighterPlugin({
   defaultLanguage
 }: {
   name: string;
-  defaultLanguage: string | null | undefined;
+  defaultLanguage: () => string | null | undefined;
 }) {
   const HIGHLIGHTER_PLUGIN_KEY = new PluginKey<HighlighterState>("highlighter");
   const HIGHLIGHTED_BLOCKS: Set<string> = new Set();