@capillarytech/creatives-library 8.0.242-alpha.1 → 8.0.242-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.242-alpha.1",
+  "version": "8.0.242-alpha.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -77,6 +77,7 @@ const HTMLEditor = ({
   onContextChange = null,
   globalActions = null,
   isLiquidEnabled = false, // Controls Liquid tab visibility in ValidationTabs
+  isFullMode = true, // Full mode vs library mode - controls layout and visibility
   ...props
 }) => {
   // Separate refs for main and modal editors to avoid conflicts
@@ -434,9 +435,12 @@ const HTMLEditor = ({
     );
   }
 
+  // Add library-mode class when not in full mode
+  const editorClassName = `html-editor html-editor--${variant} ${!isFullMode ? 'html-editor--library-mode' : ''} ${className}`;
+
   return (
     <EditorProvider value={contextValue}>
-      <div className={`html-editor html-editor--${variant} ${className}`} {...props}>
+      <div className={editorClassName} {...props}>
         {/* Editor Toolbar - Conditional based on variant */}
         {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
           <EditorToolbar
@@ -596,6 +600,7 @@ HTMLEditor.propTypes = {
   onContextChange: PropTypes.func, // Deprecated: use globalActions instead
   globalActions: PropTypes.object,
   isLiquidEnabled: PropTypes.bool, // Controls Liquid tab visibility in validation
+  isFullMode: PropTypes.bool, // Full mode vs library mode
 };
 
 HTMLEditor.defaultProps = {
@@ -623,6 +628,7 @@ HTMLEditor.defaultProps = {
   onContextChange: null,
   globalActions: null, // Redux actions for API calls
   isLiquidEnabled: false,
+  isFullMode: true, // Default to full mode
 };
 
 // Export with forwardRef to allow direct access to CodeEditorPane via ref

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -49,6 +49,13 @@
   border-radius: 0.25rem;
   overflow: hidden;
 
+  // Library mode: Apply specific styles when isFullMode is false
+  &--library-mode {
+    .preview-pane {
+      max-height: calc(107vh);
+    }
+  }
+
   &.fullscreen {
     position: fixed;
     top: 0;

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

@@ -15,6 +15,7 @@
   border-radius: 0.25rem 0.25rem 0 0;
   box-sizing: border-box;
   flex-shrink: 0;
+  position: relative;
 
   &__left {
     display: flex;

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -961,6 +961,7 @@ const EmailHTMLEditor = (props) => {
             moduleFilterEnabled={location?.query?.type !== EMBEDDED}
             onTagContextChange={handleOnTagsContextChange}
             isLiquidEnabled={isLiquidEnabled}
+            isFullMode={isFullMode}
           />
         </CapColumn>
       </CapRow>