@thangph2146/lexical-editor 0.0.5 → 0.0.6

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.
Files changed (20) hide show
  1. package/README.md +47 -0
  2. package/dist/editor-x/editor.cjs +11 -11
  3. package/dist/editor-x/editor.cjs.map +1 -1
  4. package/dist/editor-x/editor.d.cts +2 -1
  5. package/dist/editor-x/editor.d.ts +2 -1
  6. package/dist/editor-x/editor.js +11 -11
  7. package/dist/editor-x/editor.js.map +1 -1
  8. package/dist/index.cjs +15 -13
  9. package/dist/index.cjs.map +1 -1
  10. package/dist/index.d.cts +1 -1
  11. package/dist/index.d.ts +1 -1
  12. package/dist/index.js +15 -13
  13. package/dist/index.js.map +1 -1
  14. package/package.json +86 -84
  15. package/src/components/lexical-editor.tsx +2 -0
  16. package/src/editor-x/editor.tsx +4 -2
  17. package/src/editor-x/plugins.tsx +2 -2
  18. package/src/themes/editor-theme copy.scss +0 -763
  19. package/src/themes/plugins copy.scss +0 -656
  20. package/src/themes/ui-components copy.scss +0 -1335
package/package.json CHANGED
@@ -1,84 +1,86 @@
1
- {
2
- "name": "@thangph2146/lexical-editor",
3
- "version": "0.0.5",
4
- "type": "module",
5
- "private": false,
6
- "main": "./dist/index.cjs",
7
- "module": "./dist/index.js",
8
- "types": "./dist/index.d.ts",
9
- "files": [
10
- "dist",
11
- "src"
12
- ],
13
- "publishConfig": {
14
- "access": "public"
15
- },
16
- "dependencies": {
17
- "@lexical/code": "^0.38.2",
18
- "@lexical/file": "^0.38.2",
19
- "@lexical/hashtag": "^0.38.2",
20
- "@lexical/link": "^0.38.2",
21
- "@lexical/list": "^0.38.2",
22
- "@lexical/markdown": "^0.38.2",
23
- "@lexical/overflow": "^0.38.2",
24
- "@lexical/rich-text": "^0.38.2",
25
- "@lexical/selection": "^0.38.2",
26
- "@lexical/table": "^0.38.2",
27
- "@lexical/text": "^0.38.2",
28
- "@lexical/utils": "^0.38.2",
29
- "@radix-ui/react-slider": "^1.2.3",
30
- "@radix-ui/react-slot": "^1.2.4",
31
- "framer-motion": "^12.4.7",
32
- "lucide-react": "^0.552.0",
33
- "sonner": "^2.0.7"
34
- },
35
- "peerDependencies": {
36
- "@lexical/react": "^0.38.2",
37
- "lexical": "^0.38.2",
38
- "react": ">=18",
39
- "react-dom": ">=18"
40
- },
41
- "devDependencies": {
42
- "@types/node": "^25.1.0",
43
- "@types/react": "^19.2.10",
44
- "@types/react-dom": "^19.2.3",
45
- "esbuild-sass-plugin": "^3.3.1",
46
- "eslint": "^9.39.2",
47
- "next": "16.1.6",
48
- "sass": "^1.83.0",
49
- "tsup": "^8.4.0",
50
- "typescript": "^5.9.3",
51
- "@workspace/eslint-config": "0.0.0",
52
- "@workspace/typescript-config": "0.0.0"
53
- },
54
- "exports": {
55
- ".": {
56
- "types": "./dist/index.d.ts",
57
- "import": "./dist/index.js",
58
- "require": "./dist/index.cjs"
59
- },
60
- "./style.css": "./dist/index.css",
61
- "./editor": {
62
- "types": "./dist/editor-x/editor.d.ts",
63
- "import": "./dist/editor-x/editor.js",
64
- "require": "./dist/editor-x/editor.cjs"
65
- },
66
- "./styles": {
67
- "sass": "./src/themes/editor-theme.scss",
68
- "default": "./src/themes/editor-theme.scss"
69
- },
70
- "./variables": {
71
- "sass": "./src/themes/_variables.scss",
72
- "default": "./src/themes/_variables.scss"
73
- },
74
- "./themes/*": "./src/themes/*.ts",
75
- "./utils/*": "./src/utils/*.ts"
76
- },
77
- "scripts": {
78
- "build": "tsup",
79
- "dev": "tsup --watch",
80
- "lint": "eslint",
81
- "format": "prettier --write \"**/*.{ts,tsx}\"",
82
- "typecheck": "tsc --noEmit"
83
- }
84
- }
1
+ {
2
+ "name": "@thangph2146/lexical-editor",
3
+ "version": "0.0.6",
4
+ "description": "Rich Text Editor library based on Lexical for React/Next.js",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "private": false,
8
+ "main": "./dist/index.cjs",
9
+ "module": "./dist/index.js",
10
+ "types": "./dist/index.d.ts",
11
+ "files": [
12
+ "dist",
13
+ "src"
14
+ ],
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "scripts": {
19
+ "build": "tsup",
20
+ "dev": "tsup --watch",
21
+ "lint": "eslint",
22
+ "format": "prettier --write \"**/*.{ts,tsx}\"",
23
+ "typecheck": "tsc --noEmit"
24
+ },
25
+ "dependencies": {
26
+ "@lexical/code": "^0.38.2",
27
+ "@lexical/file": "^0.38.2",
28
+ "@lexical/hashtag": "^0.38.2",
29
+ "@lexical/link": "^0.38.2",
30
+ "@lexical/list": "^0.38.2",
31
+ "@lexical/markdown": "^0.38.2",
32
+ "@lexical/overflow": "^0.38.2",
33
+ "@lexical/rich-text": "^0.38.2",
34
+ "@lexical/selection": "^0.38.2",
35
+ "@lexical/table": "^0.38.2",
36
+ "@lexical/text": "^0.38.2",
37
+ "@lexical/utils": "^0.38.2",
38
+ "@radix-ui/react-slider": "^1.2.3",
39
+ "@radix-ui/react-slot": "^1.2.4",
40
+ "framer-motion": "^12.4.7",
41
+ "lucide-react": "^0.552.0",
42
+ "sonner": "^2.0.7"
43
+ },
44
+ "peerDependencies": {
45
+ "@lexical/react": "^0.38.2",
46
+ "lexical": "^0.38.2",
47
+ "react": ">=18",
48
+ "react-dom": ">=18"
49
+ },
50
+ "devDependencies": {
51
+ "@types/node": "^25.1.0",
52
+ "@types/react": "^19.2.10",
53
+ "@types/react-dom": "^19.2.3",
54
+ "@workspace/eslint-config": "workspace:*",
55
+ "@workspace/typescript-config": "workspace:*",
56
+ "esbuild-sass-plugin": "^3.3.1",
57
+ "eslint": "^9.39.2",
58
+ "next": "16.1.6",
59
+ "sass": "^1.83.0",
60
+ "tsup": "^8.4.0",
61
+ "typescript": "^5.9.3"
62
+ },
63
+ "exports": {
64
+ ".": {
65
+ "types": "./dist/index.d.ts",
66
+ "import": "./dist/index.js",
67
+ "require": "./dist/index.cjs"
68
+ },
69
+ "./style.css": "./dist/index.css",
70
+ "./editor": {
71
+ "types": "./dist/editor-x/editor.d.ts",
72
+ "import": "./dist/editor-x/editor.js",
73
+ "require": "./dist/editor-x/editor.cjs"
74
+ },
75
+ "./styles": {
76
+ "sass": "./src/themes/editor-theme.scss",
77
+ "default": "./src/themes/editor-theme.scss"
78
+ },
79
+ "./variables": {
80
+ "sass": "./src/themes/_variables.scss",
81
+ "default": "./src/themes/_variables.scss"
82
+ },
83
+ "./themes/*": "./src/themes/*.ts",
84
+ "./utils/*": "./src/utils/*.ts"
85
+ }
86
+ }
package/src/components/lexical-editor.tsx CHANGED
@@ -30,6 +30,7 @@ export function LexicalEditor({
30
30
  onChange,
31
31
  readOnly = false,
32
32
  className,
33
+ placeholder = "",
33
34
  }: LexicalEditorProps) {
34
35
  // Parse initial value as SerializedEditorState
35
36
  const [editorState, setEditorState] = useState<SerializedEditorState | undefined>(() => {
@@ -132,6 +133,7 @@ export function LexicalEditor({
132
133
  editorSerializedState={editorState}
133
134
  onSerializedChange={handleSerializedChange}
134
135
  readOnly={readOnly}
136
+ placeholder={placeholder}
135
137
  />
136
138
  </div>
137
139
  )
package/src/editor-x/editor.tsx CHANGED
@@ -39,19 +39,21 @@ export function Editor({
39
39
  onChange,
40
40
  onSerializedChange,
41
41
  readOnly = false,
42
+ placeholder = "",
42
43
  }: {
43
44
  editorState?: EditorState
44
45
  editorSerializedState?: SerializedEditorState
45
46
  onChange?: (editorState: EditorState) => void
46
47
  onSerializedChange?: (editorSerializedState: SerializedEditorState) => void
47
48
  readOnly?: boolean
49
+ placeholder?: string
48
50
  }) {
49
51
  const { ref: editorRef, width: editorWidth } = useElementSize<HTMLDivElement>()
50
52
  const editorMaxWidth = editorWidth || undefined
51
53
 
52
54
  const [config, setConfig] = useState<{
53
55
  nodes: InitialConfigType["nodes"]
54
- Plugins: React.ComponentType<{ readOnly?: boolean }>
56
+ Plugins: React.ComponentType<{ readOnly?: boolean; placeholder?: string }>
55
57
  } | null>(null)
56
58
 
57
59
  useEffect(() => {
@@ -111,7 +113,7 @@ export function Editor({
111
113
  }}
112
114
  >
113
115
  <TooltipProvider>
114
- <Plugins readOnly={readOnly} />
116
+ <Plugins readOnly={readOnly} placeholder={placeholder} />
115
117
 
116
118
  {!readOnly && (
117
119
  <OnChangePlugin
package/src/editor-x/plugins.tsx CHANGED
@@ -111,12 +111,12 @@ import { TWEET } from "../transformers/markdown-tweet-transformer"
111
111
  import { UNORDERED_LIST } from "../transformers/markdown-list-transformer"
112
112
  import { Separator } from "../ui/separator"
113
113
 
114
- const placeholder = "Press / for commands..."
115
-
116
114
  export function Plugins({
117
115
  readOnly = false,
116
+ placeholder = "",
118
117
  }: {
119
118
  readOnly?: boolean
119
+ placeholder?: string
120
120
  }) {
121
121
  const [floatingAnchorElem, setFloatingAnchorElem] =
122
122
  useState<HTMLDivElement | null>(null)