Add format block button to status bar, when a supported block is active

public/icons/format.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.75 4.5a.75.75 0 0 0 0 1.5h14.5a.75.75 0 0 0 0-1.5H2.75ZM2.75 7.5a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5ZM2.75 10.5a.75.75 0 0 0 0 1.5h6.633a1.496 1.496 0 0 1-.284-1.5H2.75ZM2.75 13.5h6.628L7.876 15H2.75a.75.75 0 0 1 0-1.5ZM14.496 7.439a.5.5 0 0 0-.992 0l-.098.791a2.5 2.5 0 0 1-2.176 2.176l-.791.098a.5.5 0 0 0 0 .992l.791.098a2.5 2.5 0 0 1 2.176 2.176l.098.791a.5.5 0 0 0 .992 0l.098-.791a2.5 2.5 0 0 1 2.176-2.176l.791-.098a.5.5 0 0 0 0-.992l-.791-.098a2.5 2.5 0 0 1-2.176-2.176l-.098-.791ZM11.853 13.147a.5.5 0 0 1 0 .707l-4 3.996a.5.5 0 0 1-.706-.707l3.999-3.997a.5.5 0 0 1 .707 0Z" fill="#ffffff" class="fill-212121"></path></svg>

src/components/App.vue

@@ -91,6 +91,10 @@
                 this.showLanguageSelector = false
                 this.$refs.editor.setLanguage(language)
             },
+
+            formatCurrentBlock() {
+                this.$refs.editor.formatCurrentBlock()
+            },
         },
     }
 
@@ -119,6 +123,7 @@
             :systemTheme="systemTheme"
             @toggleTheme="toggleTheme"
             @openLanguageSelector="openLanguageSelector"
+            @formatCurrentBlock="formatCurrentBlock"
             class="status" 
         />
         <div class="overlay">

src/components/Editor.vue

@@ -108,6 +108,11 @@
                 this.editor.focus()
             },
 
+            formatCurrentBlock() {
+                this.editor.formatCurrentBlock()
+                this.editor.focus()
+            },
+
             focus() {
                 this.editor.focus()
             },

src/components/StatusBar.vue

@@ -1,5 +1,6 @@
 <script>
     import { LANGUAGES } from '../editor/languages.js'
+    const LANGUAGE_MAP = Object.fromEntries(LANGUAGES.map(l => [l.token, l]))
     const LANGUAGE_NAMES = Object.fromEntries(LANGUAGES.map(l => [l.token, l.name]))
 
     export default {
@@ -24,6 +25,11 @@
             className() {
                 return `status`
             },
+
+            supportsFormat() {
+                const lang = LANGUAGE_MAP[this.language]
+                return !!lang ? lang.supportsFormat : false
+            },
         },
     }
 </script>
@@ -42,6 +48,14 @@
             {{ languageName }} 
             <span v-if="languageAuto" class="auto">(auto)</span>
         </div>
+        <div 
+            v-if="supportsFormat"
+            @click="$emit('formatCurrentBlock')"
+            class="status-block format clickable"
+            title="Format Block Content"
+        >
+            <span class="icon icon-format"></span>
+        </div>
         <div class="status-block theme clickable" @click="$emit('toggleTheme')">
             <span :class="'icon ' + systemTheme"></span>
         </div>
@@ -118,4 +132,18 @@
                 &.system
                     background-image: url("icons/both-mode.png")
         
+        .format
+            padding-top: 0
+            padding-bottom: 0
+            .icon
+                display: block
+                width: 14px
+                height: 22px
+                +dark-mode
+                    opacity: 0.9
+                background-size: 16px
+                background-repeat: no-repeat
+                background-position: center center
+                background-image: url("icons/format.svg")
+
 </style>

src/editor/block/format-code.js

@@ -49,6 +49,7 @@ export const formatBlockContent = ({ state, dispatch }) => {
         selection: EditorSelection.cursor(block.content.from + formattedContent.cursorOffset)
     }, {
         userEvent: "input",
+        scrollIntoView: true,
     }))
     return true;
 }

src/editor/editor.js

@@ -9,6 +9,7 @@ import { customSetup } from "./setup.js"
 import { heynoteLang } from "./lang-heynote/heynote.js"
 import { noteBlockExtension, blockLineNumbers } from "./block/block.js"
 import { changeCurrentBlockLanguage } from "./block/commands.js"
+import { formatBlockContent } from "./block/format-code.js"
 import { heynoteKeymap, emacsKeymap } from "./keymap.js"
 import { heynoteCopyPaste } from "./copy-paste"
 import { languageDetection } from "./language-detection/autodetect.js"
@@ -131,6 +132,13 @@ export class HeynoteEditor {
             effects: this.foldGutterCompartment.reconfigure(show ? [foldGutter()] : []),
         })
     }
+
+    formatCurrentBlock() {
+        formatBlockContent({
+            state: this.view.state, 
+            dispatch: this.view.dispatch,
+        })
+    }
 }
 
 

src/editor/languages.js

@@ -14,27 +14,28 @@ import { rustLanguage } from "@codemirror/lang-rust"
 
 
 class Language {
-    constructor(token, name, parser, highlightjs) {
+    constructor(token, name, parser, highlightjs, supportsFormat=false) {
         this.token = token
         this.name = name
         this.parser = parser
         this.highlightjs = highlightjs
+        this.supportsFormat = supportsFormat
     }
 }
 
 export const LANGUAGES = [
     new Language("text", "Plain Text", null, "plaintext"),
     new Language("math", "Math", null, null),
-    new Language("javascript", "JavaScript", javascriptLanguage.parser, "javascript"),
-    new Language("json", "JSON", jsonLanguage.parser, "json"),
+    new Language("javascript", "JavaScript", javascriptLanguage.parser, "javascript", true),
+    new Language("json", "JSON", jsonLanguage.parser, "json", true),
     new Language("python", "Python", pythonLanguage.parser, "python"),
-    new Language("html", "HTML", htmlLanguage.parser, "html"),
+    new Language("html", "HTML", htmlLanguage.parser, "html", true),
     new Language("sql", "SQL", StandardSQL.language.parser, "sql"),
-    new Language("markdown", "Markdown", markdownLanguage.parser, "markdown"),
+    new Language("markdown", "Markdown", markdownLanguage.parser, "markdown", 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"),
+    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"),