playbook_ui_docs 15.5.0.pre.rc.1 → 15.5.0.pre.rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.md +1 -0
  3. data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_rails.md +1 -0
  4. data/app/pb_kits/playbook/pb_currency/docs/_currency_matching_decimals_react.md +1 -0
  5. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb +10 -0
  6. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx +10 -0
  7. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.md +1 -0
  8. data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_rails.md +1 -0
  9. data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol_react.md +1 -0
  10. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +7 -0
  11. data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +7 -0
  12. data/app/pb_kits/playbook/pb_currency/docs/_description.md +2 -2
  13. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.html.erb +4 -0
  14. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year.jsx +14 -0
  15. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_rails.md +1 -0
  16. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_show_current_year_react.md +1 -0
  17. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +3 -1
  18. data/app/pb_kits/playbook/pb_date_time/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.html.erb +4 -0
  20. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.jsx +22 -0
  21. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_show_current_year.md +1 -0
  22. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +3 -1
  23. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb +2 -10
  25. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +11 -19
  26. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb +1 -5
  27. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +2 -2
  29. data/dist/playbook-doc.js +19 -1
  30. metadata +15 -5
  31. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default_rails.md +0 -7
  32. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline_rails.md +0 -1
  33. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky_rails.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0125f92eb4bea70ff3d240ae16b90b7206d0875e9293e00af19ad1dcb8dca0ee
4
- data.tar.gz: d77073b4b5a7129aa5bd5717e072f09fb7c790f58f59349d3261baa9ca5567ce
3
+ metadata.gz: 04b955046309ad4547cdb6f8ef77c114ee297a9dc57d336500202c2b3d7d1540
4
+ data.tar.gz: 177351a33c7a3a234e7ac0ce8ac6c382219a193565240df02911743f650c567a
5
5
  SHA512:
6
- metadata.gz: 72a50b537382360c9f18d2d5938cf6278d47d005f9c7f6cc105839b211a6e119aeb75fe1f60c2dafdf916780c59d8ba892528402306b79ef80c1c8770385e8c0
7
- data.tar.gz: a613a51446f1c259b199db4845ee53af2927fc9a349549c8fd684648fba1a3a3ae455af6b6a3ef2f72ff4aefd33573fc3b877ab33f0aa0c7276926ba097deee5
6
+ metadata.gz: d767a5acd9f1c4a3f7ee4f85143c68b64ac724c8d50ea007b89cbf2769f1c05f801c9b57f8200dc1cbe81cd371b138dc467801e54ad362770723afc0a6042378
7
+ data.tar.gz: d405ad62a51d89948c3775e10a43fa5401f969298ace09e4b8a655f1679e377e8856ba038cd1666878d2829628133388e98d5182b904b799fe83a703c7ed1fb1
@@ -0,0 +1 @@
1
+ Abbreviate larger amounts into thousands (K), millions (M), billions (B), and even trillions (T).
@@ -0,0 +1 @@
1
+ Use `decimals: "matching"` when you want the full decimal amount displayed as a single number rather than split visually.
@@ -0,0 +1 @@
1
+ Use `decimals="matching"` when you want the full decimal amount displayed as a single number rather than split visually.
@@ -1,4 +1,14 @@
1
1
  <%= pb_rails("currency", props: {
2
2
  amount: "-2,000.50",
3
3
  size: "sm",
4
+ }) %>
5
+
6
+ <%= pb_rails("currency", props: {
7
+ amount: "-2,000.50",
8
+ size: "md",
9
+ }) %>
10
+
11
+ <%= pb_rails("currency", props: {
12
+ amount: "-2,000.50",
13
+ size: "lg",
4
14
  }) %>
@@ -9,6 +9,16 @@ const CurrencyNegative = (props) => {
9
9
  amount="-2,000.50"
10
10
  {...props}
11
11
  />
12
+ <Currency
13
+ amount="-2,000.50"
14
+ size="md"
15
+ {...props}
16
+ />
17
+ <Currency
18
+ amount="-2,000.50"
19
+ size="lg"
20
+ {...props}
21
+ />
12
22
  </>
13
23
  )
