@squiz/formatted-text-editor 1.12.0-alpha.47 → 1.12.0-alpha.48

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/build.js CHANGED
@@ -1,7 +1,7 @@
1
1
  const esbuild = require('esbuild');
2
2
  const { sassPlugin } = require('esbuild-sass-plugin');
3
3
  const postcss = require('postcss');
4
- const tailwindcss = require('tailwindcss');
4
+ const postcssConfig = require('./postcss.config').plugins;
5
5
 
6
6
  esbuild
7
7
  .build({
@@ -12,7 +12,7 @@ esbuild
12
12
  sassPlugin({
13
13
  type: 'css',
14
14
  transform: async (source) => {
15
- const { css } = postcss(tailwindcss).process(source);
15
+ const { css } = postcss(postcssConfig).process(source);
16
16
  return css;
17
17
  },
18
18
  }),
package/lib/index.css CHANGED
@@ -1,20 +1,21 @@
1
1
  /* src/index.scss */
2
- *,
3
- ::before,
4
- ::after {
2
+ .squiz-fte-scope *,
3
+ .squiz-fte-scope ::before,
4
+ .squiz-fte-scope ::after {
5
5
  box-sizing: border-box;
6
6
  border-width: 0;
7
7
  border-style: solid;
8
8
  border-color: #ededed;
9
9
  }
10
- ::before,
11
- ::after {
10
+ .squiz-fte-scope ::before,
11
+ .squiz-fte-scope ::after {
12
12
  --tw-content: "";
13
13
  }
14
- html {
14
+ .squiz-fte-scope html {
15
15
  line-height: 1.5;
16
16
  -webkit-text-size-adjust: 100%;
17
17
  -moz-tab-size: 4;
18
+ -o-tab-size: 4;
18
19
  tab-size: 4;
19
20
  font-family:
20
21
  ui-sans-serif,
@@ -33,39 +34,40 @@ html {
33
34
  "Noto Color Emoji";
34
35
  font-feature-settings: normal;
35
36
  }
36
- body {
37
+ .squiz-fte-scope body {
37
38
  margin: 0;
38
39
  line-height: inherit;
39
40
  }
40
- hr {
41
+ .squiz-fte-scope hr {
41
42
  height: 0;
42
43
  color: inherit;
43
44
  border-top-width: 1px;
44
45
  }
45
- abbr:where([title]) {
46
+ .squiz-fte-scope abbr:where([title]) {
47
+ -webkit-text-decoration: underline dotted;
46
48
  text-decoration: underline dotted;
47
49
  }
48
- h1,
49
- h2,
50
- h3,
51
- h4,
52
- h5,
53
- h6 {
50
+ .squiz-fte-scope h1,
51
+ .squiz-fte-scope h2,
52
+ .squiz-fte-scope h3,
53
+ .squiz-fte-scope h4,
54
+ .squiz-fte-scope h5,
55
+ .squiz-fte-scope h6 {
54
56
  font-size: inherit;
55
57
  font-weight: inherit;
56
58
  }
57
- a {
59
+ .squiz-fte-scope a {
58
60
  color: inherit;
59
61
  text-decoration: inherit;
60
62
  }
61
- b,
62
- strong {
63
+ .squiz-fte-scope b,
64
+ .squiz-fte-scope strong {
63
65
  font-weight: bolder;
64
66
  }
65
- code,
66
- kbd,
67
- samp,
68
- pre {
67
+ .squiz-fte-scope code,
68
+ .squiz-fte-scope kbd,
69
+ .squiz-fte-scope samp,
70
+ .squiz-fte-scope pre {
69
71
  font-family:
70
72
  ui-monospace,
71
73
  SFMono-Regular,
@@ -77,32 +79,32 @@ pre {
77
79
  monospace;
78
80
  font-size: 1em;
79
81
  }
80
- small {
82
+ .squiz-fte-scope small {
81
83
  font-size: 80%;
82
84
  }
83
- sub,
84
- sup {
85
+ .squiz-fte-scope sub,
86
+ .squiz-fte-scope sup {
85
87
  font-size: 75%;
86
88
  line-height: 0;
87
89
  position: relative;
88
90
  vertical-align: baseline;
89
91
  }
90
- sub {
92
+ .squiz-fte-scope sub {
91
93
  bottom: -0.25em;
92
94
  }
93
- sup {
95
+ .squiz-fte-scope sup {
94
96
  top: -0.5em;
95
97
  }
96
- table {
98
+ .squiz-fte-scope table {
97
99
  text-indent: 0;
98
100
  border-color: inherit;
99
101
  border-collapse: collapse;
100
102
  }
101
- button,
102
- input,
103
- optgroup,
104
- select,
105
- textarea {
103
+ .squiz-fte-scope button,
104
+ .squiz-fte-scope input,
105
+ .squiz-fte-scope optgroup,
106
+ .squiz-fte-scope select,
107
+ .squiz-fte-scope textarea {
106
108
  font-family: inherit;
107
109
  font-size: 100%;
108
110
  font-weight: inherit;
@@ -111,111 +113,116 @@ textarea {
111
113
  margin: 0;
112
114
  padding: 0;
113
115
  }
114
- button,
115
- select {
116
+ .squiz-fte-scope button,
117
+ .squiz-fte-scope select {
116
118
  text-transform: none;
117
119
  }
118
- button,
119
- [type=button],
120
- [type=reset],
121
- [type=submit] {
120
+ .squiz-fte-scope button,
121
+ .squiz-fte-scope [type=button],
122
+ .squiz-fte-scope [type=reset],
123
+ .squiz-fte-scope [type=submit] {
122
124
  -webkit-appearance: button;
123
125
  background-color: transparent;
124
126
  background-image: none;
125
127
  }
126
- :-moz-focusring {
128
+ .squiz-fte-scope :-moz-focusring {
127
129
  outline: auto;
128
130
  }
129
- :-moz-ui-invalid {
131
+ .squiz-fte-scope :-moz-ui-invalid {
130
132
  box-shadow: none;
131
133
  }
132
- progress {
134
+ .squiz-fte-scope progress {
133
135
  vertical-align: baseline;
134
136
  }
135
- ::-webkit-inner-spin-button,
136
- ::-webkit-outer-spin-button {
137
+ .squiz-fte-scope ::-webkit-inner-spin-button,
138
+ .squiz-fte-scope ::-webkit-outer-spin-button {
137
139
  height: auto;
138
140
  }
139
- [type=search] {
141
+ .squiz-fte-scope [type=search] {
140
142
  -webkit-appearance: textfield;
141
143
  outline-offset: -2px;
142
144
  }
143
- ::-webkit-search-decoration {
145
+ .squiz-fte-scope ::-webkit-search-decoration {
144
146
  -webkit-appearance: none;
145
147
  }
146
- ::-webkit-file-upload-button {
148
+ .squiz-fte-scope ::-webkit-file-upload-button {
147
149
  -webkit-appearance: button;
148
150
  font: inherit;
149
151
  }
150
- summary {
152
+ .squiz-fte-scope summary {
151
153
  display: list-item;
152
154
  }
153
- blockquote,
154
- dl,
155
- dd,
156
- h1,
157
- h2,
158
- h3,
159
- h4,
160
- h5,
161
- h6,
162
- hr,
163
- figure,
164
- p,
165
- pre {
155
+ .squiz-fte-scope blockquote,
156
+ .squiz-fte-scope dl,
157
+ .squiz-fte-scope dd,
158
+ .squiz-fte-scope h1,
159
+ .squiz-fte-scope h2,
160
+ .squiz-fte-scope h3,
161
+ .squiz-fte-scope h4,
162
+ .squiz-fte-scope h5,
163
+ .squiz-fte-scope h6,
164
+ .squiz-fte-scope hr,
165
+ .squiz-fte-scope figure,
166
+ .squiz-fte-scope p,
167
+ .squiz-fte-scope pre {
166
168
  margin: 0;
167
169
  }
168
- fieldset {
170
+ .squiz-fte-scope fieldset {
169
171
  margin: 0;
170
172
  padding: 0;
171
173
  }
172
- legend {
174
+ .squiz-fte-scope legend {
173
175
  padding: 0;
174
176
  }
175
- ol,
176
- ul,
177
- menu {
177
+ .squiz-fte-scope ol,
178
+ .squiz-fte-scope ul,
179
+ .squiz-fte-scope menu {
178
180
  list-style: none;
179
181
  margin: 0;
180
182
  padding: 0;
181
183
  }
182
- textarea {
184
+ .squiz-fte-scope textarea {
183
185
  resize: vertical;
184
186
  }
185
- input::placeholder,
186
- textarea::placeholder {
187
+ .squiz-fte-scope input::-moz-placeholder,
188
+ .squiz-fte-scope textarea::-moz-placeholder {
187
189
  opacity: 1;
188
190
  color: #BABABA;
189
191
  }
190
- button,
191
- [role=button] {
192
+ .squiz-fte-scope input::placeholder,
193
+ .squiz-fte-scope textarea::placeholder {
194
+ opacity: 1;
195
+ color: #BABABA;
196
+ }
197
+ .squiz-fte-scope button,
198
+ .squiz-fte-scope [role=button] {
192
199
  cursor: pointer;
193
200
  }
194
- :disabled {
201
+ .squiz-fte-scope :disabled {
195
202
  cursor: default;
196
203
  }
197
- img,
198
- svg,
199
- video,
200
- canvas,
201
- audio,
202
- iframe,
203
- embed,
204
- object {
204
+ .squiz-fte-scope img,
205
+ .squiz-fte-scope svg,
206
+ .squiz-fte-scope video,
207
+ .squiz-fte-scope canvas,
208
+ .squiz-fte-scope audio,
209
+ .squiz-fte-scope iframe,
210
+ .squiz-fte-scope embed,
211
+ .squiz-fte-scope object {
205
212
  display: block;
206
213
  vertical-align: middle;
207
214
  }
208
- img,
209
- video {
215
+ .squiz-fte-scope img,
216
+ .squiz-fte-scope video {
210
217
  max-width: 100%;
211
218
  height: auto;
212
219
  }
213
- [hidden] {
220
+ .squiz-fte-scope [hidden] {
214
221
  display: none;
215
222
  }
216
- *,
217
- ::before,
218
- ::after {
223
+ .squiz-fte-scope *,
224
+ .squiz-fte-scope ::before,
225
+ .squiz-fte-scope ::after {
219
226
  --tw-border-spacing-x: 0;
220
227
  --tw-border-spacing-y: 0;
221
228
  --tw-translate-x: 0;
@@ -261,7 +268,7 @@ video {
261
268
  --tw-backdrop-saturate: ;
262
269
  --tw-backdrop-sepia: ;
263
270
  }
264
- ::backdrop {
271
+ .squiz-fte-scope ::backdrop {
265
272
  --tw-border-spacing-x: 0;
266
273
  --tw-border-spacing-y: 0;
267
274
  --tw-translate-x: 0;
@@ -307,7 +314,7 @@ video {
307
314
  --tw-backdrop-saturate: ;
308
315
  --tw-backdrop-sepia: ;
309
316
  }
310
- .sr-only {
317
+ .squiz-fte-scope .sr-only {
311
318
  position: absolute !important;
312
319
  width: 1px !important;
313
320
  height: 1px !important;
@@ -318,237 +325,239 @@ video {
318
325
  white-space: nowrap !important;
319
326
  border-width: 0 !important;
320
327
  }
321
- .pointer-events-none {
328
+ .squiz-fte-scope .pointer-events-none {
322
329
  pointer-events: none !important;
323
330
  }
324
- .fixed {
331
+ .squiz-fte-scope .fixed {
325
332
  position: fixed !important;
326
333
  }
327
- .absolute {
334
+ .squiz-fte-scope .absolute {
328
335
  position: absolute !important;
329
336
  }
330
- .relative {
337
+ .squiz-fte-scope .relative {
331
338
  position: relative !important;
332
339
  }
333
- .inset-0 {
340
+ .squiz-fte-scope .inset-0 {
334
341
  top: 0px !important;
335
342
  right: 0px !important;
336
343
  bottom: 0px !important;
337
344
  left: 0px !important;
338
345
  }
339
- .inset-y-0 {
346
+ .squiz-fte-scope .inset-y-0 {
340
347
  top: 0px !important;
341
348
  bottom: 0px !important;
342
349
  }
343
- .right-0 {
350
+ .squiz-fte-scope .right-0 {
344
351
  right: 0px !important;
345
352
  }
346
- .z-10 {
353
+ .squiz-fte-scope .z-10 {
347
354
  z-index: 10 !important;
348
355
  }
349
- .z-40 {
356
+ .squiz-fte-scope .z-40 {
350
357
  z-index: 40 !important;
351
358
  }
352
- .mx-auto {
359
+ .squiz-fte-scope .mx-auto {
353
360
  margin-left: auto !important;
354
361
  margin-right: auto !important;
355
362
  }
356
- .my-6 {
363
+ .squiz-fte-scope .my-6 {
357
364
  margin-top: 1.5rem !important;
358
365
  margin-bottom: 1.5rem !important;
359
366
  }
360
- .-mr-3 {
367
+ .squiz-fte-scope .-mr-3 {
361
368
  margin-right: -0.75rem !important;
362
369
  }
363
- .-mt-3 {
370
+ .squiz-fte-scope .-mt-3 {
364
371
  margin-top: -0.75rem !important;
365
372
  }
366
- .mb-0 {
373
+ .squiz-fte-scope .mb-0 {
367
374
  margin-bottom: 0px !important;
368
375
  }
369
- .mb-2 {
376
+ .squiz-fte-scope .mb-2 {
370
377
  margin-bottom: 0.5rem !important;
371
378
  }
372
- .ml-3 {
379
+ .squiz-fte-scope .ml-3 {
373
380
  margin-left: 0.75rem !important;
374
381
  }
375
- .ml-auto {
382
+ .squiz-fte-scope .ml-auto {
376
383
  margin-left: auto !important;
377
384
  }
378
- .mr-2 {
385
+ .squiz-fte-scope .mr-2 {
379
386
  margin-right: 0.5rem !important;
380
387
  }
381
- .mt-1 {
388
+ .squiz-fte-scope .mt-1 {
382
389
  margin-top: 0.25rem !important;
383
390
  }
384
- .block {
391
+ .squiz-fte-scope .block {
385
392
  display: block !important;
386
393
  }
387
- .inline {
394
+ .squiz-fte-scope .inline {
388
395
  display: inline !important;
389
396
  }
390
- .flex {
397
+ .squiz-fte-scope .flex {
391
398
  display: flex !important;
392
399
  }
393
- .hidden {
400
+ .squiz-fte-scope .hidden {
394
401
  display: none !important;
395
402
  }
396
- .w-169 {
403
+ .squiz-fte-scope .w-169 {
397
404
  width: 169px !important;
398
405
  }
399
- .w-full {
406
+ .squiz-fte-scope .w-full {
400
407
  width: 100% !important;
401
408
  }
402
- .w-modal-sm {
409
+ .squiz-fte-scope .w-modal-sm {
403
410
  width: 25rem !important;
404
411
  }
405
- .cursor-default {
412
+ .squiz-fte-scope .cursor-default {
406
413
  cursor: default !important;
407
414
  }
408
- .select-none {
415
+ .squiz-fte-scope .select-none {
416
+ -webkit-user-select: none !important;
417
+ -moz-user-select: none !important;
409
418
  user-select: none !important;
410
419
  }
411
- .items-center {
420
+ .squiz-fte-scope .items-center {
412
421
  align-items: center !important;
413
422
  }
414
- .divide-y > :not([hidden]) ~ :not([hidden]) {
423
+ .squiz-fte-scope .divide-y > :not([hidden]) ~ :not([hidden]) {
415
424
  --tw-divide-y-reverse: 0 !important;
416
425
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
417
426
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;
418
427
  }
419
- .overflow-auto {
428
+ .squiz-fte-scope .overflow-auto {
420
429
  overflow: auto !important;
421
430
  }
422
- .truncate {
431
+ .squiz-fte-scope .truncate {
423
432
  overflow: hidden !important;
424
433
  text-overflow: ellipsis !important;
425
434
  white-space: nowrap !important;
426
435
  }
427
- .rounded {
436
+ .squiz-fte-scope .rounded {
428
437
  border-radius: 4px !important;
429
438
  }
430
- .border-0 {
439
+ .squiz-fte-scope .border-0 {
431
440
  border-width: 0px !important;
432
441
  }
433
- .border-2 {
442
+ .squiz-fte-scope .border-2 {
434
443
  border-width: 2px !important;
435
444
  }
436
- .border-gray-300 {
445
+ .squiz-fte-scope .border-gray-300 {
437
446
  --tw-border-opacity: 1 !important;
438
447
  border-color: rgb(224 224 224 / var(--tw-border-opacity)) !important;
439
448
  }
440
- .bg-black {
449
+ .squiz-fte-scope .bg-black {
441
450
  --tw-bg-opacity: 1 !important;
442
451
  background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
443
452
  }
444
- .bg-blue-300 {
453
+ .squiz-fte-scope .bg-blue-300 {
445
454
  --tw-bg-opacity: 1 !important;
446
455
  background-color: rgb(7 116 210 / var(--tw-bg-opacity)) !important;
447
456
  }
448
- .bg-gray-100 {
457
+ .squiz-fte-scope .bg-gray-100 {
449
458
  --tw-bg-opacity: 1 !important;
450
459
  background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important;
451
460
  }
452
- .bg-gray-200 {
461
+ .squiz-fte-scope .bg-gray-200 {
453
462
  --tw-bg-opacity: 1 !important;
454
463
  background-color: rgb(237 237 237 / var(--tw-bg-opacity)) !important;
455
464
  }
456
- .bg-transparent {
465
+ .squiz-fte-scope .bg-transparent {
457
466
  background-color: transparent !important;
458
467
  }
459
- .bg-white {
468
+ .squiz-fte-scope .bg-white {
460
469
  --tw-bg-opacity: 1 !important;
461
470
  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
462
471
  }
463
- .p-6 {
472
+ .squiz-fte-scope .p-6 {
464
473
  padding: 1.5rem !important;
465
474
  }
466
- .px-3 {
475
+ .squiz-fte-scope .px-3 {
467
476
  padding-left: 0.75rem !important;
468
477
  padding-right: 0.75rem !important;
469
478
  }
470
- .py-2 {
479
+ .squiz-fte-scope .py-2 {
471
480
  padding-top: 0.5rem !important;
472
481
  padding-bottom: 0.5rem !important;
473
482
  }
474
- .pb-2 {
483
+ .squiz-fte-scope .pb-2 {
475
484
  padding-bottom: 0.5rem !important;
476
485
  }
477
- .pl-3 {
486
+ .squiz-fte-scope .pl-3 {
478
487
  padding-left: 0.75rem !important;
479
488
  }
480
- .pr-10 {
489
+ .squiz-fte-scope .pr-10 {
481
490
  padding-right: 2.5rem !important;
482
491
  }
483
- .pr-2 {
492
+ .squiz-fte-scope .pr-2 {
484
493
  padding-right: 0.5rem !important;
485
494
  }
486
- .pt-3 {
495
+ .squiz-fte-scope .pt-3 {
487
496
  padding-top: 0.75rem !important;
488
497
  }
489
- .text-heading-2 {
498
+ .squiz-fte-scope .text-heading-2 {
490
499
  font-size: 1.25rem !important;
491
500
  line-height: 1.5rem !important;
492
501
  }
493
- .text-md {
502
+ .squiz-fte-scope .text-md {
494
503
  font-size: 0.875rem !important;
495
504
  }
496
- .font-semibold {
505
+ .squiz-fte-scope .font-semibold {
497
506
  font-weight: 600 !important;
498
507
  }
499
- .italic {
508
+ .squiz-fte-scope .italic {
500
509
  font-style: italic !important;
501
510
  }
502
- .text-gray-500 {
511
+ .squiz-fte-scope .text-gray-500 {
503
512
  --tw-text-opacity: 1 !important;
504
513
  color: rgb(148 148 148 / var(--tw-text-opacity)) !important;
505
514
  }
506
- .text-gray-600 {
515
+ .squiz-fte-scope .text-gray-600 {
507
516
  --tw-text-opacity: 1 !important;
508
517
  color: rgb(112 112 112 / var(--tw-text-opacity)) !important;
509
518
  }
510
- .text-gray-700 {
519
+ .squiz-fte-scope .text-gray-700 {
511
520
  --tw-text-opacity: 1 !important;
512
521
  color: rgb(79 79 79 / var(--tw-text-opacity)) !important;
513
522
  }
514
- .text-gray-800 {
523
+ .squiz-fte-scope .text-gray-800 {
515
524
  --tw-text-opacity: 1 !important;
516
525
  color: rgb(61 61 61 / var(--tw-text-opacity)) !important;
517
526
  }
518
- .text-gray-900 {
527
+ .squiz-fte-scope .text-gray-900 {
519
528
  --tw-text-opacity: 1 !important;
520
529
  color: rgb(43 43 43 / var(--tw-text-opacity)) !important;
521
530
  }
522
- .text-white {
531
+ .squiz-fte-scope .text-white {
523
532
  --tw-text-opacity: 1 !important;
524
533
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
525
534
  }
526
- .underline {
535
+ .squiz-fte-scope .underline {
527
536
  text-decoration-line: underline !important;
528
537
  }
529
- .opacity-25 {
538
+ .squiz-fte-scope .opacity-25 {
530
539
  opacity: 0.25 !important;
531
540
  }
532
- .outline-none {
541
+ .squiz-fte-scope .outline-none {
533
542
  outline: 2px solid transparent !important;
534
543
  outline-offset: 2px !important;
535
544
  }
536
- .blur {
545
+ .squiz-fte-scope .blur {
537
546
  --tw-blur: blur(8px) !important;
538
547
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
539
548
  }
540
- .squiz-fte-form-group {
549
+ .squiz-fte-scope .squiz-fte-form-group {
541
550
  display: flex;
542
551
  flex-direction: column;
543
552
  }
544
- .squiz-fte-form-label {
553
+ .squiz-fte-scope .squiz-fte-form-label {
545
554
  margin-bottom: 0.25rem;
546
555
  font-size: 0.875rem;
547
556
  font-weight: 600;
548
557
  --tw-text-opacity: 1;
549
558
  color: rgb(112 112 112 / var(--tw-text-opacity));
550
559
  }
551
- .squiz-fte-form-control {
560
+ .squiz-fte-scope .squiz-fte-form-control {
552
561
  padding: 6px 12px;
553
562
  position: relative;
554
563
  width: 100%;
@@ -562,23 +571,27 @@ video {
562
571
  --tw-text-opacity: 1;
563
572
  color: rgb(61 61 61 / var(--tw-text-opacity));
564
573
  }
565
- .squiz-fte-form-control::placeholder {
574
+ .squiz-fte-scope .squiz-fte-form-control::-moz-placeholder {
575
+ --tw-placeholder-opacity: 1;
576
+ color: rgb(203 213 225 / var(--tw-placeholder-opacity));
577
+ }
578
+ .squiz-fte-scope .squiz-fte-form-control::placeholder {
566
579
  --tw-placeholder-opacity: 1;
567
580
  color: rgb(203 213 225 / var(--tw-placeholder-opacity));
568
581
  }
569
- .squiz-fte-form-control {
582
+ .squiz-fte-scope .squiz-fte-form-control {
570
583
  outline-width: 0px;
571
584
  }
572
- .squiz-fte-form-control:focus {
585
+ .squiz-fte-scope .squiz-fte-form-control:focus {
573
586
  --tw-border-opacity: 1;
574
587
  border-color: rgb(7 116 210 / var(--tw-border-opacity));
575
588
  outline-width: 0px;
576
589
  }
577
- .squiz-fte-form-control:focus,
578
- .squiz-fte-form-control:active {
590
+ .squiz-fte-scope .squiz-fte-form-control:focus,
591
+ .squiz-fte-scope .squiz-fte-form-control:active {
579
592
  box-shadow: none;
580
593
  }
581
- .squiz-fte-btn {
594
+ .squiz-fte-scope .squiz-fte-btn {
582
595
  border-radius: 4px;
583
596
  font-weight: 400;
584
597
  transition-property: all;
@@ -596,15 +609,15 @@ video {
596
609
  border: 1px solid transparent;
597
610
  padding: 6px 12px;
598
611
  }
599
- .squiz-fte-btn.disabled,
600
- .squiz-fte-btn[disabled] {
612
+ .squiz-fte-scope .squiz-fte-btn.disabled,
613
+ .squiz-fte-scope .squiz-fte-btn[disabled] {
601
614
  cursor: not-allowed;
602
615
  opacity: 0.5;
603
616
  }
604
- .formatted-text-editor {
617
+ .squiz-fte-scope .formatted-text-editor {
605
618
  font-family: "Open Sans" !important;
606
619
  }
607
- .formatted-text-editor.editor-wrapper {
620
+ .squiz-fte-scope .formatted-text-editor.editor-wrapper {
608
621
  margin: 0.5rem;
609
622
  border-radius: 4px;
610
623
  border-width: 2px;
@@ -614,12 +627,12 @@ video {
614
627
  --tw-bg-opacity: 1;
615
628
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
616
629
  }
617
- .formatted-text-editor .remirror-editor-wrapper {
630
+ .squiz-fte-scope .formatted-text-editor .remirror-editor-wrapper {
618
631
  padding-top: 0px;
619
632
  --tw-text-opacity: 1;
620
633
  color: rgb(112 112 112 / var(--tw-text-opacity));
621
634
  }
622
- .formatted-text-editor .remirror-editor {
635
+ .squiz-fte-scope .formatted-text-editor .remirror-editor {
623
636
  border-bottom-right-radius: 4px;
624
637
  border-bottom-left-radius: 4px;
625
638
  --tw-bg-opacity: 1;
@@ -633,14 +646,14 @@ video {
633
646
  var(--tw-shadow);
634
647
  min-height: 6rem;
635
648
  }
636
- .formatted-text-editor .remirror-editor:active,
637
- .formatted-text-editor .remirror-editor:focus {
649
+ .squiz-fte-scope .formatted-text-editor .remirror-editor:active,
650
+ .squiz-fte-scope .formatted-text-editor .remirror-editor:focus {
638
651
  outline-width: 0px;
639
652
  }
640
- .formatted-text-editor .remirror-editor p {
653
+ .squiz-fte-scope .formatted-text-editor .remirror-editor p {
641
654
  display: block;
642
655
  }
643
- .formatted-text-editor .remirror-is-empty:first-of-type::before {
656
+ .squiz-fte-scope .formatted-text-editor .remirror-is-empty:first-of-type::before {
644
657
  position: absolute;
645
658
  pointer-events: none;
646
659
  height: 0;
@@ -649,48 +662,48 @@ video {
649
662
  --tw-text-opacity: 1;
650
663
  color: rgb(148 148 148 / var(--tw-text-opacity));
651
664
  }
652
- a {
665
+ .squiz-fte-scope a {
653
666
  --tw-text-opacity: 1;
654
667
  color: rgb(7 116 210 / var(--tw-text-opacity));
655
668
  text-decoration: underline;
656
669
  }
657
- .remirror-theme h1 {
670
+ .squiz-fte-scope .remirror-theme h1 {
658
671
  font-size: 1.625rem;
659
672
  font-weight: 600;
660
673
  letter-spacing: -0.2px;
661
674
  line-height: 2rem;
662
675
  }
663
- .remirror-theme h2 {
676
+ .squiz-fte-scope .remirror-theme h2 {
664
677
  font-size: 1.25rem;
665
678
  font-weight: 600;
666
679
  letter-spacing: -0.5px;
667
680
  line-height: 1.5rem;
668
681
  }
669
- .remirror-theme h3 {
682
+ .squiz-fte-scope .remirror-theme h3 {
670
683
  font-size: 1.125rem;
671
684
  font-weight: 600;
672
685
  letter-spacing: -0.2px;
673
686
  line-height: 1.375rem;
674
687
  }
675
- .remirror-theme h4 {
688
+ .squiz-fte-scope .remirror-theme h4 {
676
689
  font-size: 1rem;
677
690
  font-weight: 700;
678
691
  letter-spacing: -0.2px;
679
692
  line-height: 1.25rem;
680
693
  }
681
- .remirror-theme h5 {
694
+ .squiz-fte-scope .remirror-theme h5 {
682
695
  font-size: 1rem;
683
696
  font-weight: 600;
684
697
  letter-spacing: -0.2px;
685
698
  line-height: 1.25rem;
686
699
  }
687
- .remirror-theme h6 {
700
+ .squiz-fte-scope .remirror-theme h6 {
688
701
  font-size: 0.875rem;
689
702
  font-weight: 600;
690
703
  letter-spacing: -0.2px;
691
704
  line-height: 1.25rem;
692
705
  }
693
- .formatted-text-editor .editor-toolbar {
706
+ .squiz-fte-scope .formatted-text-editor .editor-toolbar {
694
707
  border-bottom-width: 2px;
695
708
  border-style: solid;
696
709
  --tw-border-opacity: 1;
@@ -701,10 +714,10 @@ a {
701
714
  display: flex;
702
715
  justify-items: center;
703
716
  }
704
- .formatted-text-editor .editor-toolbar > *:not(:first-child) {
717
+ .squiz-fte-scope .formatted-text-editor .editor-toolbar > *:not(:first-child) {
705
718
  margin: 0 0 0 2px;
706
719
  }
707
- .formatted-text-editor .editor-toolbar .editor-divider {
720
+ .squiz-fte-scope .formatted-text-editor .editor-toolbar .editor-divider {
708
721
  margin-top: -0.25rem;
709
722
  margin-bottom: -0.25rem;
710
723
  margin-left: 0.25rem;
@@ -729,28 +742,28 @@ a {
729
742
  var(--tw-ring-shadow, 0 0 #0000),
730
743
  var(--tw-shadow);
731
744
  }
732
- .toolbar-button {
745
+ .squiz-fte-scope .toolbar-button {
733
746
  --tw-bg-opacity: 1;
734
747
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
735
748
  padding: 0.25rem;
736
749
  --tw-text-opacity: 1;
737
750
  color: rgb(112 112 112 / var(--tw-text-opacity));
738
751
  }
739
- .toolbar-button ~ .toolbar-button {
752
+ .squiz-fte-scope .toolbar-button ~ .toolbar-button {
740
753
  margin-left: 2px;
741
754
  }
742
- .toolbar-button:hover,
743
- .toolbar-button:focus {
755
+ .squiz-fte-scope .toolbar-button:hover,
756
+ .squiz-fte-scope .toolbar-button:focus {
744
757
  background-color: rgba(0, 0, 0, 0.04);
745
758
  }
746
- .toolbar-button.is-active,
747
- .toolbar-button:active {
759
+ .squiz-fte-scope .toolbar-button.is-active,
760
+ .squiz-fte-scope .toolbar-button:active {
748
761
  --tw-bg-opacity: 1;
749
762
  background-color: rgb(230 241 250 / var(--tw-bg-opacity));
750
763
  --tw-text-opacity: 1;
751
764
  color: rgb(7 116 210 / var(--tw-text-opacity));
752
765
  }
753
- .toolbar-dropdown__button {
766
+ .squiz-fte-scope .toolbar-dropdown__button {
754
767
  display: flex;
755
768
  align-items: center;
756
769
  font-family:
@@ -765,20 +778,20 @@ a {
765
778
  height: 2rem;
766
779
  padding-left: 0.5rem;
767
780
  }
768
- .toolbar-dropdown__button:active,
769
- .toolbar-dropdown__button:hover,
770
- .toolbar-dropdown__button:focus {
781
+ .squiz-fte-scope .toolbar-dropdown__button:active,
782
+ .squiz-fte-scope .toolbar-dropdown__button:hover,
783
+ .squiz-fte-scope .toolbar-dropdown__button:focus {
771
784
  background-color: rgba(0, 0, 0, 0.04);
772
785
  }
773
- .toolbar-dropdown__button .toolbar-dropdown__label {
786
+ .squiz-fte-scope .toolbar-dropdown__button .toolbar-dropdown__label {
774
787
  display: inline-flex;
775
788
  width: 7rem;
776
789
  }
777
- .toolbar-dropdown__button .toolbar-dropdown__icon {
790
+ .squiz-fte-scope .toolbar-dropdown__button .toolbar-dropdown__icon {
778
791
  width: 1rem;
779
792
  height: 1.5rem;
780
793
  }
781
- .toolbar-dropdown__menu {
794
+ .squiz-fte-scope .toolbar-dropdown__menu {
782
795
  border-radius: 4px;
783
796
  border-width: 1px;
784
797
  --tw-border-opacity: 1;
@@ -792,7 +805,7 @@ a {
792
805
  position: absolute;
793
806
  margin-top: 0.75rem;
794
807
  }
795
- .dropdown-button {
808
+ .squiz-fte-scope .dropdown-button {
796
809
  padding-left: 0.5rem;
797
810
  padding-right: 0.5rem;
798
811
  padding-top: 0.25rem;
@@ -805,11 +818,11 @@ a {
805
818
  align-items: center;
806
819
  display: flex;
807
820
  }
808
- .dropdown-button:hover,
809
- .dropdown-button:focus {
821
+ .squiz-fte-scope .dropdown-button:hover,
822
+ .squiz-fte-scope .dropdown-button:focus {
810
823
  background-color: rgba(0, 0, 0, 0.04);
811
824
  }
812
- .squiz-fte-modal {
825
+ .squiz-fte-scope .squiz-fte-modal {
813
826
  display: flex;
814
827
  width: 100%;
815
828
  flex-direction: column;
@@ -828,7 +841,7 @@ a {
828
841
  var(--tw-shadow);
829
842
  border-radius: 8px;
830
843
  }
831
- .squiz-fte-modal-wrapper {
844
+ .squiz-fte-scope .squiz-fte-modal-wrapper {
832
845
  position: fixed;
833
846
  top: 0px;
834
847
  right: 0px;
@@ -843,29 +856,29 @@ a {
843
856
  outline: 2px solid transparent;
844
857
  outline-offset: 2px;
845
858
  }
846
- .squiz-fte-modal-wrapper:focus {
859
+ .squiz-fte-scope .squiz-fte-modal-wrapper:focus {
847
860
  outline: 2px solid transparent;
848
861
  outline-offset: 2px;
849
862
  }
850
- .squiz-fte-modal-header {
863
+ .squiz-fte-scope .squiz-fte-modal-header {
851
864
  display: flex;
852
865
  align-items: flex-start;
853
866
  justify-content: space-between;
854
867
  }
855
- .squiz-fte-modal-content {
868
+ .squiz-fte-scope .squiz-fte-modal-content {
856
869
  position: relative;
857
870
  flex: 1 1 auto;
858
871
  padding-left: 1.5rem;
859
872
  padding-right: 1.5rem;
860
873
  }
861
- .squiz-fte-modal-footer {
874
+ .squiz-fte-scope .squiz-fte-modal-footer {
862
875
  display: flex;
863
876
  align-items: center;
864
877
  justify-content: flex-end;
865
878
  border-bottom-right-radius: 4px;
866
879
  border-bottom-left-radius: 4px;
867
880
  }
868
- .squiz-fte-modal-footer__button {
881
+ .squiz-fte-scope .squiz-fte-modal-footer__button {
869
882
  font-size: 0.875rem;
870
883
  border-radius: 4px;
871
884
  font-weight: 400;
@@ -884,28 +897,28 @@ a {
884
897
  border: 1px solid transparent;
885
898
  padding: 6px 12px;
886
899
  }
887
- .squiz-fte-modal-footer__button.disabled,
888
- .squiz-fte-modal-footer__button[disabled] {
900
+ .squiz-fte-scope .squiz-fte-modal-footer__button.disabled,
901
+ .squiz-fte-scope .squiz-fte-modal-footer__button[disabled] {
889
902
  cursor: not-allowed;
890
903
  opacity: 0.5;
891
904
  }
892
- .hover\:bg-blue-400:hover {
905
+ .squiz-fte-scope .hover\:bg-blue-400:hover {
893
906
  --tw-bg-opacity: 1 !important;
894
907
  background-color: rgb(4 73 133 / var(--tw-bg-opacity)) !important;
895
908
  }
896
- .hover\:bg-gray-100:hover {
909
+ .squiz-fte-scope .hover\:bg-gray-100:hover {
897
910
  --tw-bg-opacity: 1 !important;
898
911
  background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important;
899
912
  }
900
- .hover\:bg-gray-300:hover {
913
+ .squiz-fte-scope .hover\:bg-gray-300:hover {
901
914
  --tw-bg-opacity: 1 !important;
902
915
  background-color: rgb(224 224 224 / var(--tw-bg-opacity)) !important;
903
916
  }
904
- .focus\:border-blue-300:focus {
917
+ .squiz-fte-scope .focus\:border-blue-300:focus {
905
918
  --tw-border-opacity: 1 !important;
906
919
  border-color: rgb(7 116 210 / var(--tw-border-opacity)) !important;
907
920
  }
908
- .focus\:outline-none:focus {
921
+ .squiz-fte-scope .focus\:outline-none:focus {
909
922
  outline: 2px solid transparent !important;
910
923
  outline-offset: 2px !important;
911
924
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@squiz/formatted-text-editor",
3
- "version": "1.12.0-alpha.47",
3
+ "version": "1.12.0-alpha.48",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "scripts": {
@@ -19,8 +19,7 @@
19
19
  "@headlessui/react": "1.7.11",
20
20
  "@mui/icons-material": "5.11.0",
21
21
  "@remirror/react": "2.0.25",
22
- "clsx": "1.2.1",
23
- "postcss-prefix-selector": "1.16.0"
22
+ "clsx": "1.2.1"
24
23
  },
25
24
  "devDependencies": {
26
25
  "@testing-library/cypress": "9.0.0",
@@ -39,6 +38,7 @@
39
38
  "jest-environment-jsdom": "29.4.1",
40
39
  "postcss": "8.4.21",
41
40
  "postcss-nested": "6.0.0",
41
+ "postcss-prefix-selector": "1.16.0",
42
42
  "react": "18.2.0",
43
43
  "react-dom": "18.2.0",
44
44
  "rimraf": "4.1.2",
@@ -64,5 +64,5 @@
64
64
  "volta": {
65
65
  "node": "16.19.0"
66
66
  },
67
- "gitHead": "6a305101ee36591caeb87336490fe6530dc69a07"
67
+ "gitHead": "d0a4a127426d3bd50e04e7028f9efed57d66c71f"
68
68
  }
package/postcss.config.js CHANGED
@@ -6,6 +6,7 @@ module.exports = {
6
6
  require('postcss-prefix-selector')({
7
7
  prefix: '.squiz-fte-scope',
8
8
  exclude: ['.squiz-fte-scope__floating-popover'],
9
+ includeFiles: ['./src/index.scss'],
9
10
  }),
10
11
  ],
11
12
  };