playbook_ui 15.4.0.pre.alpha.play254712379 → 15.4.0.pre.alpha.testing6712538

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -33,6 +33,8 @@ export default class PbDropdown extends PbEnhancedElement {
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
+    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
+    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -356,17 +358,6 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   clearFormValidation(input) {
-    if (input.checkValidity()) {
-      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
-      dropdownWrapperElement.classList.remove("error");
-
-      const errorLabelElement = dropdownWrapperElement.querySelector(
-        ".pb_body_kit_negative"
-      );
-      if (errorLabelElement) {
-        errorLabelElement.remove();
-      }
-    }
     if (this.isMultiSelect) {
       if (this.selectedOptions.size > 0) {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
@@ -377,6 +368,19 @@ export default class PbDropdown extends PbEnhancedElement {
         if (errorLabelElement) {
           errorLabelElement.remove();
         }
+        return;
+      }
+    }
+    
+    if (input.checkValidity()) {
+      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+      dropdownWrapperElement.classList.remove("error");
+
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
+      if (errorLabelElement) {
+        errorLabelElement.remove();
       }
     }
   }
@@ -585,7 +589,9 @@ export default class PbDropdown extends PbEnhancedElement {
     // for multi_select, for each selectedOption, create a hidden input
     const name = baseInput.getAttribute("name");
     this.selectedOptions.forEach((raw) => {
-      const id = JSON.parse(raw).id;
+      const optionData = JSON.parse(raw);
+      // Use id if available, otherwise fall back to value
+      const id = optionData.id || optionData.value;
       const inp = document.createElement("input");
       inp.type = "hidden";
       inp.name = name;
@@ -593,7 +599,19 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    baseInput.value = "";
+    
+    // For multi-select, remove required from base input when there are selections
+    // The generated inputs handle the form submission with actual values
+    // Restore required attribute when there are no selections (if it was originally required)
+    if (this.selectedOptions.size > 0) {
+      baseInput.value = "";
+      baseInput.removeAttribute("required");
+    } else {
+      baseInput.value = "";
+      if (this.wasOriginallyRequired) {
+        baseInput.setAttribute("required", "");
+      }
+    }
   }
 
   handleBackspaceClear() {

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import FormPill from '../_form_pill'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LoadingInline } from 'playbook-ui'
+import LoadingInline from '../_loading_inline'
 
 const LoadingInlineVariant = (props) => {
   return (

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 import colors from '../../tokens/exports/_colors.module.scss'
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
   const chartData = [{
     name: 'Installation',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartOptions = {

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 import Title from "../../pb_title/_title"
 
 

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 import colors from '../../tokens/exports/_colors.module.scss'
 import typography from '../../tokens/exports/_typography.module.scss'

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, Title } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import Title from "../../pb_title/_title";
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, colors } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import colors from '../../tokens/exports/_colors.module.scss';
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, Title } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import Title from "../../pb_title/_title";
 
 const dataFirst = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data = [{
   name: 'Bugs',

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const chartOptions = {
   series: [

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const dataFirst = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { PbCircleChart, Button } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import Button from "../../pb_button/_button";
 
 const chartData = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data= [
 {

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
 
 const data = [{ name: "Name", y: 67 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx

@@ -7,7 +7,8 @@ import Caption from '../../pb_caption/_caption'
 import Body from '../../pb_body/_body'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 import Title from '../../pb_title/_title'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Name", y: 10 }];
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Capacity", y: 75 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const chartOptions = {
   title: {

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Rating", y: 4.5 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 
 const data1 = [

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
-import { colors } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+import PbReactPopover from "../_popover";
+import Body from "../../pb_body/_body";
+import Flex from "../../pb_flex/_flex";
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
 
 const PopoverAppendTo = (props) => {
   const [showParentPopover, setShowParentPopover] = useState(false);

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import { useForm } from "react-hook-form"
-import { Radio, Flex, Body } from "playbook-ui"
+import Radio from "../_radio"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
 
 const RadioReactHook = () => {
   const { register, watch } = useForm({

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -96,7 +96,7 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
             {
-              extensions && extensions.length > 0 && (
+              extensions && (
                 <>
                   <MoreExtensionsDropdown extensions={extensions}/>
                 </>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -2,10 +2,6 @@ import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
-import { useEditor, EditorContent } from '@tiptap/react'
-import StarterKit from '@tiptap/starter-kit'
-import Link from '@tiptap/extension-link'
-
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
@@ -52,8 +48,7 @@ type RichTextEditorProps = {
   sticky?: boolean,
   template: string,
   value?: string,
-  maxWidth?: string,
-  railsEditor?: boolean
+  maxWidth?: string
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -86,27 +81,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
     containerRef = useRef<HTMLDivElement>(null)
 
-  const isRails = !advancedEditor && props.railsEditor === true
-
-  // TipTap editor for Rails (hook always runs per React rules, but only used when isRails is true)
-  const railsTipTapEditor = useEditor({
-    extensions: [StarterKit, Link],
-    content: value || '',
-    onUpdate: ({ editor }) => {
-      if (!isRails) return
-      
-      const html = editor.getHTML()
-      const text = editor.getText()
-      onChange(html, text)
-      
-      // Update hidden input for TipTap Rails form submission
-      const hiddenInput = document.getElementById(`hidden-input-${props.id || 'rich-text-editor'}`)
-      if (hiddenInput) {
-        (hiddenInput as HTMLInputElement).value = html ?? ''
-      }
-    },
-  }, [isRails, value])
-
   const htmlProps = buildHtmlProps(htmlOptions)
   
   const handleOnEditorReady = (editorInstance: Editor) => {
@@ -166,8 +140,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }
 
   useEffect(() => {
-    const tiptapEditor = advancedEditor || railsTipTapEditor
-    if (!tiptapEditor || !focus) return
+    if (!advancedEditor || !focus) return
 
     const handleFocus = () => setShowToolbarOnFocus(true)
     
@@ -176,7 +149,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       setShowToolbarOnFocus(false)
     }
 
-    const editorElement = tiptapEditor?.view?.dom
+    const editorElement = advancedEditor?.view?.dom
     if (editorElement) {
       editorElement.addEventListener('focus', handleFocus)
     }
@@ -189,7 +162,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       }
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [advancedEditor, railsTipTapEditor, focus])
+  }, [advancedEditor, focus])
 
   //============= end focus prop with advanced editor=================
 
@@ -200,17 +173,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     editor.insertHTML(template)
   }, [editor, template])
 
-  // Handle value prop changes for Rails TipTap editor
-  useEffect(() => {
-    if (!railsTipTapEditor) return
-    const currentContent = railsTipTapEditor.getHTML()
-    const newValue = value || ''
-
-    if (currentContent !== newValue) {
-      railsTipTapEditor.commands.setContent(newValue)
-    }
-  }, [railsTipTapEditor, value])
-
   useEffect(() => {
     if (!editor?.element) return
     editor.element.addEventListener('click', ({ target }: Event) => {
@@ -238,11 +200,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     className
   )
 
-  // Get the TipTap editor instance (either passed from React or auto-initialized for Rails)
-  const tipTapEditor = advancedEditor || (isRails ? railsTipTapEditor : null)
-
   // Determine if toolbar should be shown
-  const shouldShowToolbar = focus && tipTapEditor ? showToolbarOnFocus : advancedEditorToolbar
+  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
   return (
     <div
@@ -253,32 +212,20 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
       {
-        // Render TipTap editor if indicated (React with advancedEditor or Rails by default (railsEditor is true), otherwise Trix
-        tipTapEditor ? (
+        advancedEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
               ["toolbar-active"]: shouldShowToolbar,
               })}
           >
             {shouldShowToolbar && (
-              <EditorToolbar editor={tipTapEditor}
+              <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
                   simple={simple}
                   sticky={sticky}
               />
             )}
-            {/* EditorContent for Rails railsTipTapEditor, children for React TipTap advancedEditor */}
-            {railsTipTapEditor ? <EditorContent editor={tipTapEditor} /> : <>{children}</>}
-            
-            {/* Set up hidden input for TipTap Rails form submission */}
-            {railsTipTapEditor && (
-              <input 
-                  id={`hidden-input-${props.id || 'rich-text-editor'}`}
-                  name={name || 'content'}
-                  type="hidden" 
-                  value={tipTapEditor?.getHTML() ?? ''}
-              />
-            )}
+          { children }
           </div>
         ) : (
           <TrixEditor

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb

@@ -1,11 +1,3 @@
-<%= pb_rails("rich_text_editor", props: {
-    id: "focus-editor-1",
-    focus: true,
-    value: "Click inside to see the toolbar. Click outside to hide it."
-}) %>
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>
 <br>
-<%= pb_rails("rich_text_editor", props: {
-    id: "focus-editor-2",
-    focus: true,
-    value: "When the optional focus prop is set to true, the toolbar will only show once you click in to the RichTextEditor."
-}) %>
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,38 +1,30 @@
-<%= pb_rails("rich_text_editor", props: { 
-  id: "content-preview-editor",
-  margin_bottom: "md",
-  value: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
-}) %>
-
-<%= pb_rails("button", props: { id: "preview-button", text: "Preview Output", variant: "secondary" }) %>
 
+<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
   <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
-   <div id="content-preview" class="tiptap-content">
+   <div id="content-preview" class="trix-content">
    </div>
   <% end %>
 </div>
+<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
+  <span>Preview Output</span>
+<% end %>
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
-      // Find the specific TipTap editor container by ID
       const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
         .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
 
-      if (!editorContainer) {
-        console.log('Editor container not found')
-        return
-      }
-
-      // Find the TipTap editor content
-      const tiptapEditor = editorContainer.querySelector('.ProseMirror')
+      const editorElement = editorContainer?.querySelector('trix-editor')
+      const inputId = editorElement?.getAttribute('input')
+      const inputElement = inputId && document.getElementById(inputId)
+      
+      const editorContent = inputElement?.value || '' 
       const previewArea = document.getElementById('content-preview')
       const cardDiv = document.getElementById('card-obfuscation')
 
-      if (tiptapEditor && previewArea && cardDiv) {
-        // Get the HTML content from the TipTap editor
-        const editorContent = tiptapEditor.innerHTML || ''
+      if (previewArea && cardDiv) {
         previewArea.innerHTML = editorContent 
         cardDiv.style.display = 'block'
       }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb

@@ -1,5 +1 @@
-<%= pb_rails("rich_text_editor", props: {
-    id: "simple-editor",
-    simple: true,
-    value: "Add your text here. Use the simple toolbar above to format your text." 
-}) %>
+<%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>