playbook_ui 16.1.0.pre.alpha.play274314102 → 16.1.0.pre.alpha.play276813969

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 55c0e17fe1c9ebc070555123e048fad21174f1103ff7c924a70ef6fcbaf10f67
-  data.tar.gz: 7e49dfd207ef248a867883cbd4d2dc3c39f93dbb872578493a6732d2906097bf
+  metadata.gz: 387f03d299bddebe2e4ac7e9800fddf28bb00cdeceb0ffcd9a5c4ea1ed211d20
+  data.tar.gz: 03b9b1cbcb66afd3afd4d28eb8c0226dc4d7a2ddc883dadb0844bc427f857831
 SHA512:
-  metadata.gz: df84055b7fa9e7ba93d1e94fe8c4944033897e8841c05ef21c52191a91083856c072cb1d67a53c184d6cb39e28276eb862eb37818d12b200936b4e6e252d7c2e
-  data.tar.gz: 3ad38213a67a4a3c9440db8558c75728d4a6df072070420d1ef93a14efd5f13416addd58c165e5dc92e300ac1c3613870f0812f5bd6896fd10e8323d4eaed27d
+  metadata.gz: e4f7c1a63a205b06dadc63869cbfb9f761d88775d9d625efe37bd896d1cbd5269107b71fc0c24714bb781c2b314e949aa5a37bcab80eed8689fe0d90b72796f9
+  data.tar.gz: 7933fda91c7fe525372cb559bcc56147fe86bc877cac737603ee0694b62f34fdef93cd2e40b88860de6a51f0c389e21ac2ae6d858cd1cb14531a31083e78bd7c

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -66,18 +66,8 @@ const TableCellRenderer = ({
         // Find the "owning" colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        
-        // Support function-based styling for conditional rendering
-        const cellFontColorValue = colDef?.columnStyling?.fontColor
-        const cellFontColor = typeof cellFontColorValue === 'function' 
-          ? cellFontColorValue(row) 
-          : cellFontColorValue
-        
-        const cellBackgroundColorValue = colDef?.columnStyling?.cellBackgroundColor
-        const cellBackgroundColor = typeof cellBackgroundColorValue === 'function' 
-          ? cellBackgroundColorValue(row) 
-          : cellBackgroundColorValue
-        
+        const cellFontColor = colDef?.columnStyling?.fontColor
+        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -920,39 +920,6 @@ test("columnStyling.backgroundColor works as excpected", () => {
   expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.error_subtle });
 });
 
