@squiz/formatted-text-editor 1.12.0-alpha.40 → 1.12.0-alpha.9

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 (83) hide show
  1. package/README.md +56 -18
  2. package/lib/Editor/Editor.js +9 -3
  3. package/lib/EditorToolbar/EditorToolbar.js +1 -9
  4. package/lib/index.css +94 -800
  5. package/package.json +8 -12
  6. package/.eslintrc.json +0 -34
  7. package/CHANGELOG.md +0 -48
  8. package/build.js +0 -21
  9. package/cypress/e2e/bold.spec.cy.ts +0 -18
  10. package/cypress/global.d.ts +0 -9
  11. package/cypress/support/commands.ts +0 -130
  12. package/cypress/support/e2e.ts +0 -20
  13. package/cypress/tsconfig.json +0 -8
  14. package/cypress.config.ts +0 -7
  15. package/demo/App.tsx +0 -12
  16. package/demo/index.html +0 -13
  17. package/demo/index.scss +0 -1
  18. package/demo/main.tsx +0 -10
  19. package/demo/public/favicon-dxp.svg +0 -3
  20. package/demo/vite-env.d.ts +0 -1
  21. package/file-transformer.js +0 -1
  22. package/jest.config.ts +0 -27
  23. package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts +0 -2
  24. package/lib/EditorToolbar/Tools/Redo/RedoButton.js +0 -16
  25. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts +0 -5
  26. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +0 -32
  27. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts +0 -2
  28. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +0 -17
  29. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts +0 -2
  30. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +0 -16
  31. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts +0 -2
  32. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +0 -35
  33. package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts +0 -2
  34. package/lib/EditorToolbar/Tools/Undo/UndoButton.js +0 -16
  35. package/lib/Extensions/Extensions.d.ts +0 -3
  36. package/lib/Extensions/Extensions.js +0 -13
  37. package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +0 -10
  38. package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +0 -46
  39. package/lib/ui/DropdownButton/DropdownButton.d.ts +0 -9
  40. package/lib/ui/DropdownButton/DropdownButton.js +0 -8
  41. package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +0 -7
  42. package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +0 -12
  43. package/postcss.config.js +0 -3
  44. package/src/Editor/Editor.mock.tsx +0 -40
  45. package/src/Editor/Editor.spec.tsx +0 -254
  46. package/src/Editor/Editor.tsx +0 -32
  47. package/src/Editor/_editor.scss +0 -75
  48. package/src/EditorToolbar/EditorToolbar.tsx +0 -51
  49. package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +0 -19
  50. package/src/EditorToolbar/Tools/Bold/BoldButton.tsx +0 -30
  51. package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +0 -19
  52. package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx +0 -30
  53. package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx +0 -59
  54. package/src/EditorToolbar/Tools/Redo/RedoButton.tsx +0 -30
  55. package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx +0 -31
  56. package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx +0 -31
  57. package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx +0 -31
  58. package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx +0 -31
  59. package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx +0 -21
  60. package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx +0 -52
  61. package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx +0 -26
  62. package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx +0 -30
  63. package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx +0 -44
  64. package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +0 -19
  65. package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx +0 -30
  66. package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +0 -49
  67. package/src/EditorToolbar/Tools/Undo/UndoButton.tsx +0 -30
  68. package/src/EditorToolbar/_editor-toolbar.scss +0 -19
  69. package/src/Extensions/Extensions.tsx +0 -24
  70. package/src/Extensions/PreformattedExtension/PreformattedExtension.tsx +0 -50
  71. package/src/FormattedTextEditor.spec.tsx +0 -10
  72. package/src/FormattedTextEditor.tsx +0 -12
  73. package/src/index.scss +0 -15
  74. package/src/index.ts +0 -3
  75. package/src/ui/DropdownButton/DropdownButton.tsx +0 -28
  76. package/src/ui/DropdownButton/_dropdown-button.scss +0 -7
  77. package/src/ui/ToolbarButton/ToolbarButton.tsx +0 -26
  78. package/src/ui/ToolbarButton/_toolbar-button.scss +0 -37
  79. package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx +0 -32
  80. package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +0 -27
  81. package/tailwind.config.cjs +0 -62
  82. package/tsconfig.json +0 -22
  83. package/vite.config.ts +0 -19
package/lib/index.css CHANGED
@@ -863,6 +863,13 @@ 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
+ }
866
873
  .remirror-base16-ateliersulphurpool-light pre[class*=language-]::selection,
867
874
  .remirror-base16-ateliersulphurpool-light pre[class*=language-] ::selection,
868
875
  .remirror-base16-ateliersulphurpool-light code[class*=language-]::selection,
