chore(query-bar): better fix for codemirror placeholder issue

Author: gribnoysup

packages/compass-generative-ai/src/components/ai-experience-entry.tsx

@@ -135,7 +135,7 @@ function createAIPlaceholderHTMLPlaceholder({
   darkMode?: boolean;
   placeholderText: string;
   track: TrackFunction;
-}): HTMLElement {
+}): () => HTMLElement {
   const containerEl = document.createElement('div');
 
   const placeholderTextEl = document.createTextNode(`${placeholderText} or `);
@@ -171,17 +171,9 @@ ${getAIEntrySVGString()}`;
 
   containerEl.appendChild(aiButtonEl);
 
-  // Workarond for https://github.com/codemirror/dev/issues/1519: codemirror
-  // will try to `cloneNode` the placeholder (for somewhat good reasons) which
-  // doesn't carry over the events we attach. There's no way to opt-out of this
-  // behavior, so we're just overriding cloneNode function to stop this from
-  // happening. This is covered by tests, so in case it stops working, we will
-  // know
-  containerEl.cloneNode = () => {
-    return containerEl;
-  };
-
-  return containerEl;
+  // Return a function to prevent codemirror from cloning the DOM node (this
+  // doesn't transfer event listeners)
+  return () => containerEl;
 }
 
 export { AIExperienceEntry, createAIPlaceholderHTMLPlaceholder };

packages/compass-query-bar/src/components/option-editor.tsx

@@ -88,7 +88,7 @@ type OptionEditorProps = {
   onChange: (value: string) => void;
   onApply?(): void;
   onBlur?(): void;
-  placeholder?: string | HTMLElement;
+  placeholder?: string | (() => HTMLElement);
   serverVersion?: string;
   value?: string;
   ['data-testid']?: string;

packages/compass-query-bar/src/components/query-option.tsx

@@ -87,7 +87,7 @@ type QueryOptionProps = {
   value?: string;
   hasError: boolean;
   onChange: (name: QueryBarProperty, value: string) => void;
-  placeholder?: string | HTMLElement;
+  placeholder?: string | (() => HTMLElement);
   onApply?(): void;
   disabled?: boolean;
 };