@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

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

@@ -8,43 +8,33 @@
  * - Theme support with proper styling
  */
 
-import React, {
-  forwardRef, useImperativeHandle, useRef, useEffect, useCallback,
-} from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 // CodeMirror 6 imports
 import { EditorState } from '@codemirror/state';
-import {
-  EditorView, lineNumbers, highlightActiveLine, placeholder,
-} from '@codemirror/view';
+import { EditorView, lineNumbers, highlightActiveLine } from '@codemirror/view';
 
-// Define Theme and Highlighting inline to avoid "multiple instances of @codemirror/state" error
+// Import our comprehensive syntax highlighting solution
+import { createRobustExtensions } from '../../utils/properSyntaxHighlighting';
 
 
 import { injectIntl, intlShape } from 'react-intl';
 
 // Messages
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
 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
 
@@ -52,25 +42,12 @@ const CodeEditorPaneComponent = ({
   intl,
   readOnly = false,
   className = '',
-  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,
+  isFullscreenMode = false,
+  onLabelInsert,
+  forwardedRef
 }) => {
-  const context = useEditorContext();
-  const {
-    content, validation, variant, isLiquidEnabled,
-  } = context || {};
-  const { content: contentValue, updateContent } = content || {};
+  const { content, validation } = useEditorContext();
+  const { content: contentValue, updateContent } = content;
   const editorRef = useRef(null);
   const viewRef = useRef(null);
 
@@ -84,7 +61,7 @@ const CodeEditorPaneComponent = ({
     get view() {
       return viewRef.current;
     },
-    viewRef, // For compatibility with existing code
+    viewRef: viewRef, // For compatibility with existing code
 
     focus: () => {
       if (viewRef.current) {
@@ -98,7 +75,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');
@@ -111,7 +88,9 @@ const CodeEditorPaneComponent = ({
       }
       return 0;
     },
-    getValue: () => contentValue || '',
+    getValue: () => {
+      return contentValue || '';
+    },
     setValue: (value) => {
       updateContent(value);
     },
@@ -128,7 +107,7 @@ const CodeEditorPaneComponent = ({
 
           view.dispatch({
             selection: { anchor: pos },
-            effects: EditorView.scrollIntoView(pos, { y: 'center' }),
+            effects: EditorView.scrollIntoView(pos, { y: 'center' })
           });
           view.focus();
         } catch (error) {
@@ -138,7 +117,7 @@ const CodeEditorPaneComponent = ({
           }
         }
       }
-    },
+    }
   }), [contentValue]);
 
   // Note: handleContentChange removed - using updateContentRef directly in CodeMirror
@@ -154,9 +133,7 @@ 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);
@@ -170,67 +147,49 @@ const CodeEditorPaneComponent = ({
       // For unified HTML editor, insert as template variable
       const formattedTag = `{{${tagText}}}`;
 
-      // Insert the tag at cursor position directly
+      // Insert the tag at cursor position
       view.dispatch({
         changes: { from: pos, insert: formattedTag },
-        selection: { anchor: pos + formattedTag.length },
+        selection: { anchor: pos + formattedTag.length }
       });
 
       // Focus back to editor
       view.focus();
 
-      // 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
+      // Call the parent's handleLabelInsert if available
+      if (onLabelInsert) {
+        onLabelInsert(formattedTag, pos);
+      }
     }
   };
 
-  // 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) {
-      // 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);
-      }
-
-      // 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
-        // html(), // 1. HTML language support - TEMPORARILY DISABLED due to version conflict
-        // syntaxHighlighting(comprehensiveVSCodeTheme), // 2. Syntax highlighting - TEMPORARILY DISABLED
-        // cleanEditorTheme, // 3. Theme - TEMPORARILY DISABLED
-        EditorView.updateListener.of((update) => {
-          if (update.docChanged) {
-            updateContentRef.current(update.state.doc.toString());
-          }
-        }),
-      ];
+            // 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());
+                }
+              })
+            ];
 
       const state = EditorState.create({
         doc: contentValue || '',
-        extensions,
+        extensions
       });
 
       viewRef.current = new EditorView({
         state,
-        parent: editorRef.current,
+        parent: editorRef.current
       });
     }
 
