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]>
streetwriters · Dec 16, 2024 · 064a6b3 · 064a6b3
1 parent 6098935
commit 064a6b3
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/packages/editor/scripts/langen.mjs b/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}":`,

diff --git a/packages/editor/src/extensions/code-block/code-block.ts b/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";
@@ -463,6 +464,17 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
               event.clipboardData
             );
 
+            if (language) {
+              const languageDefinition = Languages.find(
+                (l) =>
+                  l.filename === language ||
+                  l.alias?.some((a) => a === language)
+              );
+              if (languageDefinition) {
+                config.set("codeBlockLanguage", languageDefinition);
+              }
+            }
+
             const isInsideCodeBlock = this.editor.isActive(this.type.name);
             if (!isInsideCodeBlock && !isCode) {
               return false;

diff --git 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<CodeBlockAttributes>
@@ -49,6 +50,9 @@ export function CodeblockComponent(
     (l) => l.filename === language || l.alias?.some((a) => a === language)
   );
 
+  const cachedLanguage =
+    config.get<(typeof Languages)[number]>("codeBlockLanguage");
+
   return (
     <>
       <Flex
@@ -155,7 +159,9 @@ export function CodeblockComponent(
             title={strings.changeLanguage()}
           >
             <Text variant={"subBody"} spellCheck={false}>
-              {languageDefinition?.title || "Plaintext"}
+              {languageDefinition?.title ||
+                cachedLanguage?.title ||
+                "Plaintext"}
             </Text>
           </Button>
 
@@ -213,8 +219,16 @@ export function CodeblockComponent(
         title={strings.selectLanguage()}
       >
         <LanguageSelector
-          selectedLanguage={languageDefinition?.filename || "Plaintext"}
+          selectedLanguage={
+            languageDefinition?.filename ||
+            cachedLanguage?.filename ||
+            "Plaintext"
+          }
           onLanguageSelected={(language) => {
+            config.set(
+              "codeBlockLanguage",
+              Languages.find((l) => l.filename === language)
+            );
             updateAttributes(
               { language },
               { addToHistory: true, preventUpdate: false }
@@ -287,7 +301,6 @@ function LanguageSelector(props: LanguageSelectorProps) {
               variant={"menuitem"}
               sx={{
                 textAlign: "left",
-                py: 1,
                 display: "flex",
                 justifyContent: "space-between",
                 alignItems: "center"