playbook_ui 12.16.0.pre.alpha.tiptaptestingpart1528 → 12.16.0.pre.alpha.tooltippositionprop566

Sign up to get free protection for your applications and to get access to all the features.
Files changed (25) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  3. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +295 -8
  4. data/app/pb_kits/playbook/pb_docs/kit_api.rb +42 -0
  5. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +17 -0
  6. data/app/pb_kits/playbook/pb_docs/kit_example.rb +18 -1
  7. data/app/pb_kits/playbook/pb_image/docs/{_default_image.tsx → _default_image.jsx} +1 -1
  8. data/app/pb_kits/playbook/pb_nav/_item.tsx +6 -6
  9. data/app/pb_kits/playbook/pb_nav/_nav.tsx +2 -2
  10. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  11. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +9 -23
  12. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -1
  13. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +10 -9
  15. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +29 -0
  16. data/lib/playbook/version.rb +1 -1
  17. metadata +3 -11
  18. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +0 -49
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +0 -9
  20. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +0 -62
  21. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +0 -128
  22. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +0 -45
  23. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +0 -59
  24. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +0 -192
  25. 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: 4341c04235a54ee87163dc70611a3316292d39b9b1fdfbd18f2071918b5b52ba
4
- data.tar.gz: 43730de1e579c36b56dd7d18683a22143170392ea4901b424d064333af087814
3
+ metadata.gz: 1aa71e42598e3d4a2cc59995711033c0b2aabe7bb25a7c11254955f7c679a2ca
4
+ data.tar.gz: a2e6816d1ab2faa4bb7b650e8445ec7797edcd753267c68aa4a136ce7220935b
5
5
  SHA512:
6
- metadata.gz: 3eefd540b9b47832aaaef279e5b6b30557d9bd3dcad56f0f0bba654d10916bfde828daa12a9b24ce41bfa9ff4678fc0bf6484491999b5997e98e98e0edbaa152
7
- data.tar.gz: 0521a6ececeaf575787632b452b9b0ea8041d176be10dcb21c1e52868115fa1c7d8bc0e3f3137f958c73600aaef3bfc34ce932b7b80b408300ab51063079791f
6
+ metadata.gz: 11ac217ec0bfb4c58e087eaad581d77559b810589896f37bc96ab505c2aa2df6bcf0b4486ef646b681b241e8cbaf85efceee78685dd821f57d0555555d59b899
7
+ data.tar.gz: 6dae5b2762529cfab815e82c7b0be2d9455bd2a2809732ad1860b1db948626db4e7dba0b9b9108e73528e873dc1dbd92da82976bf735996780d93fe251c9939f
@@ -41,7 +41,7 @@ const CardBackground = (props) => {
41
41
  marginBottom="sm"
42
42
  {...props}
43
43
  >
44
- <Body text="Light" />
44
+ <Body text="Light"/>
45
45
  </Card>
46
46
 
47
47
 
@@ -1,12 +1,299 @@
1
- <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
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
- <%= pb_rails("card", props: { padding: "none" }) do %>
4
- <%= pb_rails("list", props: { xpadding: true }) do %>
5
- <% kit_props.each do |key, _def| %>
6
- <%= pb_rails("list/item") do %>
7
- <%= key %>
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
- <% end %>
12
- </div>
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
 
3
3
  import Image from '../_image'
4
4
 
5
- const DefaultImage = (props: any) => {
5
+ const DefaultImage = (props) => {
6
6
  return (
7
7
  <>
8
8
  <br />
@@ -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, GlobalProps } from '../utilities/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?: string,
17
- iconRight?: string,
16
+ iconLeft: string,
17
+ iconRight: string,
18
18
  id?: string,
19
- imageUrl?: string,
20
- link?: string,
19
+ imageUrl: string,
20
+ link: string,
21
21
  onClick?: React.MouseEventHandler<HTMLElement>,
22
22
  target?: '_blank' | '_self' | '_parent' | '_top',
23
23
  text: string,
24
- } & GlobalProps
24
+ }
25
25
 
26
26
  const NavItem = (props: NavItemProps) => {
27
27
  const {
@@ -17,8 +17,8 @@ type NavProps = {
17
17
  id?: string,
18
18
  onClick?: React.MouseEventHandler<HTMLElement>,
19
19
  orientation?: "vertical" | "horizontal",
20
- link?: string,
21
- title?: string,
20
+ link: string,
21
+ title: string,
22
22
  variant?: "normal" | "subtle",
23
23
  }
24
24
 
@@ -8,7 +8,7 @@
8
8
  @import "../tokens/transition";
9
9
  @import "../pb_icon/icon";
10
10
  @import "./trix_styles";
11
- @import "./tiptap_styles";
11
+
12
12
 
13
13
  .trix-content pre {
14
14
  display: inline-block;
@@ -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
- advancedEditor ? (
162
- <div>
163
- <EditorToolbar editor={advancedEditor}/>
164
- { children }
165
- </div>
166
- ) : (
167
- <TrixEditor
168
- className=""
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
  }
@@ -13,7 +13,6 @@ examples:
13
13
 
14
14
  react:
15
15
  - rich_text_editor_default: Default
16
- - rich_text_editor_advanced_default: Advanced Default
17
16
  - rich_text_editor_simple: Simple
18
17
  - rich_text_editor_attributes: Attributes
19
18
  - rich_text_editor_focus: Focus
@@ -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: strategy,
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
+ });
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.16.0"
5
- VERSION = "12.16.0.pre.alpha.tiptaptestingpart1528"
5
+ VERSION = "12.16.0.pre.alpha.tooltippositionprop566"
6
6
  end
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.tiptaptestingpart1528
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-23 00:00:00.000000000 Z
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.tsx
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,9 +0,0 @@
1
- export type ToolbarTypes = {
2
- node?: string,
3
- icon?: string,
4
- isActive?: any,
5
- text?: string,
6
- onclick?: () => {}
7
- classname?: string
8
- disable?: boolean
9
- }
@@ -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