@kopexa/theme 17.23.2 → 17.24.0

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 (2) hide show
  1. package/dist/editor.css +85 -49
  2. package/package.json +2 -2
package/dist/editor.css CHANGED
@@ -1,5 +1,6 @@
1
- :root {
1
+ .tiptap.ProseMirror {
2
2
  --tt-brand-color-500: var(--color-primary-500);
3
+ --tt-collaboration-carets-label: var(--color-default-400);
3
4
 
4
5
  --tt-bg-color: var(--color-background);
5
6
  --tt-cursor-color: var(--tt-brand-color-500);
@@ -11,6 +12,7 @@
11
12
  --blockquote-bg-color: var(--color-primary-300);
12
13
  --link-text-color: var(--color-primary-700);
13
14
 
15
+ --tt-radius-md: var(--radius-md);
14
16
  --tt-radius-xs: var(--radius-xs);
15
17
  --tt-font-size: var(--text-sm);
16
18
 
@@ -48,44 +50,62 @@
48
50
  --tt-color-highlight-yellow-contrast: var(--color-yellow-900);
49
51
  }
50
52
 
53
+ /* Ensure each top-level node has relative positioning
54
+ so absolutely positioned placeholders work correctly */
55
+ .tiptap.ProseMirror > * {
56
+ position: relative;
57
+ }
58
+
51
59
  /* =====================
52
60
  CORE EDITOR STYLES
53
61
  ===================== */
54
62
 
55
63
  .tiptap.ProseMirror {
56
64
  white-space: pre-wrap;
57
- outline: none;
65
+ outline: none;
58
66
  font-size: var(--tt-font-size);
59
67
  caret-color: var(--tt-cursor-color);
60
68
 
61
- /* Paragraph spacing */
62
- p:not(:first-child) {
63
- font-size: var(--tt-font-size);
64
- line-height: 1.6;
65
- font-weight: normal;
66
- margin-top: 20px;
67
- }
69
+ /* Paragraph spacing */
70
+ p:not(:first-child):not(td p):not(th p) {
71
+ font-size: var(--tt-font-size);
72
+ line-height: 1.6;
73
+ font-weight: normal;
74
+ margin-top: 20px;
75
+ }
68
76
 
69
- /* Selection styles */
70
- &:not(.readonly):not(.ProseMirror-hideselection) {
71
- ::selection {
72
- background-color: var(--tt-selection-color);
73
- }
77
+ /* Selection styles */
78
+ &:not(.readonly):not(.ProseMirror-hideselection) {
79
+ ::selection {
80
+ background-color: var(--tt-selection-color);
81
+ }
74
82
 
75
- .selection::selection {
76
- background: transparent;
77
- }
78
- }
83
+ .selection::selection {
84
+ background: transparent;
85
+ }
86
+ }
79
87
 
80
88
  .selection {
81
89
  display: inline;
82
90
  background-color: var(--tt-selection-color);
83
91
  }
84
92
 
93
+ /* Selected node styles */
94
+ .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
95
+ border-radius: var(--tt-radius-md);
96
+ background-color: var(--tt-selection-color);
97
+ }
98
+
85
99
  .ProseMirror-hideselection {
86
100
  caret-color: transparent;
87
101
  }
88
102
 
103
+ /* Resize cursor */
104
+ &.resize-cursor {
105
+ cursor: ew-resize;
106
+ cursor: col-resize;
107
+ }
108
+
89
109
  /* Placeholder */
90
110
  >p.is-editor-empty::before {
91
111
  content: attr(data-placeholder);
@@ -95,13 +115,6 @@
95
115
  height: 0;
96
116
  }
97
117
 
98
- /* Resize cursor */
99
- &.resize-cursor {
100
- cursor: ew-resize;
101
- cursor: col-resize;
102
- }
103
-
104
-
105
118
  /* =====================
106
119
  PLACEHOLDER
107
120
  ===================== */
@@ -119,6 +132,27 @@
119
132
  }
120
133
  }
121
134
 
135
+ /* =====================
136
+ TEXT DECORATION
137
+ ===================== */
138
+ .tiptap.ProseMirror {
139
+ a span {
140
+ text-decoration: underline;
141
+ }
142
+
143
+ s span {
144
+ text-decoration: line-through;
145
+ }
146
+
147
+ u span {
148
+ text-decoration: underline;
149
+ }
150
+
151
+ .tiptap-ai-insertion {
152
+ color: var(--tiptap-ai-insertion-color);
153
+ }
154
+ }
155
+
122
156
  /* =====================
123
157
  GAP CURSOR
124
158
  ===================== */
@@ -204,35 +238,37 @@
204
238
  }
205
239
  }
206
240
 
241
+
207
242
  /* =====================
208
243
  COLLABORATION
209
244
  ===================== */
210
245
  .tiptap.ProseMirror {
211
- .collaboration-cursor {
212
- &__caret {
213
- border-right: 1px solid transparent;
214
- border-left: 1px solid transparent;
215
- pointer-events: none;
216
- margin-left: -1px;
217
- margin-right: -1px;
218
- position: relative;
219
- word-break: normal;
220
- }
246
+ .collaboration-carets {
247
+ &__caret {
248
+ border-right: 1px solid transparent;
249
+ border-left: 1px solid transparent;
250
+ pointer-events: none;
251
+ margin-left: -1px;
252
+ margin-right: -1px;
253
+ position: relative;
254
+ word-break: normal;
255
+ }
221
256
 
222
- &__label {
223
- border-radius: 0.25rem;
224
- border-bottom-left-radius: 0;
225
- font-size: 0.75rem;
226
- font-weight: 600;
227
- left: -1px;
228
- line-height: 1;
229
- padding: 0.125rem 0.375rem;
230
- position: absolute;
231
- top: -1.3em;
232
- user-select: none;
233
- white-space: nowrap;
234
- }
235
- }
257
+ &__label {
258
+ color: var(--tt-collaboration-carets-label);
259
+ border-radius: 0.25rem;
260
+ border-bottom-left-radius: 0;
261
+ font-size: 0.75rem;
262
+ font-weight: 600;
263
+ left: -1px;
264
+ line-height: 1;
265
+ padding: 0.125rem 0.375rem;
266
+ position: absolute;
267
+ top: -1.3em;
268
+ user-select: none;
269
+ white-space: nowrap;
270
+ }
271
+ }
236
272
  }
237
273
 
238
274
  /* =====================
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kopexa/theme",
3
- "version": "17.23.2",
3
+ "version": "17.24.0",
4
4
  "description": "The default theme for Kopexa components",
5
5
  "keywords": [
6
6
  "theme",
@@ -66,7 +66,7 @@
66
66
  "tailwind-merge": "3.4.0",
67
67
  "tailwind-variants": "^3.2.2",
68
68
  "tw-animate-css": "^1.4.0",
69
- "@kopexa/shared-utils": "17.0.51"
69
+ "@kopexa/shared-utils": "17.0.52"
70
70
  },
71
71
  "peerDependencies": {
72
72
  "tailwindcss": ">=4.0.0"