@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

package/v2Components/HtmlEditor/__tests__/index.lazy.test.js

@@ -5,31 +5,23 @@
  */
 
 import React from 'react';
-import {
-  render, screen, waitFor, act,
-} from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 // Mock CapSpin before importing the component
-jest.mock('@capillarytech/cap-ui-library/CapSpin', () => function MockCapSpin({ size }) {
-  return <div data-testid="cap-spin" data-size={size}>Loading...</div>;
+jest.mock('@capillarytech/cap-ui-library/CapSpin', () => {
+  return function MockCapSpin({ size }) {
+    return <div data-testid="cap-spin" data-size={size}>Loading...</div>;
+  };
 });
 
 // Mock the HTMLEditor component
-// Note: React.lazy() expects a function that returns a promise
-// The mock needs to be set up before the lazy import happens
 jest.mock('../HTMLEditor', () => {
-  const MockHTMLEditor = function MockHTMLEditor(props) {
-    return (
-      <div data-testid="html-editor">
-Mock HTML Editor -
-        {props.variant}
-      </div>
-    );
-  };
   return {
     __esModule: true,
-    default: MockHTMLEditor,
+    default: function MockHTMLEditor(props) {
+      return <div data-testid="html-editor">Mock HTML Editor - {props.variant}</div>;
+    }
   };
 });
 
@@ -114,17 +106,14 @@ describe('index.lazy.js', () => {
     it('renders the lazy loaded component', async () => {
       const HTMLEditorLazy = (await import('../index.lazy')).default;
 
-      await act(async () => {
-        render(<HTMLEditorLazy variant="email" />);
-      });
+      render(<HTMLEditorLazy variant="email" />);
 
-      // Wait for lazy component to load - increase timeout and wait for Suspense to resolve
+      // Wait for lazy component to load
       await waitFor(() => {
         expect(screen.getByTestId('html-editor')).toBeInTheDocument();
-      }, { timeout: 3000 });
+      });
 
-      const editor = screen.getByTestId('html-editor');
-      expect(editor.textContent).toBe('Mock HTML Editor -email');
+      expect(screen.getByText(/Mock HTML Editor - email/)).toBeInTheDocument();
     });
 
     it('shows fallback while loading', async () => {
@@ -145,7 +134,7 @@ describe('index.lazy.js', () => {
         <HTMLEditorLazy
           variant="inapp"
           onSave={mockOnSave}
-          readOnly
+          readOnly={true}
           className="custom-class"
         />
       );
@@ -154,8 +143,7 @@ describe('index.lazy.js', () => {
         expect(screen.getByTestId('html-editor')).toBeInTheDocument();
       });
 
-      const editor = screen.getByTestId('html-editor');
-      expect(editor.textContent).toBe('Mock HTML Editor -inapp');
+      expect(screen.getByText(/Mock HTML Editor - inapp/)).toBeInTheDocument();
     });
 
     it('has correct display name', async () => {
@@ -227,7 +215,7 @@ describe('index.lazy.js', () => {
       render(
         <HTMLEditorLazy
           className="custom-editor"
-          readOnly
+          readOnly={true}
           showFullscreenButton={false}
           autoSave={false}
           autoSaveInterval={60000}
@@ -541,3 +529,4 @@ describe('index.lazy.js', () => {
     });
   });
 });
+

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -5,71 +5,38 @@
  */
 
 // Import Cap UI variables (correct path)
-@import "~@capillarytech/cap-ui-library/styles/_variables.scss";
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 // Fullscreen modal header styling - using proper CSS specificity instead of !important
 .html-editor-fullscreen {
-  // INAPP variant only: Fullscreen header styling
-  &--inapp {
-    .html-editor__header--fullscreen {
-      display: flex;
-      align-items: center;
-      background-color: $CAP_G10;
-      border-bottom: 0.0625rem solid $CAP_G08;
-      padding-right: 1rem;
-
-      // Device toggle takes available space
-      .device-toggle {
-        flex: 1;
-      }
-
-      // Toolbar styling in fullscreen mode - INAPP variant only
-      .editor-toolbar {
-        background-color: transparent;
-        border-bottom: none;
-        padding: 0;
-        min-height: 3.25rem;
-        height: 3.25rem;
-        position: relative;
+  .html-editor__header--fullscreen {
+    display: flex;
+    align-items: center;
+    background-color: $CAP_G10;
+    border-bottom: 0.0625rem solid $CAP_G08;
+    padding-right: 1rem;
 
-        // Right-align toolbar actions
-        &__right {
-          margin-left: auto;
-        }
-      }
+    // Device toggle takes available space
+    .device-toggle {
+      flex: 1;
     }
 
-    // Library mode: Position absolute for toolbar in fullscreen (INAPP variant only)
-    // Using higher specificity to override _fullscreenModal.scss styles
-    &.html-editor-fullscreen--library-mode {
-      .html-editor__header--fullscreen {
-        .editor-toolbar,
-        .editor-toolbar.editor-toolbar,
-        .ant-layout-header.editor-toolbar {
-          position: absolute;
-        }
+    // Toolbar styling in fullscreen mode
+    .editor-toolbar {
+      background-color: transparent;
+      border-bottom: none;
+      padding: 0;
+      min-height: 3.25rem;
+      height: 3.25rem;
+
+      // Right-align toolbar actions
+      &__right {
+        margin-left: auto;
       }
     }
   }
 }
 
-// Additional library mode overrides for fullscreen with maximum specificity
-// These match the high-specificity selectors in _fullscreenModal.scss
-.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,
-.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;
-}
-
 .html-editor {
   height: 37.5rem; // Fixed height instead of 100vh (600px = 37.5rem)
   max-height: 80vh; // Responsive maximum height
@@ -81,23 +48,6 @@
   border-radius: 0.25rem;
   overflow: hidden;
 
-  // Library mode: Apply specific styles when isFullMode is false
-  &.html-editor--library-mode {
-    .preview-pane {
-      max-height: calc(95vh - 5%);
-
-      &__content {
-        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
-      }
-
-      iframe {
-        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
-      }
-    }
-  }
-
   &.fullscreen {
     position: fixed;
     top: 0;
@@ -133,6 +83,19 @@
     flex-direction: column;
   }
 
+  // Validation Error Display - Full Width Below Split Container
+  &-validation {
+    margin-top: 1rem; // 16px = 1rem
+
+    // Ensure ErrorInfoNote fits well in the editor layout
+    .error-container {
+      width: 100%; // Full width instead of max-content
+      margin-top: 0;
+      margin-bottom: 0;
+      border-radius: 0.25rem;
+    }
+  }
+
   // Split container - integrated design
   &-split-container {
     flex: 1;
@@ -165,7 +128,6 @@
         padding: 0;
         min-height: 3.25rem; // 52px = 3.25rem
         height: 3.25rem;
-        position: relative;
 
         // Right-align toolbar actions
         &__right {
@@ -173,20 +135,9 @@
         }
       }
     }
-
-    // Library mode: Position absolute for toolbar in InApp variant
-    // Using higher specificity to override default position: relative
-    &.html-editor--library-mode {
-      .html-editor__header {
-        .editor-toolbar,
-        .editor-toolbar.editor-toolbar,
-        .ant-layout-header.editor-toolbar {
-          position: absolute;
-        }
-      }
-    }
   }
 
+
   // Responsive design
   @media (max-width: 768px) {
     height: 31.25rem; // 500px = 31.25rem - Smaller height on tablets
@@ -268,47 +219,29 @@
     .code-editor-pane {
       .codemirror-wrapper {
         height: 100%;
-        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
+        max-height: 70vh; // Larger height in fullscreen
       }
 
       &__content {
-        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
+        max-height: 70vh; // Larger height in fullscreen
       }
     }
 
     .preview-pane {
-      max-height: calc(95vh - 5%); // Same as editor pane - 95% of viewport height with 5% gap
+      max-height: 70vh; // Larger height in fullscreen
 
       &__content {
-        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
+        max-height: 65vh; // Account for modal header
       }
 
       iframe {
-        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-        max-height: calc(95vh - 50%);
+        height: 60vh; // Larger iframe in fullscreen
+        max-height: 60vh;
       }
     }
   }
 }
 
-// Fullscreen modal library mode styles (outside .html-editor block since fullscreen is a separate element)
-.html-editor-fullscreen--library-mode {
-  .preview-pane {
-    max-height: calc(95vh - 5%);
-
-    &__content {
-      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-      max-height: calc(95vh - 50%);
-    }
-
-    iframe {
-      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-      max-height: calc(95vh - 50%);
-    }
-  }
-}
-
 // Animation classes for smooth transitions
 .html-editor-transition {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -334,6 +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
+  }
 
   // High contrast mode support
   @media (prefers-contrast: high) {

package/v2Components/HtmlEditor/_index.lazy.scss

@@ -13,7 +13,7 @@
   align-items: center;
   min-height: 25rem; // 400px = 25rem
   background: $CAP_G11; // Light background similar to #fafbfc
-  // border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
+  border: 0.0625rem solid $CAP_G07; // 1px border similar to #dfe2e7
   border-radius: 0.5rem; // 8px = 0.5rem
   flex-direction: column;
   gap: 1rem; // 16px = 1rem

package/v2Components/HtmlEditor/components/CodeEditorPane/_codeEditorPane.scss

@@ -31,6 +31,79 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+
+    .cap-button,
+    .ant-btn,
+    button {
+      color: map-get($CAP_PRIMARY, base);
+      border: none;
+      background: $CAP_WHITE;
+      border-radius: 0.25rem;
+      padding: 0.375rem 0.5rem;
+      font-size: 0.875rem;
+      font-family: $FONT_FAMILY;
+      font-weight: 500;
+      height: auto;
+      min-width: 5.9375rem;
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+      line-height: 1.25rem;
+      text-align: left;
+
+      &:hover {
+        background: $CAP_G09;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.375rem 0.75rem -0.125rem rgba(9, 30, 66, 0.25);
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+      }
+
+      &:active,
+      &:focus {
+        background: $CAP_G08;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.125rem 0.25rem -0.125rem rgba(9, 30, 66, 0.25);
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+      }
+
+      .anticon,
+      .cap-icon {
+        font-size: 1rem;
+        color: map-get($CAP_PRIMARY, base);
+      }
+
+      span {
+        font-size: 0.875rem;
+        font-weight: 500;
+        line-height: 1.25rem;
+        color: map-get($CAP_PRIMARY, base);
+        white-space: nowrap;
+      }
+
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+
+    .tooltip-add-label-container {
+
+      .cap-button,
+      .ant-btn {
+        color: map-get($CAP_PRIMARY, base);
+        background: $CAP_WHITE;
+        border: none;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+      }
+    }
+
+    .cap-button-flat,
+    .cap-button-add {
+      background: $CAP_WHITE;
+      color: map-get($CAP_PRIMARY, base);
+      border: none;
+    }
   }
 
   &__content {
@@ -40,17 +113,10 @@
     overflow: auto;
     position: relative;
     height: 100%;
-    max-height: 34.25rem;
+    max-height: 31.25rem;
     background-color: $CAP_G01;
   }
 
-  &__wrapper {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-  }
-
   &__validation {
     border-top: 0.0625rem solid $CAP_G04;
     background: $CAP_G03;
@@ -64,17 +130,6 @@
     }
   }
 
-  // Add Label button visibility: 50% opacity while typing, 100% on hover
-  .code-editor-pane__actions {
-    opacity: 0.5; // 50% transparent while typing
-    pointer-events: auto; // Always clickable
-    transition: opacity 0.2s ease;
-    
-    &:hover {
-      opacity: 1; // Fully visible on hover
-    }
-  }
-  
   .cm-foldGutter {
     width: 1rem;
 
@@ -168,19 +223,42 @@
   .codemirror-wrapper {
     position: relative;
     height: 100%;
-    max-height: 34.25rem;
+    max-height: 31.25rem;
     background-color: $CAP_G01;
     border-radius: 0;
     overflow: hidden;
     display: flex;
-    flex: 1 1 auto;
-    min-height: 0;
 
     .code-editor-pane__actions {
       position: absolute;
       top: 0.5rem;
       right: 0.5rem;
       z-index: 20;
+
+      .cap-button,
+      .ant-btn,
+      button {
+        background: $CAP_WHITE;
+        color: map-get($CAP_PRIMARY, base);
+        border: none;
+        border-radius: 0.25rem;
+        padding: 0.375rem 0.5rem;
+        font-size: 0.875rem;
+        font-family: $FONT_FAMILY;
+        font-weight: 500;
+        min-width: 5.9375rem;
+        box-shadow: 0 0 0.0625rem 0 rgba(9, 30, 66, 0.31), 0 0.25rem 0.5rem -0.125rem rgba(9, 30, 66, 0.25);
+
+        &:hover {
+          background: $CAP_G09;
+          color: map-get($CAP_PRIMARY, base);
+        }
+
+        &:active {
+          background: $CAP_G08;
+          color: map-get($CAP_PRIMARY, base);
+        }
+      }
     }
 
     .codemirror-editor {
@@ -218,6 +296,7 @@
       }
 
       .cm-gutters {
+        background-color: var(--editor-gutter-bg, $CAP_G02);
         border-right: 0.0625rem solid var(--editor-border, $CAP_G04);
         color: var(--editor-gutter-foreground, $FONT_COLOR_02);
       }