refactor: clean up useEffect in InlineUI and enhance prop documentation in Marker Edit component

Author: Verma-Punit

src/infotip/edit.js

@@ -29,10 +29,18 @@ export function Edit({ value, onChange, onFocus, isActive, contentRef, activeAtt
     const [isSettingOpen, setIsSettingOpen] = useState(false);
 
     useEffect(() => {
-        if (!isActive) {
-            setIsSettingOpen(false);
-        }
-    }, [isActive]);
+        return () => {
+            const { ownerDocument } = contentRef.current;
+            const infotips = ownerDocument.querySelectorAll(
+                'tatva-infotip'
+            );
+            infotips.forEach((infotip) => {
+                if (infotip && typeof infotip.hideTooltip === 'function') {
+                    infotip.hideTooltip();
+                }
+            });
+        };
+    }, [contentRef]);
 
     return (
         <>

src/infotip/inline-ui.js

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useAnchor } from '@wordpress/rich-text';
-import { useEffect } from '@wordpress/element';
 import { Popover, TabPanel } from '@wordpress/components';
 
 /**
@@ -42,20 +41,6 @@ function InlineUI({
 		settings: { isActive },
 	});
 
-	useEffect(() => {
-		return () => {
-			const { ownerDocument } = contentRef;
-			const infotips = ownerDocument.querySelectorAll(
-				'tatva-infotip'
-			);
-			infotips.forEach((infotip) => {
-				if (infotip && typeof infotip.hideTooltip === 'function') {
-					infotip.hideTooltip();
-				}
-			});
-		};
-	}, [contentRef]);
-
 	return (
 		<Popover
 			anchor={anchor}

src/marker/edit.js

@@ -15,10 +15,14 @@ import InlineUI from './inline-ui';
  * Edit component for the Marker format in the block editor.
  *
  * @param {Object} props - The component properties.
- * @return {JSX.Element} The rendered component.
+ * @param {Object} props.value - The current value of the rich text.
+ * @param {Function} props.onChange - Function to update the rich text value.
+ * @param {boolean} props.isActive - Indicates if the format is currently active.
+ * @param {Object} props.contentRef - Reference to the editable content element.
+ * @param {Object} props.activeAttributes - The currently active attributes.
+ * @return {JSX.Element} - The rendered Marker formats.
  */
-export function Edit(props) {
-    const { value, onChange, isActive, contentRef, activeAttributes } = props;
+export function Edit({ value, onChange, isActive, contentRef, activeAttributes }) {
     const [isSettingOpen, setIsSettingOpen] = useState(false);
 
     return (