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

package/package.json

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

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -113,6 +113,8 @@ const HTMLEditor = forwardRef(({
   const mainEditorRef = useRef(null);
   const modalEditorRef = useRef(null);
   const [isFullscreenModalOpen, setIsFullscreenModalOpen] = useState(false);
+  // InApp only: last initialContent value we applied (by value) to avoid reverting user edits on parent re-render
+  const inAppLastAppliedInitialRef = useRef({ android: '', ios: '' });
 
   // Get the currently active editor ref based on fullscreen state
   const getActiveEditorRef = useCallback(() => isFullscreenModalOpen ? modalEditorRef : mainEditorRef, [isFullscreenModalOpen]);
@@ -174,19 +176,22 @@ const HTMLEditor = forwardRef(({
       const contentToUpdate = typeof initialContent === 'string'
         ? { [DEVICE_TYPES.ANDROID]: initialContent, [DEVICE_TYPES.IOS]: initialContent }
         : initialContent;
-      if (inAppContent.updateContent) {
-        const activeDevice = inAppContent.activeDevice;
-        const currentContent = inAppContent.getDeviceContent?.(activeDevice);
-        // Use active device's value only; empty string is valid (don't fall back to other device)
-        const newContent = activeDevice in contentToUpdate
-          ? (contentToUpdate[activeDevice] ?? '')
-          : (contentToUpdate[DEVICE_TYPES.ANDROID] ?? '');
-        if (currentContent !== newContent) {
-          inAppContent.updateContent(newContent, true);
-        }
-      }
+      const newAndroid = contentToUpdate[DEVICE_TYPES.ANDROID] ?? '';
+      const newIos = contentToUpdate[DEVICE_TYPES.IOS] ?? '';
+      const last = inAppLastAppliedInitialRef.current;
+      // InApp: only sync when initialContent value actually changed (first load or template switch)
+      // so we don't revert user typing when parent re-renders with same content (new ref)
+      const valueChanged = newAndroid !== (last.android ?? '') || newIos !== (last.ios ?? '');
+      if (!valueChanged) return;
+      if (!inAppContent.updateContent) return;
+      const activeDevice = inAppContent.activeDevice;
+      const newContent = activeDevice in contentToUpdate
+        ? (contentToUpdate[activeDevice] ?? '')
+        : (contentToUpdate[DEVICE_TYPES.ANDROID] ?? '');
+      inAppContent.updateContent(newContent, true);
+      inAppLastAppliedInitialRef.current = { android: newAndroid, ios: newIos };
     }
-  }, [initialContent, isEmailVariant, isInAppVariant]);
+  }, [initialContent, isEmailVariant, isInAppVariant, emailContent, inAppContent]);
   // Handle context change for tag API calls
   // If variant is INAPP, use SMS layout; otherwise use the channel (EMAIL)
   const handleContextChange = useCallback((contextData) => {
@@ -300,10 +305,13 @@ const HTMLEditor = forwardRef(({
     apiValidationErrors, // Pass API validation errors to merge with client-side validation
   }, formatSanitizerMessage, formatValidatorMessage);
 
-  // Expose validation and content state via ref
+  // Expose validation and content state via ref (InApp: also expose getDeviceContent for Test and Preview)
   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') {
@@ -319,7 +327,7 @@ const HTMLEditor = forwardRef(({
         : countIssuesBySeverity(validation.getAllIssues()),
     })
     ,
-  }), [validation, currentContent, apiValidationErrors]); // Include apiValidationErrors so ref methods return updated counts
+  }), [validation, currentContent, apiValidationErrors, variant, getDeviceContent]);
 
   // Use ref to store callback to avoid infinite loops (callback in deps would cause re-runs)
   const onValidationChangeRef = useRef(onValidationChange);
@@ -827,5 +835,5 @@ HTMLEditor.defaultProps = {
   apiValidationErrors: null, // API validation errors from validateLiquidTemplateContent
 };
 
-// Export with injectIntl - HTMLEditor now uses forwardRef internally
-export default injectIntl(HTMLEditor);
+// Export with injectIntl - forwardRef so parent (e.g. InApp) can use ref for getDeviceContent (Test and Preview)
+export default injectIntl(HTMLEditor, { forwardRef: true });

package/v2Components/HtmlEditor/hooks/useInAppContent.js

