playbook_ui_docs 15.2.0.pre.alpha.testingtiptap11313 → 15.2.0.pre.alpha.toastfixes11416

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 (20) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_button/docs/_button_loading.html.erb +7 -3
  3. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +29 -0
  4. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md +2 -0
  5. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +2 -8
  7. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -6
  8. data/dist/playbook-doc.js +2 -2
  9. metadata +2 -13
  10. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx +0 -38
  11. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md +0 -1
  12. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx +0 -34
  13. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md +0 -1
  14. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx +0 -37
  15. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md +0 -1
  16. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx +0 -37
  17. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx +0 -38
  18. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md +0 -1
  19. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx +0 -69
  20. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md +0 -1
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: 15.2.0.pre.alpha.testingtiptap11313
4
+ version: 15.2.0.pre.alpha.toastfixes11416
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: 2025-10-13 00:00:00.000000000 Z
12
+ date: 2025-10-15 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -1853,20 +1853,9 @@ files:
1853
1853
  - app/pb_kits/playbook/pb_radio/docs/example.yml
1854
1854
  - app/pb_kits/playbook/pb_radio/docs/index.js
1855
1855
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
1856
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx
1857
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md
1858
1856
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
1859
1857
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
1860
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx
1861
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md
1862
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
1863
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
1864
1858
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
1865
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
1866
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
1867
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
1868
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
1869
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
1870
1859
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
1871
1860
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
1872
1861
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
@@ -1,38 +0,0 @@
1
- import React from 'react'
2
- import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
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 RichTextEditorAdvancedAttributes = (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
- aria={{ label: 'I am a rich text editor' }}
29
- data={{ 'test-data': 'value', 'test-data2': 'value2' }}
30
- {...props}
31
- >
32
- <EditorContent editor={editor}/>
33
- </RichTextEditor>
34
- </div>
35
- )
36
- }
37
-
38
- export default RichTextEditorAdvancedAttributes
@@ -1 +0,0 @@
1
- Aria labels and data attributes can also be added to the top level div for the RichTextEditor.
@@ -1,34 +0,0 @@
1
- import React from 'react'
2
- import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
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 RichTextEditorAdvancedFocus = (props) => {
9
- const editor = useEditor({
10
- extensions: [
11
- StarterKit,
12
- Link
13
- ],
14
- content:"Click inside to see the toolbar. Click outside to hide it."
15
- })
16
-
17
- if (!editor) {
18
- return null
19
- }
20
-
21
- return (
22
- <div>
23
- <RichTextEditor
24
- advancedEditor={editor}
25
- focus
26
- {...props}
27
- >
28
- <EditorContent editor={editor}/>
29
- </RichTextEditor>
30
- </div>
31
- )
32
- }
33
-
34
- export default RichTextEditorAdvancedFocus
@@ -1 +0,0 @@
1
- When the optional `focus` prop is set to true, the toolbar will only show once you click in to the RichTextEditor.
@@ -1,37 +0,0 @@
1
- import React from 'react'
2
- import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
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 RichTextEditorAdvancedInline = (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
- inline
29
- {...props}
30
- >
31
- <EditorContent editor={editor}/>
32
- </RichTextEditor>
33
- </div>
34
- )
35
- }
36
-
37
- export default RichTextEditorAdvancedInline
@@ -1 +0,0 @@
1
- When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on.
@@ -1,37 +0,0 @@
1
- import React from 'react'
2
- import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
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 RichTextEditorAdvancedSimple = (props) => {
9
-
10
- const editor = useEditor({
11
- extensions: [
12
- StarterKit,
13
- Link
14
- ],
15
- content:"Add your text here. Use the simple toolbar above to format your text"
16
- })
17
- if (!editor) {
18
- return null
19
- }
20
-
21
-
22
-
23
-
24
- return (
25
- <div>
26
- <RichTextEditor
27
- advancedEditor={editor}
28
- simple
29
- {...props}
30
- >
31
- <EditorContent editor={editor}/>
32
- </RichTextEditor>
33
- </div>
34
- )
35
- }
36
-
37
- export default RichTextEditorAdvancedSimple
@@ -1,38 +0,0 @@
1
- import React from 'react'
2
- import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
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 RichTextEditorAdvancedSticky = (props) => {
9
-
10
- const editor = useEditor({
11
- extensions: [
12
- StarterKit,
13
- Link
14
- ],
15
- content:"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."
16
-
17
- })
18
- if (!editor) {
19
- return null
20
- }
21
-
22
-
23
-
24
-
25
- return (
26
- <div>
27
- <RichTextEditor
28
- advancedEditor={editor}
29
- sticky
30
- {...props}
31
- >
32
- <EditorContent editor={editor}/>
33
- </RichTextEditor>
34
- </div>
35
- )
36
- }
37
-
38
- export default RichTextEditorAdvancedSticky
@@ -1 +0,0 @@
1
- Use the optional `sticky` prop to make the toolbar sticky on scroll.
@@ -1,69 +0,0 @@
1
- import React, {useState, useEffect} from 'react'
2
- import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
3
- import { useEditor, EditorContent } from "@tiptap/react"
4
- import StarterKit from "@tiptap/starter-kit"
5
- import Link from '@tiptap/extension-link'
6
-
7
- import Select from '../../pb_select/_select'
8
- import { changelog, release } from './templates.js'
9
-
10
- const RichTextEditorAdvancedTemplates = (props) => {
11
-
12
- const [editorContent, setEditorContent] = useState('')
13
-
14
- const handleChange = (event) => {
15
- setEditorContent(event.target.value)
16
- }
17
- const templatesOptions = [
18
- {
19
- value: release,
20
- text: 'Playbook Release',
21
- },
22
- {
23
- value: changelog,
24
- text: 'Changelog',
25
- },
26
- ]
27
-
28
- const editor = useEditor({
29
- extensions: [
30
- StarterKit,
31
- Link
32
- ],
33
- content: editorContent
34
- })
35
-
36
- // Update editor content when editorContent state changes
37
- useEffect(() => {
38
- if (editor && editorContent) {
39
- editor.commands.setContent(editorContent)
40
- }
41
- }, [editor, editorContent])
42
-
43
- if (!editor) {
44
- return null
45
- }
46
-
47
-
48
-
49
-
50
- return (
51
- <div>
52
- <Select
53
- blankSelection="Select a template..."
54
- label="Template"
55
- onChange={handleChange}
56
- options={templatesOptions}
57
- {...props}
58
- />
59
- <RichTextEditor
60
- advancedEditor={editor}
61
- {...props}
62
- >
63
- <EditorContent editor={editor}/>
64
- </RichTextEditor>
65
- </div>
66
- )
67
- }
68
-
69
- export default RichTextEditorAdvancedTemplates
@@ -1 +0,0 @@
1
- Tiptap allows you to set content within the editor using the 'content' prop within useEditor. See the code snippet below to see how this can be done.