@thangph2146/lexical-editor 0.0.5 → 0.0.6

package/README.md

@@ -0,0 +1,47 @@
+# @thangph2146/lexical-editor
+
+Một thư viện soạn thảo văn bản (Rich Text Editor) dựa trên [Lexical](https://lexical.dev/) dành cho React/Next.js.
+
+## Tính năng chính
+
+- **Rich Text Editing**: Hỗ trợ đầy đủ các định dạng văn bản (Bold, Italic, Underline, Code, v.v.)
+- **Plugins Hệ thống**: Tích hợp sẵn nhiều plugin mạnh mẽ (Toolbar, Images, Tables, Layout, v.v.)
+- **Dynamic Placeholder**: Hỗ trợ thay đổi placeholder linh hoạt thông qua prop.
+- **Modern UI**: Giao diện hiện đại, dễ dàng tùy chỉnh qua CSS Variables.
+- **TypeScript Support**: Được viết hoàn toàn bằng TypeScript với định nghĩa kiểu đầy đủ.
+
+## Cài đặt
+
+Sử dụng `npm`:
+```bash
+npm install @thangph2146/lexical-editor lexical @lexical/react
+```
+
+Sử dụng `pnpm`:
+```bash
+pnpm add @thangph2146/lexical-editor lexical @lexical/react
+```
+
+## Cách sử dụng
+
+```tsx
+import { LexicalEditor } from "@thangph2146/lexical-editor";
+import "@thangph2146/lexical-editor/style.css";
+
+function MyEditor() {
+  const handleChange = (editorState) => {
+    // Xử lý khi nội dung thay đổi
+  };
+
+  return (
+    <LexicalEditor
+      placeholder="Nhập nội dung tại đây..."
+      onChange={handleChange}
+    />
+  );
+}
+```
+
+## Giấy phép
+
+MIT

package/dist/editor-x/editor.cjs

@@ -5063,7 +5063,7 @@ var init_image_placeholder = __esm({
   }
 });
 function ContentEditable({
-  placeholder: placeholder2,
+  placeholder,
   className,
   placeholderClassName,
   placeholderDefaults = true
@@ -5077,8 +5077,8 @@ function ContentEditable({
         !isReadOnlyOrReview && "min-h-72 px-8 py-4",
         className
       ),
-      "aria-placeholder": placeholder2,
-      "aria-label": placeholder2 || "Editor n\u1ED9i dung",
+      "aria-placeholder": placeholder,
+      "aria-label": placeholder || "Editor n\u1ED9i dung",
       placeholder: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -5087,7 +5087,7 @@ function ContentEditable({
             "text-muted-foreground pointer-events-none select-none",
             placeholderDefaults && !isReadOnlyOrReview && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
           ),
-          children: placeholder2
+          children: placeholder
         }
       )
     }
@@ -7221,10 +7221,10 @@ function SelectTrigger({ className, children, size = "default", ...props }) {
     }
   );
 }
-function SelectValue({ placeholder: placeholder2 }) {
+function SelectValue({ placeholder }) {
   const context = React20__namespace.useContext(SelectContext);
   if (!context) throw new Error("SelectValue must be used within Select");
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: context.value || placeholder2 });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: context.value || placeholder });
 }
 function SelectContent({ className, children, ...props }) {
   const context = React20__namespace.useContext(SelectContext);
@@ -32865,7 +32865,8 @@ __export(plugins_exports, {
   Plugins: () => Plugins
 });
 function Plugins({
-  readOnly = false
+  readOnly = false,
+  placeholder = ""
 }) {
   const [floatingAnchorElem, setFloatingAnchorElem] = React20.useState(null);
   const [isLinkEditMode, setIsLinkEditMode] = React20.useState(false);
@@ -33105,7 +33106,6 @@ function Plugins({
     ] }) })
   ] });
 }
-var placeholder;
 var init_plugins = __esm({
   "src/editor-x/plugins.tsx"() {
     "use client";
@@ -33194,7 +33194,6 @@ var init_plugins = __esm({
     init_markdown_tweet_transformer();
     init_markdown_list_transformer();
     init_separator();
-    placeholder = "Press / for commands...";
   }
 });
 
@@ -33338,7 +33337,8 @@ function Editor({
   editorSerializedState,
   onChange,
   onSerializedChange,
-  readOnly = false
+  readOnly = false,
+  placeholder = ""
 }) {
   const { ref: editorRef, width: editorWidth } = useElementSize();
   const editorMaxWidth = editorWidth || void 0;
@@ -33392,7 +33392,7 @@ function Editor({
             ...editorSerializedState ? { editorState: JSON.stringify(editorSerializedState) } : {}
           },
           children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipProvider, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Plugins2, { readOnly }),
+            /* @__PURE__ */ jsxRuntime.jsx(Plugins2, { readOnly, placeholder }),
             !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
               LexicalOnChangePlugin.OnChangePlugin,
               {