@nextblock-cms/editor 0.14.0 → 0.14.2

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 (7) hide show
  1. package/index.css +1 -1
  2. package/index.js +70 -70
  3. package/index.mjs +9535 -9535
  4. package/package.json +1 -1
  5. package/styles/advanced-features.css +33 -33
  6. package/styles/drag-handle.css +162 -162
  7. package/styles/editor.css +252 -252
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nextblock-cms/editor",
3
- "version": "0.14.0",
3
+ "version": "0.14.2",
4
4
  "main": "index.js",
5
5
  "module": "index.mjs",
6
6
  "types": "index.d.ts",
package/styles/advanced-features.css CHANGED
@@ -7,17 +7,17 @@
7
7
  position: relative;
8
8
  }
9
9
 
10
- .is-empty::before {
11
- color: var(--muted-foreground);
12
- content: attr(data-placeholder);
13
- position: absolute;
14
- left: 0;
15
- float: none;
16
- height: auto;
17
- pointer-events: none;
18
- font-style: italic;
19
- opacity: 0.6;
20
- }
10
+ .is-empty::before {
11
+ color: var(--muted-foreground);
12
+ content: attr(data-placeholder);
13
+ position: absolute;
14
+ left: 0;
15
+ float: none;
16
+ height: auto;
17
+ pointer-events: none;
18
+ font-style: italic;
19
+ opacity: 0.6;
20
+ }
21
21
 
22
22
  /* Specific placeholder styles for different node types */
23
23
  .is-empty-paragraph::before {
@@ -452,26 +452,26 @@
452
452
  .mobile-toolbar {
453
453
  border-width: 2px;
454
454
  }
455
- }
456
-
457
- /* Suppress placeholder rendering within table cells */
458
- .ProseMirror td .is-empty::before,
459
- .ProseMirror th .is-empty::before,
460
- .ProseMirror td.is-empty::before,
461
- .ProseMirror th.is-empty::before {
462
- content: none;
463
- display: none;
464
- }
465
-
466
- .ProseMirror table .is-empty::before {
467
- content: none !important;
468
- display: none !important;
469
- float: none !important;
470
- height: auto !important;
471
- }
472
-
473
-
474
- .ProseMirror table .is-empty {
475
- position: static !important;
476
- }
455
+ }
456
+
457
+ /* Suppress placeholder rendering within table cells */
458
+ .ProseMirror td .is-empty::before,
459
+ .ProseMirror th .is-empty::before,
460
+ .ProseMirror td.is-empty::before,
461
+ .ProseMirror th.is-empty::before {
462
+ content: none;
463
+ display: none;
464
+ }
465
+
466
+ .ProseMirror table .is-empty::before {
467
+ content: none !important;
468
+ display: none !important;
469
+ float: none !important;
470
+ height: auto !important;
471
+ }
472
+
473
+
474
+ .ProseMirror table .is-empty {
475
+ position: static !important;
476
+ }
477
477
 
