@instructure/ui-source-code-editor 8.52.1-snapshot-4 → 8.52.1-snapshot-5

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.52.1-snapshot-4](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.52.1-snapshot-4) (2024-02-07)
+## [8.52.1-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.52.0...v8.52.1-snapshot-5) (2024-02-07)
 
-**Note:** Version bump only for package @instructure/ui-source-code-editor
+
+### Features
+
+* **ui-source-code-editor:** add search panel ([991e8fa](https://github.com/instructure/instructure-ui/commit/991e8fa8be7461979ee522426f51e877fbb029e5))
 
 
 

package/es/SourceCodeEditor/SearchPanel.js

@@ -0,0 +1,110 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { setSearchQuery, search, findNext, findPrevious, SearchQuery, closeSearchPanel } from '@codemirror/search';
+import { TextInput } from '@instructure/ui-text-input';
+import { IconButton } from '@instructure/ui-buttons';
+import { IconArrowOpenDownLine, IconArrowOpenUpLine, IconSearchLine } from '@instructure/ui-icons';
+function SearchPanel({
+  view,
+  searchConfig
+}) {
+  const _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchQueryStr = _useState2[0],
+    setSearchQueryStr = _useState2[1];
+  const handleChange = (_e, value) => {
+    setSearchQueryStr(value);
+    handleHighlightSearch(value);
+  };
+  const handleHighlightSearch = searchStr => {
+    view.dispatch({
+      effects: setSearchQuery.of(new SearchQuery({
+        search: searchStr
+      }))
+    });
+  };
+  const handleKeyDown = e => {
+    if (e.key !== 'Enter') return;
+    if (!e.shiftKey) handleFindNext();else handleFindPrev();
+  };
+  const handleKeyUp = e => {
+    if (e.key !== 'Escape') return;
+    closeSearchPanel(view);
+  };
+  const handleFindNext = () => {
+    handleHighlightSearch(searchQueryStr);
+    findNext(view);
+  };
+  const handleFindPrev = () => {
+    handleHighlightSearch(searchQueryStr);
+    findPrevious(view);
+  };
+  return /*#__PURE__*/React.createElement(TextInput, {
+    inputRef: r => r === null || r === void 0 ? void 0 : r.focus(),
+    size: "small",
+    display: "inline-block",
+    width: "20rem",
+    placeholder: searchConfig.placeholder,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    renderBeforeInput: _IconSearchLine || (_IconSearchLine = /*#__PURE__*/React.createElement(IconSearchLine, {
+      size: "x-small"
+    })),
+    renderAfterInput: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(IconButton, {
+      size: "small",
+      withBorder: false,
+      withBackground: false,
+      onClick: handleFindNext,
+      screenReaderLabel: searchConfig.nextResultLabel
+    }, _IconArrowOpenDownLin || (_IconArrowOpenDownLin = /*#__PURE__*/React.createElement(IconArrowOpenDownLine, null))), /*#__PURE__*/React.createElement(IconButton, {
+      size: "small",
+      withBorder: false,
+      withBackground: false,
+      onClick: handleFindPrev,
+      screenReaderLabel: searchConfig.prevResultLabel
+    }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = /*#__PURE__*/React.createElement(IconArrowOpenUpLine, null))))
+  });
+}
+export default function customSearch(searchConfig) {
+  return searchConfig ? search({
+    createPanel: view => {
+      const dom = document.createElement('div');
+      dom.style.padding = '8px';
+      const root = createRoot(dom);
+      root.render( /*#__PURE__*/React.createElement(SearchPanel, {
+        view: view,
+        searchConfig: searchConfig
+      }));
+      return {
+        dom
+      };
+    }
+  }) : [];
+}

package/es/SourceCodeEditor/index.js

