playbook_ui 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605 → 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569

Sign up to get free protection for your applications and to get access to all the features.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_badge/_badge.scss +0 -9
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +3 -8
  7. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  8. data/app/pb_kits/playbook/pb_badge/badge.test.js +11 -17
  9. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +0 -13
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +12 -31
  11. data/app/pb_kits/playbook/pb_button/_button.tsx +1 -4
  12. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_button/button.rb +0 -4
  14. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
  15. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
  16. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -3
  17. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -20
  18. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +0 -4
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +5 -1
  21. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
  22. data/app/pb_kits/playbook/pb_dialog/docs/index.js +0 -1
  23. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  24. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
  25. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +25 -43
  26. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -6
  27. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  28. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  29. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +0 -4
  30. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -0
  32. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +13 -49
  33. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -3
  34. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +7 -0
  35. data/app/pb_kits/playbook/pb_popover/_popover.tsx +5 -10
  36. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +13 -49
  37. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +12 -0
  38. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +23 -23
  39. data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +27 -19
  40. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +11 -21
  41. data/app/pb_kits/playbook/pb_star_rating/index.js +41 -78
  42. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -4
  43. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +0 -17
  44. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +2 -0
  45. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +1 -0
  46. data/app/pb_kits/playbook/pb_time/_time.tsx +8 -12
  47. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  48. data/app/pb_kits/playbook/pb_time/time.rb +0 -4
  49. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  50. data/app/pb_kits/playbook/utilities/globalProps.ts +3 -20
  51. data/dist/chunks/_typeahead-B6CmTH6o.js +22 -0
  52. data/dist/chunks/_weekday_stacked-CNZpeoOR.js +45 -0
  53. data/dist/chunks/{lib-DErGXNy3.js → lib-XlOB2yGW.js} +2 -2
  54. data/dist/chunks/{pb_form_validation-BC6kh7Hu.js → pb_form_validation-mwEv7D-z.js} +1 -1
  55. data/dist/chunks/vendor.js +1 -1
  56. data/dist/playbook-doc.js +1 -1
  57. data/dist/playbook-rails-react-bindings.js +1 -1
  58. data/dist/playbook-rails.js +1 -1
  59. data/dist/playbook.css +1 -1
  60. data/lib/playbook/classnames.rb +0 -1
  61. data/lib/playbook/spacing.rb +2 -31
  62. data/lib/playbook/version.rb +1 -1
  63. metadata +9 -23
  64. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +0 -46
  65. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +0 -164
  66. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +0 -19
  67. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +0 -1
  68. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +0 -62
  69. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +0 -1
  70. data/app/pb_kits/playbook/pb_pagination/docs/data.js +0 -23
  71. data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -2
  72. data/app/pb_kits/playbook/tokens/_container.scss +0 -21
  73. data/app/pb_kits/playbook/utilities/_min_width.scss +0 -45
  74. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +0 -59
  75. data/app/pb_kits/playbook/utilities/icons/clock.svg +0 -9
  76. data/app/pb_kits/playbook/utilities/icons/spinner.svg +0 -3
  77. data/app/pb_kits/playbook/utilities/icons/times.svg +0 -3
  78. data/dist/chunks/_typeahead-Cq7RLPBA.js +0 -22
  79. data/dist/chunks/_weekday_stacked-Cykj5kLZ.js +0 -45
  80. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default_rails.md → _pagination_default.md} +0 -0
@@ -5,11 +5,11 @@ examples:
5
5
  - form_pill_size: Form Pill Size
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
- - form_pill_icon: Form Pill Icon
8
+ # - form_pill_icon: Form Pill Icon
9
9
 
10
10
  react:
11
11
  - form_pill_user: Form Pill User
12
12
  - form_pill_size: Form Pill Size
13
13
  - form_pill_tag: Form Pill Tag
14
14
  - form_pill_example: Example
15
- - form_pill_icon: Form Pill Icon
15
+ # - form_pill_icon: Form Pill Icon
@@ -1,19 +1,19 @@
1
1
  <%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
2
2
  <% if object.name.present? %>
3
- <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
3
+ <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xs" }) %>
4
4
  <%= pb_rails("title", props: { text: object.name, size: 4, classname: "pb_form_pill_text" }) %>
5
5
  <% if object.icon.present? %>
6
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
6
+ <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
7
7
  <% end %>
8
8
  <% elsif object.text.present? %>
