@cgboiler/biz-basic 1.0.67 → 1.0.68

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 (59) hide show
  1. package/es/index.d.ts +1 -1
  2. package/es/index.js +1 -1
  3. package/es/rich-text-editor/RichTextEditor.js +3 -0
  4. package/es/rich-text-editor/index.css +1 -1
  5. package/es/rich-text-editor/index.less +437 -436
  6. package/es/rich-text-editor/lib/utils.d.ts +123 -0
  7. package/es/rich-text-editor/lib/utils.js +244 -0
  8. package/es/rich-text-editor/menu-system/components/_atomic.css +2 -0
  9. package/es/rich-text-editor/menu-system/components/table-dropdown-menu.d.ts +25 -0
  10. package/es/rich-text-editor/menu-system/components/table-dropdown-menu.js +167 -0
  11. package/es/rich-text-editor/menu-system/icons/index.d.ts +13 -0
  12. package/es/rich-text-editor/menu-system/icons/index.js +26 -0
  13. package/es/rich-text-editor/menu-system/styles/animations.less +91 -91
  14. package/es/rich-text-editor/menu-system/styles/button-colors.less +142 -142
  15. package/es/rich-text-editor/menu-system/styles/button-group.less +23 -23
  16. package/es/rich-text-editor/menu-system/styles/button.less +322 -322
  17. package/es/rich-text-editor/menu-system/styles/card.less +78 -78
  18. package/es/rich-text-editor/menu-system/styles/color-highlight-button.less +57 -57
  19. package/es/rich-text-editor/menu-system/styles/color-highlight-popover.less +51 -51
  20. package/es/rich-text-editor/menu-system/styles/dropdown-menu.less +40 -40
  21. package/es/rich-text-editor/menu-system/styles/image-upload-node.less +240 -240
  22. package/es/rich-text-editor/menu-system/styles/input.less +53 -53
  23. package/es/rich-text-editor/menu-system/styles/link-popover.less +32 -32
  24. package/es/rich-text-editor/menu-system/styles/separator.less +26 -26
  25. package/es/rich-text-editor/menu-system/styles/simple-editor.less +39 -39
  26. package/es/rich-text-editor/menu-system/styles/toolbar.less +87 -87
  27. package/es/rich-text-editor/menu-system/styles/variables.less +294 -294
  28. package/es/vue-sfc-shim.d.ts +6 -6
  29. package/es/vue-tsx-shim.d.ts +24 -24
  30. package/lib/index.d.ts +1 -1
  31. package/lib/index.js +1 -1
  32. package/lib/rich-text-editor/RichTextEditor.js +3 -0
  33. package/lib/rich-text-editor/index.css +1 -1
  34. package/lib/rich-text-editor/index.less +437 -436
  35. package/lib/rich-text-editor/lib/utils.d.ts +123 -0
  36. package/lib/rich-text-editor/lib/utils.js +263 -0
  37. package/lib/rich-text-editor/menu-system/components/_atomic.css +2 -0
  38. package/lib/rich-text-editor/menu-system/components/table-dropdown-menu.d.ts +25 -0
  39. package/lib/rich-text-editor/menu-system/components/table-dropdown-menu.js +186 -0
  40. package/lib/rich-text-editor/menu-system/icons/index.d.ts +13 -0
  41. package/lib/rich-text-editor/menu-system/icons/index.js +26 -0
  42. package/lib/rich-text-editor/menu-system/styles/animations.less +91 -91
  43. package/lib/rich-text-editor/menu-system/styles/button-colors.less +142 -142
  44. package/lib/rich-text-editor/menu-system/styles/button-group.less +23 -23
  45. package/lib/rich-text-editor/menu-system/styles/button.less +322 -322
  46. package/lib/rich-text-editor/menu-system/styles/card.less +78 -78
  47. package/lib/rich-text-editor/menu-system/styles/color-highlight-button.less +57 -57
  48. package/lib/rich-text-editor/menu-system/styles/color-highlight-popover.less +51 -51
  49. package/lib/rich-text-editor/menu-system/styles/dropdown-menu.less +40 -40
  50. package/lib/rich-text-editor/menu-system/styles/image-upload-node.less +240 -240
  51. package/lib/rich-text-editor/menu-system/styles/input.less +53 -53
  52. package/lib/rich-text-editor/menu-system/styles/link-popover.less +32 -32
  53. package/lib/rich-text-editor/menu-system/styles/separator.less +26 -26
  54. package/lib/rich-text-editor/menu-system/styles/simple-editor.less +39 -39
  55. package/lib/rich-text-editor/menu-system/styles/toolbar.less +87 -87
  56. package/lib/rich-text-editor/menu-system/styles/variables.less +294 -294
  57. package/lib/vue-sfc-shim.d.ts +6 -6
  58. package/lib/vue-tsx-shim.d.ts +24 -24
  59. package/package.json +1 -1
