@thangph2146/lexical-editor 0.0.2 → 0.0.4

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thangph2146/lexical-editor",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "main": "./dist/index.cjs",
@@ -48,8 +48,8 @@
48
48
  "sass": "^1.83.0",
49
49
  "tsup": "^8.4.0",
50
50
  "typescript": "^5.9.3",
51
- "@workspace/eslint-config": "0.0.0",
52
- "@workspace/typescript-config": "0.0.0"
51
+ "@workspace/typescript-config": "0.0.0",
52
+ "@workspace/eslint-config": "0.0.0"
53
53
  },
54
54
  "exports": {
55
55
  ".": {
@@ -15,13 +15,13 @@ export function ContentEditable({
15
15
  placeholderClassName,
16
16
  placeholderDefaults = true,
17
17
  }: Props): JSX.Element {
18
- const isReadOnly = className?.includes("--readonly")
18
+ const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review")
19
19
 
20
20
  return (
21
21
  <LexicalContentEditable
22
22
  className={cn(
23
23
  "ContentEditable__root relative block focus:outline-none",
24
- !isReadOnly && "min-h-72 px-8 py-4",
24
+ !isReadOnlyOrReview && "min-h-72 px-8 py-4",
25
25
  className
26
26
  )}
27
27
  aria-placeholder={placeholder}
@@ -31,7 +31,7 @@ export function ContentEditable({
31
31
  className={cn(
32
32
  placeholderClassName,
33
33
  "text-muted-foreground pointer-events-none select-none",
34
- placeholderDefaults && !isReadOnly && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
34
+ placeholderDefaults && !isReadOnlyOrReview && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
35
35
  )}
36
36
  >
37
37
  {placeholder}
@@ -595,17 +595,23 @@
595
595
  .editor-content-editable {
596
596
  position: relative !important;
597
597
  display: block !important;
598
- min-height: 288px !important; // min-h-72
599
- padding: 16px 32px !important; // py-4 px-8
600
598
  outline: none !important;
601
599
 
600
+ &:not(&--readonly):not(&--review) {
601
+ min-height: 288px !important; // min-h-72
602
+ padding: 16px 32px !important; // py-4 px-8
603
+ }
604
+
602
605
  &:focus {
603
606
  outline: none !important;
604
607
  }
605
608
 
606
- &--readonly {
609
+ &--readonly,
610
+ &--review {
607
611
  cursor: default !important;
608
612
  user-select: text !important;
613
+ min-height: unset !important;
614
+ padding: 0 !important;
609
615
  }
610
616
  }
611
617
 
@@ -619,4 +625,9 @@
619
625
  padding: 18px 32px !important; // py-[18px] px-8
620
626
  text-overflow: ellipsis !important;
621
627
  user-select: none !important;
628
+
629
+ .editor-content-editable--readonly + &,
630
+ .editor-content-editable--review + & {
631
+ display: none !important;
632
+ }
622
633
  }