Add support for multiline searches

packages/search-in-workspace/package.json

@@ -10,7 +10,8 @@
     "@theia/process": "1.40.0",
     "@theia/workspace": "1.40.0",
     "@vscode/ripgrep": "^1.14.2",
-    "minimatch": "^5.1.0"
+    "minimatch": "^5.1.0",
+    "react-autosize-textarea": "^7.0.0"
   },
   "publishConfig": {
     "access": "public"

packages/search-in-workspace/src/browser/components/search-in-workspace-textarea.tsx

@@ -0,0 +1,153 @@
+// *****************************************************************************
+// Copyright (C) 2021 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { Key, KeyCode } from '@theia/core/lib/browser';
+import * as React from '@theia/core/shared/react';
+import TextareaAutosize from 'react-autosize-textarea';
+import debounce = require('@theia/core/shared/lodash.debounce');
+
+interface HistoryState {
+    history: string[];
+    index: number;
+};
+type TextareaAttributes = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export class SearchInWorkspaceTextArea extends React.Component<TextareaAttributes, HistoryState> {
+    static LIMIT = 100;
+
+    private textarea = React.createRef<HTMLTextAreaElement>();
+
+    constructor(props: TextareaAttributes) {
+        super(props);
+        this.state = {
+            history: [],
+            index: 0,
+        };
+    }
+
+    updateState(index: number, history?: string[]): void {
+        this.value = history ? history[index] : this.state.history[index];
+        this.setState(prevState => {
+            const newState = {
+                ...prevState,
+                index,
+            };
+            if (history) {
+                newState.history = history;
+            }
+            return newState;
+        });
+    }
+
+    get value(): string {
+        return this.textarea.current?.value ?? '';
+    }
+
+    set value(value: string) {
+        if (this.textarea.current) {
+            this.textarea.current.value = value;
+        }
+    }
+
+    /**
+     * Handle history navigation without overriding the parent's onKeyDown handler, if any.
+     */
+    protected readonly onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+        // Navigate history only when cursor is at first or last position of the textarea
+        if (Key.ARROW_UP.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionStart === 0) {
+            e.preventDefault();
+            this.previousValue();
+        } else if (Key.ARROW_DOWN.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && e.currentTarget.selectionEnd === e.currentTarget.value.length) {
+            e.preventDefault();
+            this.nextValue();
+        }
+
+        // Prevent newline on enter
+        if (Key.ENTER.keyCode === KeyCode.createKeyCode(e.nativeEvent).key?.keyCode && !e.nativeEvent.shiftKey) {
+            e.preventDefault();
+        }
+
+        this.props.onKeyDown?.(e);
+    };
+
+    /**
+     * Switch the textarea's text to the previous value, if any.
+     */
+    previousValue(): void {
+        const { history, index } = this.state;
+        if (!this.value) {
+            this.value = history[index];
+        } else if (index > 0 && index < history.length) {
+            this.updateState(index - 1);
+        }
+    }
+
+    /**
+     * Switch the textarea's text to the next value, if any.
+     */
+    nextValue(): void {
+        const { history, index } = this.state;
+        if (index === history.length - 1) {
+            this.value = '';
+        } else if (!this.value) {
+            this.value = history[index];
+        } else if (index >= 0 && index < history.length - 1) {
+            this.updateState(index + 1);
+        }
+    }
+
+    /**
+     * Handle history collection and textarea resizing without overriding the parent's onChange handler, if any.
+     */
+    protected readonly onChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {
+        this.addToHistory();
+        this.props.onChange?.(e);
+    };
+
+    /**
+     * Add a nonempty current value to the history, if not already present. (Debounced, 1 second delay.)
+     */
+    readonly addToHistory = debounce(this.doAddToHistory, 1000);
+
+    private doAddToHistory(): void {
+        if (!this.value) {
+            return;
+        }
+        const history = this.state.history
+            .filter(term => term !== this.value)
+            .concat(this.value)
+            .slice(-SearchInWorkspaceTextArea.LIMIT);
+        this.updateState(history.length - 1, history);
+    }
+
+    override render(): React.ReactNode {
+        const { onResize, ...filteredProps } = this.props;
+        return (
+            <TextareaAutosize
+                {...filteredProps}
+                autoCapitalize="off"
+                autoCorrect="off"
+                maxRows={7} /* from VS Code */
+                onChange={this.onChange}
+                onKeyDown={this.onKeyDown}
+                ref={this.textarea}
+                rows={1}
+                spellCheck={false}
+            >
+            </TextareaAutosize>
+        );
+    }
+}

packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx

@@ -303,12 +303,16 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
 
         const matches: SearchMatch[] = [];
         results.forEach(r => {
-            const lineText: string = widget.editor.document.getLineContent(r.range.start.line);
+            const numberOfLines = searchTerm.split('\n').length;
+            const lineTexts = [];
+            for (let i = 0; i < numberOfLines; i++) {
+                lineTexts.push(widget.editor.document.getLineContent(r.range.start.line + i));
+            }
             matches.push({
                 line: r.range.start.line,
                 character: r.range.start.character,
-                length: r.range.end.character - r.range.start.character,
-                lineText
+                length: searchTerm.length,
+                lineText: lineTexts.join('\n')
             });
         });
 
@@ -873,19 +877,34 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             // Open the file only if the function is called to replace all matches under a specific node.
             const widget: EditorWidget = replaceOne ? await this.doOpen(toReplace[0]) : await this.doGetWidget(toReplace[0]);
             const source: string = widget.editor.document.getText();
