@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/themes/plugins.scss

@@ -2,1179 +2,34 @@
 @use "mixins" as *;
 
 // ==========================================
-// 1. KEYFRAMES
+// 1. TOOLBAR COMPONENTS
 // ==========================================
-
-// Keyframes are now in mixins.scss as shared animations
-
-// ==========================================
-// 2. COMMON UTILITIES & SHARED COMPONENTS
-// ==========================================
-
-.editor-icon-sm {
-  width: 15px; // 15px
-  height: 15px;
-}
-
-.editor-icon-xs {
-  width: 14px; // 14px
-  height: 14px;
-}
-
-.editor-loader {
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-  color: var(--muted-foreground);
-}
-
-.editor-checkbox {
-  height: 16px; // h-4
-  width: 16px; // w-4
-  @include rounded-sm;
-  border: 1px solid var(--input);
-  cursor: pointer;
-  
-  &:checked {
-    background-color: var(--primary);
-    border-color: var(--primary);
-  }
-}
-
-.editor-label--normal {
-  font-weight: 400;
-  cursor: pointer;
-}
-
-.editor-shrink-0 {
-  flex-shrink: 0;
-}
-
-.editor-flex-grow {
-  flex-grow: 1;
-}
-
-.editor-flex-1 {
-  flex: 1 1 0%;
-}
-
-.editor-flex-end {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 4px;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-}
-
-.editor-flex-row-center {
-  display: flex;
-  align-items: center;
-  gap: 8px; // gap-2
-  
-  &--pointer {
-    cursor: pointer;
-  }
-}
-
-.editor-flex-center-justify-py-8 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-top: 32px;
-  padding-bottom: 32px;
-}
-
-.editor-flex-col-gap-2 {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.editor-flex-col-gap-4 {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.editor-absolute-full {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
-.editor-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.editor-object-cover {
-  object-fit: cover;
-}
-
-.editor-transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.editor-rotate-90 {
-  transform: rotate(90deg);
-}
-
-.editor-rounded-sm {
-  border-radius: calc(var(--radius) - 2px);
-}
-
-.editor-font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
-
-.editor-mb-2 {
-  margin-bottom: 8px;
-}
-
-.editor-mb-3 {
-  margin-bottom: 12px;
-}
-
-.editor-mt-1 {
-  margin-top: 4px;
-}
-
-.editor-ml-auto {
-  margin-left: auto;
-}
-
-.editor-ml-4 {
-  margin-left: 16px;
-}
-
-.editor-w-14 {
-  width: 56px;
-}
-
-.editor-w-full {
-  width: 100%;
-}
-
-.editor-h-full {
-  height: 100%;
-}
-
-// ==========================================
-// 3. TOOLBAR COMPONENTS
-// ==========================================
-
-.editor-toolbar {
-  position: sticky;
-  top: 0; // Will be overridden by inline style from ToolbarPlugin
-  z-index: 20;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px; // gap-1
-  border-bottom: 1px solid var(--border);
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-  background-color: white; // Ensure solid background
-  padding: 4px; // p-1
-  @include shadow-sm;
-  width: 100%;
-  overflow-x: visible;
-  overflow-y: visible;
-  white-space: normal;
-
-  @supports (backdrop-filter: blur(4px)) {
-    background-color: rgba(255, 255, 255, 0.8);
-    backdrop-filter: blur(4px);
-  }
-}
-
-.editor-toolbar-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px; // gap-1
-  padding: 4px; // p-1
-  border-radius: var(--radius);
-}
-
-.editor-toolbar-item {
-  height: 36px; // h-9
-  width: 36px; // w-9
-  padding: 0;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background-color: var(--background);
-  transition: all 0.2s;
-
-  @include editor-button-interactive;
-  
-  &[data-state="on"] {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color !important;
-    border-color: $editor-accent-color;
-  }
-
-  &--lg {
-    height: 40px !important; // h-10
-    width: 40px !important; // w-10
-  }
-  
-  &--w-fit {
-    width: fit-content;
-  }
-  
-  &--w-auto {
-    width: auto;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  &--gap-sm {
-    gap: 4px;
-  }
-  
-  &--bg-background {
-    background-color: var(--background);
-  }
-  
-  &--text-center {
-    text-align: center;
-  }
-}
-
-.editor-toolbar-separator {
-  height: 24px !important; // h-6 (standard separator height)
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
-.editor-toolbar-select-trigger {
-  height: 36px; // h-9
-  width: auto;
-  gap: 8px; // gap-2
-  padding-left: 8px; // px-2
-  padding-right: 8px;
-  font-size: 12px; // text-xs
-  font-weight: 500;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  transition: all 0.2s;
-  
-  &:hover:not(:disabled) {
-    @include editor-hover-base;
-  }
-
-  &:active:not(:disabled) {
-    @include editor-active-base;
-  }
-  
-  &:focus {
-    box-shadow: 0 0 0 2px var(--ring);
-    outline: none;
-  }
-
-  &--w-md {
-    width: 160px;
-  }
-}
-
-.editor-toolbar-select-icon {
-  height: 16px; // h-4
-  width: 16px; // w-4
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px; // mr-2
-}
-
-.editor-format-select-trigger {
-  width: 72px !important;
-  min-width: 72px !important;
-  flex-shrink: 0;
-}
+@use "plugins/toolbar";
 
 // ==========================================
-// 4. FLOATING TOOLBARS & OVERLAYS
+// 2. FLOATING TOOLBARS & OVERLAYS
 // ==========================================
-
-@keyframes editor-floating-zoom-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.editor-floating-toolbar {
-  background-color: rgba(var(--background-rgb, 255, 255, 255), 0.85);
-  backdrop-filter: blur(8px);
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  max-width: 560px;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 4px; // gap-1
-  @include rounded-md;
-  border: 1px solid var(--border);
-  padding: 4px; // p-1
-  opacity: 0;
-  @include shadow-lg;
-  transition: opacity 200ms ease, transform 200ms ease;
-  will-change: transform;
-  z-index: 50;
-
-  &--visible {
-    opacity: 1;
-    animation: editor-floating-zoom-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-}
-
-.editor-floating-text-format {
-  background-color: var(--background);
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px; // gap-1
-  @include rounded-md;
-  border: 1px solid var(--border);
-  padding: 4px; // p-1
-  opacity: 0;
-  @include shadow-lg;
-  transition: opacity 200ms ease, transform 200ms ease;
-  will-change: transform;
-  z-index: 50;
-  
-  // Backdrop blur if supported
-  @supports (backdrop-filter: blur(4px)) {
-    background-color: rgba(var(--background-rgb, 255, 255, 255), 0.8);
-    backdrop-filter: blur(8px);
-  }
-
-  // Dark mode adjustment
-  .dark & {
-    @supports (backdrop-filter: blur(4px)) {
-      background-color: rgba(var(--background-rgb, 15, 15, 15), 0.8);
-    }
-  }
-  
-  // Hover effect for the whole bar
-  &:hover {
-    @include shadow-xl;
-  }
-
-  &--visible {
-    opacity: 1;
-    animation: editor-floating-zoom-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  // Divider between groups
-  .editor-separator--vertical {
-    height: 20px;
-    width: 1px;
-    margin: 0 4px;
-    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(var(--radius, 8px) - 4px);
-    height: 30px; // 30px
-    width: 30px;
-    padding: 0;
-    background-color: transparent;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      background-color: $editor-accent-color;
-      color: $editor-accent-foreground-color;
-    }
-
-    &[data-state="on"] {
-      background-color: $editor-accent-color;
-      color: $editor-accent-foreground-color !important;
-      font-weight: bold;
-    }
-
-    &--active {
-      background-color: $editor-accent-color;
-      color: $editor-accent-foreground-color !important;
-    }
-  }
-
-  // Group of buttons with border as requested
-  .editor-floating-group, .editor-floating-group--lg {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    padding: 2px;
-    border-radius: calc(var(--radius, 8px) - 2px);
-    // Remove border from inner groups to make it cleaner
-    border: none;
-    background-color: transparent;
-  }
-}
-
-// ==========================================
-// 5. PLUGIN SPECIFIC STYLES
-// ==========================================
-
-// --- List Color Plugin ---
-.editor-list-color-dialog {
-  padding: 8px 0;
-  animation: editor-fade-in 0.3s ease-out;
-}
-
-.editor-list-color-trigger {
-  height: 44px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 12px;
-  @include rounded-md;
-  border: 1px solid var(--input);
-  padding: 0 16px;
-  background-color: var(--background);
-  transition: all 0.2s;
-  @include shadow-sm;
-
-  @include editor-button-interactive;
-}
-
-// --- Color Picker ---
-.editor-color-picker-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px; // gap-4
-  padding: 16px; // p-4
-}
-
-.editor-color-picker-area {
-  position: relative;
-  height: 160px; // h-40
-  width: 100%;
-  cursor: crosshair;
-  touch-action: none;
-  @include rounded-sm;
-  border: 1px solid var(--border);
-  overflow: hidden;
-
-  &[data-disabled="true"] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}
-
-.editor-slider-root {
-  position: relative;
-  display: flex;
-  width: 100%;
-  touch-action: none;
-  align-items: center;
-  user-select: none;
-  
-  &[data-disabled] {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-.editor-slider-track {
-  position: relative;
-  height: 12px; // h-3
-  width: 100%;
-  flex-grow: 1;
-  overflow: hidden;
-  border-radius: 9999px; // rounded-full
-}
-
-.editor-slider-thumb {
-  display: block;
-  height: 16px; // size-4
-  width: 16px;
-  border-radius: 9999px; // rounded-full
-  border: 1px solid var(--border); // border-primary/50
-  background-color: var(--background);
-  @include shadow-sm;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ring);
-  }
-}
-
-.editor-color-swatch {
-  box-sizing: border-box;
-  height: 32px; // size-8
-  width: 32px;
-  @include rounded-sm;
-  border: 1px solid var(--border);
-  @include shadow-sm;
-
-  &--disabled {
-    opacity: 0.5;
-  }
-}
-
-.editor-color-presets {
-  display: flex;
-  align-items: center;
-  gap: 8px; // gap-2
-  width: 100%;
-}
-
-.editor-color-preset-item {
-  height: 32px; // h-8
-  padding-left: 8px; // px-2
-  padding-right: 8px;
-  flex: 1;
-  
-  &__preview {
-    height: 12px; // size-3
-    width: 12px;
-    border-radius: 9999px;
-    border: 1px solid var(--border);
-  }
-  
-  &__label {
-    font-family: monospace;
-    font-size: 12px; // text-xs
-  }
-}
-
-.editor-color-value-text {
-  color: var(--muted-foreground);
-  font-family: monospace;
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-}
-
-// --- Table Plugin ---
-.editor-table-dialog {
-  display: grid;
-  gap: 20px;
-  padding: 8px 0;
-  animation: editor-fade-in 0.3s ease-out;
-
-  &__group {
-    @include flex-col;
-    gap: 8px;
-  }
-
-  &__checkbox-group {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-top: 8px;
-  }
-}
-
-// --- Image Plugin & Dialog Forms ---
-.editor-form-grid {
-  display: grid;
-  gap: 16px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-}
-
-.editor-form-item {
-  display: grid;
-  gap: 8px;
-}
-
-.editor-image-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.editor-image-btn {
-  position: relative;
-  aspect-ratio: 1 / 1;
-  @include rounded-sm;
-  overflow: hidden;
-  border: 2px solid transparent;
-  transition: all 0.2s;
-  cursor: pointer;
-  padding: 0;
-  
-  &--selected {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 2px var(--primary), 0 0 0 4px var(--background);
-  }
-  
-  &:hover:not(&--selected) {
-    border-color: color-mix(in srgb, var(--primary), transparent 50%);
-  }
-}
-
-.editor-folder-tree-trigger {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 8px;
-  @include rounded-sm;
-  transition: background-color 0.2s;
-  text-align: left;
-  border: none;
-  background: transparent;
-  
-  &:hover {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color;
-  }
-}
-
-.editor-tree-content {
-  margin-left: 16px;
-  margin-top: 4px;
-}
-
-.editor-empty-state {
-  text-align: center;
-  padding-top: 32px;
-  padding-bottom: 32px;
-}
-
-.editor-scroll-area {
-  max-height: 350px;
-  overflow-y: auto;
-  padding: 8px;
-  border: 1px solid var(--border);
-  @include rounded-sm;
-}
-
-.editor-tabs-list {
-  width: 100%;
-  display: flex;
-}
-
-.editor-tabs-trigger {
-  flex: 1;
-}
-
-// --- Image Resizer ---
-.editor-image-resizer {
-  &-wrapper {
-    // Wrapper for handles if needed, or just container logic
-    // Currently handles are absolute, relative to image container
-  }
-
-  &-handle {
-    position: absolute;
-    width: 10px; // Slightly larger for better grab area
-    height: 10px;
-    background-color: $editor-primary-color; // Using editor primary color
-    border: 1px solid $editor-bg-color; // White border for contrast
-    z-index: 50; // Ensure on top of image
-    transition: background-color 0.2s;
-
-    &: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;
-    }
-
-    &--se {
-      bottom: -5px;
-      right: -5px;
-      cursor: nwse-resize;
-    }
-
-    &--s {
-      bottom: -5px;
-      left: 50%;
-      transform: translateX(-50%);
-      cursor: ns-resize;
-    }
-
-    &--sw {
-      bottom: -5px;
-      left: -5px;
-      cursor: nesw-resize;
-    }
-
-    &--w {
-      top: 50%;
-      left: -5px;
-      transform: translateY(-50%);
-      cursor: ew-resize;
-    }
-
-    &--nw {
-      top: -5px;
-      left: -5px;
-      cursor: nwse-resize;
-    }
-  }
-}
-
-// --- Layout Plugin ---
-.editor-layout-dialog-grid {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: 0.75rem; // gap-3
-  
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-.editor-layout-dialog-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem; // Slightly increased
-}
-
-.editor-layout-color-trigger {
-  height: 2.75rem; // h-11
-  width: 100%;
-  justify-content: flex-start;
-  gap: 0.5rem; // gap-2
-  padding-left: 0.5rem; // px-2
-  padding-right: 0.5rem;
-  font-size: 0.75rem; // text-xs
-  transition: all 0.2s;
-
-  &:hover:not(:disabled) {
-    @include editor-button-interactive;
-  }
-}
-
-.editor-layout-color-preview {
-  width: 1rem; // size-4
-  height: 1rem;
-  flex-shrink: 0;
-  @include rounded-sm;
-  border: 1px solid var(--border);
-}
-
-// --- Mentions Plugin ---
-.editor-mentions-popover {
-  position: fixed;
-  z-index: 10;
-  width: 200px;
-  @include rounded-md;
-  @include shadow-md;
-}
-
-.editor-mentions-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem; // gap-2
-  
-  @include editor-dropdown-item-interactive;
-  
-  &[data-selected="true"] {
-    background-color: $editor-accent-color;
-    color: $editor-accent-foreground-color;
-  }
-  
-  &--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;
-  border-radius: var(--radius); // rounded-lg
-  padding: 0.5rem; // p-2
-}
-
-// --- Draggable Block Plugin ---
-.editor-draggable-line {
-  background-color: var(--secondary-foreground);
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 0.25rem; // h-1 (actually 4px usually, but h-1 is 0.25rem)
-  opacity: 0;
-  will-change: transform;
-}
-
-.editor-draggable-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: grab;
-  @include rounded-sm;
-  padding: 0.125rem 0.25rem; // px-[1px] py-0.5 approx
-  opacity: 0;
-  will-change: transform;
-  
-  &:hover {
-    background-color: #f3f4f6; // hover:bg-gray-100
-  }
-  
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-// --- Auto Embed Plugin ---
-.editor-auto-embed-menu {
-  width: 200px;
-  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: 50;
-  max-width: 400px;
-  width: 100%;
-  opacity: 0;
-  background-color: var(--background);
-  @include rounded-md;
-  border: 1px solid var(--border);
-  @include shadow-lg;
-  transition: opacity 0.2s;
-  will-change: transform;
-
-  &__input-container {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.25rem;
-    width: 100%;
-  }
-
-  &__view-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.5rem;
-    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
-    width: 100%;
-  }
-
-  &__link {
-    display: block;
-    flex-grow: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--primary);
-    font-size: 0.875rem;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
+@use "plugins/floating-toolbars";
 
 // ==========================================
-// 6. MENUS & PICKERS
+// 3. PLUGIN SPECIFIC STYLES
 // ==========================================
-
-.editor-component-picker-menu {
-  position: fixed;
-  z-index: 100;
-  width: 250px;
-  @include rounded-md;
-  border: 1px solid var(--border);
-  background-color: var(--popover);
-  color: var(--popover-foreground);
-  @include shadow-lg;
-  overflow: hidden;
-  
-  // Base visibility
-  visibility: visible;
-  opacity: 1;
-  max-height: 300px;
-}
-
-.editor-command {
-  display: flex;
-  height: 100%;
-  width: 100%;
-  flex-direction: column;
-  overflow: hidden;
-  border-radius: inherit;
-}
-
-.editor-command-list {
-  max-height: 300px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 0.25rem;
-}
-
-.editor-command-group {
-  overflow: hidden;
-  color: var(--foreground);
-  
-  & > [cmdk-group-heading] {
-    padding: 0.5rem 0.5rem 0.2rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--muted-foreground);
-  }
-}
-
-.editor-command-item {
-  position: relative;
-  display: flex;
-  cursor: pointer;
-  user-select: none;
-  align-items: center;
-  border-radius: 0.125rem; // rounded-sm
-  padding: 0.375rem 0.5rem; // py-1.5 px-2
-  border: 1px solid transparent; // Added for hover border
-  font-size: 0.875rem; // text-sm
-  outline: none;
-  gap: 0.5rem;
-  
-  @include editor-dropdown-item-interactive;
-
-  &[data-disabled="true"] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-  
-  svg {
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-  }
-}
-
-.editor-context-menu {
-  background-color: var(--popover);
-  color: var(--popover-foreground);
-  z-index: 50 !important;
-  overflow: hidden;
-  @include rounded-md;
-  border: 1px solid var(--border);
-  @include shadow-md;
-  outline: none;
-  
-  &:has(*) {
-    z-index: 10 !important;
-  }
-}
-
-.editor-context-menu-item {
-  position: relative;
-  width: 100%;
-  display: flex;
-  cursor: default;
-  align-items: center;
-  gap: 0.5rem; // gap-2
-  border-radius: calc(var(--radius) - 2px); // rounded-sm
-  padding: 0.375rem 0.5rem; // py-1.5 px-2
-  border: 1px solid transparent; // Added for hover border
-  font-size: 0.875rem; // text-sm
-  outline: none;
-  user-select: none;
-  
-  @include editor-dropdown-item-interactive;
-  
-  &[data-disabled="true"] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-}
-
-.editor-context-menu-separator {
-  background-color: var(--border);
-  margin-left: -0.25rem; // -mx-1
-  margin-right: -0.25rem;
-  height: 1px;
-}
-
-.editor-actions-bar {
-  clear: both;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem; // gap-3
-  overflow-x: auto;
-  flex-wrap: nowrap;
-  border-top: 1px solid var(--border);
-  padding: 0.375rem 0.75rem; // py-1.5 px-3
-  background-color: color-mix(in srgb, var(--background), transparent 50%);
-  backdrop-filter: blur(8px);
-  
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  // Ẩ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: 0.5rem;
-    background: var(--popover);
-    color: var(--popover-foreground);
-    padding: 0.25rem 0.5rem;
-    border-radius: 0.25rem;
-    font-size: 0.75rem;
-    white-space: nowrap;
-    border: 1px solid var(--border);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-    z-index: 50;
-    pointer-events: none;
-  }
-}
+@use "plugins/list-color";
+@use "plugins/color-picker";
+@use "plugins/table";
+@use "plugins/image";
+@use "plugins/image-resizer";
+@use "plugins/layout";
+@use "plugins/mentions";
+@use "plugins/tree-view";
+@use "plugins/draggable-block";
+@use "plugins/auto-embed";
+@use "plugins/floating-link-editor";
 
 // ==========================================
