From bb511b868b6168bb7850adae4903761022497e54 Mon Sep 17 00:00:00 2001
From: Jonatan Heyman <jonatan@heyman.info>
Date: Tue, 26 Dec 2023 00:27:43 +0100
Subject: [PATCH] Add support for more languages (#69)

* Contain language selection dialog in an element that can be scrolled, and automatically scroll it if needed when navigating the list with arrow keys

* Add support for more languages:

Clojure, Erlang, Golang, Lezer, Ruby, Shell, YAML

* Move prettier auto format settings for languages into Language() class

* Remove invalid import

* Fix bug that could cause auto formatting to fail for the last block.
Add tests for language auto detection and formatting.

* Fix broken tests

* Fix language auto detection on Safari Webkit which was broken

* Remove unnecessary wait time
---
 README.md                                   |   7 +
 package-lock.json                           |  10 +
 package.json                                |   1 +
 playwright.config.ts                        |   2 +-
 public/langdetect-worker.js                 |   6 +
 src/components/LanguageSelector.vue         |  59 ++++--
 src/editor/block/format-code.js             |  33 +---
 src/editor/lang-heynote/heynote.grammar     |   2 +-
 src/editor/lang-heynote/parser.js           |   2 +-
 src/editor/language-detection/autodetect.js |  19 +-
 src/editor/languages.js                     | 194 ++++++++++++++++++--
 tests/formatting.spec.js                    |  46 +++++
 tests/language-detection.spec.js            |  39 ++++
 tests/markdown.spec.js                      |   9 +-
 tests/test-utils.js                         |   2 +-
 15 files changed, 361 insertions(+), 70 deletions(-)
 create mode 100644 tests/formatting.spec.js
 create mode 100644 tests/language-detection.spec.js

diff --git a/README.md b/README.md
index be5a51b..eefd3fc 100644
--- a/README.md
+++ b/README.md
@@ -17,17 +17,24 @@ Available for Mac, Windows, and Linux.
 -   Syntax highlighting
     -   C++
     -   C#
+    -   Clojure
     -   CSS
+    -   Erlang
+    -   Go
     -   HTML
     -   Java
     -   JavaScript
     -   JSON
+    -   Lezer
     -   Markdown
     -   PHP
     -   Python
+    -   Ruby
     -   Rust
+    -   Shell
     -   SQL
     -   XML
+    -   YAML
 -   Language auto-detection
 -   Auto-formatting
 -   Math/Calculator mode
diff --git a/package-lock.json b/package-lock.json
index 8500eb5..b30b3c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@codemirror/lang-sql": "^6.5.4",
         "@codemirror/lang-xml": "^6.0.2",
         "@codemirror/language": "^6.9.3",
+        "@codemirror/legacy-modes": "^6.3.3",
         "@codemirror/lint": "^6.4.2",
         "@codemirror/search": "^6.5.5",
         "@codemirror/state": "^6.3.3",
@@ -453,6 +454,15 @@
         "style-mod": "^4.0.0"
       }
     },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.3.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.3.3.tgz",
