(airflow) branch main updated: UI: Fix note modal does not change markdown text after change (#56092)

[jscheffl]

This is an automated email from the ASF dual-hosted git repository.

jscheffl pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 7bcff784aa6 UI: Fix note modal does not change markdown text after 
change (#56092)
7bcff784aa6 is described below

commit 7bcff784aa6e728d2990664192dc0ee37d7fde79
Author: yangyulely <yule.y...@samsung.com>
AuthorDate: Sat Sep 27 04:40:30 2025 +0800

    UI: Fix note modal does not change markdown text after change (#56092)
    
    * UI: Fix note modal does not change markdown text after change
    
    * Use useRef instead of useEffect
---
 .../ui/src/components/EditableMarkdownArea.tsx     | 78 +++++++++++++---------
 1 file changed, 48 insertions(+), 30 deletions(-)

diff --git 
a/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx 
b/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
index a77bfcd617e..1b8c3c7d649 100644
--- a/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
+++ b/airflow-core/src/airflow/ui/src/components/EditableMarkdownArea.tsx
@@ -18,6 +18,7 @@
  */
 import { Box, VStack, Editable, Text } from "@chakra-ui/react";
 import type { ChangeEvent } from "react";
+import { useState, useRef } from "react";
 
 import ReactMarkdown from "./ReactMarkdown";
 
@@ -31,36 +32,53 @@ const EditableMarkdownArea = ({
   readonly onBlur?: () => void;
   readonly placeholder?: string | null;
   readonly setMdContent: (value: string) => void;
-}) => (
-  <Box mt={4} px={4} width="100%">
-    <Editable.Root
-      onBlur={onBlur}
-      onChange={(event: ChangeEvent<HTMLInputElement>) => 
setMdContent(event.target.value)}
-      value={mdContent ?? ""}
-    >
-      <Editable.Preview
-        _hover={{ backgroundColor: "transparent" }}
-        alignItems="flex-start"
-        as={VStack}
-        gap="0"
-        overflowY="auto"
-        width="100%"
+}) => {
+  const [currentValue, setCurrentValue] = useState(mdContent ?? "");
+  const prevMdContentRef = useRef(mdContent);
+
+  // Sync local state with prop changes
+  if (mdContent !== prevMdContentRef.current) {
+    setCurrentValue(mdContent ?? "");
+    prevMdContentRef.current = mdContent;
+  }
+
+  return (
+    <Box mt={4} px={4} width="100%">
+      <Editable.Root
+        onBlur={onBlur}
+        onChange={(event: ChangeEvent<HTMLInputElement>) => {
+          const { value } = event.target;
+
+          setCurrentValue(value);
+          setMdContent(value);
+        }}
+        value={currentValue}
       >
-        {Boolean(mdContent) ? (
-          <ReactMarkdown>{mdContent}</ReactMarkdown>
-        ) : (
-          <Text color="fg.subtle">{placeholder}</Text>
-        )}
-      </Editable.Preview>
-      <Editable.Textarea
-        data-testid="markdown-input"
-        height="200px"
-        overflowY="auto"
-        placeholder={placeholder ?? ""}
-        resize="none"
-      />
-    </Editable.Root>
-  </Box>
-);
+        <Editable.Preview
+          _hover={{ backgroundColor: "transparent" }}
+          alignItems="flex-start"
+          as={VStack}
+          gap="0"
+          height="200px"
+          overflowY="auto"
+          width="100%"
+        >
+          {Boolean(currentValue) ? (
+            <ReactMarkdown>{currentValue}</ReactMarkdown>
+          ) : (
+            <Text color="fg.subtle">{placeholder}</Text>
+          )}
+        </Editable.Preview>
+        <Editable.Textarea
+          data-testid="markdown-input"
+          height="200px"
+          overflowY="auto"
+          placeholder={placeholder ?? ""}
+          resize="none"
+        />
+      </Editable.Root>
+    </Box>
+  );
+};
 
 export default EditableMarkdownArea;