@thangph2146/lexical-editor 0.0.7 → 0.0.9

package/package.json

@@ -1,86 +1,87 @@
-{
-  "name": "@thangph2146/lexical-editor",
-  "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",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@lexical/code": "^0.38.2",
-    "@lexical/file": "^0.38.2",
-    "@lexical/hashtag": "^0.38.2",
-    "@lexical/link": "^0.38.2",
-    "@lexical/list": "^0.38.2",
-    "@lexical/markdown": "^0.38.2",
-    "@lexical/overflow": "^0.38.2",
-    "@lexical/rich-text": "^0.38.2",
-    "@lexical/selection": "^0.38.2",
-    "@lexical/table": "^0.38.2",
-    "@lexical/text": "^0.38.2",
-    "@lexical/utils": "^0.38.2",
-    "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.2.4",
-    "framer-motion": "^12.4.7",
-    "lucide-react": "^0.552.0",
-    "sonner": "^2.0.7"
-  },
-  "peerDependencies": {
-    "@lexical/react": "^0.38.2",
-    "lexical": "^0.38.2",
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@types/node": "^25.1.0",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
-    "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.39.2",
-    "next": "16.1.6",
-    "sass": "^1.83.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.9.3",
-    "@workspace/eslint-config": "0.0.0",
-    "@workspace/typescript-config": "0.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./style.css": "./dist/index.css",
-    "./editor": {
-      "types": "./dist/editor-x/editor.d.ts",
-      "import": "./dist/editor-x/editor.js",
-      "require": "./dist/editor-x/editor.cjs"
-    },
-    "./styles": {
-      "sass": "./src/themes/editor-theme.scss",
-      "default": "./src/themes/editor-theme.scss"
-    },
-    "./variables": {
-      "sass": "./src/themes/_variables.scss",
-      "default": "./src/themes/_variables.scss"
-    },
-    "./themes/*": "./src/themes/*.ts",
-    "./utils/*": "./src/utils/*.ts"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint",
-    "format": "prettier --write \"**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
-  }
-}
+{
+  "name": "@thangph2146/lexical-editor",
+  "version": "0.0.9",
+  "description": "Rich Text Editor library based on Lexical for React/Next.js",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build && pnpm typecheck"
+  },
+  "dependencies": {
+    "@lexical/code": "^0.38.2",
+    "@lexical/file": "^0.38.2",
+    "@lexical/hashtag": "^0.38.2",
+    "@lexical/link": "^0.38.2",
+    "@lexical/list": "^0.38.2",
+    "@lexical/markdown": "^0.38.2",
+    "@lexical/overflow": "^0.38.2",
+    "@lexical/rich-text": "^0.38.2",
+    "@lexical/selection": "^0.38.2",
+    "@lexical/table": "^0.38.2",
+    "@lexical/text": "^0.38.2",
+    "@lexical/utils": "^0.38.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
+    "framer-motion": "^12.4.7",
+    "lucide-react": "^0.552.0",
+    "sonner": "^2.0.7"
+  },
+  "peerDependencies": {
+    "@lexical/react": "^0.38.2",
+    "lexical": "^0.38.2",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "esbuild-sass-plugin": "^3.3.1",
+    "eslint": "^9.39.2",
+    "next": "16.1.6",
+    "sass": "^1.83.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/index.css",
+    "./editor": {
+      "types": "./dist/editor-x/editor.d.ts",
+      "import": "./dist/editor-x/editor.js",
+      "require": "./dist/editor-x/editor.cjs"
+    },
+    "./styles": {
+      "sass": "./src/themes/editor-theme.scss",
+      "default": "./src/themes/editor-theme.scss"
+    },
+    "./variables": {
+      "sass": "./src/themes/_variables.scss",
+      "default": "./src/themes/_variables.scss"
+    },
+    "./themes/*": "./src/themes/*.ts",
+    "./utils/*": "./src/utils/*.ts"
+  }
+}

package/src/editor-ui/content-editable.tsx

