@crystallize/design-system 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/index.css +85 -142
  3. package/dist/index.d.ts +7 -3
  4. package/dist/index.js +1526 -4411
  5. package/dist/index.mjs +1391 -4294
  6. package/package.json +19 -19
  7. package/src/iconography/document.tsx +19 -0
  8. package/src/iconography/folder.tsx +30 -0
  9. package/src/iconography/index.ts +8 -2
  10. package/src/iconography/product.tsx +42 -0
  11. package/src/rich-text-editor/model/crystallize-to-lexical.ts +1 -1
  12. package/src/rich-text-editor/model/lexical-to-crystallize.ts +2 -2
  13. package/src/rich-text-editor/model/to-text.test.ts +97 -0
  14. package/src/rich-text-editor/model/to-text.ts +47 -0
  15. package/src/rich-text-editor/nodes/BaseNodes.ts +0 -3
  16. package/src/rich-text-editor/plugins/ActionsPlugin/index.tsx +14 -3
  17. package/src/rich-text-editor/plugins/CodeActionMenuPlugin/index.tsx +1 -1
  18. package/src/rich-text-editor/plugins/ComponentPickerPlugin/index.tsx +5 -5
  19. package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.tsx +29 -50
  20. package/src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx +34 -23
  21. package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx +8 -8
  22. package/src/rich-text-editor/rich-text-editor.css +3 -3
  23. package/src/rich-text-editor/rich-text-editor.stories.tsx +9 -1
  24. package/src/rich-text-editor/rich-text-editor.tsx +30 -24
  25. package/src/rich-text-editor/tests/rich-text-editor-basic-rendering.test.tsx +1 -1
  26. package/src/rich-text-editor/tests/rich-text-editor-model-basics.test.tsx +1 -1
  27. package/src/rich-text-editor/tests/rich-text-editor-model-conversions.test.tsx +1 -1
  28. package/src/rich-text-editor/tests/rich-text-editor-text-formats.test.tsx +1 -1
  29. package/src/rich-text-editor/themes/{PlaygroundEditorTheme.css → CrystallizeRTEditorTheme.css} +81 -85
  30. package/src/rich-text-editor/themes/CrystallizeRTEditorTheme.ts +113 -0
  31. package/dist/draggable-block-menu-KKHDNKJA.svg +0 -1
  32. package/src/rich-text-editor/appSettings.ts +0 -28
  33. package/src/rich-text-editor/context/SettingsContext.tsx +0 -71
  34. package/src/rich-text-editor/context/SharedAutocompleteContext.tsx +0 -60
  35. package/src/rich-text-editor/nodes/AutocompleteNode.tsx +0 -96
  36. package/src/rich-text-editor/plugins/AutocompletePlugin/index.tsx +0 -2536
  37. package/src/rich-text-editor/themes/PlaygroundEditorTheme.ts +0 -113
  38. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/code.ts +0 -0
  39. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/headings.ts +0 -0
  40. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/index.ts +0 -0
  41. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/link.ts +0 -0
  42. /package/src/rich-text-editor/{model → types}/crystallize-rich-text-types/table.ts +0 -0
  43. /package/src/rich-text-editor/{types.ts → types/types.ts} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @crystallize/design-system
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - 6739bf9: Added "Copy JSON" action menu option. This will copy the JSON AST to the clipboard.
8
+
9
+ ## 1.6.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 71e1f72: Bump verion to publish latest changes
14
+
15
+ ## 1.6.0
16
+
17
+ ### Minor Changes
18
+
19
+ - c4b5bea: Add product, document and fodler icons.
20
+
21
+ ### Patch Changes
22
+
23
+ - f72ed3f9: Disabling the d&d options for the rich text editor (temporarily)
24
+
3
25
  ## 1.5.0
4
26
 
5
27
  ### Minor Changes
