@squiz/formatted-text-editor 1.12.0-alpha.37 → 1.12.0-alpha.39

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,11 +1,21 @@
1
1
  const esbuild = require('esbuild');
2
2
  const { sassPlugin } = require('esbuild-sass-plugin');
3
+ const postcss = require('postcss');
4
+ const tailwindcss = require('tailwindcss');
3
5
 
4
6
  esbuild
5
7
  .build({
6
8
  entryPoints: ['src/index.scss'],
7
9
  bundle: true,
8
10
  outdir: 'lib',
9
- plugins: [sassPlugin({ type: 'css' })],
11
+ plugins: [
12
+ sassPlugin({
13
+ type: 'css',
14
+ transform: async (source) => {
15
+ const { css } = postcss(tailwindcss).process(source);
16
+ return css;
17
+ },
18
+ }),
19
+ ],
10
20
  })
11
21
  .catch(() => process.exit(1));
package/lib/index.css CHANGED
@@ -863,13 +863,6 @@ button:active .remirror-menu-pane-shortcut,
863
863
  text-shadow: none;
864
864
  background: #dfe2f1;
865
865
  }
866
- .remirror-base16-ateliersulphurpool-light pre[class*=language-]::-moz-selection,
867
- .remirror-base16-ateliersulphurpool-light pre[class*=language-] ::-moz-selection,
868
- .remirror-base16-ateliersulphurpool-light code[class*=language-]::-moz-selection,
869
- .remirror-base16-ateliersulphurpool-light code[class*=language-] ::-moz-selection {
870
- text-shadow: none;
871
- background: #dfe2f1;
872
- }
873
866
  .remirror-base16-ateliersulphurpool-light pre[class*=language-]::selection,
874
867
  .remirror-base16-ateliersulphurpool-light pre[class*=language-] ::selection,
875
868
  .remirror-base16-ateliersulphurpool-light code[class*=language-]::selection,
@@ -1137,13 +1130,6 @@ button:active .remirror-menu-pane-shortcut,
1137
1130
  color: inherit;
1138
1131
  background: rgba(33, 66, 131, 0.85);
1139
1132
  }
1140
- .remirror-darcula pre[class*=language-]::-moz-selection,
1141
- .remirror-darcula pre[class*=language-] ::-moz-selection,
1142
- .remirror-darcula code[class*=language-]::-moz-selection,
1143
- .remirror-darcula code[class*=language-] ::-moz-selection {
1144
- color: inherit;
1145
- background: rgba(33, 66, 131, 0.85);
1146
- }
1147
1133
  .remirror-darcula pre[class*=language-]::selection,
1148
1134
  .remirror-darcula pre[class*=language-] ::selection,
1149
1135
  .remirror-darcula code[class*=language-]::selection,
@@ -1385,13 +1371,6 @@ button:active .remirror-menu-pane-shortcut,
1385
1371
  text-shadow: none;
1386
1372
  background: #6a51e6;
1387
1373
  }
1388
- .remirror-duotone-dark pre[class*=language-]::-moz-selection,
1389
- .remirror-duotone-dark pre[class*=language-] ::-moz-selection,
1390
- .remirror-duotone-dark code[class*=language-]::-moz-selection,
1391
- .remirror-duotone-dark code[class*=language-] ::-moz-selection {
1392
- text-shadow: none;
1393
- background: #6a51e6;
1394
- }
1395
1374
  .remirror-duotone-dark pre[class*=language-]::selection,
1396
1375
  .remirror-duotone-dark pre[class*=language-] ::selection,
1397
1376
  .remirror-duotone-dark code[class*=language-]::selection,
@@ -1535,13 +1514,6 @@ button:active .remirror-menu-pane-shortcut,
1535
1514
  text-shadow: none;
1536
1515
  background: #6f5849;
1537
1516
  }
1538
- .remirror-duotone-earth pre[class*=language-]::-moz-selection,
1539
- .remirror-duotone-earth pre[class*=language-] ::-moz-selection,
1540
- .remirror-duotone-earth code[class*=language-]::-moz-selection,
1541
- .remirror-duotone-earth code[class*=language-] ::-moz-selection {
1542
- text-shadow: none;
1543
- background: #6f5849;
1544
- }
1545
1517
  .remirror-duotone-earth pre[class*=language-]::selection,
1546
1518
  .remirror-duotone-earth pre[class*=language-] ::selection,
1547
1519
  .remirror-duotone-earth code[class*=language-]::selection,
@@ -1685,13 +1657,6 @@ button:active .remirror-menu-pane-shortcut,
1685
1657
  text-shadow: none;
1686
1658
  background: #435643;
1687
1659
  }
1688
- .remirror-duotone-forest pre[class*=language-]::-moz-selection,
1689
- .remirror-duotone-forest pre[class*=language-] ::-moz-selection,
1690
- .remirror-duotone-forest code[class*=language-]::-moz-selection,
1691
- .remirror-duotone-forest code[class*=language-] ::-moz-selection {
1692
- text-shadow: none;
1693
- background: #435643;
1694
- }
1695
1660
  .remirror-duotone-forest pre[class*=language-]::selection,
1696
1661
  .remirror-duotone-forest pre[class*=language-] ::selection,
1697
1662
  .remirror-duotone-forest code[class*=language-]::selection,
@@ -1835,13 +1800,6 @@ button:active .remirror-menu-pane-shortcut,
1835
1800
  text-shadow: none;
1836
1801
  background: #faf8f5;
1837
1802
  }
1838
- .remirror-duotone-light pre[class*=language-]::-moz-selection,
1839
- .remirror-duotone-light pre[class*=language-] ::-moz-selection,
1840
- .remirror-duotone-light code[class*=language-]::-moz-selection,
1841
- .remirror-duotone-light code[class*=language-] ::-moz-selection {
1842
- text-shadow: none;
1843
- background: #faf8f5;
1844
- }
1845
1803
  .remirror-duotone-light pre[class*=language-]::selection,
1846
1804
  .remirror-duotone-light pre[class*=language-] ::selection,
1847
1805
  .remirror-duotone-light code[class*=language-]::selection,
@@ -1985,13 +1943,6 @@ button:active .remirror-menu-pane-shortcut,
1985
1943
  text-shadow: none;
1986
1944
  background: #004a9e;
1987
1945
  }
1988
- .remirror-duotone-sea pre[class*=language-]::-moz-selection,
1989
- .remirror-duotone-sea pre[class*=language-] ::-moz-selection,
1990
- .remirror-duotone-sea code[class*=language-]::-moz-selection,
1991
- .remirror-duotone-sea code[class*=language-] ::-moz-selection {
1992
- text-shadow: none;
1993
- background: #004a9e;
1994
- }
1995
1946
  .remirror-duotone-sea pre[class*=language-]::selection,
1996
1947
  .remirror-duotone-sea pre[class*=language-] ::selection,