@@ -31,10 +31,7 @@ import { deepEqual as isEqual } from '@instructure/ui-utils';
 import { EditorState, StateEffect } from '@codemirror/state';
 import { EditorView, highlightSpecialChars, highlightActiveLine, drawSelection, dropCursor, rectangularSelection, crosshairCursor, lineNumbers, highlightActiveLineGutter, keymap } from '@codemirror/view';
 import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
-import { highlightSelectionMatches
-// Search feature is turned off for now, see note at keymaps
-// searchKeymap
-} from '@codemirror/search';
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
 import { indentSelection, defaultKeymap, indentWithTab, history, historyKeymap } from '@codemirror/commands';
 import { lintKeymap } from '@codemirror/lint';
 import { indentOnInput, indentRange, indentUnit, StreamLanguage, bracketMatching, foldGutter, foldKeymap, defaultHighlightStyle, syntaxHighlighting, HighlightStyle } from '@codemirror/language';
@@ -53,6 +50,7 @@ import { requestAnimationFrame } from '@instructure/ui-dom-utils';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { textDirectionContextConsumer } from '@instructure/ui-i18n';
 import { withStyle, jsx } from '@instructure/emotion';
+import customSearch from './SearchPanel';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { rtlHorizontalArrowKeymap } from './customKeybinding';
@@ -306,19 +304,11 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyle(generate
     // and adjust it as desired.
     highlightSpecialChars(), history(), drawSelection(), dropCursor(), EditorState.allowMultipleSelections.of(true), syntaxHighlighting(defaultHighlightStyle, {
       fallback: true
-    }), bracketMatching(), closeBrackets(), autocompletion(), rectangularSelection(), crosshairCursor(), highlightSelectionMatches(), indentOnInput(), keymap.of(this.keymaps)];
+    }), bracketMatching(), closeBrackets(), autocompletion(), rectangularSelection(), crosshairCursor(), highlightSelectionMatches(), indentOnInput(), customSearch(this.props.searchConfig), keymap.of(this.keymaps)];
   }
   get keymaps() {
     // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
-    const keymaps = [...closeBracketsKeymap, ...this.commandKeybinding, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap
-
-    // TODO: style and include search & replace toolbar feature
-    // Note: the search & replace toolbar is not styled.
-    // If this feature is needed in the future, we need a decision about the styling.
-    // For now we turned the feature off, since RCE doesn't need it.
-    // ...searchKeymap
-    ];
-
+    const keymaps = [...closeBracketsKeymap, ...this.commandKeybinding, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap, ...(this.props.searchConfig ? searchKeymap : [])];
     if (this.props.indentWithTab) {
       keymaps.push(indentWithTab);
     }

package/es/SourceCodeEditor/props.js

@@ -51,9 +51,10 @@ const propTypes = {
   width: PropTypes.string,
   // darkTheme: PropTypes.bool,
   elementRef: PropTypes.func,
-  containerRef: PropTypes.func
+  containerRef: PropTypes.func,
+  searchConfig: PropTypes.object
 };
 const allowedProps = ['label', 'language', 'readOnly', 'editable', 'lineNumbers', 'foldGutter', 'highlightActiveLineGutter', 'highlightActiveLine', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'defaultValue', 'value', 'onChange', 'onFocus', 'onBlur', 'attachment', 'height', 'width',
 // 'darkTheme',
-'elementRef', 'containerRef'];
+'elementRef', 'containerRef', 'searchConfig'];
 export { propTypes, allowedProps };

