From 0fd18dc56d1aae720b4110c7c152dcbe285d0e96 Mon Sep 17 00:00:00 2001 From: Beni Cherniavsky-Paskin Date: Sun, 4 Jun 2023 19:08:24 +0300 Subject: [PATCH 1/3] Editor: Vendor dialog.css from CodeMirror to fix CodeMirror's search Search within the code editor was broken in all examples. CodeMirror "search" & related addons were included, so CodeMirror handles Ctrl-F, Ctrl-G and related keys (compare demo https://codemirror.net/5/demo/search.html) and it prompts for the string using the "dialog" addon. Alas, the `.CodeMirror-dialog` div was unstyled, positioned off-screen. Copied `addon/dialog/dialog.css` from CM 5.40.2 which has the necessary `position: absolute` etc. to render it over the top of the editor. - Also fixed `addon/dialog/dialog.js` being bundled twice. --- build.sh | 3 +-- editor/cm/addon/dialog/dialog.css | 32 +++++++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 editor/cm/addon/dialog/dialog.css diff --git a/build.sh b/build.sh index 45538c23..7f40c87b 100755 --- a/build.sh +++ b/build.sh @@ -226,7 +226,6 @@ if ! [ -f _site/assets/editor-codemirror.js ] || ! [ -f _site/assets/editor-elm. editor/cm/addon/search/search.js \ editor/cm/addon/dialog/dialog.js \ editor/cm/lib/active-line.js \ - editor/cm/addon/dialog/dialog.js \ editor/cm/keymap/sublime.js \ | uglifyjs -o _site/assets/editor-codemirror.js @@ -234,7 +233,7 @@ if ! [ -f _site/assets/editor-codemirror.js ] || ! [ -f _site/assets/editor-elm. cat editor/code-editor.js editor/column-divider.js | uglifyjs -o _site/assets/editor-custom-elements.js # styles - cat editor/cm/lib/codemirror.css editor/editor.css > _site/assets/editor-styles.css + cat editor/cm/lib/codemirror.css editor/cm/addon/dialog/dialog.css editor/editor.css > _site/assets/editor-styles.css # elm (cd editor ; elm make src/Page/Editor.elm --optimize --output=elm.js) diff --git a/editor/cm/addon/dialog/dialog.css b/editor/cm/addon/dialog/dialog.css new file mode 100644 index 00000000..677c0783 --- /dev/null +++ b/editor/cm/addon/dialog/dialog.css @@ -0,0 +1,32 @@ +.CodeMirror-dialog { + position: absolute; + left: 0; right: 0; + background: inherit; + z-index: 15; + padding: .1em .8em; + overflow: hidden; + color: inherit; +} + +.CodeMirror-dialog-top { + border-bottom: 1px solid #eee; + top: 0; +} + +.CodeMirror-dialog-bottom { + border-top: 1px solid #eee; + bottom: 0; +} + +.CodeMirror-dialog input { + border: none; + outline: none; + background: transparent; + width: 20em; + color: inherit; + font-family: monospace; +} + +.CodeMirror-dialog button { + font-size: 70%; +} From 80dba42ef2b8ceeca534672fcc6ebebc71564067 Mon Sep 17 00:00:00 2001 From: Beni Cherniavsky-Paskin Date: Mon, 5 Jun 2023 10:19:00 +0300 Subject: [PATCH 2/3] Editor: Configure CodeMirror search to keep search open, similar to browser MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Browsers' native search (at least Chrome & Firefox) nowdays does incremental search as you type, and lets you jump to next/prev matches by repeatedly pressing Enter/Shift-Enter. CodeMirror's default "find" action closes the search bar on first Enter. It does highlight all matches, but jumping to next/prev matches requires knowing Ctrl-G/Ctrl-Shift-G keys (less discoverable). What's worse, if you press Enter again from muscle memory, by that point the first match is selected, and it gets replaced with a newline. Switched to "findPersistent" which behaves very similar to browsers (except it's not incremental). This similarity is extra important because user is likely to encounter both – browser search opens if keyboard focus was in the app pane, or (in Chrome) on pressing Ctrl-F/Ctrl-G a 2nd time in a row.q --- editor/code-editor.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/editor/code-editor.js b/editor/code-editor.js index fd7521ac..6b45bc2d 100644 --- a/editor/code-editor.js +++ b/editor/code-editor.js @@ -113,6 +113,9 @@ extraKeys: { "Tab": handleTab, "Shift-Tab": handleUntab, + // "findPersistent" behavior is closer to browser's native search than "find". + "Cmd-F": "findPersistent", + "Ctrl-F": "findPersistent", "Cmd-S": function(cm) { sendSaveEvent(); }, "Ctrl-Enter": function(cm) { sendSaveEvent(); } } From e2d4a65a24668ca05a0ef87814781b233e6bae39 Mon Sep 17 00:00:00 2001 From: Beni Cherniavsky-Paskin Date: Mon, 5 Jun 2023 10:32:04 +0300 Subject: [PATCH 3/3] Editor: increase viewportMargin to 500 so browser's search works right MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit CodeMirror's search is more powerful than browser's (has regexps) but sometimes user will encounter browser's search anyway. Alas, CodeMirror by default doesn't put all lines in the DOM. E.g. open "quotes" example, click outside the editor, press Ctrl-F, search for "field" from top => shows "1/1" match — the import that is in the viewport — missing 4 more matches at the end. The longest current elm example is 331 lines. So setting `viewportMargin: 500` makes browser search work for them all. I don't want to set `Infinity` — it's possible for user to paste much longer code, and at some point it'll degrade editor performance, not worth it for a corner case. (CodeMirror's own search always finds all matches.) --- editor/code-editor.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/editor/code-editor.js b/editor/code-editor.js index 6b45bc2d..c40753e3 100644 --- a/editor/code-editor.js +++ b/editor/code-editor.js @@ -110,6 +110,9 @@ value: this._source, tabSize: 2, indentWithTabs: false, + // Increase off-screen lines CodeMirror puts in DOM, for browser's native search. + // Won't scale to huge files, hopefully fine for Elm examples. + viewportMargin: 500, extraKeys: { "Tab": handleTab, "Shift-Tab": handleUntab, @@ -366,4 +369,4 @@ window.customElements.define('code-editor', CodeEditor); -})(); \ No newline at end of file +})();