@payloadcms/richtext-slate 3.0.0-canary.e198dc5 → 3.0.0-canary.e1fc0e0

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.
@@ -1,9 +1,11 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .rich-text-blockquote {
4
- &[data-slate-node='element'] {
5
- margin: base(0.625) 0;
6
- padding-left: base(0.625);
7
- border-left: 1px solid var(--theme-elevation-200);
3
+ @layer payload-default {
4
+ .rich-text-blockquote {
5
+ &[data-slate-node='element'] {
6
+ margin: base(0.625) 0;
7
+ padding-left: base(0.625);
8
+ border-left: 1px solid var(--theme-elevation-200);
9
+ }
8
10
  }
9
11
  }
@@ -1,88 +1,90 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .rich-text-link {
4
- position: relative;
3
+ @layer payload-default {
4
+ .rich-text-link {
5
+ position: relative;
5
6
 
6
- .popup {
7
- position: absolute;
8
- top: 0;
9
- right: 0;
10
- bottom: 0;
11
- left: 0;
7
+ .popup {
8
+ position: absolute;
9
+ top: 0;
10
+ right: 0;
11
+ bottom: 0;
12
+ left: 0;
12
13
 
13
- .popup__hide-scrollbar,
14
- .popup__scroll-container {
15
- overflow: visible;
14
+ .popup__hide-scrollbar,
15
+ .popup__scroll-container {
16
+ overflow: visible;
17
+ }
18
+
19
+ .popup__scroll-content {
20
+ white-space: pre;
21
+ }
16
22
  }
17
23
 
18
- .popup__scroll-content {
19
- white-space: pre;
24
+ .icon--x line {
25
+ stroke-width: 2px;
20
26
  }
21
- }
22
27
 
23
- .icon--x line {
24
- stroke-width: 2px;
25
- }
28
+ &__popup {
29
+ @extend %body;
30
+ font-family: var(--font-body);
31
+ display: flex;
26
32
 
27
- &__popup {
28
- @extend %body;
29
- font-family: var(--font-body);
30
- display: flex;
31
-
32
- button {
33
- @extend %btn-reset;
34
- font-weight: 600;
35
- cursor: pointer;
36
- margin: 0;
33
+ button {
34
+ @extend %btn-reset;
35
+ font-weight: 600;
36
+ cursor: pointer;
37
+ margin: 0;
38
+ }
37
39
  }
38
- }
39
40
 
40
- &__link-label {
41
- max-width: base(8);
42
- overflow: hidden;
43
- text-overflow: ellipsis;
44
- border-radius: 2px;
41
+ &__link-label {
42
+ max-width: base(8);
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ border-radius: 2px;
45
46
 
46
- &:hover {
47
- background-color: var(--popup-button-highlight);
47
+ &:hover {
48
+ background-color: var(--popup-button-highlight);
49
+ }
48
50
  }
49
51
  }
50
- }
51
52
 
52
- .rich-text-link__popup {
53
- display: flex;
54
- gap: calc(var(--base) * 0.25);
55
- button {
56
- &:hover {
57
- .btn__icon {
58
- background-color: var(--popup-button-highlight);
59
- .fill {
60
- fill: var(--theme-text);
61
- }
62
- .stroke {
63
- stroke: var(--theme-text);
53
+ .rich-text-link__popup {
54
+ display: flex;
55
+ gap: calc(var(--base) * 0.25);
56
+ button {
57
+ &:hover {
58
+ .btn__icon {
59
+ background-color: var(--popup-button-highlight);
60
+ .fill {
61
+ fill: var(--theme-text);
62
+ }
63
+ .stroke {
64
+ stroke: var(--theme-text);
65
+ }
64
66
  }
65
67
  }
66
68
  }
67
69
  }
68
- }
69
70
 
70
- .rich-text-link__popup-toggler {
71
- position: relative;
72
- border: 0;
73
- background-color: transparent;
74
- padding: 0;
75
- color: var(--theme-success-600);
76
- text-decoration: none;
77
- border-bottom: 1px dotted;
78
- cursor: text;
71
+ .rich-text-link__popup-toggler {
72
+ position: relative;
73
+ border: 0;
74
+ background-color: transparent;
75
+ padding: 0;
76
+ color: var(--theme-success-600);
77
+ text-decoration: none;
78
+ border-bottom: 1px dotted;
79
+ cursor: text;
79
80
 
80
- &:focus,
81
- &:focus-within {
82
- outline: none;
83
- }
81
+ &:focus,
82
+ &:focus-within {
83
+ outline: none;
84
+ }
84
85
 
85
- &--open {
86
- z-index: var(--z-popup);
86
+ &--open {
87
+ z-index: var(--z-popup);
88
+ }
87
89
  }
88
90
  }
@@ -1,49 +1,51 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .rich-text-link-edit-modal {
4
- &__template {
5
- position: relative;
6
- z-index: 1;
7
- padding-top: base(1);
8
- padding-bottom: base(2);
9
- }
3
+ @layer payload-default {
4
+ .rich-text-link-edit-modal {
5
+ &__template {
6
+ position: relative;
7
+ z-index: 1;
8
+ padding-top: base(1);
9
+ padding-bottom: base(2);
10
+ }
10
11
 
11
- &__header {
12
- width: 100%;
13
- margin-bottom: $baseline;
14
- display: flex;
15
- justify-content: space-between;
16
- margin-top: base(2.5);
17
- margin-bottom: base(1);
12
+ &__header {
13
+ width: 100%;
14
+ margin-bottom: $baseline;
15
+ display: flex;
16
+ justify-content: space-between;
17
+ margin-top: base(2.5);
18
+ margin-bottom: base(1);
18
19
 
19
- @include mid-break {
20
- margin-top: base(1.5);
20
+ @include mid-break {
21
+ margin-top: base(1.5);
22
+ }
21
23
  }
22
- }
23
24
 
24
- &__header-text {
25
- margin: 0;
26
- }
25
+ &__header-text {
26
+ margin: 0;
27
+ }
27
28
 
28
- &__header-close {
29
- border: 0;
30
- background-color: transparent;
31
- padding: 0;
32
- cursor: pointer;
33
- overflow: hidden;
34
- width: base(1);
35
- height: base(1);
29
+ &__header-close {
30
+ border: 0;
31
+ background-color: transparent;
32
+ padding: 0;
33
+ cursor: pointer;
34
+ overflow: hidden;
35
+ width: base(1);
36
+ height: base(1);
36
37
 
37
- svg {
38
- width: base(2);
39
- height: base(2);
40
- position: relative;
41
- inset-inline-start: base(-0.5);
42
- top: base(-0.5);
38
+ svg {
39
+ width: base(2);
40
+ height: base(2);
41
+ position: relative;
42
+ inset-inline-start: base(-0.5);
43
+ top: base(-0.5);
43
44
 
44
- .stroke {
45
- stroke-width: 2px;
46
- vector-effect: non-scaling-stroke;
45
+ .stroke {
46
+ stroke-width: 2px;
47
+ vector-effect: non-scaling-stroke;
48
+ }
47
49
  }
48
50
  }
49
51
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .rich-text-ol {
4
- &[data-slate-node='element'] {
5
- margin: base(0.625) 0;
3
+ @layer payload-default {
4
+ .rich-text-ol {
5
+ &[data-slate-node='element'] {
6
+ margin: base(0.625) 0;
7
+ }
6
8
  }
7
9
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .relationship-rich-text-button {
4
- display: flex;
5
- align-items: center;
6
- height: 100%;
3
+ @layer payload-default {
4
+ .relationship-rich-text-button {
5
+ display: flex;
6
+ align-items: center;
7
+ height: 100%;
8
+ }
7
9
  }
@@ -1,93 +1,95 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .rich-text-relationship {
4
- @extend %body;
5
- @include shadow-sm;
6
- padding: base(0.75);
7
- display: flex;
8
- align-items: center;
9
- background: var(--theme-input-bg);
10
- border: 1px solid var(--theme-elevation-100);
11
- max-width: base(15);
12
- font-family: var(--font-body);
13
-
14
- &:hover {
15
- border: 1px solid var(--theme-elevation-150);
16
- }
17
-
18
- &[data-slate-node='element'] {
19
- margin: base(0.625) 0;
20
- }
21
-
22
- &__label {
23
- margin-bottom: base(0.25);
24
- }
25
-
26
- &__title {
27
- margin: 0;
28
- }
3
+ @layer payload-default {
4
+ .rich-text-relationship {
5
+ @extend %body;
6
+ @include shadow-sm;
7
+ padding: base(0.75);
8
+ display: flex;
9
+ align-items: center;
10
+ background: var(--theme-input-bg);
11
+ border: 1px solid var(--theme-elevation-100);
12
+ max-width: base(15);
13
+ font-family: var(--font-body);
29
14
 
30
- &__label,
31
- &__title {
32
- white-space: nowrap;
33
- text-overflow: ellipsis;
34
- overflow: hidden;
35
- line-height: 1 !important;
36
- }
15
+ &:hover {
16
+ border: 1px solid var(--theme-elevation-150);
17
+ }
37
18
 
38
- &__title {
39
- font-weight: bold;
40
- }
19
+ &[data-slate-node='element'] {
20
+ margin: base(0.625) 0;
21
+ }
41
22
 
42
- &__wrap {
43
- flex-grow: 1;
44
- overflow: hidden;
45
- }
23
+ &__label {
24
+ margin-bottom: base(0.25);
25
+ }
46
26
 
47
- &--selected {
48
- box-shadow: $focus-box-shadow;
49
- outline: none;
50
- }
27
+ &__title {
28
+ margin: 0;
29
+ }
51
30
 
52
- .rich-text-relationship__doc-drawer-toggler {
53
- text-decoration: underline;
54
- pointer-events: all;
55
- line-height: inherit;
56
- }
31
+ &__label,
32
+ &__title {
33
+ white-space: nowrap;
34
+ text-overflow: ellipsis;
35
+ overflow: hidden;
36
+ line-height: 1 !important;
37
+ }
57
38
 
58
- &__actions {
59
- display: flex;
60
- align-items: center;
61
- flex-shrink: 0;
62
- margin-left: base(0.5);
39
+ &__title {
40
+ font-weight: bold;
41
+ }
63
42
 
64
- & > *:not(:last-child) {
65
- margin-right: base(0.25);
43
+ &__wrap {
44
+ flex-grow: 1;
45
+ overflow: hidden;
66
46
  }
67
- }
68
47
 
69
- &__removeButton {
70
- margin: 0;
48
+ &--selected {
49
+ box-shadow: $focus-box-shadow;
50
+ outline: none;
51
+ }
71
52
 
72
- line {
73
- stroke-width: $style-stroke-width-m;
53
+ .rich-text-relationship__doc-drawer-toggler {
54
+ text-decoration: underline;
55
+ pointer-events: all;
56
+ line-height: inherit;
74
57
  }
75
58
 
76
- &:disabled {
77
- color: var(--theme-elevation-300);
78
- pointer-events: none;
59
+ &__actions {
60
+ display: flex;
61
+ align-items: center;
62
+ flex-shrink: 0;
63
+ margin-left: base(0.5);
64
+
65
+ & > *:not(:last-child) {
66
+ margin-right: base(0.25);
67
+ }
79
68
  }
80
- }
81
69
 
82
- &__doc-drawer-toggler,
83
- &__list-drawer-toggler {
84
- & > * {
70
+ &__removeButton {
85
71
  margin: 0;
72
+
73
+ line {
74
+ stroke-width: $style-stroke-width-m;
75
+ }
76
+
77
+ &:disabled {
78
+ color: var(--theme-elevation-300);
79
+ pointer-events: none;
80
+ }
86
81
  }
87
82
 
88
- &:disabled {
89
- color: var(--theme-elevation-300);
90
- pointer-events: none;
83
+ &__doc-drawer-toggler,
84
+ &__list-drawer-toggler {
85
+ & > * {
86
+ margin: 0;
87
+ }
88
+
89
+ &:disabled {
90
+ color: var(--theme-elevation-300);
91
+ pointer-events: none;
92
+ }
91
93
  }
92
94
  }
93
95
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../scss/styles.scss';
2
2
 
3
- .rich-text-ul {
4
- &[data-slate-node='element'] {
5
- margin: base(0.625) 0;
3
+ @layer payload-default {
4
+ .rich-text-ul {
5
+ &[data-slate-node='element'] {
6
+ margin: base(0.625) 0;
7
+ }
6
8
  }
7
9
  }
@@ -1,7 +1,9 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .upload-rich-text-button {
4
- display: flex;
5
- align-items: center;
6
- height: 100%;
3
+ @layer payload-default {
4
+ .upload-rich-text-button {
5
+ display: flex;
6
+ align-items: center;
7
+ height: 100%;
8
+ }
7
9
  }
@@ -1,147 +1,149 @@
1
1
  @import '../../../../scss/styles.scss';
2
2
 
3
- .rich-text-upload {
4
- @extend %body;
5
- @include shadow-sm;
6
- max-width: base(15);
7
- display: flex;
8
- align-items: center;
9
- background: var(--theme-input-bg);
10
- border: 1px solid var(--theme-elevation-100);
11
- position: relative;
12
- font-family: var(--font-body);
13
-
14
- &:hover {
15
- border: 1px solid var(--theme-elevation-150);
16
- }
17
-
18
- &[data-slate-node='element'] {
19
- margin: base(0.625) 0;
20
- }
21
-
22
- &__card {
23
- @include soft-shadow-bottom;
3
+ @layer payload-default {
4
+ .rich-text-upload {
5
+ @extend %body;
6
+ @include shadow-sm;
7
+ max-width: base(15);
24
8
  display: flex;
25
- flex-direction: column;
26
- width: 100%;
27
- }
9
+ align-items: center;
10
+ background: var(--theme-input-bg);
11
+ border: 1px solid var(--theme-elevation-100);
12
+ position: relative;
13
+ font-family: var(--font-body);
28
14
 
29
- &__topRow {
30
- display: flex;
31
- }
15
+ &:hover {
16
+ border: 1px solid var(--theme-elevation-150);
17
+ }
32
18
 
33
- &__thumbnail {
34
- width: base(3.25);
35
- height: auto;
36
- position: relative;
37
- overflow: hidden;
38
- flex-shrink: 0;
19
+ &[data-slate-node='element'] {
20
+ margin: base(0.625) 0;
21
+ }
39
22
 
40
- img,
41
- svg {
42
- position: absolute;
43
- object-fit: cover;
23
+ &__card {
24
+ @include soft-shadow-bottom;
25
+ display: flex;
26
+ flex-direction: column;
44
27
  width: 100%;
45
- height: 100%;
46
- background-color: var(--theme-elevation-800);
47
28
  }
48
- }
49
-
50
- &__topRowRightPanel {
51
- flex-grow: 1;
52
- display: flex;
53
- align-items: center;
54
- padding: base(0.75);
55
- justify-content: space-between;
56
- max-width: calc(100% - #{base(3.25)});
57
- }
58
29
 
59
- &__actions {
60
- display: flex;
61
- align-items: center;
62
- flex-shrink: 0;
63
- margin-left: base(0.5);
30
+ &__topRow {
31
+ display: flex;
32
+ }
64
33
 
65
- .rich-text-upload__doc-drawer-toggler {
66
- pointer-events: all;
34
+ &__thumbnail {
35
+ width: base(3.25);
36
+ height: auto;
37
+ position: relative;
38
+ overflow: hidden;
39
+ flex-shrink: 0;
40
+
41
+ img,
42
+ svg {
43
+ position: absolute;
44
+ object-fit: cover;
45
+ width: 100%;
46
+ height: 100%;
47
+ background-color: var(--theme-elevation-800);
48
+ }
67
49
  }
68
50
 
69
- & > *:not(:last-child) {
70
- margin-right: base(0.25);
51
+ &__topRowRightPanel {
52
+ flex-grow: 1;
53
+ display: flex;
54
+ align-items: center;
55
+ padding: base(0.75);
56
+ justify-content: space-between;
57
+ max-width: calc(100% - #{base(3.25)});
71
58
  }
72
- }
73
59
 
74
- &__removeButton {
75
- margin: 0;
60
+ &__actions {
61
+ display: flex;
62
+ align-items: center;
63
+ flex-shrink: 0;
64
+ margin-left: base(0.5);
76
65
 
77
- line {
78
- stroke-width: $style-stroke-width-m;
79
- }
66
+ .rich-text-upload__doc-drawer-toggler {
67
+ pointer-events: all;
68
+ }
80
69
 
81
- &:disabled {
82
- color: var(--theme-elevation-300);
83
- pointer-events: none;
70
+ & > *:not(:last-child) {
71
+ margin-right: base(0.25);
72
+ }
84
73
  }
85
- }
86
74
 
87
- &__upload-drawer-toggler {
88
- background-color: transparent;
89
- border: none;
90
- padding: 0;
91
- margin: 0;
92
- outline: none;
93
- line-height: inherit;
94
- }
75
+ &__removeButton {
76
+ margin: 0;
95
77
 
96
- &__doc-drawer-toggler {
97
- text-decoration: underline;
98
- }
78
+ line {
79
+ stroke-width: $style-stroke-width-m;
80
+ }
99
81
 
100
- &__doc-drawer-toggler,
101
- &__list-drawer-toggler,
102
- &__upload-drawer-toggler {
103
- & > * {
82
+ &:disabled {
83
+ color: var(--theme-elevation-300);
84
+ pointer-events: none;
85
+ }
86
+ }
87
+
88
+ &__upload-drawer-toggler {
89
+ background-color: transparent;
90
+ border: none;
91
+ padding: 0;
104
92
  margin: 0;
93
+ outline: none;
94
+ line-height: inherit;
105
95
  }
106
96
 
107
- &:disabled {
108
- color: var(--theme-elevation-300);
109
- pointer-events: none;
97
+ &__doc-drawer-toggler {
98
+ text-decoration: underline;
110
99
  }
111
- }
112
100
 
113
- &__collectionLabel {
114
- overflow: hidden;
115
- text-overflow: ellipsis;
116
- white-space: nowrap;
117
- }
101
+ &__doc-drawer-toggler,
102
+ &__list-drawer-toggler,
103
+ &__upload-drawer-toggler {
104
+ & > * {
105
+ margin: 0;
106
+ }
107
+
108
+ &:disabled {
109
+ color: var(--theme-elevation-300);
110
+ pointer-events: none;
111
+ }
112
+ }
118
113
 
119
- &__bottomRow {
120
- padding: base(0.5);
121
- border-top: 1px solid var(--theme-elevation-100);
122
- }
114
+ &__collectionLabel {
115
+ overflow: hidden;
116
+ text-overflow: ellipsis;
117
+ white-space: nowrap;
118
+ }
123
119
 
124
- h5 {
125
- white-space: nowrap;
126
- text-overflow: ellipsis;
127
- overflow: hidden;
128
- }
120
+ &__bottomRow {
121
+ padding: base(0.5);
122
+ border-top: 1px solid var(--theme-elevation-100);
123
+ }
129
124
 
130
- &__wrap {
131
- padding: base(0.5) base(0.5) base(0.5) base(1);
132
- text-align: left;
133
- overflow: hidden;
134
- text-overflow: ellipsis;
135
- }
125
+ h5 {
126
+ white-space: nowrap;
127
+ text-overflow: ellipsis;
128
+ overflow: hidden;
129
+ }
136
130
 
137
- &--selected {
138
- box-shadow: $focus-box-shadow;
139
- outline: none;
140
- }
131
+ &__wrap {
132
+ padding: base(0.5) base(0.5) base(0.5) base(1);
133
+ text-align: left;
134
+ overflow: hidden;
135
+ text-overflow: ellipsis;
136
+ }
141
137
 
142
- @include small-break {
143
- &__topRowRightPanel {
144
- padding: base(0.75) base(0.5);
138
+ &--selected {
139
+ box-shadow: $focus-box-shadow;
140
+ outline: none;
141
+ }
142
+
143
+ @include small-break {
144
+ &__topRowRightPanel {
145
+ padding: base(0.75) base(0.5);
146
+ }
145
147
  }
146
148
  }
147
149
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/richtext-slate",
3
- "version": "3.0.0-canary.e198dc5",
3
+ "version": "3.0.0-canary.e1fc0e0",
4
4
  "description": "The officially supported Slate richtext adapter for Payload",
5
5
  "homepage": "https://payloadcms.com",
6
6
  "repository": {
@@ -39,20 +39,20 @@
39
39
  "slate-history": "0.86.0",
40
40
  "slate-hyperscript": "0.81.3",
41
41
  "slate-react": "0.92.0",
42
- "@payloadcms/translations": "3.0.0-canary.e198dc5",
43
- "@payloadcms/ui": "3.0.0-canary.e198dc5"
42
+ "@payloadcms/ui": "3.0.0-canary.e1fc0e0",
43
+ "@payloadcms/translations": "3.0.0-canary.e1fc0e0"
44
44
  },
45
45
  "devDependencies": {
46
46
  "@types/is-hotkey": "^0.1.10",
47
47
  "@types/node": "22.5.4",
48
48
  "@types/react": "npm:types-react@19.0.0-rc.1",
49
49
  "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
50
- "payload": "3.0.0-canary.e198dc5",
51
- "@payloadcms/eslint-config": "3.0.0-beta.97"
50
+ "@payloadcms/eslint-config": "3.0.0-beta.112",
51
+ "payload": "3.0.0-canary.e1fc0e0"
52
52
  },
53
53
  "peerDependencies": {
54
- "react": "^19.0.0 || ^19.0.0-rc-3edc000d-20240926",
55
- "payload": "3.0.0-canary.e198dc5"
54
+ "react": "^19.0.0 || ^19.0.0-rc-65a56d0e-20241020",
55
+ "payload": "3.0.0-canary.e1fc0e0"
56
56
  },
57
57
  "engines": {
58
58
  "node": "^18.20.2 || >=20.9.0"