@capillarytech/creatives-library 8.0.213 → 8.0.214-beta.0

package/HOW_BEE_EDITOR_WORKS.md

@@ -0,0 +1,375 @@
+Tracing how the BEE editor is loaded in the Email create and edit flows. Searching the codebase for relevant code.
+
+
+[5 tools called]
+
+
+Reviewing key files to understand the flow:
+
+
+[4 tools called]
+
+
+Reviewing how BEE editor gets initialized with token and JSON data:
+
+
+[4 tools called]
+
+
+Reviewing the edit flow initialization:
+
+
+[1 tool called]
+
+
+## How BEE Editor is Loaded in Email Create and Edit Flows
+
+### Overview
+The BEE editor loads via a multi-step process that fetches CMS settings (token and JSON) and renders the editor component when conditions are met.
+
+---
+
+## CREATE FLOW
+
+### 1. Initial Setup (EmailWrapper)
+Location: `app/v2Containers/EmailWrapper/hooks/useEmailWrapper.js`
+
+- User selects "Use Editor" mode
+- When step is `TEMPLATE_SELECTION` and templates are needed:
+```223:230:app/v2Containers/EmailWrapper/hooks/useEmailWrapper.js
+      case STEPS.TEMPLATE_SELECTION:
+        const needsTemplates = emailCreateMode === EMAIL_CREATE_MODES.EDITOR
+          && !CmsTemplates
+          && !getCmsTemplatesInProgress;
+
+        if (needsTemplates) {
+          templatesActions.getDefaultBeeTemplates();
+        }
+```
+- User selects a template → `handleEdmDefaultTemplateSelection` is called
+- Sets `selectedCreateMode` to `EDITOR` and stores the selected template
+
+### 2. Email Component Initialization
+Location: `app/v2Containers/Email/index.js`
+
+In `componentWillMount`:
+```208:219:app/v2Containers/Email/index.js
+    const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
+    const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+    if (!_.isEmpty(this.props.Templates.BEETemplate)) {
+      if (this.props.Templates.BEETemplate.versions.base.is_drag_drop && isBEEAppEnable ) {
+        this.setState({isDragDrop: true});
+      }
+      if (this.props.params.id) {
+        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'open', undefined, isBEESupport, isBEEAppEnable);
+      } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
+        this.props.actions.getCmsSetting(BEE_PLUGIN, _.get(this.props.Templates.BEETemplate, 'versions.base.drag_drop_id', this.props.Templates.BEETemplate?._id), 'create', undefined, isBEESupport, isBEEAppEnable);
+      }
+    }
+```
+
+- For create flow: calls `getCmsSetting` with `cmsMode: 'create'`
+- This fetches the BEE token and settings from the API
+
+### 3. Receiving CMS Settings
+Location: `app/v2Containers/Email/index.js` - `componentWillReceiveProps`
+
+When `CmsSettings` are received:
+```379:419:app/v2Containers/Email/index.js
+      if (!_.isEmpty(nextProps.Email.CmsSettings) && !_.isEqual(this.props.Email.CmsSettings, nextProps.Email.CmsSettings) && !_.isEmpty(this.state.schema)) {
+        const apiLangId = nextProps.Email.CmsSettings.langId;
+        const langId = nextProps.Email.CmsSettings.langId !== "undefined" ? nextProps.Email.CmsSettings.langId : nextProps.currentOrgDetails.basic_details.base_language;
+
+        const formData = _.cloneDeep(this.state.formData);
+
+        const schema = _.cloneDeep(this.state.schema);
+        const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
+
+        const temp = (schema.containers || {})[this.state.currentTab - 1];
+
+        const { currentTab } = this.state;
+        if (nextProps.Email.CmsSettings.isDragDrop && this.checkBeeEditorAllowedForLibrary()) {
+          const beeJson = `BEEeditor${currentTab > 1 ? currentTab : ''}json`;
+          const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
+          let beeJsonValue = _.get(nextProps, 'Templates.BEETemplate.versions.base.json-content', '');
+          const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate.versions.base.drag_drop_id', '');
+          if (this.state.isEdit) {
+            if (this.props.location.query.module === "library") {
+              beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
+            } else {
+              beeJsonValue = _.get(nextProps, `Email.templateDetails.versions.base[${langId}].json-content`, '');
+            }
+          }
+          formData[`${currentTab - 1}`][langId] = {
+            ...formData[`${currentTab - 1}`][langId],
+            is_drag_drop: true,
+            [beeJson]: beeJsonValue,
+            [beeToken]: nextProps.Email.CmsSettings.tokenData,
+            id: selectedId,
+          };
+          _.forEach(temp.panes, (pane, index) => {
+            const tempPane = pane;
+            //
+            if (parseInt(index, 10) === parseInt(langIndex, 10)) {
+              //
+              tempPane.sections[0].inputFields[0].cols[1].colStyle = {display: ""};
+              tempPane.sections[0].inputFields[0].cols[0].colStyle = {display: "none"};
+            }
+          });
+          this.setState({schema, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1});
+```
+
+- Stores `tokenData` and `json-content` in formData
+- Updates schema to show BEE editor (hide CKEditor)
+- Sets `is_drag_drop: true`
+
+### 4. FormBuilder Renders BEE Editor
+Location: `app/v2Components/FormBuilder/index.js`
+
+When schema type is `"BEEeditor"`:
+```3976:4027:app/v2Components/FormBuilder/index.js
+          case "BEEeditor": {
+            let langTab = 1;
+            if (val.id.match(/BEEeditor/g)) {
+              if (val.id.length > 9 && val.id.charAt(9)) {
+                langTab = val.id.charAt(9);
+              }
+            }
+            const { currentTab, formData } = this.state;
+            const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages || {};
+            const currentLang = supportedLanguages[langTab - 1];
+
+            let beeJson = '',
+              beeToken = '',
+              uuid = '';
+            const data = formData[`${currentTab - 1}`][currentLang];
+            if (data) {
+              beeJson = data[`BEEeditor${currentTab > 1 ? currentTab : ''}json`];
+              beeToken = data[`BEEeditor${currentTab > 1 ? currentTab : ''}token`];
+              uuid = this.props.uuid;
+            }
+            if (!beeJson || !beeToken) {
+              return false;
+            }
+            let isModuleFilterEnabled = _.get(this.props.location, 'query.type', '') !== 'embedded';
+            const schemaChannel = _.get(this.props.schema, 'channel', "");
+            if (schemaChannel === 'EMAIL') {
+              isModuleFilterEnabled = this.props.isFullMode;
+            }
+            columns.push(
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}`}>
+                <BeeEditor
+                  uid={uuid}
+                  tokenData={beeToken}
+                  id={val.id}
+                  beeJson={beeJson}
+                  showTagsPopover={this.showTagsPopover}
+                  location={this.props.location}
+                  label={val.label || ''}
+                  className={val.className || ''}
+                  userLocale={this.props.userLocale}
+                  selectedOfferDetails={this.props.selectedOfferDetails}
+                  tags={this.props.tags || []}
+                  injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                  saveBeeInstance={this.props.saveBeeInstance}
+                  saveBeeData={this.props.saveBeeData}
+                  onContextChange={this.props.onContextChange}
+                  moduleFilterEnabled={isModuleFilterEnabled}
+                  eventContextTags={this.props?.eventContextTags}
+                />
+              </CapColumn>
+            );
+          }
+```
+
+- Extracts `beeJson` and `beeToken` from formData
+- Renders `<BeeEditor>` with these props
+
+### 5. BeeEditor Component Initialization
+Location: `app/v2Containers/BeeEditor/index.js`
+
+In `useEffect`:
+```107:197:app/v2Containers/BeeEditor/index.js
+  useEffect(() => {
+    const beeConfig = {
+      uid,
+      container: 'bee-plugin-container',
+      translationsUrl: defaultFormattedUrl,
+      rowsConfiguration: {
+        emptyRows: true,
+        defaultRows: true,
+        externalContentURLs: getExternalContentURLs(),
+      },
+      contentDialog: {
+        specialLinks: {
+          label: UNSUBSCRIBE,
+          handler(resolve) {
+            resolve({
+              type: 'custom',
+              label: UNSUBSCRIBE,
+              link: `{{${UNSUBSCRIBE}}}`,
+            });
+          },
+        },
+        mergeTags: {
+          label: formatMessage(messages.addLabel),
+          handler: async (resolve, reject) => {
+            // this will open tag modal
+            await setVisibleTaglist(true);
+            // until tag modal will not open promise will not execute
+            // once tag modal is opened it will start 2 sec interval to wait use has selected any tag or cancel the tag selection
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                // this will execute, if user cancel the tag selection
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  return;
+                }
+                // this block is checking use has selected any tag or not
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                  setSelectedTag({});
+                  clearInterval(intervalTimer);
+                }
+              }, 2000);
+            });
+            // once prmise will resolve , pass the resolve data to handler to show tags in bee edior
+            const result = await promise;
+            resolve(result);
+          },
+        },
+        saveRow: {
+          handler: async (resolve, reject) => {
+            await setRowMetaModal(true);
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  setRowMetaInfo({});
+                  setRowName('');
+                  setRowCategory('');
+                  return;
+                }
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                }
+              }, 2000);
+            });
+            const result = await promise;
+            resolve(result); // "done!"
+            setRowMetaInfo({});
+            setRowName('');
+            setRowCategory('');
+            clearInterval(intervalTimer);
+          },
+        },
+      },
+      onSave: (jsonFile, htmlFile) => {
+        saveBeeData(jsonFile, htmlFile);
+      },
+      onSaveRow: (rowJSON) => {
+        actions.createCustomRow(JSON.parse(rowJSON), callbackSaveRow);
+      },
+    };
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      const parseJson = JSON.parse(beeJson);
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance);
+    });
+    return () => clearInterval(intervalTimer);
+  }, []);
+```
+
+- Creates BEE plugin instance with `tokenData`
+- Starts editor with parsed `beeJson`
+- Saves instance reference
+
+---
+
+## EDIT FLOW
+
+### 1. Component Initialization
+Location: `app/v2Containers/Email/index.js`
+
+In `componentWillMount`:
+```193:199:app/v2Containers/Email/index.js
+    if (this.props.params.id || (this.props.location.query.module === "library" && this.props.templateData && !_.isEmpty(this.props.templateData))) {
+      this.setState({isEdit: true}, () => {
+        if (this.props.params.id) {
+          this.props.actions.getTemplateDetails(this.props.params.id, 'email');
+        }
+      });
+    }
+```
+
+- Sets `isEdit: true`
+- Fetches template details if `params.id` exists
+
+### 2. Setting Edit Data
+Location: `app/v2Containers/Email/index.js` - `setEditData`
+
+After template details load:
+```992:1003:app/v2Containers/Email/index.js
+      const isBEEAppEnable = this.checkBeeEditorAllowedForLibrary();
+      _.forEach((editData.versions.base.selectedLanguages), (language) => {
+        // if (formData[this.state.currentTab - 1].tabKey === formData[this.state.currentTab - 1][language].tabKey) {
+        //   formData[this.state.currentTab - 1].activeTab = language;
+        // }
+        // if (formData.base.tabKey === formData.base[language].tabKey) {
+        //   formData.base.activeTab = language;
+        // }
+        if (language && editData.versions.base[language].is_drag_drop && isBEEAppEnable) {
+          this.props.actions.getCmsSetting(BEE_PLUGIN, editData._id, 'open', language, isBEESupport, isBEEAppEnable);
+        }
+      });
+```
+
+- For each language with `is_drag_drop: true`, calls `getCmsSetting` with `cmsMode: 'open'` and the template `_id`
+
+### 3. Receiving CMS Settings (Same as Create)
+When `CmsSettings` are received, the same logic applies:
+- Stores token and JSON in formData
+- Updates schema to show BEE editor
+- For edit, uses existing `json-content` from template data:
+```396:401:app/v2Containers/Email/index.js
+          if (this.state.isEdit) {
+            if (this.props.location.query.module === "library") {
+              beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
+            } else {
+              beeJsonValue = _.get(nextProps, `Email.templateDetails.versions.base[${langId}].json-content`, '');
+            }
+          }
+```
+
+### 4. FormBuilder Renders BEE Editor (Same as Create)
+Same rendering logic as create flow.
+
+### 5. BeeEditor Component Initialization (Same as Create)
+Same initialization logic as create flow.
+
+---
+
+## Key Differences: Create vs Edit
+
+| Aspect | Create Flow | Edit Flow |
+|--------|-------------|-----------|
+| CMS Mode | `'create'` | `'open'` |
+| Template ID | From `BEETemplate.versions.base.drag_drop_id` | From `editData._id` |
+| JSON Content | From `BEETemplate.versions.base.json-content` (template default) | From `templateDetails.versions.base[langId].json-content` (saved template) |
+| Trigger | User selects template in EmailWrapper | Template details loaded in `setEditData` |
+
+---
+
+## API Flow
+
+1. `getCmsSetting` action → calls `getCmsTemplateSettingsV2` API
+2. API returns: `tokenData`, `isDragDrop`, `uuid`, `langId`
+3. Redux stores result in `Email.CmsSettings`
+4. Component receives props → updates formData and schema
+5. FormBuilder renders BeeEditor with token and JSON
+6. BeeEditor initializes BEE plugin instance
+
+This flow ensures the BEE editor loads with the correct authentication token and template content for both create and edit scenarios.

package/constants/unified.js

@@ -45,6 +45,7 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
+export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.213",
+  "version": "8.0.214-beta.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -465,6 +465,11 @@ export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, is
   return API.get(url);
 };
 
+export const getCmsAccounts = (cmsType) => {
+  const url = `${API_ENDPOINT}/cms/accounts?type=${cmsType}`;
+  return API.get(url);
+};
+
 export const getCmsTemplateData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);

package/utils/common.js

@@ -22,7 +22,8 @@ import {
   BADGES_ISSUE,
   ENABLE_WECHAT,
   LIQUID_SUPPORT,
-  ENABLE_NEW_MPUSH
+  ENABLE_NEW_MPUSH,
+  SUPPORT_CK_EDITOR
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -95,6 +96,10 @@ export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
   LIQUID_SUPPORT,
 );
 
+export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
+  null,
+  SUPPORT_CK_EDITOR,
+);
 
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,

package/v2Components/CapTagList/index.js

@@ -468,7 +468,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             onVisibleChange={this.togglePopoverVisibility}
             content={contentSection}
             trigger="click"
-            placement={channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop"}
+            placement={this.props.popoverPlacement || (channel === EMAIL.toUpperCase() ? "leftTop" : "rightTop")}
           >
             <CapTooltip
               title={
@@ -535,6 +535,7 @@ CapTagList.propTypes = {
   channel: PropTypes.string,
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
+  popoverPlacement: PropTypes.string,
 };
 
 CapTagList.defaultValue = {

package/v2Components/CapTagListWithInput/index.js

@@ -48,13 +48,14 @@ export const CapTagListWithInput = (props) => {
     showTagList = true,
     showInput = true,
     inputProps = {},
+    popoverPlacement,
   } = props;
 
   const { formatMessage } = intl;
 
   return (
     <CapColumn style={containerStyle}>
-      <CapRow style={{display: 'flex', flexDirection: 'row'}}>
+      <CapRow align="middle" type="flex">
         {showHeading && headingText && (
           <CapHeading type={headingType} style={headingStyle}>
             {headingText}
@@ -76,6 +77,7 @@ export const CapTagListWithInput = (props) => {
             selectedOfferDetails={selectedOfferDetails}
             eventContextTags={eventContextTags}
             style={tagListStyle}
+            popoverPlacement={popoverPlacement}
           />
         )}
       </CapRow>
@@ -136,6 +138,7 @@ CapTagListWithInput.propTypes = {
   showHeading: PropTypes.bool,
   showTagList: PropTypes.bool,
   showInput: PropTypes.bool,
+  popoverPlacement: PropTypes.string,
 };
 
 CapTagListWithInput.defaultProps = {
@@ -164,6 +167,7 @@ CapTagListWithInput.defaultProps = {
   showTagList: true,
   showInput: true,
   inputProps: {},
+  popoverPlacement: undefined,
 };
 
 export default injectIntl(CapTagListWithInput);

package/v2Components/CapTagListWithInput/messages.js

@@ -5,6 +5,6 @@ const prefix = 'creatives.componentsV2.CapTagListWithInput';
 export default defineMessages({
   addLabels: {
     id: `${prefix}.addLabels`,
-    defaultMessage: 'Add labels',
+    defaultMessage: 'Add label',
   },
 });

package/v2Components/ErrorInfoNote/style.scss

@@ -1,7 +1,7 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
-  width: max-content;
+  width: 100%;
   margin-bottom: $CAP_SPACE_08;
   margin-top: $CAP_SPACE_12;
   background-color: $CAP_COLOR_05;

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -12,7 +12,7 @@
  * Note: Uses injectIntl with forwardRef to provide direct access to CodeEditorPane via ref
  */
 
-import React, { useRef, useCallback, useMemo, useState } from 'react';
+import React, { useRef, useCallback, useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Layout } from 'antd'; // Fallback - no Cap UI equivalent
 import { injectIntl, intlShape } from 'react-intl';
@@ -61,6 +61,16 @@ const HTMLEditor = ({
   showFullscreenButton = true,
   autoSave = true,
   autoSaveInterval = 30000, // 30 seconds
+  // Tag-related props - tags are fetched and managed by parent component (EmailHTMLEditor, INAPP, etc.)
+  tags = [],
+  injectedTags = {},
+  location,
+  eventContextTags = [],
+  selectedOfferDetails = [],
+  channel,
+  userLocale = 'en',
+  moduleFilterEnabled = true,
+  onTagContextChange, // Parent component handles tag fetching
   ...props
 }) => {
   // Separate refs for main and modal editors to avoid conflicts
@@ -117,6 +127,29 @@ const HTMLEditor = ({
   // Use appropriate content hook based on variant
   const content = variant === HTML_EDITOR_VARIANTS.EMAIL ? emailContent : inAppContent;
 
+  // Update content when initialContent prop changes (for edit mode)
+  // This ensures the editor updates when template data loads
+  useEffect(() => {
+    if (isEmailVariant && emailContent && initialContent !== undefined && initialContent !== null) {
+      // Only update if content is different to avoid unnecessary updates
+      if (emailContent.content !== initialContent) {
+        emailContent.updateContent(initialContent, true); // immediate update
+      }
+    } else if (isInAppVariant && inAppContent && initialContent !== undefined && initialContent !== null) {
+      // Handle InApp variant updates
+      const contentToUpdate = typeof initialContent === 'string'
+        ? { [DEVICE_TYPES.ANDROID]: initialContent, [DEVICE_TYPES.IOS]: initialContent }
+        : initialContent;
+      if (inAppContent.updateContent) {
+        const currentContent = inAppContent.getDeviceContent?.(inAppContent.activeDevice);
+        const newContent = contentToUpdate[inAppContent.activeDevice] || contentToUpdate[DEVICE_TYPES.ANDROID] || '';
+        if (currentContent !== newContent) {
+          inAppContent.updateContent(newContent, true);
+        }
+      }
+    }
+  }, [initialContent, isEmailVariant, isInAppVariant]);
+
   // Destructure content properties for cleaner access throughout component
   const {
     activeDevice,
@@ -387,6 +420,15 @@ const HTMLEditor = ({
               ref={mainEditorRef}
               readOnly={readOnly}
               onLabelInsert={handleLabelInsert}
+              tags={tags}
+              injectedTags={injectedTags}
+              location={location}
+              eventContextTags={eventContextTags}
+              selectedOfferDetails={selectedOfferDetails}
+              channel={channel}
+              userLocale={userLocale}
+              moduleFilterEnabled={moduleFilterEnabled}
+              onTagContextChange={onTagContextChange}
             />
 
             {/* Preview Pane */}
@@ -454,19 +496,28 @@ const HTMLEditor = ({
                   readOnly={readOnly}
                   isFullscreenMode={true}
                   onLabelInsert={handleLabelInsert}
+                  tags={tags}
+                  injectedTags={injectedTags}
+                  location={location}
+                  eventContextTags={eventContextTags}
+                  selectedOfferDetails={selectedOfferDetails}
+                  channel={channel}
+                  userLocale={userLocale}
+                  moduleFilterEnabled={moduleFilterEnabled}
+                  onTagContextChange={onTagContextChange}
                 />
 
-              {/* Preview Pane */}
-              <PreviewPane isFullscreenMode={true} isModalContext={true} />
-            </SplitContainer>
+                {/* Preview Pane */}
+                <PreviewPane isFullscreenMode={true} isModalContext={true} />
+              </SplitContainer>
 
-            {/* Validation Display in Modal */}
-            <ValidationErrorDisplay
-              validation={validation}
-              onErrorClick={handleValidationErrorClick}
-              variant={variant}
-              className="html-editor-validation"
-            />
+              {/* Validation Display in Modal */}
+              <ValidationErrorDisplay
+                validation={validation}
+                onErrorClick={handleValidationErrorClick}
+                variant={variant}
+                className="html-editor-validation"
+              />
             </CapRow>
           </CapRow>
         </CapModal>
@@ -481,7 +532,7 @@ HTMLEditor.propTypes = {
   layoutType: PropTypes.string, // Layout type for InApp variant
   initialContent: PropTypes.oneOfType([
     PropTypes.string,
-    PropTypes.objectOf(PropTypes.string) // Per-device content for INAPP variant
+    PropTypes.objectOf(PropTypes.string), // Per-device content for INAPP variant
   ]),
   onSave: PropTypes.func,
   onContentChange: PropTypes.func,
@@ -489,11 +540,22 @@ HTMLEditor.propTypes = {
   readOnly: PropTypes.bool,
   showFullscreenButton: PropTypes.bool,
   autoSave: PropTypes.bool,
-  autoSaveInterval: PropTypes.number
+  autoSaveInterval: PropTypes.number,
+  // Tag-related props - tags are fetched and managed by parent component
+  tags: PropTypes.array,
+  injectedTags: PropTypes.object,
+  location: PropTypes.object,
+  eventContextTags: PropTypes.array,
+  selectedOfferDetails: PropTypes.array,
+  channel: PropTypes.string,
+  userLocale: PropTypes.string,
+  moduleFilterEnabled: PropTypes.bool,
+  onTagContextChange: PropTypes.func, // Required - parent must handle tag fetching
 };
 
 HTMLEditor.defaultProps = {
   variant: HTML_EDITOR_VARIANTS.EMAIL, // Default to email variant
+  layoutType: null,
   initialContent: null, // Will use default from useEditorContent hook
   onSave: null,
   onContentChange: null,
@@ -501,7 +563,17 @@ HTMLEditor.defaultProps = {
   readOnly: false,
   showFullscreenButton: true,
   autoSave: true,
-  autoSaveInterval: 30000
+  autoSaveInterval: 30000,
+  // Tag-related defaults - tags are fetched and managed by parent component
+  tags: [],
+  injectedTags: {},
+  location: null,
+  eventContextTags: [],
+  selectedOfferDetails: [],
+  channel: null,
+  userLocale: 'en',
+  moduleFilterEnabled: true,
+  onTagContextChange: null, // Parent component should provide this
 };
 
 // Export with forwardRef to allow direct access to CodeEditorPane via ref

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -267,10 +267,10 @@
 
 // Focus states and accessibility
 .html-editor {
-  &:focus-within {
-    outline: 0.125rem solid map-get($CAP_PRIMARY, base); // 2px = 0.125rem
-    outline-offset: -0.125rem; // -2px = -0.125rem
-  }
+  // &:focus-within {
+  //   outline: 0.125rem solid map-get($CAP_PRIMARY, base); // 2px = 0.125rem
+  //   outline-offset: -0.125rem; // -2px = -0.125rem
+  // }
 
   // High contrast mode support
   @media (prefers-contrast: high) {