@capillarytech/creatives-library 8.0.292-alpha.13 → 8.0.292-alpha.14

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.292-alpha.13",
+  "version": "8.0.292-alpha.14",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -305,13 +305,10 @@ const HTMLEditor = forwardRef(({
     apiValidationErrors, // Pass API validation errors to merge with client-side validation
   }, formatSanitizerMessage, formatValidatorMessage);
 
-  // Expose validation and content state via ref (InApp: also expose getDeviceContent for Test and Preview)
+  // Expose validation and content state via ref
   useImperativeHandle(ref, () => ({
     getValidation: () => validation,
     getContent: () => currentContent,
-    getDeviceContent: variant === HTML_EDITOR_VARIANTS.INAPP && typeof getDeviceContent === 'function'
-      ? getDeviceContent
-      : undefined,
     isContentEmpty: () => !currentContent || currentContent.trim() === '',
     getIssueCounts: () => {
       if (!validation || typeof validation.getAllIssues !== 'function') {
@@ -327,7 +324,7 @@ const HTMLEditor = forwardRef(({
         : countIssuesBySeverity(validation.getAllIssues()),
     })
     ,
-  }), [validation, currentContent, apiValidationErrors, variant, getDeviceContent]);
+  }), [validation, currentContent, apiValidationErrors]);
 
   // Use ref to store callback to avoid infinite loops (callback in deps would cause re-runs)
   const onValidationChangeRef = useRef(onValidationChange);
@@ -835,5 +832,5 @@ HTMLEditor.defaultProps = {
   apiValidationErrors: null, // API validation errors from validateLiquidTemplateContent
 };
 
-// Export with injectIntl - forwardRef so parent (e.g. InApp) can use ref for getDeviceContent (Test and Preview)
-export default injectIntl(HTMLEditor, { forwardRef: true });
+// Export with injectIntl - HTMLEditor uses forwardRef internally
+export default injectIntl(HTMLEditor);

package/v2Components/HtmlEditor/index.lazy.js

@@ -40,14 +40,14 @@ const LazyHTMLEditor = React.lazy(() =>
  *
  * This component wraps the HTMLEditor with React.lazy() and Suspense
  * to enable code splitting and reduce initial bundle size.
- * Forwards ref so parent (e.g. InApp) can call getDeviceContent for Test and Preview.
  */
-const HTMLEditorLazy = React.forwardRef((props, ref) => (
-  <Suspense fallback={<HTMLEditorFallback />}>
-    <LazyHTMLEditor {...props} ref={ref} />
-  </Suspense>
-));
-HTMLEditorLazy.displayName = 'HTMLEditorLazy';
+const HTMLEditorLazy = (props) => {
+  return (
+    <Suspense fallback={<HTMLEditorFallback />}>
+      <LazyHTMLEditor {...props} />
+    </Suspense>
+  );
+};
 
 // Forward all prop types from the original component
 HTMLEditorLazy.propTypes = {

package/v2Containers/InApp/index.js

@@ -61,7 +61,7 @@ import { validateInAppContent } from "../../utils/commonUtils";
 import { hasLiquidSupportFeature } from "../../utils/common";
 import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 import HTMLEditor from "../../v2Components/HtmlEditor";
-import { HTML_EDITOR_VARIANTS, DEVICE_TYPES as HTML_DEVICE_TYPES } from "../../v2Components/HtmlEditor/constants";
+import { HTML_EDITOR_VARIANTS } from "../../v2Components/HtmlEditor/constants";
 import { INAPP_EDITOR_TYPES } from "../InAppWrapper/constants";
 import InappAdvanced from "../InappAdvance/index";
 import { ErrorInfoNote } from "../../v2Components/ErrorInfoNote";
@@ -142,10 +142,13 @@ export const InApp = (props) => {
   const [isHTMLTemplate, setIsHTMLTemplate] = useState(false);
   // Version to force HTMLEditor remount on layout changes
   const [htmlEditorContentVersion, setHtmlEditorContentVersion] = useState(0);
-  // Refs to store latest content before layout changes
+  // Refs to store latest content (kept in sync in handleHtmlContentChange so Test and Preview reads fresh content in library mode)
   const htmlContentAndroidRef = useRef(htmlContentAndroid);
   const htmlContentIosRef = useRef(htmlContentIos);
-  const htmlEditorRef = useRef(null);
+  useEffect(() => {
+    htmlContentAndroidRef.current = htmlContentAndroid;
+    htmlContentIosRef.current = htmlContentIos;
+  }, [htmlContentAndroid, htmlContentIos]);
   const [accountId, setAccountId] = useState("");
   const [accessToken, setAccessToken] = useState("");
   const [accountName, setAccountName] = useState("");
@@ -173,24 +176,15 @@ export const InApp = (props) => {
   // TestAndPreviewSlidebox state
   const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
 
-  // Get template content for TestAndPreviewSlidebox
-  // Returns simple structure with preview fields only
-  // Transformation to payload structure happens in prepareTestMessagePayload
-  // Reference: Based on getPreviewSection() function (lines 490-530) which prepares content for TemplatePreview
+  // Get template content for TestAndPreviewSlidebox (same pattern as Mobile Push: read current content for preview)
+  // State is updated on every keystroke via onContentChange; refs are synced so we read fresh content in library mode too.
   const getTemplateContent = useCallback(() => {
-    // For HTML template: prefer editor ref (source of truth) so library mode preview gets latest content
-    let androidMsg = templateMessageAndroid;
-    let iosMsg = templateMessageIos;
-    if (isHTMLTemplate) {
-      const getDeviceContentFromEditor = htmlEditorRef.current?.getDeviceContent;
-      if (typeof getDeviceContentFromEditor === 'function') {
-        androidMsg = getDeviceContentFromEditor(HTML_DEVICE_TYPES.ANDROID) ?? '';
-        iosMsg = getDeviceContentFromEditor(HTML_DEVICE_TYPES.IOS) ?? '';
-      } else {
-        androidMsg = htmlContentAndroidRef.current ?? htmlContentAndroid ?? '';
-        iosMsg = htmlContentIosRef.current ?? htmlContentIos ?? '';
-      }
-    }
+    const androidMsg = isHTMLTemplate
+      ? (htmlContentAndroidRef.current ?? htmlContentAndroid ?? '')
+      : templateMessageAndroid;
+    const iosMsg = isHTMLTemplate
+      ? (htmlContentIosRef.current ?? htmlContentIos ?? '')
+      : templateMessageIos;
 
     // Prepare Android content
     const androidMediaPreview = {};
@@ -1019,11 +1013,12 @@ export const InApp = (props) => {
     );
   };
 
-  // Handle HTML content changes from HTMLEditor
+  // Handle HTML content changes from HTMLEditor - update state and refs so Test and Preview has fresh content (full + library mode)
   const handleHtmlContentChange = useCallback((deviceContent, changedDevice) => {
     // When "keep content same" is on, useInAppContent passes full deviceContent with both
     // android and ios set to the same value. We must update both states so preview shows
     // the synced content for each device. Otherwise only update the device that changed.
+    // Refs are updated synchronously so getTemplateContent() reads latest when opening the slidebox.
 
     // Clear validation errors when content changes (similar to Bee Editor)
     if (changedDevice) {
@@ -1046,33 +1041,36 @@ export const InApp = (props) => {
     const isSyncUpdate = hasAndroid && hasIos;
 
     if (isSyncUpdate) {
-      // Sync mode: update both so preview shows same content for Android and iOS
       if (hasAndroid) {
-        setHtmlContentAndroid(deviceContent.android || '');
+        const v = deviceContent.android || '';
+        htmlContentAndroidRef.current = v;
+        setHtmlContentAndroid(v);
       }
       if (hasIos) {
-        setHtmlContentIos(deviceContent.ios || '');
+        const v = deviceContent.ios || '';
+        htmlContentIosRef.current = v;
+        setHtmlContentIos(v);
       }
     } else if (changedDevice) {
-      // Only one device changed
       if (changedDevice.toUpperCase() === ANDROID && hasAndroid) {
-        setHtmlContentAndroid(deviceContent.android || '');
+        const v = deviceContent.android || '';
+        htmlContentAndroidRef.current = v;
+        setHtmlContentAndroid(v);
       } else if (changedDevice.toUpperCase() === IOS_CAPITAL && hasIos) {
-        setHtmlContentIos(deviceContent.ios || '');
+        const v = deviceContent.ios || '';
+        htmlContentIosRef.current = v;
+        setHtmlContentIos(v);
       }
     } else {
-      // Fallback: update both if changedDevice not provided
       if (hasAndroid) {
-        setHtmlContentAndroid((prev) => {
-          const newValue = deviceContent.android || '';
-          return prev !== newValue ? newValue : prev;
-        });
+        const newValue = deviceContent.android || '';
+        htmlContentAndroidRef.current = newValue;
+        setHtmlContentAndroid((prev) => (prev !== newValue ? newValue : prev));
       }
       if (hasIos) {
-        setHtmlContentIos((prev) => {
-          const newValue = deviceContent.ios || '';
-          return prev !== newValue ? newValue : prev;
-        });
+        const newValue = deviceContent.ios || '';
+        htmlContentIosRef.current = newValue;
+        setHtmlContentIos((prev) => (prev !== newValue ? newValue : prev));
       }
     }
   }, [ANDROID, IOS_CAPITAL, setErrorMessage]);
@@ -1334,7 +1332,6 @@ export const InApp = (props) => {
           )}
           {shouldUseHTMLEditor ? (
             <HTMLEditor
-              ref={htmlEditorRef}
               key={`inapp-html-editor-v${htmlEditorContentVersion}`}
               variant={HTML_EDITOR_VARIANTS.INAPP}
               layoutType={templateLayoutType}