playbook_ui 15.2.0.pre.alpha.testingtiptap11313 → 15.2.0.pre.alpha.toastfixes11416

data/lib/playbook/pb_forms_helper.rb

@@ -41,12 +41,13 @@ module Playbook
         builder: ::Playbook::Forms::Builder
       )
 
-      content_for(:pb_js, javascript_tag(<<~JS))
-        window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
-        window.addEventListener("DOMContentLoaded", () => formHelper())
-      JS
-
-      form_with(**options, &block)
+      capture do
+        concat form_with(**options, &block)
+        concat javascript_tag(<<~JS)
+          window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
+          window.addEventListener("DOMContentLoaded", () => formHelper())
+        JS
+      end
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.2.0"
-  VERSION = "15.2.0.pre.alpha.testingtiptap11313"
+  VERSION = "15.2.0.pre.alpha.toastfixes11416"
 end

data/lib/playbook/z_index.rb

@@ -7,7 +7,7 @@ module Playbook
     end
 
     def z_index_values
-      %w[1 2 3 4 5 6 7 8 9 10]
+      %w[1 2 3 4 5 6 7 8 9 10 max]
     end
 
     def z_index_options

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.2.0.pre.alpha.testingtiptap11313
+  version: 15.2.0.pre.alpha.toastfixes11416
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-10-13 00:00:00.000000000 Z
+date: 2025-10-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -2700,20 +2700,9 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
@@ -3719,9 +3708,9 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_line_graph-BoA3Vs81.js
-- dist/chunks/_typeahead-BkqswwwC.js
-- dist/chunks/_weekday_stacked-CjVj28hU.js
+- dist/chunks/_line_graph-BmLd7KGj.js
+- dist/chunks/_typeahead-BhGFKFka.js
+- dist/chunks/_weekday_stacked-5TWRvQol.js
 - dist/chunks/componentRegistry-DzmmLR2x.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-QZuu1ltS.js

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedAttributes = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. You can format your text, add links, quotes, and bullets."
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          aria={{ label: 'I am a rich text editor' }}
-          data={{ 'test-data': 'value', 'test-data2': 'value2' }}
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedAttributes

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md

@@ -1 +0,0 @@
-Aria labels and data attributes can also be added to the top level div for the RichTextEditor.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedFocus = (props) => {
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Click inside to see the toolbar. Click outside to hide it."
-    })
-
-    if (!editor) {
-        return null
-    } 
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          focus
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedFocus

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md

@@ -1 +0,0 @@
-When the optional `focus` prop is set to true, the toolbar will only show once you click in to the RichTextEditor. 

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedInline = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. You can format your text, add links, quotes, and bullets."
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          inline
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md

@@ -1 +0,0 @@
-When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on. 

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedSimple = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content:"Add your text here. Use the simple toolbar above to format your text"
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          simple
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedSimple

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-
-const RichTextEditorAdvancedSticky = (props) => {
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        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."
-
-    })
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-      <RichTextEditor
-          advancedEditor={editor}
-          sticky
-          {...props}
-      >
-        <EditorContent editor={editor}/>
-      </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedSticky

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md

@@ -1 +0,0 @@
-Use the optional `sticky` prop to make the toolbar sticky on scroll.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx

@@ -1,69 +0,0 @@
-import React, {useState, useEffect} from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { useEditor, EditorContent } from "@tiptap/react"
-import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
-
-import Select from '../../pb_select/_select'
-import { changelog, release } from './templates.js'
-
-const RichTextEditorAdvancedTemplates = (props) => {
-
-const [editorContent, setEditorContent] = useState('')
-    
-const handleChange = (event) => {
-        setEditorContent(event.target.value)
-}
-  const templatesOptions = [
-    {
-      value: release,
-      text: 'Playbook Release',
-    },
-    {
-      value: changelog,
-      text: 'Changelog',
-    },
-  ]
-
-    const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
-        content: editorContent
-    })
-
-    // Update editor content when editorContent state changes
-    useEffect(() => {
-        if (editor && editorContent) {
-            editor.commands.setContent(editorContent)
-        }
-    }, [editor, editorContent])
-
-      if (!editor) {
-        return null
-      } 
-
-      
-
-
-  return (
-    <div>
-        <Select
-            blankSelection="Select a template..."
-            label="Template"
-            onChange={handleChange}
-            options={templatesOptions}
-            {...props}
-        />
-        <RichTextEditor
-            advancedEditor={editor}
-            {...props}
-        >
-        <EditorContent editor={editor}/>
-        </RichTextEditor>
-    </div>
-  )
-}
-
-export default RichTextEditorAdvancedTemplates

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md

@@ -1 +0,0 @@
-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.