@@ -1130,6 +1137,13 @@ button:active .remirror-menu-pane-shortcut,
1130
1137
  color: inherit;
1131
1138
  background: rgba(33, 66, 131, 0.85);
1132
1139
  }
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
+ }
1133
1147
  .remirror-darcula pre[class*=language-]::selection,
1134
1148
  .remirror-darcula pre[class*=language-] ::selection,
1135
1149
  .remirror-darcula code[class*=language-]::selection,
@@ -1371,6 +1385,13 @@ button:active .remirror-menu-pane-shortcut,
1371
1385
  text-shadow: none;
1372
1386
  background: #6a51e6;
1373
1387
  }
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
+ }
1374
1395
  .remirror-duotone-dark pre[class*=language-]::selection,
1375
1396
  .remirror-duotone-dark pre[class*=language-] ::selection,
1376
1397
  .remirror-duotone-dark code[class*=language-]::selection,
@@ -1514,6 +1535,13 @@ button:active .remirror-menu-pane-shortcut,
1514
1535
  text-shadow: none;
1515
1536
  background: #6f5849;
1516
1537
  }
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
+ }
1517
1545
  .remirror-duotone-earth pre[class*=language-]::selection,
1518
1546
  .remirror-duotone-earth pre[class*=language-] ::selection,
1519
1547
  .remirror-duotone-earth code[class*=language-]::selection,
@@ -1657,6 +1685,13 @@ button:active .remirror-menu-pane-shortcut,
1657
1685
  text-shadow: none;
1658
1686
  background: #435643;
1659
1687
  }
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
+ }
1660
1695
  .remirror-duotone-forest pre[class*=language-]::selection,
1661
1696
  .remirror-duotone-forest pre[class*=language-] ::selection,
1662
1697
  .remirror-duotone-forest code[class*=language-]::selection,
@@ -1800,6 +1835,13 @@ button:active .remirror-menu-pane-shortcut,
1800
1835
  text-shadow: none;
1801
1836
  background: #faf8f5;
1802
1837
  }
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
+ }
1803
1845
  .remirror-duotone-light pre[class*=language-]::selection,
1804
1846
  .remirror-duotone-light pre[class*=language-] ::selection,
1805
1847
  .remirror-duotone-light code[class*=language-]::selection,
@@ -1943,6 +1985,13 @@ button:active .remirror-menu-pane-shortcut,
1943
1985
  text-shadow: none;
1944
1986
  background: #004a9e;
1945
1987
  }
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
+ }
1946
1995
  .remirror-duotone-sea pre[class*=language-]::selection,
1947
1996
  .remirror-duotone-sea pre[class*=language-] ::selection,
1948
1997
  .remirror-duotone-sea code[class*=language-]::selection,
@@ -2086,6 +2135,13 @@ button:active .remirror-menu-pane-shortcut,
2086
2135
  text-shadow: none;
2087
2136
  background: #5151e6;
2088
2137
  }
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
+ }
2089
2145
  .remirror-duotone-space pre[class*=language-]::selection,
2090
2146
  .remirror-duotone-space pre[class*=language-] ::selection,
2091
2147
  .remirror-duotone-space code[class*=language-]::selection,
@@ -2218,6 +2274,12 @@ button:active .remirror-menu-pane-shortcut,
2218
2274
  .remirror-gh-colors code[class*=language-] ::-moz-selection {
2219
2275
  background: #b3d4fc;
2220
2276
  }
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
+ }
2221
2283
  .remirror-gh-colors pre[class*=language-]::selection,
2222
2284
  .remirror-gh-colors pre[class*=language-] ::selection,
2223
2285
  .remirror-gh-colors code[class*=language-]::selection,
@@ -2534,6 +2596,12 @@ button:active .remirror-menu-pane-shortcut,
2534
2596
  .remirror-vs code[class*=language-] ::-moz-selection {
2535
2597
  background: #c1def1;
2536
2598
  }
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
+ }
2537
2605
  .remirror-vs pre[class*=language-]::selection,
2538
2606
  .remirror-vs pre[class*=language-] ::selection,
2539
2607
  .remirror-vs code[class*=language-]::selection,
@@ -2663,6 +2731,8 @@ button:active .remirror-menu-pane-shortcut,
2663
2731
  border-radius: 4px;
2664
2732
  border: 1px solid #e1e1e8;
2665
2733
  overflow: auto;
2734
+ }
2735
+ .remirror-xonokai pre[class*=language-] {
2666
2736
  position: relative;
2667
2737
  }
2668
2738
  .remirror-xonokai pre[class*=language-] code {
@@ -3696,751 +3766,32 @@ button:active .remirror-menu-pane-shortcut,
3696
3766
  }
3697
3767
 
