@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/src/plugins/toolbar/font-format-toolbar-plugin.tsx

@@ -17,10 +17,7 @@ import {
 
 import { useToolbarContext } from "../../context/toolbar-context"
 import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "../../ui/toggle-group"
+import { Button } from "../../ui/button"
 
 const FORMATS = [
   { format: "bold", icon: BoldIcon, label: "Bold" },
@@ -57,18 +54,14 @@ export function FontFormatToolbarPlugin() {
   useUpdateToolbarHandler($updateToolbar)
 
   return (
-    <ToggleGroup
-      type="multiple"
-      value={activeFormats}
-      onValueChange={setActiveFormats}
-      variant="default"
-      size="sm"
-    >
+    <>
       {FORMATS.map(({ format, icon: Icon, label }) => (
-        <ToggleGroupItem
+        <Button
           key={format}
-          value={format}
+          variant="ghost"
+          size="sm"
           aria-label={label}
+          data-state={activeFormats.includes(format) ? "on" : "off"}
           className="editor-toolbar-item"
           onClick={() => {
             activeEditor.dispatchCommand(
@@ -78,8 +71,8 @@ export function FontFormatToolbarPlugin() {
           }}
         >
           <Icon className="editor-icon-sm" />
-        </ToggleGroupItem>
+        </Button>
       ))}
-    </ToggleGroup>
+    </>
   )
 }

package/src/plugins/toolbar/font-size-toolbar-plugin.tsx

@@ -11,7 +11,6 @@ import { Minus, Plus } from "lucide-react"
 import { useToolbarContext } from "../../context/toolbar-context"
 import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
 import { Button } from "../../ui/button"
-import { ButtonGroup } from "../../ui/button-group"
 import { Input } from "../../ui/input"
 import { IconSize } from "../../ui/typography"
 
@@ -127,7 +126,7 @@ export function FontSizeToolbarPlugin() {
   }, [stopTimer])
 
   return (
-    <ButtonGroup>
+    <>
       <Button
         variant="outline"
         size="icon"
@@ -172,6 +171,6 @@ export function FontSizeToolbarPlugin() {
           <Plus />
         </IconSize>
       </Button>
-    </ButtonGroup>
+    </>
   )
 }

package/src/plugins/toolbar/history-toolbar-plugin.tsx

@@ -14,7 +14,6 @@ import { RedoIcon, UndoIcon } from "lucide-react"
 
 import { useToolbarContext } from "../../context/toolbar-context"
 import { Button } from "../../ui/button"
-import { ButtonGroup } from "../../ui/button-group"
 
 export function HistoryToolbarPlugin() {
   const [editor] = useLexicalComposerContext()
@@ -53,7 +52,7 @@ export function HistoryToolbarPlugin() {
   }, [$updateToolbar, activeEditor, editor])
 
   return (
-    <ButtonGroup>
+    <>
       <Button
         disabled={!canUndo || !isEditable}
         onClick={() => {
@@ -62,7 +61,6 @@ export function HistoryToolbarPlugin() {
         title={IS_APPLE ? "Undo (⌘Z)" : "Undo (Ctrl+Z)"}
         type="button"
         aria-label="Undo"
-        size="sm"
         variant="ghost"
         className="editor-toolbar-item"
       >
@@ -76,12 +74,11 @@ export function HistoryToolbarPlugin() {
         title={IS_APPLE ? "Redo (⇧⌘Z)" : "Redo (Ctrl+Y)"}
         type="button"
         aria-label="Redo"
-        size="sm"
         variant="ghost"
         className="editor-toolbar-item"
       >
         <RedoIcon className="editor-icon-sm" />
       </Button>
-    </ButtonGroup>
+    </>
   )
 }

package/src/plugins/toolbar/subsuper-toolbar-plugin.tsx

@@ -7,10 +7,7 @@ import { SubscriptIcon, SuperscriptIcon } from "lucide-react"
 
 import { useToolbarContext } from "../../context/toolbar-context"
 import { useUpdateToolbarHandler } from "../../editor-hooks/use-update-toolbar"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "../../ui/toggle-group"
+import { Button } from "../../ui/button"
 import { IconSize } from "../../ui/typography"
 
 export function SubSuperToolbarPlugin() {
@@ -30,40 +27,35 @@ export function SubSuperToolbarPlugin() {
   useUpdateToolbarHandler($updateToolbar)
 
   return (
-    <ToggleGroup
-      type="single"
-      value={
-        isSubscript ? "subscript" : isSuperscript ? "superscript" : ""
-      }
-      size="default"
-      variant="outline"
-    >
-      <ToggleGroupItem
-        value="subscript"
-        size="default"
+    <>
+      <Button
+        variant="outline"
+        size="icon"
         aria-label="Toggle subscript"
+        data-state={isSubscript ? "on" : "off"}
         onClick={() => {
           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript")
         }}
-        variant={"outline"}
+        className="editor-toolbar-item"
       >
         <IconSize size="sm">
           <SubscriptIcon />
         </IconSize>
-      </ToggleGroupItem>
-      <ToggleGroupItem
-        value="superscript"
-        size="default"
+      </Button>
+      <Button
+        variant="outline"
+        size="icon"
         aria-label="Toggle superscript"
+        data-state={isSuperscript ? "on" : "off"}
         onClick={() => {
           activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript")
         }}
-        variant={"outline"}
+        className="editor-toolbar-item"
       >
         <IconSize size="sm">
           <SuperscriptIcon />
         </IconSize>
-      </ToggleGroupItem>
-    </ToggleGroup>
+      </Button>
+    </>
   )
 }

package/src/themes/_mixins.scss

@@ -7,13 +7,13 @@
 @mixin focus-ring {
   &:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px $editor-bg-color;
+    box-shadow: 0 0 0 $editor-outline-width var(--ring), 0 0 0 calc($editor-outline-width * 2) $editor-bg-color;
   }
 }
 
 @mixin text-sm {
-  font-size: 14px;
-  line-height: 20px;
+  font-size: $editor-font-size-sm;
+  line-height: $editor-line-height-snug;
 }
 
 @mixin flex-center {
@@ -21,6 +21,11 @@
   align-items: center;
 }
 
+@mixin flex-center-between {
+  @include flex-center;
+  justify-content: space-between;
+}
+
 @mixin flex-col {
   display: flex;
   flex-direction: column;
@@ -31,6 +36,32 @@
   justify-content: center;
 }
 
+@mixin backdrop-blur($blur: 8px, $bg: rgba(255, 255, 255, 0.8)) {
+  background-color: $bg;
+  @supports (backdrop-filter: blur($blur)) {
+    backdrop-filter: blur($blur);
+  }
+}
+
+@mixin backdrop-blur-dark($blur: 8px, $bg: rgba(15, 15, 15, 0.8)) {
+  .dark & {
+    @supports (backdrop-filter: blur($blur)) {
+      background-color: $bg;
+      backdrop-filter: blur($blur);
+    }
+  }
+}
+
+@mixin control-size($size) {
+  width: $size;
+  height: $size;
+}
+
+@mixin icon-size($size) {
+  @include control-size($size);
+  flex-shrink: 0;
+}
+
 @mixin shadow-sm {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
@@ -47,6 +78,27 @@
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
+@mixin absolute-full {
+  position: absolute;
+  inset: 0;
+}
+
+@mixin truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin overflow-hidden {
+  overflow: hidden;
+}
+
+@mixin scrollbar-hide {
+  &::-webkit-scrollbar { display: none; }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 @mixin rounded-sm {
   border-radius: calc($editor-border-radius - 2px);
 }
@@ -55,26 +107,48 @@
   border-radius: $editor-border-radius;
 }
 
+@mixin rounded-r-md {
+  border-top-right-radius: $editor-border-radius;
+  border-bottom-right-radius: $editor-border-radius;
+}
+
+@mixin rounded-l-md {
+  border-top-left-radius: $editor-border-radius;
+  border-bottom-left-radius: $editor-border-radius;
+}
+
+@mixin rounded-t-md {
+  border-top-left-radius: $editor-border-radius;
+  border-top-right-radius: $editor-border-radius;
+}
+
+@mixin rounded-b-md {
+  border-bottom-left-radius: $editor-border-radius;
+  border-bottom-right-radius: $editor-border-radius;
+}
+
 @mixin rounded-lg {
   border-radius: calc($editor-border-radius + 4px);
 }
 
+@mixin rounded-full {
+  border-radius: 9999px;
+}
+
 // --- Unified Hover Styles ---
 @mixin editor-hover-base {
-  background-color: $editor-accent-color;
-  color: $editor-accent-foreground-color;
-  border-color: $editor-accent-color;
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 @mixin editor-active-base {
-  transform: translateY(0);
+  transform: translateY(0) scale(0.98);
   box-shadow: none;
+  filter: brightness(0.95);
 }
 
 @mixin editor-button-interactive {
-  &:hover:not(:disabled):not([data-state="on"]) {
+  &:hover:not(:disabled):not([data-state="on"]):not([data-state="active"]) {
     @include editor-hover-base;
   }
   
@@ -83,9 +157,45 @@
   }
 }
 
+@mixin editor-input-interactive {
+  &:hover:not(:disabled):not([readonly]) {
+    background-color: color-mix(in srgb, var(--background), black 3%);
+    border-color: $editor-accent-color;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  &:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px var(--ring);
+    outline: none;
+  }
+}
+
+@mixin floating-toolbar-base {
+  position: absolute;
+  top: 0;
+  left: 0;
+  @include flex-center;
+  gap: $editor-gap-1;
+  @include rounded-md;
+  border: $editor-border-width solid var(--border);
+  padding: $editor-gap-1;
+  opacity: 0;
+  @include shadow-lg;
+  transition: opacity $editor-transition-normal, transform $editor-transition-normal;
+  will-change: transform;
+  z-index: $editor-z-index-floating;
+
+  &--visible {
+    opacity: 1;
+    animation: editor-floating-zoom-in $editor-transition-normal cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}
+
 // Interactive mixin for dropdown/menu items
 @mixin editor-dropdown-item-interactive {
-  &:hover, &:focus, &--selected, &[aria-selected="true"], &[data-selected="true"] {
+  &:hover, &:focus, &--selected, &[aria-selected="true"], &[data-selected="true"], &[data-state="active"], &[data-state="on"] {
     background-color: $editor-accent-color;
     color: $editor-accent-foreground-color;
     border-color: $editor-border-color; // Use border color for visibility
@@ -101,7 +211,45 @@
   to { transform: rotate(360deg); }
 }
 
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .5; }
+}
+
 @keyframes editor-fade-in {
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
 }
+
+@keyframes editor-dialog-zoom-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes editor-popover-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes editor-floating-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}

package/src/themes/_variables.scss

@@ -6,23 +6,191 @@
 
 // Typography
 $editor-font-family: var(--font-inter), "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
+$editor-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$editor-font-size-xs: 0.75rem !default;
+$editor-font-size-sm: 0.875rem !default;
+$editor-font-size-md: 1rem !default;
+$editor-font-size-lg: 1.125rem !default;
 $editor-font-size-base: 16px !default;
+$editor-line-height-tight: 1.25 !default;
+$editor-line-height-snug: 1.375 !default;
+$editor-line-height-normal: 1.5 !default;
+$editor-line-height-relaxed: 1.625 !default;
+$editor-line-height-loose: 2 !default;
 $editor-line-height-base: 1.75 !default;
 
+// Font Weights
+$editor-font-weight-normal: 400 !default;
+$editor-font-weight-medium: 500 !default;
+$editor-font-weight-semibold: 600 !default;
+$editor-font-weight-bold: 700 !default;
+
+// Heading Sizes & Spacing
+$editor-h1-size: 36px !default;
+$editor-h2-size: 30px !default;
+$editor-h3-size: 24px !default;
+$editor-h4-size: 20px !default;
+$editor-h5-size: 18px !default;
+$editor-h6-size: 16px !default;
+
+$editor-heading-line-height: 1.25 !default;
+$editor-heading-margin-top: 24px !default;
+$editor-heading-margin-bottom: 12px !default;
+$editor-heading-letter-spacing-tight: -0.025em !default;
+
+// Code Block
+$editor-code-padding: 16px !default;
+$editor-code-font-size: 14px !default;
+$editor-code-margin: 24px !default;
+
+// Quote
+$editor-quote-padding: 16px !default;
+$editor-quote-border-width: 4px !default;
+$editor-quote-font-size: 18px !default;
+
+// Lists
+$editor-list-padding-left: 24px !default;
+$editor-list-item-margin-bottom: 4px !default;
+$editor-list-margin-vertical: 8px !default;
+$editor-checklist-gap: 12px !default;
+$editor-checklist-item-padding-vertical: 4px !default;
+$editor-checklist-icon-size: 18px !default;
+$editor-checklist-icon-margin-top: 3px !default;
+$editor-checklist-icon-border-radius: 4px !default;
+$editor-checklist-icon-checkmark-size: 16px !default;
+
+// Paragraph
+$editor-paragraph-margin-vertical: 12px !default;
+
+// Editor Content
+$editor-content-min-height: 288px !default;
+$editor-content-padding-x: 32px !default;
+$editor-content-padding-y: 16px !default;
+$editor-placeholder-padding-y: 18px !default;
+
+// Table
+$editor-table-margin-vertical: 16px !default;
+$editor-table-cell-padding-x: 6px !default;
+$editor-table-cell-padding-y: 8px !default;
+$editor-table-action-button-size: 20px !default;
+$editor-table-resizer-width: 8px !default;
+$editor-table-resizer-offset: -4px !default;
+$editor-table-action-button-top: 6px !default;
+$editor-table-action-button-right: 4px !default;
+$editor-table-cell-editing-shadow: rgba(0, 0, 0, 0.1) !default;
+$editor-table-cell-selection-opacity: 0.3 !default;
+$editor-table-sorted-indicator-height: 4px !default;
+$editor-shadow-blur-sm: 4px !default;
+$editor-shadow-blur-md: 8px !default;
+$editor-shadow-blur-lg: 12px !default;
+
+// Media
+$editor-image-broken-size: 200px !default;
+$editor-tweet-max-width: 550px !default;
+
+// Horizontal Rule
+$editor-hr-height: 2px !default;
+$editor-hr-margin-vertical: 1em !default;
+
+// Inline Code
+$editor-inline-code-padding-x: 6px !default;
+$editor-inline-code-padding-y: 2px !default;
+
+// Formatting
+$editor-script-font-size: 0.8em !default;
+$editor-hashtag-opacity: 0.1 !default;
+$editor-image-caption-min-width: 100px !default;
+$editor-image-caption-bg: rgba(255, 255, 255, 0.9) !default;
+
 // Colors - Compatible with Shadcn CSS Variables
 $editor-primary-color: var(--primary, #3b82f6) !default; // blue-500 fallback
 $editor-link-color: #3b82f6 !default; // Fixed link color (Blue 500) to ensure consistency across apps
 $editor-text-color: var(--foreground, #1f2937) !default; // gray-800 fallback
 $editor-bg-color: var(--background, transparent) !default;
 $editor-muted-color: var(--muted, #f3f4f6) !default; // gray-100 fallback
+$editor-muted-foreground-color: var(--muted-foreground, #64748b) !default; // slate-500 fallback
 $editor-border-color: var(--border, #d1d5db) !default; // gray-300 fallback
 $editor-quote-border-color: var(--input, #e5e7eb) !default; // gray-200 fallback
 $editor-accent-color: var(--accent, #f1f5f9) !default; // slate-100 fallback
 $editor-accent-foreground-color: var(--accent-foreground, #0f172a) !default; // slate-900 fallback
 
+// Borders & Outlines
+$editor-border-width: 1px !default;
+$editor-border-width-thick: 2px !default;
+$editor-outline-width: 2px !default;
+$editor-outline-offset: 2px !default;
+
 // Layout
 $editor-border-radius: var(--radius, 8px) !default;
 $editor-spacing-unit: 8px !default;
+$editor-control-size-sm: 32px !default; // h-8
+$editor-control-size-md: 36px !default; // h-9
+$editor-control-size-lg: 40px !default; // h-10
+$editor-control-size-xl: 44px !default; // h-11
+
+// Transitions
+$editor-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1) !default;
+$editor-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1) !default;
+$editor-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1) !default;
+
+// Animations
+$editor-animation-pulse: 2s !default;
+$editor-animation-spin: 1s !default;
+
+// Gaps
+$editor-gap-0-5: 2px !default;
+$editor-gap-1: 4px !default;
+$editor-gap-1-5: 6px !default;
+$editor-gap-2: 8px !default;
+$editor-gap-3: 12px !default;
+$editor-gap-4: 16px !default;
+$editor-gap-5: 20px !default;
+
+// Opacity
+$editor-opacity-disabled: 0.5 !default;
+$editor-opacity-muted: 0.7 !default;
+$editor-opacity-soft: 0.3 !default;
+
+// Z-index
+$editor-z-index-layer-1: 1 !default;
+$editor-z-index-layer-10: 10 !default;
+$editor-z-index-toolbar: 20 !default;
+$editor-z-index-floating: 50 !default;
+$editor-z-index-dialog-overlay: 50 !default;
+$editor-z-index-dialog: 51 !default;
+$editor-z-index-popover: 100 !default;
+
+// Dialog
+$editor-dialog-max-width-default: 32rem !default;
+$editor-dialog-max-width-lg: 50rem !default;
+$editor-dialog-overlay-blur: 4px !default;
+$editor-dialog-overlay-bg: rgba(0, 0, 0, 0.4) !default;
+$editor-popover-width: 18rem !default;
+$editor-popover-max-height: 300px !default;
+ $editor-tooltip-max-width: 200px !default;
+ $editor-toolbar-select-width: 220px !default;
+ $editor-format-select-width: 72px !default;
+ $editor-floating-toolbar-max-width: 560px !default;
+ $editor-color-picker-height: 160px !default;
+ $editor-scroll-area-max-height: 350px !default;
+ $editor-link-editor-max-width: 400px !default;
+ $editor-component-picker-width: 250px !default;
+ $editor-mentions-width: 200px !default;
+
+// Select & Toggle
+$editor-select-min-width-auto: 7rem !default;
+$editor-select-item-padding-vertical: 0.375rem !default;
+$editor-block-format-label-max-width: 80px !default;
+
+// Separator
+$editor-separator-min-height-vertical: 1.5rem !default;
+
+// Icon
+$editor-icon-size-xs: 12px !default;
+$editor-icon-size-sm: 16px !default;
+$editor-icon-size-md: 20px !default;
+$editor-icon-size-lg: 24px !default;
+$editor-icon-size-xl: 32px !default;
 
 // Code
 $editor-code-bg: var(--muted, #f3f4f6) !default;

package/src/themes/core/_code.scss

@@ -0,0 +1,59 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.lexical-editor-root {
+  // Code Block
+  .editor-code {
+    background-color: $editor-code-bg;
+    color: $editor-code-color;
+    font-family: $editor-font-family-mono;
+    display: block;
+    padding: $editor-code-padding $editor-code-padding $editor-code-padding ($editor-code-padding * 4);
+    line-height: $editor-line-height-base;
+    font-size: $editor-code-font-size;
+    margin: $editor-code-margin 0 !important;
+    overflow-x: auto;
+    border: $editor-border-width solid var(--border);
+    position: relative;
+    @include rounded-md;
+    tab-size: 2;
+    @include shadow-sm;
+
+    &::before {
+      content: attr(data-gutter);
+      position: absolute;
+      background-color: var(--muted);
+      left: 0;
+      top: 0;
+      bottom: 0;
+      padding: $editor-code-padding;
+      border-right: $editor-border-width solid var(--border);
+      color: var(--muted-foreground);
+      white-space: pre-wrap;
+      text-align: right;
+      min-width: ($editor-code-padding * 3);
+      font-size: calc($editor-code-font-size - $editor-outline-width);
+      user-select: none;
+    }
+  }
+
+  // Inline Code
+  .editor-text-code { 
+    background-color: $editor-muted-color; 
+    color: $editor-text-color;
+    padding: $editor-inline-code-padding-y $editor-inline-code-padding-x; 
+    font-family: $editor-font-family-mono;
+    font-size: $editor-code-font-size; 
+    @include rounded-md;
+    border: $editor-border-width solid $editor-border-color;
+    font-weight: $editor-font-weight-medium;
+  }
+
+  // Hashtag
+  .editor-hashtag {
+    background-color: rgba($editor-primary-color, $editor-hashtag-opacity);
+    color: $editor-primary-color;
+    border-bottom: $editor-border-width solid $editor-primary-color;
+    padding: 0 calc($editor-gap-1 / 2);
+  }
+}