From 0032a41fd06f5f1c1f647a1974cef852223ac23e Mon Sep 17 00:00:00 2001 From: Felix Kling Date: Wed, 3 Aug 2022 19:27:50 +0200 Subject: [PATCH] codemirror file view: Add search widget (#39884) This adds CodeMirror's default search functionality. This works now because the file view is focusable. When focused (e.g. by clicking into it), meta+f will show CodeMirror's search input. This currently uses it's own default style but we might be able to either customize it via CSS or we can completely render our own UI (the search extension allows to do that). --- client/web/src/repo/blob/CodeMirrorBlob.tsx | 7 ++++++- package.json | 2 +- yarn.lock | 16 ++++++++++------ 3 files changed, 17 insertions(+), 8 deletions(-) diff --git a/client/web/src/repo/blob/CodeMirrorBlob.tsx b/client/web/src/repo/blob/CodeMirrorBlob.tsx index 327b38e319b..8bbf58ed81e 100644 --- a/client/web/src/repo/blob/CodeMirrorBlob.tsx +++ b/client/web/src/repo/blob/CodeMirrorBlob.tsx @@ -4,8 +4,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react' +import { search, searchKeymap } from '@codemirror/search' import { EditorState, Extension } from '@codemirror/state' -import { EditorView } from '@codemirror/view' +import { EditorView, keymap } from '@codemirror/view' import { addLineRangeQueryParameter, toPositionOrRangeQueryParameter } from '@sourcegraph/common' import { editorHeight, useCodeMirror, useCompartment } from '@sourcegraph/shared/src/components/CodeMirrorEditor' @@ -42,6 +43,10 @@ const staticExtensions: Extension = [ borderRight: 'initial', }, }), + // Note that these only work out-of-the-box because the editor is + // *focusable* but read-only (see EditorState.readOnly above). + search({ top: true }), + keymap.of(searchKeymap), ] export const Blob: React.FunctionComponent = ({ diff --git a/package.json b/package.json index ba812c89b08..a9d80201761 100644 --- a/package.json +++ b/package.json @@ -368,12 +368,12 @@ "@codemirror/lang-markdown": "^6.0.0", "@codemirror/language": "^6.2.0", "@codemirror/lint": "^6.0.0", + "@codemirror/search": "^6.0.1", "@codemirror/state": "^6.1.0", "@codemirror/view": "^6.0.2", "@lezer/highlight": "^1.0.0", "@mdi/js": "^6.7.96", "@microsoft/fetch-event-source": "^2.0.1", - "@opentelemetry/semantic-conventions": "^1.5.0", "@opentelemetry/api": "^1.1.0", "@opentelemetry/context-zone": "^1.5.0", "@opentelemetry/exporter-trace-otlp-http": "^0.31.0", diff --git a/yarn.lock b/yarn.lock index dad47e18a18..92541ee4d01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1597,6 +1597,15 @@ dependencies: "@codemirror/state" "^0.19.0" +"@codemirror/search@^6.0.1": + version "6.0.1" + resolved "https://registry.npmjs.org/@codemirror/search/-/search-6.0.1.tgz#12c20fdfb341fb4ca2125b2eaec35a8cf4b682f1" + integrity sha512-uOinkOrM+daMduCgMPomDfKLr7drGHB4jHl3Vq6xY2WRlL7MkNsBE0b+XHYa/Mee2npsJOgwvkW4n1lMFeBW2Q== + dependencies: + "@codemirror/state" "^6.0.0" + "@codemirror/view" "^6.0.0" + crelt "^1.0.5" + "@codemirror/state@^0.19.0", "@codemirror/state@^0.19.3": version "0.19.9" resolved "https://registry.npmjs.org/@codemirror/state/-/state-0.19.9.tgz#b797f9fbc204d6dc7975485e231693c09001b0dd" @@ -3200,12 +3209,7 @@ "@opentelemetry/sdk-trace-base" "1.5.0" "@opentelemetry/semantic-conventions" "1.5.0" -"@opentelemetry/semantic-conventions@1.5.0": - version "1.5.0" - resolved "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.5.0.tgz#cea9792bfcf556c87ded17c6ac729348697bb632" - integrity sha512-wlYG/U6ddW1ilXslnDLLQYJ8nd97W8JJTTfwkGhubx6dzW6SUkd+N4/MzTjjyZlrHQunxHtkHFvVpUKiROvFDw== - -"@opentelemetry/semantic-conventions@^1.5.0": +"@opentelemetry/semantic-conventions@1.5.0", "@opentelemetry/semantic-conventions@^1.5.0": version "1.5.0" resolved "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.5.0.tgz#cea9792bfcf556c87ded17c6ac729348697bb632" integrity sha512-wlYG/U6ddW1ilXslnDLLQYJ8nd97W8JJTTfwkGhubx6dzW6SUkd+N4/MzTjjyZlrHQunxHtkHFvVpUKiROvFDw==