@thangph2146/lexical-editor 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -0
- package/dist/editor-x/editor.cjs +610 -493
- package/dist/editor-x/editor.cjs.map +1 -1
- package/dist/editor-x/editor.css +157 -69
- package/dist/editor-x/editor.css.map +1 -1
- package/dist/editor-x/editor.d.cts +2 -1
- package/dist/editor-x/editor.d.ts +2 -1
- package/dist/editor-x/editor.js +350 -233
- package/dist/editor-x/editor.js.map +1 -1
- package/dist/index.cjs +620 -501
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +157 -69
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +354 -235
- package/dist/index.js.map +1 -1
- package/package.json +3 -1
- package/src/components/lexical-editor.tsx +2 -0
- package/src/editor-x/editor.tsx +4 -2
- package/src/editor-x/plugins.tsx +7 -6
- package/src/plugins/images-plugin.tsx +3 -2
- package/src/plugins/layout-plugin.tsx +96 -61
- package/src/themes/_mixins.scss +12 -7
- package/src/themes/_variables.scss +2 -1
- package/src/themes/core/_reset.scss +10 -6
- package/src/themes/plugins/_color-picker.scss +1 -0
- package/src/themes/plugins/_layout.scss +3 -7
- package/src/themes/plugins/_list-color.scss +2 -0
- package/src/themes/plugins/_toolbar.scss +7 -7
- package/src/themes/ui-components/_button.scss +3 -3
- package/src/themes/ui-components/_flex.scss +2 -0
- package/src/themes/ui-components/_number-input.scss +81 -0
- package/src/themes/ui-components/_text-utilities.scss +1 -1
- package/src/themes/ui-components.scss +1 -0
- package/src/ui/flex.tsx +9 -2
- package/src/ui/number-input.tsx +104 -0
- package/src/themes/editor-theme copy.scss +0 -763
- package/src/themes/plugins copy.scss +0 -656
- package/src/themes/ui-components copy.scss +0 -1335
package/README.md
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
# @thangph2146/lexical-editor
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Tính năng chính
|
|
6
|
+
|
|
7
|
+
- **Rich Text Editing**: Hỗ trợ đầy đủ các định dạng văn bản (Bold, Italic, Underline, Code, v.v.)
|
|
8
|
+
- **Plugins Hệ thống**: Tích hợp sẵn nhiều plugin mạnh mẽ (Toolbar, Images, Tables, Layout, v.v.)
|
|
9
|
+
- **Dynamic Placeholder**: Hỗ trợ thay đổi placeholder linh hoạt thông qua prop.
|
|
10
|
+
- **Modern UI**: Giao diện hiện đại, dễ dàng tùy chỉnh qua CSS Variables.
|
|
11
|
+
- **TypeScript Support**: Được viết hoàn toàn bằng TypeScript với định nghĩa kiểu đầy đủ.
|
|
12
|
+
|
|
13
|
+
## Cài đặt
|
|
14
|
+
|
|
15
|
+
Sử dụng `npm`:
|
|
16
|
+
```bash
|
|
17
|
+
npm install @thangph2146/lexical-editor lexical @lexical/react
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Sử dụng `pnpm`:
|
|
21
|
+
```bash
|
|
22
|
+
pnpm add @thangph2146/lexical-editor lexical @lexical/react
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Cách sử dụng
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { LexicalEditor } from "@thangph2146/lexical-editor";
|
|
29
|
+
import "@thangph2146/lexical-editor/style.css";
|
|
30
|
+
|
|
31
|
+
function MyEditor() {
|
|
32
|
+
const handleChange = (editorState) => {
|
|
33
|
+
// Xử lý khi nội dung thay đổi
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<LexicalEditor
|
|
38
|
+
placeholder="Nhập nội dung tại đây..."
|
|
39
|
+
onChange={handleChange}
|
|
40
|
+
/>
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Giấy phép
|
|
46
|
+
|
|
47
|
+
MIT
|