From dba10eab24c6421414adf46c249eb45c402e9956 Mon Sep 17 00:00:00 2001 From: Chili Palmer Date: Mon, 27 Apr 2026 20:15:55 +0200 Subject: [PATCH] feat: added in monaco setups and hooks --- .../script_editor.html.heex | 2 +- .../template_editor.html.heex | 2 +- .../post_editor_html/post_editor.html.heex | 2 +- priv/ui/live.js | 60 ++++++++++++++++++- test/bds/desktop/shell_live_test.exs | 6 +- 5 files changed, 66 insertions(+), 6 deletions(-) diff --git a/lib/bds/desktop/shell_live/code_entity_editor_html/script_editor.html.heex b/lib/bds/desktop/shell_live/code_entity_editor_html/script_editor.html.heex index fd449e9..877fddd 100644 --- a/lib/bds/desktop/shell_live/code_entity_editor_html/script_editor.html.heex +++ b/lib/bds/desktop/shell_live/code_entity_editor_html/script_editor.html.heex @@ -31,7 +31,7 @@ data-monaco-editor-id={@script_editor.id} data-monaco-input-id={"script-editor-content-#{@script_editor.id}"} data-monaco-language="lua" - data-monaco-word-wrap="off" + data-monaco-word-wrap="on" >
diff --git a/lib/bds/desktop/shell_live/code_entity_editor_html/template_editor.html.heex b/lib/bds/desktop/shell_live/code_entity_editor_html/template_editor.html.heex index 869b396..1c5e6ee 100644 --- a/lib/bds/desktop/shell_live/code_entity_editor_html/template_editor.html.heex +++ b/lib/bds/desktop/shell_live/code_entity_editor_html/template_editor.html.heex @@ -29,7 +29,7 @@ data-monaco-editor-id={@template_editor.id} data-monaco-input-id={"template-editor-content-#{@template_editor.id}"} data-monaco-language="liquid" - data-monaco-word-wrap="off" + data-monaco-word-wrap="on" >
diff --git a/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex b/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex index 98892d6..9438ae6 100644 --- a/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex +++ b/lib/bds/desktop/shell_live/post_editor_html/post_editor.html.heex @@ -394,7 +394,7 @@ phx-hook="MonacoEditor" data-monaco-editor-id={@post_editor.id} data-monaco-input-id={"post-editor-content-#{@post_editor.id}"} - data-monaco-language="markdown" + data-monaco-language="markdown-with-macros" data-monaco-word-wrap="on" data-monaco-insert-event="post-editor-insert-content" > diff --git a/priv/ui/live.js b/priv/ui/live.js index 5cf2587..ff955e4 100644 --- a/priv/ui/live.js +++ b/priv/ui/live.js @@ -157,6 +157,7 @@ document.addEventListener("DOMContentLoaded", () => { let monacoLoaderPromise; let liquidLanguageRegistered = false; + let markdownWithMacrosRegistered = false; let monacoThemeSignature = null; const cssVar = (name, fallback) => { @@ -337,6 +338,49 @@ document.addEventListener("DOMContentLoaded", () => { liquidLanguageRegistered = true; }; + const registerMarkdownWithMacrosLanguage = (monaco) => { + if (markdownWithMacrosRegistered) { + return; + } + + monaco.languages.register({ id: "markdown-with-macros" }); + monaco.languages.setMonarchTokensProvider("markdown-with-macros", { + defaultToken: "", + tokenPostfix: ".md", + tokenizer: { + root: [ + [/\[\[[a-zA-Z][\w-]*/, { token: "keyword.macro", next: "@macroParams" }], + [/^#{1,6}\s.*$/, "keyword.header"], + [/^\s*>+/, "string.quote"], + [/^\s*[-+*]\s/, "keyword"], + [/^\s*\d+\.\s/, "keyword"], + [/^\s*```\w*/, { token: "string.code", next: "@codeblock" }], + [/\*\*[^*]+\*\*/, "strong"], + [/\*[^*]+\*/, "emphasis"], + [/__[^_]+__/, "strong"], + [/_[^_]+_/, "emphasis"], + [/`[^`]+`/, "variable"], + [/!?\[[^\]]*\]\([^)]*\)/, "string.link"], + [/!?\[[^\]]*\]\[[^\]]*\]/, "string.link"] + ], + macroParams: [ + [/\]\]/, { token: "keyword.macro", next: "@root" }], + [/[a-zA-Z][\w-]*(?=\s*=)/, "attribute.name"], + [/=/, "delimiter"], + [/"[^"]*"/, "string"], + [/\s+/, "white"], + [/[^\]"=\s]+/, "attribute.value"] + ], + codeblock: [ + [/^\s*```\s*$/, { token: "string.code", next: "@root" }], + [/.*$/, "variable.source"] + ] + } + }); + + markdownWithMacrosRegistered = true; + }; + const ensureMonacoTheme = (monaco) => { const background = cssVar("--vscode-editor-background", cssVar("--vscode-input-background", "#1e1e1e")); const foreground = cssVar("--vscode-editor-foreground", "#d4d4d4"); @@ -356,7 +400,11 @@ document.addEventListener("DOMContentLoaded", () => { monaco.editor.defineTheme("bds-theme", { base: colorIsDark(background) ? "vs-dark" : "vs", inherit: true, - rules: [], + rules: [ + { token: "keyword.macro", foreground: "C586C0", fontStyle: "bold" }, + { token: "attribute.name", foreground: "9CDCFE" }, + { token: "attribute.value", foreground: "CE9178" } + ], colors: { "editor.background": background, "editor.foreground": foreground, @@ -383,6 +431,7 @@ document.addEventListener("DOMContentLoaded", () => { if (window.monaco?.editor) { ensureMonacoTheme(window.monaco); registerLiquidLanguage(window.monaco); + registerMarkdownWithMacrosLanguage(window.monaco); return Promise.resolve(window.monaco); } @@ -398,6 +447,7 @@ document.addEventListener("DOMContentLoaded", () => { window.require(["vs/editor/editor.main"], () => { ensureMonacoTheme(window.monaco); registerLiquidLanguage(window.monaco); + registerMarkdownWithMacrosLanguage(window.monaco); resolve(window.monaco); }, reject); }) @@ -709,9 +759,17 @@ document.addEventListener("DOMContentLoaded", () => { minimap: { enabled: false }, scrollBeyondLastLine: false, wordWrap: this.wordWrap, + lineNumbers: "on", lineNumbersMinChars: 3, + fontSize: 14, + fontFamily: "'Cascadia Code', 'Consolas', 'Courier New', monospace", + padding: { top: 12, bottom: 12 }, roundedSelection: false, renderLineHighlight: "line", + formatOnPaste: true, + cursorStyle: "line", + cursorBlinking: "smooth", + quickSuggestions: this.language === "markdown-with-macros" ? false : true, tabSize: 2, insertSpaces: true }); diff --git a/test/bds/desktop/shell_live_test.exs b/test/bds/desktop/shell_live_test.exs index 37bdfd9..883ded8 100644 --- a/test/bds/desktop/shell_live_test.exs +++ b/test/bds/desktop/shell_live_test.exs @@ -1315,7 +1315,7 @@ defmodule BDS.Desktop.ShellLiveTest do html = render_click(view, "set_post_editor_mode", %{"id" => post.id, "mode" => "markdown"}) assert html =~ ~s(data-testid="post-editor-content") - assert html =~ ~s(data-monaco-language="markdown") + assert html =~ ~s(data-monaco-language="markdown-with-macros") assert html =~ ~s(phx-hook="MonacoEditor") refute html =~ "post-editor-markdown-highlight" @@ -1439,7 +1439,7 @@ defmodule BDS.Desktop.ShellLiveTest do assert html =~ ~s(data-testid="post-editor-content") assert Regex.match?(~r/name="post_editor\[content\]"[^>]*># Heading\s+```elixir\s+IO\.puts\(:ok\)\s+```/s, html) - assert html =~ ~s(data-monaco-language="markdown") + assert html =~ ~s(data-monaco-language="markdown-with-macros") assert html =~ ~s(phx-hook="MonacoEditor") refute html =~ "post-editor-markdown-highlight" refute html =~ ~s(phx-value-mode="visual") @@ -1704,6 +1704,7 @@ defmodule BDS.Desktop.ShellLiveTest do assert script_html =~ ~s(class="scripts-view-shell") assert script_html =~ "scripts-monaco" assert script_html =~ ~s(data-monaco-language="lua") + assert script_html =~ ~s(data-monaco-word-wrap="on") assert script_html =~ ~s(phx-hook="MonacoEditor") refute script_html =~ "Desktop workbench content routed through the Elixir shell." @@ -1718,6 +1719,7 @@ defmodule BDS.Desktop.ShellLiveTest do assert template_html =~ ~s(class="templates-view-shell") assert template_html =~ "templates-monaco" assert template_html =~ ~s(data-monaco-language="liquid") + assert template_html =~ ~s(data-monaco-word-wrap="on") assert template_html =~ ~s(phx-hook="MonacoEditor") refute template_html =~ "Desktop workbench content routed through the Elixir shell."