9
9
  <% if object.icon.present? %>
10
- <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", color: object.color, icon: object.icon }) %>
10
+ <%= pb_rails("icon", props: { classname: "pb_form_pill_icon", icon: object.icon }) %>
11
11
  <% end %>
12
12
  <% if object.text.present? %>
13
13
  <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_form_pill_tag" }) %>
14
14
  <% end %>
15
15
  <% end %>
16
16
  <%= pb_rails("body", props: { classname: "pb_form_pill_close" }) do %>
17
- <%= pb_rails("icon", props: { icon: 'times', fixed_width: true, size: object.close_icon_size }) %>
17
+ <%= pb_rails("icon", props: { icon: 'times' , fixed_width: true }) %>
18
18
  <% end %>
19
19
  <% end %>
@@ -32,10 +32,6 @@ module Playbook
32
32
  def icon_class
33
33
  icon ? "icon" : nil
34
34
  end
35
-
36
- def close_icon_size
37
- size == "small" ? "xs" : "sm"
38
- end
39
35
  end
40
36
  end
41
37
  end
@@ -28,7 +28,7 @@ type IconProps = {
28
28
  data?: {[key: string]: string},
29
29
  fixedWidth?: boolean,
30
30
  flip?: "horizontal" | "vertical" | "both" | "none",
31
- icon?: string | ReactSVGElement,
31
+ icon: string | ReactSVGElement,
32
32
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
33
33
  id?: string,
34
34
  inverse?: boolean,
@@ -469,6 +469,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
469
469
  <FormPill
470
470
  key={index}
471
471
  onClick={(event: any) => handlePillClose(event, item)}
472
+ size="small"
472
473
  text={item.label}
473
474
  />
474
475
  ))
@@ -481,6 +482,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
481
482
  <FormPill
482
483
  key={index}
483
484
  onClick={(event: any) => handlePillClose(event, item)}
485
+ size="small"
484
486
  text={item.label}
485
487
  />
486
488
  ))
@@ -3,45 +3,36 @@
3
3
  @import "../tokens/border_radius";
4
4
  @import "../tokens/shadows";
5
5
 
6
-
7
6
  $pagination_padding: 7px 13px 6px 13px;
8
7
  $top_bottom_radius: 0px;
9
8
 