@@ -1,42 +1,30 @@
-import { JSX } from "react"
-import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable"
-import { cn } from "../lib/utils"
-
-type Props = {
-  placeholder: string
-  className?: string
-  placeholderClassName?: string
-  placeholderDefaults?: boolean // apply default positioning/padding for placeholder
-}
-
-export function ContentEditable({
-  placeholder,
-  className,
-  placeholderClassName,
-  placeholderDefaults = true,
-}: Props): JSX.Element {
-  const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review")
-
-  return (
-    <LexicalContentEditable
-      className={cn(
-        "ContentEditable__root relative block focus:outline-none",
-        !isReadOnlyOrReview && "min-h-72 px-8 py-4",
-        className
-      )}
-      aria-placeholder={placeholder}
-      aria-label={placeholder || "Editor nội dung"}
-      placeholder={
-        <div
-          className={cn(
-            placeholderClassName,
-            "text-muted-foreground pointer-events-none select-none",
-            placeholderDefaults && !isReadOnlyOrReview && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
-          )}
-        >
-          {placeholder}
-        </div>
-      }
-    />
-  )
-}
+import { JSX } from "react"
+import { ContentEditable as LexicalContentEditable } from "@lexical/react/LexicalContentEditable"
+import { cn } from "../lib/utils"
+
+type Props = {
+  placeholder?: string
+  className?: string
+  placeholderClassName?: string
+  placeholderDefaults?: boolean // apply default positioning/padding for placeholder
+}
+
+export function ContentEditable({
+  placeholder,
+  className,
+  placeholderClassName,
+  placeholderDefaults = true,
+}: Props): JSX.Element {
+  const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review")
+
+  return (
+    <LexicalContentEditable
+      className={cn(
+        "ContentEditable__root relative block focus:outline-none",
+        !isReadOnlyOrReview && "min-h-72 px-8 py-4",
+        className
+      )}
+      aria-label={"Editor nội dung"}
+    />
+  )
+}

package/src/editor-x/plugins.tsx

@@ -228,11 +228,13 @@ export function Plugins({
             <div className={cn("editor-relative-full")}>
               <div className={cn("editor-relative-full")} ref={onRef}>
                 <ContentEditable
-                  placeholder={readOnly ? "" : placeholder}
+                  placeholder=""
                   className={cn(
                     "editor-content-editable",
                     readOnly && "editor-content-editable--readonly"
                   )}
+                  placeholderClassName="editor-placeholder"
+                  placeholderDefaults={false}
                 />
               </div>
             </div>

package/src/plugins/layout-plugin.tsx

@@ -63,7 +63,6 @@ import {
   ColorPickerPresets,
   ColorPickerTrigger,
 } from "../editor-ui/color-picker"
-import { Input } from "../ui/input"
 import { Flex } from "../ui/flex"
 import { useEditorModal } from "../editor-hooks/use-modal"
 import { logger } from "../lib/logger"
@@ -468,10 +467,7 @@ export function LayoutPlugin(): JSX.Element | null {
             template: parentContainer.getTemplateColumns(),
             itemBackgroundColor:
               extractStyleValue(style, "background-color") ?? "#ffffff",
-            itemPaddingXPx:
-              paddingValues && paddingValues.length > 1
-                ? paddingValues[1]
-                : (paddingValues?.[0] ?? 12),
+            itemPaddingXPx: paddingValues?.[1] ?? paddingValues?.[0] ?? 12,
             itemPaddingYPx: paddingValues?.[0] ?? 12,
             itemBorderRadiusPx: borderRadiusValues?.[0] ?? 8,
           },

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

@@ -121,6 +121,8 @@
   overflow-x: auto;
   flex-wrap: nowrap;
   border-top: $editor-border-width solid var(--border);
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
   padding: $editor-gap-1-5 $editor-gap-3;
   @include backdrop-blur($editor-dialog-overlay-blur * 2, color-mix(in srgb, var(--background), transparent 50%));