leksy-editor 1.0.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.
package/style.css ADDED
@@ -0,0 +1,558 @@
1
+ .leksy-editor-container *,
2
+ *:before,
3
+ *:after {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ .leksy-editor-container body,
8
+ p,
9
+ ul,
10
+ ol,
11
+ li {
12
+ margin: 0;
13
+ padding: 0;
14
+ color: black;
15
+ font-weight: normal;
16
+ }
17
+
18
+ .leksy-editor-container button {
19
+ appearance: auto;
20
+ text-rendering: auto;
21
+ color: unset;
22
+ letter-spacing: normal;
23
+ word-spacing: normal;
24
+ line-height: normal;
25
+ text-transform: none;
26
+ text-indent: 0px;
27
+ text-shadow: none;
28
+ display: inline-block;
29
+ text-align: center;
30
+ align-items: center;
31
+ cursor: pointer;
32
+ box-sizing: border-box;
33
+ background-color: unset;
34
+ padding-block: unset;
35
+ border-width: 0px;
36
+ border-style: outset;
37
+ border-color: unset;
38
+ border-image: initial;
39
+ }
40
+
41
+ .leksy-editor-container {
42
+ width: 100%;
43
+ min-height: 400px;
44
+ border: 1px solid black;
45
+ border-radius: 6px;
46
+ display: flex;
47
+ flex-direction: column;
48
+ position: relative;
49
+ }
50
+
51
+ .leksy-editor-container.fullscreen {
52
+ position: fixed;
53
+ top: 0;
54
+ left: 0;
55
+ height: 100vh;
56
+ background-color: white;
57
+ z-index: 1000;
58
+ border-radius: 0px;
59
+ }
60
+
61
+ .leksy-editor-toolbar {
62
+ padding: 6px;
63
+ border-bottom: 1px solid black;
64
+ background-color: ghostwhite;
65
+ flex: 0 1 auto;
66
+ display: flex;
67
+ flex-wrap: wrap;
68
+ border-radius: 6px 6px 0px 0px;
69
+ align-items: center;
70
+ }
71
+
72
+ .leksy-editor-toolbar-items {
73
+ outline: 1px solid gray;
74
+ display: flex;
75
+ border-radius: 4px;
76
+ margin: 2px;
77
+ }
78
+
79
+ .leksy-editor-toolbar-items span {
80
+ font-size: 14px;
81
+ white-space: nowrap;
82
+ }
83
+
84
+ .leksy-editor-toolbar-item {
85
+ margin: 1px;
86
+ padding: 6px 0;
87
+ height: 34px;
88
+ width: 34px;
89
+ background: transparent;
90
+ border-radius: 4px;
91
+ position: relative;
92
+ user-select: none;
93
+ vertical-align: top;
94
+ font-size: 1rem;
95
+ cursor: pointer;
96
+ outline: 0px;
97
+ text-align: center;
98
+ transition: .3s;
99
+ }
100
+
101
+ .leksy-editor-toolbar-item.active {
102
+ color: #4592ff;
103
+ fill: #4592ff;
104
+ }
105
+
106
+ .leksy-editor-toolbar-item.disabled {
107
+ cursor: not-allowed;
108
+ color: #bdbdbd;
109
+ fill: #bdbdbd;
110
+ }
111
+
112
+ .leksy-editor-toolbar-item svg {
113
+ width: 14px;
114
+ height: 14px;
115
+ }
116
+
117
+ .leksy-editor-toolbar-item.select {
118
+ padding: 0 8px;
119
+ width: unset;
120
+ }
121
+
122
+ .leksy-editor-toolbar-item.color {
123
+ width: unset;
124
+ padding: 4px 8px;
125
+ }
126
+
127
+ .leksy-editor-toolbar-item.color input {
128
+ border: none;
129
+ width: 25px;
130
+ height: 25px;
131
+ background: none;
132
+ }
133
+
134
+ .leksy-editor-toolbar-item.color div {
135
+ display: inline;
136
+ }
137
+
138
+ .leksy-editor-toolbar-item:hover {
139
+ background-color: lightgrey;
140
+ border: pink;
141
+ }
142
+
143
+ .leksy-editor-toolbar-item:hover::after {
144
+ opacity: 1;
145
+ visibility: visible;
146
+ }
147
+
148
+ .leksy-editor-toolbar-item::after {
149
+ content: attr(data-title);
150
+ position: absolute;
151
+ opacity: 0;
152
+ visibility: hidden;
153
+ transition: opacity 0.3s, visibility 0.3s;
154
+ background-color: gray;
155
+ box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
156
+ color: black;
157
+ padding: 5px 10px;
158
+ border-radius: 5px;
159
+ bottom: -90%;
160
+ left: 60%;
161
+ transform: translateX(-50%);
162
+ white-space: nowrap;
163
+ z-index: 1;
164
+ pointer-events: none;
165
+ font-size: 0.875rem;
166
+ }
167
+
168
+ .leksy-editor-toolbar-table {
169
+ display: grid;
170
+ grid-template-columns: repeat(10, 20px);
171
+ grid-template-rows: repeat(10, 20px);
172
+ }
173
+
174
+ .leksy-editor-toolbar-table .cell {
175
+ width: 16px;
176
+ height: 16px;
177
+ border: 1px solid gray;
178
+ background-color: lightgray;
179
+ }
180
+
181
+ .leksy-editor-toolbar-table .cell.selected {
182
+ background-color: #0c8;
183
+ }
184
+
185
+ .leksy-editor-placeholder {
186
+ user-select: none;
187
+ opacity: 0.5;
188
+ padding: 4px;
189
+ position: absolute;
190
+ }
191
+
192
+ .leksy-editor-resize-items {
193
+ margin-top: 4px;
194
+ width: 235px;
195
+ }
196
+
197
+ .leksy-editor-resize-item {
198
+ margin: 1px;
199
+ padding: 6px;
200
+ height: 34px;
201
+ background: transparent;
202
+ border-radius: 4px;
203
+ position: relative;
204
+ user-select: none;
205
+ vertical-align: top;
206
+ font-size: 1rem;
207
+ cursor: pointer;
208
+ outline: 0px;
209
+ text-align: center;
210
+ }
211
+
212
+ .leksy-editor-resize-item svg {
213
+ width: 15px;
214
+ }
215
+
216
+ .leksy-editor-resize-item:hover {
217
+ background-color: lightgrey;
218
+ border: pink;
219
+ }
220
+
221
+ .leksy-editor-resize-item:hover::after {
222
+ opacity: 1;
223
+ visibility: visible;
224
+ }
225
+
226
+ .leksy-editor-resize-item::after {
227
+ content: attr(data-title);
228
+ position: absolute;
229
+ opacity: 0;
230
+ visibility: hidden;
231
+ transition: opacity 0.3s, visibility 0.3s;
232
+ background-color: gray;
233
+ box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
234
+ color: black;
235
+ padding: 5px 10px;
236
+ border-radius: 5px;
237
+ bottom: -90%;
238
+ left: 60%;
239
+ transform: translateX(-50%);
240
+ white-space: nowrap;
241
+ z-index: 1;
242
+ pointer-events: none;
243
+ font-size: 0.875rem;
244
+ }
245
+
246
+ .leksy-editor-dropdown-content {
247
+ display: none;
248
+ position: absolute;
249
+ min-width: 160px;
250
+ box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
251
+ border-radius: 6px;
252
+ overflow: hidden;
253
+ padding: 4px;
254
+ z-index: 2000;
255
+ background-color: white;
256
+ }
257
+
258
+ .leksy-editor-dropdown-content>button {
259
+ display: block;
260
+ width: 100%;
261
+ margin: 0;
262
+ text-align: left;
263
+ padding: 8px 16px;
264
+ cursor: pointer;
265
+ white-space: nowrap;
266
+ transition: .3s;
267
+ border-radius: 6px;
268
+ }
269
+
270
+ .leksy-editor-dropdown-content>button:hover {
271
+ background-color: #28a745;
272
+ color: #fff;
273
+ }
274
+
275
+ .leksy-editor-dropdown-content.gallery {
276
+ width: 266px;
277
+ height: 350px;
278
+ padding: 0;
279
+ overflow-y: auto;
280
+ }
281
+
282
+ .leksy-editor-dropdown-content.gallery img {
283
+ width: 100%;
284
+ }
285
+
286
+ .leksy-editor-dropdown-content.gallery input {
287
+ width: 100%;
288
+ line-height: 1.5rem;
289
+ padding: 2px 8px;
290
+ border: 1px solid #ccc;
291
+ border-radius: 6px;
292
+ transition: all 0.3s ease-in-out;
293
+ box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
294
+ font-size: 14px;
295
+ position: sticky;
296
+ top: 0;
297
+ }
298
+
299
+ .leksy-editor-dropdown-content.gallery input:focus {
300
+ border-color: #4592ff;
301
+ box-shadow: 0px 4px 8px rgba(69, 146, 255, 0.3);
302
+ outline: none;
303
+ }
304
+
305
+
306
+ .leksy-editor-dropdown-content.category {
307
+ width: 300px;
308
+ height: 350px;
309
+ padding: 6px;
310
+ overflow-y: auto;
311
+ user-select: none;
312
+ }
313
+
314
+ .leksy-editor-dropdown-content.category div {
315
+ font-weight: bold;
316
+ margin-top: 8px;
317
+ margin-bottom: 4px;
318
+ }
319
+
320
+ .leksy-editor-dropdown-content.category span {
321
+ padding: 4px;
322
+ cursor: pointer;
323
+ }
324
+
325
+ .leksy-editor-dropdown-content.mention {
326
+ width: 250px;
327
+ height: 350px;
328
+ padding: 6px;
329
+ overflow-y: auto;
330
+ user-select: none;
331
+ }
332
+
333
+ .leksy-editor-dropdown-content.mention input {
334
+ width: 100%;
335
+ line-height: 1.5rem;
336
+ margin: 4px 0;
337
+ }
338
+
339
+ .leksy-editor-dropdown-content.mention button {
340
+ display: block;
341
+ width: 100%;
342
+ margin: 0;
343
+ text-align: left;
344
+ padding: 8px 16px;
345
+ cursor: pointer;
346
+ white-space: nowrap;
347
+ }
348
+
349
+ .leksy-editor-dropdown-content.mention button:hover {
350
+ background-color: green;
351
+ }
352
+
353
+ .leksy-editor-popover-content {
354
+ display: none;
355
+ position: absolute;
356
+ min-width: 160px;
357
+ box-shadow: 0 0 10px 0 grey;
358
+ border-radius: 6px;
359
+ padding: 4px;
360
+ z-index: 2000;
361
+ background-color: white;
362
+ }
363
+
364
+ .leksy-editor-codeview {
365
+ flex: 1 1 auto;
366
+ padding: 4px;
367
+ background-color: #1f1f1f;
368
+ color: #74bed8;
369
+ border: 0;
370
+ outline: 0;
371
+ display: none;
372
+ resize: none;
373
+ height: 400px;
374
+ }
375
+
376
+ .leksy-editor-stepper {
377
+ height: 24px;
378
+ border-top: 1px solid black;
379
+ border-radius: 0 0 4px 4px;
380
+ background-color: ghostwhite;
381
+ padding: 2px 5px;
382
+ text-transform: uppercase;
383
+ display: flex;
384
+ justify-content: space-between;
385
+ font-size: 14px;
386
+ user-select: none;
387
+ /* Remove the last breadcrumb's slash */
388
+ }
389
+
390
+ .leksy-editor-stepper .breadcrumb {
391
+ list-style: none;
392
+ display: flex;
393
+ overflow: hidden;
394
+ justify-content: end;
395
+ }
396
+
397
+ .leksy-editor-stepper .breadcrumb li {
398
+ margin-left: 5px;
399
+ }
400
+
401
+ .leksy-editor-stepper .breadcrumb li::after {
402
+ content: ">";
403
+ margin-left: 5px;
404
+ }
405
+
406
+ .leksy-editor-stepper .breadcrumb li:last-child::after {
407
+ content: "";
408
+ }
409
+
410
+ .leksy-editor-modal {
411
+ position: fixed;
412
+ z-index: 100;
413
+ left: 0;
414
+ top: 0;
415
+ width: 100%;
416
+ height: 100%;
417
+ overflow: auto;
418
+ background-color: rgba(0, 0, 0, 0.5);
419
+ }
420
+
421
+ .leksy-editor-modal-content {
422
+ margin: 10% auto;
423
+ border: 1px solid #898f9f;
424
+ max-width: 500px;
425
+ border-radius: 12px;
426
+ }
427
+
428
+ .leksy-editor-modal-header {
429
+ padding: 1.5rem;
430
+ display: flex;
431
+ align-items: center;
432
+ justify-content: space-between;
433
+ background-color: #fff;
434
+ border-bottom: 1px solid #d4d5d8;
435
+ border-radius: 12px 12px 0 0;
436
+ overflow: hidden;
437
+ }
438
+
439
+ .leksy-editor-modal-body {
440
+ background-color: #fff;
441
+ padding: 1.5rem;
442
+ width: 100%;
443
+ }
444
+
445
+ .leksy-editor-modal-body .warning {
446
+ color: red;
447
+ }
448
+
449
+ .leksy-editor-modal-footer {
450
+ background-color: #f2f2f3;
451
+ padding: 1.5rem;
452
+ display: flex;
453
+ justify-content: flex-end;
454
+ gap: 12px;
455
+ border-radius: 0 0 12px 12px;
456
+ width: 100%;
457
+ }
458
+
459
+ .leksy-editor-modal input {
460
+ width: 100%;
461
+ font-size: 1rem;
462
+ padding: 10px 12px;
463
+ border: 1px solid #ccc;
464
+ border-radius: 6px;
465
+ outline: none;
466
+ transition: all 0.3s ease-in-out;
467
+ color: #333;
468
+ }
469
+
470
+ .leksy-editor-modal input:focus {
471
+ border-color: #4592ff;
472
+ background-color: #fff;
473
+ }
474
+
475
+ .leksy-editor-modal input::placeholder {
476
+ color: #bdbdbd;
477
+ }
478
+
479
+ .leksy-editor-modal input:hover {
480
+ border-color: #555;
481
+ }
482
+
483
+ .leksy-editor-modal button.submit {
484
+ height: 2rem;
485
+ padding: 0.75rem 1rem;
486
+ background-color: hsl(160, 100%, 35%);
487
+ border-color: hsl(160, 75%, 50%);
488
+ display: flex;
489
+ align-items: center;
490
+ justify-content: center;
491
+ flex-direction: row;
492
+ text-align: center;
493
+ text-decoration: none;
494
+ cursor: pointer;
495
+ border: 1px solid hsl(160, 100%, 40%);
496
+ border-radius: 6px;
497
+ color: hsl(0, 0%, 100%);
498
+ white-space: nowrap;
499
+ gap: 0.5rem;
500
+ transition: 500ms;
501
+ text-transform: uppercase;
502
+ font-size: 1rem;
503
+ }
504
+
505
+ /* Overlay styling */
506
+ .leksy-editor-preview-modal-overlay {
507
+ position: fixed;
508
+ top: 0;
509
+ left: 0;
510
+ width: 100%;
511
+ height: 100%;
512
+ background: rgba(0, 0, 0, 0.726);
513
+ /* Dark semi-transparent background */
514
+ display: block;
515
+ /* Hidden by default */
516
+ align-items: center;
517
+ justify-content: center;
518
+ z-index: 1000;
519
+ }
520
+
521
+ /* Modal content styling */
522
+ .leksy-editor-preview-modal-content {
523
+ height: 100%;
524
+ padding: 20px;
525
+ border-radius: 8px;
526
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
527
+ position: relative;
528
+ text-align: center;
529
+ }
530
+
531
+ /* Close button styling */
532
+ .leksy-editor-preview-modal-close {
533
+ position: absolute;
534
+ top: 10px;
535
+ right: 20px;
536
+ cursor: pointer;
537
+ color: white;
538
+ font-size: 20px;
539
+ }
540
+
541
+ .leksy-editor-preview-modal-close svg{
542
+ width: 28px;
543
+ }
544
+
545
+ /* Modal body styling */
546
+ .leksy-editor-preview-modal-body {
547
+ display: flex;
548
+ height: 100%;
549
+ width: 100%;
550
+ align-items: center;
551
+ justify-content: center;
552
+ }
553
+
554
+ .leksy-editor-preview-modal-body img {
555
+ object-fit: contain;
556
+ max-width: 90%;
557
+ max-height: 90%;
558
+ }