-test("columnStyling.cellBackgroundColor works as expected with function", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
-        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
-      },    
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.success_subtle, color: colors.success });
-}); 
-
 test("columnStyling.headerBackgroundColor works as excpected", () => {
   const styledColumnDefs = [
     {

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

@@ -78,7 +78,6 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,5 +47,4 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -168,4 +168,4 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -4,8 +4,6 @@ import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import colors from '../tokens/exports/_colors.module.scss'
-import spacing from '../tokens/exports/_spacing.module.scss'
 
 type CheckboxProps = {
   aria?: {[key: string]: string},
@@ -21,7 +19,6 @@ type CheckboxProps = {
   indeterminate?: boolean,
   name?: string,
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
-  requiredIndicator?: boolean,
   tabIndex?: number,
   text?: string,
   value?: string,
@@ -42,7 +39,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     indeterminate = false,
     name = '',
     onChange = () => { void 0 },
-    requiredIndicator = false,
     tabIndex,
     text = '',
     value = '',
@@ -128,20 +124,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           variant={null}
       >
         {text}
-        {requiredIndicator && (
-          <span
-              aria-hidden="true"
-              className="pb_required_indicator"
-              style={{
-                color: colors.error,
-                marginLeft: spacing.space_xs,
-              }}
-          >
-           {'*'}
-          </span>
-        )}
       </Body>
-
     </label>
   )
 })

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -5,15 +5,6 @@
     <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
   </span>
   <span class="pb_checkbox_label">
-    <%= pb_rails("body", props: { status: object.checkbox_label_status, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) do %>
-      <%= object.text%>
-      <% if object.required_indicator %>
-        <span
-          class="pb_checkbox_required_indicator"
-          aria-hidden="true"
-          style="color: #DA0014;"
-        >*</span>
-      <% end %>
-    <% end %>
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -23,8 +23,6 @@ module Playbook
       prop :hidden_input, type: Playbook::Props::Boolean,
                           default: false
       prop :hidden_value
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + error_class

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

@@ -8,7 +8,6 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
-    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -18,7 +17,6 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
-  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

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

@@ -5,4 +5,3 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
-export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId: string,
+  pickerId?: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,8 +196,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
-  const errorId = error ? `${pickerId}-error` : undefined
-
   return (
     <div
         {...ariaProps}
@@ -213,18 +211,14 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
 
         {!hideLabel && (
-           <label htmlFor={pickerId}>
-            <Caption
-                className="pb_date_picker_kit_label"
-                text={label}
-            />
-          </label>
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
-                  aria-describedby={errorId}
-                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -238,9 +232,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
               {error &&
                   <Body
-                      aria={{ atomic: "true", live: "polite" }}
-                      htmlOptions={{ role: "alert" }}
-                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb

@@ -1,17 +1,14 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
-  <%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", required: true, required_indicator: true } %>
-  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -26,10 +26,6 @@ class PbFormValidation extends PbEnhancedElement {
       const isPhoneNumberInput = field.closest('.pb_phone_number_input')
       if (isPhoneNumberInput) return
 
-      // Skip TimePicker inputs - they handle their own validation
-      const isTimePickerInput = field.closest('.pb_time_picker')
-      if (isTimePickerInput) return
-
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
@@ -71,16 +67,13 @@ class PbFormValidation extends PbEnhancedElement {
 
     // Check if this is a phone number input
     const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
-    
-    // Check if this is a TimePicker input
-    const isTimePickerInput = kitElement.classList.contains('pb_time_picker')
 
     // ensure clean error message state
     this.clearError(target)
     kitElement.classList.add('error')
 
-    // Only add error message if it's NOT a phone number input or TimePicker input
-    if (!isPhoneNumberInput && !isTimePickerInput) {
+    // Only add error message if it's NOT a phone number input
+    if (!isPhoneNumberInput) {
       // set the error message element
       const errorMessageContainer = this.errorMessageContainer
 

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -178,40 +178,22 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
               {...inputProps}
           />
           <span
-              aria-label={
-                showPassphrase
-                  ? "Passphrase currently visible. Click icon to hide password"
-                  : "Passphrase currently hidden. Click icon to reveal password"
-              }
-              aria-pressed={showPassphrase}
               className="show-passphrase-icon"
               onClick={toggleShowPassphrase}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault()
-                  toggleShowPassphrase(e as any)
-                }
-              }}
-              role="button"
-              tabIndex={0}
           >
             <Body
                 className={showPassphrase ? "hide-icon" : ""}
                 color="light"
                 dark={dark}
             >
-              <Icon 
-                  aria={{ label: "eye icon" }} 
-                  icon="eye-slash" 
-              />
+              <Icon icon="eye-slash" />
             </Body>
             <Body
                 className={showPassphrase ? "" : "hide-icon"}
                 color="light"
                 dark={dark}
             >
-            <Icon 
-                aria={{ label: "eye icon" }} 
+            <Icon  
                 className="svg-inline--fa"
                 customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
             />

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
-// The user must import and pass TrixEditor as a prop if using the default editor
+import { TrixEditor } from 'react-trix'
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
@@ -9,6 +9,14 @@ import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
+import Trix from 'trix'
+import './_dedupe_trix_toolbar'
+
+Trix.config.textAttributes.inlineCode = {
+  tagName: 'code',
+  inheritable: true,
+}
+
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
@@ -47,7 +55,6 @@ type RichTextEditorProps = {
   template: string,
   value?: string,
   maxWidth?: string
-  TrixEditor?: React.ComponentType<any>,
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -77,7 +84,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     maxWidth = "md",
     requiredIndicator = false,
     label,
-    TrixEditor,
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -88,51 +94,25 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
-  const fieldId = id ? (id as string) : null
-  const labelElementId = fieldId ? `${fieldId}-label` : null
-
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
-
     setTimeout(() => {
-      const oldId = editorInstance.element?.getAttribute("input")
-      if (!oldId) return
-
-      const hiddenInput = document.getElementById(oldId) as HTMLElement | null
-      if (!hiddenInput) return
-
-      const hiddenInputId = (inputOptions.id as string) || oldId
-
-      if (hiddenInputId !== oldId) {
-        hiddenInput.id = hiddenInputId
-        editorInstance.element?.setAttribute("input", hiddenInputId)
-      }
-
-      if (inputOptions.name) {
-        hiddenInput.setAttribute("name", inputOptions.name as string)
-      }
-
-      const editorDomId = (id as string) || `${hiddenInputId}_trix`
-      const trixLabelId = ((id as string) || hiddenInputId) + "-label"
-
-      if (label) {
-        editorInstance.element?.setAttribute("aria-labelledby", trixLabelId)
+      const oldId = editorInstance.element.getAttribute('input')
+      if (oldId) {
+        const hiddenInput = document.getElementById(oldId)
+        if (hiddenInput) {
+          const newId = (inputOptions.id as string) || oldId
+          hiddenInput.id = newId
+          editorInstance.element.setAttribute('input', newId)
+
+          if (inputOptions.name) {
+            hiddenInput.setAttribute('name', inputOptions.name as string)
+          }
+        }
       }
-      editorInstance.element!.id = editorDomId
     })
   }
 
-  useEffect(() => {
-    if (!advancedEditor || !fieldId || !labelElementId) return
-
-    const dom = advancedEditor.view?.dom as HTMLElement | undefined
-    if (!dom) return
-
-    dom.setAttribute("aria-labelledby", labelElementId)
-    dom.setAttribute("role", "textbox")
-    dom.setAttribute("aria-multiline", "true")
-  }, [advancedEditor, fieldId, labelElementId])
-
   // DOM manipulation must wait for editor to be ready
   if (editor && editor.element) {
     const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -234,8 +214,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
-  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
-
   return (
     <div
         {...ariaProps}
@@ -245,14 +223,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
     {label && (
-      <label
-          {...(labelFor ? { htmlFor: labelFor, id: labelElementId } : {})}
-          onMouseDown={(e) => {
-            if (!advancedEditor || !fieldId) return
-            e.preventDefault()
-            advancedEditor.commands.focus()
-          }}
-      >
+      <label  htmlFor={id}>
         {
           requiredIndicator ? (
             <Caption className="pb_text_input_kit_label"
@@ -275,9 +246,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         advancedEditor ? (
           <div
               className={classnames(
-              "pb_rich_text_editor_advanced_container",
-              { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-            )}
+                "pb_rich_text_editor_advanced_container",
+                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+              )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}
@@ -289,23 +260,15 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
           { children }
           </div>
         ) : (
-          TrixEditor ? (
-            <TrixEditor
-                className=""
-                fileParamName={name}
-                mergeTags={[]}
-                onChange={onChange}
-                onEditorReady={handleOnEditorReady}
-                placeholder={placeholder}
-                value={value}
-            />
-          ) : (
-            <div style={{ color: 'red', padding: '1em', border: '1px solid #f00', background: '#fff0f0' }}>
-              <strong>Trix Editor is not available.</strong><br />
-              Please import <code>TrixEditor</code> from <code>react-trix</code> and pass it as a prop to <code>RichTextEditor</code>.<br />
-              <pre>{`import { TrixEditor } from 'react-trix';\n<RichTextEditor TrixEditor={TrixEditor} ... />`}</pre>
-            </div>
-          )
+          <TrixEditor
+              className=""
+              fileParamName={name}
+              mergeTags={[]}
+              onChange={onChange}
+              onEditorReady={handleOnEditorReady}
+              placeholder={placeholder}
+              value={value}
+          />
         )
       }
     </div>

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

@@ -22,7 +22,6 @@ const RichTextEditorAdvancedRequiredIndicator = (props) => {
     <div>
       <RichTextEditor
           advancedEditor={editor}
-          id={"required-advanced"}
           label="Label"
           requiredIndicator
           {...props}

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

@@ -0,0 +1,5 @@
+<%= pb_rails("rich_text_editor", props: {
+  aria: { label: "rich-textarea" },
+  data: { key: "value", key2: "value2" },
+  name: "textarea-label",
+}) %>

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

@@ -1,13 +1,9 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorAttributes = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         aria={{ label: 'rich textarea' }}
         data={{ key: 'value', key2: 'value2' }}
         name="name-attribute"

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

@@ -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."}) %>

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

@@ -1,8 +1,5 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix' 
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -11,7 +8,6 @@ const RichTextEditorDefault = (props) => {
   return (
     <div>
       <RichTextEditor
-          TrixEditor={TrixEditor}
           onChange={handleOnChange}
           value={value}
           {...props}

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

@@ -0,0 +1,3 @@
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>
+<br>
+<%= pb_rails("rich_text_editor", props: {focus: true}) %>

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

@@ -1,19 +1,14 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorFocus = (props) => (
   <>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         focus
         {...props}
     />
     <br />
     <RichTextEditor
-        TrixEditor={TrixEditor}
         focus
         {...props}
     />

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

@@ -0,0 +1,6 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "inline",
+  inline: true,
+  toolbar_bottom: true,
+  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
+}) %>

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

@@ -1,13 +1,9 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import { TrixEditor } from 'react-trix'
-// eslint-disable-next-line no-unused-vars
-import Trix from 'trix'
 
 const RichTextEditorInline = (props) => (
   <div>
     <RichTextEditor
-        TrixEditor={TrixEditor}
         id="inline"
         inline
         toolbarBottom

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

@@ -0,0 +1,35 @@
+
+<%= 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="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() {
+      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
+        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"content-preview-editor"'))
+
+      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 (previewArea && cardDiv) {
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      }
+    }
+
+    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
+  })
+</script>