package/styles/drag-handle.css CHANGED
@@ -1,162 +1,162 @@
1
- /* libs/editor/src/styles/drag-handle.css */
2
-
3
- .tiptap-drag-handle {
4
- position: absolute;
5
- z-index: 50;
6
- pointer-events: none;
7
- display: flex;
8
- align-items: center;
9
- justify-content: center;
10
- transform: translateX(0);
11
- transition: opacity 120ms var(--ease-out, ease), transform 120ms var(--ease-out, ease);
12
- }
13
-
14
- .tiptap-drag-handle__group {
15
- pointer-events: auto;
16
- display: inline-flex;
17
- align-items: center;
18
- gap: 0.125rem;
19
- padding: 0.125rem 0.1rem;
20
- border-radius: 0.5rem;
21
- border: none;
22
- background-color: transparent;
23
- box-shadow: none;
24
- color: color-mix(in srgb, hsl(var(--muted-foreground)) 80%, hsl(var(--foreground)) 20%);
25
- transition:
26
- background-color 120ms var(--ease-out, ease),
27
- color 120ms var(--ease-out, ease);
28
- min-height: 1.65rem;
29
- line-height: 1;
30
- }
31
-
32
- .tiptap-drag-handle__group:hover,
33
- .tiptap-drag-handle__group:focus-within {
34
- background-color: transparent;
35
- color: color-mix(in srgb, hsl(var(--foreground)) 90%, hsl(var(--muted-foreground)) 10%);
36
- }
37
-
38
- .dark .tiptap-drag-handle__group {
39
- background-color: transparent;
40
- border: none;
41
- box-shadow: none;
42
- color: color-mix(in srgb, hsl(var(--muted-foreground)) 85%, white 15%);
43
- }
44
-
45
- .dark .tiptap-drag-handle__group:hover,
46
- .dark .tiptap-drag-handle__group:focus-within {
47
- background-color: transparent;
48
- color: color-mix(in srgb, hsl(var(--muted-foreground)) 75%, white 25%);
49
- }
50
-
51
- .tiptap-drag-handle__group[data-menu-open='true'],
52
- .tiptap-drag-handle__group[data-menu-open='true']:hover,
53
- .tiptap-drag-handle__group[data-menu-open='true']:focus-within {
54
- border: none;
55
- background-color: transparent;
56
- color: hsl(var(--primary));
57
- }
58
-
59
- .tiptap-drag-handle__button {
60
- display: inline-flex;
61
- align-items: center;
62
- justify-content: center;
63
- width: 1.3rem;
64
- height: 1.3rem;
65
- border-radius: 0.5rem;
66
- border: none;
67
- background-color: transparent;
68
- color: inherit;
69
- transition:
70
- background-color 120ms var(--ease-out, ease),
71
- border-color 120ms var(--ease-out, ease),
72
- transform 120ms var(--ease-out, ease),
73
- color 120ms var(--ease-out, ease);
74
- }
75
-
76
- .tiptap-drag-handle__button--ghost:hover,
77
- .tiptap-drag-handle__button--ghost:focus-visible {
78
- background-color: color-mix(in srgb, hsl(var(--muted)) 55%, transparent 45%);
79
- border-color: transparent;
80
- color: hsl(var(--foreground));
81
- transform: translateY(-1px);
82
- }
83
-
84
- .dark .tiptap-drag-handle__button--ghost:hover,
85
- .dark .tiptap-drag-handle__button--ghost:focus-visible {
86
- background-color: color-mix(in srgb, hsl(var(--muted)) 68%, transparent 32%);
87
- border-color: transparent;
88
- }
89
-
90
- .tiptap-drag-handle__button:active {
91
- transform: translateY(0);
92
- }
93
-
94
- .tiptap-drag-handle__plus {
95
- cursor: pointer;
96
- }
97
-
98
- .tiptap-drag-handle__grip {
99
- cursor: grab;
100
- border-left: none;
101
- padding-left: 0.1rem;
102
- }
103
-
104
- .tiptap-drag-handle__grip:active {
105
- cursor: grabbing;
106
- }
107
-
108
- body.dragging {
109
- cursor: grabbing !important;
110
- user-select: none;
111
- }
112
-
113
- body.dragging .tiptap-drag-handle__group {
114
- box-shadow: none;
115
- }
116
-
117
- body.dragging .tiptap-drag-handle__button {
118
- background-color: color-mix(in srgb, hsl(var(--primary)) 18%, transparent 82%);
119
- border-color: transparent;
120
- color: hsl(var(--primary-foreground));
121
- }
122
-
123
- .tiptap-drag-handle__icon {
124
- width: 0.85rem;
125
- height: 0.85rem;
126
- }
127
-
128
- .tiptap-drag-handle__icon--filled {
129
- width: 0.95rem;
130
- height: 0.95rem;
131
- }
132
-
133
- .tiptap-drag-hover-target {
134
- position: relative;
135
- }
136
-
137
- .tiptap-drag-hover-target::before {
138
- content: '';
139
- position: absolute;
140
- left: -0.75rem;
141
- right: -0.75rem;
142
- top: -0.5rem;
143
- bottom: -0.5rem;
144
- border-radius: 0.75rem;
145
- border: 1px dashed transparent;
146
- transition: border-color 120ms var(--ease-out, ease);
147
- }
148
-
149
- .tiptap-drag-hover-target.is-drag-over::before {
150
- border-color: hsl(var(--primary));
151
- }
152
-
153
- @media (max-width: 768px) {
154
- .tiptap-drag-handle {
155
- transform: translateX(calc(-100% - 0.5rem));
156
- }
157
-
158
- .tiptap-drag-handle__group {
159
- gap: 0.1rem;
160
- padding: 0.15rem 0.2rem;
161
- }
162
- }
1
+ /* libs/editor/src/styles/drag-handle.css */
2
+
3
+ .tiptap-drag-handle {
4
+ position: absolute;
5
+ z-index: 50;
6
+ pointer-events: none;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ transform: translateX(0);
11
+ transition: opacity 120ms var(--ease-out, ease), transform 120ms var(--ease-out, ease);
12
+ }
13
+
14
+ .tiptap-drag-handle__group {
15
+ pointer-events: auto;
16
+ display: inline-flex;
17
+ align-items: center;
18
+ gap: 0.125rem;
19
+ padding: 0.125rem 0.1rem;
20
+ border-radius: 0.5rem;
21
+ border: none;
22
+ background-color: transparent;
23
+ box-shadow: none;
24
+ color: color-mix(in srgb, hsl(var(--muted-foreground)) 80%, hsl(var(--foreground)) 20%);
25
+ transition:
26
+ background-color 120ms var(--ease-out, ease),
27
+ color 120ms var(--ease-out, ease);
28
+ min-height: 1.65rem;
29
+ line-height: 1;
30
+ }
31
+
32
+ .tiptap-drag-handle__group:hover,
33
+ .tiptap-drag-handle__group:focus-within {
34
+ background-color: transparent;
35
+ color: color-mix(in srgb, hsl(var(--foreground)) 90%, hsl(var(--muted-foreground)) 10%);
36
+ }
37
+
38
+ .dark .tiptap-drag-handle__group {
39
+ background-color: transparent;
40
+ border: none;
41
+ box-shadow: none;
42
+ color: color-mix(in srgb, hsl(var(--muted-foreground)) 85%, white 15%);
43
+ }
44
+
45
+ .dark .tiptap-drag-handle__group:hover,
46
+ .dark .tiptap-drag-handle__group:focus-within {
47
+ background-color: transparent;
48
+ color: color-mix(in srgb, hsl(var(--muted-foreground)) 75%, white 25%);
49
+ }
50
+
51
+ .tiptap-drag-handle__group[data-menu-open='true'],
52
+ .tiptap-drag-handle__group[data-menu-open='true']:hover,
53
+ .tiptap-drag-handle__group[data-menu-open='true']:focus-within {
54
+ border: none;
55
+ background-color: transparent;
56
+ color: hsl(var(--primary));
57
+ }
58
+
59
+ .tiptap-drag-handle__button {
60
+ display: inline-flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ width: 1.3rem;
64
+ height: 1.3rem;
65
+ border-radius: 0.5rem;
66
+ border: none;
67
+ background-color: transparent;
68
+ color: inherit;
69
+ transition:
70
+ background-color 120ms var(--ease-out, ease),
71
+ border-color 120ms var(--ease-out, ease),
72
+ transform 120ms var(--ease-out, ease),
73
+ color 120ms var(--ease-out, ease);
74
+ }
75
+
76
+ .tiptap-drag-handle__button--ghost:hover,
77
+ .tiptap-drag-handle__button--ghost:focus-visible {
78
+ background-color: color-mix(in srgb, hsl(var(--muted)) 55%, transparent 45%);
79
+ border-color: transparent;
80
+ color: hsl(var(--foreground));
81
+ transform: translateY(-1px);
82
+ }
83
+
84
+ .dark .tiptap-drag-handle__button--ghost:hover,
85
+ .dark .tiptap-drag-handle__button--ghost:focus-visible {
86
+ background-color: color-mix(in srgb, hsl(var(--muted)) 68%, transparent 32%);
87
+ border-color: transparent;
88
+ }
89
+
90
+ .tiptap-drag-handle__button:active {
91
+ transform: translateY(0);
92
+ }
93
+
94
+ .tiptap-drag-handle__plus {
95
+ cursor: pointer;
96
+ }
97
+
98
+ .tiptap-drag-handle__grip {
99
+ cursor: grab;
100
+ border-left: none;
101
+ padding-left: 0.1rem;
102
+ }
103
+
104
+ .tiptap-drag-handle__grip:active {
105
+ cursor: grabbing;
106
+ }
107
+
108
+ body.dragging {
109
+ cursor: grabbing !important;
110
+ user-select: none;
111
+ }
112
+
113
+ body.dragging .tiptap-drag-handle__group {
114
+ box-shadow: none;
115
+ }
116
+
117
+ body.dragging .tiptap-drag-handle__button {
118
+ background-color: color-mix(in srgb, hsl(var(--primary)) 18%, transparent 82%);
119
+ border-color: transparent;
120
+ color: hsl(var(--primary-foreground));
121
+ }
122
+
123
+ .tiptap-drag-handle__icon {
124
+ width: 0.85rem;
125
+ height: 0.85rem;
126
+ }
127
+
128
+ .tiptap-drag-handle__icon--filled {
129
+ width: 0.95rem;
130
+ height: 0.95rem;
131
+ }
132
+
133
+ .tiptap-drag-hover-target {
134
+ position: relative;
135
+ }
136
+
137
+ .tiptap-drag-hover-target::before {
138
+ content: '';
139
+ position: absolute;
140
+ left: -0.75rem;
141
+ right: -0.75rem;
142
+ top: -0.5rem;
143
+ bottom: -0.5rem;
144
+ border-radius: 0.75rem;
145
+ border: 1px dashed transparent;
146
+ transition: border-color 120ms var(--ease-out, ease);
147
+ }
148
+
149
+ .tiptap-drag-hover-target.is-drag-over::before {
150
+ border-color: hsl(var(--primary));
151
+ }
152
+
153
+ @media (max-width: 768px) {
154
+ .tiptap-drag-handle {
155
+ transform: translateX(calc(-100% - 0.5rem));
156
+ }
157
+
158
+ .tiptap-drag-handle__group {
159
+ gap: 0.1rem;
160
+ padding: 0.15rem 0.2rem;
161
+ }
162
+ }