playbook_ui 16.5.0.pre.alpha.RTEPOC15742 → 16.5.0.pre.alpha.RTEPOC15746
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +48 -7
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f599162befe12b1d2b32a47036c9053307dbd2619b25c72f586424d78eb4c372
|
|
4
|
+
data.tar.gz: b459294ff220e62c281889f1f010fc294b5d5b0f2a5d4d3641411348b487821a
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 2786fb058414a75c54559eb667ae880b81f6a92cca6b80857a65ba5c867ba25fb4c78158362314ceace901d3e49914a58ad6d432b0c9e5abb07e5f6481f5e245
|
|
7
|
+
data.tar.gz: 4327b11d15b5027a6053398acfd7483685837604d43ae38df749193699eea9363be1262bbd78d0b1cc35cbc7db93bd44e542e6321f05e53a35b5c5c5662da6c6
|
|
@@ -8,7 +8,21 @@
|
|
|
8
8
|
@import "../tokens/transition";
|
|
9
9
|
@import "previewer_mixin";
|
|
10
10
|
|
|
11
|
+
// Rails TipTap root: flex/grid children default to min-width: auto, so the toolbar’s
|
|
12
|
+
// intrinsic width can force horizontal page/dialog scroll. Pin the kit to the parent width.
|
|
13
|
+
[data-pb-rte-tiptap="true"] {
|
|
14
|
+
box-sizing: border-box;
|
|
15
|
+
display: block;
|
|
16
|
+
max-width: 100%;
|
|
17
|
+
min-width: 0;
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
|
|
11
21
|
.pb_rich_text_editor_kit {
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
max-width: 100%;
|
|
24
|
+
min-width: 0;
|
|
25
|
+
|
|
12
26
|
&.inline {
|
|
13
27
|
.toolbar {
|
|
14
28
|
opacity: 0;
|
|
@@ -84,15 +98,31 @@
|
|
|
84
98
|
top: 0;
|
|
85
99
|
z-index: 10;
|
|
86
100
|
}
|
|
101
|
+
|
|
102
|
+
.rte-editor-wrap {
|
|
103
|
+
box-sizing: border-box;
|
|
104
|
+
max-width: 100%;
|
|
105
|
+
min-width: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.pb_rich_text_editor_advanced_container {
|
|
109
|
+
max-width: 100%;
|
|
110
|
+
min-width: 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
87
113
|
.toolbar {
|
|
88
114
|
border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
|
|
89
115
|
border: 1px solid $input_border_default;
|
|
90
116
|
overflow-x: auto;
|
|
117
|
+
// Single horizontal row + scroll in narrow modals/sidebars (wrap used to stack controls vertically).
|
|
91
118
|
&_block {
|
|
92
|
-
display: flex;
|
|
93
|
-
flex-wrap: wrap;
|
|
94
119
|
align-items: center;
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-wrap: nowrap;
|
|
95
122
|
gap: $space_xs;
|
|
123
|
+
min-width: 0;
|
|
124
|
+
overflow-x: auto;
|
|
125
|
+
-webkit-overflow-scrolling: touch;
|
|
96
126
|
}
|
|
97
127
|
|
|
98
128
|
// Vertical section separators use ::before/::after with height: 100%. With
|
|
@@ -114,7 +144,9 @@
|
|
|
114
144
|
letter-spacing: normal;
|
|
115
145
|
line-height: 1;
|
|
116
146
|
min-height: unset;
|
|
117
|
-
|
|
147
|
+
max-width: 100%;
|
|
148
|
+
// Cap min-width so a narrow modal toolbar can scroll internally instead of growing the dialog.
|
|
149
|
+
min-width: min(100%, #{$space_xl * 5});
|
|
118
150
|
padding: ($space_xs - 1) $space_xs;
|
|
119
151
|
width: auto;
|
|
120
152
|
|
|
@@ -165,15 +197,19 @@
|
|
|
165
197
|
|
|
166
198
|
// Rails TipTap toolbar: mirror React Toolbar.tsx — <Flex paddingX="sm" paddingY="xxs" justify="between">.
|
|
167
199
|
&.rte-rails-toolbar-layout {
|
|
200
|
+
max-width: 100%;
|
|
201
|
+
min-width: 0;
|
|
202
|
+
|
|
168
203
|
.rte-rails-toolbar-row {
|
|
169
204
|
align-items: center;
|
|
170
205
|
box-sizing: border-box;
|
|
171
206
|
column-gap: 0;
|
|
172
207
|
display: flex;
|
|
173
|
-
flex-wrap:
|
|
208
|
+
flex-wrap: nowrap;
|
|
174
209
|
justify-content: flex-start;
|
|
210
|
+
min-width: 0;
|
|
175
211
|
padding: $space_xxs $space_sm;
|
|
176
|
-
row-gap:
|
|
212
|
+
row-gap: 0;
|
|
177
213
|
width: 100%;
|
|
178
214
|
}
|
|
179
215
|
|
|
@@ -181,9 +217,11 @@
|
|
|
181
217
|
align-items: center;
|
|
182
218
|
display: flex;
|
|
183
219
|
flex: 1 1 auto;
|
|
184
|
-
flex-wrap:
|
|
220
|
+
flex-wrap: nowrap;
|
|
185
221
|
gap: $space_xs;
|
|
186
222
|
min-width: 0;
|
|
223
|
+
overflow-x: auto;
|
|
224
|
+
-webkit-overflow-scrolling: touch;
|
|
187
225
|
}
|
|
188
226
|
|
|
189
227
|
.rte-toolbar-right {
|
|
@@ -206,9 +244,12 @@
|
|
|
206
244
|
background: $white;
|
|
207
245
|
border: 1px solid $input_border_default;
|
|
208
246
|
border-radius: $border_rad_heaviest;
|
|
247
|
+
box-sizing: border-box;
|
|
209
248
|
height: 100%;
|
|
210
|
-
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
|
211
249
|
line-height: $lh_loose;
|
|
250
|
+
overflow-wrap: anywhere;
|
|
251
|
+
padding: 1.25rem 1.5rem 1.5rem 1.5rem;
|
|
252
|
+
word-break: break-word;
|
|
212
253
|
@include transition_default;
|
|
213
254
|
:first-child {
|
|
214
255
|
margin-top: 0;
|