[9.0] Fix placeholder in monaco editor dissapear when value is set (#217828) (#218562)

# Backport

This will backport the following commits from `main` to `9.0`:
- [Fix placeholder in monaco editor dissapear when value is set
(#217828)](https://github.com/elastic/kibana/pull/217828)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Paulina
Shakirova","email":"paulina.shakirova@elastic.co"},"sourceCommit":{"committedDate":"2025-04-17T12:49:05Z","message":"Fix
placeholder in monaco editor dissapear when value is set (#217828)\n\n##
Summary\n\nThis PR fixes [[Bug] Setting text in the placeholder property
does not\nclear when value is set with
onChange\naction](https://github.com/elastic/kibana/issues/149882)
issue.","sha":"ea3dead452cc9d5db9626237bb60cd5c509b08a9","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:SharedUX","backport:prev-minor","v9.1.0"],"title":"Fix
placeholder in monaco editor dissapear when value is
set","number":217828,"url":"https://github.com/elastic/kibana/pull/217828","mergeCommit":{"message":"Fix
placeholder in monaco editor dissapear when value is set (#217828)\n\n##
Summary\n\nThis PR fixes [[Bug] Setting text in the placeholder property
does not\nclear when value is set with
onChange\naction](https://github.com/elastic/kibana/issues/149882)
issue.","sha":"ea3dead452cc9d5db9626237bb60cd5c509b08a9"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217828","number":217828,"mergeCommit":{"message":"Fix
placeholder in monaco editor dissapear when value is set (#217828)\n\n##
Summary\n\nThis PR fixes [[Bug] Setting text in the placeholder property
does not\nclear when value is set with
onChange\naction](https://github.com/elastic/kibana/issues/149882)
issue.","sha":"ea3dead452cc9d5db9626237bb60cd5c509b08a9"}}]}]
BACKPORT-->

Co-authored-by: Paulina Shakirova <paulina.shakirova@elastic.co>

src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.stories.tsx

@@ -38,7 +38,7 @@ export const Basic = {
         {...params}
         languageId="plainText"
         onChange={action('on change')}
-        value="Hello!"
+        placeholder="Type something here"
         height={200}
       />
     );

src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.tsx

@@ -20,6 +20,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   useEuiTheme,
+  UseEuiTheme,
 } from '@elastic/eui';
 import {
   monaco,
@@ -216,7 +217,6 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   const isReadOnly = options?.readOnly ?? false;
 
   const [_editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
-  const _placeholderWidget = useRef<PlaceholderWidget | null>(null);
   const isSuggestionMenuOpen = useRef(false);
   const editorHint = useRef<HTMLDivElement>(null);
   const textboxMutationObserver = useRef<MutationObserver | null>(null);
@@ -474,19 +474,8 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (placeholder && !value && _editor) {
-      // Mounts editor inside constructor
-      _placeholderWidget.current = new PlaceholderWidget(placeholder, euiTheme, _editor);
-    }
-
-    return () => {
-      _placeholderWidget.current?.dispose();
-      _placeholderWidget.current = null;
-    };
-  }, [placeholder, value, euiTheme, _editor]);
-
   useFitToContent({ editor: _editor, fitToContent, isFullScreen });
+  usePlaceholder({ placeholder, euiTheme, editor: _editor, value });
 
   const { CopyButton } = useCopy({ isCopyable, value });
 
@@ -661,6 +650,54 @@ const useCopy = ({ isCopyable, value }: { isCopyable: boolean; value: string })
   return { showCopyButton, CopyButton };
 };
 
+const usePlaceholder = ({
+  placeholder,
+  euiTheme,
+  editor,
+  value,
+}: {
+  placeholder: string | undefined;
+  euiTheme: UseEuiTheme['euiTheme'];
+  editor: monaco.editor.IStandaloneCodeEditor | null;
+  value: string;
+}) => {
+  useEffect(() => {
+    if (!placeholder || !editor) return;
+
+    let placeholderWidget: PlaceholderWidget | null = null;
+
+    const addPlaceholder = () => {
+      if (!placeholderWidget) {
+        placeholderWidget = new PlaceholderWidget(placeholder, euiTheme, editor);
+      }
+    };
+
+    const removePlaceholder = () => {
+      if (placeholderWidget) {
+        placeholderWidget.dispose();
+        placeholderWidget = null;
+      }
+    };
+
+    if (!value) {
+      addPlaceholder();
+    }
+
+    const onDidChangeContent = editor.getModel()?.onDidChangeContent(() => {
+      if (!editor.getModel()?.getValue()) {
+        addPlaceholder();
+      } else {
+        removePlaceholder();
+      }
+    });
+
+    return () => {
+      onDidChangeContent?.dispose();
+      removePlaceholder();
+    };
+  }, [placeholder, value, euiTheme, editor]);
+};
+
 const useFitToContent = ({
   editor,
   fitToContent,