playbook_ui 12.16.0.pre.alpha.tiptaptestingpart1528 → 12.16.0.pre.alpha.tooltippositionprop566
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_card/docs/_card_background.jsx +1 -1
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +295 -8
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +42 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +17 -0
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +18 -1
- data/app/pb_kits/playbook/pb_image/docs/{_default_image.tsx → _default_image.jsx} +1 -1
- data/app/pb_kits/playbook/pb_nav/_item.tsx +6 -6
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +2 -2
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +9 -23
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +10 -9
- data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +29 -0
- data/lib/playbook/version.rb +1 -1
- metadata +3 -11
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +0 -49
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +0 -9
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +0 -62
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +0 -128
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +0 -45
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +0 -59
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +0 -192
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +0 -36
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1aa71e42598e3d4a2cc59995711033c0b2aabe7bb25a7c11254955f7c679a2ca
|
|
4
|
+
data.tar.gz: a2e6816d1ab2faa4bb7b650e8445ec7797edcd753267c68aa4a136ce7220935b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 11ac217ec0bfb4c58e087eaad581d77559b810589896f37bc96ab505c2aa2df6bcf0b4486ef646b681b241e8cbaf85efceee78685dd821f57d0555555d59b899
|
|
7
|
+
data.tar.gz: 6dae5b2762529cfab815e82c7b0be2d9455bd2a2809732ad1860b1db948626db4e7dba0b9b9108e73528e873dc1dbd92da82976bf735996780d93fe251c9939f
|
|
@@ -1,12 +1,299 @@
|
|
|
1
|
-
|
|
1
|
+
<% if !local_prop_data.present? %>
|
|
2
|
+
<div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
|
|
2
3
|
<%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
<%= pb_rails("card", props: { padding: "none" }) do %>
|
|
5
|
+
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
|
|
6
|
+
<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
|
|
7
|
+
<%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true }) %>
|
|
8
|
+
<% end %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<%= pb_rails("section_separator") %>
|
|
11
|
+
<%= pb_rails("card/card_body", props: {}) do %>
|
|
12
|
+
<%= pb_rails("table", props: {container: false, disable_hover: true }) do %>
|
|
13
|
+
<thead>
|
|
14
|
+
<tr>
|
|
15
|
+
<th>Props</th>
|
|
16
|
+
<th>Type</th>
|
|
17
|
+
<th>Values</th>
|
|
18
|
+
<th>Default</th>
|
|
19
|
+
</tr>
|
|
20
|
+
</thead>
|
|
21
|
+
<tbody>
|
|
22
|
+
<% global_prop_data.each do |key, value|%>
|
|
23
|
+
<tr>
|
|
24
|
+
<td>
|
|
25
|
+
<%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
|
|
26
|
+
</td>
|
|
27
|
+
<td>
|
|
28
|
+
<%= pb_rails("card", props: {
|
|
29
|
+
classname: "card",
|
|
30
|
+
padding: "xxs",
|
|
31
|
+
background: "light",
|
|
32
|
+
border_none: true,
|
|
33
|
+
border_radius: "sm"
|
|
34
|
+
}) do %>
|
|
35
|
+
<%= pb_rails("body", props: {
|
|
36
|
+
classname: "kearning"
|
|
37
|
+
}) do %>
|
|
38
|
+
<%= value[:type].downcase %>
|
|
39
|
+
<% end %>
|
|
40
|
+
<% end %>
|
|
41
|
+
</td>
|
|
42
|
+
<td>
|
|
43
|
+
<% if value[:values].present? %>
|
|
44
|
+
<% value[:values].each do |item| %>
|
|
45
|
+
<% if item != nil %>
|
|
46
|
+
<%= pb_rails("card", props: {
|
|
47
|
+
flex_direction: "row",
|
|
48
|
+
classname: "card",
|
|
49
|
+
padding: "xxs",
|
|
50
|
+
background: "light",
|
|
51
|
+
border_none: true,
|
|
52
|
+
border_radius: "sm",
|
|
53
|
+
margin: "xxs"
|
|
54
|
+
}) do %>
|
|
55
|
+
<%= pb_rails("body", props: {
|
|
56
|
+
classname: "kearning"
|
|
57
|
+
}) do %>
|
|
58
|
+
<%= item %>
|
|
59
|
+
<% end %>
|
|
60
|
+
<% end %>
|
|
61
|
+
<% end %>
|
|
62
|
+
<% end %>
|
|
63
|
+
<% end %>
|
|
64
|
+
</td>
|
|
65
|
+
<td>
|
|
66
|
+
<% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
|
|
67
|
+
<%= pb_rails("card", props: {
|
|
68
|
+
classname: "card",
|
|
69
|
+
padding: "xxs",
|
|
70
|
+
background: "light",
|
|
71
|
+
border_none: true,
|
|
72
|
+
border_radius: "sm"
|
|
73
|
+
}) do %>
|
|
74
|
+
<%= pb_rails("body", props: {
|
|
75
|
+
classname: "kearning"
|
|
76
|
+
}) do %>
|
|
77
|
+
<%= value[:default] %>
|
|
78
|
+
<% end %>
|
|
79
|
+
<% end %>
|
|
80
|
+
<% end %>
|
|
81
|
+
</td>
|
|
82
|
+
</tr>
|
|
83
|
+
<% end %>
|
|
84
|
+
</tbody>
|
|
85
|
+
<% end %>
|
|
86
|
+
<% end %>
|
|
87
|
+
<% end %>
|
|
88
|
+
</div>
|
|
89
|
+
<% else %>
|
|
90
|
+
<div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
|
|
91
|
+
<%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm" }) %>
|
|
92
|
+
<%= pb_rails("card", props: { padding: "none" }) do %>
|
|
93
|
+
<%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
|
|
94
|
+
<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
|
|
95
|
+
<% if local_prop_data.present? %>
|
|
96
|
+
<%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active" }) %>
|
|
97
|
+
<% end %>
|
|
98
|
+
<% if local_prop_data.present? %>
|
|
99
|
+
<%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active" }) %>
|
|
100
|
+
<% end %>
|
|
101
|
+
<%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active" }) %>
|
|
102
|
+
<%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active" }) %>
|
|
103
|
+
<% end %>
|
|
104
|
+
<% end %>
|
|
105
|
+
<%= pb_rails("section_separator") %>
|
|
106
|
+
<%= pb_rails("card/card_body", props: {}) do %>
|
|
107
|
+
<%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active"}) do %>
|
|
108
|
+
<thead>
|
|
109
|
+
<tr>
|
|
110
|
+
<th>Props</th>
|
|
111
|
+
<th>Type</th>
|
|
112
|
+
<th>Values</th>
|
|
113
|
+
<th>Default</th>
|
|
114
|
+
</tr>
|
|
115
|
+
</thead>
|
|
116
|
+
<tbody>
|
|
117
|
+
<% global_prop_data.each do |key, value|%>
|
|
118
|
+
<tr>
|
|
119
|
+
<td>
|
|
120
|
+
<%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
|
|
121
|
+
</td>
|
|
122
|
+
<td>
|
|
123
|
+
<%= pb_rails("card", props: {
|
|
124
|
+
classname: "card",
|
|
125
|
+
padding: "xxs",
|
|
126
|
+
background: "light",
|
|
127
|
+
border_none: true,
|
|
128
|
+
border_radius: "sm"
|
|
129
|
+
}) do %>
|
|
130
|
+
<%= pb_rails("body", props: {
|
|
131
|
+
classname: "kearning"
|
|
132
|
+
}) do %>
|
|
133
|
+
<%= value[:type].downcase %>
|
|
134
|
+
<% end %>
|
|
135
|
+
<% end %>
|
|
136
|
+
</td>
|
|
137
|
+
<td>
|
|
138
|
+
<% if value[:values].present? %>
|
|
139
|
+
<% value[:values].each do |item| %>
|
|
140
|
+
<% if item != nil %>
|
|
141
|
+
<%= pb_rails("card", props: {
|
|
142
|
+
flex_direction: "row",
|
|
143
|
+
classname: "card",
|
|
144
|
+
padding: "xxs",
|
|
145
|
+
background: "light",
|
|
146
|
+
border_none: true,
|
|
147
|
+
border_radius: "sm",
|
|
148
|
+
margin: "xxs"
|
|
149
|
+
}) do %>
|
|
150
|
+
<%= pb_rails("body", props: {
|
|
151
|
+
classname: "kearning"
|
|
152
|
+
}) do %>
|
|
153
|
+
<%= item %>
|
|
154
|
+
<% end %>
|
|
155
|
+
<% end %>
|
|
156
|
+
<% end %>
|
|
157
|
+
<% end %>
|
|
158
|
+
<% end %>
|
|
159
|
+
</td>
|
|
160
|
+
<td>
|
|
161
|
+
<% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
|
|
162
|
+
<%= pb_rails("card", props: {
|
|
163
|
+
classname: "card",
|
|
164
|
+
padding: "xxs",
|
|
165
|
+
background: "light",
|
|
166
|
+
border_none: true,
|
|
167
|
+
border_radius: "sm"
|
|
168
|
+
}) do %>
|
|
169
|
+
<%= pb_rails("body", props: {
|
|
170
|
+
classname: "kearning"
|
|
171
|
+
}) do %>
|
|
172
|
+
<%= value[:default] %>
|
|
173
|
+
<% end %>
|
|
174
|
+
<% end %>
|
|
175
|
+
<% end %>
|
|
176
|
+
</td>
|
|
177
|
+
</tr>
|
|
178
|
+
<% end %>
|
|
179
|
+
</tbody>
|
|
180
|
+
<% end %>
|
|
181
|
+
<%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active"}) do %>
|
|
182
|
+
<thead>
|
|
183
|
+
<tr>
|
|
184
|
+
<th>Props</th>
|
|
185
|
+
<th>Type</th>
|
|
186
|
+
<th>Values</th>
|
|
187
|
+
<th>Default</th>
|
|
188
|
+
</tr>
|
|
189
|
+
</thead>
|
|
190
|
+
<tbody>
|
|
191
|
+
<% local_prop_data.each do |key, value|%>
|
|
192
|
+
<tr>
|
|
193
|
+
<td>
|
|
194
|
+
<%= pb_rails("title", props: { text: key, tag: "h4", size: 4 }) %>
|
|
195
|
+
</td>
|
|
196
|
+
<td>
|
|
197
|
+
<%= pb_rails("card", props: {
|
|
198
|
+
classname: "card",
|
|
199
|
+
padding: "xxs",
|
|
200
|
+
background: "light",
|
|
201
|
+
border_none: true,
|
|
202
|
+
border_radius: "sm"
|
|
203
|
+
}) do %>
|
|
204
|
+
<%= pb_rails("body", props: {
|
|
205
|
+
classname: "kearning"
|
|
206
|
+
}) do %>
|
|
207
|
+
<%= value[:type].downcase %>
|
|
208
|
+
<% end %>
|
|
209
|
+
<% end %>
|
|
210
|
+
</td>
|
|
211
|
+
<td>
|
|
212
|
+
<% if value[:values].present? %>
|
|
213
|
+
<% value[:values].each do |item| %>
|
|
214
|
+
<% if item != nil %>
|
|
215
|
+
<%= pb_rails("card", props: {
|
|
216
|
+
flex_direction: "row",
|
|
217
|
+
classname: "card",
|
|
218
|
+
padding: "xxs",
|
|
219
|
+
background: "light",
|
|
220
|
+
border_none: true,
|
|
221
|
+
border_radius: "sm",
|
|
222
|
+
margin: "xxs"
|
|
223
|
+
}) do %>
|
|
224
|
+
<%= pb_rails("body", props: {
|
|
225
|
+
classname: "kearning"
|
|
226
|
+
}) do %>
|
|
227
|
+
<%= item %>
|
|
228
|
+
<% end %>
|
|
229
|
+
<% end %>
|
|
230
|
+
<% end %>
|
|
231
|
+
<% end %>
|
|
232
|
+
<% end %>
|
|
233
|
+
</td>
|
|
234
|
+
<td>
|
|
235
|
+
<% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
|
|
236
|
+
<%= pb_rails("card", props: {
|
|
237
|
+
classname: "card",
|
|
238
|
+
padding: "xxs",
|
|
239
|
+
background: "light",
|
|
240
|
+
border_none: true,
|
|
241
|
+
border_radius: "sm"
|
|
242
|
+
}) do %>
|
|
243
|
+
<%= pb_rails("body", props: {
|
|
244
|
+
classname: "kearning"
|
|
245
|
+
}) do %>
|
|
246
|
+
<%= value[:default] %>
|
|
247
|
+
<% end %>
|
|
248
|
+
<% end %>
|
|
249
|
+
<% end %>
|
|
250
|
+
</td>
|
|
251
|
+
</tr>
|
|
252
|
+
<% end %>
|
|
253
|
+
</tbody>
|
|
8
254
|
<% end %>
|
|
9
255
|
<% end %>
|
|
10
256
|
<% end %>
|
|
11
|
-
|
|
12
|
-
|
|
257
|
+
</div>
|
|
258
|
+
<% end %>
|
|
259
|
+
|
|
260
|
+
<script>
|
|
261
|
+
|
|
262
|
+
const globalNavAndTable = document.querySelectorAll('.global-active');
|
|
263
|
+
const localNavAndTable = document.querySelectorAll('.local-active');
|
|
264
|
+
|
|
265
|
+
globalNavAndTable.forEach(element => {
|
|
266
|
+
element.style.display = 'none';
|
|
267
|
+
});
|
|
268
|
+
|
|
269
|
+
const globalButton = document.getElementById("global-button");
|
|
270
|
+
if (globalButton) {
|
|
271
|
+
globalButton.addEventListener("click", showGlobal);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
const localButton = document.getElementById("local-button");
|
|
275
|
+
if (localButton) {
|
|
276
|
+
localButton.addEventListener("click", showLocal);
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
function showGlobal() {
|
|
280
|
+
localNavAndTable.forEach(element => {
|
|
281
|
+
element.style.display = 'none';
|
|
282
|
+
});
|
|
283
|
+
|
|
284
|
+
globalNavAndTable.forEach(element => {
|
|
285
|
+
element.style.display = 'table';
|
|
286
|
+
});
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
function showLocal() {
|
|
290
|
+
localNavAndTable.forEach(element => {
|
|
291
|
+
element.style.display = 'table';
|
|
292
|
+
});
|
|
293
|
+
|
|
294
|
+
globalNavAndTable.forEach(element => {
|
|
295
|
+
element.style.display = 'none';
|
|
296
|
+
});
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
</script>
|
|
@@ -5,6 +5,48 @@ module Playbook
|
|
|
5
5
|
class KitApi < Playbook::KitBase
|
|
6
6
|
prop :kit, type: Playbook::Props::String, required: true
|
|
7
7
|
|
|
8
|
+
def kit_local_props
|
|
9
|
+
local = []
|
|
10
|
+
kit_props.each do |key, value|
|
|
11
|
+
value.kit != Playbook::KitBase && local.push({ key: key, value: value })
|
|
12
|
+
end
|
|
13
|
+
local
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
def local_prop_data
|
|
17
|
+
local_props = {}
|
|
18
|
+
|
|
19
|
+
kit_local_props.each do |key, _value|
|
|
20
|
+
name = key[:value].instance_variable_get(:@name)
|
|
21
|
+
type = key[:value].class.to_s.split("::").last
|
|
22
|
+
default = key[:value].instance_variable_get(:@default)
|
|
23
|
+
values = key[:value].instance_variable_get(:@values)
|
|
24
|
+
local_props[name.to_sym] = { "type": type, "default": default, "values": values }
|
|
25
|
+
end
|
|
26
|
+
local_props
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
def kit_global_props
|
|
30
|
+
global = []
|
|
31
|
+
kit_props.each do |key, value|
|
|
32
|
+
value.kit == Playbook::KitBase && global.push({ key: key, value: value })
|
|
33
|
+
end
|
|
34
|
+
global
|
|
35
|
+
end
|
|
36
|
+
|
|
37
|
+
def global_prop_data
|
|
38
|
+
global_props = {}
|
|
39
|
+
|
|
40
|
+
kit_global_props.each do |key, _value|
|
|
41
|
+
name = key[:value].instance_variable_get(:@name)
|
|
42
|
+
type = key[:value].class.to_s.split("::").last
|
|
43
|
+
default = key[:value].instance_variable_get(:@default)
|
|
44
|
+
values = key[:value].instance_variable_get(:@values)
|
|
45
|
+
global_props[name.to_sym] = { "type": type, "default": default, "values": values }
|
|
46
|
+
end
|
|
47
|
+
global_props
|
|
48
|
+
end
|
|
49
|
+
|
|
8
50
|
def kit_props
|
|
9
51
|
kit_class.props
|
|
10
52
|
end
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
<% example_html = ERB.new(example).result %>
|
|
2
|
+
|
|
1
3
|
<%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
|
|
2
4
|
<div class="pb--kit-example">
|
|
3
5
|
<%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
|
|
@@ -13,6 +15,13 @@
|
|
|
13
15
|
<div id="code-wrapper">
|
|
14
16
|
<div class="pb--codeControls">
|
|
15
17
|
<ul>
|
|
18
|
+
<% if type == "rails" %>
|
|
19
|
+
<li>
|
|
20
|
+
<a href="#" id="copy-<%= example_key %>-trigger" onclick="copyOnClick(`<%= example_html %>`, `copy-<%= example_key %>`)">
|
|
21
|
+
Copy HTML
|
|
22
|
+
</a>
|
|
23
|
+
</li>
|
|
24
|
+
<% end %>
|
|
16
25
|
<li>
|
|
17
26
|
<a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
|
|
18
27
|
</li>
|
|
@@ -26,3 +35,11 @@
|
|
|
26
35
|
</div>
|
|
27
36
|
<% end %>
|
|
28
37
|
<% end %>
|
|
38
|
+
|
|
39
|
+
<script>
|
|
40
|
+
function copyOnClick(content, elementID) {
|
|
41
|
+
copyContent(content)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
</script>
|
|
45
|
+
|
|
@@ -33,12 +33,29 @@ module Playbook
|
|
|
33
33
|
def source
|
|
34
34
|
@source ||= begin
|
|
35
35
|
extension = type == "react" ? "jsx" : "html.erb"
|
|
36
|
-
read_kit_file("_#{example_key}.#{extension}")
|
|
36
|
+
stringified_code = read_kit_file("_#{example_key}.#{extension}")
|
|
37
|
+
sanitize_code(stringified_code)
|
|
37
38
|
end
|
|
38
39
|
end
|
|
39
40
|
|
|
40
41
|
private
|
|
41
42
|
|
|
43
|
+
def sanitize_code(stringified_code)
|
|
44
|
+
stringified_code = stringified_code.gsub('"../.."', '"playbook-ui"')
|
|
45
|
+
.gsub('"../../"', '"playbook-ui"')
|
|
46
|
+
.gsub("'../../'", "'playbook-ui'")
|
|
47
|
+
.gsub("'../..'", "'playbook-ui'")
|
|
48
|
+
.gsub(%r{from "../.*}, "from 'playbook-ui'")
|
|
49
|
+
.gsub(%r{from '../.*}, "from 'playbook-ui'")
|
|
50
|
+
stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
|
|
51
|
+
if stringified_code.include?("props: { ")
|
|
52
|
+
stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
|
|
53
|
+
elsif type == "rails" && dark
|
|
54
|
+
stringified_code = stringified_code.gsub("props: {", "props: {\n dark: true,")
|
|
55
|
+
end
|
|
56
|
+
stringified_code
|
|
57
|
+
end
|
|
58
|
+
|
|
42
59
|
def read_kit_file(*args)
|
|
43
60
|
path = ::Playbook.kit_path(kit, "docs", *args)
|
|
44
61
|
path.exist? ? path.read : ""
|
|
@@ -2,7 +2,7 @@ import React from 'react'
|
|
|
2
2
|
import classnames from 'classnames'
|
|
3
3
|
|
|
4
4
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
5
|
-
import { globalProps
|
|
5
|
+
import { globalProps } from '../utilities/globalProps'
|
|
6
6
|
|
|
7
7
|
import Icon from '../pb_icon/_icon'
|
|
8
8
|
import Image from '../pb_image/_image'
|
|
@@ -13,15 +13,15 @@ type NavItemProps = {
|
|
|
13
13
|
children?: React.ReactNode[] | React.ReactNode,
|
|
14
14
|
className?: string,
|
|
15
15
|
data?: object,
|
|
16
|
-
iconLeft
|
|
17
|
-
iconRight
|
|
16
|
+
iconLeft: string,
|
|
17
|
+
iconRight: string,
|
|
18
18
|
id?: string,
|
|
19
|
-
imageUrl
|
|
20
|
-
link
|
|
19
|
+
imageUrl: string,
|
|
20
|
+
link: string,
|
|
21
21
|
onClick?: React.MouseEventHandler<HTMLElement>,
|
|
22
22
|
target?: '_blank' | '_self' | '_parent' | '_top',
|
|
23
23
|
text: string,
|
|
24
|
-
}
|
|
24
|
+
}
|
|
25
25
|
|
|
26
26
|
const NavItem = (props: NavItemProps) => {
|
|
27
27
|
const {
|
|
@@ -14,7 +14,6 @@ try {
|
|
|
14
14
|
} catch (_e) { /* do nothing */ }
|
|
15
15
|
|
|
16
16
|
import { TrixEditor } from "react-trix"
|
|
17
|
-
import EditorToolbar from './TipTap/Toolbar'
|
|
18
17
|
|
|
19
18
|
type Editor = {
|
|
20
19
|
attributeIsActive?: Function,
|
|
@@ -28,9 +27,7 @@ type Editor = {
|
|
|
28
27
|
|
|
29
28
|
type RichTextEditorProps = {
|
|
30
29
|
aria?: { [key: string]: string },
|
|
31
|
-
advancedEditor?: any,
|
|
32
30
|
toolbarBottom?: Boolean,
|
|
33
|
-
children?: React.ReactNode | React.ReactNode[]
|
|
34
31
|
className?: string,
|
|
35
32
|
data?: { [key: string]: string },
|
|
36
33
|
focus?: boolean,
|
|
@@ -48,9 +45,7 @@ type RichTextEditorProps = {
|
|
|
48
45
|
const RichTextEditor = (props: RichTextEditorProps) => {
|
|
49
46
|
const {
|
|
50
47
|
aria = {},
|
|
51
|
-
advancedEditor,
|
|
52
48
|
toolbarBottom = false,
|
|
53
|
-
children,
|
|
54
49
|
className,
|
|
55
50
|
data = {},
|
|
56
51
|
focus = false,
|
|
@@ -157,24 +152,15 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
|
157
152
|
{...dataProps}
|
|
158
153
|
className={css}
|
|
159
154
|
>
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
fileParamName={name}
|
|
170
|
-
mergeTags={[]}
|
|
171
|
-
onChange={onChange}
|
|
172
|
-
onEditorReady={handleOnEditorReady}
|
|
173
|
-
placeholder={placeholder}
|
|
174
|
-
value={value}
|
|
175
|
-
/>
|
|
176
|
-
)
|
|
177
|
-
}
|
|
155
|
+
<TrixEditor
|
|
156
|
+
className=""
|
|
157
|
+
fileParamName={name}
|
|
158
|
+
mergeTags={[]}
|
|
159
|
+
onChange={onChange}
|
|
160
|
+
onEditorReady={handleOnEditorReady}
|
|
161
|
+
placeholder={placeholder}
|
|
162
|
+
value={value}
|
|
163
|
+
/>
|
|
178
164
|
</div>
|
|
179
165
|
)
|
|
180
166
|
}
|
|
@@ -7,4 +7,3 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
|
|
|
7
7
|
export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
|
|
8
8
|
export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
|
|
9
9
|
export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
|
|
10
|
-
export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
offset,
|
|
7
7
|
Placement,
|
|
8
8
|
safePolygon,
|
|
9
|
-
shift,
|
|
9
|
+
shift,
|
|
10
10
|
useFloating,
|
|
11
11
|
useHover,
|
|
12
12
|
useInteractions,
|
|
@@ -17,9 +17,6 @@ import { GlobalProps, globalProps } from "../utilities/globalProps"
|
|
|
17
17
|
import { buildAriaProps, buildDataProps } from "../utilities/props"
|
|
18
18
|
import Flex from "../pb_flex/_flex"
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
20
|
type TooltipProps = {
|
|
24
21
|
aria?: { [key: string]: string },
|
|
25
22
|
className?: string | string[],
|
|
@@ -29,8 +26,8 @@ type TooltipProps = {
|
|
|
29
26
|
icon?: string,
|
|
30
27
|
interaction?: boolean,
|
|
31
28
|
placement?: Placement,
|
|
29
|
+
position: "absolute" | "fixed";
|
|
32
30
|
text: string,
|
|
33
|
-
zIndex?: Pick<GlobalProps, "ZIndex">,
|
|
34
31
|
} & GlobalProps
|
|
35
32
|
|
|
36
33
|
const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
@@ -43,6 +40,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
43
40
|
icon = null,
|
|
44
41
|
interaction = false,
|
|
45
42
|
placement: preferredPlacement = "top",
|
|
43
|
+
position = "absolute",
|
|
46
44
|
text,
|
|
47
45
|
zIndex,
|
|
48
46
|
...rest
|
|
@@ -50,24 +48,26 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
50
48
|
|
|
51
49
|
const dataProps: { [key: string]: any } = buildDataProps(data)
|
|
52
50
|
const ariaProps: { [key: string]: any } = buildAriaProps(aria)
|
|
53
|
-
|
|
51
|
+
|
|
54
52
|
const css = classnames(
|
|
55
53
|
globalProps({...rest}),
|
|
56
54
|
className,
|
|
57
55
|
)
|
|
58
56
|
const [open, setOpen] = useState(false)
|
|
59
57
|
const arrowRef = useRef(null)
|
|
60
|
-
const {
|
|
61
58
|
|
|
59
|
+
|
|
60
|
+
const {
|
|
62
61
|
context,
|
|
63
62
|
floating,
|
|
64
|
-
middlewareData: { arrow: { x: arrowX, y: arrowY } = {}
|
|
63
|
+
middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, },
|
|
65
64
|
placement,
|
|
66
65
|
reference,
|
|
67
66
|
strategy,
|
|
68
67
|
x,
|
|
69
68
|
y,
|
|
70
69
|
} = useFloating({
|
|
70
|
+
strategy: position,
|
|
71
71
|
middleware: [
|
|
72
72
|
arrow({
|
|
73
73
|
element: arrowRef,
|
|
@@ -87,6 +87,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
87
87
|
placement: preferredPlacement
|
|
88
88
|
})
|
|
89
89
|
|
|
90
|
+
|
|
90
91
|
const { getFloatingProps } = useInteractions([
|
|
91
92
|
useHover(context, {
|
|
92
93
|
delay,
|
|
@@ -142,7 +143,7 @@ const Tooltip = (props: TooltipProps): React.ReactElement => {
|
|
|
142
143
|
className="arrow_bg"
|
|
143
144
|
ref={arrowRef}
|
|
144
145
|
style={{
|
|
145
|
-
position:
|
|
146
|
+
position: "absolute",
|
|
146
147
|
left: arrowX != null ? `${arrowX}px` : "",
|
|
147
148
|
top: arrowY != null ? `${arrowY}px` : "",
|
|
148
149
|
[staticSide]: "-5px",
|
|
@@ -65,3 +65,32 @@ test("closes on mouseleave", async () => {
|
|
|
65
65
|
|
|
66
66
|
cleanup();
|
|
67
67
|
});
|
|
68
|
+
|
|
69
|
+
test("has default position absolute", async () => {
|
|
70
|
+
render(<TooltipTest />);
|
|
71
|
+
|
|
72
|
+
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
|
73
|
+
await waitFor(() => {
|
|
74
|
+
expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "absolute"});
|
|
75
|
+
cleanup();
|
|
76
|
+
})
|
|
77
|
+
|
|
78
|
+
cleanup();
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
test("has position fixed", async () => {
|
|
82
|
+
render(
|
|
83
|
+
<Tooltip
|
|
84
|
+
data={{ testid: "fixed-position-test" }}
|
|
85
|
+
position="fixed"
|
|
86
|
+
/>
|
|
87
|
+
);
|
|
88
|
+
|
|
89
|
+
fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
|
|
90
|
+
await waitFor(() => {
|
|
91
|
+
expect(screen.queryByRole("tooltip")).toHaveStyle({"position": "fixed"});
|
|
92
|
+
cleanup();
|
|
93
|
+
})
|
|
94
|
+
|
|
95
|
+
cleanup();
|
|
96
|
+
});
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 12.16.0.pre.alpha.
|
|
4
|
+
version: 12.16.0.pre.alpha.tooltippositionprop566
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2023-04-
|
|
12
|
+
date: 2023-04-27 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -1221,7 +1221,7 @@ files:
|
|
|
1221
1221
|
- app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
|
|
1222
1222
|
- app/pb_kits/playbook/pb_image/docs/_custom_error_image.jsx
|
|
1223
1223
|
- app/pb_kits/playbook/pb_image/docs/_default_image.html.erb
|
|
1224
|
-
- app/pb_kits/playbook/pb_image/docs/_default_image.
|
|
1224
|
+
- app/pb_kits/playbook/pb_image/docs/_default_image.jsx
|
|
1225
1225
|
- app/pb_kits/playbook/pb_image/docs/_description.md
|
|
1226
1226
|
- app/pb_kits/playbook/pb_image/docs/_rounded_image.html.erb
|
|
1227
1227
|
- app/pb_kits/playbook/pb_image/docs/_rounded_image.jsx
|
|
@@ -1717,17 +1717,9 @@ files:
|
|
|
1717
1717
|
- app/pb_kits/playbook/pb_radio/radio.html.erb
|
|
1718
1718
|
- app/pb_kits/playbook/pb_radio/radio.rb
|
|
1719
1719
|
- app/pb_kits/playbook/pb_radio/radio.test.js
|
|
1720
|
-
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx
|
|
1721
|
-
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts
|
|
1722
|
-
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx
|
|
1723
|
-
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
|
|
1724
|
-
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
|
|
1725
|
-
- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx
|
|
1726
1720
|
- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
|
|
1727
1721
|
- app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
|
|
1728
|
-
- app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
|
|
1729
1722
|
- app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
|
|
1730
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
|
|
1731
1723
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
|
|
1732
1724
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
|
|
1733
1725
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
import Icon from "../../pb_icon/_icon";
|
|
4
|
-
import Flex from "../../pb_flex/_flex";
|
|
5
|
-
import Tooltip from "../../pb_tooltip/_tooltip";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
type EditorButtonProps = {
|
|
9
|
-
classname?: string,
|
|
10
|
-
onclick?: () => {} | void,
|
|
11
|
-
icon?: string;
|
|
12
|
-
text?: string;
|
|
13
|
-
disable?: boolean
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
const EditorButton = ({
|
|
17
|
-
classname,
|
|
18
|
-
disable,
|
|
19
|
-
onclick,
|
|
20
|
-
icon,
|
|
21
|
-
text,
|
|
22
|
-
}: EditorButtonProps) => {
|
|
23
|
-
return (
|
|
24
|
-
<Tooltip
|
|
25
|
-
delay={{
|
|
26
|
-
open: 2000
|
|
27
|
-
}}
|
|
28
|
-
interaction
|
|
29
|
-
placement="top"
|
|
30
|
-
text={text}
|
|
31
|
-
>
|
|
32
|
-
<button
|
|
33
|
-
className={classname}
|
|
34
|
-
onClick={onclick}
|
|
35
|
-
disabled={disable}
|
|
36
|
-
>
|
|
37
|
-
<Flex
|
|
38
|
-
align="center"
|
|
39
|
-
className="toolbar_button_icon"
|
|
40
|
-
justify="center"
|
|
41
|
-
>
|
|
42
|
-
<Icon icon={icon} size="lg" />
|
|
43
|
-
</Flex>
|
|
44
|
-
</button>
|
|
45
|
-
</Tooltip>
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export default EditorButton
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Background from "../../pb_background/_background";
|
|
3
|
-
import Flex from "../../pb_flex/_flex";
|
|
4
|
-
import FlexItem from "../../pb_flex/_flex_item";
|
|
5
|
-
import SectionSeparator from "../../pb_section_separator/_section_separator";
|
|
6
|
-
|
|
7
|
-
import EditorButton from "./EditorButton";
|
|
8
|
-
import ToolbarDropdown from "./ToolbarDropdown";
|
|
9
|
-
import ToolbarNodes from "./ToolbarNodes";
|
|
10
|
-
import { ToolbarTypes } from "./EditorTypes";
|
|
11
|
-
import ToolbarHistoryItems from "./ToolbarHistory";
|
|
12
|
-
|
|
13
|
-
const EditorToolbar = ({ editor }:any) => {
|
|
14
|
-
const toolbaritems = [
|
|
15
|
-
{
|
|
16
|
-
icon: "bold",
|
|
17
|
-
text: "Bold",
|
|
18
|
-
classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
|
|
19
|
-
onclick:()=>editor.chain().focus().toggleBold().run(),
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
icon: "italic",
|
|
23
|
-
text: "Italic",
|
|
24
|
-
classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
|
|
25
|
-
onclick:() => editor.chain().focus().toggleItalic().run(),
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
icon: "strikethrough",
|
|
29
|
-
text: "Strikethrough",
|
|
30
|
-
classname:`toolbar_button ${editor.isActive('strike') ? 'is-active' : ''}`,
|
|
31
|
-
onclick:() => editor.chain().focus().toggleStrike().run(),
|
|
32
|
-
},
|
|
33
|
-
]
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<Background backgroundColor="white" className="toolbar">
|
|
37
|
-
<Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
|
|
38
|
-
<FlexItem className="toolbar_block" displayFlex>
|
|
39
|
-
<ToolbarDropdown editor={editor}/>
|
|
40
|
-
<SectionSeparator orientation="vertical" />
|
|
41
|
-
{toolbaritems && toolbaritems.map(
|
|
42
|
-
({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
|
|
43
|
-
<EditorButton
|
|
44
|
-
classname={classname}
|
|
45
|
-
icon={icon}
|
|
46
|
-
key={index}
|
|
47
|
-
text={text}
|
|
48
|
-
onclick={onclick}
|
|
49
|
-
/>
|
|
50
|
-
)
|
|
51
|
-
)}
|
|
52
|
-
<SectionSeparator orientation="vertical" />
|
|
53
|
-
<ToolbarNodes editor={editor} />
|
|
54
|
-
</FlexItem>
|
|
55
|
-
<ToolbarHistoryItems editor={editor} />
|
|
56
|
-
</Flex>
|
|
57
|
-
{/* <SectionSeparator /> */}
|
|
58
|
-
</Background>
|
|
59
|
-
);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
export default EditorToolbar
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
|
|
3
|
-
import Flex from '../../pb_flex/_flex'
|
|
4
|
-
import PbReactPopover from '../../pb_popover/_popover'
|
|
5
|
-
import Button from '../../pb_button/_button'
|
|
6
|
-
import Icon from '../../pb_icon/_icon'
|
|
7
|
-
import Nav from '../../pb_nav/_nav'
|
|
8
|
-
import NavItem from '../../pb_nav/_item'
|
|
9
|
-
|
|
10
|
-
import { ToolbarTypes } from './EditorTypes'
|
|
11
|
-
|
|
12
|
-
const ToolbarDropdown = ({editor}: any) => {
|
|
13
|
-
const [showPopover, setShowPopover] = useState(false)
|
|
14
|
-
const [activeItem, setActiveItem] = useState({text: "Paragraph", icon: "paragraph"})
|
|
15
|
-
|
|
16
|
-
const toolbarDropdownItems = [
|
|
17
|
-
{
|
|
18
|
-
node: "paragraph",
|
|
19
|
-
icon: "paragraph",
|
|
20
|
-
isActive: editor.isActive("paragraph"),
|
|
21
|
-
text: "Paragraph",
|
|
22
|
-
onclick: () => editor.chain().focus().setParagraph().run(),
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
node: "heading-1",
|
|
26
|
-
icon: "h1",
|
|
27
|
-
isActive: editor.isActive("heading", {level: 1}),
|
|
28
|
-
text: "Heading 1",
|
|
29
|
-
onclick: () => editor.chain().focus().toggleHeading({level:1}).run(),
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
node: "heading-2",
|
|
33
|
-
icon: "h2",
|
|
34
|
-
isActive: editor.isActive("heading", {level: 2}),
|
|
35
|
-
text: "Heading 2",
|
|
36
|
-
onclick: () => editor.chain().focus().toggleHeading({level:2}).run(),
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
node: "heading-3",
|
|
40
|
-
icon: "h3",
|
|
41
|
-
isActive: editor.isActive("heading", {level: 3}),
|
|
42
|
-
text: "Heading 3",
|
|
43
|
-
onclick: () => editor.chain().focus().toggleHeading({level:3}).run(),
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
node: "bulletList",
|
|
47
|
-
icon: "list",
|
|
48
|
-
isActive: editor.isActive("bulletList"),
|
|
49
|
-
text: "Bullet List",
|
|
50
|
-
onclick: () => editor.chain().focus().toggleBulletList().run(),
|
|
51
|
-
},
|
|
52
|
-
{
|
|
53
|
-
node: "orderedList",
|
|
54
|
-
icon: "list-ol",
|
|
55
|
-
isActive: editor.isActive("orderedList"),
|
|
56
|
-
text: "Ordered List",
|
|
57
|
-
onclick: () => editor.chain().focus().toggleOrderedList().run()
|
|
58
|
-
,
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
node: "blockquote",
|
|
62
|
-
icon: "block-quote",
|
|
63
|
-
isActive: editor.isActive("blockquote"),
|
|
64
|
-
text: "Block Quote",
|
|
65
|
-
onclick: () => editor.chain().focus().toggleBlockquote().run(),
|
|
66
|
-
},
|
|
67
|
-
]
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
const handleTogglePopover = () => {
|
|
71
|
-
setShowPopover(true)
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
const handlePopoverClose = (shouldClosePopover: boolean) => {
|
|
75
|
-
setShowPopover(!shouldClosePopover)
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
const popoverReference = (
|
|
79
|
-
<Button className="editor-dropdown-button"
|
|
80
|
-
onClick={handleTogglePopover}
|
|
81
|
-
variant="secondary"
|
|
82
|
-
>
|
|
83
|
-
<Flex align="center"
|
|
84
|
-
key={activeItem ? activeItem.icon : toolbarDropdownItems[0].icon}
|
|
85
|
-
gap="xs"
|
|
86
|
-
>
|
|
87
|
-
<Icon icon={activeItem ? activeItem.icon : toolbarDropdownItems[0].icon} size='lg'/>
|
|
88
|
-
{activeItem.text}
|
|
89
|
-
<Flex
|
|
90
|
-
className={showPopover ? "fa-flip-vertical" : ""}
|
|
91
|
-
display="inline_flex"
|
|
92
|
-
>
|
|
93
|
-
<Icon
|
|
94
|
-
fixedWidth
|
|
95
|
-
icon="angle-down"
|
|
96
|
-
margin-left="xs"
|
|
97
|
-
/>
|
|
98
|
-
</Flex>
|
|
99
|
-
</Flex>
|
|
100
|
-
</Button>
|
|
101
|
-
)
|
|
102
|
-
|
|
103
|
-
return (
|
|
104
|
-
<PbReactPopover
|
|
105
|
-
closeOnClick='outside'
|
|
106
|
-
padding='none'
|
|
107
|
-
placement="bottom"
|
|
108
|
-
reference={popoverReference}
|
|
109
|
-
shouldClosePopover={handlePopoverClose}
|
|
110
|
-
show={showPopover}
|
|
111
|
-
>
|
|
112
|
-
<Nav variant="subtle">
|
|
113
|
-
{toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
|
|
114
|
-
<NavItem
|
|
115
|
-
cursor="pointer"
|
|
116
|
-
className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "active" : ""}`}
|
|
117
|
-
iconLeft={icon}
|
|
118
|
-
key={`${text}_${index}`}
|
|
119
|
-
onClick={()=> {onclick(); setShowPopover(false); setActiveItem({text:text, icon:icon})}}
|
|
120
|
-
text={text}
|
|
121
|
-
/>
|
|
122
|
-
))}
|
|
123
|
-
</Nav>
|
|
124
|
-
</PbReactPopover>
|
|
125
|
-
)
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
export default ToolbarDropdown
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import FlexItem from "../../pb_flex/_flex_item";
|
|
3
|
-
import EditorButton from "./EditorButton";
|
|
4
|
-
import { ToolbarTypes } from "./EditorTypes";
|
|
5
|
-
|
|
6
|
-
const ToolbarHistoryItems = ({editor}:any) => {
|
|
7
|
-
|
|
8
|
-
const toolbarHistoryItems = [
|
|
9
|
-
{
|
|
10
|
-
classname: `toolbar_button`,
|
|
11
|
-
icon: "undo",
|
|
12
|
-
text: "Undo",
|
|
13
|
-
onclick: () => editor.chain().focus().undo().run(),
|
|
14
|
-
disable: !editor.can().chain().focus().undo().run()
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
classname: `toolbar_button`,
|
|
18
|
-
icon: "redo",
|
|
19
|
-
text: "Redo",
|
|
20
|
-
onclick: () => editor.chain().focus().redo().run(),
|
|
21
|
-
disable: !editor.can().chain().focus().redo().run()
|
|
22
|
-
},
|
|
23
|
-
];
|
|
24
|
-
|
|
25
|
-
return (
|
|
26
|
-
<>
|
|
27
|
-
<FlexItem displayFlex>
|
|
28
|
-
{toolbarHistoryItems.map(
|
|
29
|
-
({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
|
|
30
|
-
<EditorButton
|
|
31
|
-
classname={classname}
|
|
32
|
-
onclick={onclick}
|
|
33
|
-
disable={disable}
|
|
34
|
-
icon={icon}
|
|
35
|
-
key={index}
|
|
36
|
-
text={text}
|
|
37
|
-
/>
|
|
38
|
-
)
|
|
39
|
-
)}
|
|
40
|
-
</FlexItem>
|
|
41
|
-
</>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
export default ToolbarHistoryItems
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import React, {useCallback} from "react";
|
|
2
|
-
import EditorButton from "./EditorButton";
|
|
3
|
-
import { ToolbarTypes } from "./EditorTypes";
|
|
4
|
-
|
|
5
|
-
const ToolbarNodes = ({editor}:any) => {
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
8
|
-
const setLink = useCallback(() => {
|
|
9
|
-
const previousUrl = editor.getAttributes("link").href;
|
|
10
|
-
const url = window.prompt("URL", previousUrl);
|
|
11
|
-
|
|
12
|
-
// cancelled
|
|
13
|
-
if (url === null) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// empty
|
|
18
|
-
if (url === "") {
|
|
19
|
-
editor.chain().focus().extendMarkRange("link").unsetLink().run();
|
|
20
|
-
|
|
21
|
-
return;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// update link
|
|
25
|
-
editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
|
|
26
|
-
}, [editor]);
|
|
27
|
-
|
|
28
|
-
const toolbarNodesItems = [
|
|
29
|
-
{
|
|
30
|
-
onclick: () => editor.chain().focus().toggleCodeBlock().run(),
|
|
31
|
-
icon: "code",
|
|
32
|
-
isActive: editor.isActive("codeBlock"),
|
|
33
|
-
text: "Codeblock",
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
onclick: setLink,
|
|
37
|
-
icon: "link",
|
|
38
|
-
isActive: editor.isActive("link"),
|
|
39
|
-
text: "Link",
|
|
40
|
-
},
|
|
41
|
-
];
|
|
42
|
-
|
|
43
|
-
return (
|
|
44
|
-
<>
|
|
45
|
-
{toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
|
|
46
|
-
<EditorButton
|
|
47
|
-
classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
|
|
48
|
-
onclick={onclick}
|
|
49
|
-
icon={icon}
|
|
50
|
-
key={index}
|
|
51
|
-
text={text}
|
|
52
|
-
/>
|
|
53
|
-
))}
|
|
54
|
-
</>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
export default ToolbarNodes
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
@import "../tokens/border_radius";
|
|
2
|
-
@import "../tokens/colors";
|
|
3
|
-
@import "../tokens/spacing";
|
|
4
|
-
@import "../tokens/titles";
|
|
5
|
-
@import "../tokens/line_height";
|
|
6
|
-
@import "../tokens/typography";
|
|
7
|
-
@import "../tokens/shadows";
|
|
8
|
-
@import "../tokens/transition";
|
|
9
|
-
|
|
10
|
-
[class^="pb_rich_text_editor_kit"] {
|
|
11
|
-
.toolbar_button {
|
|
12
|
-
display: flex;
|
|
13
|
-
align-items: center;
|
|
14
|
-
background: $transparent;
|
|
15
|
-
border: none;
|
|
16
|
-
border-radius: $border_rad_heaviest;
|
|
17
|
-
color: $text_lt_light;
|
|
18
|
-
cursor: pointer;
|
|
19
|
-
&_icon {
|
|
20
|
-
width: $space_xl + 2;
|
|
21
|
-
height: $space_xl + 2;
|
|
22
|
-
}
|
|
23
|
-
&.open {
|
|
24
|
-
color: $primary;
|
|
25
|
-
}
|
|
26
|
-
&.active,
|
|
27
|
-
&:active {
|
|
28
|
-
color: $primary;
|
|
29
|
-
background-color: $bg_light;
|
|
30
|
-
}
|
|
31
|
-
&:hover:not([disabled]) {
|
|
32
|
-
background-color: $neutral_subtle;
|
|
33
|
-
}
|
|
34
|
-
&:disabled {
|
|
35
|
-
.pb_icon_kit {
|
|
36
|
-
color: $border_light;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
&:focus-visible {
|
|
40
|
-
outline: none !important;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.toolbar {
|
|
45
|
-
border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
|
|
46
|
-
border: 1px solid $border_light;
|
|
47
|
-
overflow-x: auto;
|
|
48
|
-
&_block {
|
|
49
|
-
gap: $space_xs;
|
|
50
|
-
}
|
|
51
|
-
.editor-dropdown-button {
|
|
52
|
-
background: transparent;
|
|
53
|
-
border: none;
|
|
54
|
-
color: $text_lt_light;
|
|
55
|
-
cursor: pointer;
|
|
56
|
-
font-weight: $light;
|
|
57
|
-
padding: ($space_xs - 1) 0px;
|
|
58
|
-
width: $space_xl * 3;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.ProseMirror {
|
|
63
|
-
background: $white;
|
|
64
|
-
border: 1px solid $border_light;
|
|
65
|
-
border-top-color: transparent;
|
|
66
|
-
border-bottom-right-radius: $border_rad_heaviest;
|
|
67
|
-
border-bottom-left-radius: $border_rad_heaviest;
|
|
68
|
-
height: 100%;
|
|
69
|
-
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
|
70
|
-
line-height: $lh_loose;
|
|
71
|
-
:first-child {
|
|
72
|
-
margin-top: 0;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
h4,
|
|
76
|
-
h5,
|
|
77
|
-
h6,
|
|
78
|
-
ul,
|
|
79
|
-
ol,
|
|
80
|
-
blockquote,
|
|
81
|
-
p {
|
|
82
|
-
margin: 1rem 0 0 0;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
code {
|
|
86
|
-
font-family: monospace;
|
|
87
|
-
background: $bg_light;
|
|
88
|
-
padding: 0.1rem 0.3rem;
|
|
89
|
-
margin: 0 5px;
|
|
90
|
-
box-shadow: 0 2px 10px $shadow;
|
|
91
|
-
border-radius: 0.25rem;
|
|
92
|
-
overflow: hidden;
|
|
93
|
-
font-size: ($text_small - 1px);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
pre {
|
|
97
|
-
background: $bg_dark;
|
|
98
|
-
padding: $space_sm;
|
|
99
|
-
border-radius: $border_rad_heaviest;
|
|
100
|
-
margin: 1.5rem 0 2rem 0;
|
|
101
|
-
code {
|
|
102
|
-
background: transparent;
|
|
103
|
-
box-shadow: none;
|
|
104
|
-
border: 0;
|
|
105
|
-
color: #faf6e4;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
a {
|
|
109
|
-
color: $primary;
|
|
110
|
-
border-bottom: 1px solid $primary;
|
|
111
|
-
&:hover {
|
|
112
|
-
color: $text_lt_default;
|
|
113
|
-
border-bottom: 1px solid $text_lt_default;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
blockquote {
|
|
117
|
-
font-size: $font_larger;
|
|
118
|
-
padding: $space_sm $space_md;
|
|
119
|
-
font-style: italic;
|
|
120
|
-
p {
|
|
121
|
-
margin: 0;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
&:focus-visible {
|
|
125
|
-
outline: unset;
|
|
126
|
-
border-color: $primary;
|
|
127
|
-
@include transition_default;
|
|
128
|
-
}
|
|
129
|
-
h1 {
|
|
130
|
-
font-size: $text_larger;
|
|
131
|
-
line-height: $text_larger;
|
|
132
|
-
font-weight: $bolder;
|
|
133
|
-
letter-spacing: $lspace_tight;
|
|
134
|
-
margin: 2.1rem 0 0 0;
|
|
135
|
-
}
|
|
136
|
-
h2 {
|
|
137
|
-
font-size: $text_larger;
|
|
138
|
-
line-height: $text_larger;
|
|
139
|
-
font-weight: $bolder;
|
|
140
|
-
letter-spacing: $lspace_tight;
|
|
141
|
-
margin: 1.9rem 0 0 0;
|
|
142
|
-
}
|
|
143
|
-
h3 {
|
|
144
|
-
font-size: $text_large;
|
|
145
|
-
line-height: $text_large;
|
|
146
|
-
font-weight: $bolder;
|
|
147
|
-
letter-spacing: $lspace_tight;
|
|
148
|
-
margin: 1.7rem 0 0 0;
|
|
149
|
-
}
|
|
150
|
-
h4,
|
|
151
|
-
h5,
|
|
152
|
-
h6 {
|
|
153
|
-
font-size: $text_base;
|
|
154
|
-
line-height: $text_base;
|
|
155
|
-
letter-spacing: $lspace_tight;
|
|
156
|
-
font-weight: $bolder;
|
|
157
|
-
}
|
|
158
|
-
hr {
|
|
159
|
-
margin: 2.2rem 0;
|
|
160
|
-
box-sizing: content-box;
|
|
161
|
-
overflow: hidden;
|
|
162
|
-
background: transparent;
|
|
163
|
-
border-bottom: 1px solid $transparent;
|
|
164
|
-
height: 1px;
|
|
165
|
-
padding: 0;
|
|
166
|
-
background-color: $border_light;
|
|
167
|
-
border: 0;
|
|
168
|
-
}
|
|
169
|
-
ol {
|
|
170
|
-
margin: 1rem 0 0 0;
|
|
171
|
-
padding-left: $space_md;
|
|
172
|
-
list-style: decimal;
|
|
173
|
-
li {
|
|
174
|
-
margin: 2px 0;
|
|
175
|
-
p {
|
|
176
|
-
margin: 0;
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
ul {
|
|
181
|
-
list-style-position: disc;
|
|
182
|
-
margin: 1rem 0 0 0;
|
|
183
|
-
padding-left: $space_md;
|
|
184
|
-
li {
|
|
185
|
-
margin: 2px 0;
|
|
186
|
-
p {
|
|
187
|
-
margin: 0;
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { RichTextEditor } from '../..'
|
|
3
|
-
import { useEditor, EditorContent } from "@tiptap/react"
|
|
4
|
-
import StarterKit from "@tiptap/starter-kit"
|
|
5
|
-
import Link from '@tiptap/extension-link'
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const RichTextEditorAdvancedDefault = (props) => {
|
|
9
|
-
|
|
10
|
-
const editor = useEditor({
|
|
11
|
-
extensions: [
|
|
12
|
-
StarterKit,
|
|
13
|
-
Link
|
|
14
|
-
],
|
|
15
|
-
content:"Add your text here. You can format your text, add links, quotes, and bullets."
|
|
16
|
-
})
|
|
17
|
-
if (!editor) {
|
|
18
|
-
return null
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return (
|
|
25
|
-
<div>
|
|
26
|
-
<RichTextEditor
|
|
27
|
-
advancedEditor={editor}
|
|
28
|
-
{...props}
|
|
29
|
-
>
|
|
30
|
-
<EditorContent editor={editor}/>
|
|
31
|
-
</RichTextEditor>
|
|
32
|
-
</div>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export default RichTextEditorAdvancedDefault
|