Find/Replace

editor/src/api/api-interface.ts

@@ -61,6 +61,7 @@ export interface IncomingMessagePayload {
   undo: undefined
   toggleLsp: { isEnabled: boolean }
   toggleReadOnly: undefined
+  toggleSearchPanel: undefined
 }
 
 /** Incoming API message from a platform-specific app */

editor/src/api/api.ts

@@ -47,6 +47,7 @@ export default class SeabassApi extends EventTarget {
     'setPreferences',
     'toggleLsp',
     'toggleReadOnly',
+    'toggleSearchPanel',
     'undo',
     'viewportChange'
   ])

editor/src/app/app.ts

@@ -12,6 +12,7 @@ import SeabassAppModel, {
   ViewportOptions
 } from './model'
 
+import '@vscode/codicons/dist/codicon.css'
 import './app.css'
 
 /** App initialization options */
@@ -67,6 +68,7 @@ class SeabassApp {
     this._api.addEventListener('undo', this._forwardEvent.bind(this))
     this._api.addEventListener('viewportChange', this._onViewportChange.bind(this))
     this._api.addEventListener('toggleLsp', this._onToggleLsp.bind(this))
+    this._api.addEventListener('toggleSearchPanel', this._forwardEvent.bind(this))
 
     this._model.addEventListener('stateChange', this._onStateChange.bind(this))
     this._model.addEventListener('log', this._onLog.bind(this))

editor/src/editor/editor.ts

@@ -2,12 +2,14 @@ import { EditorView } from 'codemirror'
 import { EditorState } from '@codemirror/state'
 import { undoDepth, redoDepth, undo, redo } from '@codemirror/commands'
 import { runScopeHandlers } from '@codemirror/view'
+import { searchPanelOpen, openSearchPanel, closeSearchPanel } from '@codemirror/search'
 import { RawEditorConfig, SetContentOptions } from '../api/api-interface'
 import { SeabassCommonPreferences } from '../app/model'
 import EditorSetup from './setup'
 import { parseEditorConfig } from './utils'
 
 import './editor.css'
+import './search-panel.css'
 
 export interface SeabassEditorState {
   hasChanges: boolean
@@ -213,6 +215,15 @@ export default class Editor extends EventTarget {
     this._onChange()
   }
 
+  toggleSearchPanel (): void {
+    const isOpened = searchPanelOpen(this._editor.state)
+    if (isOpened) {
+      closeSearchPanel(this._editor)
+    } else {
+      openSearchPanel(this._editor)
+    }
+  }
+
   /**
    * Returns editor state required to render app UI
    * @returns editor state

editor/src/editor/search-panel.css

@@ -0,0 +1,103 @@
+.editor .cm-editor .cm-panel.cm-search button[name="close"] {
+  color: inherit;
+}
+
+/* reset smaller by default font-size */
+.editor .cm-editor .cm-panel.cm-search .cm-textfield,
+.editor .cm-editor .cm-panel.cm-search .cm-button,
+.editor .cm-editor .cm-panel.cm-search label {
+  font-size: 1rem;
+}
+
+/* reset button styling to be more neutral */
+.editor .cm-editor .cm-panel.cm-search .cm-button {
+  background: transparent;
+  margin-right: 0;
+  border-left-width: 1px;
+  height: 1.45rem;
+  box-sizing: content-box;
+}
+
+.editor .cm-panel.cm-search .cm-button + .cm-button {
+  border-left-width: 0;
+}
+
+/* change buttons text to icons */
+.editor .cm-editor .cm-panel.cm-search .cm-button[name="next"],
+.editor .cm-editor .cm-panel.cm-search .cm-button[name="prev"],
+.editor .cm-editor .cm-panel.cm-search .cm-button[name="replace"],
+.editor .cm-editor .cm-panel.cm-search .cm-button[name="replaceAll"] {
+  font-family: codicon;
+}
+
+/* hide "select all" button */
+.editor .cm-panel.cm-search .cm-button[name="select"] {
+  display: none;
+}
+
+/* set spacing between button groups */
+.editor .cm-panel.cm-search .cm-button + label {
+  margin: 0 0 0 .3rem;
+}
+
+.editor .cm-panel.cm-search label {
+  vertical-align: top;
+}
+
+.editor .cm-panel.cm-search label + label {
+  margin: 0;
+}
+
+.editor .cm-panel.cm-search .cm-textfield {
+  /* 100% - 2 buttons*/
+  max-width: calc(100% - 8rem);
+  height: 1.45rem;
+  box-sizing: content-box;
+}
+
+/* display buttons instead of checkboxes to save space */
+.editor .cm-panel.cm-search input[type="checkbox"] {
+  appearance: none;
+  margin: 0.2rem 0 0 0;
+  color: inherit;
+}
+
+.editor .cm-panel.cm-search input[type="checkbox"]::after {
+  content: "";
+  display: inline-block;
+  font-family: codicon;
+  font-size: 1rem;
+  width: 1rem;
+  height: 1.45em;
+  line-height: 1.45em;
+  border: solid 1px #888;
+  padding: .2rem 1rem;
+  border-radius: 1px;
+  border-left-width: 1px;
+}
+
+.editor .cm-panel.cm-search input[type="checkbox"]:checked::after,
+.editor .cm-panel.cm-search .cm-button:active {
+  background-color: #ccc;
+  color: black;
+}
+
+.editor .cm-panel.cm-search input[type="checkbox"][name="case"]::after {
+  content: "\eab1";
+}
+
+.editor .cm-panel.cm-search input[type="checkbox"][name="re"]::after {
+  content: "\eb38";
+  border-left-width: 0;
+}
+
+.editor .cm-panel.cm-search input[type="checkbox"][name="word"]::after {
+  content: "\eb7e";
+  border-left-width: 0;
+}
+
+@media only screen and (max-width: 400px) {
+  .editor .cm-panel.cm-search label {
+    display: none;
+  }
+}

editor/src/editor/setup.ts

@@ -4,6 +4,7 @@ import { Compartment, EditorState, Extension, Facet, StateEffect } from '@codemi
 import { keymap } from '@codemirror/view'
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { oneDark } from '@codemirror/theme-one-dark'
+import { search, searchKeymap } from '@codemirror/search'
 import { getLanguageMode } from './language'
 import { SeabassEditorConfig } from './utils'
 
@@ -42,15 +43,29 @@ export default class EditorSetup {
 
     this.extensions = [
       basicSetup,
+      search({ top: true }),
       history(),
-      keymap.of([indentWithTab, ...historyKeymap]),
+      keymap.of([indentWithTab, ...historyKeymap, ...searchKeymap]),
       this._getDefaultLangExtension(options),
       this._getDocChangeHandlerExtension(options),
       this._getReadOnlyExtension(options),
       this._getThemeExtension(options),
       this._getLineWrappingExtension(options),
       indentUnit.of(this._getIndentationString(options.editorConfig)),
-      EditorState.tabSize.of(options.editorConfig.tabWidth)
+      EditorState.tabSize.of(options.editorConfig.tabWidth),
+      EditorState.phrases.of({
+        // find prev/next
+        next: '\uea9a', // arrow down
+        previous: '\ueaa1', // arrow up
+        // repace
+        replace: '\ueb3d', // replace icon
+        'replace all': '\ueb3c', // replace-all icon
+
+        // search options: checkobes are replaced with buttons in CSS
+        'match case': '',
+        regexp: '',
+        'by word': ''
+      })
     ]
   }
 

harbour-seabass/qml/html/index.html

@@ -18,7 +18,7 @@
     #welcome a {
       /* color: #highlightColor */
     }
-    .cm-editor {
+    html {
       /* font-size: #fontSize */
     }
   </style>