@capillarytech/creatives-library 8.0.292-alpha.10 → 8.0.292-alpha.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.292-alpha.10",
+  "version": "8.0.292-alpha.12",
   "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) => {

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -178,8 +178,6 @@
     // Pin toolbar to the right and reserve space so it does not overlap DeviceToggle (iOS tab must stay clickable)
     &.html-editor--library-mode {
       .html-editor__header {
-        position: relative;
-        padding-right: 14rem; // Reserve space for toolbar so DeviceToggle (flex: 1) doesn't extend under it
 
         .editor-toolbar,
         .editor-toolbar.editor-toolbar,
@@ -187,6 +185,7 @@
           position: absolute;
           top: 0;
           right: 0;
+          width: unset;
         }
       }
     }

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/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.