@capillarytech/creatives-library 8.0.207 → 8.0.209

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -0,0 +1,304 @@
+/**
+ * HTML Editor Main Styles
+ *
+ * Following project conventions with Cap UI variables and patterns
+ */
+
+// Import Cap UI variables (correct path)
+@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;
+
+    // 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;
+
+      // Right-align toolbar actions
+      &__right {
+        margin-left: auto;
+      }
+    }
+  }
+}
+
+.html-editor {
+  height: 37.5rem; // Fixed height instead of 100vh (600px = 37.5rem)
+  max-height: 80vh; // Responsive maximum height
+  display: flex;
+  flex-direction: column;
+  background-color: $CAP_WHITE;
+  font-family: $FONT_FAMILY;
+  border: 0.0625rem solid $CAP_G07;
+  border-radius: 0.25rem;
+  overflow: hidden;
+
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1050;
+    background-color: $CAP_WHITE;
+    border: none;
+    border-radius: 0;
+    // Override base height constraints to fill viewport
+    height: 100vh;
+    max-height: none;
+    min-height: unset;
+  }
+
+  // Loading state
+  &-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 25rem; // 400px = 25rem
+    background-color: $CAP_G09;
+    border-radius: 0.25rem;
+  }
+
+  // Main content area - seamless with toolbar
+  &-content {
+    flex: 1;
+    overflow: hidden;
+    background-color: $CAP_WHITE;
+    display: flex;
+    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;
+    display: flex;
+    background-color: $CAP_WHITE;
+    overflow: hidden;
+    border: none; // Remove borders for seamless look
+  }
+
+  // InApp variant specific styling
+  &--inapp {
+
+    // InApp variant has different header structure
+    .html-editor__header {
+      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 InApp variant
+      .editor-toolbar {
+        background-color: transparent;
+        border-bottom: none;
+        padding: 0;
+        min-height: 3.25rem; // 52px = 3.25rem
+        height: 3.25rem;
+
+        // Right-align toolbar actions
+        &__right {
+          margin-left: auto;
+        }
+      }
+    }
+  }
+
+
+  // Responsive design
+  @media (max-width: 768px) {
+    height: 31.25rem; // 500px = 31.25rem - Smaller height on tablets
+    max-height: 70vh;
+
+    &-split-container {
+      flex-direction: column;
+    }
+
+    // InApp variant responsive adjustments
+    &--inapp {
+      .html-editor__header {
+        flex-direction: column;
+        align-items: stretch;
+        padding: 0.75rem 1rem; // 12px 16px = 0.75rem 1rem
+
+        .device-toggle {
+          margin-bottom: 0.75rem; // 12px = 0.75rem
+        }
+
+        .editor-toolbar {
+          &__right {
+            margin-left: 0;
+            justify-content: flex-end;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 576px) {
+    height: 25rem; // 400px = 25rem - Even smaller height on mobile
+    max-height: 60vh;
+
+    &-content {
+      padding: 0;
+    }
+
+    &-split-container {
+      border-radius: 0;
+    }
+  }
+
+  // Fullscreen modal styles
+  &-fullscreen {
+    height: 37.5rem; // 600px = 37.5rem
+    display: flex;
+    flex-direction: column;
+    background-color: $CAP_WHITE;
+
+    .html-editor-content-fullscreen {
+      flex: 1;
+      overflow: hidden;
+      background-color: $CAP_WHITE;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .html-editor-split-container-fullscreen {
+      flex: 1;
+      display: flex;
+      background-color: $CAP_WHITE;
+      overflow: hidden;
+      border: none;
+    }
+
+    // Remove any default modal padding/margins
+    .editor-toolbar {
+      border-bottom: 0.0625rem solid $CAP_G07; // Add separator line in fullscreen
+      margin: 0;
+      padding-left: 1.5rem; // 24px = 1.5rem
+      padding-right: 1.5rem;
+    }
+
+    .editor-toolbar {
+      border-radius: 0; // Remove border radius in modal
+    }
+
+    .code-editor-pane {
+      .codemirror-wrapper {
+        height: 100%;
+        max-height: 70vh; // Larger height in fullscreen
+      }
+
+      &__content {
+        max-height: 70vh; // Larger height in fullscreen
+      }
+    }
+
+    .preview-pane {
+      max-height: 70vh; // Larger height in fullscreen
+
+      &__content {
+        max-height: 65vh; // Account for modal header
+      }
+
+      iframe {
+        height: 60vh; // Larger iframe in fullscreen
+        max-height: 60vh;
+      }
+    }
+  }
+}
+
+// Animation classes for smooth transitions
+.html-editor-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.html-editor-fade-enter {
+  opacity: 0;
+}
+
+.html-editor-fade-enter-active {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+}
+
+.html-editor-fade-exit {
+  opacity: 1;
+}
+
+.html-editor-fade-exit-active {
+  opacity: 0;
+  transition: opacity 0.3s ease-out;
+}
+
+// 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) {
+    border: 0.125rem solid $CAP_G01; // 2px = 0.125rem, #262626 ≈ $CAP_G01
+
+    &-split-container {
+      border: 0.0625rem solid $CAP_G06; // 1px = 0.0625rem, #d9d9d9 ≈ $CAP_G06
+    }
+  }
+
+  // Reduced motion support - !important is appropriate here for accessibility
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      animation-duration: 0.01ms !important; // Override all animations for accessibility
+      animation-iteration-count: 1 !important; // Prevent looping animations
+      transition-duration: 0.01ms !important; // Minimize transition time
+    }
+  }
+}
+
+// Print styles
+@media print {
+  .html-editor {
+    height: auto;
+
+    &-split-container {
+      flex-direction: column;
+      box-shadow: none;
+    }
+  }
+}

