editor: add code block language to local storage

* also add plaintext language option
* also fix spacing issues in language selector list

Signed-off-by: 01zulfi <[email protected]>

Author: 01zulfi

packages/editor/scripts/langen.mjs

@@ -56,12 +56,17 @@ export async function langen(rootDirectory) {
         : undefined
     });
   }
+  languages.push({
+    filename: "Plaintext",
+    title: "Plaintext"
+  });
 
   const languageIndex = `/* !!! THIS IS A GENERATED FILE. DO NOT EDIT !!! */
 export async function loadLanguage(language: string) {
   switch (language) {
     ${languages
       .map(({ filename, alias }) => {
+        if (filename === "Plaintext") return "";
         return [
           ...(alias || []).map((a) => `case "${a}":`),
           `case "${filename}":`,

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

@@ -36,6 +36,7 @@ import stripIndent from "strip-indent";
 import { nanoid } from "nanoid";
 import Languages from "./languages.json";
 import { CaretPosition, CodeLine } from "./utils.js";
+import { config } from "../../utils/config.js";
 
 interface Indent {
   type: "tab" | "space";
@@ -524,7 +525,14 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
           }
         }
       }),
-      HighlighterPlugin({ name: this.name, defaultLanguage: "txt" })
+      HighlighterPlugin({
+        name: this.name,
+        defaultLanguage: () => {
+          const cachedLanguage =
+            config.get<(typeof Languages)[number]>("codeBlockLanguage");
+          return cachedLanguage?.filename ?? "Plaintext";
+        }
+      })
     ];
   },
 
@@ -536,6 +544,7 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
             l.filename === node.attrs.language ||
             l.alias?.some((a) => a === node.attrs.language)
         );
+
         const content = document.createElement("pre");
         content.classList.add("node-content-wrapper");
         content.classList.add(

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,10 @@ export function CodeblockComponent(
         <LanguageSelector
           selectedLanguage={languageDefinition?.filename || "Plaintext"}
           onLanguageSelected={(language) => {
+            config.set(
+              "codeBlockLanguage",
+              Languages.find((l) => l.filename === language)
+            );
             updateAttributes(
               { language },
               { addToHistory: true, preventUpdate: false }
@@ -287,7 +292,6 @@ function LanguageSelector(props: LanguageSelectorProps) {
               variant={"menuitem"}
               sx={{
                 textAlign: "left",
-                py: 1,
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center"

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

@@ -69,15 +69,15 @@ function getDecorations({
   defaultLanguage
 }: {
   block: NodeWithPos;
-  defaultLanguage: string | null | undefined;
+  defaultLanguage: () => string | null | undefined;
 }) {
   const decorations: Decoration[] = [];
   const languages = refractor.listLanguages();
 
   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();
@@ -270,7 +270,13 @@ export function HighlighterPlugin({
     },
     appendTransaction(transactions, oldState, newState) {
       const isDocChanged = transactions.some((tr) => tr.docChanged);
-      return updateSelection(name, oldState, newState, isDocChanged);
+      return updateSelection(
+        name,
+        oldState,
+        newState,
+        isDocChanged,
+        defaultLanguage
+      );
     }
   });
 }
@@ -279,7 +285,8 @@ function updateSelection(
   name: string,
   oldState: EditorState,
   newState: EditorState,
-  isDocChanged: boolean
+  isDocChanged: boolean,
+  defaultLanguage: () => string | null | undefined
 ) {
   const oldNodeName = oldState.selection.$head.parent.type.name;
   const newNodeName = newState.selection.$head.parent.type.name;
@@ -307,6 +314,11 @@ function updateSelection(
       isDocChanged ? toCodeLines(node.textContent, pos) : undefined
     );
     attributes.caretPosition = position;
+    console.log({
+      attrs: node.attrs,
+      defaultLanguage: defaultLanguage()
+    });
+    attributes.language = node.attrs.language ?? defaultLanguage();
 
     const { tr } = newState;
     tr.setMeta("preventUpdate", true);