-            const replaceOperations = toReplace.map(resultLineNode => ({
-                text: replacementText,
-                range: {
-                    start: {
-                        line: resultLineNode.line - 1,
-                        character: resultLineNode.character - 1
-                    },
-                    end: {
-                        line: resultLineNode.line - 1,
-                        character: resultLineNode.character - 1 + resultLineNode.length
+
+            const replaceOperations = toReplace.map(resultLineNode => {
+                const lineText = typeof resultLineNode.lineText === 'string' ? resultLineNode.lineText : resultLineNode.lineText.text;
+                const lines = lineText.split('\n');
+                let endCharacter = resultLineNode.character - 1 + resultLineNode.length;
+                if (lines.length > 1) {
+                    endCharacter = resultLineNode.length - lines[0].length + resultLineNode.character - lines.length;
+                    if (lines.length > 2) {
+                        for (const lineNum of Array(lines.length - 2).keys()) {
+                            endCharacter -= lines[lineNum + 1].length;
+                        }
                     }
                 }
-            }));
+                return {
+                    text: replacementText,
+                    range: {
+                        start: {
+                            line: resultLineNode.line - 1,
+                            character: resultLineNode.character - 1
+                        },
+                        end: {
+                            line: resultLineNode.line + lines.length - 2,
+                            character: endCharacter
+                        }
+                    }
+                };
+            });
+
             // Replace the text.
             await widget.editor.replaceText({
                 source,
@@ -1017,28 +1036,33 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             wordBreak.lastIndex++;
         }
 
-        const before = lineText.slice(start, character - 1).trimLeft();
-
-        return <div className={`resultLine noWrapInfo noselect ${node.selected ? 'selected' : ''}`} title={lineText.trim()}>
-            {this.searchInWorkspacePreferences['search.lineNumbers'] && <span className='theia-siw-lineNumber'>{node.line}</span>}
-            <span>
-                {before}
-            </span>
-            {this.renderMatchLinePart(node)}
-            <span>
-                {lineText.slice(node.character + node.length - 1, 250 - before.length + node.length)}
-            </span>
-        </div>;
+        const before = lineText.slice(start, character - 1).trimStart();
+        const lineCount = lineText.split('\n').length;
+
+        return <>
+            <div className={`resultLine noWrapInfo noselect ${node.selected ? 'selected' : ''}`} title={lineText.trim()}>
+                {this.searchInWorkspacePreferences['search.lineNumbers'] && <span className='theia-siw-lineNumber'>{node.line}</span>}
+                <span>
+                    {before}
+                </span>
+                {this.renderMatchLinePart(node)}
+                {lineCount > 1 || <span>
+                    {lineText.slice(node.character + node.length - 1, 250 - before.length + node.length)}
+                </span>}
+            </div>
+            {lineCount > 1 && <div className='match-line-num'>+{lineCount - 1}</div>}
+        </>;
     }
 
     protected renderMatchLinePart(node: SearchInWorkspaceResultLineNode): React.ReactNode {
-        const replaceTerm = this.isReplacing ? <span className='replace-term'>{this._replaceTerm}</span> : '';
+        const replaceTermLines = this._replaceTerm.split('\n');
+        const replaceTerm = this.isReplacing ? <span className='replace-term'>{replaceTermLines[0]}</span> : '';
         const className = `match${this.isReplacing ? ' strike-through' : ''}`;
-        const match = typeof node.lineText === 'string' ?
-            node.lineText.substring(node.character - 1, node.length + node.character - 1)
-            : node.lineText.text.substring(node.lineText.character - 1, node.length + node.lineText.character - 1);
+        const text = typeof node.lineText === 'string' ? node.lineText : node.lineText.text;
+        const match = text.substring(node.character - 1, node.character + node.length - 1);
+        const matchLines = match.split('\n');
         return <React.Fragment>
-            <span className={className}>{match}</span>
+            <span className={className}>{matchLines[0]}</span>
             {replaceTerm}
         </React.Fragment>;
     }
@@ -1065,15 +1089,28 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             fileUri = new URI(node.fileUri);
         }
 
+        const lineText = typeof node.lineText === 'string' ? node.lineText : node.lineText.text;
+        const lines = lineText.split('\n');
+
+        let endCharacter = node.character - 1 + node.length;
+        if (lines.length > 1) {
+            endCharacter = node.length - lines[0].length + node.character - lines.length;
+            if (lines.length > 2) {
+                for (const lineNum of Array(lines.length - 2).keys()) {
+                    endCharacter -= lines[lineNum + 1].length;
+                }
+            }
+        }
+
         const opts: EditorOpenerOptions = {
             selection: {
                 start: {
                     line: node.line - 1,
                     character: node.character - 1
                 },
                 end: {
-                    line: node.line - 1,
-                    character: node.character - 1 + node.length
+                    line: node.line + lines.length - 2,
+                    character: endCharacter
                 }
             },
             mode: preview ? 'reveal' : 'activate',
@@ -1100,16 +1137,8 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             content = await resource.readContents();
         }
 
-        const lines = content.split('\n');
-        node.children.forEach(l => {
-            const leftPositionedNodes = node.children.filter(rl => rl.line === l.line && rl.character < l.character);
-            const diff = (this._replaceTerm.length - this.searchTerm.length) * leftPositionedNodes.length;
-            const start = lines[l.line - 1].substring(0, l.character - 1 + diff);
-            const end = lines[l.line - 1].substring(l.character - 1 + diff + l.length);
-            lines[l.line - 1] = start + this._replaceTerm + end;
-        });
-
-        return fileUri.withScheme(MEMORY_TEXT).withQuery(lines.join('\n'));
+        const searchTermRegExp = new RegExp(this.searchTerm, 'g');
+        return fileUri.withScheme(MEMORY_TEXT).withQuery(content.replace(searchTermRegExp, this._replaceTerm));
     }
 
     protected decorateEditor(node: SearchInWorkspaceFileNode | undefined, editorWidget: EditorWidget): void {