package/v2Components/HtmlEditor/_index.lazy.scss

@@ -0,0 +1,26 @@
+/**
+ * HTMLEditor Lazy Loading Styles
+ *
+ * Styles for the lazy loading fallback component
+ */
+
+// Import Cap UI variables for consistency
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.html-editor-lazy-fallback {
+  display: flex;
+  justify-content: center;
+  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
+
+  &__message {
+    color: $CAP_G04; // Dark gray similar to #666
+    font-size: 0.875rem; // 14px = 0.875rem
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,376 @@
+/**
+ * Code Editor Pane Styles
+ */
+
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.code-editor-pane {
+  height: 100%;
+
+  // Dark theme CSS variables for CodeMirror
+  --editor-bg: #1e1e1e;
+  --editor-foreground: #d4d4d4;
+  --editor-focus-shadow: none;
+  --editor-focus-border: transparent;
+
+  &__header {
+    display: none;
+  }
+
+  &__title {
+    font-family: $FONT_FAMILY;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: $CAP_G01;
+    margin: 0;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    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 {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    position: relative;
+    height: 100%;
+    max-height: 31.25rem;
+    background-color: $CAP_G01;
+  }
+
+  &__validation {
+    border-top: 0.0625rem solid $CAP_G04;
+    background: $CAP_G03;
+    max-height: 12.5rem;
+    overflow-y: auto;
+
+    .validation-panel {
+      border: none;
+      border-radius: 0;
+      background: transparent;
+    }
+  }
+
+  .cm-foldGutter {
+    width: 1rem;
+
+    .cm-gutterElement {
+      text-align: center;
+      cursor: pointer;
+      color: $CAP_G10;
+
+      &:hover {
+        color: $CAP_BLUE;
+      }
+    }
+  }
+
+  .cm-tooltip-autocomplete-enhanced {
+    background: $CAP_G02;
+    border: 0.0625rem solid $CAP_G04;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
+    font-family: monospace;
+    font-size: 0.8125rem;
+    max-height: 12.5rem;
+    overflow-y: auto;
+
+    .cm-completionIcon {
+      width: 1rem;
+      text-align: center;
+      margin-right: 0.5rem;
+      color: $CAP_BLUE;
+    }
+
+    .cm-completionLabel {
+      color: $CAP_G08;
+      font-weight: 500;
+    }
+
+    .cm-completionDetail {
+      color: $CAP_BLUE;
+      font-style: italic;
+      margin-left: auto;
+    }
+
+    li[aria-selected] {
+      background: map-get($CAP_PRIMARY, hover);
+      color: $CAP_WHITE;
+
+      .cm-completionIcon {
+        color: $CAP_WHITE;
+      }
+    }
+  }
+
+  .cm-search {
+    background: $CAP_G02;
+    border: 0.0625rem solid $CAP_G04;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+
+    input {
+      background: $CAP_G03;
+      border: 0.0625rem solid $CAP_G10;
+      color: $CAP_G08;
+      border-radius: 0.1875rem;
+      padding: 0.25rem 0.5rem;
+
+      &:focus {
+        outline: none;
+        border-color: $CAP_BLUE;
+      }
+    }
+
+    button {
+      background: $CAP_BLUE;
+      border: none;
+      color: $CAP_WHITE;
+      border-radius: 0.1875rem;
+      padding: 0.25rem 0.5rem;
+      margin-left: 0.25rem;
+      cursor: pointer;
+
+      &:hover {
+        background: $CAP_BLUE01;
+      }
+    }
+  }
+
+  * {
+    caret-color: $CAP_WHITE;
+  }
+
+  .codemirror-wrapper {
+    position: relative;
+    height: 100%;
+    max-height: 31.25rem;
+    background-color: $CAP_G01;
+    border-radius: 0;
+    overflow: hidden;
+    display: flex;
+
+    .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 {
+      height: 100%;
+      background-color: var(--editor-bg, #1e1e1e);
+      flex: 1;
+
+      .cm-editor {
+        height: 100%;
+        border: none;
+        border-radius: 0;
+        background-color: var(--editor-bg, #1e1e1e);
+        color: var(--editor-foreground, #d4d4d4);
+        font-size: 0.875rem;
+        font-family: 'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+
+        &.cm-focused {
+          outline: none;
+          box-shadow: var(--editor-focus-shadow, none);
+          border-color: var(--editor-focus-border, transparent);
+        }
+      }
+
+      .cm-content {
+        padding: 0.75rem;
+        font-family: 'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.875rem;
+        line-height: 1.125rem;
+        background-color: var(--editor-bg, #1e1e1e);
+        color: var(--editor-foreground, #d4d4d4);
+      }
+
+      .cm-line {
+        padding: 0;
+      }
+
+      .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);
+      }
+
+      .cm-lineNumbers .cm-gutterElement {
+        padding: 0 0.5rem;
+        min-width: 2.5rem;
+        text-align: right;
+        font-size: 0.875rem;
+        line-height: 1.125rem;
+        color: var(--editor-gutter-foreground, $FONT_COLOR_02);
+      }
+
+      .cm-activeLine {
+        background-color: var(--editor-active-line-bg, rgba(map-get($CAP_PRIMARY, base), 0.05));
+      }
+
+      .cm-selectionBackground {
+        background-color: var(--editor-selection-bg, rgba(0, 123, 255, 0.3));
+      }
+
+      .cm-cursor,
+      .cm-cursor-primary,
+      .cm-cursor-secondary {
+        border-left: 0.1875rem solid var(--editor-cursor-color, $FONT_COLOR_01);
+        border-color: var(--editor-cursor-color, $FONT_COLOR_01);
+      }
+
+      &.cm-focused .cm-cursor,
+      &.cm-focused .cm-cursor-primary {
+        border-left: 0.1875rem solid var(--editor-cursor-color, $FONT_COLOR_01);
+        border-color: var(--editor-cursor-color, $FONT_COLOR_01);
+      }
+
+      .cm-line::after {
+        border-left: 0.1875rem solid var(--editor-cursor-color, $FONT_COLOR_01);
+      }
+
+      caret-color: var(--editor-cursor-color, $FONT_COLOR_01);
+    }
+
+    .codemirror-placeholder {
+      position: absolute;
+      top: 1rem;
+      left: 1rem;
+      color: $CAP_G06;
+      font-family: monospace;
+      font-size: 0.875rem;
+      line-height: 1.6;
+      pointer-events: none;
+      white-space: pre-line;
+      z-index: 1;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .codemirror-wrapper {
+      .codemirror-editor {
+        .cm-content {
+          padding: 0.75rem;
+          font-size: 0.8125rem;
+        }
+
+        .cm-lineNumbers .cm-gutterElement {
+          padding: 0 0.375rem;
+          min-width: 1.75rem;
+        }
+      }
+
+      .codemirror-placeholder {
+        top: 0.75rem;
+        left: 0.75rem;
+        font-size: 0.8125rem;
+      }
+    }
+  }
+}