1997
1948
  .remirror-duotone-sea code[class*=language-]::selection,
@@ -2135,13 +2086,6 @@ button:active .remirror-menu-pane-shortcut,
2135
2086
  text-shadow: none;
2136
2087
  background: #5151e6;
2137
2088
  }
2138
- .remirror-duotone-space pre[class*=language-]::-moz-selection,
2139
- .remirror-duotone-space pre[class*=language-] ::-moz-selection,
2140
- .remirror-duotone-space code[class*=language-]::-moz-selection,
2141
- .remirror-duotone-space code[class*=language-] ::-moz-selection {
2142
- text-shadow: none;
2143
- background: #5151e6;
2144
- }
2145
2089
  .remirror-duotone-space pre[class*=language-]::selection,
2146
2090
  .remirror-duotone-space pre[class*=language-] ::selection,
2147
2091
  .remirror-duotone-space code[class*=language-]::selection,
@@ -2274,12 +2218,6 @@ button:active .remirror-menu-pane-shortcut,
2274
2218
  .remirror-gh-colors code[class*=language-] ::-moz-selection {
2275
2219
  background: #b3d4fc;
2276
2220
  }
2277
- .remirror-gh-colors pre[class*=language-]::-moz-selection,
2278
- .remirror-gh-colors pre[class*=language-] ::-moz-selection,
2279
- .remirror-gh-colors code[class*=language-]::-moz-selection,
2280
- .remirror-gh-colors code[class*=language-] ::-moz-selection {
2281
- background: #b3d4fc;
2282
- }
2283
2221
  .remirror-gh-colors pre[class*=language-]::selection,
2284
2222
  .remirror-gh-colors pre[class*=language-] ::selection,
2285
2223
  .remirror-gh-colors code[class*=language-]::selection,
@@ -2596,12 +2534,6 @@ button:active .remirror-menu-pane-shortcut,
2596
2534
  .remirror-vs code[class*=language-] ::-moz-selection {
2597
2535
  background: #c1def1;
2598
2536
  }
2599
- .remirror-vs pre[class*=language-]::-moz-selection,
2600
- .remirror-vs pre[class*=language-] ::-moz-selection,
2601
- .remirror-vs code[class*=language-]::-moz-selection,
2602
- .remirror-vs code[class*=language-] ::-moz-selection {
2603
- background: #c1def1;
2604
- }
2605
2537
  .remirror-vs pre[class*=language-]::selection,
2606
2538
  .remirror-vs pre[class*=language-] ::selection,
2607
2539
  .remirror-vs code[class*=language-]::selection,
@@ -2731,8 +2663,6 @@ button:active .remirror-menu-pane-shortcut,
2731
2663
  border-radius: 4px;
2732
2664
  border: 1px solid #e1e1e8;
2733
2665
  overflow: auto;
2734
- }
2735
- .remirror-xonokai pre[class*=language-] {
2736
2666
  position: relative;
2737
2667
  }
2738
2668
  .remirror-xonokai pre[class*=language-] code {
@@ -3766,30 +3696,751 @@ button:active .remirror-menu-pane-shortcut,
3766
3696
  }
3767
3697
 
3768
3698
  /* src/index.scss */
