From e1fe26b881fc82d48d9bef668626013335b42648 Mon Sep 17 00:00:00 2001 From: Jonatan Heyman Date: Fri, 3 Mar 2023 01:40:24 +0100 Subject: [PATCH] Add format block button to status bar, when a supported block is active --- public/icons/format.svg | 1 + src/components/App.vue | 5 +++++ src/components/Editor.vue | 5 +++++ src/components/StatusBar.vue | 28 ++++++++++++++++++++++++++++ src/editor/block/format-code.js | 1 + src/editor/editor.js | 8 ++++++++ src/editor/languages.js | 13 +++++++------ 7 files changed, 55 insertions(+), 6 deletions(-) create mode 100644 public/icons/format.svg diff --git a/public/icons/format.svg b/public/icons/format.svg new file mode 100644 index 0000000..f889346 --- /dev/null +++ b/public/icons/format.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/App.vue b/src/components/App.vue index 550bfab..f7d70d7 100644 --- a/src/components/App.vue +++ b/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" />
diff --git a/src/components/Editor.vue b/src/components/Editor.vue index bf7d6e6..b4f62a5 100644 --- a/src/components/Editor.vue +++ b/src/components/Editor.vue @@ -108,6 +108,11 @@ this.editor.focus() }, + formatCurrentBlock() { + this.editor.formatCurrentBlock() + this.editor.focus() + }, + focus() { this.editor.focus() }, diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue index 7240da4..7172339 100644 --- a/src/components/StatusBar.vue +++ b/src/components/StatusBar.vue @@ -1,5 +1,6 @@ @@ -42,6 +48,14 @@ {{ languageName }} (auto)
+
+ +
@@ -117,5 +131,19 @@ background-image: url("icons/light-mode.png") &.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") diff --git a/src/editor/block/format-code.js b/src/editor/block/format-code.js index d7711de..f2ea0f2 100644 --- a/src/editor/block/format-code.js +++ b/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; } diff --git a/src/editor/editor.js b/src/editor/editor.js index f1d93b2..ea4fd92 100644 --- a/src/editor/editor.js +++ b/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, + }) + } } diff --git a/src/editor/languages.js b/src/editor/languages.js index 4b1f255..1aae1b8 100644 --- a/src/editor/languages.js +++ b/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"),