package/lib/SourceCodeEditor/SearchPanel.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = customSearch;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("react-dom/client");
+var _search = require("@codemirror/search");
+var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
+var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
+var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/IconArrowOpenDownLine.js");
+var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/IconArrowOpenUpLine.js");
+var _IconSearchLine2 = require("@instructure/ui-icons/lib/IconSearchLine.js");
+var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+function SearchPanel({
+  view,
+  searchConfig
+}) {
+  const _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    searchQueryStr = _useState2[0],
+    setSearchQueryStr = _useState2[1];
+  const handleChange = (_e, value) => {
+    setSearchQueryStr(value);
+    handleHighlightSearch(value);
+  };
+  const handleHighlightSearch = searchStr => {
+    view.dispatch({
+      effects: _search.setSearchQuery.of(new _search.SearchQuery({
+        search: searchStr
+      }))
+    });
+  };
+  const handleKeyDown = e => {
+    if (e.key !== 'Enter') return;
+    if (!e.shiftKey) handleFindNext();else handleFindPrev();
+  };
+  const handleKeyUp = e => {
+    if (e.key !== 'Escape') return;
+    (0, _search.closeSearchPanel)(view);
+  };
+  const handleFindNext = () => {
+    handleHighlightSearch(searchQueryStr);
+    (0, _search.findNext)(view);
+  };
+  const handleFindPrev = () => {
+    handleHighlightSearch(searchQueryStr);
+    (0, _search.findPrevious)(view);
+  };
+  return /*#__PURE__*/_react.default.createElement(_TextInput.TextInput, {
+    inputRef: r => r === null || r === void 0 ? void 0 : r.focus(),
+    size: "small",
+    display: "inline-block",
+    width: "20rem",
+    placeholder: searchConfig.placeholder,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    renderBeforeInput: _IconSearchLine || (_IconSearchLine = /*#__PURE__*/_react.default.createElement(_IconSearchLine2.IconSearchLine, {
+      size: "x-small"
+    })),
+    renderAfterInput: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      size: "small",
+      withBorder: false,
+      withBackground: false,
+      onClick: handleFindNext,
+      screenReaderLabel: searchConfig.nextResultLabel
+    }, _IconArrowOpenDownLin || (_IconArrowOpenDownLin = /*#__PURE__*/_react.default.createElement(_IconArrowOpenDownLine.IconArrowOpenDownLine, null))), /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+      size: "small",
+      withBorder: false,
+      withBackground: false,
+      onClick: handleFindPrev,
+      screenReaderLabel: searchConfig.prevResultLabel
+    }, _IconArrowOpenUpLine || (_IconArrowOpenUpLine = /*#__PURE__*/_react.default.createElement(_IconArrowOpenUpLine2.IconArrowOpenUpLine, null))))
+  });
+}
+function customSearch(searchConfig) {
+  return searchConfig ? (0, _search.search)({
+    createPanel: view => {
+      const dom = document.createElement('div');
+      dom.style.padding = '8px';
+      const root = (0, _client.createRoot)(dom);
+      root.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
+        view: view,
+        searchConfig: searchConfig
+      }));
+      return {
+        dom
+      };
+    }
+  }) : [];
+}

package/lib/SourceCodeEditor/index.js

@@ -30,6 +30,7 @@ var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnima
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
 var _textDirectionContextConsumer = require("@instructure/ui-i18n/lib/textDirectionContextConsumer.js");
 var _emotion = require("@instructure/emotion");