3698
3768
  /* src/index.scss */
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
- }
4358
3769
  .formatted-text-editor.editor-wrapper {
3770
+ background: white;
3771
+ border: 2px solid var(--grey-300);
4359
3772
  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));
4366
3773
  }
4367
3774
  .formatted-text-editor .remirror-editor-wrapper {
4368
- padding-top: 0px;
4369
- --tw-text-opacity: 1;
4370
- color: rgb(112 112 112 / var(--tw-text-opacity));
3775
+ padding-top: 0;
3776
+ color: var(--grey-600);
4371
3777
  }
4372
3778
  .formatted-text-editor .remirror-editor {
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);
3779
+ box-shadow: none;
3780
+ background: white;
3781
+ border-radius: 0 0 4px 4px;
4383
3782
  }
4384
3783
  .formatted-text-editor .remirror-editor:active,
4385
3784
  .formatted-text-editor .remirror-editor :focus {
4386
3785
  }
4387
- .formatted-text-editor .remirror-editor p {
4388
- display: block;
4389
- }
4390
3786
  .remirror-theme .ProseMirror:active,
4391
3787
  .remirror-theme .ProseMirror:focus {
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;
3788
+ box-shadow: none;
4434
3789
  }
4435
3790
  .formatted-text-editor .editor-toolbar {
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));
3791
+ border-bottom: 2px solid var(--grey-200);
3792
+ background-color: white;
4443
3793
  padding: 0.25rem;
3794
+ border-radius: 0.25rem;
4444
3795
  display: flex;
4445
3796
  justify-items: center;
4446
3797
  }
@@ -4448,33 +3799,20 @@ input[type=range]::-ms-fill-lower {
4448
3799
  margin: 0 0 0 2px;
4449
3800
  }
4450
3801
  .formatted-text-editor .editor-toolbar .editor-divider {
4451
- margin-top: -0.25rem;
4452
- margin-bottom: -0.25rem;
4453
- margin-left: 0.25rem;
4454
- margin-right: 0.25rem;
3802
+ margin: -4px 2px -4px 4px;
4455
3803
  border-width: 1px;
4456
- margin-right: 2px;
4457
3804
  }
4458
3805
  .remirror-floating-popover {
3806
+ padding: 4px;
3807
+ border: 1px var(--grey-200);
4459
3808
  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);
3809
+ background-color: white;
3810
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 12px 4px rgba(0, 0, 0, 0.12);
4472
3811
  }
4473
3812
  .btn {
4474
- border-radius: 4px;
4475
- font-weight: 400;
4476
3813
  display: flex;
4477
3814
  align-items: center;
3815
+ font-weight: 400;
4478
3816
  text-align: center;
4479
3817
  white-space: nowrap;
4480
3818
  vertical-align: middle;
@@ -4482,6 +3820,7 @@ input[type=range]::-ms-fill-lower {
4482
3820
  cursor: pointer;
4483
3821
  background-image: none;
4484
3822
  border: 1px solid transparent;
3823
+ border-radius: var(--border-radius);
4485
3824
  }
4486
3825
  .btn:active,
4487
3826
  .btn:hover,
@@ -4494,59 +3833,14 @@ input[type=range]::-ms-fill-lower {
4494
3833
  opacity: 0.5;
4495
3834
  }
4496
3835
  .toolbar-button {
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));
3836
+ background-color: white;
3837
+ color: var(--grey-600);
3838
+ padding: 4px;
4502
3839
  }
4503
3840
  .toolbar-button ~ .toolbar-button {
4504
3841
  margin-left: 2px;
4505
3842
  }
4506
- .toolbar-button.is-active,
4507
- .toolbar-button:active {
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));
4512
- }
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));
4522
- align-self: center;
4523
- height: 2rem;
4524
- padding-left: 0.5rem;
4525
- }
4526
- .toolbar-dropdown__button:active,
4527
- .toolbar-dropdown__button:hover,
4528
- .toolbar-dropdown__button:focus {
4529
- background-color: rgba(0, 0, 0, 0.04);
4530
- }
4531
- .toolbar-dropdown__button .toolbar-dropdown__label {
4532
- display: inline-flex;
4533
- width: 7rem;
4534
- }
4535
- .toolbar-dropdown__button .toolbar-dropdown__icon {
4536
- width: 1rem;
4537
- height: 1.5rem;
4538
- }
4539
- .toolbar-dropdown__menu {
4540
- inset: 0rem auto auto 1rem !important;
4541
- }
4542
- .dropdown-button {
4543
- padding: 4px 8px;
4544
- color: #707070;
4545
- height: 40px;
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));
3843
+ .toolbar-button.is-active {
3844
+ background-color: var(--blue-100);
3845
+ color: var(--blue-300);
4552
3846
  }