From 50136e3689cab32d25cfa1ff06d326c8e7c12e84 Mon Sep 17 00:00:00 2001 From: 01zulfi <85733202+01zulfi@users.noreply.github.com> Date: Thu, 12 Feb 2026 13:49:52 +0500 Subject: [PATCH] editor: use last set code language as default (#7086) Co-authored-by: Abdullah Atta --- .../src/extensions/code-block/code-block.ts | 25 +++++++++++++------ .../src/extensions/code-block/component.tsx | 4 ++- .../src/extensions/code-block/highlighter.ts | 6 ++--- 3 files changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/extensions/code-block/code-block.ts b/packages/editor/src/extensions/code-block/code-block.ts index d6df141f9..6164346f6 100644 --- a/packages/editor/src/extensions/code-block/code-block.ts +++ b/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({ 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({ 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({ 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({ // 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({ 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({ } } }), - HighlighterPlugin({ name: this.name, defaultLanguage: "txt" }) + HighlighterPlugin({ + name: this.name, + defaultLanguage + }) ]; }, @@ -545,7 +552,7 @@ export const CodeBlock = Node.create({ 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("codeBlockLanguage", "Plaintext"); +} diff --git a/packages/editor/src/extensions/code-block/component.tsx b/packages/editor/src/extensions/code-block/component.tsx index c7e8cfce7..b515663ff 100644 --- a/packages/editor/src/extensions/code-block/component.tsx +++ b/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 @@ -215,6 +216,7 @@ export function CodeblockComponent( { + 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" diff --git a/packages/editor/src/extensions/code-block/highlighter.ts b/packages/editor/src/extensions/code-block/highlighter.ts index d6986d8c5..b20ceb22b 100644 --- a/packages/editor/src/extensions/code-block/highlighter.ts +++ b/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("highlighter"); const HIGHLIGHTED_BLOCKS: Set = new Set();