playbook_ui 15.0.0.pre.alpha.renovatenpmtrixvulnerability10692 → 15.0.0.pre.alpha.stimulusbutton10763

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7bcc95238d82ff358bd617556b2a6f27f206b5419829471edb16e9a7f63a74c
-  data.tar.gz: 7019681b875c0194c0537cb502566fdc6b73447737b01b9e550d15a4d5de78e3
+  metadata.gz: 3d949c2d669654df8d56ca2863fef4dbdcb143cf8acb4f3a5693eee5c9be68f8
+  data.tar.gz: 9dbc0f1e5082115203fe7f31c2e80cfd0fa8c23ad3359e09db20e15a51c2f289
 SHA512:
-  metadata.gz: fc723753e312a3abfb108ff828cbfff30cd7e23a05b0720f5f3d459e5a55d5fe24474c90ecc1bdffd458af9b793692ae9cf57dfc9d9d817ac5bba536286f93f7
-  data.tar.gz: 920585c68c8f47c7e2c949c107b27b06353a4acf0fe4511c7e0d61616f09e97085dfc5810dbb3299e9f0c4232bf90c6989ce8a3922c3727702c4f577f0c070e1
+  metadata.gz: d139edd243825c2115465ee24481d84b1dd57db03ea1f9096ccfbda81f42b3e82fefcffa586e668d2a163d2777c61981b152e0985b4c21c4401f85c1c8e83e4d
+  data.tar.gz: 38ec1c3422f047193fc6604f8f2eb6daee1a5d380ecf1ce663c8e34d4efefc421d72cc9444724f2fa52df90ab7f04013ba95886c304b5925b9915f15168ef106

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

