playbook_ui_docs 16.1.0.pre.alpha.play273614090 → 16.1.0.pre.alpha.play274314102

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 (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +4 -0
  4. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +4 -0
  5. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +5 -0
  6. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +4 -0
  7. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx +5 -0
  8. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +4 -0
  9. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +4 -0
  10. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +4 -0
  11. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +4 -0
  12. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +4 -0
  13. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +22 -21
  14. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -1
  15. metadata +1 -12
  16. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb +0 -5
  17. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +0 -1
  18. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb +0 -3
  19. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb +0 -6
  20. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +0 -35
  21. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
  22. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb +0 -1
  23. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb +0 -1
  24. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb +0 -115
  25. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb +0 -4
  26. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +0 -14
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: dc6fd2100ed7e07e50d2ecc68a0fd5d3ad5bc78c75ebe2e3bd32922f64148fba
4
- data.tar.gz: 6b3b4ca002965ef6d2397007f7e678ae6c464790bede076e1fc080f53904c00b
3
+ metadata.gz: 0a4adb8dda450145eba27c92046a81f6a04086db1bf4a1195c64925e16c9e8d4
4
+ data.tar.gz: 18c3a2d469a159045bcefa850e4f10a9073b6e7f3ba354f25cb57440bc5f0834
5
5
  SHA512:
6
- metadata.gz: 70e0f7e55f56b1b413aeb8e7da55483322f200cb96424afe07eb09da255c111339811a2b75df592b16ab053e615dbf19db601a82be104acb77f9b7ccc7b19982
7
- data.tar.gz: 8f8f6ed24ee2bb6a8580606ab8236a3af324a24961d40590cea87a5f51e6e31d014738c1f4192553b8c0913c0e5f027faea475068886253a9565d50086ec48a9
6
+ metadata.gz: ee37a4e8b422fb213bd4988a99b79da1fda15a98ef3ab40eaad418b8b380e3f07a8c56185395ddeaa8fe58dbdab3b2499ff0f018aba8dce41b9f053779095776
7
+ data.tar.gz: f2a4cf1ac3cf4643eba6b920a4f263a8d4952fb193bdc979301ae08d5937cecb3c44aa406c0d448acbdfee81845545e13eb660b4400de7894c2cb6150a45d105
@@ -76,7 +76,7 @@
76
76
  const option = e.detail;
77
77
  const dropdown = e.target;
78
78
 
79
- const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
79
+ const display = dropdown.querySelector("#dropdown_trigger_custom_display");
80
80
  if (!display) return;
81
81
 
82
82
  const nameEl = display.querySelector("#dropdown-avatar-name");
@@ -1,9 +1,13 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorAttributes = (props) => (
5
8
  <div>
6
9
  <RichTextEditor
10
+ TrixEditor={TrixEditor}
7
11
  aria={{ label: 'rich textarea' }}
8
12
  data={{ key: 'value', key2: 'value2' }}
9
13
  name="name-attribute"
@@ -1,5 +1,8 @@
1
1
  import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorDefault = (props) => {
5
8
  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -8,6 +11,7 @@ const RichTextEditorDefault = (props) => {
8
11
  return (
9
12
  <div>
10
13
  <RichTextEditor
14
+ TrixEditor={TrixEditor}
11
15
  onChange={handleOnChange}
12
16
  value={value}
13
17
  {...props}
@@ -1,14 +1,19 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorFocus = (props) => (
5
8
  <>
6
9
  <RichTextEditor
10
+ TrixEditor={TrixEditor}
7
11
  focus
8
12
  {...props}
9
13
  />
10
14
  <br />
11
15
  <RichTextEditor
16
+ TrixEditor={TrixEditor}
12
17
  focus
13
18
  {...props}
14
19
  />
@@ -1,9 +1,13 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorInline = (props) => (
5
8
  <div>
6
9
  <RichTextEditor
10
+ TrixEditor={TrixEditor}
7
11
  id="inline"
8
12
  inline
9
13
  toolbarBottom
@@ -1,5 +1,8 @@
1
1
  import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorLabel = (props) => {
5
8
  const [value, setValue] = useState(''),
@@ -8,6 +11,7 @@ const RichTextEditorLabel = (props) => {
8
11
  return (
9
12
  <div>
10
13
  <RichTextEditor
14
+ TrixEditor={TrixEditor}
11
15
  id="example"
12
16
  label="Example Label"
13
17
  onChange={handleOnChange}
@@ -16,6 +20,7 @@ const RichTextEditorLabel = (props) => {
16
20
  />
17
21
  <br/>
18
22
  <RichTextEditor
23
+ TrixEditor={TrixEditor}
19
24
  label="Example Label No ID"
20
25
  onChange={handleOnChange}
21
26
  value={value}
@@ -2,6 +2,9 @@ import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import Button from '../../pb_button/_button'
4
4
  import Card from '../../pb_card/_card'
5
+ import { TrixEditor } from 'react-trix'
6
+ // eslint-disable-next-line no-unused-vars
7
+ import Trix from 'trix'
5
8
 
6
9
  const RichTextEditorPreview = (props) => {
7
10
  const [showPreview, setShowPreview] = useState(false)
@@ -15,6 +18,7 @@ const RichTextEditorPreview = (props) => {
15
18
  return (
16
19
  <div>
17
20
  <RichTextEditor
21
+ TrixEditor={TrixEditor}
18
22
  id="content-preview-editor"
19
23
  onChange={handleChange}
20
24
  {...props}
@@ -1,5 +1,8 @@
1
1
  import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorRequiredIndicator = (props) => {
5
8
  const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -8,6 +11,7 @@ const RichTextEditorRequiredIndicator = (props) => {
8
11
  return (
9
12
  <div>
10
13
  <RichTextEditor
14
+ TrixEditor={TrixEditor}
11
15
  inputOptions = {{ id: "required" }}
12
16
  label="Label"
13
17
  onChange={handleOnChange}
@@ -1,9 +1,13 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorSimple = (props) => (
5
8
  <div>
6
9
  <RichTextEditor
10
+ TrixEditor={TrixEditor}
7
11
  simple
8
12
  {...props}
9
13
  />
@@ -1,9 +1,13 @@
1
1
  import React from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
+ import { TrixEditor } from 'react-trix'
4
+ // eslint-disable-next-line no-unused-vars
5
+ import Trix from 'trix'
3
6
 
4
7
  const RichTextEditorSticky = (props) => (
5
8
  <div>
6
9
  <RichTextEditor
10
+ TrixEditor={TrixEditor}
7
11
  id="sticky"
8
12
  sticky
9
13
  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."
@@ -2,6 +2,9 @@ import React, { useState } from 'react'
2
2
  import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
3
  import Select from '../../pb_select/_select'
4
4
  import { changelog, release } from './templates.js'
5
+ import { TrixEditor } from 'react-trix'
6
+ // eslint-disable-next-line no-unused-vars
7
+ import Trix from 'trix'
5
8
 
6
9
  const RichTextEditorTemplates = (props) => {
7
10
  const [editorContent, setEditorContent] = useState('')
@@ -31,6 +34,7 @@ const RichTextEditorTemplates = (props) => {
31
34
  {...props}
32
35
  />
33
36
  <RichTextEditor
37
+ TrixEditor={TrixEditor}
34
38
  id="template"
35
39
  template={editorContent}
36
40
  {...props}
@@ -1,40 +1,41 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
- - rich_text_editor_default: Default
5
- - rich_text_editor_simple: Simple
6
- - rich_text_editor_attributes: Attributes
7
- - rich_text_editor_focus: Focus
8
- - rich_text_editor_sticky: Sticky
9
- - rich_text_editor_templates: Templates
10
- # - rich_text_editor_toolbar_bottom: Toolbar Bottom
11
- - rich_text_editor_inline: Inline
12
- - rich_text_editor_required_indicator: Required Indicator
13
- - rich_text_editor_preview: Preview
14
4
 
15
5
  react:
16
- - rich_text_editor_default: Default
17
6
  - rich_text_editor_advanced_default: Advanced Default
18
7
  - rich_text_editor_more_extensions: Advanced (Extra Extensions)
19
8
  - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
20
- - rich_text_editor_simple: Simple
21
9
  - rich_text_editor_advanced_simple: Advanced (Simple)
22
- - rich_text_editor_attributes: Attributes
23
10
  - rich_text_editor_advanced_attributes: Advanced (Attributes)
24
- - rich_text_editor_focus: Focus
25
11
  - rich_text_editor_advanced_focus: Advanced (Focus)
26
- - rich_text_editor_sticky: Sticky
27
12
  - rich_text_editor_advanced_sticky: Advanced (Sticky)
28
- - rich_text_editor_templates: Templates
29
13
  - rich_text_editor_advanced_templates: Advanced (Templates)
30
- # - rich_text_editor_toolbar_bottom: Toolbar Bottom
31
- - rich_text_editor_inline: Inline
32
14
  - rich_text_editor_advanced_inline: Advanced (Inline)
33
15
  - rich_text_editor_advanced_height: Advanced Height
34
16
  - rich_text_editor_advanced_min_height: Advanced Min Height
35
- - rich_text_editor_label: Label
36
17
  - rich_text_editor_advanced_label: Advanced (Label)
37
- - rich_text_editor_required_indicator: Required Indicator
38
18
  - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
39
- - rich_text_editor_preview: Preview
40
19
  - rich_text_editor_advanced_preview: Advanced Preview
20
+ - rich_text_editor_default: Legacy Default (Trix)
21
+ - rich_text_editor_simple: Legacy Simple (Trix)
22
+ - rich_text_editor_attributes: Legacy Attributes (Trix)
23
+ - rich_text_editor_focus: Legacy Focus (Trix)
24
+ - rich_text_editor_sticky: Legacy Sticky (Trix)
25
+ - rich_text_editor_templates: Legacy Templates (Trix)
26
+ - rich_text_editor_inline: Legacy Inline (Trix)
27
+ - rich_text_editor_label: Legacy Label (Trix)
28
+ - rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
29
+ - rich_text_editor_preview: Legacy Preview (Trix)
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
@@ -4,7 +4,6 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
4
4
  export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
5
5
  export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
6
6
  export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
7
- export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
8
7
  export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
9
8
  export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
10
9
  export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 16.1.0.pre.alpha.play273614090
4
+ version: 16.1.0.pre.alpha.play274314102
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -1948,31 +1948,20 @@ files:
1948
1948
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
1949
1949
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
1950
1950
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
1951
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
1952
1951
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
1953
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
1954
1952
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx
1955
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb
1956
1953
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
1957
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
1958
1954
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
1959
1955
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx
1960
1956
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md
1961
1957
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
1962
1958
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
1963
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
1964
1959
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
1965
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
1966
1960
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
1967
1961
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
1968
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
1969
1962
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
1970
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
1971
1963
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx
1972
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb
1973
1964
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx
1974
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb
1975
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx
1976
1965
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx
1977
1966
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md
1978
1967
  - app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
@@ -1,5 +0,0 @@
1
- <%= pb_rails("rich_text_editor", props: {
2
- aria: { label: "rich-textarea" },
3
- data: { key: "value", key2: "value2" },
4
- name: "textarea-label",
5
- }) %>
@@ -1 +0,0 @@
1
- <%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
@@ -1,3 +0,0 @@
1
- <%= pb_rails("rich_text_editor", props: {focus: true}) %>
2
- <br>
3
- <%= pb_rails("rich_text_editor", props: {focus: true}) %>
@@ -1,6 +0,0 @@
1
- <%= pb_rails("rich_text_editor", props: {
2
- id: "inline",
3
- inline: true,
4
- toolbar_bottom: true,
5
- value: "Try hovering over this text. Then try modifying it or adding more of your own text."
6
- }) %>
@@ -1,35 +0,0 @@
1
-
2
- <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
3
- <div id="card-obfuscation" style="display:none">
4
- <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
5
- <div id="content-preview" class="trix-content">
6
- </div>
7
- <% end %>
8
- </div>
9
- <%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
10
- <span>Preview Output</span>
11
- <% end %>
12
-
13
- <script>
14
- document.addEventListener('DOMContentLoaded', () => {
15
- function handleButtonClick() {
16
- const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
17
- .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
18
-
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
- })
35
- </script>
@@ -1,10 +0,0 @@
1
- <%= pb_rails("rich_text_editor", props: {
2
- id: "required-indicator",
3
- input_options: {
4
- id: 'hidden_input_id',
5
- name: "hidden_input_name"
6
- },
7
- label: "Label",
8
- required_indicator: true,
9
- value: "Add your text here. You can format your text, add links, quotes, and bullets."
10
- }) %>
@@ -1 +0,0 @@
1
- <%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>
@@ -1 +0,0 @@
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."}) %>
@@ -1,115 +0,0 @@
1
- <% changelog = "<div>
2
- <strong>Changelog:<br></strong>
3
- [INSERT LINK]<br><br>
4
- You can test the normal spots of Playbook rails and react on
5
- dev docs plus the following:
6
- </div>
7
- <div>
8
- <br>
9
- </div>" %>
10
-
11
- <% release = "<div>
12
- <div>
13
- <strong>Story Background</strong>
14
- </div>
15
- <div>
16
- Follow the{' '}
17
- <a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
18
- release process
19
- </a>{' '}
20
- to create a new version, create a gem, and package. Create a Ninja testing
21
- plan, then update Nitro with the new version.
22
- </div>
23
- <div>
24
- <br />
25
- </div>
26
- <div>
27
- <strong>Timeline / Due Date</strong>
28
- </div>
29
- <div>
30
- <em>Release End of business Thursday</em>
31
- </div>
32
- <div>
33
- <em>Testing on Nitro End of business Friday</em>
34
- </div>
35
- <div>
36
- <br />
37
- </div>
38
- <div>
39
- <strong>Definition of done</strong>
40
- </div>
41
- <ol>
42
- <li>Merge all PR’s</li>
43
- <li>Update the final CHANGELOG</li>
44
- <li>Version up and generate NPM, and RubyGem</li>
45
- <li>Create next version branch and milestone</li>
46
- <li>Update default branch and branch protection rules&nbsp;</li>
47
- <li>Notify Everyone of new version</li>
48
- <li>
49
- Generate testing plan and pages to test for Ninjas (update runway
50
- ticket)
51
- </li>
52
- <li>Update version on Nitro and get on Demo</li>
53
- <li>Send Ninjas demo and runway ticket for testing</li>
54
- <li>Ninja Approved + PR Approved</li>
55
- </ol>
56
- <div>
57
- <br />
58
- </div>
59
- <div>
60
- <strong>Stakeholders / Sign-off</strong>
61
- </div>
62
- <ul>
63
- <li>Code Owners</li>
64
- </ul>
65
- <div>
66
- <br />
67
- <strong>Cadence</strong>
68
- <br />
69
- Jason, Jon, Stephen, Jasper, Brendan, Cole
70
- </div>
71
- </div>" %>
72
-
73
- <%= pb_rails("select", props: {
74
- id: "rails-select-dropdown",
75
- label: "",
76
- name: "",
77
- blank_selection: "Select a template",
78
- options: [
79
- {
80
- value: release,
81
- value_text: "Playbook Release",
82
- },
83
- {
84
- value: changelog,
85
- value_text: "Changelog",
86
- },
87
- ]
88
- }) %>
89
-
90
-
91
-
92
-
93
-
94
- <%= pb_rails("rich_text_editor", props: {classname: 'template-test', id: "template", template: '' }) %>
95
-
96
-
97
- <script>
98
- const updateContent = (template) => {
99
- const trix = document.querySelector('.template-test trix-editor');
100
- const editor = trix.editor;
101
- console.log(editor)
102
- editor.loadHTML("")
103
- editor.setSelectedRange([0, 0])
104
- editor.insertHTML(template)
105
- }
106
-
107
- window.addEventListener('DOMContentLoaded', () => {
108
- const editor = document.querySelector("#rails-select-dropdown")
109
- editor.addEventListener('change', function() {
110
- console.log('You selected: ', this.value);
111
- const template = this.value
112
- updateContent(template);
113
- });
114
- });
115
- </script>
@@ -1,4 +0,0 @@
1
- <%= pb_rails("rich_text_editor", props: {
2
- id: "toolbar-bottom",
3
- toolbar_bottom: true
4
- }) %>
@@ -1,14 +0,0 @@
1
- import React from 'react'
2
- import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
-
4
- const RichTextEditorToolbarBottom = (props) => (
5
- <div>
6
- <RichTextEditor
7
- id="bottom-toolbar"
8
- toolbarBottom
9
- {...props}
10
- />
11
- </div>
12
- )
13
-
14
- export default RichTextEditorToolbarBottom