@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

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

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

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -5,38 +5,71 @@
  */
 
 // 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 {
-  .html-editor__header--fullscreen {
-    display: flex;
-    align-items: center;
-    background-color: $CAP_G10;
-    border-bottom: 0.0625rem solid $CAP_G08;
-    padding-right: 1rem;
+  // 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;
-    }
+      // Device toggle takes available space
+      .device-toggle {
+        flex: 1;
+      }
 
-    // Toolbar styling in fullscreen mode
-    .editor-toolbar {
-      background-color: transparent;
-      border-bottom: none;
-      padding: 0;
-      min-height: 3.25rem;
-      height: 3.25rem;
+      // 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;
 
-      // Right-align toolbar actions
-      &__right {
-        margin-left: auto;
+        // Right-align toolbar actions
+        &__right {
+          margin-left: auto;
+        }
+      }
+    }
+
+    // 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;
+        }
       }
     }
   }
 }
 
+// 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
@@ -48,6 +81,23 @@
   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;
@@ -83,19 +133,6 @@
     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;
@@ -128,6 +165,7 @@
         padding: 0;
         min-height: 3.25rem; // 52px = 3.25rem
         height: 3.25rem;
+        position: relative;
 
         // Right-align toolbar actions
         &__right {
@@ -135,8 +173,19 @@
         }
       }
     }
-  }
 
+    // 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) {
@@ -219,29 +268,47 @@
     .code-editor-pane {
       .codemirror-wrapper {
         height: 100%;
-        max-height: 70vh; // Larger height in fullscreen
+        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
       }
 
       &__content {
-        max-height: 70vh; // Larger height in fullscreen
+        max-height: calc(95vh - 5%); // 95% of viewport height with 5% gap
       }
     }
 
     .preview-pane {
-      max-height: 70vh; // Larger height in fullscreen
+      max-height: calc(95vh - 5%); // Same as editor pane - 95% of viewport height with 5% gap
 
       &__content {
-        max-height: 65vh; // Account for modal header
+        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+        max-height: calc(95vh - 50%);
       }
 
       iframe {
-        height: 60vh; // Larger iframe in fullscreen
-        max-height: 60vh;
+        height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+        max-height: calc(95vh - 50%);
       }
     }
   }
 }
 
+// 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);
@@ -267,10 +334,6 @@
 
 // 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,6 @@
   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-radius: 0.5rem; // 8px = 0.5rem
   flex-direction: column;
   gap: 1rem; // 16px = 1rem

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

@@ -31,79 +31,6 @@
     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 {
@@ -113,13 +40,20 @@
     overflow: auto;
     position: relative;
     height: 100%;
-    max-height: 31.25rem;
+    max-height: 34.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;
+    background: $CAP_WHITE;
     max-height: 12.5rem;
     overflow-y: auto;
 
@@ -130,6 +64,17 @@
     }
   }
 
+  // Add Label button visibility: 50% opacity while typing, 100% on hover
+  .code-editor-pane__actions {
+    opacity: 0.7; // 70% transparent while typing
+    pointer-events: auto; // Always clickable
+    transition: opacity 0.2s ease;
+    
+    &:hover {
+      opacity: 1; // Fully visible on hover
+    }
+  }
+  
   .cm-foldGutter {
     width: 1rem;
 
@@ -223,42 +168,19 @@
   .codemirror-wrapper {
     position: relative;
     height: 100%;
-    max-height: 31.25rem;
+    max-height: 34.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 {
@@ -296,7 +218,6 @@
       }
 
       .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);
       }