@@ -95,52 +95,51 @@ export const useInAppContent = (initialContent = {}, options = {}) => {
   const previousContentRef = useRef({ android: '', ios: '' });
 
   // Update content when initialContent prop changes (for edit mode)
-  // This should only run when loading a template for editing, NOT during active editing
+  // Only update when: first load, empty->content transition, or template switch (value changed).
+  // Value-based comparison prevents reverting user edits when parent re-renders with same content (new ref).
   useEffect(() => {
     const newAndroidContent = initialContent?.[ANDROID];
     const newIosContent = initialContent?.[IOS];
+    const prevRef = previousContentRef.current;
 
-    // Check if this is meaningful initialContent (has actual content)
     const hasMeaningfulContent = (newAndroidContent && newAndroidContent.trim() !== '')
       || (newIosContent && newIosContent.trim() !== '');
 
-    // Check if we're transitioning from empty to meaningful content (library mode scenario)
-    const wasEmpty = (!previousContentRef.current.android || previousContentRef.current.android.trim() === '')
-      && (!previousContentRef.current.ios || previousContentRef.current.ios.trim() === '');
+    const wasEmpty = (!prevRef.android || prevRef.android.trim() === '')
+      && (!prevRef.ios || prevRef.ios.trim() === '');
     const isTransitioningToContent = wasEmpty && hasMeaningfulContent;
 
-    // Only update if:
-    // 1. We haven't loaded initial content yet (first load), OR
-    // 2. We're transitioning from empty to meaningful content (library mode data fetch)
-    // This prevents the effect from overriding user edits during active editing
-    // while still allowing content to load properly in library mode
-    if (!initialContentLoadedRef.current || isTransitioningToContent) {
-      if (hasMeaningfulContent) {
-        // Mark as loaded to prevent future updates from overriding user edits
-        initialContentLoadedRef.current = true;
-
-        setDeviceContent((prev) => {
-          let updated = false;
-          const updatedContent = { ...prev };
-
-          if (newAndroidContent !== undefined && newAndroidContent !== prev[ANDROID]) {
-            updatedContent[ANDROID] = newAndroidContent;
-            updated = true;
-          }
-          if (newIosContent !== undefined && newIosContent !== prev[IOS]) {
-            updatedContent[IOS] = newIosContent;
-            updated = true;
-          }
+    // Value-based: did initialContent content actually change? (template switch)
+    const initialValueChanged = (newAndroidContent || '') !== (prevRef.android || '')
+      || (newIosContent || '') !== (prevRef.ios || '');
 
-          return updated ? updatedContent : prev;
-        });
+    const shouldSync = !initialContentLoadedRef.current
+      || isTransitioningToContent
+      || initialValueChanged;
 
-        // Update previous content ref
-        previousContentRef.current = {
-          android: newAndroidContent || '',
-          ios: newIosContent || '',
-        };
-      }
+    if (shouldSync && hasMeaningfulContent) {
+      initialContentLoadedRef.current = true;
+
+      setDeviceContent((prev) => {
+        let updated = false;
+        const updatedContent = { ...prev };
+
+        if (newAndroidContent !== undefined && newAndroidContent !== prev[ANDROID]) {
+          updatedContent[ANDROID] = newAndroidContent;
+          updated = true;
+        }
+        if (newIosContent !== undefined && newIosContent !== prev[IOS]) {
+          updatedContent[IOS] = newIosContent;
+          updated = true;
+        }
+
+        return updated ? updatedContent : prev;
+      });
+
+      previousContentRef.current = {
+        android: newAndroidContent || '',
+        ios: newIosContent || '',
+      };
     }
   }, [initialContent, ANDROID, IOS]);
 

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 = (props) => {
-  return (
-    <Suspense fallback={<HTMLEditorFallback />}>
-      <LazyHTMLEditor {...props} />
-    </Suspense>
-  );
-};
+const HTMLEditorLazy = React.forwardRef((props, ref) => (
+  <Suspense fallback={<HTMLEditorFallback />}>
+    <LazyHTMLEditor {...props} ref={ref} />
+  </Suspense>
+));
+HTMLEditorLazy.displayName = 'HTMLEditorLazy';
 
 // 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 } from "../../v2Components/HtmlEditor/constants";
+import { HTML_EDITOR_VARIANTS, DEVICE_TYPES as HTML_DEVICE_TYPES } from "../../v2Components/HtmlEditor/constants";
 import { INAPP_EDITOR_TYPES } from "../InAppWrapper/constants";
 import InappAdvanced from "../InappAdvance/index";
 import { ErrorInfoNote } from "../../v2Components/ErrorInfoNote";
@@ -145,6 +145,7 @@ export const InApp = (props) => {
   // Refs to store latest content before layout changes
   const htmlContentAndroidRef = useRef(htmlContentAndroid);
   const htmlContentIosRef = useRef(htmlContentIos);
+  const htmlEditorRef = useRef(null);
   const [accountId, setAccountId] = useState("");
   const [accessToken, setAccessToken] = useState("");
   const [accountName, setAccountName] = useState("");
@@ -177,9 +178,19 @@ export const InApp = (props) => {
   // Transformation to payload structure happens in prepareTestMessagePayload
   // Reference: Based on getPreviewSection() function (lines 490-530) which prepares content for TemplatePreview
   const getTemplateContent = useCallback(() => {
-    // For HTML template, use HTML editor content so preview stays in sync with typing
-    const androidMsg = isHTMLTemplate ? (htmlContentAndroid ?? '') : templateMessageAndroid;
-    const iosMsg = isHTMLTemplate ? (htmlContentIos ?? '') : templateMessageIos;
+    // 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 ?? '';
+      }
+    }
 
     // Prepare Android content
     const androidMediaPreview = {};
@@ -1323,6 +1334,7 @@ export const InApp = (props) => {
           )}
           {shouldUseHTMLEditor ? (
             <HTMLEditor
+              ref={htmlEditorRef}
               key={`inapp-html-editor-v${htmlEditorContentVersion}`}
               variant={HTML_EDITOR_VARIANTS.INAPP}
               layoutType={templateLayoutType}

package/v2Components/HtmlEditor/components/DeviceToggle/FLOW_AND_CLICK_BEHAVIOUR.md

@@ -1,70 +0,0 @@
-# DeviceToggle – Click flow and when clicks are blocked
-
-## 1. Click flow (button → end)
-
-1. **User clicks Android or iOS tab**  
-   - `CapButton` receives the click and runs  
-   - `onClick={() => handleDeviceClick(DEVICE_TYPES.ANDROID)}` or  
-   - `onClick={() => handleDeviceClick(DEVICE_TYPES.IOS)}`.
-
-2. **`handleDeviceClick(device)`** (in `DeviceToggle/index.js`):
-   - Only does something if **both**:
-     - `onDeviceChange` is truthy (passed from parent), and  
-     - `device !== activeDevice` (clicked tab is not already active).
-   - If both hold: calls `onDeviceChange(device)`.
-
-3. **Parent wiring** (`HTMLEditor.js`):
-   - `onDeviceChange={switchDevice}`  
-   - So `onDeviceChange` is the `switchDevice` from `useInAppContent`.
-
-4. **`switchDevice(device)`** (`hooks/useInAppContent.js`):
-   - `validDevices = [ANDROID, IOS]` (from `DEVICE_TYPES`: `'android'`, `'ios'`).
-   - If `device !== activeDevice` and `validDevices.includes(device)` → `setActiveDevice(device)`.
-   - If `device` is invalid → logs a warning and does nothing.
-
-5. **Result**  
-   - `activeDevice` updates → DeviceToggle and preview re-render with the new device; no explicit “block” inside this flow.
-
----
-
-## 2. When the click is effectively “blocked” or does nothing
-
-- **No handler**  
-  If the parent does not pass `onDeviceChange` (or passes `undefined`/`null`), `handleDeviceClick` never calls anything. The button still receives the click; there is no visual “disabled” in DeviceToggle.
-
-- **Same device**  
-  If the user clicks the already-active tab (`device === activeDevice`), `handleDeviceClick` does nothing by design.
-
-- **Invalid device**  
-  If `device` is not `'android'` or `'ios'` (e.g. wrong constant when using the repo as a library), `switchDevice` only warns and does not update state.
-
-- **Click never reaches the button (layout/CSS)**  
-  Another element is on top of the tab and captures the click (see below). This is the likely cause when “the iOS button is not clickable in edit mode” when using the repo as a library.
-
----
-
-## 3. Why the iOS button can be unclickable in library (edit) mode
-
-In **library mode** (`isFullMode === false`), InApp uses a special layout:
-
-- **Header**: flex row with **DeviceToggle** first and **EditorToolbar** second.
-- **DeviceToggle** has `flex: 1` (takes remaining space).
-- **EditorToolbar** gets `position: absolute` (no `top`/`right`/`left`), so it is taken out of flow.
-
-Because the toolbar is out of flow, the only flex child in flow is the DeviceToggle, so it expands to the full width of the header. The absolutely positioned toolbar is then drawn at its “static” position, which is the **right side** of the header. So the toolbar sits **on top of the right part of the header**, which is exactly where the **iOS** tab and the “Keep content same” checkbox are. Clicks on the iOS tab are then hit by the toolbar first, so the **iOS button appears not clickable** even though the handler logic is fine.
-
-So the problem is **not** that the button is disabled or that the click handler is blocked; it’s that **the EditorToolbar overlaps the iOS tab in library mode** and steals the click.
-
----
-
-## 4. Recommended fix (library mode)
-
-Ensure the toolbar does not overlap the DeviceToggle:
-
-- Either **remove** the library-mode override that sets `position: absolute` on the toolbar so the header stays in normal flex flow, **or**
-- If you keep `position: absolute` for the toolbar:
-  - Give the header a **positioning context** (e.g. `position: relative`).
-  - Pin the toolbar to the right (e.g. `right: 0; top: 0`).
-  - Reserve space for the toolbar so DeviceToggle doesn’t extend under it (e.g. `padding-right` on the header or a fixed/min width for the toolbar and corresponding margin on the DeviceToggle).
-
-With that, the DeviceToggle (including the iOS tab) remains fully clickable in edit/library mode.