+      "integrity": "sha512-X0Z48odJ0KIoh/HY8Ltz75/4tDYc9msQf1E/2trlxFaFFhgjpVHjZ/BCXe1Lk7s4Gd67LL/CeEEHNI+xHOiESg==",
+      "dev": true,
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
     "node_modules/@codemirror/lint": {
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.4.2.tgz",
diff --git a/package.json b/package.json
index 51867ff..65fce09 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@codemirror/lang-sql": "^6.5.4",
     "@codemirror/lang-xml": "^6.0.2",
     "@codemirror/language": "^6.9.3",
+    "@codemirror/legacy-modes": "^6.3.3",
     "@codemirror/lint": "^6.4.2",
     "@codemirror/search": "^6.5.5",
     "@codemirror/state": "^6.3.3",
diff --git a/playwright.config.ts b/playwright.config.ts
index 22c3505..d167fb1 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -41,7 +41,7 @@ export default defineConfig({
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
-
+    
     {
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
diff --git a/public/langdetect-worker.js b/public/langdetect-worker.js
index b1c5b9b..3f93c6d 100644
--- a/public/langdetect-worker.js
+++ b/public/langdetect-worker.js
@@ -14,6 +14,12 @@ GUESSLANG_LANGUAGES = [
     "rs",
     "md",
     "cs",
+    "rb",
+    "sh",
+    "yaml",
+    "go",
+    "clj",
+    "erl",
 ]
 
 const guessLang = new self.GuessLang()
diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
index de4a848..b43373f 100644
--- a/src/components/LanguageSelector.vue
+++ b/src/components/LanguageSelector.vue
@@ -37,9 +37,20 @@
                 if (event.key === "ArrowDown") {
                     this.selected = Math.min(this.selected + 1, this.filteredItems.length - 1)
                     event.preventDefault()
+                    if (this.selected === this.filteredItems.length - 1) {
+                        this.$refs.container.scrollIntoView({block: "end"})
+                    } else {
+                        this.$refs.item[this.selected].scrollIntoView({block: "nearest"})
+                    }
+                    
                 } else if (event.key === "ArrowUp") {
                     this.selected = Math.max(this.selected - 1, 0)
                     event.preventDefault()
+                    if (this.selected === 0) {
+                        this.$refs.container.scrollIntoView({block: "start"})
+                    } else {
+                        this.$refs.item[this.selected].scrollIntoView({block: "nearest"})
+                    }
                 } else if (event.key === "Enter") {
                     this.selectItem(this.filteredItems[this.selected].token)
                     event.preventDefault()
@@ -69,28 +80,38 @@
 </script>
 
 <template>
-    <form class="language-selector" tabindex="-1" @focusout="onFocusOut" ref="container">
-        <input 
-            type="text" 
-            ref="input"
-            @keydown="onKeydown"
-            @input="onInput"
-            v-model="filter"
-        />
-        <ul class="items">
-            <li
-                v-for="item, idx in filteredItems"
-                :key="item.token"
-                :class="idx === selected ? 'selected' : ''"
-                @click="selectItem(item.token)"
-            >
-                {{ item.name }}
-            </li>
-        </ul>
-    </form>
+    <div class="scroller">
+        <form class="language-selector" tabindex="-1" @focusout="onFocusOut" ref="container">
+            <input 
+                type="text" 
+                ref="input"
+                @keydown="onKeydown"
+                @input="onInput"
+                v-model="filter"
+            />
+            <ul class="items">
+                <li
+                    v-for="item, idx in filteredItems"
+                    :key="item.token"
+                    :class="idx === selected ? 'selected' : ''"
+                    @click="selectItem(item.token)"
+                    ref="item"
+                >
+                    {{ item.name }}
+                </li>
+            </ul>
+        </form>
+    </div>
 </template>
 
 <style scoped lang="sass">    
+    .scroller
+        overflow: auto
+        position: fixed
+        top: 0
+        left: 0
+        bottom: 0
+        right: 0
     .language-selector
         font-size: 13px
         padding: 10px
diff --git a/src/editor/block/format-code.js b/src/editor/block/format-code.js
index 6cd19d6..23172bc 100644
--- a/src/editor/block/format-code.js
+++ b/src/editor/block/format-code.js
@@ -1,22 +1,8 @@
 import { EditorSelection } from "@codemirror/state"
 
 import * as prettier from "prettier/standalone"
-import babelParser from "prettier/plugins/babel.mjs"
-import htmlParser from "prettier/esm/parser-html.mjs"
-import cssParser from "prettier/esm/parser-postcss.mjs"
-import markdownParser from "prettier/esm/parser-markdown.mjs"
-import * as prettierPluginEstree from "prettier/plugins/estree.mjs";
-
 import { getActiveNoteBlock } from "./block.js"
-
-
-const PARSER_MAP = {
-    "json": {parser:"json-stringify", plugins: [babelParser, prettierPluginEstree]},
-    "javascript": {parser:"babel", plugins: [babelParser, prettierPluginEstree]},
-    "html": {parser:"html", plugins: [htmlParser]},
-    "css": {parser:"css", plugins: [cssParser]},
-    "markdown": {parser:"markdown", plugins: [markdownParser]},
-}
+import { getLanguage } from "../languages.js"
 
 
 export const formatBlockContent = async ({ state, dispatch }) => {
@@ -24,9 +10,10 @@ export const formatBlockContent = async ({ state, dispatch }) => {
         return false
     const block = getActiveNoteBlock(state)
 
-    const langName = block.language.name
-    if (!(langName in PARSER_MAP))
+    const language = getLanguage(block.language.name)
+    if (!language.prettier) {
         return false
+    }
     
     // get current cursor position
     const cursorPos = state.selection.asSingle().ranges[0].head
@@ -49,17 +36,17 @@ export const formatBlockContent = async ({ state, dispatch }) => {
         if (useFormat) {
             formattedContent = {
                 formatted: await prettier.format(content, {
-                    parser: PARSER_MAP[langName].parser,
-                    plugins: PARSER_MAP[langName].plugins,
+                    parser: language.prettier.parser,
+                    plugins: language.prettier.plugins,
                     tabWidth: state.tabSize,
                 }),
-                cursorOffset: cursorPos == block.content.from ? 0 : content.length,
             }
+            formattedContent.cursorOffset = cursorPos == block.content.from ? 0 : formattedContent.formatted.length
         } else {
             formattedContent = await prettier.formatWithCursor(content, {
                 cursorOffset: cursorPos - block.content.from,
-                parser: PARSER_MAP[langName].parser,
-                plugins: PARSER_MAP[langName].plugins,
+                parser: language.prettier.parser,
+                plugins: language.prettier.plugins,
                 tabWidth: state.tabSize,
             })
         }
@@ -75,7 +62,7 @@ export const formatBlockContent = async ({ state, dispatch }) => {
             to: block.content.to,
             insert: formattedContent.formatted,
         },
-        selection: EditorSelection.cursor(block.content.from + formattedContent.cursorOffset),
+        selection: EditorSelection.cursor(block.content.from + Math.min(formattedContent.cursorOffset, formattedContent.formatted.length)),
     }, {
         userEvent: "input",
         scrollIntoView: true,
diff --git a/src/editor/lang-heynote/heynote.grammar b/src/editor/lang-heynote/heynote.grammar
index d9b707b..fe4ebe4 100644
--- a/src/editor/lang-heynote/heynote.grammar
+++ b/src/editor/lang-heynote/heynote.grammar
@@ -11,7 +11,7 @@ NoteDelimiter {
 
 @tokens {
     noteDelimiterMark { "∞∞∞" }
-    NoteLanguage { "text" | "math" | "javascript" | "json" | "python" | "html" | "sql" | "markdown" | "java" | "php" | "css" | "xml" | "cpp" | "rust" | "csharp" }
+    NoteLanguage { "text" | "math" | "javascript" | "json" | "python" | "html" | "sql" | "markdown" | "java" | "php" | "css" | "xml" | "cpp" | "rust" | "csharp" | "ruby" | "shell" | "yaml" | "golang" | "clojure" | "erlang" | "lezer" }
     Auto { "-a" }
     noteDelimiterEnter { "\n" }
     //NoteContent { String }
diff --git a/src/editor/lang-heynote/parser.js b/src/editor/lang-heynote/parser.js
index ebacdd1..b7e2c55 100644
--- a/src/editor/lang-heynote/parser.js
+++ b/src/editor/lang-heynote/parser.js
@@ -10,7 +10,7 @@ export const parser = LRParser.deserialize({
   maxTerm: 10,
   skippedNodes: [0],
   repeatNodeCount: 1,
-  tokenData: "'f~R[YZw}!O|#V#W!X#[#]#S#^#_#f#a#b%P#d#e&O#f#g&e#g#h&q#h#i&w#l#m#Y%&x%&y'T~|OX~~!PP#T#U!S~!XOU~~![Q#d#e!b#g#h!m~!eP#d#e!h~!mOT~~!pQ#[#]!v#g#h!h~!yP#T#U!|~#PP#f#g!b~#VP#h#i#Y~#]P#a#b#`~#cP#`#a!h~#iQ#T#U#o#g#h$s~#rP#j#k#u~#xP#T#U#{~$QPT~#g#h$T~$WP#V#W$Z~$^P#f#g$a~$dP#]#^$g~$jP#d#e$m~$pP#h#i!h~$vP#c#d$y~$|P#b#c!h~%SP#T#U%V~%YQ#f#g%`#h#i%x~%cP#_#`%f~%iP#W#X%l~%oP#c#d%r~%uP#k#l$y~%{P#[#]!h~&RQ#[#]!b#m#n&X~&[P#h#i&_~&bP#[#]$s~&hP#i#j&k~&nP#g#h$m~&tP#e#f#`~&zP#X#Y&}~'QP#l#m$m~'WP%&x%&y'Z~'^P%&x%&y'a~'fOY~",
+  tokenData: "*c~R`YZ!T}!O!Y#V#W!e#X#Y$R#Z#[$q#[#]$w#^#_%Z#`#a&t#a#b'^#d#e(]#f#g(r#g#h)X#h#i)n#l#m$}#m#n)z%&x%&y*Q~!YOX~~!]P#T#U!`~!eOU~~!hR#`#a!q#d#e#f#g#h#l~!tP#c#d!w~!zP#^#_!}~#QP#i#j#T~#WP#f#g#Z~#^P#X#Y#a~#fOT~~#iP#d#e#a~#oQ#[#]#u#g#h#a~#xP#T#U#{~$OP#f#g#f~$UP#f#g$X~$[P#`#a$_~$bP#T#U$e~$hP#b#c$k~$nP#Z#[#a~$tP#c#d$X~$zP#h#i$}~%QP#a#b%T~%WP#`#a#a~%^Q#T#U%d#g#h&h~%gP#j#k%j~%mP#T#U%p~%uPT~#g#h%x~%{P#V#W&O~&RP#f#g&U~&XP#]#^&[~&_P#d#e&b~&eP#h#i#a~&kP#c#d&n~&qP#b#c#a~&wP#X#Y&z~&}P#n#o'Q~'TP#X#Y'W~'ZP#f#g#a~'aP#T#U'd~'gQ#f#g'm#h#i(V~'pP#_#`'s~'vP#W#X'y~'|P#c#d(P~(SP#k#l&n~(YP#[#]#a~(`Q#[#]#f#m#n(f~(iP#h#i(l~(oP#[#]&h~(uP#i#j(x~({Q#U#V)R#g#h&b~)UP#m#n#a~)[Q#[#])b#e#f%T~)eP#X#Y)h~)kP#`#a%T~)qP#X#Y)t~)wP#l#m&b~)}P#T#U$}~*TP%&x%&y*W~*ZP%&x%&y*^~*cOY~",
   tokenizers: [0, noteContent],
   topRules: {"Document":[0,2]},
   tokenPrec: 0
diff --git a/src/editor/language-detection/autodetect.js b/src/editor/language-detection/autodetect.js
index d39dcd4..92ad144 100644
--- a/src/editor/language-detection/autodetect.js
+++ b/src/editor/language-detection/autodetect.js
@@ -9,6 +9,21 @@ import { LANGUAGE_CHANGE } from "../annotation";
 
 const GUESSLANG_TO_TOKEN = Object.fromEntries(LANGUAGES.map(l => [l.guesslang,l.token]))
 
+function requestIdleCallbackCompat(cb) {
+    if (window.requestIdleCallback) {
+        return window.requestIdleCallback(cb)
+    } else {
+        return setTimeout(cb, 0)
+    }
+}
+
+function cancelIdleCallbackCompat(id) {
+    if (window.cancelIdleCallback) {
+        window.cancelIdleCallback(id)
+    } else {
+        clearTimeout(id)
+    }
+}
 
 export function languageDetection(getView) {
     const previousBlockContent = {}
@@ -45,11 +60,11 @@ export function languageDetection(getView) {
     const plugin = EditorView.updateListener.of(update => {
         if (update.docChanged) {
             if (idleCallbackId !== null) {
-                cancelIdleCallback(idleCallbackId)
+                cancelIdleCallbackCompat(idleCallbackId)
                 idleCallbackId = null
             }
 
-            idleCallbackId = requestIdleCallback(() => {
+            idleCallbackId = requestIdleCallbackCompat(() => {
                 idleCallbackId = null
                 
                 const range = update.state.selection.asSingle().ranges[0]
diff --git a/src/editor/languages.js b/src/editor/languages.js
index 59a7d51..6e8a1ec 100644
--- a/src/editor/languages.js
+++ b/src/editor/languages.js
@@ -13,31 +13,189 @@ import { xmlLanguage } from "@codemirror/lang-xml"
 import { rustLanguage } from "@codemirror/lang-rust"
 import { csharpLanguage } from "@replit/codemirror-lang-csharp"
 
+import { StreamLanguage } from "@codemirror/language"
+import { ruby } from "@codemirror/legacy-modes/mode/ruby"
+import { shell } from "@codemirror/legacy-modes/mode/shell"
+import { yaml } from "@codemirror/legacy-modes/mode/yaml"
+import { go } from "@codemirror/legacy-modes/mode/go"
+import { clojure } from "@codemirror/legacy-modes/mode/clojure"
+import { erlang } from "@codemirror/legacy-modes/mode/erlang"
+
+import babelPrettierPlugin from "prettier/plugins/babel.mjs"
+import htmlPrettierPlugin from "prettier/esm/parser-html.mjs"
+import cssPrettierPlugin from "prettier/esm/parser-postcss.mjs"
+import markdownPrettierPlugin from "prettier/esm/parser-markdown.mjs"
+import yamlPrettierPlugin from "prettier/plugins/yaml.mjs"
+import * as prettierPluginEstree from "prettier/plugins/estree.mjs";
+
+
 class Language {
-    constructor(token, name, parser, guesslang, supportsFormat = false) {
+    /**
+     * @param token: The token used to identify the language in the buffer content
+     * @param name: The name of the language
+     * @param parser: The Lezer parser used to parse the language 
+     * @param guesslang: The name of the language as used by the guesslang library
+     * @param prettier: The prettier configuration for the language (if any)
+     */
+    constructor({ token, name, parser, guesslang, prettier }) {
         this.token = token
         this.name = name
         this.parser = parser
         this.guesslang = guesslang
-        this.supportsFormat = supportsFormat
+        this.prettier = prettier
+    }
+
+    get supportsFormat() {
+        return !!this.prettier
     }
 }
 
 export const LANGUAGES = [
-    new Language("text", "Plain Text", null, null),
-    new Language("math", "Math", null, null),
-    new Language("javascript", "JavaScript", javascriptLanguage.parser, "js", true),
-    new Language("json", "JSON", jsonLanguage.parser, "json", true),
-    new Language("python", "Python", pythonLanguage.parser, "py"),
-    new Language("html", "HTML", htmlLanguage.parser, "html", true),
-    new Language("sql", "SQL", StandardSQL.language.parser, "sql"),
-    new Language("markdown", "Markdown", markdownLanguage.parser, "md", true),
-    new Language("java", "Java", javaLanguage.parser, "java"),
-    //new Language("lezer", "Lezer", lezerLanguage.parser, "lezer"),
-    new Language("php", "PHP", phpLanguage.parser, "php"),
-    new Language("css", "CSS", cssLanguage.parser, "css", true),
-    new Language("xml", "XML", xmlLanguage.parser, "xml"),
-    new Language("cpp", "C++", cppLanguage.parser, "cpp"),
-    new Language("rust", "Rust", rustLanguage.parser, "rust"),
-    new Language("csharp", "C#", csharpLanguage.parser, "cs"),
+    new Language({
+        token: "text",
+        name: "Plain Text",
+        parser: null,
+        guesslang: null,
+    }),
+    new Language({
+        token: "math",
+        name: "Math",
+        parser: null,
+        guesslang: null,
+    }),
+    new Language({
+        token: "json",
+        name: "JSON",
+        parser: jsonLanguage.parser,
+        guesslang: "json",
+        prettier: {parser:"json-stringify", plugins: [babelPrettierPlugin, prettierPluginEstree]},
+    }),
+    new Language({
+        token: "python",
+        name: "Python",
+        parser: pythonLanguage.parser,
+        guesslang: "py",
+    }),
+    new Language({
+        token: "html",
+        name: "HTML",
+        parser: htmlLanguage.parser,
+        guesslang: "html",
+        prettier: {parser:"html", plugins: [htmlPrettierPlugin]},
+    }),
+    new Language({
+        token: "sql",
+        name: "SQL",
+        parser: StandardSQL.language.parser,
+        guesslang: "sql",
+    }),
+    new Language({
+        token: "markdown",
+        name: "Markdown",
+        parser: markdownLanguage.parser,
+        guesslang: "md",
+        prettier: {parser:"markdown", plugins: [markdownPrettierPlugin]},
+    }),
+    new Language({
+        token: "java",
+        name: "Java",
+        parser: javaLanguage.parser,
+        guesslang: "java",
+    }),
+    new Language({
+        token: "lezer",
+        name: "Lezer",
+        parser: lezerLanguage.parser,
+        guesslang: null,
+    }),
+    new Language({
+        token: "php",
+        name: "PHP",
+        parser: phpLanguage.parser,
+        guesslang: "php",
+    }),
+    new Language({
+        token: "css",
+        name: "CSS",
+        parser: cssLanguage.parser,
+        guesslang: "css",
+        prettier: {parser:"css", plugins: [cssPrettierPlugin]},
+    }),
+    new Language({
+        token: "xml",
+        name: "XML",
+        parser: xmlLanguage.parser,
+        guesslang: "xml",
+    }),
+    new Language({
+        token: "cpp",
+        name: "C++",
+        parser: cppLanguage.parser,
+        guesslang: "cpp",
+    }),
+    new Language({
+        token: "rust",
+        name: "Rust",
+        parser: rustLanguage.parser,
+        guesslang: "rs",
+    }),
+    new Language({
+        token: "csharp",
+        name: "C#",
+        parser: csharpLanguage.parser,
+        guesslang: "cs",
+    }),
+    new Language({
+        token: "ruby",
+        name: "Ruby",
+        parser: StreamLanguage.define(ruby).parser,
+        guesslang: "rb",
+    }),
+    new Language({
+        token: "shell",
+        name: "Shell",
+        parser: StreamLanguage.define(shell).parser,
+        guesslang: "sh",
+    }),
+    new Language({
+        token: "yaml",
+        name: "YAML",
+        parser: StreamLanguage.define(yaml).parser,
+        guesslang: "yaml",
+        prettier: {parser:"yaml", plugins: [yamlPrettierPlugin]},
+    }),
+    new Language({
+        token: "golang",
+        name: "Go",
+        parser: StreamLanguage.define(go).parser,
+        guesslang: "go",
+    }),
+    new Language({
+        token: "clojure",
+        name: "Clojure",
+        parser: StreamLanguage.define(clojure).parser,
+        guesslang: "clj",
+    }),
+    new Language({
+        token: "erlang",
+        name: "Erlang",
+        parser: StreamLanguage.define(erlang).parser,
+        guesslang: "erl",
+    }),
+    new Language({
+        token: "javascript",
+        name: "JavaScript",
+        parser: javascriptLanguage.parser,
+        guesslang: "js",
+        prettier: {parser:"babel", plugins: [babelPrettierPlugin, prettierPluginEstree]},
+    }),
 ]
+
+
+const languageMapping = Object.fromEntries(LANGUAGES.map(l => [l.token, l]))
+
+export function getLanguage(token) {
+    return languageMapping[token]
+}
+
+
diff --git a/tests/formatting.spec.js b/tests/formatting.spec.js
new file mode 100644
index 0000000..76d91ae
--- /dev/null
+++ b/tests/formatting.spec.js
@@ -0,0 +1,46 @@
+import { test, expect } from "@playwright/test";
+import { HeynotePage } from "./test-utils.js";
+
+let heynotePage
+
+test.beforeEach(async ({ page }) => {
+    console.log("beforeEach")
+    heynotePage = new HeynotePage(page)
+    await heynotePage.goto()
+})
+
+
+test("JSON formatting", async ({ page }) => {
+    heynotePage.setContent(`
+∞∞∞json
+    {"test": 1, "key2": "hey!"}
+`)
+    expect(await page.locator("css=.status .status-block.lang")).toHaveText("JSON")
+    await page.locator("css=.status-block.format").click()
+    await page.waitForTimeout(100)
+    expect(await heynotePage.getBlockContent(0)).toBe(`{
+    "test": 1,
+    "key2": "hey!"
+}
+`)
+})
+
+test("JSON formatting (cursor at start)", async ({ page }) => {
+    heynotePage.setContent(`
+∞∞∞json
+    {"test": 1, "key2": "hey!"}
+`)
+    expect(await page.locator("css=.status .status-block.lang")).toHaveText("JSON")
+    for (let i=0; i<5; i++) {
+        await page.locator("body").press("ArrowUp")
+    }
+    await page.locator("css=.status-block.format").click()
+    await page.waitForTimeout(100)
+    expect(await heynotePage.getBlockContent(0)).toBe(`{
+    "test": 1,
+    "key2": "hey!"
+}
+`)
+    const block = (await heynotePage.getBlocks())[0]
+    expect(await page.evaluate(() => window._heynote_editor.view.state.selection.main.from)).toBe(block.content.from)
+})
\ No newline at end of file
diff --git a/tests/language-detection.spec.js b/tests/language-detection.spec.js
new file mode 100644
index 0000000..ae625f4
--- /dev/null
+++ b/tests/language-detection.spec.js
@@ -0,0 +1,39 @@
+import { test, expect } from "@playwright/test";
+import { HeynotePage } from "./test-utils.js";
+
+let heynotePage
+
+test.beforeEach(async ({ page }) => {
+    console.log("beforeEach")
+    heynotePage = new HeynotePage(page)
+    await heynotePage.goto()
+})
+
+
+test("test valid JSON detection", async ({ page }) => {
+    await page.locator("body").pressSequentially(`
+        {"test": 1, "key2": "hey!"}
+    `)
+    await expect(page.locator("css=.status .status-block.lang")).toHaveText("JSON (auto)")
+    const block = (await heynotePage.getBlocks())[0]
+    expect(block.language.name).toBe("json")
+    expect(block.language.auto).toBeTruthy()
+})
+
+
+test("python detection", async ({ page }) => {
+    await page.locator("body").pressSequentially(`
+# import complex math module
+import cmath
+
+# calculate the discriminant
+d = (b**2) - (4*a*c)
+
+# find two solutions
+sol1 = (-b-cmath.sqrt(d))/(2*a)
+sol2 = (-b+cmath.sqrt(d))/(2*a)
+
+print('The solution are {0} and {1}'.format(sol1,sol2))
+    `)
+    await expect(page.locator("css=.status .status-block.lang")).toHaveText("Python (auto)")
+})
diff --git a/tests/markdown.spec.js b/tests/markdown.spec.js
index e83528d..d174c13 100644
--- a/tests/markdown.spec.js
+++ b/tests/markdown.spec.js
@@ -10,24 +10,25 @@ test.beforeEach(async ({ page }) => {
 });
 
 test("test markdown mode", async ({ page }) => {
-    heynotePage.setContent(`
+    await heynotePage.setContent(`
 ∞∞∞markdown
 # Markdown!
 
 - [ ] todo
 - [x] done
 `)
+    await page.waitForTimeout(200)
     //await page.locator("body").pressSequentially("test")
-    expect(await page.locator("css=.status .status-block.lang")).toHaveText("Markdown")
+    await expect(page.locator("css=.status .status-block.lang")).toHaveText("Markdown")
 })
 
 test("checkbox toggle", async ({ page }) => {
-    heynotePage.setContent(`
+    await heynotePage.setContent(`
 ∞∞∞markdown
 - [ ] todo
 `)
     const checkbox = await page.locator("css=.cm-content input[type=checkbox]")
-    expect(checkbox).toHaveCount(1)
+    await expect(checkbox).toHaveCount(1)
     await checkbox.click()
     expect(await heynotePage.getBlockContent(0)).toBe("- [x] todo\n")
     await checkbox.click()
diff --git a/tests/test-utils.js b/tests/test-utils.js
index 005694c..4ef6fe7 100644
--- a/tests/test-utils.js
+++ b/tests/test-utils.js
@@ -29,7 +29,7 @@ export class HeynotePage {
     async getContent() {
         return await this.page.evaluate(() => window._heynote_editor.getContent())
     }
-    
+
     async setContent(content) {
         await this.page.evaluate((content) => window._heynote_editor.setContent(content), content)
     }