@@ -245,74 +204,116 @@ const CodeEditorPaneComponent = ({
         viewRef.current = null;
       }
     };
-  }, [channel, intl]);
+  }, []);
 
   // Update editor content when content changes
   useEffect(() => {
-    if (viewRef.current && contentValue && contentValue !== viewRef.current.state.doc.toString()) {
+    if (viewRef.current && 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}`}>
-      {/* Code Editor Content - Stacked vertically with validation */}
-      <div
-        className="code-editor-pane__wrapper"
-        style={{
-          display: 'flex', flexDirection: 'column', height: '100%', width: '100%',
-        }}>
-        {/* Code Editor with Floating Add Label Button */}
-        <div className="codemirror-wrapper" style={{ flex: '1 1 auto', minHeight: 0 }}>
-          <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>
-  );
+    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>
+    );
 };
 
-// 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
+// Create the forwardRef wrapper
 const CodeEditorPane = forwardRef((props, ref) => (
-  <CodeEditorPaneWithIntl {...props} forwardedRef={ref} />
+  <CodeEditorPaneComponent {...props} forwardedRef={ref} />
 ));
 
 CodeEditorPane.displayName = 'CodeEditorPane';
@@ -322,19 +323,9 @@ CodeEditorPane.propTypes = {
   readOnly: PropTypes.bool,
   className: PropTypes.string,
   isFullscreenMode: PropTypes.bool,
-  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
+  onLabelInsert: PropTypes.func
 };
 
-// Export the forwardRef-wrapped component
-export default CodeEditorPane;
+// Export with injectIntl - ref forwarding is handled by forwardRef wrapper
+export default injectIntl(CodeEditorPane);
+

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

@@ -9,7 +9,7 @@
 .html-editor .device-toggle {
   display: flex;
   align-items: center;
-  margin-left: 2.5rem;
+  gap: 1rem;
   padding: 0;
   background-color: $CAP_G10;
   border-radius: 0.25rem 0.25rem 0 0;
@@ -220,7 +220,6 @@
 
 // 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,7 +15,6 @@
   border-radius: 0.25rem 0.25rem 0 0;
   box-sizing: border-box;
   flex-shrink: 0;
-  position: relative;
 
   &__left {
     display: flex;
@@ -111,12 +110,4 @@
       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

@@ -81,7 +81,7 @@ const EditorToolbar = ({
             )}
             aria-pressed={isFullscreenMode}
           >
-            <CapIcon type={isFullscreenMode ? "collapse2" : "expander"} size="m" />
+            <CapIcon type={isFullscreenMode ? "minimizer" : "expander"} size="m" />
           </CapButton>
         )}
       </CapRow>

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

@@ -49,31 +49,9 @@ 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,7 +14,9 @@ const DeviceFrame = ({
   className = '',
   ...props
 }) => {
-  const getFrameAsset = () => device === DEVICE_TYPES.IOS ? iosFrame : androidFrame;
+  const getFrameAsset = () => {
+    return device === DEVICE_TYPES.IOS ? iosFrame : androidFrame;
+  };
 
   const getFrameStyles = () => {
     const baseStyles = {
@@ -24,13 +26,14 @@ 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'
     };
   };
 
@@ -42,7 +45,7 @@ const DeviceFrame = ({
       {...props}
     >
 
-      {children}
+        {children}
 
     </div>
   );
@@ -51,7 +54,7 @@ const DeviceFrame = ({
 DeviceFrame.propTypes = {
   device: PropTypes.oneOf(Object.values(DEVICE_TYPES)),
   children: PropTypes.node,
-  className: PropTypes.string,
+  className: PropTypes.string
 };
 
 export default DeviceFrame;