@thangph2146/lexical-editor 0.0.5 → 0.0.7

package/src/themes/plugins copy.scss

@@ -1,656 +0,0 @@
-@use "variables" as *;
-@use "mixins" as *;
-
-// ==========================================
-// 1. TOOLBAR COMPONENTS
-// ==========================================
-
-.editor-toolbar {
-  position: sticky;
-  top: 0; // Will be overridden by inline style from ToolbarPlugin
-  z-index: $editor-z-index-toolbar;
-  @include flex-center;
-  flex-wrap: wrap;
-  gap: $editor-gap-1;
-  border-bottom: $editor-border-width solid var(--border);
-  border-top-left-radius: $editor-border-radius;
-  border-top-right-radius: $editor-border-radius;
-  @include backdrop-blur($editor-dialog-overlay-blur, rgba(255, 255, 255, 0.8));
-  padding: $editor-gap-1;
-  @include shadow-sm;
-  width: 100%;
-  overflow-x: visible;
-  overflow-y: visible;
-  white-space: normal;
-}
-
-.editor-toolbar-group {
-  @include flex-center;
-  gap: $editor-gap-1;
-  padding: $editor-gap-1;
-  @include rounded-md;
-}
-
-// Note: Toolbar items and select triggers are defined in ui-components.scss
-
-.editor-toolbar-separator {
-  height: $editor-icon-size-lg !important; // h-6 (standard separator height)
-  margin-left: $editor-gap-1;
-  margin-right: $editor-gap-1;
-}
-
-// ==========================================
-// 2. FLOATING TOOLBARS & OVERLAYS
-// ==========================================
-
-.editor-floating-toolbar {
-  @include floating-toolbar-base;
-  @include backdrop-blur(8px, rgba(var(--background-rgb, 255, 255, 255), 0.85));
-  max-width: $editor-floating-toolbar-max-width;
-  flex-wrap: wrap;
-}
-
-.editor-floating-text-format {
-  @include floating-toolbar-base;
-  @include backdrop-blur(8px, rgba(var(--background-rgb, 255, 255, 255), 0.8));
-  @include backdrop-blur-dark(8px, rgba(var(--background-rgb, 15, 15, 15), 0.8));
-  
-  // Hover effect for the whole bar
-  &:hover {
-    @include shadow-xl;
-  }
-
-  // Divider between groups
-  .editor-separator--vertical {
-    height: $editor-gap-5;
-    width: $editor-border-width;
-    margin: 0 $editor-gap-1;
-    background-color: var(--border);
-  }
-
-  // Custom styling for buttons in floating toolbar
-  .editor-toggle-group-item, .editor-btn, .editor-toolbar-item {
-    border: none;
-    border-radius: calc($editor-border-radius - 4px);
-    @include control-size(30px);
-    padding: 0;
-    background-color: transparent;
-    transition: all $editor-transition-normal;
-    @include flex-center-justify;
-
-    &:hover {
-      background-color: $editor-accent-color;
-      color: $editor-accent-foreground-color;
-    }
-
-    &[data-state="on"], &[data-state="active"], &--active {
-      background-color: $editor-accent-color;
-      color: $editor-accent-foreground-color !important;
-      font-weight: $editor-font-weight-bold;
-    }
-  }
-
-  // Group of buttons with border as requested
-  .editor-floating-group, .editor-floating-group--lg {
-    @include flex-center;
-    gap: $editor-gap-0-5;
-    padding: $editor-gap-0-5;
-    border-radius: calc($editor-border-radius - 2px);
-    // Remove border from inner groups to make it cleaner
-    border: none;
-    background-color: transparent;
-  }
-}
-
-// ==========================================
-// 3. PLUGIN SPECIFIC STYLES
-// ==========================================
-
-// --- List Color Plugin ---
-.editor-list-color-dialog {
-  padding: $editor-gap-2 0;
-  animation: editor-fade-in $editor-transition-slow;
-}
-
-.editor-list-color-trigger {
-  height: $editor-control-size-xl;
-  width: 100%;
-  @include flex-center;
-  justify-content: flex-start;
-  gap: $editor-gap-3;
-  @include rounded-md;
-  border: $editor-border-width solid var(--input);
-  padding: 0 $editor-gap-4;
-  background-color: var(--background);
-  transition: all $editor-transition-normal;
-  @include shadow-sm;
-
-  @include editor-button-interactive;
-}
-
-// --- Color Picker ---
-.editor-color-picker-content {
-  @include flex-col;
-  gap: $editor-gap-4;
-  padding: $editor-gap-4;
-}
-
-.editor-color-picker-area {
-  position: relative;
-  height: $editor-color-picker-height; // h-40
-  width: 100%;
-  cursor: crosshair;
-  touch-action: none;
-  @include rounded-sm;
-  border: $editor-border-width solid var(--border);
-  overflow: hidden;
-
-  &[data-disabled="true"] {
-    pointer-events: none;
-    opacity: $editor-opacity-disabled;
-  }
-}
-
-.editor-slider-root {
-  position: relative;
-  @include flex-center;
-  width: 100%;
-  touch-action: none;
-  user-select: none;
-  
-  &[data-disabled] {
-    opacity: $editor-opacity-disabled;
-    pointer-events: none;
-  }
-}
-
-.editor-slider-track {
-  position: relative;
-  height: $editor-gap-3; // h-3
-  width: 100%;
-  flex-grow: 1;
-  overflow: hidden;
-  @include rounded-full;
-}
-
-.editor-slider-thumb {
-  display: block;
-  @include control-size($editor-icon-size-sm);
-  @include rounded-full;
-  border: $editor-border-width solid var(--border); // border-primary/50
-  background-color: var(--background);
-  @include shadow-sm;
-  transition: background-color $editor-transition-fast, border-color $editor-transition-fast;
-
-  &:focus-visible {
-    @include focus-ring;
-  }
-}
-
-.editor-color-swatch {
-  box-sizing: border-box;
-  @include control-size($editor-control-size-sm);
-  @include rounded-sm;
-  border: $editor-border-width solid var(--border);
-  @include shadow-sm;
-
-  &--disabled {
-    opacity: $editor-opacity-disabled;
-  }
-}
-
-.editor-color-presets {
-  @include flex-center;
-  gap: $editor-gap-2;
-  width: 100%;
-}
-
-.editor-color-preset-item {
-  height: $editor-control-size-sm;
-  padding-left: $editor-gap-2;
-  padding-right: $editor-gap-2;
-  flex: 1;
-  
-  &__preview {
-    @include control-size($editor-gap-3);
-    @include rounded-full;
-    border: $editor-border-width solid var(--border);
-  }
-  
-  &__label {
-    font-family: $editor-font-family-mono;
-    @include text-sm;
-  }
-}
-
-.editor-color-value-text {
-  color: $editor-muted-foreground-color;
-  font-family: $editor-font-family-mono;
-  @include text-sm;
-  font-variant-numeric: tabular-nums;
-}
-
-// --- Table Plugin ---
-.editor-table-dialog {
-  display: grid;
-  gap: $editor-gap-5;
-  padding: $editor-gap-2 0;
-  animation: editor-fade-in $editor-transition-slow;
-
-  &__group {
-    @include flex-col;
-    gap: $editor-gap-2;
-  }
-
-  &__checkbox-group {
-    @include flex-center;
-    gap: $editor-gap-3;
-    margin-top: $editor-gap-2;
-  }
-}
-
-// --- Image Plugin & Dialog Forms ---
-.editor-image-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: $editor-gap-2;
-  margin-bottom: $editor-gap-3;
-}
-
-.editor-image-btn {
-  position: relative;
-  aspect-ratio: 1 / 1;
-  @include rounded-sm;
-  overflow: hidden;
-  border: $editor-border-width-thick solid transparent;
-  transition: all $editor-transition-normal;
-  cursor: pointer;
-  padding: 0;
-  
-  &--selected {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 $editor-outline-width var(--primary), 0 0 0 calc($editor-outline-width * 2) var(--background);
-  }
-  
-  &:hover:not(&--selected) {
-    border-color: color-mix(in srgb, var(--primary), transparent 50%);
-  }
-}
-
-.editor-folder-tree-trigger {
-  @include flex-center;
-  gap: $editor-gap-2;
-  width: 100%;
-  padding: calc($editor-gap-1 + 2px) $editor-gap-2;
-  @include rounded-sm;
-  transition: background-color $editor-transition-normal;
-  text-align: left;
-  border: none;
-  background: transparent;
-  
-  &:hover {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color;
-  }
-}
-
-.editor-tree-content {
-  margin-left: $editor-gap-4;
-  margin-top: $editor-gap-1;
-}
-
-.editor-empty-state {
-  text-align: center;
-  padding-top: $editor-control-size-sm;
-  padding-bottom: $editor-control-size-sm;
-}
-
-// --- Image Resizer ---
-.editor-image-resizer {
-  &-handle {
-    position: absolute;
-    @include control-size(10px); // Slightly larger for better grab area
-    background-color: var(--primary); // Using primary color
-    border: $editor-border-width solid var(--background); // Background color for contrast
-    z-index: $editor-z-index-floating; // Ensure on top of image
-    transition: background-color $editor-transition-normal;
-
-    &:hover {
-      background-color: $editor-accent-color; // Highlight on hover
-    }
-
-    // Directions
-    &--n {
-      top: -5px;
-      left: 50%;
-      transform: translateX(-50%);
-      cursor: ns-resize;
-    }
-
-    &--ne {
-      top: -5px;
-      right: -5px;
-      cursor: nesw-resize;
-    }
-
-    &--e {
-      top: 50%;
-      right: -5px;
-      transform: translateY(-50%);
-      cursor: ew-resize;
-    }
-  }
-}
-
-// --- Layout Plugin ---
-.editor-layout-dialog-grid {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: $editor-gap-3;
-  
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-.editor-layout-dialog-group {
-  @include flex-col;
-  gap: $editor-gap-1-5;
-}
-
-.editor-layout-color-trigger {
-  height: $editor-control-size-xl; // h-11
-  width: 100%;
-  justify-content: flex-start;
-  gap: $editor-gap-2;
-  padding-left: $editor-gap-2;
-  padding-right: $editor-gap-2;
-  @include text-sm;
-  transition: all $editor-transition-normal;
-
-  &:hover:not(:disabled) {
-    @include editor-button-interactive;
-  }
-}
-
-.editor-layout-color-preview {
-  @include control-size($editor-icon-size-sm);
-  flex-shrink: 0;
-  @include rounded-sm;
-  border: $editor-border-width solid var(--border);
-}
-
-// --- Mentions Plugin ---
-.editor-mentions-popover {
-  position: fixed;
-  z-index: $editor-z-index-layer-10;
-  width: $editor-mentions-width;
-  @include rounded-md;
-  @include shadow-md;
-}
-
-.editor-mentions-item {
-  @include flex-center;
-  gap: $editor-gap-2;
-  
-  @include editor-dropdown-item-interactive;
-  
-  &--transparent {
-    background-color: transparent !important;
-  }
-}
-
-// --- Tree View Plugin ---
-.editor-tree-view-scroll-area {
-  background-color: var(--foreground);
-  color: var(--background);
-  height: 24rem; // h-96
-  overflow: hidden;
-  @include rounded-lg;
-  padding: $editor-gap-2;
-}
-
-// --- Draggable Block Plugin ---
-.editor-draggable-line {
-  background-color: var(--secondary-foreground);
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: $editor-gap-1;
-  opacity: 0;
-  will-change: transform;
-}
-
-.editor-draggable-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: grab;
-  @include rounded-sm;
-  padding: $editor-gap-0-5 $editor-gap-1;
-  opacity: 0;
-  will-change: transform;
-  
-  &:hover {
-    background-color: $editor-accent-color;
-  }
-  
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-// --- Auto Embed Plugin ---
-.editor-auto-embed-menu {
-  width: $editor-mentions-width;
-  padding: 0;
-}
-
-.editor-auto-embed-wrapper {
-  transform: translateY(-100%);
-}
-
-// --- Floating Link Editor ---
-.editor-floating-link-editor {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: $editor-z-index-floating;
-  max-width: $editor-link-editor-max-width;
-  width: 100%;
-  opacity: 0;
-  background-color: var(--background);
-  @include rounded-md;
-  border: $editor-border-width solid var(--border);
-  @include shadow-lg;
-  transition: opacity $editor-transition-normal;
-  will-change: transform;
-
-  &__input-container {
-    @include flex-center;
-    gap: $editor-gap-1;
-    padding: $editor-gap-1;
-    width: 100%;
-  }
-
-  &__view-container {
-    @include flex-center;
-    justify-content: space-between;
-    gap: $editor-gap-2;
-    padding: $editor-gap-1 $editor-gap-1 $editor-gap-1 $editor-gap-3;
-    width: 100%;
-  }
-
-  &__link {
-    display: block;
-    flex-grow: 1;
-    @include truncate;
-    color: var(--primary);
-    @include text-sm;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-// ==========================================
-// 4. MENUS & PICKERS
-// ==========================================
-
-.editor-component-picker-menu {
-  position: fixed;
-  z-index: $editor-z-index-popover;
-  width: $editor-component-picker-width;
-  @include rounded-md;
-  border: $editor-border-width solid var(--border);
-  background-color: var(--popover);
-  color: var(--popover-foreground);
-  @include shadow-lg;
-  overflow: hidden;
-  
-  // Base visibility
-  visibility: visible;
-  opacity: 1;
-  max-height: $editor-popover-max-height;
-}
-
-.editor-command {
-  @include flex-col;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.editor-command-list {
-  max-height: $editor-popover-max-height;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: $editor-gap-1;
-}
-
-.editor-command-group {
-  overflow: hidden;
-  color: var(--foreground);
-  
-  & > [cmdk-group-heading] {
-    padding: $editor-gap-2 $editor-gap-2 4px;
-    font-size: $editor-font-size-xs;
-    font-weight: $editor-font-weight-medium;
-    color: var(--muted-foreground);
-  }
-}
-
-.editor-command-item {
-  position: relative;
-  @include flex-center;
-  cursor: pointer;
-  user-select: none;
-  @include rounded-sm;
-  padding: calc($editor-gap-1 + 2px) $editor-gap-2;
-  border: $editor-border-width solid transparent; // Added for hover border
-  @include text-sm;
-  outline: none;
-  gap: $editor-gap-2;
-  
-  @include editor-dropdown-item-interactive;
-
-  &[data-disabled="true"] {
-    pointer-events: none;
-    opacity: $editor-opacity-disabled;
-  }
-  
-  svg {
-    @include icon-size($editor-icon-size-sm);
-  }
-}
-
-.editor-context-menu {
-  background-color: var(--popover);
-  color: var(--popover-foreground);
-  z-index: $editor-z-index-floating !important;
-  overflow: hidden;
-  @include rounded-md;
-  border: $editor-border-width solid var(--border);
-  @include shadow-md;
-  outline: none;
-  
-  &:has(*) {
-    z-index: $editor-z-index-layer-10 !important;
-  }
-}
-
-.editor-context-menu-item {
-  position: relative;
-  width: 100%;
-  @include flex-center;
-  cursor: default;
-  gap: $editor-gap-2;
-  @include rounded-sm;
-  padding: calc($editor-gap-1 + 2px) $editor-gap-2;
-  border: $editor-border-width solid transparent; // Added for hover border
-  @include text-sm;
-  outline: none;
-  user-select: none;
-  
-  @include editor-dropdown-item-interactive;
-  
-  &[data-disabled="true"] {
-    pointer-events: none;
-    opacity: $editor-opacity-disabled;
-  }
-}
-
-.editor-context-menu-separator {
-  background-color: var(--border);
-  margin-left: -0.25rem; // -mx-1
-  margin-right: -0.25rem;
-  height: $editor-border-width;
-}
-
-.editor-actions-bar {
-  clear: both;
-  @include flex-center;
-  width: 100%;
-  @include flex-center-between;
-  gap: $editor-gap-3;
-  overflow-x: auto;
-  flex-wrap: nowrap;
-  border-top: $editor-border-width solid var(--border);
-  padding: $editor-gap-1-5 $editor-gap-3;
-  @include backdrop-blur($editor-dialog-overlay-blur * 2, color-mix(in srgb, var(--background), transparent 50%));
-  
-  @include scrollbar-hide;
-
-  // Ẩn nội dung tooltip mặc định trong actions bar nếu nó đang bị hiển thị sai
-  .editor-tooltip-content {
-    display: none !important;
-  }
-  
-  // Chỉ hiển thị tooltip khi hover vào trigger
-  .editor-tooltip-group:hover .editor-tooltip-content {
-    display: block !important;
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    margin-bottom: $editor-gap-2;
-    background: var(--popover);
-    color: var(--popover-foreground);
-    padding: $editor-gap-1 $editor-gap-2;
-    @include rounded-sm;
-    font-size: 0.75rem;
-    white-space: nowrap;
-    border: $editor-border-width solid var(--border);
-    @include shadow-sm;
-    z-index: $editor-z-index-floating;
-    pointer-events: none;
-  }
-}
-
-// Note: Core toggle styles are defined in ui-components.scss
-// Specific plugin overrides can be added here if needed