@thangph2146/lexical-editor 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,8 @@
 {
   "name": "@thangph2146/lexical-editor",
-  "version": "0.0.5",
+  "version": "0.0.7",
+  "description": "Rich Text Editor library based on Lexical for React/Next.js",
+  "license": "MIT",
   "type": "module",
   "private": false,
   "main": "./dist/index.cjs",

package/src/components/lexical-editor.tsx

@@ -30,6 +30,7 @@ export function LexicalEditor({
   onChange,
   readOnly = false,
   className,
+  placeholder = "",
 }: LexicalEditorProps) {
   // Parse initial value as SerializedEditorState
   const [editorState, setEditorState] = useState<SerializedEditorState | undefined>(() => {
@@ -132,6 +133,7 @@ export function LexicalEditor({
         editorSerializedState={editorState}
         onSerializedChange={handleSerializedChange}
         readOnly={readOnly}
+        placeholder={placeholder}
       />
     </div>
   )

package/src/editor-x/editor.tsx

@@ -39,19 +39,21 @@ export function Editor({
   onChange,
   onSerializedChange,
   readOnly = false,
+  placeholder = "",
 }: {
   editorState?: EditorState
   editorSerializedState?: SerializedEditorState
   onChange?: (editorState: EditorState) => void
   onSerializedChange?: (editorSerializedState: SerializedEditorState) => void
   readOnly?: boolean
+  placeholder?: string
 }) {
   const { ref: editorRef, width: editorWidth } = useElementSize<HTMLDivElement>()
   const editorMaxWidth = editorWidth || undefined
 
   const [config, setConfig] = useState<{
     nodes: InitialConfigType["nodes"]
-    Plugins: React.ComponentType<{ readOnly?: boolean }>
+    Plugins: React.ComponentType<{ readOnly?: boolean; placeholder?: string }>
   } | null>(null)
 
   useEffect(() => {
@@ -111,7 +113,7 @@ export function Editor({
           }}
         >
           <TooltipProvider>
-            <Plugins readOnly={readOnly} />
+            <Plugins readOnly={readOnly} placeholder={placeholder} />
 
             {!readOnly && (
               <OnChangePlugin

package/src/editor-x/plugins.tsx

@@ -110,13 +110,14 @@ import { TABLE } from "../transformers/markdown-table-transformer"
 import { TWEET } from "../transformers/markdown-tweet-transformer"
 import { UNORDERED_LIST } from "../transformers/markdown-list-transformer"
 import { Separator } from "../ui/separator"
-
-const placeholder = "Press / for commands..."
+import { Flex } from "../ui/flex"
 
 export function Plugins({
   readOnly = false,
+  placeholder = "",
 }: {
   readOnly?: boolean
+  placeholder?: string
 }) {
   const [floatingAnchorElem, setFloatingAnchorElem] =
     useState<HTMLDivElement | null>(null)
@@ -349,11 +350,11 @@ export function Plugins({
       {!readOnly && (
         <ActionsPlugin>
           <div className="editor-actions-bar">
-            <div className="editor-flex-shrink-0">
+            <Flex align="center" className="editor-flex-shrink-0">
               <CounterCharacterPlugin charset="UTF-16" />
-            </div>
+            </Flex>
             <div className="editor-flex-1" />
-            <div className="editor-flex-shrink-0 editor-flex-end">
+            <Flex align="center" justify="end" gap={1} wrap="nowrap" className="editor-flex-shrink-0">
               <SpeechToTextPlugin />
               <ShareContentPlugin />
               <ImportExportPlugin />
@@ -376,7 +377,7 @@ export function Plugins({
               <EditModeTogglePlugin />
               <ClearEditorActionPlugin />
               <TreeViewPlugin />
-            </div>
+            </Flex>
           </div>
         </ActionsPlugin>
       )}

package/src/plugins/images-plugin.tsx

@@ -41,6 +41,7 @@ import { Button } from "../ui/button"
 import { DialogFooter } from "../ui/dialog"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
+import { Flex } from "../ui/flex"
 import {
   Tabs,
   TabsContent,
@@ -337,9 +338,9 @@ export function InsertImageUploadsDialogBody({
       <div className="editor-form-item">
         <Label>Chọn hình ảnh từ thư viện</Label>
         {isLoading ? (
-          <div className="editor-flex-center-justify-py-8">
+          <Flex align="center" justify="center" className="editor-py-8">
             <Loader2 className="editor-loader" />
-          </div>
+          </Flex>
         ) : !folderTree || (folderTree.subfolders.length === 0 && folderTree.images.length === 0) ? (
           <div className="editor-empty-state">
             <TypographySpanSmallMuted>Chưa có hình ảnh nào được upload</TypographySpanSmallMuted>

package/src/plugins/layout-plugin.tsx

@@ -43,6 +43,7 @@ import {
   LayoutItemNode,
 } from "../nodes/layout-item-node"
 import { Button } from "../ui/button"
+import { NumberInput } from "../ui/number-input"
 import {
   Select,
   SelectContent,
@@ -82,14 +83,16 @@ type InsertLayoutPayload =
   | {
       template: string
       itemBackgroundColor?: string
-      itemPaddingPx?: number
+      itemPaddingXPx?: number
+      itemPaddingYPx?: number
       itemBorderRadiusPx?: number
     }
 
 type LayoutDialogValues = {
   template: string
   itemBackgroundColor: string
-  itemPaddingPx: number
+  itemPaddingXPx: number
+  itemPaddingYPx: number
   itemBorderRadiusPx: number
 }
 
@@ -116,13 +119,15 @@ export function InsertLayoutDialog({
   const [backgroundColor, setBackgroundColor] = useState(
     initialValues?.itemBackgroundColor ?? "#ffffff"
   )
-  const [paddingPx, setPaddingPx] = useState(initialValues?.itemPaddingPx ?? 12)
+  const [paddingXPx, setPaddingXPx] = useState(initialValues?.itemPaddingXPx ?? 12)
+  const [paddingYPx, setPaddingYPx] = useState(initialValues?.itemPaddingYPx ?? 12)
   const [borderRadiusPx, setBorderRadiusPx] = useState(
     initialValues?.itemBorderRadiusPx ?? 8
   )
   const layoutRef = useRef(layout)
   const backgroundColorRef = useRef(backgroundColor)
-  const paddingPxRef = useRef(paddingPx)
+  const paddingXPxRef = useRef(paddingXPx)
+  const paddingYPxRef = useRef(paddingYPx)
   const borderRadiusPxRef = useRef(borderRadiusPx)
 
   useEffect(() => {
@@ -132,8 +137,11 @@ export function InsertLayoutDialog({
     backgroundColorRef.current = backgroundColor
   }, [backgroundColor])
   useEffect(() => {
-    paddingPxRef.current = paddingPx
-  }, [paddingPx])
+    paddingXPxRef.current = paddingXPx
+  }, [paddingXPx])
+  useEffect(() => {
+    paddingYPxRef.current = paddingYPx
+  }, [paddingYPx])
   useEffect(() => {
     borderRadiusPxRef.current = borderRadiusPx
   }, [borderRadiusPx])
@@ -143,10 +151,16 @@ export function InsertLayoutDialog({
     setBackgroundColor(value)
   }
 
-  const onPaddingChange = (next: number) => {
+  const onPaddingXChange = (next: number) => {
     const value = Math.min(Math.max(next, 0), 64)
-    paddingPxRef.current = value
-    setPaddingPx(value)
+    paddingXPxRef.current = value
+    setPaddingXPx(value)
+  }
+
+  const onPaddingYChange = (next: number) => {
+    const value = Math.min(Math.max(next, 0), 64)
+    paddingYPxRef.current = value
+    setPaddingYPx(value)
   }
 
   const onBorderRadiusChange = (next: number) => {
@@ -160,7 +174,8 @@ export function InsertLayoutDialog({
     const values: LayoutDialogValues = {
       template: layoutRef.current,
       itemBackgroundColor: backgroundColorRef.current,
-      itemPaddingPx: paddingPxRef.current,
+      itemPaddingXPx: paddingXPxRef.current,
+      itemPaddingYPx: paddingYPxRef.current,
       itemBorderRadiusPx: borderRadiusPxRef.current,
     }
     logger.info("[Layout] Submit dialog values", {
@@ -177,7 +192,7 @@ export function InsertLayoutDialog({
   }
 
   return (
-    <>
+    <Flex direction="column" gap={4}>
       <Select onValueChange={setLayout} value={layout}>
         <SelectTrigger className="editor-input-lg editor-w-full">
           <SelectValue placeholder={buttonLabel} />
@@ -191,7 +206,7 @@ export function InsertLayoutDialog({
         </SelectContent>
       </Select>
       <div className="editor-layout-dialog-grid">
-        <div className="editor-layout-dialog-group">
+        <Flex direction="column" gap={1.5}>
           <div className="editor-text-xs-muted">Background</div>
           <ColorPicker
             modal
@@ -227,48 +242,37 @@ export function InsertLayoutDialog({
               <ColorPickerPresets />
             </ColorPickerContent>
           </ColorPicker>
-        </div>
-        <div className="editor-layout-dialog-group">
-          <div className="editor-text-xs-muted">Padding (px)</div>
-          <Input
-            type="number"
+        </Flex>
+        <Flex direction="column" gap={1.5}>
+          <div className="editor-text-xs-muted">Padding X (px)</div>
+          <NumberInput
             min={0}
             max={64}
-            step={1}
-            value={paddingPx}
-            onChange={(event) => {
-              const next = Number.parseInt(event.target.value, 10)
-              if (Number.isFinite(next)) {
-                onPaddingChange(next)
-              } else {
-                onPaddingChange(0)
-              }
-            }}
-            className="editor-input-lg editor-w-full"
+            value={paddingXPx}
+            onValueChange={onPaddingXChange}
           />
-        </div>
-        <div className="editor-layout-dialog-group">
+        </Flex>
+        <Flex direction="column" gap={1.5}>
+          <div className="editor-text-xs-muted">Padding Y (px)</div>
+          <NumberInput
+            min={0}
+            max={64}
+            value={paddingYPx}
+            onValueChange={onPaddingYChange}
+          />
+        </Flex>
+        <Flex direction="column" gap={1.5}>
           <div className="editor-text-xs-muted">Border radius (px)</div>
-          <Input
-            type="number"
+          <NumberInput
             min={0}
             max={64}
-            step={1}
             value={borderRadiusPx}
-            onChange={(event) => {
-              const next = Number.parseInt(event.target.value, 10)
-              if (Number.isFinite(next)) {
-                onBorderRadiusChange(next)
-              } else {
-                onBorderRadiusChange(0)
-              }
-            }}
-            className="editor-input-lg editor-w-full"
+            onValueChange={onBorderRadiusChange}
           />
-        </div>
+        </Flex>
       </div>
       <Button onClick={onClick}>{submitLabel}</Button>
-    </>
+    </Flex>
   )
 }
 
@@ -339,29 +343,42 @@ export function LayoutPlugin(): JSX.Element | null {
       return match?.[1]?.trim()
     }
 
-    const extractNumericStyle = (style: string, property: string): number | undefined => {
+    const extractNumericStyle = (style: string, property: string): number[] | undefined => {
       const value = extractStyleValue(style, property)
       if (!value) {
         return undefined
       }
-      const match = value.match(/^(\d+)px$/i)
-      if (!match?.[1]) {
-        return undefined
-      }
-      const parsed = Number.parseInt(match[1], 10)
-      return Number.isFinite(parsed) ? parsed : undefined
+      // Remove !important and split by whitespace
+      const values = value.replace(/!important/gi, "").trim().split(/\s+/)
+      const parsedValues = values
+        .map((v) => {
+          const match = v.match(/^(\d+)px/i)
+          if (!match?.[1]) return null
+          const parsed = Number.parseInt(match[1], 10)
+          return Number.isFinite(parsed) ? parsed : null
+        })
+        .filter((v): v is number => v !== null)
+
+      if (parsedValues.length === 0) return undefined
+      return parsedValues
     }
 
     const buildLayoutItemStyle = ({
       itemBackgroundColor,
-      itemPaddingPx,
+      itemPaddingXPx,
+      itemPaddingYPx,
       itemBorderRadiusPx,
     }: LayoutDialogValues): string => {
       const itemStyles: string[] = []
       if (itemBackgroundColor.trim()) {
         itemStyles.push(`background-color: ${itemBackgroundColor.trim()}`)
       }
-      itemStyles.push(`padding: ${Math.min(Math.max(itemPaddingPx, 0), 64)}px`)
+      itemStyles.push(
+        `padding: ${Math.min(Math.max(itemPaddingYPx, 0), 64)}px ${Math.min(
+          Math.max(itemPaddingXPx, 0),
+          64
+        )}px`
+      )
       itemStyles.push(
         `border-radius: ${Math.min(Math.max(itemBorderRadiusPx, 0), 64)}px`
       )
@@ -376,7 +393,10 @@ export function LayoutPlugin(): JSX.Element | null {
       }
 
       const background = values.itemBackgroundColor.trim()
-      const padding = `${Math.min(Math.max(values.itemPaddingPx, 0), 64)}px`
+      const padding = `${Math.min(Math.max(values.itemPaddingYPx, 0), 64)}px ${Math.min(
+        Math.max(values.itemPaddingXPx, 0),
+        64
+      )}px`
       const borderRadius = `${Math.min(Math.max(values.itemBorderRadiusPx, 0), 64)}px`
       if (background) {
         element.style.setProperty("background-color", background)
@@ -438,6 +458,9 @@ export function LayoutPlugin(): JSX.Element | null {
         }
 
         const style = layoutItem.getStyle()
+        const paddingValues = extractNumericStyle(style, "padding")
+        const borderRadiusValues = extractNumericStyle(style, "border-radius")
+
         payload = {
           containerKey: parentContainer.getKey(),
           layoutItemKey: layoutItem.getKey(),
@@ -445,8 +468,12 @@ export function LayoutPlugin(): JSX.Element | null {
             template: parentContainer.getTemplateColumns(),
             itemBackgroundColor:
               extractStyleValue(style, "background-color") ?? "#ffffff",
-            itemPaddingPx: extractNumericStyle(style, "padding") ?? 12,
-            itemBorderRadiusPx: extractNumericStyle(style, "border-radius") ?? 8,
+            itemPaddingXPx:
+              paddingValues && paddingValues.length > 1
+                ? paddingValues[1]
+                : (paddingValues?.[0] ?? 12),
+            itemPaddingYPx: paddingValues?.[0] ?? 12,
+            itemBorderRadiusPx: borderRadiusValues?.[0] ?? 8,
           },
         }
         logger.debug("[Layout] Resolved payload from target", payload)
@@ -566,12 +593,19 @@ export function LayoutPlugin(): JSX.Element | null {
               typeof payload === "string"
                 ? undefined
                 : payload.itemBackgroundColor?.trim()
-            const itemPaddingPx =
+            const itemPaddingXPx =
+              typeof payload === "string"
+                ? undefined
+                : typeof payload.itemPaddingXPx === "number" &&
+                    Number.isFinite(payload.itemPaddingXPx)
+                  ? Math.min(Math.max(payload.itemPaddingXPx, 0), 64)
+                  : undefined
+            const itemPaddingYPx =
               typeof payload === "string"
                 ? undefined
-                : typeof payload.itemPaddingPx === "number" &&
-                    Number.isFinite(payload.itemPaddingPx)
-                  ? Math.min(Math.max(payload.itemPaddingPx, 0), 64)
+                : typeof payload.itemPaddingYPx === "number" &&
+                    Number.isFinite(payload.itemPaddingYPx)
+                  ? Math.min(Math.max(payload.itemPaddingYPx, 0), 64)
                   : undefined
             const itemBorderRadiusPx =
               typeof payload === "string"
@@ -584,7 +618,8 @@ export function LayoutPlugin(): JSX.Element | null {
             const itemStyle = buildLayoutItemStyle({
               template,
               itemBackgroundColor: itemBackgroundColor ?? "#ffffff",
-              itemPaddingPx: itemPaddingPx ?? 12,
+              itemPaddingXPx: itemPaddingXPx ?? 12,
+              itemPaddingYPx: itemPaddingYPx ?? 12,
               itemBorderRadiusPx: itemBorderRadiusPx ?? 8,
             })
 

package/src/themes/_mixins.scss

@@ -26,9 +26,14 @@
   justify-content: space-between;
 }
 
+@mixin flex-row {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
 @mixin flex-col {
-  display: flex;
-  flex-direction: column;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 @mixin flex-center-justify {
@@ -63,19 +68,19 @@
 }
 
 @mixin shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
 }
 
 @mixin shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 @mixin shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
 }
 
 @mixin shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
 }
 
 @mixin absolute-full {
@@ -138,7 +143,7 @@
 // --- Unified Hover Styles ---
 @mixin editor-hover-base {
   transform: translateY(-1px);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 @mixin editor-active-base {

package/src/themes/_variables.scss

@@ -172,7 +172,8 @@ $editor-popover-max-height: 300px !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-color-picker-width: 380px !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;

package/src/themes/core/_reset.scss

@@ -11,6 +11,15 @@
   }
 }
 
+// Global resets
+*, *::before, *::after {
+  box-sizing: border-box;
+
+  @supports (color: color-mix(in lab, red, red)) {
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+}
+
 // Lexical Editor Root
 .lexical-editor-root {
   font-family: $editor-font-family !important;
@@ -24,12 +33,7 @@
   text-align: left !important;
   box-sizing: border-box !important;
 
-  // Reset common elements
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  p, ul, ol, li, span, strong, em, b, i, blockquote, h1, h2, h3, h4, h5, h6 {
+  p, div, ul, ol, li, span, strong, em, b, i, blockquote, h1, h2, h3, h4, h5, h6 {
     margin: 0 !important;
     padding: 0;
     border: 0 !important;

package/src/themes/plugins/_color-picker.scss

@@ -3,6 +3,7 @@
 
 .editor-color-picker-content {
   @include flex-col;
+  width: $editor-color-picker-width;
   gap: $editor-gap-4;
   padding: $editor-gap-4;
 }

package/src/themes/plugins/_layout.scss

@@ -4,17 +4,13 @@
 .editor-layout-dialog-grid {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: $editor-gap-3;
+  gap: $editor-gap-4;
   
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  @media (min-width: 480px) {
+    grid-template-columns: repeat(2, 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

package/src/themes/plugins/_list-color.scss

@@ -2,6 +2,8 @@
 @use "../mixins" as *;
 
 .editor-list-color-dialog {
+  @include flex-col;
+  gap: $editor-gap-4;
   padding: $editor-gap-2 0;
   animation: editor-fade-in $editor-transition-slow;
 }

package/src/themes/plugins/_toolbar.scss

@@ -8,11 +8,11 @@
   @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;
+  border-bottom: $editor-border-width solid var(--border) !important;
+  border-top-left-radius: $editor-border-radius !important;
+  border-top-right-radius: $editor-border-radius !important;
   @include backdrop-blur($editor-dialog-overlay-blur, rgba(255, 255, 255, 0.8));
-  padding: $editor-gap-1;
+  padding: $editor-gap-2 !important;
   @include shadow-sm;
   width: 100%;
   overflow-x: visible;
@@ -23,7 +23,7 @@
 .editor-toolbar-group {
   @include flex-center;
   gap: $editor-gap-1;
-  padding: $editor-gap-1;
+  padding: $editor-gap-1 !important;
   @include rounded-md;
 }
 
@@ -31,6 +31,6 @@
 
 .editor-toolbar-separator {
   height: $editor-icon-size-lg !important; // h-6 (standard separator height)
-  margin-left: $editor-gap-1;
-  margin-right: $editor-gap-1;
+  margin-left: $editor-gap-1 !important;
+  margin-right: $editor-gap-1 !important;
 }

package/src/themes/ui-components/_button.scss

@@ -17,6 +17,7 @@
   position: relative;
   padding: $editor-gap-2 $editor-gap-4;
   box-sizing: border-box; // Ensure consistent sizing
+  @include shadow-sm;
   @include editor-button-interactive;
 
   &:disabled {
@@ -53,7 +54,6 @@
     background-color: var(--primary);
     color: var(--primary-foreground);
     border-color: var(--primary);
-    @include shadow-sm;
 
     &:hover {
       background-color: color-mix(in srgb, var(--primary), black 10%);
@@ -65,7 +65,6 @@
     background-color: var(--destructive);
     color: var(--destructive-foreground);
     border-color: var(--destructive);
-    @include shadow-sm;
 
     &:hover {
       background-color: color-mix(in srgb, var(--destructive), black 10%);
@@ -114,11 +113,12 @@
     border: none;
     padding: 0;
     height: auto;
+    box-shadow: none !important;
 
     &:hover {
       text-decoration-line: underline;
       transform: none;
-      box-shadow: none;
+      box-shadow: none !important;
     }
   }
 

package/src/themes/ui-components/_flex.scss

@@ -66,6 +66,7 @@
   flex-direction: row;
 }
 
+.editor-flex-column,
 .editor-flex-col {
   flex-direction: column;
 }
@@ -74,6 +75,7 @@
   flex-direction: row-reverse;
 }
 
+.editor-flex-column-reverse,
 .editor-flex-col-reverse {
   flex-direction: column-reverse;
 }