@@ -30,6 +30,7 @@ const TableCellRenderer = ({
   columnPinning,
   customRowStyle,
   columnDefinitions,
+  isMultiHeaderColumn = false,
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
@@ -38,12 +39,18 @@ const TableCellRenderer = ({
   columnPinning: { left: string[] }
   customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
+  isMultiHeaderColumn?: boolean
 }) => {
   return (
     <>
       {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
         const isPinnedLeft = columnPinning.left.includes(cell.column.id);
+        // Add a border to the right of each group of columns for multi-header column tables
         const isLastCell = (() => {
+          if (!isMultiHeaderColumn) {
+            return false;
+          }
+
           const parent = cell.column.parent;
           if (!parent) {
             const last = row.getVisibleCells().at(-1);
@@ -133,6 +140,9 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
+  const isMultiHeaderColumn = columnDefinitions.some(
+    (obj: Record<string, unknown>) => "columns" in obj
+  );
 
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
@@ -158,6 +168,7 @@ export const RegularTableView = ({
             columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             customRowStyle={customRowStyle}
+            isMultiHeaderColumn={isMultiHeaderColumn}
             loading={loading}
             row={row}
             stickyLeftColumn={stickyLeftColumn}
@@ -221,6 +232,7 @@ export const RegularTableView = ({
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
                   customRowStyle={customRowStyle}
+                  isMultiHeaderColumn={isMultiHeaderColumn}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -249,8 +249,10 @@
   }
 
   .pb_advanced_table_body {
-    .last-cell {
-      border-right: 1px solid $border_light !important;
+    tr {
+      .last-cell:not(:last-of-type) {
+        border-right: 1px solid $border_light !important;
+      }
     }
     tr td:first-child {
       padding-left: 8px !important;
@@ -701,6 +703,14 @@
           }
         }
       }
+
+      .pb_advanced_table_header {
+        > tr {
+          .last-header-cell:last-of-type {
+            border-right-width: 0 !important;
+          }
+        }
+      }
     }
   }
 
@@ -975,14 +985,14 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      .last-header-cell {
+      .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      .last-cell {
+      .last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
@@ -991,14 +1001,14 @@
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        .last-header-cell {
+        .last-header-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        .last-cell {
+        .last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
@@ -1011,18 +1021,62 @@
 .pb-advanced-table-popover-option:hover {
   background-color: $bg_light;
 }
+
 // Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
+.pb_card_kit > .pb_advanced_table {
+  // Remove right border only from the actual last column
+  .pb_advanced_table_body tr td:last-child,
+  .pb_advanced_table_header tr th:last-child {
+    box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
     border-right: none !important;
+  }
+
+  // Without vertical border, remove all last-cell borders
+  // Specifically for header to prevent thicker borders in firefox.
+  .pb_table:not(.vertical-border) {
+    .pb_advanced_table_header .last-header-cell {
+      box-shadow: none !important;
+    }
+  }
+  // Firefox fix
+  @-moz-document url-prefix() {
+    .pb_advanced_table_header {
+      .last-header-cell {
+        box-shadow: 1px 0 0 0 $border_light !important;
+      }
+    }
+  }
+
+  // For tables WITH vertical borders, only remove border from actual last column
+  .pb_table.vertical-border {
+    .pb_advanced_table_body .last-cell:not(:last-child),
+    .pb_advanced_table_header .last-header-cell:not(:last-child) {
+      box-shadow: none !important;
+      border-right: 1px solid $border_light !important;
+    }
+
+    // Dark mode
+    &.dark {
+      .pb_advanced_table_body .last-cell:not(:last-child),
+      .pb_advanced_table_header .last-header-cell:not(:last-child) {
+        border-right: 1px solid $border_dark !important;
+      }
+    }
+  }
+
+  // Support column group border colors
+  &.pb_advanced_table[class*="column-group-border-"] {
+    .pb_advanced_table_body .last-cell:not(:last-child),
+    .pb_advanced_table_header .last-header-cell:not(:last-child) {
+      border-right: 1px solid var(--column-border-color) !important;
+    }
+  }
 }
 
-//  Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table tr:last-child, 
+// Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
+.pb_card_kit > .pb_advanced_table tr:last-child,
 .pb_card_kit > .pb_advanced_table .last-row-cell {
   td {
-    border-bottom: none !important; 
+    border-bottom: none !important;
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx

@@ -44,9 +44,9 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-  
+
   const tableProps = {
-    verticalBorder: true
+    verticalBorder: true,
   }
 
   return (

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb

@@ -0,0 +1,29 @@
+<br/>
+  <%= pb_rails("button", props: { text: "Disable Buttons", variant: "link", id: "toggle-disabled-demo" }) %>
+  <%= pb_rails("button", props: { text: "Enable Buttons", variant: "link", id: "toggle-enabled-demo" }) %>
+<br/>
+<%= pb_rails("button", props: { text: "I am a Normal Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_bottom: "lg" }) %>
+<br/>
+<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com", margin_right: "lg" }) %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disableTrigger = document.querySelector('#toggle-disabled-demo')
+    const enableTrigger = document.querySelector('#toggle-enabled-demo')
+
+    // Managed Buttons
+    const btn = document.querySelector('#normal_managed_button');
+    const link = document.querySelector('#a_tag_managed_button');
+
+    disableTrigger.addEventListener('click', (e) => {
+        // Disable both default button and a tag button
+        btn.setAttribute('disabled', true)
+        link.setAttribute('aria-disabled', 'true')
+    });
+    enableTrigger.addEventListener('click', (e) => {
+        // Enable both default button and a tag button
+        btn.removeAttribute('disabled')
+        link.removeAttribute('aria-disabled')
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md

@@ -0,0 +1,5 @@
+If needing to toggle the disabled state of the Button dynmically, you can now do so in rails using the `pb-button-managed` data attribute. 
+
+If your button has `data:{ pb-button-managed: true }`  on it, you can then toggle state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.  
+
+Click to enable or disable the buttons above and view the code snippet below for details!

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb

@@ -0,0 +1,18 @@
+  <%= pb_rails("button", props: { text: "Disable Button", variant: "link", id: "toggle-disabled-demo-with-helper" }) %>
+  <%= pb_rails("button", props: { text: "Enable Button", variant: "link", id: "toggle-enabled-demo-with-helper" }) %>
+<br/>
+<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const demoBtn = document.querySelector('#managed_button_with_helper')
+
+    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
+    const enable = document.querySelector('#toggle-enabled-demo-with-helper')
+
+    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
+
+    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
+
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md

@@ -0,0 +1,5 @@
+The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute. 
+
+If your button has `data:{ pb-button-managed: true }`  on it, you can then toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shoen in the code snippet below.
+
+Click to enable or disable the buttons above!

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

@@ -11,6 +11,8 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_managed_disabled: Button Toggle Disabled State
+  - button_managed_disabled_helper: Button Toggle Disabled State Helper
   
   react:
   - button_default: Button Variants

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

@@ -0,0 +1,99 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const BUTTON_SELECTOR = "[data-pb-button-managed]"
+
+export default class PbButton extends PbEnhancedElement {
+  static get selector() {
+    return BUTTON_SELECTOR
+  }
+
+  connect() {
+    this._attrManaged = this._attributesPresent()
+    this.element._pbButton = this 
+
+    this._onClick = (e) => {
+      if (this.isDisabled()) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+      }
+    }
+    this.element.addEventListener("click", this._onClick, true)
+
+    if (this._attrManaged) this._syncClassesFromAttributes()
+
+    this._observer = new MutationObserver(() => {
+      this._attrManaged = true
+      this._syncClassesFromAttributes()
+    })
+    this._observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["disabled", "aria-disabled"],
+    })
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this._onClick, true)
+    this._observer?.disconnect()
+    delete this.element._pbButton
+  }
+
+  disable() { this.setDisabled(true) }
+  enable()  { this.setDisabled(false) }
+
+  setDisabled(state) {
+    if (this._isButton()) {
+      state
+        ? this.element.setAttribute("disabled", "disabled")
+        : this.element.removeAttribute("disabled")
+    } else {
+      state
+        ? this.element.setAttribute("aria-disabled", "true")
+        : this.element.removeAttribute("aria-disabled")
+    }
+    this._attrManaged = true
+    this._applyClassState(state)
+  }
+
+  isDisabled() {
+    if (this._isButton()) {
+      if (this.element.hasAttribute("disabled")) return true
+      if (this._attrManaged && !this.element.hasAttribute("disabled")) return false
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (this._attrManaged && aria !== "true") return false
+    }
+    return this.element.classList.contains("pb_button_disabled")
+  }
+
+  _isButton() {
+    return this.element.tagName === "BUTTON"
+  }
+
+  _attributesPresent() {
+    return this.element.hasAttribute("disabled") || this.element.hasAttribute("aria-disabled")
+  }
+
+  _syncClassesFromAttributes() {
+    const state = this._attrDisabledState()
+    const disabled = (state === null) ? false : state
+    this._applyClassState(disabled)
+  }
+
+  _attrDisabledState() {
+    if (this._isButton()) {
+      return this.element.hasAttribute("disabled") ? true : null
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (aria === "false") return false
+      return this.element.hasAttribute("aria-disabled") ? false : null
+    }
+  }
+
+  _applyClassState(disabled) {
+    this.element.classList.toggle("pb_button_disabled", !!disabled)
+    this.element.classList.toggle("pb_button_enabled", !disabled)
+  }
+}
+

data/app/pb_kits/playbook/pb_nav/_nav.scss

@@ -48,3 +48,30 @@
     &:hover { cursor: pointer; }
   }
 }
+
+.pb_nav_extended_underline {
+  position: relative;
+  
+  // Add full-width border using pseudo-element so as not to break the active item border
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: $border_light;
+    z-index: 1;
+  }
+
+  .pb_nav_list_kit_item_active.pb_nav_list_item_link {
+      position: relative;
+      z-index: 2;
+  }
+
+  &.dark {
+    &::after {
+      background-color: rgba($white, $opacity_3);
+    }
+  }
+}

data/app/pb_kits/playbook/pb_nav/_nav.test.js

@@ -117,3 +117,19 @@ test('should change variant', () => {
     const kit = screen.getByTestId(navTestId)
     expect(kit).toHaveClass('pb_nav_list_subtle_vertical_highlight')
 })
+
+test('extendedUnderline should work as expected', () => {
+    render(
+        <NavDefault extendedUnderline 
+            orientation="horizontal" 
+        />
+    )
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).toHaveClass('pb_nav_extended_underline')
+})
+
+test('extendedUnderline should not be applied when orientation is vertical', () => {
+    render(<NavDefault extendedUnderline />)
+    const kit = screen.getByTestId(navTestId)
+    expect(kit).not.toHaveClass('pb_nav_extended_underline')
+})

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -14,6 +14,7 @@ type NavProps = {
   className?: string | string[],
   data?: Record<string, unknown>,
   dark?: boolean,
+  extendedUnderline?: boolean,
   highlight?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -33,6 +34,7 @@ const Nav = (props: NavProps): React.ReactElement => {
     className,
     data = {},
     dark = false,
+    extendedUnderline = false,
     highlight = true,
     htmlOptions = {},
     id,
@@ -52,6 +54,9 @@ const Nav = (props: NavProps): React.ReactElement => {
       highlight: highlight,
       borderless: borderless,
     }),
+    // extended underline is only applicable for horizontal normal nav, should not 
+    // affect other variants or orientations
+    variant === 'normal' && orientation === 'horizontal' && extendedUnderline && 'pb_nav_extended_underline',
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("nav", props: { orientation: "horizontal", extended_underline: true }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+
+const HorizontalNavExtendedunderline = (props) => {
+  return (
+    <Nav
+        extendedUnderline
+        link="#"
+        orientation="horizontal"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+    </Nav>
+  )
+}
+
+export default HorizontalNavExtendedunderline

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md

@@ -0,0 +1 @@
+The optional `extendedUnderline`/`extended_underline` prop can be used with the default `normal` variant of the horizontal orientation of the nav to extend the underline to take up the full width of the container. 

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

@@ -17,6 +17,7 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
+  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -42,6 +43,7 @@ examples:
   - horizontal_nav: Horizontal Nav
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
+  - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -19,4 +19,5 @@ export { default as CollapsibleNavWithAllOptions} from "./_collapsible_nav_with_
 export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
-export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
+export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
+export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'

data/app/pb_kits/playbook/pb_nav/nav.rb

@@ -14,9 +14,10 @@ module Playbook
       prop :highlight, type: Playbook::Props::Boolean, default: true
       prop :borderless, type: Playbook::Props::Boolean, default: false
       prop :tabbing, type: Playbook::Props::Boolean, default: false
+      prop :extended_underline, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
+        generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class) + extended_underline_class
       end
 
       def data
@@ -34,6 +35,10 @@ module Playbook
       def borderless_class
         borderless ? "borderless" : nil
       end
+
+      def extended_underline_class
+        variant === "normal" && orientation === "horizontal" && extended_underline ? " pb_nav_extended_underline" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb

@@ -4,8 +4,8 @@
 
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
@@ -142,4 +142,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb

@@ -10,8 +10,8 @@
 <%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_common" }) %>
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     const commonText = document.querySelector("#body_common")
 
@@ -133,4 +133,4 @@
     });
 
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb

@@ -4,8 +4,8 @@
 
 <div id="match"> </div>
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {   
+<script>
+    window.addEventListener("load", () => {   
 
       const useState = (defaultValue) => {
           let value = defaultValue;
@@ -48,4 +48,4 @@
 
       }
     })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb

@@ -32,8 +32,8 @@
 
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
 
     // variables for the passphrase kits you are targeting 
@@ -320,4 +320,4 @@
 
   
   })
-<% end %>
+</script>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -7,8 +7,8 @@
 <%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
 
 
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => {
+<script>
+    window.addEventListener("load", () => {
 
     // variables for the kits you are targeting 
     const passphrase = document.querySelector(".passphrase_change").querySelector("input")
@@ -120,4 +120,4 @@
     });
 
   })
-<% end %>
+</script>

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

@@ -13,8 +13,8 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
-      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
-        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
+      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')