+var _SearchPanel = _interopRequireDefault(require("./SearchPanel"));
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _customKeybinding = require("./customKeybinding");
@@ -310,19 +311,11 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     // and adjust it as desired.
     (0, _view.highlightSpecialChars)(), (0, _commands.history)(), (0, _view.drawSelection)(), (0, _view.dropCursor)(), _state.EditorState.allowMultipleSelections.of(true), (0, _language.syntaxHighlighting)(_language.defaultHighlightStyle, {
       fallback: true
-    }), (0, _language.bracketMatching)(), (0, _autocomplete.closeBrackets)(), (0, _autocomplete.autocompletion)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _search.highlightSelectionMatches)(), (0, _language.indentOnInput)(), _view.keymap.of(this.keymaps)];
+    }), (0, _language.bracketMatching)(), (0, _autocomplete.closeBrackets)(), (0, _autocomplete.autocompletion)(), (0, _view.rectangularSelection)(), (0, _view.crosshairCursor)(), (0, _search.highlightSelectionMatches)(), (0, _language.indentOnInput)(), (0, _SearchPanel.default)(this.props.searchConfig), _view.keymap.of(this.keymaps)];
   }
   get keymaps() {
     // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
-    const keymaps = [..._autocomplete.closeBracketsKeymap, ...this.commandKeybinding, ..._commands.historyKeymap, ..._language.foldKeymap, ..._autocomplete.completionKeymap, ..._lint.lintKeymap
-
-    // TODO: style and include search & replace toolbar feature
-    // Note: the search & replace toolbar is not styled.
-    // If this feature is needed in the future, we need a decision about the styling.
-    // For now we turned the feature off, since RCE doesn't need it.
-    // ...searchKeymap
-    ];
-
+    const keymaps = [..._autocomplete.closeBracketsKeymap, ...this.commandKeybinding, ..._commands.historyKeymap, ..._language.foldKeymap, ..._autocomplete.completionKeymap, ..._lint.lintKeymap, ...(this.props.searchConfig ? _search.searchKeymap : [])];
     if (this.props.indentWithTab) {
       keymaps.push(_commands.indentWithTab);
     }

package/lib/SourceCodeEditor/props.js

@@ -58,8 +58,9 @@ const propTypes = exports.propTypes = {
   width: _propTypes.default.string,
   // darkTheme: PropTypes.bool,
   elementRef: _propTypes.default.func,
-  containerRef: _propTypes.default.func
+  containerRef: _propTypes.default.func,
+  searchConfig: _propTypes.default.object
 };
 const allowedProps = exports.allowedProps = ['label', 'language', 'readOnly', 'editable', 'lineNumbers', 'foldGutter', 'highlightActiveLineGutter', 'highlightActiveLine', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'defaultValue', 'value', 'onChange', 'onFocus', 'onBlur', 'attachment', 'height', 'width',
 // 'darkTheme',
-'elementRef', 'containerRef'];
+'elementRef', 'containerRef', 'searchConfig'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "8.52.1-snapshot-4",
+  "version": "8.52.1-snapshot-5",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,15 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.52.1-snapshot-4",
-    "@instructure/ui-test-queries": "8.52.1-snapshot-4",
-    "@instructure/ui-test-utils": "8.52.1-snapshot-4",
+    "@instructure/ui-babel-preset": "8.52.1-snapshot-5",
+    "@instructure/ui-buttons": "8.52.1-snapshot-5",
+    "@instructure/ui-icons": "8.52.1-snapshot-5",
+    "@instructure/ui-test-queries": "8.52.1-snapshot-5",
+    "@instructure/ui-test-utils": "8.52.1-snapshot-5",
+    "@instructure/ui-text-input": "8.52.1-snapshot-5",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0"
+    "@testing-library/react": "^14.0.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.2",
@@ -44,17 +48,17 @@
     "@codemirror/search": "^6.5.4",
     "@codemirror/state": "^6.3.0",
     "@codemirror/view": "^6.21.3",
-    "@instructure/emotion": "8.52.1-snapshot-4",
-    "@instructure/shared-types": "8.52.1-snapshot-4",
-    "@instructure/ui-a11y-content": "8.52.1-snapshot-4",
-    "@instructure/ui-dom-utils": "8.52.1-snapshot-4",
-    "@instructure/ui-i18n": "8.52.1-snapshot-4",
-    "@instructure/ui-prop-types": "8.52.1-snapshot-4",
-    "@instructure/ui-react-utils": "8.52.1-snapshot-4",
-    "@instructure/ui-test-locator": "8.52.1-snapshot-4",
-    "@instructure/ui-testable": "8.52.1-snapshot-4",
-    "@instructure/ui-themes": "8.52.1-snapshot-4",
-    "@instructure/ui-utils": "8.52.1-snapshot-4",
+    "@instructure/emotion": "8.52.1-snapshot-5",
+    "@instructure/shared-types": "8.52.1-snapshot-5",
+    "@instructure/ui-a11y-content": "8.52.1-snapshot-5",
+    "@instructure/ui-dom-utils": "8.52.1-snapshot-5",
+    "@instructure/ui-i18n": "8.52.1-snapshot-5",
+    "@instructure/ui-prop-types": "8.52.1-snapshot-5",
+    "@instructure/ui-react-utils": "8.52.1-snapshot-5",
+    "@instructure/ui-test-locator": "8.52.1-snapshot-5",
+    "@instructure/ui-testable": "8.52.1-snapshot-5",
+    "@instructure/ui-themes": "8.52.1-snapshot-5",
+    "@instructure/ui-utils": "8.52.1-snapshot-5",
     "@lezer/highlight": "1.1.6",
     "prop-types": "^15.8.1"
   },