14
24
  }
@@ -0,0 +1 @@
1
+ Small `Currency` kits have the negative sign on the lefthand side of the "$" symbol.
@@ -0,0 +1 @@
1
+ Remove the "$" symbol by setting an empty string: `symbol: ""`.
@@ -0,0 +1 @@
1
+ Remove the "$" symbol by setting an empty string: `symbol=""`.
@@ -1,3 +1,10 @@
1
+ <%= pb_rails("currency", props: {
2
+ amount: "30,327.43",
3
+ label: "Default",
4
+ size: "sm",
5
+ margin_bottom: "md",
6
+ }) %>
7
+
1
8
  <%= pb_rails("currency", props: {
2
9
  amount: "2,000.50",
3
10
  emphasized: false,
@@ -5,6 +5,13 @@ import Currency from '../_currency'
5
5
  const CurrencyVariants = (props) => {
6
6
  return (
7
7
  <>
8
+ <Currency
9
+ amount="30,327.43"
10
+ label="Default"
11
+ marginBottom="md"
12
+ size="sm"
13
+ {...props}
14
+ />
8
15
  <Currency
9
16
  amount="2,000.50"
10
17
  emphasized={false}
@@ -1,2 +1,2 @@
1
- Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels.
2
- Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).
1
+ Use this kit to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. Pairing it with labels improves user understanding.
2
+ Cents are automatically ".00" unless otherwise overwritten (i.e. `unit` prop).
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_time", props: {
2
+ date: DateTime.now,
3
+ show_current_year: true
4
+ }) %>
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+ import DateTime from '../_date_time'
3
+
4
+ const DateTimeShowCurrentYear = (props) => (
5
+ <div>
6
+ <DateTime
7
+ datetime={new Date()}
8
+ showCurrentYear
9
+ {...props}
10
+ />
11
+ </div>
12
+ )
13
+
14
+ export default DateTimeShowCurrentYear
@@ -0,0 +1 @@
1
+ Pass in `show_current_year` to show this date's current year.
@@ -0,0 +1 @@
1
+ Pass in `showCurrentYear` to show this date's current year.
@@ -1,14 +1,16 @@
1
1
  examples:
2
-
2
+
3
3
  rails:
4
4
  - date_time_default: Default
5
5
  - date_time_align: Alignment
6
6
  - date_time_size: Size
7
+ - date_time_show_current_year: Show Current Year
7
8
 
8
9
  react:
9
10
  - date_time_default: Default
10
11
  - date_time_align: Alignment
11
12
  - date_time_size: Size
13
+ - date_time_show_current_year: Show Current Year
12
14
 
13
15
  swift:
14
16
  - date_time_default_swift: Default
@@ -1,3 +1,4 @@
1
1
  export { default as DateTimeDefault } from './_date_time_default.jsx'
2
2
  export { default as DateTimeAlign } from './_date_time_align.jsx'
3
3
  export { default as DateTimeSize } from './_date_time_size.jsx'
4
+ export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true }) %>
2
+ <br>
3
+ <%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true, timezone: "America/Denver" }) %>
4
+
@@ -0,0 +1,22 @@
1
+ import React from 'react'
2
+
3
+ import DateTimeStacked from '../_date_time_stacked'
4
+
5
+ const DateTimeStackedShowCurrentYear = (props) => (
6
+ <div>
7
+ <DateTimeStacked
8
+ datetime={new Date()}
9
+ showCurrentYear
10
+ {...props}
11
+ />
12
+ <br />
13
+ <DateTimeStacked
14
+ datetime={new Date()}
15
+ showCurrentYear
16
+ timeZone="America/Denver"
17
+ {...props}
18
+ />
19
+ </div>
20
+ );
21
+
22
+ export default DateTimeStackedShowCurrentYear;
@@ -0,0 +1 @@
1
+ By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.
@@ -2,9 +2,11 @@ examples:
2
2
 