package/dist/index.css CHANGED
@@ -533,9 +533,6 @@ button {
533
533
  .pointer-events-none {
534
534
  pointer-events: none;
535
535
  }
536
- .invisible {
537
- visibility: hidden;
538
- }
539
536
  .static {
540
537
  position: static;
541
538
  }
@@ -991,22 +988,6 @@ button {
991
988
  .filter {
992
989
  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);
993
990
  }
994
- .transition {
995
- transition-property:
996
- color,
997
- background-color,
998
- border-color,
999
- text-decoration-color,
1000
- fill,
1001
- stroke,
1002
- opacity,
1003
- box-shadow,
1004
- transform,
1005
- filter,
1006
- backdrop-filter;
1007
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1008
- transition-duration: 150ms;
1009
- }
1010
991
  .active\:scale-95:active {
1011
992
  --tw-scale-x: .95;
1012
993
  --tw-scale-y: .95;
@@ -3282,15 +3263,15 @@ button {
3282
3263
  word-break: break-word;
3283
3264
  z-index: 3;
3284
3265
  }
3285
- .c-rich-text-editor .TableNode__contentEditable .PlaygroundEditorTheme__paragraph {
3266
+ .c-rich-text-editor .TableNode__contentEditable .CrystallizeRTEditorTheme__paragraph {
3286
3267
  margin-top: 0px;
3287
3268
  }
3288
- .c-rich-text-editor .PlaygroundEditorTheme__blockCursor {
3269
+ .c-rich-text-editor .CrystallizeRTEditorTheme__blockCursor {
3289
3270
  display: block;
3290
3271
  pointer-events: none;
3291
3272
  position: absolute;
3292
3273
  }
3293
- .c-rich-text-editor .PlaygroundEditorTheme__blockCursor:after {
3274
+ .c-rich-text-editor .CrystallizeRTEditorTheme__blockCursor:after {
3294
3275
  content: "";
3295
3276
  display: block;
3296
3277
  position: absolute;
@@ -3363,40 +3344,6 @@ button {
3363
3344
  right: 0;
3364
3345
  }
3365
3346
 
3366
- /* src/rich-text-editor/plugins/DraggableBlockPlugin/index.css */
3367
- .draggable-block-menu {
3368
- border-radius: 4px;
3369
- padding: 2px 1px;
3370
- cursor: grab;
3371
- opacity: 0;
3372
- position: absolute;
3373
- left: 0;
3374
- top: 0;
3375
- will-change: transform;
3376
- }
3377
- .draggable-block-menu .icon {
3378
- width: 16px;
3379
- height: 16px;
3380
- opacity: 0.3;
3381
- background-image: url(./draggable-block-menu-KKHDNKJA.svg);
3382
- }
3383
- .draggable-block-menu:active {
3384
- cursor: grabbing;
3385
- }
3386
- .draggable-block-menu:hover {
3387
- background-color: #efefef;
3388
- }
3389
- .draggable-block-target-line {
3390
- pointer-events: none;
3391
- background: deepskyblue;
3392
- height: 4px;
3393
- position: absolute;
3394
- left: 0;
3395
- top: 0;
3396
- opacity: 0;
3397
- will-change: transform;
3398
- }
3399
-
3400
3347
  /* src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css */
3401
3348
  .link-editor {
3402
3349
  position: absolute;
@@ -3638,14 +3585,14 @@ button {
3638
3585
  position: absolute;
3639
3586
  }
3640
3587
 
3641
- /* src/rich-text-editor/themes/PlaygroundEditorTheme.css */
3642
- .PlaygroundEditorTheme__ltr {
3588
+ /* src/rich-text-editor/themes/CrystallizeRTEditorTheme.css */
3589
+ .CrystallizeRTEditorTheme__ltr {
3643
3590
  text-align: left;
3644
3591
  }
3645
- .PlaygroundEditorTheme__rtl {
3592
+ .CrystallizeRTEditorTheme__rtl {
3646
3593
  text-align: right;
3647
3594
  }
3648
- .PlaygroundEditorTheme__paragraph {
3595
+ .CrystallizeRTEditorTheme__paragraph {
3649
3596
  font-size: 15px;
3650
3597
  position: relative;
3651
3598
  margin: 0px;
@@ -3654,12 +3601,12 @@ button {
3654
3601
  --tw-text-opacity: 1;
3655
3602
  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
3656
3603
  }
3657
- .PlaygroundEditorTheme__paragraph + .PlaygroundEditorTheme__paragraph {
3604
+ .CrystallizeRTEditorTheme__paragraph + .CrystallizeRTEditorTheme__paragraph {
3658
3605
  position: relative;
3659
3606
  margin: 0px;
3660
3607
  margin-top: 1rem;
3661
3608
  }
3662
- .PlaygroundEditorTheme__quote {
3609
+ .CrystallizeRTEditorTheme__quote {
3663
3610
  font-size: 15px;
3664
3611
  border-left-width: 4px;
3665
3612
  border-left-style: solid;
@@ -3674,7 +3621,7 @@ button {
3674
3621
  --tw-text-opacity: 1;
3675
3622
  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3676
3623
  }
3677
- .PlaygroundEditorTheme__h1 {
3624
+ .CrystallizeRTEditorTheme__h1 {
3678
3625
  font-size: 20px;
3679
3626
  margin: 0px;
3680
3627
  margin-bottom: 0.25rem;
@@ -3684,7 +3631,7 @@ button {
3684
3631
  --tw-text-opacity: 1;
3685
3632
  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3686
3633
  }
3687
- .PlaygroundEditorTheme__h2 {
3634
+ .CrystallizeRTEditorTheme__h2 {
3688
3635
  font-size: 19px;
3689
3636
  margin: 0px;
3690
3637
  margin-bottom: 0.25rem;
@@ -3695,7 +3642,7 @@ button {
3695
3642
  --tw-text-opacity: 1;
3696
3643
  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3697
3644
  }
3698
- .PlaygroundEditorTheme__h3 {
3645
+ .CrystallizeRTEditorTheme__h3 {
3699
3646
  font-size: 18px;
3700
3647
  margin: 0px;
3701
3648
  margin-bottom: 0.25rem;
@@ -3705,7 +3652,7 @@ button {
3705
3652
  --tw-text-opacity: 1;
3706
3653
  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3707
3654
  }
3708
- .PlaygroundEditorTheme__h4 {
3655
+ .CrystallizeRTEditorTheme__h4 {
3709
3656
  font-size: 17px;
3710
3657
  margin: 0px;
3711
3658
  margin-bottom: 0.25rem;
@@ -3715,7 +3662,7 @@ button {
3715
3662
  --tw-text-opacity: 1;
3716
3663
  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3717
3664
  }
3718
- .PlaygroundEditorTheme__h5 {
3665
+ .CrystallizeRTEditorTheme__h5 {
3719
3666
  font-size: 16px;
3720
3667
  margin: 0px;
3721
3668
  margin-bottom: 0.25rem;
@@ -3725,7 +3672,7 @@ button {
3725
3672
  --tw-text-opacity: 1;
3726
3673
  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3727
3674
  }
3728
- .PlaygroundEditorTheme__h6 {
3675
+ .CrystallizeRTEditorTheme__h6 {
3729
3676
  font-size: 16px;
3730
3677
  margin: 0px;
3731
3678
  margin-bottom: 0.25rem;
@@ -3735,33 +3682,33 @@ button {
3735
3682
  --tw-text-opacity: 1;
3736
3683
  color: rgb(var(--c-color-gray-800-100) / var(--tw-text-opacity));
3737
3684
  }
3738
- .PlaygroundEditorTheme__indent {
3685
+ .CrystallizeRTEditorTheme__indent {
3739
3686
  --lexical-indent-base-value: 20px;
3740
3687
  }
3741
- .PlaygroundEditorTheme__textBold {
3688
+ .CrystallizeRTEditorTheme__textBold {
3742
3689
  font-weight: 700;
3743
3690
  }
3744
- .PlaygroundEditorTheme__textItalic {
3691
+ .CrystallizeRTEditorTheme__textItalic {
3745
3692
  font-style: italic;
3746
3693
  }
3747
- .PlaygroundEditorTheme__textUnderline {
3694
+ .CrystallizeRTEditorTheme__textUnderline {
3748
3695
  text-decoration-line: underline;
3749
3696
  }
3750
- .PlaygroundEditorTheme__textStrikethrough {
3697
+ .CrystallizeRTEditorTheme__textStrikethrough {
3751
3698
  text-decoration-line: line-through;
3752
3699
  }
3753
- .PlaygroundEditorTheme__textUnderlineStrikethrough {
3700
+ .CrystallizeRTEditorTheme__textUnderlineStrikethrough {
3754
3701
  text-decoration: underline line-through;
3755
3702
  }
3756
- .PlaygroundEditorTheme__textSubscript {
3703
+ .CrystallizeRTEditorTheme__textSubscript {
3757
3704
  font-size: 0.8em;
3758
3705
  vertical-align: sub !important;
3759
3706
  }
3760
- .PlaygroundEditorTheme__textSuperscript {
3707
+ .CrystallizeRTEditorTheme__textSuperscript {
3761
3708
  font-size: 0.8em;
3762
3709
  vertical-align: super;
3763
3710
  }
3764
- .PlaygroundEditorTheme__textCode {
3711
+ .CrystallizeRTEditorTheme__textCode {
3765
3712
  padding: 2px 0.5rem;
3766
3713
  font-family:
3767
3714
  Menlo,
@@ -3777,20 +3724,16 @@ button {
3777
3724
  --tw-bg-opacity: 1;
3778
3725
  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3779
3726
  }
3780
- .PlaygroundEditorTheme__hashtag {
3781
- background-color: rgba(88, 144, 255, 0.15);
3782
- border-bottom: 1px solid rgba(88, 144, 255, 0.3);
3783
- }
3784
- .PlaygroundEditorTheme__link {
3727
+ .CrystallizeRTEditorTheme__link {
3785
3728
  text-decoration: none;
3786
3729
  box-shadow: #5d96fd 0 -2px inset;
3787
3730
  --tw-text-opacity: 1 !important;
3788
3731
  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity)) !important;
3789
3732
  }
3790
- .PlaygroundEditorTheme__link:hover {
3733
+ .CrystallizeRTEditorTheme__link:hover {
3791
3734
  cursor: pointer;
3792
3735
  }
3793
- .PlaygroundEditorTheme__code {
3736
+ .CrystallizeRTEditorTheme__code {
3794
3737
  position: relative;
3795
3738
  margin-top: 0.5rem;
3796
3739
  margin-bottom: 0.5rem;
@@ -3817,7 +3760,7 @@ button {
3817
3760
  font-size: 12px;
3818
3761
  tab-size: 2;
3819
3762
  }
3820
- .PlaygroundEditorTheme__code:before {
3763
+ .CrystallizeRTEditorTheme__code:before {
3821
3764
  position: absolute;
3822
3765
  top: 0px;
3823
3766
  left: 0px;
@@ -3836,7 +3779,7 @@ button {
3836
3779
  white-space: pre-wrap;
3837
3780
  min-width: 25px;
3838
3781
  }
3839
- .PlaygroundEditorTheme__table {
3782
+ .CrystallizeRTEditorTheme__table {
3840
3783
  border-spacing: 0;
3841
3784
  max-width: 100%;
3842
3785
  overflow-y: scroll;
@@ -3850,11 +3793,11 @@ button {
3850
3793
  --tw-border-opacity: 1;
3851
3794
  border-color: rgb(var(--c-color-gray-100-800) / var(--tw-border-opacity));
3852
3795
  }
3853
- .PlaygroundEditorTheme__tableSelected {
3796
+ .CrystallizeRTEditorTheme__tableSelected {
3854
3797
  outline-width: 2px;
3855
3798
  outline-color: rgb(var(--c-color-purple-200-700) / 1);
3856
3799
  }
3857
- .PlaygroundEditorTheme__tableCell {
3800
+ .CrystallizeRTEditorTheme__tableCell {
3858
3801
  position: relative;
3859
3802
  cursor: default;
3860
3803
  border-width: 1px;
@@ -3872,13 +3815,13 @@ button {
3872
3815
  min-width: 75px;
3873
3816
  border-width: 0 0 1px 1px;
3874
3817
  }
3875
- .PlaygroundEditorTheme__tableCell .PlaygroundEditorTheme__paragraph {
3818
+ .CrystallizeRTEditorTheme__tableCell .CrystallizeRTEditorTheme__paragraph {
3876
3819
  margin-top: 0.5rem;
3877
3820
  margin-bottom: 0.5rem;
3878
3821
  font-size: 0.875rem;
3879
3822
  line-height: 1.25rem;
3880
3823
  }
3881
- .PlaygroundEditorTheme__tableCellSortedIndicator {
3824
+ .CrystallizeRTEditorTheme__tableCellSortedIndicator {
3882
3825
  display: block;
3883
3826
  opacity: 0.5;
3884
3827
  position: absolute;
@@ -3888,7 +3831,7 @@ button {
3888
3831
  height: 4px;
3889
3832
  background-color: #999;
3890
3833
  }
3891
- .PlaygroundEditorTheme__tableCellResizer {
3834
+ .CrystallizeRTEditorTheme__tableCellResizer {
3892
3835
  position: absolute;
3893
3836
  right: -4px;
3894
3837
  height: 100%;
@@ -3897,15 +3840,15 @@ button {
3897
3840
  z-index: 10;
3898
3841
  top: 0;
3899
3842
  }
3900
- .PlaygroundEditorTheme__tableCellHeader {
3843
+ .CrystallizeRTEditorTheme__tableCellHeader {
3901
3844
  --tw-bg-opacity: 1;
3902
3845
  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3903
3846
  text-align: start;
3904
3847
  }
3905
- .PlaygroundEditorTheme__tableCellSelected {
3848
+ .CrystallizeRTEditorTheme__tableCellSelected {
3906
3849
  background-color: #c9dbf0;
3907
3850
  }
3908
- .PlaygroundEditorTheme__tableCellPrimarySelected {
3851
+ .CrystallizeRTEditorTheme__tableCellPrimarySelected {
3909
3852
  border-width: 2px;
3910
3853
  border-style: solid;
3911
3854
  --tw-border-opacity: 1;
@@ -3918,7 +3861,7 @@ button {
3918
3861
  top: -1px;
3919
3862
  z-index: 2;
3920
3863
  }
3921
- .PlaygroundEditorTheme__tableCellEditing {
3864
+ .CrystallizeRTEditorTheme__tableCellEditing {
3922
3865
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
3923
3866
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
3924
3867
  box-shadow:
@@ -3927,7 +3870,7 @@ button {
3927
3870
  var(--tw-shadow);
3928
3871
  border-radius: 3px;
3929
3872
  }
3930
- .PlaygroundEditorTheme__tableAddColumns {
3873
+ .CrystallizeRTEditorTheme__tableAddColumns {
3931
3874
  position: absolute;
3932
3875
  top: 0;
3933
3876
  width: 20px;
@@ -3940,7 +3883,7 @@ button {
3940
3883
  --tw-bg-opacity: 1;
3941
3884
  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3942
3885
  }
3943
- .PlaygroundEditorTheme__tableAddColumns:after {
3886
+ .CrystallizeRTEditorTheme__tableAddColumns:after {
3944
3887
  background-image: url(./plus-CQISIKEC.svg);
3945
3888
  background-size: contain;
3946
3889
  background-position: center;
@@ -3954,12 +3897,12 @@ button {
3954
3897
  height: 100%;
3955
3898
  opacity: 1;
3956
3899
  }
3957
- .PlaygroundEditorTheme__tableAddColumns:hover {
3900
+ .CrystallizeRTEditorTheme__tableAddColumns:hover {
3958
3901
  border-radius: 0.125rem;
3959
3902
  --tw-border-opacity: 1;
3960
3903
  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
3961
3904
  }
3962
- .PlaygroundEditorTheme__tableAddRows {
3905
+ .CrystallizeRTEditorTheme__tableAddRows {
3963
3906
  position: absolute;
3964
3907
  bottom: -25px;
3965
3908
  width: calc(100% - 25px);
@@ -3972,7 +3915,7 @@ button {
3972
3915
  --tw-bg-opacity: 1;
3973
3916
  background-color: rgb(var(--c-color-purple-50-900) / var(--tw-bg-opacity));
3974
3917
  }
3975
- .PlaygroundEditorTheme__tableAddRows:after {
3918
+ .CrystallizeRTEditorTheme__tableAddRows:after {
3976
3919
  background-image: url(./plus-CQISIKEC.svg);
3977
3920
  background-size: contain;
3978
3921
  background-position: center;
@@ -3986,7 +3929,7 @@ button {
3986
3929
  height: 100%;
3987
3930
  opacity: 1;
3988
3931
  }
3989
- .PlaygroundEditorTheme__tableAddRows:hover {
3932
+ .CrystallizeRTEditorTheme__tableAddRows:hover {
3990
3933
  border-radius: 0.125rem;
3991
3934
  --tw-border-opacity: 1;
3992
3935
  border-color: rgb(var(--c-color-purple-200-700) / var(--tw-border-opacity));
@@ -3999,7 +3942,7 @@ button {
3999
3942
  opacity: 1;
4000
3943
  }
4001
3944
  }
4002
- .PlaygroundEditorTheme__tableCellResizeRuler {
3945
+ .CrystallizeRTEditorTheme__tableCellResizeRuler {
4003
3946
  display: block;
4004
3947
  position: absolute;
4005
3948
  width: 1px;
@@ -4007,7 +3950,7 @@ button {
4007
3950
  height: 100%;
4008
3951
  top: 0;
4009
3952
  }
4010
- .PlaygroundEditorTheme__tableCellActionButtonContainer {
3953
+ .CrystallizeRTEditorTheme__tableCellActionButtonContainer {
4011
3954
  display: block;
4012
3955
  right: 5px;
4013
3956
  top: 6px;
@@ -4016,7 +3959,7 @@ button {
4016
3959
  width: 20px;
4017
3960
  height: 20px;
4018
3961
  }
4019
- .PlaygroundEditorTheme__tableCellActionButton {
3962
+ .CrystallizeRTEditorTheme__tableCellActionButton {
4020
3963
  background-color: #eee;
4021
3964
  display: block;
4022
3965
  border: 0;
@@ -4026,48 +3969,48 @@ button {
4026
3969
  color: #222;
4027
3970
  cursor: pointer;
4028
3971
  }
4029
- .PlaygroundEditorTheme__tableCellActionButton:hover {
3972
+ .CrystallizeRTEditorTheme__tableCellActionButton:hover {
4030
3973
  background-color: #ddd;
4031
3974
  }
4032
- .PlaygroundEditorTheme__characterLimit {
3975
+ .CrystallizeRTEditorTheme__characterLimit {
4033
3976
  display: inline;
4034
3977
  background-color: #ffbbbb !important;
4035
3978
  }
4036
- .PlaygroundEditorTheme__ol1 {
3979
+ .CrystallizeRTEditorTheme__ol1 {
4037
3980
  padding: 0;
4038
3981
  margin: 0;
4039
3982
  list-style-position: inside;
4040
3983
  }
4041
- .PlaygroundEditorTheme__ol2 {
3984
+ .CrystallizeRTEditorTheme__ol2 {
4042
3985
  padding: 0;
4043
3986
  margin: 0;
4044
3987
  list-style-type: upper-alpha;
4045
3988
  list-style-position: inside;
4046
3989
  }
4047
- .PlaygroundEditorTheme__ol3 {
3990
+ .CrystallizeRTEditorTheme__ol3 {
4048
3991
  padding: 0;
4049
3992
  margin: 0;
4050
3993
  list-style-type: lower-alpha;
4051
3994
  list-style-position: inside;
4052
3995
  }
4053
- .PlaygroundEditorTheme__ol4 {
3996
+ .CrystallizeRTEditorTheme__ol4 {
4054
3997
  padding: 0;
4055
3998
  margin: 0;
4056
3999
  list-style-type: upper-roman;
4057
4000
  list-style-position: inside;
4058
4001
  }
4059
- .PlaygroundEditorTheme__ol5 {
4002
+ .CrystallizeRTEditorTheme__ol5 {
4060
4003
  padding: 0;
4061
4004
  margin: 0;
4062
4005
  list-style-type: lower-roman;
4063
4006
  list-style-position: inside;
4064
4007
  }
4065
- .PlaygroundEditorTheme__ul {
4008
+ .CrystallizeRTEditorTheme__ul {
4066
4009
  padding: 0;
4067
4010
  margin: 0;
4068
4011
  list-style-position: inside;
4069
4012
  }
4070
- .PlaygroundEditorTheme__listItem {
4013
+ .CrystallizeRTEditorTheme__listItem {
4071
4014
  margin-top: 0px;
4072
4015
  margin-bottom: 0px;
4073
4016
  margin-left: 1.25rem;
@@ -4076,8 +4019,8 @@ button {
4076
4019
  --tw-text-opacity: 1;
4077
4020
  color: rgb(var(--c-color-gray-600-300) / var(--tw-text-opacity));
4078
4021
  }
4079
- .PlaygroundEditorTheme__listItemChecked,
4080
- .PlaygroundEditorTheme__listItemUnchecked {
4022
+ .CrystallizeRTEditorTheme__listItemChecked,
4023
+ .CrystallizeRTEditorTheme__listItemUnchecked {
4081
4024
  position: relative;
4082
4025
  margin-left: 8px;
4083
4026
  margin-right: 8px;
@@ -4086,11 +4029,11 @@ button {
4086
4029
  list-style-type: none;
4087
4030
  outline: none;
4088
4031
  }
4089
- .PlaygroundEditorTheme__listItemChecked {
4032
+ .CrystallizeRTEditorTheme__listItemChecked {
4090
4033
  text-decoration: line-through;
4091
4034
  }
4092
- .PlaygroundEditorTheme__listItemUnchecked:before,
4093
- .PlaygroundEditorTheme__listItemChecked:before {
4035
+ .CrystallizeRTEditorTheme__listItemUnchecked:before,
4036
+ .CrystallizeRTEditorTheme__listItemChecked:before {
4094
4037
  content: "";
4095
4038
  width: 16px;
4096
4039
  height: 16px;
@@ -4101,27 +4044,27 @@ button {
4101
4044
  background-size: cover;
4102
4045
  position: absolute;
4103
4046
  }
4104
- .PlaygroundEditorTheme__listItemUnchecked[dir=rtl]:before,
4105
- .PlaygroundEditorTheme__listItemChecked[dir=rtl]:before {
4047
+ .CrystallizeRTEditorTheme__listItemUnchecked[dir=rtl]:before,
4048
+ .CrystallizeRTEditorTheme__listItemChecked[dir=rtl]:before {
4106
4049
  left: auto;
4107
4050
  right: 0;
4108
4051
  }
4109
- .PlaygroundEditorTheme__listItemUnchecked:focus:before,
4110
- .PlaygroundEditorTheme__listItemChecked:focus:before {
4052
+ .CrystallizeRTEditorTheme__listItemUnchecked:focus:before,
4053
+ .CrystallizeRTEditorTheme__listItemChecked:focus:before {
4111
4054
  box-shadow: 0 0 0 2px #a6cdfe;
4112
4055
  border-radius: 2px;
4113
4056
  }
4114
- .PlaygroundEditorTheme__listItemUnchecked:before {
4057
+ .CrystallizeRTEditorTheme__listItemUnchecked:before {
4115
4058
  border: 1px solid #999;
4116
4059
  border-radius: 2px;
4117
4060
  }
4118
- .PlaygroundEditorTheme__listItemChecked:before {
4061
+ .CrystallizeRTEditorTheme__listItemChecked:before {
4119
4062
  border: 1px solid rgb(61, 135, 245);
4120
4063
  border-radius: 2px;
4121
4064
  background-color: #3d87f5;
4122
4065
  background-repeat: no-repeat;
4123
4066
  }
4124
- .PlaygroundEditorTheme__listItemChecked:after {
4067
+ .CrystallizeRTEditorTheme__listItemChecked:after {
4125
4068
  content: "";
4126
4069
  cursor: pointer;
4127
4070
  border-color: #fff;
@@ -4136,58 +4079,58 @@ button {
4136
4079
  transform: rotate(45deg);
4137
4080
  border-width: 0 2px 2px 0;
4138
4081
  }
4139
- .PlaygroundEditorTheme__nestedListItem {
4082
+ .CrystallizeRTEditorTheme__nestedListItem {
4140
4083
  list-style-type: none;
4141
4084
  }
4142
- .PlaygroundEditorTheme__nestedListItem:before,
4143
- .PlaygroundEditorTheme__nestedListItem:after {
4085
+ .CrystallizeRTEditorTheme__nestedListItem:before,
4086
+ .CrystallizeRTEditorTheme__nestedListItem:after {
4144
4087
  display: none;
4145
4088
  }
4146
- .PlaygroundEditorTheme__tokenComment {
4089
+ .CrystallizeRTEditorTheme__tokenComment {
4147
4090
  color: slategray;
4148
4091
  }
4149
- .PlaygroundEditorTheme__tokenPunctuation {
4092
+ .CrystallizeRTEditorTheme__tokenPunctuation {
4150
4093
  color: #999;
4151
4094
  }
4152
- .PlaygroundEditorTheme__tokenProperty {
4095
+ .CrystallizeRTEditorTheme__tokenProperty {
4153
4096
  color: #905;
4154
4097
  }
4155
- .PlaygroundEditorTheme__tokenSelector {
4098
+ .CrystallizeRTEditorTheme__tokenSelector {
4156
4099
  color: #690;
4157
4100
  }
4158
- .PlaygroundEditorTheme__tokenOperator {
4101
+ .CrystallizeRTEditorTheme__tokenOperator {
4159
4102
  color: #9a6e3a;
4160
4103
  }
4161
- .PlaygroundEditorTheme__tokenAttr {
4104
+ .CrystallizeRTEditorTheme__tokenAttr {
4162
4105
  color: #07a;
4163
4106
  }
4164
- .PlaygroundEditorTheme__tokenVariable {
4107
+ .CrystallizeRTEditorTheme__tokenVariable {
4165
4108
  color: #e90;
4166
4109
  }
4167
- .PlaygroundEditorTheme__tokenFunction {
4110
+ .CrystallizeRTEditorTheme__tokenFunction {
4168
4111
  color: #dd4a68;
4169
4112
  }
4170
- .PlaygroundEditorTheme__mark {
4113
+ .CrystallizeRTEditorTheme__mark {
4171
4114
  background: rgba(255, 212, 0, 0.14);
4172
4115
  border-bottom: 2px solid rgba(255, 212, 0, 0.3);
4173
4116
  padding-bottom: 2px;
4174
4117
  }
4175
- .PlaygroundEditorTheme__markOverlap {
4118
+ .CrystallizeRTEditorTheme__markOverlap {
4176
4119
  background: rgba(255, 212, 0, 0.3);
4177
4120
  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
4178
4121
  }
4179
- .PlaygroundEditorTheme__mark.selected {
4122
+ .CrystallizeRTEditorTheme__mark.selected {
4180
4123
  background: rgba(255, 212, 0, 0.5);
4181
4124
  border-bottom: 2px solid rgba(255, 212, 0, 1);
4182
4125
  }
4183
- .PlaygroundEditorTheme__markOverlap.selected {
4126
+ .CrystallizeRTEditorTheme__markOverlap.selected {
4184
4127
  background: rgba(255, 212, 0, 0.7);
4185
4128
  border-bottom: 2px solid rgba(255, 212, 0, 0.7);
4186
4129
  }
4187
- .PlaygroundEditorTheme__embedBlock {
4130
+ .CrystallizeRTEditorTheme__embedBlock {
4188
4131
  user-select: none;
4189
4132
  }
4190
- .PlaygroundEditorTheme__embedBlockFocus {
4133
+ .CrystallizeRTEditorTheme__embedBlockFocus {
4191
4134
  outline: 2px solid rgb(60, 132, 244);
4192
4135
  }
4193
4136