@capillarytech/creatives-library 8.0.271 → 8.0.273

package/v2Components/HtmlEditor/components/CodeEditorPane/index.js

@@ -8,33 +8,44 @@
  * - Theme support with proper styling
  */
 
-import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
+import React, {
+  forwardRef, useImperativeHandle, useRef, useEffect, useCallback,
+} from 'react';
 import PropTypes from 'prop-types';
 
 // CodeMirror 6 imports
 import { EditorState } from '@codemirror/state';
-import { EditorView, lineNumbers, highlightActiveLine } from '@codemirror/view';
+import {
+  EditorView, lineNumbers, highlightActiveLine, placeholder,
+} from '@codemirror/view';
 
-// Import our comprehensive syntax highlighting solution
-import { createRobustExtensions } from '../../utils/properSyntaxHighlighting';
+// Define Theme and Highlighting inline to avoid "multiple instances of @codemirror/state" error
 
 
 import { injectIntl, intlShape } from 'react-intl';
 
 // Messages
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import { createRobustExtensions } from '../../utils/properSyntaxHighlighting';
 import messages from '../../messages';
 
 // Cap UI Components
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
 
 // Components
 import TagList from '../../../../v2Containers/TagList';
+import ValidationErrorDisplay from '../ValidationErrorDisplay';
+
+// Constants - removed unused imports since tag fetching is handled by parent
 
 // Context
 import { useEditorContext } from '../common/EditorContext';
 
 // Styles
 import './_codeEditorPane.scss';
+import { INAPP } from '../../../../constants/unified';
+
+// Define Theme and Highlighting inline to avoid "multiple instances of @codemirror/state" error
+
 
 // Legacy CodeMirrorEditor removed - using enhanced implementation only
 
