playbook_ui 15.2.0 → 15.3.0.pre.alpha.PLAY2322popoverconditionalrender11766

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

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

@@ -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. 

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -7,7 +7,7 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
-  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
 
@@ -17,11 +17,17 @@ examples:
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - rich_text_editor_simple: Simple
+  - rich_text_editor_advanced_simple: Advanced (Simple)
   - rich_text_editor_attributes: Attributes
+  - rich_text_editor_advanced_attributes: Advanced (Attributes)
   - rich_text_editor_focus: Focus
+  - rich_text_editor_advanced_focus: Advanced (Focus)
   - rich_text_editor_sticky: Sticky
+  - rich_text_editor_advanced_sticky: Advanced (Sticky)
   - rich_text_editor_templates: Templates
-  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_advanced_templates: Advanced (Templates)
+  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
   - rich_text_editor_inline: Inline
+  - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -11,3 +11,9 @@ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_ad
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
 export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
+export { default as RichTextEditorAdvancedSimple } from './_rich_text_editor_advanced_simple.jsx'
+export { default as RichTextEditorAdvancedFocus } from './_rich_text_editor_advanced_focus.jsx'
+export { default as RichTextEditorAdvancedTemplates } from './_rich_text_editor_advanced_templates.jsx'
+export { default as RichTextEditorAdvancedAttributes } from './_rich_text_editor_advanced_attributes.jsx'
+export { default as RichTextEditorAdvancedSticky } from './_rich_text_editor_advanced_sticky.jsx'
+export { default as RichTextEditorAdvancedInline } from './_rich_text_editor_advanced_inline.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js

@@ -1,5 +1,7 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, fireEvent, waitFor } from '../utilities/test-utils'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
 
 import RichTextEditor from './_rich_text_editor'
 
@@ -62,3 +64,127 @@ test('returns "Dark" class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} dark`)
 })
+
+// TipTap testing
+const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: '<p>Test content</p>',
+  })
+
+  if (!editor) return null
+
+  return (
+    <RichTextEditor
+        advancedEditor={editor}
+        data={{ testid: testId }}
+        toolbarOnFocus={toolbarOnFocus}
+        {...props}
+    >
+      <EditorContent editor={editor} />
+    </RichTextEditor>
+  )
+}
+
+describe('Advanced TipTap Editor works as expected', () => {
+  test('renders advanced editor with toolbar', () => {
+    render(<TestAdvancedEditor />)
+    
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(kitClass)
+    
+    // Check for advanced container
+    const advancedContainer = kit.querySelector('.pb_rich_text_editor_advanced_container')
+    expect(advancedContainer).toBeInTheDocument()
+    
+    // Check for toolbar
+    const toolbar = kit.querySelector('.toolbar')
+    expect(toolbar).toBeInTheDocument()
+  })
+
+  test('renders advanced editor without toolbar when advancedEditorToolbar is false', () => {
+    render(<TestAdvancedEditor advancedEditorToolbar={false} />)
+    
+    const kit = screen.getByTestId(testId)
+    const toolbar = kit.querySelector('.toolbar')
+    expect(toolbar).not.toBeInTheDocument()
+  })
+
+  test('shows/hides toolbar on focus when focus is enabled', async () => {
+    render(<TestAdvancedEditor focus />)
+    
+    const kit = screen.getByTestId(testId)
+    
+    // Initially toolbar should be hidden
+    let toolbar = kit.querySelector('.toolbar')
+    expect(toolbar).not.toBeInTheDocument()
+    
+    const editorElement = kit.querySelector('.ProseMirror')
+    // Focus the editor
+    fireEvent.focus(editorElement)
+    
+    // Toolbar should now be visible
+    await waitFor(() => {
+      toolbar = kit.querySelector('.toolbar')
+      expect(toolbar).toBeInTheDocument()
+    })
+  })
+
+
+  test('supports simple prop with advanced editor', () => {
+    render(<TestAdvancedEditor simple />)
+    
+    const kit = screen.getByTestId(testId)
+    const toolbar = kit.querySelector('.toolbar')
+    expect(toolbar).toBeInTheDocument()
+    const toolbarDropdown = kit.querySelector('.editor_dropdown_button')
+    expect(toolbarDropdown).not.toBeInTheDocument()
+    expect(kit).toHaveClass(`${kitClass} simple`)
+  })
+
+    test('supports sticky prop with advanced editor', () => {
+    render(<TestAdvancedEditor sticky />)
+    
+    const kit = screen.getByTestId(testId)
+    const stickyToolbar = kit.querySelector('.pb_rich_text_editor_tiptap_toolbar_sticky')
+    expect(stickyToolbar).toBeInTheDocument()
+    expect(kit).toHaveClass(`${kitClass} sticky`)
+  })
+
+  test('applies aria-label when provided', () => {
+    const ariaLabel = 'Rich Text Editor'
+    render(<TestAdvancedEditor aria={{ label: ariaLabel }} />)
+    
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', ariaLabel)
+  })
+
+  test('supports inline prop with advanced editor', () => {
+    render(<TestAdvancedEditor inline />)
+    
+    const kit = screen.getByTestId(testId)
+    const toolbar = kit.querySelector('.toolbar')
+    expect(toolbar).toBeInTheDocument()
+    expect(kit).toHaveClass(`${kitClass} inline`)
+  })
+
+describe('TipTap Editor Functionality', () => {
+  test('can type and update content', async () => {
+    render(<TestAdvancedEditor />)
+    
+    const kit = screen.getByTestId(testId)
+    const editorContent = kit.querySelector('.ProseMirror')
+    
+    // Focus and type in the editor
+    fireEvent.focus(editorContent)
+    fireEvent.input(editorContent, { 
+      target: { textContent: 'New content' }
+    })
+    
+    await waitFor(() => {
+      expect(editorContent).toHaveTextContent('New content')
+    })
+  })
+})
+})
+