fix(ui-source-code-editor): apply current theme to v2 search panel

INSTUI-5081

Author: ToMESSKa

packages/ui-source-code-editor/src/SourceCodeEditor/v2/SearchPanel.tsx

@@ -39,15 +39,25 @@ import {
   IconArrowOpenUpLine,
   IconSearchLine
 } from '@instructure/ui-icons'
-import { createRoot } from 'react-dom/client'
 
 export type SearchConfig = {
   placeholder: string
   nextResultLabel: string
   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)
+            }
+          }
         }
       })
     : []

packages/ui-source-code-editor/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>
     )
   }

packages/ui-source-code-editor/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
       }
     },