package/src/SourceCodeEditor/README.md

@@ -785,3 +785,30 @@ function exampleMethod(props: Props) {
 
 render(<AttachmentExample />)
 ```
+
+### Search
+
+To enable the search panel use the `searchConfig` prop.
+
+You can open the search panel in the code editor by pressing `cmd/ctrl+f` when it is in focus (otherwise the browser's search will open). The reason you would use this instead of the browser native search is because it will miss results that are far out of view in the text rendered by the editor. This is the limitation of the underlying CodeMirror component.
+
+Hitting `Enter` jumps to the next result and `Shift+Enter` to the previous. Alternatively you can use the up and down buttons to the right of the input field.
+
+```js
+---
+type: example
+---
+<SourceCodeEditor
+  label="lorem"
+  language="markdown"
+  defaultValue={`Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit
+enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet.
+Nisi anim cupidatat excepteur officia.
+`}
+  searchConfig={{
+    placeholder: 'Find in code...',
+    nextResultLabel: 'Next result',
+    prevResultLabel: 'Previouse result',
+  }}
+/>
+```

package/src/SourceCodeEditor/SearchPanel.tsx

@@ -0,0 +1,147 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import {
+  setSearchQuery,
+  search,
+  findNext,
+  findPrevious,
+  SearchQuery,
+  closeSearchPanel
+} from '@codemirror/search'
+import { EditorView } from '@codemirror/view'
+import { TextInput } from '@instructure/ui-text-input'
+import { IconButton } from '@instructure/ui-buttons'
+import {
+  IconArrowOpenDownLine,
+  IconArrowOpenUpLine,
+  IconSearchLine
+} from '@instructure/ui-icons'
+
+export type SearchConfig = {
+  placeholder: string
+  nextResultLabel: string
+  prevResultLabel: string
+}
+
+function SearchPanel({
+  view,
+  searchConfig
+}: {
+  view: EditorView
+  searchConfig: SearchConfig
+}) {
+  const [searchQueryStr, setSearchQueryStr] = useState('')
+
+  const handleChange = (
+    _e: React.ChangeEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    setSearchQueryStr(value)
+    handleHighlightSearch(value)
+  }
+
+  const handleHighlightSearch = (searchStr: string) => {
+    view.dispatch({
+      effects: setSearchQuery.of(
+        new SearchQuery({
+          search: searchStr
+        })
+      )
+    })
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key !== 'Enter') return
+    if (!e.shiftKey) handleFindNext()
+    else handleFindPrev()
+  }
+
+  const handleKeyUp = (e: React.KeyboardEvent) => {
+    if (e.key !== 'Escape') return
+    closeSearchPanel(view)
+  }
+
+  const handleFindNext = () => {
+    handleHighlightSearch(searchQueryStr)
+    findNext(view)
+  }
+
+  const handleFindPrev = () => {
+    handleHighlightSearch(searchQueryStr)
+    findPrevious(view)
+  }
+
+  return (
+    <TextInput
+      inputRef={(r) => r?.focus()}
+      size="small"
+      display="inline-block"
+      width="20rem"
+      placeholder={searchConfig.placeholder}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      renderBeforeInput={<IconSearchLine size="x-small" />}
+      renderAfterInput={
+        <span>
+          <IconButton
+            size="small"
+            withBorder={false}
+            withBackground={false}
+            onClick={handleFindNext}
+            screenReaderLabel={searchConfig.nextResultLabel}
+          >
+            <IconArrowOpenDownLine />
+          </IconButton>
+          <IconButton
+            size="small"
+            withBorder={false}
+            withBackground={false}
+            onClick={handleFindPrev}
+            screenReaderLabel={searchConfig.prevResultLabel}
+          >
+            <IconArrowOpenUpLine />
+          </IconButton>
+        </span>
+      }
+    />
+  )
+}
+
+export default function customSearch(searchConfig: SearchConfig | undefined) {
+  return searchConfig
+    ? search({
+        createPanel: (view) => {
+          const dom = document.createElement('div')
+          dom.style.padding = '8px'
+          const root = createRoot(dom)
+          root.render(<SearchPanel view={view} searchConfig={searchConfig} />)
+          return { dom }
+        }
+      })
+    : []
+}

package/src/SourceCodeEditor/index.tsx

@@ -47,11 +47,7 @@ import {
   closeBrackets,
   closeBracketsKeymap
 } from '@codemirror/autocomplete'
-import {
-  highlightSelectionMatches
-  // Search feature is turned off for now, see note at keymaps
-  // searchKeymap
-} from '@codemirror/search'
+import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
 import {
   indentSelection,
   defaultKeymap,
@@ -95,6 +91,8 @@ import { textDirectionContextConsumer } from '@instructure/ui-i18n'
 
 import { withStyle, jsx } from '@instructure/emotion'
 
+import customSearch from './SearchPanel'
+
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
@@ -435,7 +433,7 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
       crosshairCursor(),
       highlightSelectionMatches(),
       indentOnInput(),
-
+      customSearch(this.props.searchConfig),
       keymap.of(this.keymaps)
     ]
   }
@@ -448,13 +446,8 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
       ...historyKeymap,
       ...foldKeymap,
       ...completionKeymap,
-      ...lintKeymap
-
-      // TODO: style and include search & replace toolbar feature
-      // Note: the search & replace toolbar is not styled.
-      // If this feature is needed in the future, we need a decision about the styling.
-      // For now we turned the feature off, since RCE doesn't need it.
-      // ...searchKeymap
+      ...lintKeymap,
+      ...(this.props.searchConfig ? searchKeymap : [])
     ]
 
     if (this.props.indentWithTab) {

package/src/SourceCodeEditor/props.ts

@@ -40,6 +40,7 @@ import type {
 } from '@instructure/emotion'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 import type { BidirectionalProps } from '@instructure/ui-i18n'
+import type { SearchConfig } from './SearchPanel'
 
 type SourceCodeEditorOwnProps = {
   /**
@@ -204,6 +205,11 @@ type SourceCodeEditorOwnProps = {
    * provides a reference to the html element of the editor's container
    */
   containerRef?: (element: HTMLDivElement | null) => void
+
+  /**
+   * enable search panel in editor when pressing ctrl/cmd+f
+   */
+  searchConfig?: SearchConfig
 }
 
 type PropKeys = keyof SourceCodeEditorOwnProps
@@ -268,7 +274,8 @@ const propTypes: PropValidators<PropKeys> = {
   width: PropTypes.string,
   // darkTheme: PropTypes.bool,
   elementRef: PropTypes.func,
-  containerRef: PropTypes.func
+  containerRef: PropTypes.func,
+  searchConfig: PropTypes.object
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -298,7 +305,8 @@ const allowedProps: AllowedPropKeys = [
   'width',
   // 'darkTheme',
   'elementRef',
-  'containerRef'
+  'containerRef',
+  'searchConfig'
 ]
 
 export type { SourceCodeEditorProps, SourceCodeEditorStyle }