@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/themes/plugins/_menus-and-pickers.scss

@@ -0,0 +1,153 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.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;
+  }
+}

package/src/themes/plugins/_table.scss

@@ -0,0 +1,20 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.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;
+  }
+}

package/src/themes/plugins/_toolbar.scss

@@ -0,0 +1,36 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.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;
+}

package/src/themes/plugins/_tree-view.scss

@@ -0,0 +1,11 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.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;
+}