From f54aa3d82373b2397d0c589b35ad33293111341f Mon Sep 17 00:00:00 2001 From: eefano <77832+eefano@users.noreply.github.com> Date: Thu, 22 Feb 2024 22:04:57 +0100 Subject: [PATCH 1/5] 'Enable Bracket Matching' option in Codemirror --- packages/codemirror/codemirror.mjs | 7 ++++++- website/src/repl/Repl.css | 5 +++++ website/src/repl/panel/SettingsTab.jsx | 6 ++++++ website/src/settings.mjs | 2 ++ 4 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index 0eec08d1..36687a83 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -2,7 +2,7 @@ import { closeBrackets } from '@codemirror/autocomplete'; // import { search, highlightSelectionMatches } from '@codemirror/search'; import { history } from '@codemirror/commands'; import { javascript } from '@codemirror/lang-javascript'; -import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'; +import { defaultHighlightStyle, syntaxHighlighting, bracketMatching } from '@codemirror/language'; import { Compartment, EditorState, Prec } from '@codemirror/state'; import { EditorView, @@ -24,6 +24,7 @@ import { persistentAtom } from '@nanostores/persistent'; const extensions = { isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []), + isBracketMatchingEnabled: (on) => (on ? bracketMatching() : []), isLineNumbersDisplayed: (on) => (on ? lineNumbers() : []), theme, isAutoCompletionEnabled, @@ -37,6 +38,7 @@ const compartments = Object.fromEntries(Object.keys(extensions).map((key) => [ke export const defaultSettings = { keybindings: 'codemirror', + isBracketMatchingEnabled: false, isLineNumbersDisplayed: true, isActiveLineHighlighted: false, isAutoCompletionEnabled: false, @@ -290,6 +292,9 @@ export class StrudelMirror { setLineWrappingEnabled(enabled) { this.reconfigureExtension('isLineWrappingEnabled', enabled); } + setBracketMatchingEnabled(enabled) { + this.reconfigureExtension('isBracketMatchingEnabled', enabled); + } setLineNumbersDisplayed(enabled) { this.reconfigureExtension('isLineNumbersDisplayed', enabled); } diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css index 2d97d8a2..e2488b52 100644 --- a/website/src/repl/Repl.css +++ b/website/src/repl/Repl.css @@ -64,3 +64,8 @@ #code .cm-focused { outline: none; } + +#code .cm-matchingBracket { + text-decoration: underline 0.18rem; + text-underline-offset: 0.25rem; +} diff --git a/website/src/repl/panel/SettingsTab.jsx b/website/src/repl/panel/SettingsTab.jsx index dc221300..7b968ad5 100644 --- a/website/src/repl/panel/SettingsTab.jsx +++ b/website/src/repl/panel/SettingsTab.jsx @@ -77,6 +77,7 @@ export function SettingsTab({ started }) { const { theme, keybindings, + isBracketMatchingEnabled, isLineNumbersDisplayed, isPatternHighlightingEnabled, isActiveLineHighlighted, @@ -137,6 +138,11 @@ export function SettingsTab({ started }) { > + settingsMap.setKey('isBracketMatchingEnabled', cbEvent.target.checked)} + value={isBracketMatchingEnabled} + /> settingsMap.setKey('isLineNumbersDisplayed', cbEvent.target.checked)} diff --git a/website/src/settings.mjs b/website/src/settings.mjs index 27888800..6e768378 100644 --- a/website/src/settings.mjs +++ b/website/src/settings.mjs @@ -7,6 +7,7 @@ export const defaultAudioDeviceName = 'System Standard'; export const defaultSettings = { activeFooter: 'intro', keybindings: 'codemirror', + isBracketMatchingEnabled: false, isLineNumbersDisplayed: true, isActiveLineHighlighted: true, isAutoCompletionEnabled: false, @@ -40,6 +41,7 @@ export function useSettings() { return { ...state, isZen: [true, 'true'].includes(state.isZen) ? true : false, + isBracketMatchingEnabled: [true, 'true'].includes(state.isBracketMatchingEnabled) ? true : false, isLineNumbersDisplayed: [true, 'true'].includes(state.isLineNumbersDisplayed) ? true : false, isActiveLineHighlighted: [true, 'true'].includes(state.isActiveLineHighlighted) ? true : false, isAutoCompletionEnabled: [true, 'true'].includes(state.isAutoCompletionEnabled) ? true : false, From 8af40a9c615e3e2d13c7aaf51544a8bfc1b3bedd Mon Sep 17 00:00:00 2001 From: eefano <77832+eefano@users.noreply.github.com> Date: Thu, 22 Feb 2024 23:35:00 +0100 Subject: [PATCH 2/5] added <> for mininotation --- packages/codemirror/codemirror.mjs | 2 +- website/src/repl/Repl.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index 36687a83..7e66c49f 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -24,7 +24,7 @@ import { persistentAtom } from '@nanostores/persistent'; const extensions = { isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []), - isBracketMatchingEnabled: (on) => (on ? bracketMatching() : []), + isBracketMatchingEnabled: (on) => (on ? bracketMatching({brackets: "()[]{}<>"}) : []), isLineNumbersDisplayed: (on) => (on ? lineNumbers() : []), theme, isAutoCompletionEnabled, diff --git a/website/src/repl/Repl.css b/website/src/repl/Repl.css index e2488b52..3e13ff5a 100644 --- a/website/src/repl/Repl.css +++ b/website/src/repl/Repl.css @@ -67,5 +67,5 @@ #code .cm-matchingBracket { text-decoration: underline 0.18rem; - text-underline-offset: 0.25rem; + text-underline-offset: 0.22rem; } From 22e3067b8caa29e88be468ee2dc324636fa92bfc Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 25 Feb 2024 13:16:53 +0100 Subject: [PATCH 3/5] set bracket matching true by default --- examples/buildless/headless-simple.html | 2 +- website/src/settings.mjs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/buildless/headless-simple.html b/examples/buildless/headless-simple.html index 013cc87b..a9d5248a 100644 --- a/examples/buildless/headless-simple.html +++ b/examples/buildless/headless-simple.html @@ -5,6 +5,6 @@ import { initStrudel } from 'https://cdn.skypack.dev/@strudel/web@0.8.2'; initStrudel(); - document.getElementById('play').addEventListener('click', () => evaluate('note("c a f e").jux(rev)')); + document.getElementById('play').addEventListener('click', () => strudel.evaluate('note("c a f e").jux(rev)')); document.getElementById('play').addEventListener('stop', () => hush()); diff --git a/website/src/settings.mjs b/website/src/settings.mjs index 6e768378..34aca701 100644 --- a/website/src/settings.mjs +++ b/website/src/settings.mjs @@ -7,7 +7,7 @@ export const defaultAudioDeviceName = 'System Standard'; export const defaultSettings = { activeFooter: 'intro', keybindings: 'codemirror', - isBracketMatchingEnabled: false, + isBracketMatchingEnabled: true, isLineNumbersDisplayed: true, isActiveLineHighlighted: true, isAutoCompletionEnabled: false, From b0b41e6718b353227a595a220e535ba03c3a6e4b Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 25 Feb 2024 13:17:29 +0100 Subject: [PATCH 4/5] revert unintended change --- examples/buildless/headless-simple.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/buildless/headless-simple.html b/examples/buildless/headless-simple.html index a9d5248a..013cc87b 100644 --- a/examples/buildless/headless-simple.html +++ b/examples/buildless/headless-simple.html @@ -5,6 +5,6 @@ import { initStrudel } from 'https://cdn.skypack.dev/@strudel/web@0.8.2'; initStrudel(); - document.getElementById('play').addEventListener('click', () => strudel.evaluate('note("c a f e").jux(rev)')); + document.getElementById('play').addEventListener('click', () => evaluate('note("c a f e").jux(rev)')); document.getElementById('play').addEventListener('stop', () => hush()); From 7557952155612d357d60432e97c221b35b6c1467 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 25 Feb 2024 13:17:52 +0100 Subject: [PATCH 5/5] format --- packages/codemirror/codemirror.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index 7e66c49f..4470173b 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -24,7 +24,7 @@ import { persistentAtom } from '@nanostores/persistent'; const extensions = { isLineWrappingEnabled: (on) => (on ? EditorView.lineWrapping : []), - isBracketMatchingEnabled: (on) => (on ? bracketMatching({brackets: "()[]{}<>"}) : []), + isBracketMatchingEnabled: (on) => (on ? bracketMatching({ brackets: '()[]{}<>' }) : []), isLineNumbersDisplayed: (on) => (on ? lineNumbers() : []), theme, isAutoCompletionEnabled,