@instructure/ui-source-code-editor 11.7.4-snapshot-80 → 11.7.4-snapshot-98

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.
 
-## [11.7.4-snapshot-80](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-80) (2026-07-07)
+## [11.7.4-snapshot-98](https://github.com/instructure/instructure-ui/compare/v11.7.3...v11.7.4-snapshot-98) (2026-07-14)
 
-**Note:** Version bump only for package @instructure/ui-source-code-editor
+
+### Bug Fixes
+
+* **ui-source-code-editor:** apply current theme to v2 search panel ([4534fa0](https://github.com/instructure/instructure-ui/commit/4534fa0fc244bfb7138f3d09fbeeb1e73dfa6afd))
 
 
 

package/es/SourceCodeEditor/v2/SearchPanel.js

@@ -27,9 +27,13 @@ import { setSearchQuery, search, findNext, findPrevious, SearchQuery, closeSearc
 import { TextInput } from '@instructure/ui-text-input/latest';
 import { IconButton } from '@instructure/ui-buttons/latest';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine, IconSearchLine } from '@instructure/ui-icons';
-import { createRoot } from 'react-dom/client';
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-function SearchPanel({
+/**
+ * ---
+ * private: true
+ * ---
+ */
+export function SearchPanel({
   view,
   searchConfig
 }) {
@@ -95,18 +99,19 @@ function SearchPanel({
     })
   });
 }
-export default function customSearch(searchConfig) {
+export default function customSearch(searchConfig, handlers) {
   return searchConfig ? search({
     createPanel: view => {
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      const root = createRoot(dom);
-      root.render(_jsx(SearchPanel, {
-        view: view,
-        searchConfig: searchConfig
-      }));
       return {
-        dom
+        dom,
+        mount() {
+          handlers.onMount(dom, view);
+        },
+        destroy() {
+          handlers.onDestroy(dom);
+        }
       };
     }
   }) : [];

package/es/SourceCodeEditor/v2/index.js

@@ -24,6 +24,7 @@ var _dec, _dec2, _dec3, _class;
  */
 
 import { Component } from 'react';
+import { createPortal } from 'react-dom';
 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';
@@ -46,7 +47,7 @@ import { requestAnimationFrame } from '@instructure/ui-dom-utils';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { textDirectionContextConsumer } from '@instructure/ui-i18n';
 import { withStyleNew } from '@instructure/emotion';
-import customSearch from './SearchPanel.js';
+import customSearch, { SearchPanel } from './SearchPanel.js';
 import generateStyle from './styles.js';
 import { rtlHorizontalArrowKeymap } from './customKeybinding.js';
 import { allowedProps } from './props.js';
@@ -79,10 +80,30 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyleNew(gener
   };
   _id;
   ref = null;
+  state = {
+    searchPanels: []
+  };
   _containerRef;
   _editorView;
   _raf = [];
+  _searchPanelId = 0;
+  _isUnmounting = false;
   _newSelectionAfterValueChange;
+  handleSearchPanelMount = (dom, view) => {
+    this.setState(state => ({
+      searchPanels: [...state.searchPanels, {
+        id: ++this._searchPanelId,
+        dom,
+        view
+      }]
+    }));
+  };
+  handleSearchPanelDestroy = dom => {
+    if (this._isUnmounting) return;
+    this.setState(state => ({
+      searchPanels: state.searchPanels.filter(panel => panel.dom !== dom)
+    }));
+  };
   handleRef = el => {
     const {
       elementRef
@@ -245,6 +266,7 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyleNew(gener
     this.assignAriaLabel();
   }
   componentWillUnmount() {
+    this._isUnmounting = true;
     this._editorView?.destroy();
     this.cancelAnimationFrames();
   }
@@ -262,7 +284,7 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyleNew(gener
   shouldUpdateExtensions(prevProps) {
     const propsToObserve = ['styles',
     // needed for theme update
-    'themeOverride', 'language', 'readOnly', 'editable', 'lineNumbers', 'highlightActiveLineGutter', 'foldGutter', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'dir', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'highlightActiveLine', 'attachment'];
+    'themeOverride', 'language', 'readOnly', 'editable', 'lineNumbers', 'highlightActiveLineGutter', 'foldGutter', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'dir', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'highlightActiveLine', 'attachment', 'searchConfig'];
     for (const prop of propsToObserve) {
       if (!isEqual(this.props[prop], prevProps[prop])) {
         return true;
@@ -326,7 +348,10 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyleNew(gener
     // and adjust it as desired.
     highlightSpecialChars(), history(), drawSelection(), dropCursor(), EditorState.allowMultipleSelections.of(true), syntaxHighlighting(defaultHighlightStyle, {
       fallback: true
-    }), bracketMatching(), closeBrackets(), autocompletion(), rectangularSelection(), crosshairCursor(), highlightSelectionMatches(), indentOnInput(), customSearch(this.props.searchConfig), keymap.of(this.keymaps)];
+    }), bracketMatching(), closeBrackets(), autocompletion(), rectangularSelection(), crosshairCursor(), highlightSelectionMatches(), indentOnInput(), customSearch(this.props.searchConfig, {
+      onMount: this.handleSearchPanelMount,
+      onDestroy: this.handleSearchPanelDestroy
+    }), keymap.of(this.keymaps)];
   }
   get keymaps() {
     // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
@@ -529,14 +554,15 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyleNew(gener
     const {
       label,
       styles,
+      searchConfig,
       ...restProps
     } = this.props;
-    return _jsx("div", {
+    return _jsxs("div", {
       "data-cid": "SourceCodeEditor",
       ref: this.handleRef,
       css: styles?.codeEditor,
       ...passthroughProps(omitProps(restProps, SourceCodeEditor.allowedProps)),
-      children: _jsxs("label", {
+      children: [_jsxs("label", {
         css: styles?.label,
         id: this._id,
         children: [_jsx(ScreenReaderContent, {
@@ -545,7 +571,14 @@ let SourceCodeEditor = (_dec = withDeterministicId(), _dec2 = withStyleNew(gener
           ref: this.handleContainerRef,
           css: styles?.codeEditorContainer
         })]
-      })
+      }), searchConfig && this.state.searchPanels.map(({
+        id,
+        dom,
+        view
+      }) => /*#__PURE__*/createPortal(_jsx(SearchPanel, {
+        view: view,
+        searchConfig: searchConfig
+      }), dom, String(id)))]
     });
   }
 }) || _class) || _class) || _class);

package/es/SourceCodeEditor/v2/styles.js

@@ -144,6 +144,10 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       '.cm-placeholder': {
         // for better contrast
         color: componentTheme.placeholderBackgroundColor
+      },
+      '.cm-panels': {
+        backgroundColor: componentTheme.background,
+        color: componentTheme.color
       }
     },
     highlightStyle: [

package/lib/SourceCodeEditor/v2/SearchPanel.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.SearchPanel = SearchPanel;
 exports.default = customSearch;
 var _react = require("react");
 var _search = require("@codemirror/search");
@@ -11,7 +12,6 @@ var _latest2 = require("@instructure/ui-buttons/latest");
 var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenDownLine.js");
 var _IconArrowOpenUpLine = require("@instructure/ui-icons/lib/generated/IconArrowOpenUpLine.js");
 var _IconSearchLine = require("@instructure/ui-icons/lib/generated/IconSearchLine.js");
-var _client = require("react-dom/client");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 /*
  * The MIT License (MIT)
@@ -37,6 +37,11 @@ var _jsxRuntime = require("@emotion/react/jsx-runtime");
  * SOFTWARE.
  */
 
+/**
+ * ---
+ * private: true
+ * ---
+ */
 function SearchPanel({
   view,
   searchConfig
@@ -103,18 +108,19 @@ function SearchPanel({
     })
   });
 }
-function customSearch(searchConfig) {
+function customSearch(searchConfig, handlers) {
   return searchConfig ? (0, _search.search)({
     createPanel: view => {
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      const root = (0, _client.createRoot)(dom);
-      root.render((0, _jsxRuntime.jsx)(SearchPanel, {
-        view: view,
-        searchConfig: searchConfig
-      }));
       return {
-        dom
+        dom,
+        mount() {
+          handlers.onMount(dom, view);
+        },
+        destroy() {
+          handlers.onDestroy(dom);
+        }
       };
     }
   }) : [];

package/lib/SourceCodeEditor/v2/index.js

@@ -1,11 +1,13 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SourceCodeEditor = void 0;
 var _react = require("react");
+var _reactDom = require("react-dom");
 var _deepEqual = require("@instructure/ui-utils/lib/deepEqual.js");
 var _state = require("@codemirror/state");
 var _view = require("@codemirror/view");
@@ -28,7 +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.js"));
+var _SearchPanel = _interopRequireWildcard(require("./SearchPanel.js"));
 var _styles = _interopRequireDefault(require("./styles.js"));
 var _customKeybinding = require("./customKeybinding.js");
 var _props = require("./props.js");
@@ -86,10 +88,30 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
   };
   _id;
   ref = null;
+  state = {
+    searchPanels: []
+  };
   _containerRef;
   _editorView;
   _raf = [];
+  _searchPanelId = 0;
+  _isUnmounting = false;
   _newSelectionAfterValueChange;
+  handleSearchPanelMount = (dom, view) => {
+    this.setState(state => ({
+      searchPanels: [...state.searchPanels, {
+        id: ++this._searchPanelId,
+        dom,
+        view
+      }]
+    }));
+  };
+  handleSearchPanelDestroy = dom => {
+    if (this._isUnmounting) return;
+    this.setState(state => ({
+      searchPanels: state.searchPanels.filter(panel => panel.dom !== dom)
+    }));
+  };
   handleRef = el => {
     const {
       elementRef
@@ -252,6 +274,7 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     this.assignAriaLabel();
   }
   componentWillUnmount() {
+    this._isUnmounting = true;
     this._editorView?.destroy();
     this.cancelAnimationFrames();
   }
@@ -269,7 +292,7 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
   shouldUpdateExtensions(prevProps) {
     const propsToObserve = ['styles',
     // needed for theme update
-    'themeOverride', 'language', 'readOnly', 'editable', 'lineNumbers', 'highlightActiveLineGutter', 'foldGutter', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'dir', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'highlightActiveLine', 'attachment'];
+    'themeOverride', 'language', 'readOnly', 'editable', 'lineNumbers', 'highlightActiveLineGutter', 'foldGutter', 'lineWrapping', 'autofocus', 'spellcheck', 'direction', 'dir', 'rtlMoveVisually', 'indentOnLoad', 'indentWithTab', 'indentUnit', 'highlightActiveLine', 'attachment', 'searchConfig'];
     for (const prop of propsToObserve) {
       if (!(0, _deepEqual.deepEqual)(this.props[prop], prevProps[prop])) {
         return true;
@@ -333,7 +356,10 @@ 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)(), (0, _SearchPanel.default)(this.props.searchConfig), _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, {
+      onMount: this.handleSearchPanelMount,
+      onDestroy: this.handleSearchPanelDestroy
+    }), _view.keymap.of(this.keymaps)];
   }
   get keymaps() {
     // TODO: if more keymaps are added, list them in the docs as well (#Command keybinding)
@@ -536,14 +562,15 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
     const {
       label,
       styles,
+      searchConfig,
       ...restProps
     } = this.props;
-    return (0, _jsxRuntime.jsx)("div", {
+    return (0, _jsxRuntime.jsxs)("div", {
       "data-cid": "SourceCodeEditor",
       ref: this.handleRef,
       css: styles?.codeEditor,
       ...(0, _passthroughProps.passthroughProps)((0, _omitProps.omitProps)(restProps, SourceCodeEditor.allowedProps)),
-      children: (0, _jsxRuntime.jsxs)("label", {
+      children: [(0, _jsxRuntime.jsxs)("label", {
         css: styles?.label,
         id: this._id,
         children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
@@ -552,7 +579,14 @@ let SourceCodeEditor = exports.SourceCodeEditor = (_dec = (0, _withDeterministic
           ref: this.handleContainerRef,
           css: styles?.codeEditorContainer
         })]
-      })
+      }), searchConfig && this.state.searchPanels.map(({
+        id,
+        dom,
+        view
+      }) => /*#__PURE__*/(0, _reactDom.createPortal)((0, _jsxRuntime.jsx)(_SearchPanel.SearchPanel, {
+        view: view,
+        searchConfig: searchConfig
+      }), dom, String(id)))]
     });
   }
 }) || _class) || _class) || _class);