10
- @mixin hover-state {
11
- background-color: $active_light !important;
12
- color: $primary;
13
- border-radius: $border_rad_light;
14
- }
15
-
16
9
  .pb_pagination {
17
10
  display: inline-block;
18
11
  border-radius: $border_rad_light;
19
12
  border: $border_rad_lightest solid $border_light;
20
13
  background-color: $white;
21
- padding: $space_xs 0px !important;
22
- li, .pagination-number {
14
+ padding: $space_xxs 0px !important;
15
+ li {
23
16
  display: inline;
24
- > a, li > span, .pagination-number {
17
+ > a, li > span {
25
18
  padding: $pagination_padding;
26
19
  text-decoration: none;
27
20
  }}
28
- li:first-child > a, li:first-child > span, .pagination-number, .pagination-left {
29
- background-color: $white;
21
+ li:first-child > a, li:first-child > span {
30
22
  padding: $pagination_padding;
31
23
  border-right: $border_rad_lightest solid $border_light;
32
24
  z-index: 2;
33
25
  border-top-right-radius: $top_bottom_radius;
34
26
  border-bottom-right-radius: $top_bottom_radius;
35
- cursor: pointer;
36
27
  }
37
- li:last-child > a, li:last-child > span, .pagination-number, .pagination-right {
28
+ li:last-child > a, li:last-child > span {
38
29
  padding: $pagination_padding;
39
30
  border-left: $border_rad_lightest solid $border_light;
40
31
  z-index: 2;
41
32
  border-top-left-radius: $top_bottom_radius;
42
33
  border-bottom-left-radius: $top_bottom_radius;
43
34
  }
44
- a, .pagination-number {
35
+ a {
45
36
  color: $text_lt_default;
46
37
  font-size: $text_small;
47
38
  font-weight: $regular;
@@ -49,7 +40,9 @@ $top_bottom_radius: 0px;
49
40
  transition: all $transition_default ease-out;
50
41
 
51
42
  &:hover {
52
- @include hover-state;
43
+ background-color: $active_light;
44
+ color: $primary;
45
+ border-radius: $border_rad_light;
53
46
  }
54
47
 
55
48
  &:focus-visible {
@@ -59,8 +52,8 @@ $top_bottom_radius: 0px;
59
52
  transition: none;
60
53
  }
61
54
  }
62
- .active > span, .pagination-number.active {
63
- background-color: $primary !important;
55
+ .active > span {
56
+ background-color: $primary;
64
57
  border-radius: $border_rad_light;
65
58
  color: #fff;
66
59
  padding: $pagination_padding;
@@ -69,37 +62,8 @@ $top_bottom_radius: 0px;
69
62
  font-weight: $bold;
70
63
  font-size: $text_small;
71
64
  }
72
- .disabled {
73
- pointer-events: none;
74
- opacity: 0.5;
75
- color: grey;
76
-
77
- & > span {
78
- padding: $pagination_padding;
79
- font-size: $text_small;
80
- }
81
- }
82
-
83
- .pagination-right,
84
- .pagination-left {
85
- background-color: $white;
86
- border-top: none;
87
- border-bottom: none;
88
- cursor: pointer;
89
- padding: 7px 11px 6px;
65
+ .disabled > span {
66
+ padding: $pagination_padding;
90
67
  font-size: $text_small;
91
-
92
- &:hover {
93
- @include hover-state;
94
- }
95
- }
96
- .pagination-left {
97
- border-left: none;
98
- margin-right: $space_xxs;
99
- }
100
-
101
- .pagination-right {
102
- border-right: none;
103
- margin-left: $space_xxs;
104
68
  }
105
69
  }
@@ -3,6 +3,4 @@ examples:
3
3
  rails:
4
4
  - pagination_default: Default
5
5
 
6
- react:
7
- - pagination_default: Default
8
- - pagination_page_change: Page Change
6
+
@@ -60,6 +60,7 @@ $flag-min-resolution: 192dpi;
60
60
  }
61
61
 
62
62
  .iti__flag {
63
+ background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
63
64
  border-radius: 1px;
64
65
  }
65
66
 
@@ -196,4 +197,10 @@ $flag-min-resolution: 192dpi;
196
197
  }
197
198
  }
198
199
  }
200
+
201
+ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
202
+ .iti__flag {
203
+ background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
204
+ }
205
+ }
199
206
  }
@@ -21,8 +21,6 @@ import classnames from "classnames";
21
21
  import { globalProps, GlobalProps } from "../utilities/globalProps";
22
22
  import { uniqueId } from 'lodash';
23
23
 
24
- type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
25
-
26
24
  type PbPopoverProps = {
27
25
  aria?: { [key: string]: string };
28
26
  className?: string;
@@ -34,7 +32,7 @@ type PbPopoverProps = {
34
32
  reference: PopperReference & any;
35
33
  show?: boolean;
36
34
  shouldClosePopover?: (arg0: boolean) => void;
37
- } & ModifiedGlobalProps & Omit<PopperProps<any>, 'children'>
35
+ } & GlobalProps & Omit<PopperProps<any>, 'children'>
38
36
  & { children?: React.ReactChild[] | React.ReactChild }
39
37
 
40
38
  // Prop enabled default modifiers here
@@ -82,13 +80,10 @@ const Popover = (props: PbPopoverProps) => {
82
80
  targetId,
83
81
  } = props;
84
82
 
85
- const items = globalProps(props).split(' ')
86
- const filteredItems = items.filter(item => !item.includes('min_width'))
87
- const filteredGlobalProps = filteredItems.join(' ')
88
83
  const popoverSpacing =
89
- filteredGlobalProps.includes("dark") || !filteredGlobalProps
84
+ globalProps(props).includes("dark") || !globalProps(props)
90
85
  ? "p_sm"
91
- : filteredGlobalProps
86
+ : globalProps(props);
92
87
  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
93
88
  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
94
89
  const widthHeightStyles = () => {
@@ -105,7 +100,7 @@ const Popover = (props: PbPopoverProps) => {
105
100
  const htmlProps = buildHtmlProps(htmlOptions);
106
101
  const classes = classnames(
107
102
  buildCss("pb_popover_kit"),
108
- filteredGlobalProps,
103
+ globalProps(props),
109
104
  className
110
105
  );
111
106
 
@@ -255,4 +250,4 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
255
250
  );
256
251
  };
257
252
 
258
- export default PbReactPopover;
253
+ export default PbReactPopover;
@@ -3,20 +3,18 @@
3
3
  @import "../tokens/spacing";
4
4
  @import "../tokens/typography";
5
5
 
6
-
7
- // Tiptap mixins section (React Advanced Editor)
8
- @mixin preview_tiptap_first_child {
6
+ @mixin preview_first_child {
9
7
  :first-child {
10
8
  margin-top: 0;
11
9
  }
12
10
  }
13
11
 
14
- @mixin preview_tiptap_p {
12
+ @mixin preview_p {
15
13
  margin: 1rem 0 0 0;
16
14
  min-height: 1rem;
17
15
  }
18
16
 
19
- @mixin preview_tiptap_code {
17
+ @mixin preview_code {
20
18
  font-family: monospace;
21
19
  background: $bg_light;
22
20
  padding: 0.1rem 0.3rem;
@@ -25,7 +23,7 @@
25
23
  overflow: hidden;
26
24
  }
27
25
 
28
- @mixin preview_tiptap_pre_codeblock {
26
+ @mixin preview_pre_codeblock {
29
27
  display: inline-block;
30
28
  width: 100%;
31
29
  vertical-align: top;
@@ -46,7 +44,7 @@
46
44
  }
47
45
  }
48
46
 
49
- @mixin preview_tiptap_a {
47
+ @mixin preview_a {
50
48
  color: $primary;
51
49
  border-bottom: 1px solid $primary;
52
50
  &:hover {
@@ -55,7 +53,7 @@
55
53
  }
56
54
  }
57
55
 
58
- @mixin preview_tiptap_blockquote {
56
+ @mixin preview_blockquote {
59
57
  font-size: $font_larger;
60
58
  padding: $space_sm $space_md;
61
59
  font-style: italic;
@@ -65,7 +63,7 @@
65
63
  }
66
64
  }
67
65
 
68
- @mixin preview_tiptap_h1 {
66
+ @mixin preview_h1 {
69
67
  font-size: $text_largest;
70
68
  line-height: $text_larger;
71
69
  font-weight: $bolder;
@@ -73,7 +71,7 @@
73
71
  margin: 2.1rem 0 0 0;
74
72
  }
75
73
 
76
- @mixin preview_tiptap_h2 {
74
+ @mixin preview_h2 {
77
75
  font-size: $text_larger;
78
76
  line-height: $text_larger;
79
77
  font-weight: $bolder;
@@ -81,7 +79,7 @@
81
79
  margin: 1.9rem 0 0 0;
82
80
  }
83
81
 
84
- @mixin preview_tiptap_h3 {
82
+ @mixin preview_h3 {
85
83
  font-size: $text_large;
86
84
  line-height: $text_large;
87
85
  font-weight: $bolder;
@@ -89,7 +87,7 @@
89
87
  margin: 1.7rem 0 0 0;
90
88
  }
91
89
 
92
- @mixin preview_tiptap_smaller_headings {
90
+ @mixin preview_smaller_headings {
93
91
  font-size: $text_base;
94
92
  line-height: $text_base;
95
93
  letter-spacing: $lspace_tight;
@@ -97,7 +95,7 @@
97
95
  margin: 1rem 0 0 0;
98
96
  }
99
97
 
100
- @mixin preview_tiptap_hr {
98
+ @mixin preview_hr {
101
99
  margin: 2.2rem 0;
102
100
  box-sizing: content-box;
103
101
  overflow: hidden;
@@ -109,7 +107,7 @@
109
107
  border: 0;
110
108
  }
111
109
 
112
- @mixin preview_tiptap_ol {
110
+ @mixin preview_ol {
113
111
  margin: 1rem 0 0 0;
114
112
  padding-left: $space_md;
115
113
  list-style: decimal;
@@ -121,7 +119,7 @@
121
119
  }
122
120
  }
123
121
 
124
- @mixin preview_tiptap_ul {
122
+ @mixin preview_ul {
125
123
  list-style-position: disc;
126
124
  margin: 1rem 0 0 0;
127
125
  padding-left: $space_md;
@@ -132,37 +130,3 @@
132
130
  }
133
131
  }
134
132
  }
135
-
136
- // Trix mixins section (Rails and React default editor)
137
- @mixin preview_trix_div {
138
- line-height: 1.4;
139
- }
140
-
141
- @mixin preview_trix_h1 {
142
- font-size: 2em;
143
- line-height: 1.4;
144
- }
145
- @mixin preview_trix_blockquote {
146
- border: 0 solid #ccc;
147
- border-left-width: 0.3em;
148
- margin-left: 0.3em;
149
- padding-left: 0.6em;
150
- line-height: 1.4;
151
- }
152
-
153
- @mixin preview_trix_li {
154
- line-height: 1.4;
155
- margin-left: $space_sm;
156
- }
157
-
158
- @mixin preview_trix_pre {
159
- display: inline-block;
160
- width: 100%;
161
- vertical-align: top;
162
- font-family: monospace;
163
- font-size: 0.9em;
164
- padding: 0.5em;
165
- white-space: pre;
166
- background-color: #eee;
167
- overflow-x: auto;
168
- }
@@ -10,6 +10,18 @@
10
10
  @import "./trix_styles";
11
11
  @import "./tiptap_styles";
12
12
 
13
+ .trix-content pre {
14
+ display: inline-block;
15
+ width: 100%;
16
+ vertical-align: top;
17
+ font-family: monospace;
18
+ font-size: 0.9em;
19
+ padding: 0.5em;
20
+ white-space: pre;
21
+ background-color: #ccc !important;
22
+ color: black !important;
23
+ overflow-x: auto;
24
+ }
13
25
  [class^=pb_rich_text_editor_kit] {
14
26
  // Disables File Attatchment Button in Toolbar
15
27
  trix-toolbar [data-trix-button-group="file-tools"] {
@@ -86,44 +86,44 @@
86
86
  }
87
87
 
88
88
  code {
89
- @include preview_tiptap_code;
89
+ @include preview_code;
90
90
  }
91
91
 
92
92
  pre {
93
- @include preview_tiptap_pre_codeblock;
93
+ @include preview_pre_codeblock;
94
94
  }
95
95
  a {
96
- @include preview_tiptap_a;
96
+ @include preview_a;
97
97
  }
98
98
  blockquote {
99
- @include preview_tiptap_blockquote;
99
+ @include preview_blockquote;
100
100
  }
101
101
  &:focus-visible {
102
102
  outline: unset;
103
103
  @include transition_default;
104
104
  }
105
105
  h1 {
106
- @include preview_tiptap_h1;
106
+ @include preview_h1;
107
107
  }
108
108
  h2 {
109
- @include preview_tiptap_h2;
109
+ @include preview_h2;
110
110
  }
111
111
  h3 {
112
- @include preview_tiptap_h3;
112
+ @include preview_h3;
113
113
  }
114
114
  h4,
115
115
  h5,
116
116
  h6 {
117
- @include preview_tiptap_smaller_headings;
117
+ @include preview_smaller_headings;
118
118
  }
119
119
  hr {
120
- @include preview_tiptap_hr;
120
+ @include preview_hr;
121
121
  }
122
122
  ol {
123
- @include preview_tiptap_ol;
123
+ @include preview_ol;
124
124
  }
125
125
  ul {
126
- @include preview_tiptap_ul;
126
+ @include preview_ul;
127
127
  }
128
128
  }
129
129
  }
@@ -170,40 +170,40 @@
170
170
  }
171
171
  }
172
172
  .tiptap-content {
173
- @include preview_tiptap_first_child;
173
+ @include preview_first_child;
174
174
  a {
175
- @include preview_tiptap_a;
175
+ @include preview_a;
176
176
  }
177
177
  blockquote {
178
- @include preview_tiptap_blockquote;
178
+ @include preview_blockquote;
179
179
  }
180
180
  h1 {
181
- @include preview_tiptap_h1;
181
+ @include preview_h1;
182
182
  }
183
183
  h2 {
184
- @include preview_tiptap_h2;
184
+ @include preview_h2;
185
185
  }
186
186
  h3 {
187
- @include preview_tiptap_h3;
187
+ @include preview_h3;
188
188
  }
189
189
  h4,
190
190
  h5,
191
191
  h6 {
192
- @include preview_tiptap_smaller_headings;
192
+ @include preview_smaller_headings;
193
193
  }
194
194
  hr {
195
- @include preview_tiptap_hr;
195
+ @include preview_hr;
196
196
  }
197
197
  ol {
198
- @include preview_tiptap_ol;
198
+ @include preview_ol;
199
199
  }
200
200
  p {
201
- @include preview_tiptap_p;
201
+ @include preview_p;
202
202
  }
203
203
  pre {
204
- @include preview_tiptap_pre_codeblock;
204
+ @include preview_pre_codeblock;
205
205
  }
206
206
  ul {
207
- @include preview_tiptap_ul;
207
+ @include preview_ul;
208
208
  }
209
209
  }
@@ -1,5 +1,3 @@
1
- @import "previewer_mixin";
2
-
3
1
  @charset "UTF-8";
4
2
  /*
5
3
  Trix 1.3.0
@@ -299,31 +297,41 @@ trix-editor .attachment__metadata {
299
297
  trix-editor .attachment__metadata .attachment__size {
300
298
  margin-left: 0.2em;
301
299
  white-space: nowrap; }
302
- trix-editor blockquote {
303
- @include preview_trix_blockquote; }
304
- trix-editor [dir=rtl] blockquote,
305
- trix-editor blockquote[dir=rtl] {
306
- @include preview_trix_blockquote }
307
300
  @charset "UTF-8";
308
- .trix-content * {
309
- box-sizing: border-box;
310
- margin: 0;
311
- padding: 0; }
312
- .trix-content#content-preview div {
313
- @include preview_trix_div; }
301
+ .trix-content {
302
+ line-height: 1.5; }
303
+ .trix-content * {
304
+ box-sizing: border-box;
305
+ margin: 0;
306
+ padding: 0; }
314
307
  .trix-content h1 {
315
- @include preview_trix_h1; }
308
+ font-size: 1.2em;
309
+ line-height: 1.2; }
316
310
  .trix-content blockquote {
317
- @include preview_trix_blockquote; }
311
+ border: 0 solid #ccc;
312
+ border-left-width: 0.3em;
313
+ margin-left: 0.3em;
314
+ padding-left: 0.6em; }
318
315
  .trix-content [dir=rtl] blockquote,
319
316
  .trix-content blockquote[dir=rtl] {
320
- @include preview_trix_blockquote; }
317
+ border-width: 0;
318
+ border-right-width: 0.3em;
319
+ margin-right: 0.3em;
320
+ padding-right: 0.6em; }
321
321
  .trix-content li {
322
- @include preview_trix_li; }
322
+ margin-left: 1em; }
323
323
  .trix-content [dir=rtl] li {
324
- @include preview_trix_li; }
324
+ margin-right: 1em; }
325
325
  .trix-content pre {
326
- @include preview_trix_pre; }
326
+ display: inline-block;
327
+ width: 100%;
328
+ vertical-align: top;
329
+ font-family: monospace;
330
+ font-size: 0.9em;
331
+ padding: 0.5em;
332
+ white-space: pre;
333
+ background-color: #eee;
334
+ overflow-x: auto; }
327
335
  .trix-content img {
328
336
  max-width: 100%;
329
337
  height: auto; }
@@ -1,7 +1,7 @@
1
1
 
2
2
  <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
3
3
  <div id="card-obfuscation" style="display:none">
4
- <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
4
+ <%= pb_rails("card", props: { margin_top: "md" }) do %>
5
5
  <div id="content-preview" class="trix-content">
6
6
  </div>
7
7
  <% end %>
@@ -11,25 +11,15 @@
11
11
  <% end %>
12
12
 
13
13
  <script>
14
- document.addEventListener('DOMContentLoaded', () => {
15
- function handleButtonClick() {
16
- const editorContainer = [...document.querySelectorAll('[data-react-props]')]
17
- .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
14
+ // Button event handler
15
+ const button = document.getElementById('preview-button');
16
+ button.addEventListener('click', function() {
17
+ const content = document.getElementById('content-preview-editor');
18
+ const previewArea = document.getElementById('content-preview');
19
+ const cardDiv = document.getElementById('card-obfuscation');
18
20
 
19
- const editorElement = editorContainer?.querySelector('trix-editor')
20
- const inputId = editorElement?.getAttribute('input')
21
- const inputElement = inputId && document.getElementById(inputId)
22
-
23
- const editorContent = inputElement?.value || ''
24
- const previewArea = document.getElementById('content-preview')
25
- const cardDiv = document.getElementById('card-obfuscation')
26
-
27
- if (previewArea && cardDiv) {
28
- previewArea.innerHTML = editorContent
29
- cardDiv.style.display = 'block'
30
- }
31
- }
32
-
33
- document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
34
- })
21
+ previewArea.innerHTML = content.value;
22
+ cardDiv.classList.add('mt_md');
23
+ cardDiv.style.display = 'block';
24
+ });
35
25
  </script>