@@ -1,436 +1,437 @@
1
- @import './menu-system/styles/variables.less';
2
-
3
- body .ProseMirror {
4
- flex: 1;
5
- outline: none;
6
- word-break: break-all; // Ensure text wraps correctly in narrow containers
7
-
8
- line-height: 1.6;
9
- font-size: var(--font-base);
10
- --white: #fff;
11
- --black: #2e2b29;
12
- --gray-1: rgba(61, 37, 20, 0.05);
13
- --gray-2: rgba(61, 37, 20, 0.08);
14
- --gray-3: rgba(61, 37, 20, 0.12);
15
- --gray-4: rgba(53, 38, 28, 0.3);
16
- --gray-5: rgba(28, 25, 23, 0.6);
17
- --green: #22c55e;
18
- --purple: #6a00f5;
19
- --purple-contrast: #5800cc;
20
- --purple-light: rgba(88, 5, 255, 0.05);
21
- --yellow-contrast: #facc15;
22
- --yellow: rgba(250, 204, 21, 0.4);
23
- --yellow-light: #fffae5;
24
- --red: #ff5c33;
25
- --red-light: #ffebe5;
26
- --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
27
- :first-child {
28
- margin-top: 0;
29
- }
30
-
31
- --tt-collaboration-carets-label: var(--tt-gray-light-900);
32
- --link-text-color: var(--tt-brand-color-500);
33
- --thread-text: var(--tt-gray-light-900);
34
- --placeholder-color: var(--tt-gray-light-a-400);
35
- --thread-bg-color: var(--tt-color-yellow-inc-2);
36
- --horizontal-rule-color: var(--tt-gray-light-a-200);
37
- --blockquote-bg-color: var(--tt-gray-light-900);
38
- --tiptap-ai-insertion-color: var(--tt-brand-color-600);
39
-
40
- --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
41
- --tt-inline-code-text-color: var(--tt-gray-light-a-700);
42
- --tt-inline-code-border-color: var(--tt-gray-light-a-200);
43
- --tt-codeblock-bg: var(--tt-gray-light-a-50);
44
- --tt-codeblock-text: var(--tt-gray-light-a-800);
45
- --tt-codeblock-border: var(--tt-gray-light-a-200);
46
-
47
- --tt-checklist-bg-color: var(--tt-gray-light-a-100);
48
- --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
49
- --tt-checklist-border-color: var(--tt-gray-light-a-200);
50
- --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
51
- --tt-checklist-check-icon-color: var(--white);
52
- --tt-checklist-text-active: var(--tt-gray-light-a-500);
53
-
54
- white-space: pre-wrap;
55
- caret-color: var(--tt-cursor-color);
56
-
57
- /* Selection */
58
- &:not(.readonly):not(.ProseMirror-hideselection) {
59
- ::selection {
60
- background-color: var(--tt-selection-color);
61
- }
62
- }
63
-
64
- .selection {
65
- display: inline;
66
- background-color: var(--tt-selection-color);
67
- }
68
-
69
- /* Paragraphs */
70
- p {
71
- font-size: 1rem;
72
- line-height: 1.6; /* Fix cursor height to match text */
73
- }
74
-
75
- video {
76
- width: 100%;
77
- }
78
- /* List styles */
79
- ol {
80
- list-style: auto;
81
- ol {
82
- list-style: disc;
83
- }
84
- }
85
-
86
- ul {
87
- list-style: disc;
88
- }
89
-
90
- ol,
91
- ul {
92
- padding-left: 1.5em;
93
- margin: 0 !important;
94
- li p {
95
- margin-top: 0 !important;
96
- margin-bottom: 0 !important;
97
- }
98
- }
99
-
100
- li::marker {
101
- text-align: start !important;
102
- }
103
-
104
- /* Heading styles */
105
- h1,
106
- h2,
107
- h3,
108
- h4,
109
- h5,
110
- h6 {
111
- line-height: 1.1;
112
- margin-top: 1rem;
113
- margin-bottom: 1rem;
114
- text-wrap: pretty;
115
- }
116
-
117
- h1 {
118
- font-size: 1.4rem;
119
- }
120
-
121
- h2 {
122
- font-size: 1.2rem;
123
- }
124
-
125
- h3 {
126
- font-size: 1.1rem;
127
- }
128
-
129
- h4,
130
- h5,
131
- h6 {
132
- font-size: 1rem;
133
- }
134
-
135
- /* Link styles */
136
- a,
137
- .editor-link {
138
- color: var(--purple);
139
- text-decoration: underline;
140
- cursor: pointer;
141
- transition: color 0.2s ease;
142
-
143
- &:hover {
144
- color: var(--purple-contrast);
145
- text-decoration: underline;
146
- }
147
- }
148
-
149
- /* Code and preformatted text styles */
150
- code {
151
- background-color: #ffe5e8;
152
- border-radius: 0.4rem;
153
- color: #c02537;
154
- padding: 2px 4px;
155
- display: inline-block;
156
- }
157
-
158
- .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
159
- border-radius: var(--tt-radius-md);
160
- background-color: var(--tt-selection-color);
161
- }
162
-
163
- pre {
164
- background-color: var(--tt-codeblock-bg);
165
- color: var(--tt-codeblock-text);
166
- border: 1px solid var(--tt-codeblock-border);
167
- margin-top: 1.5em;
168
- margin-bottom: 1.5em;
169
- padding: 1em;
170
- font-size: 1rem;
171
- border-radius: 0.375rem;
172
-
173
- code {
174
- background-color: transparent;
175
- border: none;
176
- border-radius: 0;
177
- color: inherit;
178
- padding: 0;
179
- display: block;
180
- }
181
- }
182
-
183
- /* 代码块避开左侧内边距,并留出光标空间 */
184
- pre.is-empty::before {
185
- left: 1.15em !important;
186
- top: 0.8em !important;
187
- }
188
-
189
- blockquote {
190
- border-left: 3px solid var(--gray-3);
191
- margin: 1.5rem 0;
192
- padding-left: 1rem;
193
- }
194
-
195
- hr {
196
- border: none;
197
- border-top: 1px solid var(--gray-2);
198
- margin: 2rem 0;
199
- }
200
-
201
- /* Placeholder (at the top) */
202
- p.is-editor-empty:first-child::before {
203
- color: var(--gray-4);
204
- content: attr(data-placeholder);
205
- float: left;
206
- height: 0;
207
- pointer-events: none;
208
- }
209
-
210
- .is-empty::before {
211
- color: var(--gray-4);
212
- content: attr(data-placeholder);
213
- float: left;
214
- height: 0;
215
- pointer-events: none;
216
- }
217
- /* Table-specific styling */
218
- table {
219
- border-collapse: collapse;
220
- margin: 0;
221
- overflow: hidden;
222
- table-layout: fixed;
223
- width: 100%;
224
-
225
- td,
226
- th {
227
- border: 1px solid var(--gray-3);
228
- box-sizing: border-box;
229
- min-width: 1em;
230
- padding: 6px 8px;
231
- position: relative;
232
- vertical-align: top;
233
-
234
- > * {
235
- margin-bottom: 0;
236
- }
237
- }
238
-
239
- th {
240
- background-color: var(--gray-1);
241
- font-weight: bold;
242
- text-align: left;
243
- }
244
-
245
- .selectedCell:after {
246
- background: var(--gray-2);
247
- content: '';
248
- left: 0;
249
- right: 0;
250
- top: 0;
251
- bottom: 0;
252
- pointer-events: none;
253
- position: absolute;
254
- z-index: 2;
255
- }
256
-
257
- .column-resize-handle {
258
- background-color: var(--purple);
259
- bottom: -2px;
260
- pointer-events: none;
261
- position: absolute;
262
- right: -2px;
263
- top: 0;
264
- width: 4px;
265
- }
266
- }
267
-
268
- .tableWrapper {
269
- margin: 1.5rem 0;
270
- overflow-x: auto;
271
- }
272
-
273
- &.resize-cursor {
274
- cursor: ew-resize;
275
- cursor: col-resize;
276
- }
277
- img {
278
- max-width: 100%;
279
- }
280
- // @人的样式 #话题的样式 自定义内容的样式
281
- .mention,
282
- .hash-tag {
283
- color: #c02537;
284
- padding: 0 0.3em;
285
- }
286
-
287
- .custom-content {
288
- color: var(--custom-content-color, #000);
289
- padding: 0 0.3em;
290
- cursor: pointer;
291
- transition: color 0.2s ease;
292
-
293
- &:hover {
294
- color: var(--custom-content-hover-color, #c02537);
295
- }
296
- }
297
- }
298
-
299
- // animation
300
- .animation-indent--right {
301
- animation: indent-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1 alternate-reverse;
302
- }
303
-
304
- @keyframes indent-right {
305
- 0% {
306
- -webkit-transform: translateX(0);
307
- transform: translateX(0);
308
- }
309
-
310
- to {
311
- -webkit-transform: translateX(12px);
312
- transform: translateX(12px);
313
- }
314
- }
315
-
316
- .tiptap-editor-container {
317
- display: flex;
318
- flex-direction: column;
319
- border: 1px solid var(--gray-3);
320
- border-radius: 8px;
321
- overflow: hidden;
322
- height: 100%;
323
- background-color: var(--white);
324
-
325
- .dark & {
326
- background-color: var(--black);
327
- border-color: var(--gray-4);
328
- }
329
-
330
- // Optimized for Mac/Safari List Preview
331
- // Revert back to block behavior to support line-clamp rendering
332
- &.list {
333
- height: auto;
334
- border: none;
335
- background: transparent;
336
-
337
- .tiptap-editor-content-wrapper {
338
- display: block;
339
- height: auto;
340
- overflow: visible;
341
- padding: 0;
342
-
343
- .ProseMirror {
344
- height: auto;
345
- overflow: visible;
346
- }
347
- }
348
- }
349
-
350
- .tiptap-editor-toolbar {
351
- flex: 0 0 auto;
352
- border-bottom: 1px solid var(--gray-3);
353
- padding: 4px;
354
- background-color: var(--gray-1);
355
- display: flex;
356
- flex-wrap: wrap;
357
- gap: 4px;
358
-
359
- .dark & {
360
- border-bottom-color: var(--gray-4);
361
- background-color: var(--gray-2);
362
- }
363
- }
364
-
365
- .tiptap-editor-content-wrapper {
366
- flex: 1 1 auto;
367
- overflow-y: auto;
368
- position: relative;
369
- padding: 16px 8px;
370
- background-color: var(--white);
371
- display: flex;
372
- justify-content: center;
373
-
374
- .dark & {
375
- background-color: var(--black);
376
- }
377
-
378
- .ProseMirror {
379
- width: 100%;
380
- }
381
- }
382
- }
383
-
384
- /* Dropdown styling */
385
- .tiptap-dropdown-menu {
386
- .el-dropdown-menu__item {
387
- &.is-active,
388
- &:hover,
389
- &:focus {
390
- color: var(--tt-brand-color-500) !important;
391
- background-color: var(--tt-brand-color-50) !important;
392
-
393
- .dark & {
394
- color: var(--tt-brand-color-400) !important;
395
- background-color: var(--tt-brand-color-900) !important;
396
- }
397
- }
398
- }
399
- }
400
-
401
- .tiptap-dropdown-menu-item-content {
402
- display: flex;
403
- align-items: center;
404
- gap: 8px;
405
- width: 100%;
406
- }
407
-
408
- .tiptap-dropdown-menu-item-label {
409
- font-size: 10px;
410
- font-weight: 700;
411
- color: var(--tt-text-muted);
412
- padding: 1px 4px;
413
- border-radius: 4px;
414
- min-width: 20px;
415
- text-align: center;
416
-
417
- .dark & {
418
- background-color: var(--tt-gray-dark-200);
419
- }
420
- }
421
-
422
- .tiptap-heading-trigger,
423
- .tiptap-list-dropdown-trigger {
424
- .tiptap-button-icon-chevron {
425
- width: 12px;
426
- height: 12px;
427
- margin-left: 2px;
428
- color: var(--tt-text-muted);
429
- }
430
- }
431
-
432
- .tiptap-dropdown-menu-item-icon {
433
- width: 16px;
434
- height: 16px;
435
- color: var(--tt-text-muted);
436
- }
1
+ @import './menu-system/styles/variables.less';
2
+
3
+ body .ProseMirror {
4
+ flex: 1;
5
+ outline: none;
6
+ word-break: break-all; // Ensure text wraps correctly in narrow containers
7
+
8
+ line-height: 1.6;
9
+ font-size: var(--font-base);
10
+ --white: #fff;
11
+ --black: #2e2b29;
12
+ --gray-1: rgba(61, 37, 20, 0.05);
13
+ --gray-2: rgba(61, 37, 20, 0.08);
14
+ --gray-3: rgba(61, 37, 20, 0.12);
15
+ --gray-4: rgba(53, 38, 28, 0.3);
16
+ --gray-5: rgba(28, 25, 23, 0.6);
17
+ --green: #22c55e;
18
+ --purple: #6a00f5;
19
+ --purple-contrast: #5800cc;
20
+ --purple-light: rgba(88, 5, 255, 0.05);
21
+ --yellow-contrast: #facc15;
22
+ --yellow: rgba(250, 204, 21, 0.4);
23
+ --yellow-light: #fffae5;
24
+ --red: #ff5c33;
25
+ --red-light: #ffebe5;
26
+ --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
27
+ :first-child {
28
+ margin-top: 0;
29
+ }
30
+
31
+ --tt-collaboration-carets-label: var(--tt-gray-light-900);
32
+ --link-text-color: var(--tt-brand-color-500);
33
+ --thread-text: var(--tt-gray-light-900);
34
+ --placeholder-color: var(--tt-gray-light-a-400);
35
+ --thread-bg-color: var(--tt-color-yellow-inc-2);
36
+ --horizontal-rule-color: var(--tt-gray-light-a-200);
37
+ --blockquote-bg-color: var(--tt-gray-light-900);
38
+ --tiptap-ai-insertion-color: var(--tt-brand-color-600);
39
+
40
+ --tt-inline-code-bg-color: var(--tt-gray-light-a-100);
41
+ --tt-inline-code-text-color: var(--tt-gray-light-a-700);
42
+ --tt-inline-code-border-color: var(--tt-gray-light-a-200);
43
+ --tt-codeblock-bg: var(--tt-gray-light-a-50);
44
+ --tt-codeblock-text: var(--tt-gray-light-a-800);
45
+ --tt-codeblock-border: var(--tt-gray-light-a-200);
46
+
47
+ --tt-checklist-bg-color: var(--tt-gray-light-a-100);
48
+ --tt-checklist-bg-active-color: var(--tt-gray-light-a-900);
49
+ --tt-checklist-border-color: var(--tt-gray-light-a-200);
50
+ --tt-checklist-border-active-color: var(--tt-gray-light-a-900);
51
+ --tt-checklist-check-icon-color: var(--white);
52
+ --tt-checklist-text-active: var(--tt-gray-light-a-500);
53
+
54
+ white-space: pre-wrap;
55
+ caret-color: var(--tt-cursor-color);
56
+
57
+ /* Selection */
58
+ &:not(.readonly):not(.ProseMirror-hideselection) {
59
+ ::selection {
60
+ background-color: var(--tt-selection-color);
61
+ }
62
+ }
63
+
64
+ .selection {
65
+ display: inline;
66
+ background-color: var(--tt-selection-color);
67
+ }
68
+
69
+ /* Paragraphs */
70
+ p {
71
+ font-size: 1rem;
72
+ line-height: 1.6; /* Fix cursor height to match text */
73
+ }
74
+
75
+ video {
76
+ width: 100%;
77
+ }
78
+ /* List styles */
79
+ ol {
80
+ list-style: auto;
81
+ ol {
82
+ list-style: disc;
83
+ }
84
+ }
85
+
86
+ ul {
87
+ list-style: disc;
88
+ }
89
+
90
+ ol,
91
+ ul {
92
+ padding-left: 1.5em;
93
+ margin: 0 !important;
94
+ li p {
95
+ margin-top: 0 !important;
96
+ margin-bottom: 0 !important;
97
+ }
98
+ }
99
+
100
+ li::marker {
101
+ text-align: start !important;
102
+ }
103
+
104
+ /* Heading styles */
105
+ h1,
106
+ h2,
107
+ h3,
108
+ h4,
109
+ h5,
110
+ h6 {
111
+ line-height: 1.1;
112
+ margin-top: 1rem;
113
+ margin-bottom: 1rem;
114
+ text-wrap: pretty;
115
+ }
116
+
117
+ h1 {
118
+ font-size: 1.4rem;
119
+ }
120
+
121
+ h2 {
122
+ font-size: 1.2rem;
123
+ }
124
+
125
+ h3 {
126
+ font-size: 1.1rem;
127
+ }
128
+
129
+ h4,
130
+ h5,
131
+ h6 {
132
+ font-size: 1rem;
133
+ }
134
+
135
+ /* Link styles */
136
+ a,
137
+ .editor-link {
138
+ color: var(--purple);
139
+ text-decoration: underline;
140
+ cursor: pointer;
141
+ transition: color 0.2s ease;
142
+
143
+ &:hover {
144
+ color: var(--purple-contrast);
145
+ text-decoration: underline;
146
+ }
147
+ }
148
+
149
+ /* Code and preformatted text styles */
150
+ code {
151
+ background-color: #ffe5e8;
152
+ border-radius: 0.4rem;
153
+ color: #c02537;
154
+ padding: 2px 4px;
155
+ display: inline-block;
156
+ }
157
+
158
+ .ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
159
+ border-radius: var(--tt-radius-md);
160
+ background-color: var(--tt-selection-color);
161
+ }
162
+
163
+ pre {
164
+ background-color: var(--tt-codeblock-bg);
165
+ color: var(--tt-codeblock-text);
166
+ border: 1px solid var(--tt-codeblock-border);
167
+ margin-top: 1.5em;
168
+ margin-bottom: 1.5em;
169
+ padding: 1em;
170
+ font-size: 1rem;
171
+ border-radius: 0.375rem;
172
+
173
+ code {
174
+ background-color: transparent;
175
+ border: none;
176
+ border-radius: 0;
177
+ color: inherit;
178
+ padding: 0;
179
+ display: block;
180
+ }
181
+ }
182
+
183
+ /* 代码块避开左侧内边距,并留出光标空间 */
184
+ pre.is-empty::before {
185
+ left: 1.15em !important;
186
+ top: 0.8em !important;
187
+ }
188
+
189
+ blockquote {
190
+ border-left: 3px solid var(--gray-3);
191
+ margin: 1.5rem 0;
192
+ padding-left: 1rem;
193
+ }
194
+
195
+ hr {
196
+ border: none;
197
+ border-top: 1px solid var(--gray-2);
198
+ margin: 2rem 0;
199
+ }
200
+
201
+ /* Placeholder (at the top) */
202
+ p.is-editor-empty:first-child::before {
203
+ color: var(--gray-4);
204
+ content: attr(data-placeholder);
205
+ float: left;
206
+ height: 0;
207
+ pointer-events: none;
208
+ }
209
+
210
+ .is-empty::before {
211
+ color: var(--gray-4);
212
+ content: attr(data-placeholder);
213
+ float: left;
214
+ height: 0;
215
+ pointer-events: none;
216
+ }
217
+ /* Table-specific styling */
218
+ table {
219
+ border-collapse: collapse;
220
+ margin: 0;
221
+ overflow: hidden;
222
+ table-layout: fixed;
223
+ width: 100%;
224
+
225
+ td,
226
+ th {
227
+ border: 1px solid var(--gray-3);
228
+ box-sizing: border-box;
229
+ min-width: 1em;
230
+ padding: 6px 8px;
231
+ position: relative;
232
+ vertical-align: top;
233
+
234
+ > * {
235
+ margin-bottom: 0;
236
+ }
237
+ }
238
+
239
+ th {
240
+ background-color: var(--gray-1);
241
+ font-weight: bold;
242
+ text-align: left;
243
+ }
244
+
245
+ .selectedCell:after {
246
+ background: var(--gray-2);
247
+ content: '';
248
+ left: 0;
249
+ right: 0;
250
+ top: 0;
251
+ bottom: 0;
252
+ pointer-events: none;
253
+ position: absolute;
254
+ z-index: 2;
255
+ }
256
+
257
+ .column-resize-handle {
258
+ background-color: var(--purple);
259
+ bottom: -2px;
260
+ pointer-events: none;
261
+ position: absolute;
262
+ right: -2px;
263
+ top: 0;
264
+ width: 4px;
265
+ }
266
+ }
267
+
268
+ .tableWrapper {
269
+ margin: 1.5rem 0;
270
+ overflow-x: auto;
271
+ }
272
+
273
+ &.resize-cursor {
274
+ cursor: ew-resize;
275
+ cursor: col-resize;
276
+ }
277
+ img {
278
+ max-width: 100%;
279
+ }
280
+ // @人的样式 #话题的样式 自定义内容的样式
281
+ .mention,
282
+ .hash-tag {
283
+ color: #c02537;
284
+ padding: 0 0.3em;
285
+ }
286
+
287
+ .custom-content {
288
+ color: var(--custom-content-color, #000);
289
+ padding: 0 0.3em;
290
+ cursor: pointer;
291
+ transition: color 0.2s ease;
292
+
293
+ &:hover {
294
+ color: var(--custom-content-hover-color, #c02537);
295
+ }
296
+ }
297
+ }
298
+
299
+ // animation
300
+ .animation-indent--right {
301
+ animation: indent-right 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) 1 alternate-reverse;
302
+ }
303
+
304
+ @keyframes indent-right {
305
+ 0% {
306
+ -webkit-transform: translateX(0);
307
+ transform: translateX(0);
308
+ }
309
+
310
+ to {
311
+ -webkit-transform: translateX(12px);
312
+ transform: translateX(12px);
313
+ }
314
+ }
315
+
316
+ .tiptap-editor-container {
317
+ display: flex;
318
+ flex-direction: column;
319
+ border: 1px solid var(--gray-3);
320
+ border-radius: 8px;
321
+ overflow: hidden;
322
+ height: 100%;
323
+ background-color: var(--white);
324
+
325
+ .dark & {
326
+ background-color: var(--black);
327
+ border-color: var(--gray-4);
328
+ }
329
+
330
+ // Optimized for Mac/Safari List Preview
331
+ // Revert back to block behavior to support line-clamp rendering
332
+ &.list {
333
+ height: auto;
334
+ border: none;
335
+ background: transparent;
336
+
337
+ .tiptap-editor-content-wrapper {
338
+ display: block;
339
+ height: auto;
340
+ overflow: visible;
341
+ padding: 0;
342
+
343
+ .ProseMirror {
344
+ height: auto;
345
+ overflow: visible;
346
+ }
347
+ }
348
+ }
349
+
350
+ .tiptap-editor-toolbar {
351
+ flex: 0 0 auto;
352
+ border-bottom: 1px solid var(--gray-3);
353
+ padding: 4px;
354
+ background-color: var(--gray-1);
355
+ display: flex;
356
+ flex-wrap: wrap;
357
+ gap: 4px;
358
+
359
+ .dark & {
360
+ border-bottom-color: var(--gray-4);
361
+ background-color: var(--gray-2);
362
+ }
363
+ }
364
+
365
+ .tiptap-editor-content-wrapper {
366
+ flex: 1 1 auto;
367
+ overflow-y: auto;
368
+ position: relative;
369
+ padding: 16px 8px;
370
+ background-color: var(--white);
371
+ display: flex;
372
+ justify-content: center;
373
+
374
+ .dark & {
375
+ background-color: var(--black);
376
+ }
377
+
378
+ .ProseMirror {
379
+ width: 100%;
380
+ }
381
+ }
382
+ }
383
+
384
+ /* Dropdown styling */
385
+ .tiptap-dropdown-menu {
386
+ .el-dropdown-menu__item {
387
+ &.is-active,
388
+ &:hover,
389
+ &:focus {
390
+ color: var(--tt-brand-color-500) !important;
391
+ background-color: var(--tt-brand-color-50) !important;
392
+
393
+ .dark & {
394
+ color: var(--tt-brand-color-400) !important;
395
+ background-color: var(--tt-brand-color-900) !important;
396
+ }
397
+ }
398
+ }
399
+ }
400
+
401
+ .tiptap-dropdown-menu-item-content {
402
+ display: flex;
403
+ align-items: center;
404
+ gap: 8px;
405
+ width: 100%;
406
+ }
407
+
408
+ .tiptap-dropdown-menu-item-label {
409
+ font-size: 10px;
410
+ font-weight: 700;
411
+ color: var(--tt-text-muted);
412
+ padding: 1px 4px;
413
+ border-radius: 4px;
414
+ min-width: 20px;
415
+ text-align: center;
416
+
417
+ .dark & {
418
+ background-color: var(--tt-gray-dark-200);
419
+ }
420
+ }
421
+
422
+ .tiptap-heading-trigger,
423
+ .tiptap-list-dropdown-trigger,
424
+ .tiptap-table-dropdown-trigger {
425
+ .tiptap-button-icon-chevron {
426
+ width: 12px;
427
+ height: 12px;
428
+ margin-left: 2px;
429
+ color: var(--tt-text-muted);
430
+ }
431
+ }
432
+
433
+ .tiptap-dropdown-menu-item-icon {
434
+ width: 16px;
435
+ height: 16px;
436
+ color: var(--tt-text-muted);
437
+ }