package/lib/SourceCodeEditor/v2/styles.js

@@ -150,6 +150,10 @@ const generateStyle = (componentTheme, props, sharedTokens) => {
       '.cm-placeholder': {
         // for better contrast
         color: componentTheme.placeholderBackgroundColor
+      },
+      '.cm-panels': {
+        backgroundColor: componentTheme.background,
+        color: componentTheme.color
       }
     },
     highlightStyle: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "11.7.4-snapshot-80",
+  "version": "11.7.4-snapshot-98",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -29,24 +29,24 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
     "@lezer/highlight": "1.2.3",
-    "@instructure/emotion": "11.7.4-snapshot-80",
-    "@instructure/shared-types": "11.7.4-snapshot-80",
-    "@instructure/ui-buttons": "11.7.4-snapshot-80",
-    "@instructure/ui-dom-utils": "11.7.4-snapshot-80",
-    "@instructure/ui-a11y-content": "11.7.4-snapshot-80",
-    "@instructure/ui-i18n": "11.7.4-snapshot-80",
-    "@instructure/ui-react-utils": "11.7.4-snapshot-80",
-    "@instructure/ui-icons": "11.7.4-snapshot-80",
-    "@instructure/ui-text-input": "11.7.4-snapshot-80",
-    "@instructure/ui-themes": "11.7.4-snapshot-80",
-    "@instructure/ui-utils": "11.7.4-snapshot-80"
+    "@instructure/emotion": "11.7.4-snapshot-98",
+    "@instructure/ui-a11y-content": "11.7.4-snapshot-98",
+    "@instructure/ui-buttons": "11.7.4-snapshot-98",
+    "@instructure/shared-types": "11.7.4-snapshot-98",
+    "@instructure/ui-dom-utils": "11.7.4-snapshot-98",
+    "@instructure/ui-i18n": "11.7.4-snapshot-98",
+    "@instructure/ui-icons": "11.7.4-snapshot-98",
+    "@instructure/ui-react-utils": "11.7.4-snapshot-98",
+    "@instructure/ui-text-input": "11.7.4-snapshot-98",
+    "@instructure/ui-themes": "11.7.4-snapshot-98",
+    "@instructure/ui-utils": "11.7.4-snapshot-98"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^4.1.9",
-    "@instructure/ui-babel-preset": "11.7.4-snapshot-80"
+    "@instructure/ui-babel-preset": "11.7.4-snapshot-98"
   },
   "peerDependencies": {
     "react": ">=18 <=19",

package/src/SourceCodeEditor/v2/SearchPanel.tsx

@@ -39,7 +39,6 @@ import {
   IconArrowOpenUpLine,
   IconSearchLine
 } from '@instructure/ui-icons'
-import { createRoot } from 'react-dom/client'
 
 export type SearchConfig = {
   placeholder: string
@@ -47,7 +46,18 @@ export type SearchConfig = {
   prevResultLabel: string
 }
 
-function SearchPanel({
+
+export type SearchPanelHandlers = {
+  onMount: (dom: HTMLElement, view: EditorView) => void
+  onDestroy: (dom: HTMLElement) => void
+}
+
+/**
+ * ---
+ * private: true
+ * ---
+ */
+export function SearchPanel({
   view,
   searchConfig
 }: {
@@ -135,15 +145,24 @@ function SearchPanel({
   )
 }
 
-export default function customSearch(searchConfig: SearchConfig | undefined) {
+export default function customSearch(
+  searchConfig: SearchConfig | undefined,
+  handlers: SearchPanelHandlers
+) {
   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 }
+          return {
+            dom,
+            mount() {
+              handlers.onMount(dom, view)
+            },
+            destroy() {
+              handlers.onDestroy(dom)
+            }
+          }
         }
       })
     : []

package/src/SourceCodeEditor/v2/index.tsx

@@ -23,6 +23,7 @@
  */
 
 import { Component } from 'react'
+import { createPortal } from 'react-dom'
 import { deepEqual as isEqual } from '@instructure/ui-utils'
 
 import { EditorSelection, EditorState, StateEffect } from '@codemirror/state'
@@ -89,7 +90,7 @@ import { textDirectionContextConsumer } from '@instructure/ui-i18n'
 
 import { withStyleNew } from '@instructure/emotion'
 
-import customSearch from './SearchPanel.js'
+import customSearch, { SearchPanel } from './SearchPanel.js'
 
 import generateStyle from './styles.js'
 
@@ -98,6 +99,16 @@ import { rtlHorizontalArrowKeymap } from './customKeybinding.js'
 import { allowedProps } from './props.js'
 import type { SourceCodeEditorProps } from './props'
 
+type SearchPanelInstance = {
+  id: number
+  dom: HTMLElement
+  view: EditorView
+}
+
+type SourceCodeEditorState = {
+  searchPanels: SearchPanelInstance[]
+}
+
 /**
 ---
 category: components
@@ -106,7 +117,10 @@ category: components
 @withDeterministicId()
 @withStyleNew(generateStyle)
 @textDirectionContextConsumer()
-class SourceCodeEditor extends Component<SourceCodeEditorProps> {
+class SourceCodeEditor extends Component<
+  SourceCodeEditorProps,
+  SourceCodeEditorState
+> {
   static displayName = 'SourceCodeEditor'
   static readonly componentId = 'SourceCodeEditor'
 
@@ -133,13 +147,35 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
 
   ref: HTMLDivElement | null = null
 
+  state: SourceCodeEditorState = { searchPanels: [] }
+
   private _containerRef?: HTMLDivElement
   private _editorView?: EditorView
 
   private _raf: RequestAnimationFrameType[] = []
 
+  private _searchPanelId = 0
+  private _isUnmounting = false
+
   private _newSelectionAfterValueChange?: EditorSelection
 
+  handleSearchPanelMount = (dom: HTMLElement, view: EditorView) => {
+    this.setState((state) => ({
+      searchPanels: [
+        ...state.searchPanels,
+        { id: ++this._searchPanelId, dom, view }
+      ]
+    }))
+  }
+
+  handleSearchPanelDestroy = (dom: HTMLElement) => {
+    if (this._isUnmounting) return
+
+    this.setState((state) => ({
+      searchPanels: state.searchPanels.filter((panel) => panel.dom !== dom)
+    }))
+  }
+
   handleRef = (el: HTMLDivElement | null) => {
     const { elementRef } = this.props
 
@@ -310,6 +346,7 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
   }
 
   componentWillUnmount() {
+    this._isUnmounting = true
     this._editorView?.destroy()
 
     this.cancelAnimationFrames()
@@ -349,7 +386,8 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
       'indentWithTab',
       'indentUnit',
       'highlightActiveLine',
-      'attachment'
+      'attachment',
+      'searchConfig'
     ]
 
     for (const prop of propsToObserve) {
@@ -438,7 +476,10 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
       crosshairCursor(),
       highlightSelectionMatches(),
       indentOnInput(),
-      customSearch(this.props.searchConfig),
+      customSearch(this.props.searchConfig, {
+        onMount: this.handleSearchPanelMount,
+        onDestroy: this.handleSearchPanelDestroy
+      }),
       keymap.of(this.keymaps)
     ]
   }
@@ -669,7 +710,7 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
   }
 
   render() {
-    const { label, styles, ...restProps } = this.props
+    const { label, styles, searchConfig, ...restProps } = this.props
 
     return (
       <div
@@ -687,6 +728,14 @@ class SourceCodeEditor extends Component<SourceCodeEditorProps> {
             css={styles?.codeEditorContainer}
           />
         </label>
+        {searchConfig &&
+          this.state.searchPanels.map(({ id, dom, view }) =>
+            createPortal(
+              <SearchPanel view={view} searchConfig={searchConfig} />,
+              dom,
+              String(id)
+            )
+          )}
       </div>
     )
   }

package/src/SourceCodeEditor/v2/styles.ts

@@ -160,6 +160,10 @@ const generateStyle = (
       '.cm-placeholder': {
         // for better contrast
         color: componentTheme.placeholderBackgroundColor
+      },
+      '.cm-panels': {
+        backgroundColor: componentTheme.background,
+        color: componentTheme.color
       }
     },