-// 7. INPUTS & BUTTON VARIANTS
+// 4. MENUS & PICKERS
 // ==========================================
+@use "plugins/menus-and-pickers";
 
-.editor-input {
-  &:hover:not(:disabled):not([readonly]) {
-    @include editor-hover-base;
-    background-color: color-mix(in srgb, var(--background), black 3%);
-  }
-  
-  &:focus {
-    border-color: var(--primary);
-    box-shadow: 0 0 0 2px var(--ring);
-    outline: none;
-  }
-}
-
-.editor-input-lg {
-  height: 2.75rem; // h-11
-  width: 100%;
-}
-
-.editor-input-wrapper {
-  display: flex;
-  align-items: center;
-}
-
-.editor-input-group-item {
-  height: 2rem; // h-8
-  
-  // Reset number input arrows
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  -moz-appearance: textfield;
-
-  &--first {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  &--middle {
-    border-radius: 0;
-    border-left: 0;
-    margin-inline-start: -1px;
-  }
-  &--last {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 0;
-    margin-inline-start: -1px;
-  }
-}
-
-// Hover styles for all button types
-.editor-btn {
-  @include editor-button-interactive;
-}
-
-.editor-btn--ghost,
-.editor-btn--outline {
-  @include editor-button-interactive;
-}
-
-.editor-btn-icon-lg {
-  height: 2.5rem !important; // h-10
-  min-height: 2.5rem !important;
-  width: 2.5rem !important; // w-10
-}
-
-.editor-btn-icon-md {
-  height: 2.25rem; // h-9
-  width: 2.25rem;
-}
-
-// Toggle group items hover
-.editor-toggle-group-item {
-  @include editor-button-interactive;
-  
-  &[data-state="on"]:hover {
-    @include editor-hover-base;
-    background-color: color-mix(in srgb, $editor-accent-color, black 10%);
-    border-color: $editor-accent-color;
-  }
-}
-
-// Toggle button hover
-.editor-toggle {
-  @include editor-button-interactive;
-  
-  &[data-state="on"]:hover {
-    @include editor-hover-base;
-    background-color: color-mix(in srgb, $editor-accent-color, black 10%);
-    border-color: $editor-accent-color;
-  }
-}
+// Note: Core toggle styles are defined in ui-components.scss
+// Specific plugin overrides can be added here if needed