3769
- @tailwind base;
3770
- @tailwind components;
3771
- @tailwind utilities;
3699
+ *,
3700
+ ::before,
3701
+ ::after {
3702
+ box-sizing: border-box;
3703
+ border-width: 0;
3704
+ border-style: solid;
3705
+ border-color: #ededed;
3706
+ }
3707
+ ::before,
3708
+ ::after {
3709
+ --tw-content: "";
3710
+ }
3711
+ html {
3712
+ line-height: 1.5;
3713
+ -webkit-text-size-adjust: 100%;
3714
+ -moz-tab-size: 4;
3715
+ tab-size: 4;
3716
+ font-family:
3717
+ ui-sans-serif,
3718
+ system-ui,
3719
+ -apple-system,
3720
+ BlinkMacSystemFont,
3721
+ "Segoe UI",
3722
+ Roboto,
3723
+ "Helvetica Neue",
3724
+ Arial,
3725
+ "Noto Sans",
3726
+ sans-serif,
3727
+ "Apple Color Emoji",
3728
+ "Segoe UI Emoji",
3729
+ "Segoe UI Symbol",
3730
+ "Noto Color Emoji";
3731
+ font-feature-settings: normal;
3732
+ }
3733
+ body {
3734
+ margin: 0;
3735
+ line-height: inherit;
3736
+ }
3737
+ hr {
3738
+ height: 0;
3739
+ color: inherit;
3740
+ border-top-width: 1px;
3741
+ }
3742
+ abbr:where([title]) {
3743
+ text-decoration: underline dotted;
3744
+ }
3745
+ h1,
3746
+ h2,
3747
+ h3,
3748
+ h4,
3749
+ h5,
3750
+ h6 {
3751
+ font-size: inherit;
3752
+ font-weight: inherit;
3753
+ }
3754
+ a {
3755
+ color: inherit;
3756
+ text-decoration: inherit;
3757
+ }
3758
+ b,
3759
+ strong {
3760
+ font-weight: bolder;
3761
+ }
3762
+ code,
3763
+ kbd,
3764
+ samp,
3765
+ pre {
3766
+ font-family:
3767
+ ui-monospace,
3768
+ SFMono-Regular,
3769
+ Menlo,
3770
+ Monaco,
3771
+ Consolas,
3772
+ "Liberation Mono",
3773
+ "Courier New",
3774
+ monospace;
3775
+ font-size: 1em;
3776
+ }
3777
+ small {
3778
+ font-size: 80%;
3779
+ }
3780
+ sub,
3781
+ sup {
3782
+ font-size: 75%;
3783
+ line-height: 0;
3784
+ position: relative;
3785
+ vertical-align: baseline;
3786
+ }
3787
+ sub {
3788
+ bottom: -0.25em;
3789
+ }
3790
+ sup {
3791
+ top: -0.5em;
3792
+ }
3793
+ table {
3794
+ text-indent: 0;
3795
+ border-color: inherit;
3796
+ border-collapse: collapse;
3797
+ }
3798
+ button,
3799
+ input,
3800
+ optgroup,
3801
+ select,
3802
+ textarea {
3803
+ font-family: inherit;
3804
+ font-size: 100%;
3805
+ font-weight: inherit;
3806
+ line-height: inherit;
3807
+ color: inherit;
3808
+ margin: 0;
3809
+ padding: 0;
3810
+ }
3811
+ button,
3812
+ select {
3813
+ text-transform: none;
3814
+ }
3815
+ button,
3816
+ [type=button],
3817
+ [type=reset],
3818
+ [type=submit] {
3819
+ -webkit-appearance: button;
3820
+ background-color: transparent;
3821
+ background-image: none;
3822
+ }
3823
+ :-moz-focusring {
3824
+ outline: auto;
3825
+ }
3826
+ :-moz-ui-invalid {
3827
+ box-shadow: none;
3828
+ }
3829
+ progress {
3830
+ vertical-align: baseline;
3831
+ }
3832
+ ::-webkit-inner-spin-button,
3833
+ ::-webkit-outer-spin-button {
3834
+ height: auto;
3835
+ }
3836
+ [type=search] {
3837
+ -webkit-appearance: textfield;
3838
+ outline-offset: -2px;
3839
+ }
3840
+ ::-webkit-search-decoration {
3841
+ -webkit-appearance: none;
3842
+ }
3843
+ ::-webkit-file-upload-button {
3844
+ -webkit-appearance: button;
3845
+ font: inherit;
3846
+ }
3847
+ summary {
3848
+ display: list-item;
3849
+ }
3850
+ blockquote,
3851
+ dl,
3852
+ dd,
3853
+ h1,
3854
+ h2,
3855
+ h3,
3856
+ h4,
3857
+ h5,
3858
+ h6,
3859
+ hr,
3860
+ figure,
3861
+ p,
3862
+ pre {
3863
+ margin: 0;
3864
+ }
3865
+ fieldset {
3866
+ margin: 0;
3867
+ padding: 0;
3868
+ }
3869
+ legend {
3870
+ padding: 0;
3871
+ }
3872
+ ol,
3873
+ ul,
3874
+ menu {
3875
+ list-style: none;
3876
+ margin: 0;
3877
+ padding: 0;
3878
+ }
3879
+ textarea {
3880
+ resize: vertical;
3881
+ }
3882
+ input::placeholder,
3883
+ textarea::placeholder {
3884
+ opacity: 1;
3885
+ color: #9CA3AF;
3886
+ }
3887
+ button,
3888
+ [role=button] {
3889
+ cursor: pointer;
3890
+ }
3891
+ :disabled {
3892
+ cursor: default;
3893
+ }
3894
+ img,
3895
+ svg,
3896
+ video,
3897
+ canvas,
3898
+ audio,
3899
+ iframe,
3900
+ embed,
3901
+ object {
3902
+ display: block;
3903
+ vertical-align: middle;
3904
+ }
3905
+ img,
3906
+ video {
3907
+ max-width: 100%;
3908
+ height: auto;
3909
+ }
3910
+ [hidden] {
3911
+ display: none;
3912
+ }
3913
+ [type=text],
3914
+ [type=email],
3915
+ [type=url],
3916
+ [type=password],
3917
+ [type=number],
3918
+ [type=date],
3919
+ [type=datetime-local],
3920
+ [type=month],
3921
+ [type=search],
3922
+ [type=tel],
3923
+ [type=time],
3924
+ [type=week],
3925
+ [multiple],
3926
+ textarea,
3927
+ select {
3928
+ appearance: none;
3929
+ background-color: #fff;
3930
+ border-color: #6B7280;
3931
+ border-width: 1px;
3932
+ border-radius: 0px;
3933
+ padding-top: 0.5rem;
3934
+ padding-right: 0.75rem;
3935
+ padding-bottom: 0.5rem;
3936
+ padding-left: 0.75rem;
3937
+ font-size: 1rem;
3938
+ line-height: 1.5rem;
3939
+ --tw-shadow: 0 0 #0000;
3940
+ }
3941
+ [type=text]:focus,
3942
+ [type=email]:focus,
3943
+ [type=url]:focus,
3944
+ [type=password]:focus,
3945
+ [type=number]:focus,
3946
+ [type=date]:focus,
3947
+ [type=datetime-local]:focus,
3948
+ [type=month]:focus,
3949
+ [type=search]:focus,
3950
+ [type=tel]:focus,
3951
+ [type=time]:focus,
3952
+ [type=week]:focus,
3953
+ [multiple]:focus,
3954
+ textarea:focus,
3955
+ select:focus {
3956
+ outline: 2px solid transparent;
3957
+ outline-offset: 2px;
3958
+ --tw-ring-inset: var(--tw-empty, );
3959
+ --tw-ring-offset-width: 0px;
3960
+ --tw-ring-offset-color: #fff;
3961
+ --tw-ring-color: #1C64F2;
3962
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
3963
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
3964
+ box-shadow:
3965
+ var(--tw-ring-offset-shadow),
3966
+ var(--tw-ring-shadow),
3967
+ var(--tw-shadow);
3968
+ border-color: #1C64F2;
3969
+ }
3970
+ input::placeholder,
3971
+ textarea::placeholder {
3972
+ color: #6B7280;
3973
+ opacity: 1;
3974
+ }
3975
+ ::-webkit-datetime-edit-fields-wrapper {
3976
+ padding: 0;
3977
+ }
3978
+ ::-webkit-date-and-time-value {
3979
+ min-height: 1.5em;
3980
+ }
3981
+ select:not([size]) {
3982
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
3983
+ background-position: right 0.5rem center;
3984
+ background-repeat: no-repeat;
3985
+ background-size: 1.5em 1.5em;
3986
+ padding-right: 2.5rem;
3987
+ print-color-adjust: exact;
3988
+ }
3989
+ [multiple] {
3990
+ background-image: initial;
3991
+ background-position: initial;
3992
+ background-repeat: unset;
3993
+ background-size: initial;
3994
+ padding-right: 0.75rem;
3995
+ print-color-adjust: unset;
3996
+ }
3997
+ [type=checkbox],
3998
+ [type=radio] {
3999
+ appearance: none;
4000
+ padding: 0;
4001
+ print-color-adjust: exact;
4002
+ display: inline-block;
4003
+ vertical-align: middle;
4004
+ background-origin: border-box;
4005
+ user-select: none;
4006
+ flex-shrink: 0;
4007
+ height: 1rem;
4008
+ width: 1rem;
4009
+ color: #1C64F2;
4010
+ background-color: #fff;
4011
+ border-color: #6B7280;
4012
+ border-width: 1px;
4013
+ --tw-shadow: 0 0 #0000;
4014
+ }
4015
+ [type=checkbox] {
4016
+ border-radius: 0px;
4017
+ }
4018
+ [type=radio] {
4019
+ border-radius: 100%;
4020
+ }
4021
+ [type=checkbox]:focus,
4022
+ [type=radio]:focus {
4023
+ outline: 2px solid transparent;
4024
+ outline-offset: 2px;
4025
+ --tw-ring-inset: var(--tw-empty, );
4026
+ --tw-ring-offset-width: 2px;
4027
+ --tw-ring-offset-color: #fff;
4028
+ --tw-ring-color: #1C64F2;
4029
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
4030
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
4031
+ box-shadow:
4032
+ var(--tw-ring-offset-shadow),
4033
+ var(--tw-ring-shadow),
4034
+ var(--tw-shadow);
4035
+ }
4036
+ [type=checkbox]:checked,
4037
+ [type=radio]:checked,
4038
+ .dark [type=checkbox]:checked,
4039
+ .dark [type=radio]:checked {
4040
+ border-color: transparent;
4041
+ background-color: currentColor;
4042
+ background-size: 100% 100%;
4043
+ background-position: center;
4044
+ background-repeat: no-repeat;
4045
+ }
4046
+ [type=checkbox]:checked {
4047
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
4048
+ }
4049
+ [type=radio]:checked {
4050
+ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
4051
+ }
4052
+ [type=checkbox]:indeterminate {
4053
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
4054
+ border-color: transparent;
4055
+ background-color: currentColor;
4056
+ background-size: 100% 100%;
4057
+ background-position: center;
4058
+ background-repeat: no-repeat;
4059
+ }
4060
+ [type=checkbox]:indeterminate:hover,
4061
+ [type=checkbox]:indeterminate:focus {
4062
+ border-color: transparent;
4063
+ background-color: currentColor;
4064
+ }
4065
+ [type=file] {
4066
+ background: unset;
4067
+ border-color: inherit;
4068
+ border-width: 0;
4069
+ border-radius: 0;
4070
+ padding: 0;
4071
+ font-size: unset;
4072
+ line-height: inherit;
4073
+ }
4074
+ [type=file]:focus {
4075
+ outline: 1px auto inherit;
4076
+ }
4077
+ input[type=file]::file-selector-button {
4078
+ color: white;
4079
+ background: #1F2937;
4080
+ border: 0;
4081
+ font-weight: 500;
4082
+ font-size: 0.8125rem;
4083
+ cursor: pointer;
4084
+ padding-top: 0.625rem;
4085
+ padding-bottom: 0.625rem;
4086
+ padding-left: 2rem;
4087
+ padding-right: 1rem;
4088
+ margin-inline-start: -1rem;
4089
+ margin-inline-end: 1rem;
4090
+ }
4091
+ input[type=file]::file-selector-button:hover {
4092
+ background: #374151;
4093
+ }
4094
+ input[type=range]::-webkit-slider-thumb {
4095
+ height: 1.25rem;
4096
+ width: 1.25rem;
4097
+ background: #1C64F2;
4098
+ border-radius: 9999px;
4099
+ border: 0;
4100
+ appearance: none;
4101
+ -moz-appearance: none;
4102
+ -webkit-appearance: none;
4103
+ cursor: pointer;
4104
+ }
4105
+ input[type=range]:disabled::-webkit-slider-thumb {
4106
+ background: #9CA3AF;
4107
+ }
4108
+ input[type=range]:focus::-webkit-slider-thumb {
4109
+ outline: 2px solid transparent;
4110
+ outline-offset: 2px;
4111
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
4112
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
4113
+ box-shadow:
4114
+ var(--tw-ring-offset-shadow),
4115
+ var(--tw-ring-shadow),
4116
+ var(--tw-shadow, 0 0 #0000);
4117
+ --tw-ring-opacity: 1px;
4118
+ --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
4119
+ }
4120
+ input[type=range]::-moz-range-thumb {
4121
+ height: 1.25rem;
4122
+ width: 1.25rem;
4123
+ background: #1C64F2;
4124
+ border-radius: 9999px;
4125
+ border: 0;
4126
+ appearance: none;
4127
+ -moz-appearance: none;
4128
+ -webkit-appearance: none;
4129
+ cursor: pointer;
4130
+ }
4131
+ input[type=range]:disabled::-moz-range-thumb {
4132
+ background: #9CA3AF;
4133
+ }
4134
+ input[type=range]::-moz-range-progress {
4135
+ background: #3F83F8;
4136
+ }
4137
+ input[type=range]::-ms-fill-lower {
4138
+ background: #3F83F8;
4139
+ }
4140
+ [data-popper-arrow],
4141
+ [data-popper-arrow]:before {
4142
+ position: absolute;
4143
+ width: 8px;
4144
+ height: 8px;
4145
+ background: inherit;
4146
+ }
4147
+ [data-popper-arrow] {
4148
+ visibility: hidden;
4149
+ }
4150
+ [data-popper-arrow]:before {
4151
+ content: "";
4152
+ visibility: visible;
4153
+ transform: rotate(45deg);
4154
+ }
4155
+ [data-popper-arrow]:after {
4156
+ content: "";
4157
+ visibility: visible;
4158
+ transform: rotate(45deg);
4159
+ position: absolute;
4160
+ width: 9px;
4161
+ height: 9px;
4162
+ background: inherit;
4163
+ }
4164
+ [role=tooltip] > [data-popper-arrow]:before {
4165
+ border-style: solid;
4166
+ border-color: #e5e7eb;
4167
+ }
4168
+ [role=tooltip] > [data-popper-arrow]:after {
4169
+ border-style: solid;
4170
+ border-color: #e5e7eb;
4171
+ }
4172
+ [data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow]:before {
4173
+ border-bottom-width: 1px;
4174
+ border-right-width: 1px;
4175
+ }
4176
+ [data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow]:after {
4177
+ border-bottom-width: 1px;
4178
+ border-right-width: 1px;
4179
+ }
4180
+ [data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow]:before {
4181
+ border-bottom-width: 1px;
4182
+ border-left-width: 1px;
4183
+ }
4184
+ [data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow]:after {
4185
+ border-bottom-width: 1px;
4186
+ border-left-width: 1px;
4187
+ }
4188
+ [data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow]:before {
4189
+ border-top-width: 1px;
4190
+ border-left-width: 1px;
4191
+ }
4192
+ [data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow]:after {
4193
+ border-top-width: 1px;
4194
+ border-left-width: 1px;
4195
+ }
4196
+ [data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow]:before {
4197
+ border-top-width: 1px;
4198
+ border-right-width: 1px;
4199
+ }
4200
+ [data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow]:after {
4201
+ border-top-width: 1px;
4202
+ border-right-width: 1px;
4203
+ }
4204
+ [data-popover][role=tooltip][data-popper-placement^=top] > [data-popper-arrow] {
4205
+ bottom: -5px;
4206
+ }
4207
+ [data-popover][role=tooltip][data-popper-placement^=bottom] > [data-popper-arrow] {
4208
+ top: -5px;
4209
+ }
4210
+ [data-popover][role=tooltip][data-popper-placement^=left] > [data-popper-arrow] {
4211
+ right: -5px;
4212
+ }
4213
+ [data-popover][role=tooltip][data-popper-placement^=right] > [data-popper-arrow] {
4214
+ left: -5px;
4215
+ }
4216
+ *,
4217
+ ::before,
4218
+ ::after {
4219
+ --tw-border-spacing-x: 0;
4220
+ --tw-border-spacing-y: 0;
4221
+ --tw-translate-x: 0;
4222
+ --tw-translate-y: 0;
4223
+ --tw-rotate: 0;
4224
+ --tw-skew-x: 0;
4225
+ --tw-skew-y: 0;
4226
+ --tw-scale-x: 1;
4227
+ --tw-scale-y: 1;
4228
+ --tw-pan-x: ;
4229
+ --tw-pan-y: ;
4230
+ --tw-pinch-zoom: ;
4231
+ --tw-scroll-snap-strictness: proximity;
4232
+ --tw-ordinal: ;
4233
+ --tw-slashed-zero: ;
4234
+ --tw-numeric-figure: ;
4235
+ --tw-numeric-spacing: ;
4236
+ --tw-numeric-fraction: ;
4237
+ --tw-ring-inset: ;
4238
+ --tw-ring-offset-width: 0px;
4239
+ --tw-ring-offset-color: #fff;
4240
+ --tw-ring-color: rgb(63 131 248 / 0.5);
4241
+ --tw-ring-offset-shadow: 0 0 #0000;
4242
+ --tw-ring-shadow: 0 0 #0000;
4243
+ --tw-shadow: 0 0 #0000;
4244
+ --tw-shadow-colored: 0 0 #0000;
4245
+ --tw-blur: ;
4246
+ --tw-brightness: ;
4247
+ --tw-contrast: ;
4248
+ --tw-grayscale: ;
4249
+ --tw-hue-rotate: ;
4250
+ --tw-invert: ;
4251
+ --tw-saturate: ;
4252
+ --tw-sepia: ;
4253
+ --tw-drop-shadow: ;
4254
+ --tw-backdrop-blur: ;
4255
+ --tw-backdrop-brightness: ;
4256
+ --tw-backdrop-contrast: ;
4257
+ --tw-backdrop-grayscale: ;
4258
+ --tw-backdrop-hue-rotate: ;
4259
+ --tw-backdrop-invert: ;
4260
+ --tw-backdrop-opacity: ;
4261
+ --tw-backdrop-saturate: ;
4262
+ --tw-backdrop-sepia: ;
4263
+ }
4264
+ ::backdrop {
4265
+ --tw-border-spacing-x: 0;
4266
+ --tw-border-spacing-y: 0;
4267
+ --tw-translate-x: 0;
4268
+ --tw-translate-y: 0;
4269
+ --tw-rotate: 0;
4270
+ --tw-skew-x: 0;
4271
+ --tw-skew-y: 0;
4272
+ --tw-scale-x: 1;
4273
+ --tw-scale-y: 1;
4274
+ --tw-pan-x: ;
4275
+ --tw-pan-y: ;
4276
+ --tw-pinch-zoom: ;
4277
+ --tw-scroll-snap-strictness: proximity;
4278
+ --tw-ordinal: ;
4279
+ --tw-slashed-zero: ;
4280
+ --tw-numeric-figure: ;
4281
+ --tw-numeric-spacing: ;
4282
+ --tw-numeric-fraction: ;
4283
+ --tw-ring-inset: ;
4284
+ --tw-ring-offset-width: 0px;
4285
+ --tw-ring-offset-color: #fff;
4286
+ --tw-ring-color: rgb(63 131 248 / 0.5);
4287
+ --tw-ring-offset-shadow: 0 0 #0000;
4288
+ --tw-ring-shadow: 0 0 #0000;
4289
+ --tw-shadow: 0 0 #0000;
4290
+ --tw-shadow-colored: 0 0 #0000;
4291
+ --tw-blur: ;
4292
+ --tw-brightness: ;
4293
+ --tw-contrast: ;
4294
+ --tw-grayscale: ;
4295
+ --tw-hue-rotate: ;
4296
+ --tw-invert: ;
4297
+ --tw-saturate: ;
4298
+ --tw-sepia: ;
4299
+ --tw-drop-shadow: ;
4300
+ --tw-backdrop-blur: ;
4301
+ --tw-backdrop-brightness: ;
4302
+ --tw-backdrop-contrast: ;
4303
+ --tw-backdrop-grayscale: ;
4304
+ --tw-backdrop-hue-rotate: ;
4305
+ --tw-backdrop-invert: ;
4306
+ --tw-backdrop-opacity: ;
4307
+ --tw-backdrop-saturate: ;
4308
+ --tw-backdrop-sepia: ;
4309
+ }
4310
+ .z-10 {
4311
+ z-index: 10;
4312
+ }
4313
+ .block {
4314
+ display: block;
4315
+ }
4316
+ .inline {
4317
+ display: inline;
4318
+ }
4319
+ .hidden {
4320
+ display: none;
4321
+ }
4322
+ .w-169 {
4323
+ width: 169px;
4324
+ }
4325
+ .divide-y > :not([hidden]) ~ :not([hidden]) {
4326
+ --tw-divide-y-reverse: 0;
4327
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
4328
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
4329
+ }
4330
+ .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
4331
+ --tw-divide-opacity: 1;
4332
+ border-color: rgb(243 244 246 / var(--tw-divide-opacity));
4333
+ }
4334
+ .rounded-lg {
4335
+ border-radius: 0.5rem;
4336
+ }
4337
+ .bg-white {
4338
+ --tw-bg-opacity: 1;
4339
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4340
+ }
4341
+ .italic {
4342
+ font-style: italic;
4343
+ }
4344
+ .underline {
4345
+ text-decoration-line: underline;
4346
+ }
4347
+ .shadow {
4348
+ --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12);
4349
+ --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 12px 4px var(--tw-shadow-color);
4350
+ box-shadow:
4351
+ var(--tw-ring-offset-shadow, 0 0 #0000),
4352
+ var(--tw-ring-shadow, 0 0 #0000),
4353
+ var(--tw-shadow);
4354
+ }
4355
+ .formatted-text-editor {
4356
+ font-family: "Open Sans" !important;
4357
+ }
3772
4358
  .formatted-text-editor.editor-wrapper {
3773
- @apply bg-white rounded border-gray-300 border-2 border-solid;
4359
+ border-radius: 4px;
4360
+ border-width: 2px;
4361
+ border-style: solid;
4362
+ --tw-border-opacity: 1;
4363
+ border-color: rgb(224 224 224 / var(--tw-border-opacity));
4364
+ --tw-bg-opacity: 1;
4365
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
3774
4366
  }
3775
4367
  .formatted-text-editor .remirror-editor-wrapper {
3776
- @apply text-gray-600 pt-0;
4368
+ padding-top: 0px;
4369
+ --tw-text-opacity: 1;
4370
+ color: rgb(112 112 112 / var(--tw-text-opacity));
3777
4371
  }
3778
4372
  .formatted-text-editor .remirror-editor {
3779
- @apply bg-white shadow-none rounded-b;
4373
+ border-bottom-right-radius: 4px;
4374
+ border-bottom-left-radius: 4px;
4375
+ --tw-bg-opacity: 1;
4376
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4377
+ --tw-shadow: 0 0 #0000;
4378
+ --tw-shadow-colored: 0 0 #0000;
4379
+ box-shadow:
4380
+ var(--tw-ring-offset-shadow, 0 0 #0000),
4381
+ var(--tw-ring-shadow, 0 0 #0000),
4382
+ var(--tw-shadow);
3780
4383
  }
3781
4384
  .formatted-text-editor .remirror-editor:active,
3782
4385
  .formatted-text-editor .remirror-editor :focus {
3783
4386
  }
3784
4387
  .formatted-text-editor .remirror-editor p {
3785
- @apply block;
4388
+ display: block;
3786
4389
  }
3787
4390
  .remirror-theme .ProseMirror:active,
3788
4391
  .remirror-theme .ProseMirror:focus {
3789
- @apply shadow-none;
4392
+ --tw-shadow: 0 0 #0000;
4393
+ --tw-shadow-colored: 0 0 #0000;
4394
+ box-shadow:
4395
+ var(--tw-ring-offset-shadow, 0 0 #0000),
4396
+ var(--tw-ring-shadow, 0 0 #0000),
4397
+ var(--tw-shadow);
4398
+ }
4399
+ .remirror-theme h1 {
4400
+ font-size: 1.625rem;
4401
+ font-weight: 600;
4402
+ letter-spacing: -0.2px;
4403
+ line-height: 2rem;
4404
+ }
4405
+ .remirror-theme h2 {
4406
+ font-size: 1.25rem;
4407
+ font-weight: 600;
4408
+ letter-spacing: -0.5px;
4409
+ line-height: 1.5rem;
4410
+ }
4411
+ .remirror-theme h3 {
4412
+ font-size: 1.125rem;
4413
+ font-weight: 600;
4414
+ letter-spacing: -0.2px;
4415
+ line-height: 1.375rem;
4416
+ }
4417
+ .remirror-theme h4 {
4418
+ font-size: 1rem;
4419
+ font-weight: 700;
4420
+ letter-spacing: -0.2px;
4421
+ line-height: 1.25rem;
4422
+ }
4423
+ .remirror-theme h5 {
4424
+ font-size: 1rem;
4425
+ font-weight: 600;
4426
+ letter-spacing: -0.2px;
4427
+ line-height: 1.25rem;
4428
+ }
4429
+ .remirror-theme h6 {
4430
+ font-size: 0.875rem;
4431
+ font-weight: 600;
4432
+ letter-spacing: -0.2px;
4433
+ line-height: 1.25rem;
3790
4434
  }
3791
4435
  .formatted-text-editor .editor-toolbar {
3792
- @apply bg-white rounded border-gray-200 border-2 border-solid p-1;
4436
+ border-radius: 4px;
4437
+ border-width: 2px;
4438
+ border-style: solid;
4439
+ --tw-border-opacity: 1;
4440
+ border-color: rgb(237 237 237 / var(--tw-border-opacity));
4441
+ --tw-bg-opacity: 1;
4442
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4443
+ padding: 0.25rem;
3793
4444
  display: flex;
3794
4445
  justify-items: center;
3795
4446
  }
@@ -3797,14 +4448,31 @@ button:active .remirror-menu-pane-shortcut,
3797
4448
  margin: 0 0 0 2px;
3798
4449
  }
3799
4450
  .formatted-text-editor .editor-toolbar .editor-divider {
3800
- @apply -my-1 mx-1 border;
4451
+ margin-top: -0.25rem;
4452
+ margin-bottom: -0.25rem;
4453
+ margin-left: 0.25rem;
4454
+ margin-right: 0.25rem;
4455
+ border-width: 1px;
3801
4456
  margin-right: 2px;
3802
4457
  }
3803
4458
  .remirror-floating-popover {
3804
- @apply bg-white border-gray-200 p-1 rounded-md shadow border;
4459
+ border-radius: 6px;
4460
+ border-width: 1px;
4461
+ --tw-border-opacity: 1;
4462
+ border-color: rgb(237 237 237 / var(--tw-border-opacity));
4463
+ --tw-bg-opacity: 1;
4464
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4465
+ padding: 0.25rem;
4466
+ --tw-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12);
4467
+ --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 1px 12px 4px var(--tw-shadow-color);
4468
+ box-shadow:
4469
+ var(--tw-ring-offset-shadow, 0 0 #0000),
4470
+ var(--tw-ring-shadow, 0 0 #0000),
4471
+ var(--tw-shadow);
3805
4472
  }
3806
4473
  .btn {
3807
- @apply font-normal rounded;
4474
+ border-radius: 4px;
4475
+ font-weight: 400;
3808
4476
  display: flex;
3809
4477
  align-items: center;
3810
4478
  text-align: center;
@@ -3823,42 +4491,62 @@ button:active .remirror-menu-pane-shortcut,
3823
4491
  .btn.disabled,
3824
4492
  .btn[disabled] {
3825
4493
  cursor: not-allowed;
3826
- @apply opacity-50;
4494
+ opacity: 0.5;
3827
4495
  }
3828
4496
  .toolbar-button {
3829
- @apply bg-white text-gray-600 p-1;
4497
+ --tw-bg-opacity: 1;
4498
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
4499
+ padding: 0.25rem;
4500
+ --tw-text-opacity: 1;
4501
+ color: rgb(112 112 112 / var(--tw-text-opacity));
3830
4502
  }
3831
4503
  .toolbar-button ~ .toolbar-button {
3832
4504
  margin-left: 2px;
3833
4505
  }
3834
4506
  .toolbar-button.is-active,
3835
4507
  .toolbar-button:active {
3836
- @apply text-blue-300 bg-blue-100;
4508
+ --tw-bg-opacity: 1;
4509
+ background-color: rgb(230 241 250 / var(--tw-bg-opacity));
4510
+ --tw-text-opacity: 1;
4511
+ color: rgb(7 116 210 / var(--tw-text-opacity));
3837
4512
  }
3838
- .toolbar-dropdown {
4513
+ .toolbar-dropdown__button {
4514
+ font-family:
4515
+ Open Sans,
4516
+ Arial,
4517
+ sans-serif;
4518
+ font-size: 0.875rem;
4519
+ font-weight: 600;
4520
+ --tw-text-opacity: 1;
4521
+ color: rgb(112 112 112 / var(--tw-text-opacity));
3839
4522
  align-self: center;
3840
- }
3841
- .toolbar-dropdown .toolbar-dropdown__button {
3842
- @apply font-base text-md font-semibold text-gray-600;
3843
4523
  height: 2rem;
3844
4524
  padding-left: 0.5rem;
3845
4525
  }
3846
- .toolbar-dropdown .toolbar-dropdown__button:active,
3847
- .toolbar-dropdown .toolbar-dropdown__button:hover,
3848
- .toolbar-dropdown .toolbar-dropdown__button:focus {
4526
+ .toolbar-dropdown__button:active,
4527
+ .toolbar-dropdown__button:hover,
4528
+ .toolbar-dropdown__button:focus {
3849
4529
  background-color: rgba(0, 0, 0, 0.04);
3850
4530
  }
3851
- .toolbar-dropdown .toolbar-dropdown__button .toolbar-dropdown__label {
3852
- padding-right: 0.25rem;
4531
+ .toolbar-dropdown__button .toolbar-dropdown__label {
4532
+ display: inline-flex;
4533
+ width: 7rem;
3853
4534
  }
3854
- .toolbar-dropdown .toolbar-dropdown__button .toolbar-dropdown__icon {
4535
+ .toolbar-dropdown__button .toolbar-dropdown__icon {
3855
4536
  width: 1rem;
3856
4537
  height: 1.5rem;
3857
4538
  }
4539
+ .toolbar-dropdown__menu {
4540
+ inset: 0rem auto auto 1rem !important;
4541
+ }
3858
4542
  .dropdown-button {
3859
- height: 2.5rem;
3860
- padding: 0.25rem 0.5rem;
3861
- justify-content: space-between;
3862
- border-radius: 0;
4543
+ padding: 4px 8px;
4544
+ color: #707070;
4545
+ height: 40px;
3863
4546
  width: 100%;
4547
+ justify-content: space-between;
4548
+ }
4549
+ .dark .dark\:bg-gray-700 {
4550
+ --tw-bg-opacity: 1;
4551
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
3864
4552
  }
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import CheckIcon from '@mui/icons-material/Check';
3
3
  const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }) => {
4
4
  return (React.createElement("button", { "aria-label": label, title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
5
- children || label,
5
+ React.createElement("span", null, children || label),
6
6
  isActive && React.createElement(CheckIcon, { className: "dropdown-button-icon" })));
7
7
  };
8
8
  export default DropdownButton;
@@ -1,3 +1,4 @@
1
+ import 'flowbite';
1
2
  type ToolbarDropdownProps = {
2
3
  children: JSX.Element | JSX.Element[];
3
4
  label: string;
@@ -1,13 +1,12 @@
1
1
  import React from 'react';
2
- import { Menu } from '@headlessui/react';
3
2
  import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
3
+ import 'flowbite';
4
4
  const ToolbarDropdown = ({ children, label }) => {
5
- return (React.createElement(Menu, { as: "div", className: "toolbar-dropdown" },
6
- React.createElement("div", null,
7
- React.createElement(Menu.Button, { className: "toolbar-dropdown__button" },
8
- React.createElement("span", { className: "toolbar-dropdown__label" }, label),
9
- React.createElement(ExpandMoreIcon, { className: "toolbar-dropdown__icon", "aria-hidden": "true" }))),
10
- React.createElement(Menu.Items, { className: "fixed left-20 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-md " },
11
- React.createElement("div", { className: "py-1" }, children))));
5
+ return (React.createElement(React.Fragment, null,
6
+ React.createElement("button", { id: "dropdownHoverButton", "data-dropdown-toggle": "dropdown", className: "toolbar-dropdown__button", type: "button" },
7
+ React.createElement("span", { className: "toolbar-dropdown__label" }, label),
8
+ React.createElement(ExpandMoreIcon, { className: "toolbar-dropdown__icon", "aria-hidden": "true" })),
9
+ React.createElement("div", { id: "dropdown", className: "toolbar-dropdown__menu z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700" },
10
+ React.createElement("ul", { "aria-labelledby": "dropdownHoverButton" }, children))));
12
11
  };
13
12
  export default ToolbarDropdown;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@squiz/formatted-text-editor",
3
- "version": "1.12.0-alpha.37",
3
+ "version": "1.12.0-alpha.39",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "scripts": {
@@ -16,9 +16,9 @@
16
16
  "test:e2e": "vite build && vite preview --port 8080 & cypress open"
17
17
  },
18
18
  "dependencies": {
19
- "@headlessui/react": "^1.7.10",
20
19
  "@mui/icons-material": "5.11.0",
21
- "@remirror/react": "2.0.25"
20
+ "@remirror/react": "2.0.25",
21
+ "flowbite": "^1.6.3"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@testing-library/cypress": "9.0.0",
@@ -61,5 +61,5 @@
61
61
  "volta": {
62
62
  "node": "16.19.0"
63
63
  },
64
- "gitHead": "0f193852ffb9b6123830b1b5d4cd1b64d5495c4f"
64
+ "gitHead": "cfb46042a71dbebfa5f7f98459d99b84c2da9bed"
65
65
  }
@@ -92,7 +92,7 @@ describe('Formatted text editor', () => {
92
92
 
93
93
  expect(baseElement.querySelector('div.remirror-editor h1')).toBeFalsy();
94
94
 
95
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
95
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
96
96
  expect(headingDropdown).toBeTruthy();
97
97
  fireEvent.click(headingDropdown);
98
98
 
@@ -109,7 +109,7 @@ describe('Formatted text editor', () => {
109
109
 
110
110
  expect(baseElement.querySelector('div.remirror-editor h2')).toBeFalsy();
111
111
 
112
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
112
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
113
113
  expect(headingDropdown).toBeTruthy();
114
114
  fireEvent.click(headingDropdown);
115
115
 
@@ -126,7 +126,7 @@ describe('Formatted text editor', () => {
126
126
 
127
127
  expect(baseElement.querySelector('div.remirror-editor h3')).toBeFalsy();
128
128
 
129
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
129
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
130
130
  expect(headingDropdown).toBeTruthy();
131
131
  fireEvent.click(headingDropdown);
132
132
 
@@ -143,7 +143,7 @@ describe('Formatted text editor', () => {
143
143
 
144
144
  expect(baseElement.querySelector('div.remirror-editor h4')).toBeFalsy();
145
145
 
146
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
146
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
147
147
  expect(headingDropdown).toBeTruthy();
148
148
  fireEvent.click(headingDropdown);
149
149
 
@@ -160,7 +160,7 @@ describe('Formatted text editor', () => {
160
160
 
161
161
  expect(baseElement.querySelector('div.remirror-editor h5')).toBeFalsy();
162
162
 
163
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
163
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
164
164
  expect(headingDropdown).toBeTruthy();
165
165
  fireEvent.click(headingDropdown);
166
166
 
@@ -177,7 +177,7 @@ describe('Formatted text editor', () => {
177
177
 
178
178
  expect(baseElement.querySelector('div.remirror-editor h6')).toBeFalsy();
179
179
 
180
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
180
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
181
181
  expect(headingDropdown).toBeTruthy();
182
182
  fireEvent.click(headingDropdown);
183
183
 
@@ -194,7 +194,7 @@ describe('Formatted text editor', () => {
194
194
 
195
195
  expect(baseElement.querySelector('div.remirror-editor pre')).toBeFalsy();
196
196
 
197
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
197
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
198
198
  expect(headingDropdown).toBeTruthy();
199
199
  fireEvent.click(headingDropdown);
200
200
 
@@ -211,7 +211,7 @@ describe('Formatted text editor', () => {
211
211
 
212
212
  expect(baseElement.querySelectorAll('div.remirror-editor p')).toHaveLength(1);
213
213
 
214
- const headingDropdown = baseElement.querySelector('.toolbar-dropdown button') as HTMLButtonElement;
214
+ const headingDropdown = baseElement.querySelector('.toolbar-dropdown__button') as HTMLButtonElement;
215
215
  expect(headingDropdown).toBeTruthy();
216
216
  fireEvent.click(headingDropdown);
217
217
 
@@ -1,4 +1,6 @@
1
1
  .formatted-text-editor {
2
+ font-family: 'Open Sans' !important;
3
+
2
4
  &.editor-wrapper {
3
5
  @apply bg-white rounded border-gray-300 border-2 border-solid;
4
6
  }
@@ -29,3 +31,45 @@
29
31
  @apply shadow-none;
30
32
  }
31
33
  }
34
+
35
+ .remirror-theme h1 {
36
+ font-size: 1.625rem;
37
+ font-weight: 600;
38
+ letter-spacing: -0.2px;
39
+ line-height: 2rem;
40
+ }
41
+
42
+ .remirror-theme h2 {
43
+ font-size: 1.25rem;
44
+ font-weight: 600;
45
+ letter-spacing: -0.5px;
46
+ line-height: 1.5rem;
47
+ }
48
+
49
+ .remirror-theme h3 {
50
+ font-size: 1.125rem;
51
+ font-weight: 600;
52
+ letter-spacing: -0.2px;
53
+ line-height: 1.375rem;
54
+ }
55
+
56
+ .remirror-theme h4 {
57
+ font-size: 1rem;
58
+ font-weight: 700;
59
+ letter-spacing: -0.2px;
60
+ line-height: 1.25rem;
61
+ }
62
+
63
+ .remirror-theme h5 {
64
+ font-size: 1rem;
65
+ font-weight: 600;
66
+ letter-spacing: -0.2px;
67
+ line-height: 1.25rem;
68
+ }
69
+
70
+ .remirror-theme h6 {
71
+ font-size: 0.875rem;
72
+ font-weight: 600;
73
+ letter-spacing: -0.2px;
74
+ line-height: 1.25rem;
75
+ }
@@ -19,7 +19,7 @@ const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }
19
19
  disabled={isDisabled}
20
20
  className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
21
21
  >
22
- {children || label}
22
+ <span>{children || label}</span>
23
23
  {isActive && <CheckIcon className="dropdown-button-icon" />}
24
24
  </button>
25
25
  );
@@ -1,7 +1,7 @@
1
1
  .dropdown-button {
2
- height: 2.5rem;
3
- padding: 0.25rem 0.5rem;
4
- justify-content: space-between;
5
- border-radius: 0;
2
+ padding: 4px 8px;
3
+ color: #707070;
4
+ height: 40px;
6
5
  width: 100%;
6
+ justify-content: space-between;
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import { Menu } from '@headlessui/react';
3
2
  import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
3
+ import 'flowbite';
4
4
 
5
5
  type ToolbarDropdownProps = {
6
6
  children: JSX.Element | JSX.Element[];
@@ -9,18 +9,23 @@ type ToolbarDropdownProps = {
9
9
 
10
10
  const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
11
11
  return (
12
- <Menu as="div" className="toolbar-dropdown">
13
- <div>
14
- <Menu.Button className="toolbar-dropdown__button">
15
- <span className="toolbar-dropdown__label">{label}</span>
16
- <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
17
- </Menu.Button>
12
+ <>
13
+ <button
14
+ id="dropdownHoverButton"
15
+ data-dropdown-toggle="dropdown"
16
+ className="toolbar-dropdown__button"
17
+ type="button"
18
+ >
19
+ <span className="toolbar-dropdown__label">{label}</span>
20
+ <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
21
+ </button>
22
+ <div
23
+ id="dropdown"
24
+ className="toolbar-dropdown__menu z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700"
25
+ >
26
+ <ul aria-labelledby="dropdownHoverButton">{children}</ul>
18
27
  </div>
19
-
20
- <Menu.Items className="fixed left-20 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-md ">
21
- <div className="py-1">{children}</div>
22
- </Menu.Items>
23
- </Menu>
28
+ </>
24
29
  );
25
30
  };
26
31
 
@@ -1,25 +1,27 @@
1
- .toolbar-dropdown {
1
+ .toolbar-dropdown__button {
2
+ @apply font-base text-md font-semibold text-gray-600;
2
3
  align-self: center;
3
4
 
4
- .toolbar-dropdown__button {
5
- @apply font-base text-md font-semibold text-gray-600;
5
+ height: 2rem;
6
+ padding-left: 0.5rem;
6
7
 
7
- height: 2rem;
8
- padding-left: 0.5rem;
9
-
10
- &:active,
11
- &:hover,
12
- &:focus {
13
- background-color: rgba(black, 0.04);
14
- }
8
+ &:active,
9
+ &:hover,
10
+ &:focus {
11
+ background-color: rgba(black, 0.04);
12
+ }
15
13
 
16
- .toolbar-dropdown__label {
17
- padding-right: 0.25rem;
18
- }
14
+ .toolbar-dropdown__label {
15
+ display: inline-flex;
16
+ width: 7rem;
17
+ }
19
18
 
20
- .toolbar-dropdown__icon {
21
- width: 1rem;
22
- height: 1.5rem;
23
- }
19
+ .toolbar-dropdown__icon {
20
+ width: 1rem;
21
+ height: 1.5rem;
24
22
  }
25
23
  }
24
+
25
+ .toolbar-dropdown__menu {
26
+ inset: 0rem auto auto 1rem !important;
27
+ }
@@ -1,6 +1,6 @@
1
1
  /** @type {import('tailwindcss').Config} */
2
2
  module.exports = {
3
- content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
3
+ content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
4
4
  theme: {
5
5
  extend: {
6
6
  borderRadius: {
@@ -40,6 +40,7 @@ module.exports = {
40
40
  6: '1.5rem', // 24px
41
41
  7: '1.75rem', // 28px
42
42
  8: '2rem', // 32px
43
+ 169: '169px', // 169px
43
44
  },
44
45
  colors: {
45
46
  gray: {
@@ -57,5 +58,5 @@ module.exports = {
57
58
  },
58
59
  },
59
60
  },
60
- plugins: [],
61
+ plugins: [require('flowbite/plugin')],
61
62
  };