3
3
  rails:
4
4
  - date_time_stacked_default: Default
5
-
5
+ - date_time_stacked_show_current_year: Show Current Year
6
+
6
7
  react:
7
8
  - date_time_stacked_default: Default
9
+ - date_time_stacked_show_current_year: Show Current Year
8
10
 
9
11
  swift:
10
12
  - date_time_stacked_default_swift: Default
@@ -1 +1,2 @@
1
1
  export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
2
+ export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'
@@ -1,11 +1,3 @@
1
- <%= pb_rails("rich_text_editor", props: {
2
- id: "focus-editor-1",
3
- focus: true,
4
- value: "Click inside to see the toolbar. Click outside to hide it."
5
- }) %>
1
+ <%= pb_rails("rich_text_editor", props: {focus: true}) %>
6
2
  <br>
7
- <%= pb_rails("rich_text_editor", props: {
8
- id: "focus-editor-2",
9
- focus: true,
10
- value: "When the optional focus prop is set to true, the toolbar will only show once you click in to the RichTextEditor."
11
- }) %>
3
+ <%= pb_rails("rich_text_editor", props: {focus: true}) %>
@@ -1,38 +1,30 @@
1
- <%= pb_rails("rich_text_editor", props: {
2
- id: "content-preview-editor",
3
- margin_bottom: "md",
4
- value: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
5
- }) %>
6
-
7
- <%= pb_rails("button", props: { id: "preview-button", text: "Preview Output", variant: "secondary" }) %>
8
1
 
2
+ <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
9
3
  <div id="card-obfuscation" style="display:none">
10
4
  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
11
- <div id="content-preview" class="tiptap-content">
5
+ <div id="content-preview" class="trix-content">
12
6
  </div>
13
7
  <% end %>
14
8
  </div>
9
+ <%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
10
+ <span>Preview Output</span>
11
+ <% end %>
15
12
 
16
13
  <script>
17
14
  document.addEventListener('DOMContentLoaded', () => {
18
15
  function handleButtonClick() {
19
- // Find the specific TipTap editor container by ID
20
16
  const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
21
17
  .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
22
18
 
23
- if (!editorContainer) {
24
- console.log('Editor container not found')
25
- return
26
- }
27
-
28
- // Find the TipTap editor content
29
- const tiptapEditor = editorContainer.querySelector('.ProseMirror')
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 || ''
30
24
  const previewArea = document.getElementById('content-preview')
31
25
  const cardDiv = document.getElementById('card-obfuscation')
32
26
 
33
- if (tiptapEditor && previewArea && cardDiv) {
34
- // Get the HTML content from the TipTap editor
35
- const editorContent = tiptapEditor.innerHTML || ''
27
+ if (previewArea && cardDiv) {
36
28
  previewArea.innerHTML = editorContent
37
29
  cardDiv.style.display = 'block'
38
30
  }
@@ -1,5 +1 @@
1
- <%= pb_rails("rich_text_editor", props: {
2
- id: "simple-editor",
3
- simple: true,
4
- value: "Add your text here. Use the simple toolbar above to format your text."
5
- }) %>
1
+ <%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>
@@ -1 +1 @@
1
- <%= pb_rails("rich_text_editor", props: {id: "sticky-editor", sticky: true, value: "In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."}) %>
1
+ <%= pb_rails("rich_text_editor", props: {id: "sticky", sticky: true, value: "In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."}) %>
@@ -3,10 +3,10 @@ examples:
3
3
  rails:
4
4
  - rich_text_editor_default: Default
5
5
  - rich_text_editor_simple: Simple
6
- # - rich_text_editor_attributes: Attributes
6
+ - rich_text_editor_attributes: Attributes
7
7
  - rich_text_editor_focus: Focus
8
8
  - rich_text_editor_sticky: Sticky
9
- # - rich_text_editor_templates: Templates
9
+ - rich_text_editor_templates: Templates
10
10
  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
11
11
  - rich_text_editor_inline: Inline
12
12
  - rich_text_editor_preview: Preview