@thangph2146/lexical-editor 0.0.5 → 0.0.7

package/src/themes/ui-components/_number-input.scss

@@ -0,0 +1,81 @@
+@use "../variables" as *;
+@use "../mixins" as *;
+
+.editor-number-input-container {
+  display: flex;
+  align-items: center;
+  border: $editor-border-width solid var(--border);
+  border-radius: $editor-border-radius;
+  background-color: var(--background);
+  height: $editor-control-size-xl; // h-11 to match color picker trigger
+  transition: border-color $editor-transition-normal;
+  padding: 2px; // Small padding to make inner buttons look nested
+  gap: 2px;
+
+  &:focus-within {
+    border-color: var(--ring);
+  }
+}
+
+.editor-number-input-btn {
+  height: 100% !important;
+  width: $editor-control-size-lg !important;
+  @include rounded-md; // Increase rounding to match container more closely
+  flex-shrink: 0;
+  color: var(--muted-foreground);
+  border: none !important;
+  box-shadow: none !important;
+  
+  &:hover:not(:disabled) {
+    background-color: var(--accent) !important;
+    color: var(--accent-foreground) !important;
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--accent-muted) !important;
+  }
+}
+
+.editor-number-input-wrapper {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  height: 100%;
+  @include rounded-md;
+  overflow: hidden;
+}
+
+.editor-number-input-field {
+  border: none !important;
+  border-radius: 0 !important;
+  height: 100% !important;
+  text-align: center;
+  padding-right: 28px !important; // space for unit
+  box-shadow: none !important;
+  background: transparent !important;
+  
+  &:focus {
+    box-shadow: none !important; // Don't show inner focus ring, container handles it
+  }
+  
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  
+  -moz-appearance: textfield;
+}
+
+.editor-number-input-unit {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: $editor-font-size-xs;
+  color: var(--muted-foreground);
+  pointer-events: none;
+  font-family: $editor-font-family-mono;
+}

package/src/themes/ui-components/_text-utilities.scss

@@ -2,7 +2,7 @@
 @use "../mixins" as *;
 
 /* --- TEXT UTILITIES --- */
-.editor-text-muted-xs {
+.editor-text-xs-muted {
   font-size: $editor-font-size-xs;
   color: $editor-muted-foreground-color;
 }

package/src/themes/ui-components.scss

@@ -28,3 +28,4 @@
 @use "ui-components/popover";
 @use "ui-components/select";
 @use "ui-components/toggle";
+@use "ui-components/number-input";

package/src/ui/flex.tsx

@@ -11,10 +11,16 @@ export interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
   ({ className, align, justify, direction, wrap, gap, style, ...props }, ref) => {
+    const isStandardGap =
+      typeof gap === "number" && [0.5, 1, 1.5, 2, 3, 4, 5].includes(gap)
+    const gapClass = isStandardGap
+      ? `editor-gap-${gap.toString().replace(".", "-")}`
+      : undefined
+
     const gapStyle =
-      typeof gap === "number"
+      !isStandardGap && typeof gap === "number"
         ? { gap: `${gap * 0.25}rem` }
-        : typeof gap !== "undefined"
+        : !isStandardGap && typeof gap !== "undefined"
           ? { gap }
           : undefined
 
@@ -27,6 +33,7 @@ export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
           justify && `editor-justify-${justify}`,
           direction && `editor-flex-${direction}`,
           wrap && `editor-flex-${wrap}`,
+          gapClass,
           className
         )}
         style={{ ...gapStyle, ...style }}

package/src/ui/number-input.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  value: number
+  onValueChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  unit?: string
+}
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  ({ value, onValueChange, min = 0, max = 100, step = 1, unit = "px", className, ...props }, ref) => {
+    const timerRef = React.useRef<NodeJS.Timeout | null>(null)
+    const intervalRef = React.useRef<NodeJS.Timeout | null>(null)
+    const valueRef = React.useRef(value)
+
+    // Sync ref with current value for interval closure
+    React.useEffect(() => {
+      valueRef.current = value
+    }, [value])
+
+    const updateValue = React.useCallback((delta: number) => {
+      onValueChange(Math.min(Math.max(valueRef.current + delta, min), max))
+    }, [onValueChange, min, max])
+
+    const startLongPress = (delta: number) => {
+      updateValue(delta)
+      timerRef.current = setTimeout(() => {
+        intervalRef.current = setInterval(() => {
+          updateValue(delta)
+        }, 50)
+      }, 300) // Reduced initial delay to 300ms
+    }
+
+    const stopLongPress = React.useCallback(() => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      if (intervalRef.current) clearInterval(intervalRef.current)
+    }, [])
+
+    const handleBlur = () => {
+      onValueChange(Math.min(Math.max(value, min), max))
+    }
+
+    React.useEffect(() => {
+      return () => stopLongPress()
+    }, [stopLongPress])
+
+    return (
+      <div className={cn("editor-number-input-container", className)}>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="editor-number-input-btn"
+          onMouseDown={() => startLongPress(-step)}
+          onMouseUp={stopLongPress}
+          onMouseLeave={stopLongPress}
+          onTouchStart={() => startLongPress(-step)}
+          onTouchEnd={stopLongPress}
+          tabIndex={-1} // Prevent tabbing into buttons
+        >
+          <Minus size={14} />
+        </Button>
+        <div className="editor-number-input-wrapper">
+          <Input
+            {...props}
+            ref={ref}
+            type="number"
+            value={value}
+            onBlur={handleBlur}
+            onChange={(e) => {
+              const val = parseInt(e.target.value, 10)
+              if (!isNaN(val)) onValueChange(val)
+              else onValueChange(0) // Default to 0 for invalid input while typing
+            }}
+            className="editor-number-input-field"
+          />
+          {unit && <span className="editor-number-input-unit">{unit}</span>}
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="editor-number-input-btn"
+          onMouseDown={() => startLongPress(step)}
+          onMouseUp={stopLongPress}
+          onMouseLeave={stopLongPress}
+          onTouchStart={() => startLongPress(step)}
+          onTouchEnd={stopLongPress}
+          tabIndex={-1}
+        >
+          <Plus size={14} />
+        </Button>
+      </div>
+    )
+  }
+)
+
+NumberInput.displayName = "NumberInput"