@@ -42,12 +53,25 @@ const CodeEditorPaneComponent = ({
   intl,
   readOnly = false,
   className = '',
-  isFullscreenMode = false,
-  onLabelInsert,
-  forwardedRef
+  forwardedRef,
+  // Tag-related props - tags are fetched and managed by parent component
+  tags = [],
+  injectedTags = {},
+  location,
+  eventContextTags = [],
+  selectedOfferDetails = [],
+  channel,
+  userLocale = 'en',
+  moduleFilterEnabled = true,
+  onTagContextChange,
+  // Validation props
+  onErrorClick,
 }) => {
-  const { content, validation } = useEditorContext();
-  const { content: contentValue, updateContent } = content;
+  const context = useEditorContext();
+  const {
+    content, validation, variant, isLiquidEnabled,
+  } = context || {};
+  const { content: contentValue, updateContent } = content || {};
   const editorRef = useRef(null);
   const viewRef = useRef(null);
 
@@ -61,7 +85,7 @@ const CodeEditorPaneComponent = ({
     get view() {
       return viewRef.current;
     },
-    viewRef: viewRef, // For compatibility with existing code
+    viewRef, // For compatibility with existing code
 
     focus: () => {
       if (viewRef.current) {
@@ -75,7 +99,7 @@ const CodeEditorPaneComponent = ({
         const pos = position !== undefined ? position : head;
         view.dispatch({
           changes: { from: pos, insert: text },
-          selection: { anchor: pos + text.length }
+          selection: { anchor: pos + text.length },
         });
       } else {
         throw new Error('CodeMirror view not initialized');
@@ -88,9 +112,7 @@ const CodeEditorPaneComponent = ({
       }
       return 0;
     },
-    getValue: () => {
-      return contentValue || '';
-    },
+    getValue: () => contentValue || '',
     setValue: (value) => {
       updateContent(value);
     },
@@ -107,7 +129,7 @@ const CodeEditorPaneComponent = ({
 
           view.dispatch({
             selection: { anchor: pos },
-            effects: EditorView.scrollIntoView(pos, { y: 'center' })
+            effects: EditorView.scrollIntoView(pos, { y: 'center' }),
           });
           view.focus();
         } catch (error) {
@@ -117,7 +139,7 @@ const CodeEditorPaneComponent = ({
           }
         }
       }
-    }
+    },
   }), [contentValue]);
 
   // Note: handleContentChange removed - using updateContentRef directly in CodeMirror
@@ -133,7 +155,9 @@ const CodeEditorPaneComponent = ({
       if (typeof tagData === 'string') {
         tagText = tagData;
       } else if (tagData) {
-        const { text, name, label, value } = tagData;
+        const {
+          text, name, label, value,
+        } = tagData;
         tagText = text || name || label || value;
         if (!tagText) {
           console.warn('Invalid tag data:', tagData);
@@ -147,49 +171,69 @@ const CodeEditorPaneComponent = ({
       // For unified HTML editor, insert as template variable
       const formattedTag = `{{${tagText}}}`;
 
-      // Insert the tag at cursor position
+      // Insert the tag at cursor position directly
       view.dispatch({
         changes: { from: pos, insert: formattedTag },
-        selection: { anchor: pos + formattedTag.length }
+        selection: { anchor: pos + formattedTag.length },
       });
 
       // Focus back to editor
       view.focus();
 
-      // Call the parent's handleLabelInsert if available
-      if (onLabelInsert) {
-        onLabelInsert(formattedTag, pos);
-      }
+      // Note: We don't call onLabelInsert here because:
+      // 1. The tag is already inserted directly into the editor
+      // 2. onLabelInsert (handleLabelInsert from HTMLEditor) would try to insert again
+      // 3. This causes "Editor method not available" error
+      // The direct insertion via view.dispatch is sufficient
     }
   };
 
+  // Handle tag context change - delegate to parent component
+  // Tags are fetched in parent components (EmailHTMLEditor, INAPP, etc.)
+  // This component just passes the context change event up
+  const handleTagContextChange = useCallback((data) => {
+    if (onTagContextChange) {
+      // Parent component handles tag fetching and updates
+      onTagContextChange(data);
+    }
+    // No fallback - tags must be managed by parent component
+  }, [onTagContextChange]);
+
   // Initialize CodeMirror effect
   useEffect(() => {
-    if (editorRef.current && !viewRef.current) {
-            // Use the comprehensive extensions from properSyntaxHighlighting.js
-            // This includes: html(), syntaxHighlighting(comprehensiveVSCodeTheme), cleanEditorTheme
-            const robustExtensions = createRobustExtensions();
-
-            // Add additional extensions for line numbers, active line, and update listener
-            const extensions = [
-              lineNumbers(),
-              highlightActiveLine(),
-              ...robustExtensions, // Spread the robust extensions (html, syntax highlighting, theme)
-              EditorView.updateListener.of((update) => {
-                if (update.docChanged) {
-                  updateContentRef.current(update.state.doc.toString());
-                }
-              })
-            ];
+    // Ensure editorRef.current is a valid DOM element before initializing CodeMirror
+    if (editorRef.current && editorRef.current instanceof HTMLElement && !viewRef.current) {
+      // Determine placeholder text based on channel
+      let placeholderText = intl.formatMessage(messages.editorPlaceholderEmail); // Default to email
+      if (channel === INAPP || channel === INAPP.toUpperCase()) {
+        placeholderText = intl.formatMessage(messages.editorPlaceholderInapp);
+      }
+      // Use the comprehensive extensions from properSyntaxHighlighting.js
+      // This includes: html(), syntaxHighlighting(comprehensiveVSCodeTheme), cleanEditorTheme
+      const robustExtensions = createRobustExtensions();
+
+      // Add additional extensions for line numbers, active line, placeholder, line wrapping, and update listener
+      const extensions = [
+        lineNumbers(),
+        highlightActiveLine(),
+        placeholder(placeholderText),
+        EditorView.lineWrapping, // Enable soft-wrapping of long lines
+        ...robustExtensions, // Spread the robust extensions (html, syntax highlighting, theme)
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            updateContentRef.current(update.state.doc.toString());
+          }
+        }),
+      ];
 
       const state = EditorState.create({
         doc: contentValue || '',
-        extensions
+        extensions,
       });
 
       viewRef.current = new EditorView({
         state,
-        parent: editorRef.current
+        parent: editorRef.current,
       });
     }
 
@@ -204,116 +248,70 @@ const CodeEditorPaneComponent = ({
         viewRef.current = null;
       }
     };
-  }, []);
+  }, [channel, intl]);
 
   // Update editor content when content changes
   useEffect(() => {
-    if (viewRef.current && contentValue !== viewRef.current.state.doc.toString()) {
+    if (viewRef.current && contentValue && contentValue !== viewRef.current.state.doc.toString()) {
       const { current: view } = viewRef;
       const { state: { doc: { length } } } = view;
       view.dispatch({
         changes: {
           from: 0,
           to: length,
-          insert: contentValue || ''
-        }
+          insert: contentValue || '',
+        },
       });
     }
   }, [contentValue]);
 
-    return (
-      <CapRow className={`code-editor-pane ${className}`}>
-        {/* Unified Code Editor with Floating Add Label Button */}
-        <CapRow className="code-editor-pane__content">
-          <div className="codemirror-wrapper">
-            <div ref={editorRef} className="codemirror-editor" />
-            {/* Floating Add Label Button */}
-            <CapRow className="code-editor-pane__actions">
-              <TagList
-                key="html-editor-taglist"
-                label={intl.formatMessage(messages.addLabel)}
-                onTagSelect={handleTagSelect}
-                onContextChange={(context) => {
-                }}
-                className="tag-list-trigger"
-                tags={[]} // Empty initially - TagList will fetch from API
-                injectedTags={{
-                  // Add common HTML/Email specific tags as fallback
-                  'Customer Info': {
-                    name: 'Customer Info',
-                    desc: 'Customer information tags',
-                    resolved: true,
-                    'tag-header': true,
-                    subtags: {
-                      'customer.firstName': {
-                        name: 'First Name',
-                        desc: 'Customer first name',
-                        resolved: true
-                      },
-                      'customer.lastName': {
-                        name: 'Last Name',
-                        desc: 'Customer last name',
-                        resolved: true
-                      },
-                      'customer.email': {
-                        name: 'Email',
-                        desc: 'Customer email address',
-                        resolved: true
-                      },
-                      'customer.phone': {
-                        name: 'Phone',
-                        desc: 'Customer phone number',
-                        resolved: true
-                      }
-                    }
-                  },
-                  'Common Tags': {
-                    name: 'Common Tags',
-                    desc: 'Commonly used template tags',
-                    resolved: true,
-                    'tag-header': true,
-                    subtags: {
-                      'organization.name': {
-                        name: 'Organization Name',
-                        desc: 'Organization name',
-                        resolved: true
-                      },
-                      'currentDate': {
-                        name: 'Current Date',
-                        desc: 'Current date',
-                        resolved: true
-                      },
-                      'unsubscribeLink': {
-                        name: 'Unsubscribe Link',
-                        desc: 'Unsubscribe link',
-                        resolved: true
-                      }
-                    }
-                  }
-                }}
-                moduleFilterEnabled={true}
-                userLocale="en"
-                channel="email"
-                disabled={readOnly}
-                location={{
-                  query: {
-                    type: 'html-editor' // Identify the context
-                  }
-                }}
-                selectedOfferDetails={[]}
-                eventContextTags={[]}
-              />
-            </CapRow>
-          </div>
-        </CapRow>
-
-      </CapRow>
-    );
+  return (
+    <CapRow className={`code-editor-pane ${className}`}>
+      {/* Code Editor Content - Stacked vertically with validation */}
+      <div className="code-editor-pane__wrapper">
+        {/* Code Editor with Floating Add Label Button */}
+        <div className="codemirror-wrapper">
+          <div ref={editorRef} className="codemirror-editor" />
+          {/* Floating Add Label Button */}
+          <CapRow className="code-editor-pane__actions">
+            <TagList
+              key="html-editor-taglist"
+              label={intl.formatMessage(messages.addLabel)}
+              onTagSelect={handleTagSelect}
+              onContextChange={handleTagContextChange}
+              className="tag-list-trigger"
+              tags={tags}
+              injectedTags={injectedTags}
+              moduleFilterEnabled={moduleFilterEnabled}
+              userLocale={userLocale}
+              channel={channel}
+              disabled={readOnly}
+              location={location}
+              selectedOfferDetails={selectedOfferDetails}
+              eventContextTags={eventContextTags}
+              popoverPlacement="rightTop"
+            />
+          </CapRow>
+        </div>
+
+        {/* Validation Error Display - Below editor, always visible */}
+        <ValidationErrorDisplay
+          validation={validation}
+          onErrorClick={onErrorClick}
+          isLiquidEnabled={isLiquidEnabled}
+          className="code-editor-pane__validation"
+        />
+      </div>
+    </CapRow>
+  );
 };
 
-// Create the forwardRef wrapper
+// Apply injectIntl to the component first, then wrap with forwardRef
+const CodeEditorPaneWithIntl = injectIntl(CodeEditorPaneComponent);
+
+// Create the forwardRef wrapper that forwards ref to the intl-wrapped component
 const CodeEditorPane = forwardRef((props, ref) => (
-  <CodeEditorPaneComponent {...props} forwardedRef={ref} />
+  <CodeEditorPaneWithIntl {...props} forwardedRef={ref} />
 ));
 
 CodeEditorPane.displayName = 'CodeEditorPane';
@@ -323,9 +321,19 @@ CodeEditorPane.propTypes = {
   readOnly: PropTypes.bool,
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
-  onLabelInsert: PropTypes.func
+  onLabelInsert: PropTypes.func,
+  onErrorClick: PropTypes.func,
+  // 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
 };
 
-// Export with injectIntl - ref forwarding is handled by forwardRef wrapper
-export default injectIntl(CodeEditorPane);
-
+// Export the forwardRef-wrapped component
+export default CodeEditorPane;

package/v2Components/HtmlEditor/components/DeviceToggle/_deviceToggle.scss

@@ -9,7 +9,7 @@
 .html-editor .device-toggle {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  margin-left: 2.5rem;
   padding: 0;
   background-color: $CAP_G10;
   border-radius: 0.25rem 0.25rem 0 0;
@@ -220,6 +220,7 @@
 
 // Integration with editor toolbar
 .html-editor.html-editor--inapp {
+  margin-top: 4%;
   .editor-toolbar {
     padding: 0 1rem 0 0; // Remove left padding to align with device toggle
     background-color: $CAP_G10;

package/v2Components/HtmlEditor/components/DeviceToggle/index.js

@@ -32,7 +32,7 @@ const DeviceToggle = ({
   onDeviceChange,
   keepContentSame = false,
   onKeepContentSameChange,
-  className = ''
+  className = '',
 }) => {
   const handleDeviceClick = (device) => {
     if (onDeviceChange && device !== activeDevice) {
@@ -97,7 +97,7 @@ DeviceToggle.propTypes = {
   onDeviceChange: PropTypes.func,
   keepContentSame: PropTypes.bool,
   onKeepContentSameChange: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 DeviceToggle.defaultProps = {
@@ -105,7 +105,7 @@ DeviceToggle.defaultProps = {
   onDeviceChange: null,
   keepContentSame: false,
   onKeepContentSameChange: null,
-  className: ''
+  className: '',
 };
 
 export default injectIntl(DeviceToggle);

package/v2Components/HtmlEditor/components/EditorToolbar/_editorToolbar.scss

@@ -15,11 +15,11 @@
   border-radius: 0.25rem 0.25rem 0 0;
   box-sizing: border-box;
   flex-shrink: 0;
+  position: relative;
 
   &__left {
     display: flex;
     align-items: center;
-    gap: 1rem;
     flex-shrink: 0;
   }
 
@@ -110,4 +110,12 @@
       display: none;
     }
   }
+}
+
+// Library mode override for InApp variant - Position absolute for toolbar
+// These selectors target the toolbar when inside library mode InApp variant
+.html-editor--inapp.html-editor--library-mode .html-editor__header .editor-toolbar,
+.html-editor--inapp.html-editor--library-mode .html-editor__header .editor-toolbar.editor-toolbar,
+.html-editor--inapp.html-editor--library-mode .html-editor__header .ant-layout-header.editor-toolbar {
+  position: absolute;
 }

package/v2Components/HtmlEditor/components/EditorToolbar/index.js

@@ -12,17 +12,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Layout, Typography } from 'antd';
-import { injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import { FONT_COLOR_01, CAP_SPACE_08 } from '@capillarytech/cap-ui-library/styled/variables';
 
 // Component imports
 import { useEditorContext } from '../common/EditorContext';
 
 // Constants
-import { HTML_EDITOR_VARIANTS } from '../../constants';
+import { HTML_EDITOR_DOC_URL, HTML_EDITOR_VARIANTS } from '../../constants';
 
 // Styles
 import './_editorToolbar.scss';
@@ -42,7 +44,7 @@ const EditorToolbar = ({
   className = '',
   isFullscreenMode = false,
   variant = HTML_EDITOR_VARIANTS.EMAIL,
-  showTitle = true
+  showTitle = true,
 }) => {
   // Context hooks - enabling for Step 10 testing
   const { layout, content } = useEditorContext();
@@ -66,6 +68,29 @@ const EditorToolbar = ({
               : intl.formatMessage(messages.htmlEditor)
             }
           </Text>
+          <CapTooltipWithInfo
+            title={(
+              <FormattedMessage
+                {...messages.htmlEditorTooltip}
+                values={{
+                  docLink: (
+                    <a
+                      href={HTML_EDITOR_DOC_URL}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <FormattedMessage {...messages.viewDocumentation} />
+                    </a>
+                  ),
+                }}
+              />
+            )}
+            infoIconProps={{
+              style: { marginLeft: CAP_SPACE_08, color: FONT_COLOR_01 },
+            }}
+            autoAdjustOverflow
+            placement="top"
+          />
         </CapRow>
       )}
 
@@ -81,7 +106,7 @@ const EditorToolbar = ({
             )}
             aria-pressed={isFullscreenMode}
           >
-            <CapIcon type={isFullscreenMode ? "minimizer" : "expander"} size="m" />
+            <CapIcon type={isFullscreenMode ? "collapse2" : "expander"} size="m" />
           </CapButton>
         )}
       </CapRow>
@@ -98,7 +123,7 @@ EditorToolbar.propTypes = {
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
   variant: PropTypes.oneOf(Object.values(HTML_EDITOR_VARIANTS)),
-  showTitle: PropTypes.bool
+  showTitle: PropTypes.bool,
 };
 
 EditorToolbar.defaultProps = {
@@ -109,7 +134,7 @@ EditorToolbar.defaultProps = {
   className: '',
   isFullscreenMode: false,
   variant: HTML_EDITOR_VARIANTS.EMAIL,
-  showTitle: true
+  showTitle: true,
 };
 
 export default injectIntl(EditorToolbar);

package/v2Components/HtmlEditor/components/FullscreenModal/_fullscreenModal.scss

@@ -49,9 +49,31 @@ body .ant-modal-mask+.ant-modal-wrap .ant-modal.html-editor-fullscreen-modal .an
     padding: 0;
     min-height: 3.25rem;
     height: 3.25rem;
+    position: relative;
 
     &__right {
       margin-left: auto;
     }
   }
+}
+
+// Library mode overrides for INAPP variant - Position absolute for toolbar
+// These selectors match the high-specificity patterns above but include library-mode class
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.html-editor.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar,
+.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar,
+.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .editor-toolbar.editor-toolbar,
+.html-editor__header.html-editor__header--fullscreen.html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .ant-layout-header.editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.ant-modal .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .editor-toolbar.editor-toolbar,
+.ant-modal-content .html-editor-fullscreen--inapp.html-editor-fullscreen--library-mode .html-editor__header--fullscreen .ant-layout-header.editor-toolbar {
+  position: absolute;
 }

package/v2Components/HtmlEditor/components/InAppPreviewPane/DeviceFrame.js

@@ -14,9 +14,7 @@ const DeviceFrame = ({
   className = '',
   ...props
 }) => {
-  const getFrameAsset = () => {
-    return device === DEVICE_TYPES.IOS ? iosFrame : androidFrame;
-  };
+  const getFrameAsset = () => device === DEVICE_TYPES.IOS ? iosFrame : androidFrame;
 
   const getFrameStyles = () => {
     const baseStyles = {
@@ -26,14 +24,13 @@ const DeviceFrame = ({
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
       backgroundSize: 'contain',
-      filter: 'drop-shadow(0 12px 48px rgba(0, 0, 0, 0.25)) brightness(1.05) contrast(1.1)'
     };
 
     // Unified dimensions - both devices use the same size since assets are identical
     return {
       ...baseStyles,
       width: '450px',
-      height: '920px'
+      height: '920px',
     };
   };
 
@@ -45,7 +42,7 @@ const DeviceFrame = ({
       {...props}
     >
 
-        {children}
+      {children}
 
     </div>
   );
@@ -54,7 +51,7 @@ const DeviceFrame = ({
 DeviceFrame.propTypes = {
   device: PropTypes.oneOf(Object.values(DEVICE_TYPES)),
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
 
 export default DeviceFrame;