@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/themes/plugins copy.scss

@@ -0,0 +1,656 @@
+@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