@payloadcms/richtext-slate 1.0.0-beta.0 → 1.0.0-beta.2

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.
@@ -0,0 +1,15 @@
1
+ @import 'payload/scss';
2
+
3
+ .rich-text__button {
4
+ position: relative;
5
+ cursor: pointer;
6
+
7
+ svg {
8
+ width: base(0.75);
9
+ height: base(0.75);
10
+ }
11
+
12
+ &--disabled {
13
+ opacity: 0.4;
14
+ }
15
+ }
@@ -0,0 +1,9 @@
1
+ @import 'payload/scss';
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);
8
+ }
9
+ }
@@ -0,0 +1,92 @@
1
+ @import 'payload/scss';
2
+
3
+ .rich-text-link {
4
+ position: relative;
5
+ text-decoration: underline;
6
+
7
+ .popup {
8
+ position: absolute;
9
+ top: 0;
10
+ right: 0;
11
+ bottom: 0;
12
+ left: 0;
13
+
14
+ .popup__hide-scrollbar,
15
+ .popup__scroll-container {
16
+ overflow: visible;
17
+ }
18
+
19
+ .popup__scroll-content {
20
+ white-space: pre;
21
+ }
22
+ }
23
+
24
+ .icon--x line {
25
+ stroke-width: 2px;
26
+ }
27
+
28
+ &__popup {
29
+ @extend %body;
30
+ font-family: var(--font-body);
31
+ display: flex;
32
+
33
+ button {
34
+ @extend %btn-reset;
35
+ font-weight: 600;
36
+ cursor: pointer;
37
+ margin: 0;
38
+
39
+ &:hover,
40
+ &:focus-visible {
41
+ text-decoration: underline;
42
+ }
43
+ }
44
+ }
45
+
46
+ &__link-label {
47
+ max-width: base(8);
48
+ overflow: hidden;
49
+ text-overflow: ellipsis;
50
+ border-radius: 2px;
51
+
52
+ &:hover {
53
+ background-color: var(--popup-button-highlight);
54
+ }
55
+ }
56
+ }
57
+
58
+ .rich-text-link__popup {
59
+ display: flex;
60
+ gap: calc(var(--base) * 0.25);
61
+ button {
62
+ &:hover {
63
+ .btn__icon {
64
+ background-color: var(--popup-button-highlight);
65
+ .fill {
66
+ fill: var(--theme-text);
67
+ }
68
+ .stroke {
69
+ stroke: var(--theme-text);
70
+ }
71
+ }
72
+ }
73
+ }
74
+ }
75
+
76
+ .rich-text-link__popup-toggler {
77
+ position: relative;
78
+ border: 0;
79
+ background-color: transparent;
80
+ padding: 0;
81
+ text-decoration: underline;
82
+ cursor: text;
83
+
84
+ &:focus,
85
+ &:focus-within {
86
+ outline: none;
87
+ }
88
+
89
+ &--open {
90
+ z-index: var(--z-popup);
91
+ }
92
+ }
@@ -0,0 +1,50 @@
1
+ @import 'payload/scss';
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
+ }
10
+
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);
18
+
19
+ @include mid-break {
20
+ margin-top: base(1.5);
21
+ }
22
+ }
23
+
24
+ &__header-text {
25
+ margin: 0;
26
+ }
27
+
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);
36
+
37
+ svg {
38
+ width: base(2.75);
39
+ height: base(2.75);
40
+ position: relative;
41
+ left: base(-0.825);
42
+ top: base(-0.825);
43
+
44
+ .stroke {
45
+ stroke-width: 2px;
46
+ vector-effect: non-scaling-stroke;
47
+ }
48
+ }
49
+ }
50
+ }
@@ -0,0 +1,7 @@
1
+ @import 'payload/scss';
2
+
3
+ .rich-text-ol {
4
+ &[data-slate-node='element'] {
5
+ margin: base(0.625) 0;
6
+ }
7
+ }
@@ -0,0 +1,7 @@
1
+ @import 'payload/scss';
2
+
3
+ .relationship-rich-text-button {
4
+ display: flex;
5
+ align-items: center;
6
+ height: 100%;
7
+ }
@@ -0,0 +1,93 @@
1
+ @import 'payload/scss';
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
+ }
29
+
30
+ &__label,
31
+ &__title {
32
+ white-space: nowrap;
33
+ text-overflow: ellipsis;
34
+ overflow: hidden;
35
+ line-height: 1 !important;
36
+ }
37
+
38
+ &__title {
39
+ font-weight: bold;
40
+ }
41
+
42
+ &__wrap {
43
+ flex-grow: 1;
44
+ overflow: hidden;
45
+ }
46
+
47
+ &--selected {
48
+ box-shadow: $focus-box-shadow;
49
+ outline: none;
50
+ }
51
+
52
+ .rich-text-relationship__doc-drawer-toggler {
53
+ text-decoration: underline;
54
+ pointer-events: all;
55
+ line-height: inherit;
56
+ }
57
+
58
+ &__actions {
59
+ display: flex;
60
+ align-items: center;
61
+ flex-shrink: 0;
62
+ margin-left: base(0.5);
63
+
64
+ & > *:not(:last-child) {
65
+ margin-right: base(0.25);
66
+ }
67
+ }
68
+
69
+ &__removeButton {
70
+ margin: 0;
71
+
72
+ line {
73
+ stroke-width: $style-stroke-width-m;
74
+ }
75
+
76
+ &:disabled {
77
+ color: var(--theme-elevation-300);
78
+ pointer-events: none;
79
+ }
80
+ }
81
+
82
+ &__doc-drawer-toggler,
83
+ &__list-drawer-toggler {
84
+ & > * {
85
+ margin: 0;
86
+ }
87
+
88
+ &:disabled {
89
+ color: var(--theme-elevation-300);
90
+ pointer-events: none;
91
+ }
92
+ }
93
+ }
@@ -0,0 +1,7 @@
1
+ @import 'payload/scss';
2
+
3
+ .rich-text-ul {
4
+ &[data-slate-node='element'] {
5
+ margin: base(0.625) 0;
6
+ }
7
+ }
@@ -0,0 +1,7 @@
1
+ @import 'payload/scss';
2
+
3
+ .upload-rich-text-button {
4
+ display: flex;
5
+ align-items: center;
6
+ height: 100%;
7
+ }
@@ -0,0 +1,147 @@
1
+ @import 'payload/scss';
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;
24
+ display: flex;
25
+ flex-direction: column;
26
+ width: 100%;
27
+ }
28
+
29
+ &__topRow {
30
+ display: flex;
31
+ }
32
+
33
+ &__thumbnail {
34
+ width: base(3.25);
35
+ height: auto;
36
+ position: relative;
37
+ overflow: hidden;
38
+ flex-shrink: 0;
39
+
40
+ img,
41
+ svg {
42
+ position: absolute;
43
+ object-fit: cover;
44
+ width: 100%;
45
+ height: 100%;
46
+ background-color: var(--theme-elevation-800);
47
+ }
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
+
59
+ &__actions {
60
+ display: flex;
61
+ align-items: center;
62
+ flex-shrink: 0;
63
+ margin-left: base(0.5);
64
+
65
+ .rich-text-upload__doc-drawer-toggler {
66
+ pointer-events: all;
67
+ }
68
+
69
+ & > *:not(:last-child) {
70
+ margin-right: base(0.25);
71
+ }
72
+ }
73
+
74
+ &__removeButton {
75
+ margin: 0;
76
+
77
+ line {
78
+ stroke-width: $style-stroke-width-m;
79
+ }
80
+
81
+ &:disabled {
82
+ color: var(--theme-elevation-300);
83
+ pointer-events: none;
84
+ }
85
+ }
86
+
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
+ }
95
+
96
+ &__doc-drawer-toggler {
97
+ text-decoration: underline;
98
+ }
99
+
100
+ &__doc-drawer-toggler,
101
+ &__list-drawer-toggler,
102
+ &__upload-drawer-toggler {
103
+ & > * {
104
+ margin: 0;
105
+ }
106
+
107
+ &:disabled {
108
+ color: var(--theme-elevation-300);
109
+ pointer-events: none;
110
+ }
111
+ }
112
+
113
+ &__collectionLabel {
114
+ overflow: hidden;
115
+ text-overflow: ellipsis;
116
+ white-space: nowrap;
117
+ }
118
+
119
+ &__bottomRow {
120
+ padding: base(0.5);
121
+ border-top: 1px solid var(--theme-elevation-100);
122
+ }
123
+
124
+ h5 {
125
+ white-space: nowrap;
126
+ text-overflow: ellipsis;
127
+ overflow: hidden;
128
+ }
129
+
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
+ }
136
+
137
+ &--selected {
138
+ box-shadow: $focus-box-shadow;
139
+ outline: none;
140
+ }
141
+
142
+ @include small-break {
143
+ &__topRowRightPanel {
144
+ padding: base(0.75) base(0.5);
145
+ }
146
+ }
147
+ }
@@ -0,0 +1,16 @@
1
+ @import 'payload/scss';
2
+
3
+ .icon--indent-left {
4
+ height: $baseline;
5
+ width: $baseline;
6
+
7
+ .stroke {
8
+ fill: none;
9
+ stroke: var(--theme-elevation-800);
10
+ stroke-width: $style-stroke-width-m;
11
+ }
12
+
13
+ .fill {
14
+ fill: var(--theme-elevation-800);
15
+ }
16
+ }
@@ -0,0 +1,16 @@
1
+ @import 'payload/scss';
2
+
3
+ .icon--indent-right {
4
+ height: $baseline;
5
+ width: $baseline;
6
+
7
+ .stroke {
8
+ fill: none;
9
+ stroke: var(--theme-elevation-800);
10
+ stroke-width: $style-stroke-width-m;
11
+ }
12
+
13
+ .fill {
14
+ fill: var(--theme-elevation-800);
15
+ }
16
+ }
@@ -0,0 +1,11 @@
1
+ @import 'payload/scss';
2
+
3
+ .icon--link {
4
+ width: $baseline;
5
+ height: $baseline;
6
+
7
+ .stroke {
8
+ stroke: var(--theme-elevation-800);
9
+ stroke-width: $style-stroke-width;
10
+ }
11
+ }
@@ -0,0 +1,12 @@
1
+ @import 'payload/scss';
2
+
3
+ .icon--relationship {
4
+ height: $baseline;
5
+ width: $baseline;
6
+
7
+ .stroke {
8
+ fill: none;
9
+ stroke: var(--theme-elevation-800);
10
+ stroke-width: $style-stroke-width-m;
11
+ }
12
+ }
@@ -0,0 +1,11 @@
1
+ @import 'payload/scss';
2
+
3
+ .icon--upload {
4
+ height: $baseline;
5
+ width: $baseline;
6
+
7
+ .fill {
8
+ fill: var(--theme-elevation-800);
9
+ stroke: none;
10
+ }
11
+ }
@@ -0,0 +1,193 @@
1
+ @import 'payload/scss';
2
+
3
+ .rich-text {
4
+ margin-bottom: base(2);
5
+ display: flex;
6
+ isolation: isolate;
7
+
8
+ &__toolbar {
9
+ @include blur-bg(var(--theme-elevation-0));
10
+ margin-bottom: $baseline;
11
+ border: $style-stroke-width-s solid var(--theme-elevation-150);
12
+ position: sticky;
13
+ z-index: 1;
14
+ top: var(--doc-controls-height);
15
+ }
16
+
17
+ &__toolbar-wrap {
18
+ padding: base(0.25);
19
+ display: flex;
20
+ flex-wrap: wrap;
21
+ align-items: stretch;
22
+ position: relative;
23
+ z-index: 1;
24
+
25
+ &:after {
26
+ content: ' ';
27
+ opacity: 0.8;
28
+ position: absolute;
29
+ top: calc(100% + 1px);
30
+ background: linear-gradient(var(--theme-elevation-0), transparent);
31
+ display: block;
32
+ left: -1px;
33
+ right: -1px;
34
+ height: base(1);
35
+ }
36
+ }
37
+
38
+ &__editor {
39
+ font-family: var(--font-serif);
40
+ font-size: base(0.625);
41
+
42
+ h1,
43
+ h2,
44
+ h3,
45
+ h4,
46
+ h5,
47
+ h6 {
48
+ font-family: var(--font-body);
49
+ line-height: 1.125;
50
+ }
51
+
52
+ h1[data-slate-node='element'] {
53
+ font-size: base(1.5);
54
+ margin: base(1) 0 base(0.5);
55
+ }
56
+
57
+ h2[data-slate-node='element'] {
58
+ font-size: base(1.25);
59
+ margin: base(1) 0 base(0.5);
60
+ }
61
+
62
+ h3[data-slate-node='element'] {
63
+ font-size: base(1.125);
64
+ margin: base(0.75) 0 base(0.5);
65
+ }
66
+
67
+ h4[data-slate-node='element'] {
68
+ font-size: base(1);
69
+ margin: base(0.5) 0 base(0.5);
70
+ }
71
+
72
+ h5[data-slate-node='element'] {
73
+ font-size: base(0.875);
74
+ margin: base(0.25) 0 base(0.25);
75
+ }
76
+
77
+ h6[data-slate-node='element'] {
78
+ font-size: base(0.75);
79
+ margin: base(0.25) 0 base(0.25);
80
+ }
81
+ }
82
+
83
+ &--gutter {
84
+ .rich-text__editor {
85
+ padding-left: $baseline;
86
+ border-left: 1px solid var(--theme-elevation-100);
87
+ }
88
+ }
89
+
90
+ &__input {
91
+ min-height: base(10);
92
+ }
93
+
94
+ &__wrap {
95
+ width: 100%;
96
+ position: relative;
97
+ }
98
+
99
+ &__wrapper {
100
+ width: 100%;
101
+ }
102
+
103
+ &--read-only {
104
+ .rich-text__editor {
105
+ background: var(--theme-elevation-200);
106
+ color: var(--theme-elevation-450);
107
+ padding: base(0.5);
108
+
109
+ .popup button {
110
+ display: none;
111
+ }
112
+ }
113
+
114
+ .rich-text__toolbar {
115
+ pointer-events: none;
116
+ position: relative;
117
+ top: 0;
118
+
119
+ &::after {
120
+ content: ' ';
121
+ position: absolute;
122
+ top: 0;
123
+ left: 0;
124
+ right: 0;
125
+ bottom: 0;
126
+ background-color: var(--theme-elevation-200);
127
+ opacity: 0.85;
128
+ z-index: 2;
129
+ backdrop-filter: unset;
130
+ }
131
+ }
132
+ }
133
+
134
+ &__button {
135
+ @extend %btn-reset;
136
+ padding: base(0.25);
137
+
138
+ svg {
139
+ @include color-svg(var(--theme-elevation-800));
140
+ width: base(0.75);
141
+ height: base(0.75);
142
+ }
143
+
144
+ &:hover {
145
+ background-color: var(--theme-elevation-100);
146
+ }
147
+
148
+ &__button--active,
149
+ &__button--active:hover {
150
+ background-color: var(--theme-elevation-150);
151
+ }
152
+ }
153
+
154
+ &__drawerIsOpen {
155
+ top: base(1);
156
+ }
157
+
158
+ @include mid-break {
159
+ &__toolbar {
160
+ top: base(3);
161
+ }
162
+
163
+ &__drawerIsOpen {
164
+ top: base(1);
165
+ }
166
+ }
167
+ }
168
+
169
+ [data-slate-node='element'] {
170
+ margin-bottom: base(0.25);
171
+ }
172
+
173
+ html[data-theme='light'] {
174
+ .rich-text {
175
+ &.error {
176
+ .rich-text__editor,
177
+ .rich-text__toolbar {
178
+ @include lightInputError;
179
+ }
180
+ }
181
+ }
182
+ }
183
+
184
+ html[data-theme='dark'] {
185
+ .rich-text {
186
+ &.error {
187
+ .rich-text__editor,
188
+ .rich-text__toolbar {
189
+ @include darkInputError;
190
+ }
191
+ }
192
+ }
193
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payloadcms/richtext-slate",
3
- "version": "1.0.0-beta.0",
3
+ "version": "1.0.0-beta.2",
4
4
  "description": "The officially supported Slate richtext adapter for Payload",
5
5
  "repository": "https://github.com/payloadcms/payload",
6
6
  "license": "MIT",
@@ -22,7 +22,7 @@
22
22
  "devDependencies": {
23
23
  "@types/node": "20.5.7",
24
24
  "@types/react": "18.2.15",
25
- "payload": "2.0.0-beta.1",
25
+ "payload": "2.0.0-beta.0",
26
26
  "@payloadcms/eslint-config": "0.0.1"
27
27
  },
28
28
  "exports": null,
@@ -33,8 +33,10 @@
33
33
  "dist"
34
34
  ],
35
35
  "scripts": {
36
- "build": "pnpm build:swc && pnpm build:types",
36
+ "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
37
37
  "build:swc": "swc ./src -d ./dist --config-file .swcrc",
38
- "build:types": "tsc --emitDeclarationOnly --outDir dist"
38
+ "build:types": "tsc --emitDeclarationOnly --outDir dist",
39
+ "clean": "rimraf {dist,*.tsbuildinfo}",
40
+ "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/"
39
41
  }
40
42
  }