playbook_ui 18.2.0.pre.rc.2 → 18.2.0

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Avatar from '../pb_avatar/_avatar'
 import Badge from '../pb_badge/_badge'
@@ -17,7 +18,7 @@ type MultipleUsersStackedProps = {
   size?: "md" | "lg" | "sm" | "xl" 
   users: Array<{ [key: string]: string }>,
   variant: "default" | "bubble",
-}
+} & GlobalEventProps
 
 const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
   const {
@@ -132,6 +133,7 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_multiple_users_stacked/kit.schema.json

@@ -48,6 +48,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { MultipleUsersStacked } from 'playbook-ui'",

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

@@ -54,9 +54,15 @@ const popoverReference = (
             paddingTop={extensions.length > 1 ? "xs" : "none"} 
             variant="subtle"
         >
-          {extensions && extensions.map(({ icon, text, onclick, isActive}: any, index: number) => ( 
+          {extensions && extensions.map(({ icon, text, onclick, isActive}: any, index: number) => {
+            // TipTap v3: host useEditor no longer re-renders on selection by default.
+            // Prefer isActive as a function so EditorToolbar's transaction subscription
+            // can refresh custom extension highlights without shouldRerenderOnTransaction.
+            const active = typeof isActive === "function" ? isActive() : !!isActive
+
+            return (
             <NavItem
-                className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
+                className={`pb_tiptap_toolbar_dropdown_list_item ${active ? "is-active" : ""}`}
                 cursor="pointer"
                 iconLeft={icon}
                 key={`${text}_${index}`}
@@ -66,7 +72,8 @@ const popoverReference = (
                 paddingTop='xxs'
                 text={text}
             />
-          ))}
+            )
+          })}
         </Nav>
       </PbReactPopover>
   )

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

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import Background from "../../pb_background/_background";
 import Flex from "../../pb_flex/_flex";
 import SectionSeparator from "../../pb_section_separator/_section_separator";
@@ -72,6 +72,21 @@ const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.React
   const toolbarInnerRef = useRef<HTMLDivElement>(null);
   const stackedAtWidthRef = useRef(0);
   const [toolsStacked, setToolsStacked] = useState(false);
+  // TipTap v3 defaults shouldRerenderOnTransaction to false; re-render active states locally.
+  const [, setEditorRenderTick] = useState(0);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const rerenderToolbar = () => setEditorRenderTick((tick) => tick + 1);
+    editor.on("selectionUpdate", rerenderToolbar);
+    editor.on("transaction", rerenderToolbar);
+
+    return () => {
+      editor.off("selectionUpdate", rerenderToolbar);
+      editor.off("transaction", rerenderToolbar);
+    };
+  }, [editor]);
 
   useLayoutEffect(() => {
     if (simple) return;

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.json

@@ -148,11 +148,10 @@
         "label": "Advanced",
         "template": "<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>",
         "children": "",
-        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit, TipTapLink],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
+        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit.configure({ trailingNode: false })],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
         "externalImports": [
           "import { useEditor, EditorContent } from '@tiptap/react'",
-          "import StarterKit from '@tiptap/starter-kit'",
-          "import TipTapLink from '@tiptap/extension-link'"
+          "import StarterKit from '@tiptap/starter-kit'"
         ]
       }
     }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_playground.overrides.json

@@ -19,11 +19,10 @@
         "label": "Advanced",
         "template": "<RichTextEditor\n  advancedEditor={editor}{{props}}\n>\n  <EditorContent editor={editor} />\n</RichTextEditor>",
         "children": "",
-        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit, TipTapLink],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
+        "wrapper": "const RichTextEditorPlayground = () => {\n  const editor = useEditor({\n    extensions: [StarterKit.configure({ trailingNode: false })],\n    content: 'Add your text here. You can format your text, add links, quotes, and bullets.',\n  })\n\n  if (!editor) return null\n\n  return {{component}}\n}\n\n<RichTextEditorPlayground />",
         "externalImports": [
           "import { useEditor, EditorContent } from '@tiptap/react'",
-          "import StarterKit from '@tiptap/starter-kit'",
-          "import TipTapLink from '@tiptap/extension-link'"
+          "import StarterKit from '@tiptap/starter-kit'"
         ]
       }
     }

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

@@ -2,16 +2,12 @@ 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
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         content:"Add your text here. You can format your text, add links, quotes, and bullets."
     })
       if (!editor) {

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

@@ -2,16 +2,12 @@ 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 RichTextEditorAdvancedDefault = (props) => {
 
     const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         content:"Add your text here. You can format your text, add links, quotes, and bullets."
     })
       if (!editor) {

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

@@ -1,4 +1,3 @@
-The advanced variant leverages Tiptap to unlock additional UI options (e.g., consolidated nav toolbar, styling, etc.) as well as several extensions (see [Tiptap docs](https://tiptap.dev/extensions) for more). To leverage this variant, Tiptap __must be installed__ in your project. Complete docs for using the library can be found [here](https://tiptap.dev/). To get started with this variant, see the Code Example below for required imports as well as the basic setup. 
+The advanced variant leverages Tiptap to unlock additional UI options (e.g., consolidated nav toolbar, styling, etc.) as well as several extensions (see [Tiptap docs](https://tiptap.dev/extensions) for more). To leverage this variant, Tiptap __must be installed__ in your project at `3.0.7` (same version as Nitro RTE). Complete docs for using the library can be found [here](https://tiptap.dev/). To get started with this variant, see the Code Example below for required imports as well as the basic setup.
 
-
-NOTE: Once the Tiptap editor is initialized as shown below, you must pass that instance to the kit via the `advancedEditor` prop. 
+NOTE: TipTap v3 StarterKit includes Link and Underline. Do not also register `@tiptap/extension-link` / `@tiptap/extension-underline` unless you disable them on StarterKit first. Prefer `StarterKit.configure({ trailingNode: false })` so saved HTML does not pick up TipTap’s synthetic trailing empty paragraph. Once the Tiptap editor is initialized as shown below, you must pass that instance to the kit via the `advancedEditor` prop. 

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

@@ -2,15 +2,11 @@ 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
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         content:"Click inside to see the toolbar. Click outside to hide it."
     })
 

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

@@ -2,33 +2,23 @@ import React from 'react'
 import RichTextEditor from '../_rich_text_editor'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
 import { Caption } from "playbook-ui"
 
 
 const RichTextEditorAdvancedHeight = (props) => {
 
   const editor = useEditor({
-    extensions: [
-      StarterKit,
-      Link
-    ],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: "Add your text here. You can format your text, add links, quotes, and bullets."
   })
 
   const editor2 = useEditor({
-    extensions: [
-      StarterKit,
-      Link
-    ],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: "Add your text here. You can format your text, add links, quotes, and bullets."
   })
 
   const editor3 = useEditor({
-    extensions: [
-      StarterKit,
-      Link
-    ],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: "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_advanced_inline.jsx

@@ -2,16 +2,12 @@ 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
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         content:"Add your text here. You can format your text, add links, quotes, and bullets."
     })
       if (!editor) {

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

@@ -2,18 +2,17 @@ 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 RichTextEditorAdvancedLabel = (props) => {
 
     const editor = useEditor({
-      extensions: [StarterKit, Link],
+      extensions: [StarterKit.configure({ trailingNode: false })],
       content: "Add your text here. You can format your text, add links, quotes, and bullets.",
     })
 
     const editorNoLabel = useEditor({
-      extensions: [StarterKit, Link],
+      extensions: [StarterKit.configure({ trailingNode: false })],
       content: "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_advanced_markdown_support.jsx

@@ -2,13 +2,12 @@ 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'
 import { defaultMarkdownParser } from 'prosemirror-markdown'
 import { DOMSerializer } from 'prosemirror-model'
 
 const RichTextEditorAdvancedMarkdownSupport = (props) => {
   const editor = useEditor({
-    extensions: [StarterKit, Link],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: 'Paste Markdown here to preserve headings, emphasis, links, lists, quotes, and code blocks.',
   })
 

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

@@ -2,33 +2,23 @@ import React from 'react'
 import RichTextEditor from '../_rich_text_editor'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
 import { Caption } from "playbook-ui"
 
 
 const RichTextEditorAdvancedMinHeight = (props) => {
 
   const editor1 = useEditor({
-    extensions: [
-      StarterKit,
-      Link
-    ],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: "Add your text here. You can format your text, add links, quotes, and bullets."
   })
 
   const editor2 = useEditor({
-    extensions: [
-      StarterKit,
-      Link
-    ],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: "Add your text here. You can format your text, add links, quotes, and bullets."
   })
 
   const editor3 = useEditor({
-    extensions: [
-      StarterKit,
-      Link
-    ],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: "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_advanced_preview.jsx

@@ -4,16 +4,12 @@ import Button from '../../pb_button/_button'
 import Card from '../../pb_card/_card'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
-import Link from '@tiptap/extension-link'
 
 
 const RichTextEditorAdvancedPreview = (props) => {
 
   const editor = useEditor({
-      extensions: [
-          StarterKit,
-          Link
-      ],
+      extensions: [StarterKit.configure({ trailingNode: false })],
       content: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
   })
 

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

@@ -2,16 +2,12 @@ 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 RichTextEditorAdvancedRequiredIndicator = (props) => {
 
     const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         content:"Add your text here. You can format your text, add links, quotes, and bullets."
     })
       if (!editor) {

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

@@ -2,16 +2,12 @@ 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
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         content:"Add your text here. Use the simple toolbar above to format your text"
     })
       if (!editor) {

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

@@ -2,16 +2,12 @@ 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
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         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."
 
     })

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

@@ -2,7 +2,6 @@ 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'
 
@@ -101,10 +100,7 @@ const handleChange = (event) => {
   ]
 
     const editor = useEditor({
-        extensions: [
-            StarterKit,
-            Link
-        ],
+        extensions: [StarterKit.configure({ trailingNode: false })],
         content: editorContent
     })
 

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

@@ -2,9 +2,6 @@ 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'
-
-import HorizontalRule from "@tiptap/extension-horizontal-rule"
 import Highlight from '@tiptap/extension-highlight'
 
 
@@ -12,9 +9,7 @@ const RichTextEditorMoreExtensions = (props) => {
 
     const editor = useEditor({
         extensions: [
-            StarterKit,
-            Link,
-            HorizontalRule,
+            StarterKit.configure({ trailingNode: false }),
             Highlight.configure({ multicolor: true })
         ],
         content:"Add your text here. You can format your text, add links, quotes, and bullets."
@@ -26,13 +21,13 @@ const RichTextEditorMoreExtensions = (props) => {
   const ExtensionsList = [
     {
         icon: "horizontal-rule",
-        isActive: editor.isActive("horizontalRule"),
+        isActive: () => editor.isActive("horizontalRule"),
         text: "Horizontal Rule",
         onclick: () => editor.chain().focus().setHorizontalRule().run(),
     },
     {
       icon: "highlighter",
-      isActive: editor.isActive("highlight"),
+      isActive: () => editor.isActive("highlight"),
       text: "Highlighter",
       onclick: () => editor.chain().focus().toggleHighlight().run(),
     }

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

@@ -5,7 +5,7 @@ __NOTE__: In order to leverage this prop, you __must__ install the extension you
 In order to add the extension to the editor toolbar, create an array of objects (as shown in the ExtensionsList array in the example below). Each object in this array should include:
 
 `icon`: the icon to display within the toolbar dropdown (any Fontawesome icons can be used)
-`isActive`: sets the extension to active within the dropdown, when applicable
+`isActive`: sets the extension to active within the dropdown, when applicable. Prefer a function (`() => editor.isActive(...)`) so TipTap v3 selection changes refresh the highlight (TipTap no longer re-renders `useEditor` hosts on every transaction by default)
 `text`: the label within the toolbar dropdown
 `onclick`: initializes the extension when it’s clicked within the dropdown (snytax varies with extension, see Tiptap's docs for more information)
 

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

@@ -2,11 +2,11 @@ The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, b
 
 ### How TipTap is loaded (Rails)
 
-- The kit’s module script (`rich_text_editor_rails.js`) uses `import()` with **full URLs** on [esm.sh](https://esm.sh) (e.g. `@tiptap/core@2.8.0`). esm.sh resolves dependencies server-side, so **no `<script type="importmap">`** is required—this avoids conflicts when the host page already has an import map (e.g. Vite in dev, or another app map) because Firefox only applies one native map.
+- The kit’s module script (`rich_text_editor_rails.js`) uses `import()` with **full URLs** on [esm.sh](https://esm.sh) (e.g. `@tiptap/core@3.0.7`). esm.sh resolves dependencies server-side, so **no `<script type="importmap">`** is required—this avoids conflicts when the host page already has an import map (e.g. Vite in dev, or another app map) because Firefox only applies one native map.
 - You do not need TipTap in your app’s npm dependencies or Gemfile for this kit; the browser loads modules from esm.sh when the page runs.
 - Ensure **CSP** allows loading scripts from `https://esm.sh` (and esm.sh’s redirected module URLs) if you use a strict `script-src` / `connect-src`.
 
 ### Relation to the React implementation
 
-- Same core: both use TipTap v2 on top of ProseMirror; styling lives in Playbook SCSS (`_tiptap_styles.scss`) so the editor chrome lines up between platforms.
+- Same core: both use TipTap v3 on top of ProseMirror; styling lives in Playbook SCSS (`_tiptap_styles.scss`) so the editor chrome lines up between platforms.
 - Different shell: Rails uses ERB + Playbook Rails components + inline module script. React uses `RichTextEditor` / `_tiptap_editor.tsx` and TipTap wired through the bundled Playbook React package—see Advanced Default for that stack and when you need TipTap installed in your JavaScript bundle.

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

@@ -68,8 +68,9 @@ test('returns "Dark" class name', () => {
 // TipTap testing
 const TestAdvancedEditor = ({ toolbarOnFocus = false, ...props }) => {
   const editor = useEditor({
-    extensions: [StarterKit],
+    extensions: [StarterKit.configure({ trailingNode: false })],
     content: '<p>Test content</p>',
+    shouldRerenderOnTransaction: true,
   })
 
   if (!editor) return null

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

@@ -3,7 +3,6 @@ import { fireEvent, render, waitFor } from "../utilities/test-utils";
 import { Editor } from "@tiptap/core";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import Link from "@tiptap/extension-link";
 import { defaultMarkdownParser } from "prosemirror-markdown";
 import { DOMSerializer } from "prosemirror-model";
 
@@ -13,11 +12,14 @@ import { createMarkdownToHTML, handleMarkdownPaste } from "./TipTap/markdownPast
 
 const kitClass = "pb_rich_text_editor_advanced_container";
 const markdownToHTML = createMarkdownToHTML(defaultMarkdownParser, DOMSerializer);
+const starterKit = StarterKit.configure({ trailingNode: false });
 
 const EditorTest = (props) => {
   const editor = useEditor({
-    extensions: [StarterKit, Link],
+    extensions: [starterKit],
     content: "",
+    // TipTap v3: keep toolbar/tests in sync with editor state without host-app config.
+    shouldRerenderOnTransaction: true,
   });
 
   return (
@@ -59,7 +61,7 @@ describe("TipTap list selection", () => {
     ["bulletList", "ul"],
     ["orderedList", "ol"],
   ])("excludes a heading touched only at its end boundary from a %s", (listType, tag) => {
-    const editor = new Editor({ extensions: [StarterKit], content });
+    const editor = new Editor({ extensions: [starterKit], content });
     const headingEnd = editor.state.doc.child(0).nodeSize - 1;
     const paragraphEnd = headingEnd + editor.state.doc.child(1).nodeSize;
 
@@ -76,7 +78,7 @@ describe("TipTap list selection", () => {
   });
 
   test("excludes a paragraph touched only at its start boundary", () => {
-    const editor = new Editor({ extensions: [StarterKit], content });
+    const editor = new Editor({ extensions: [starterKit], content });
     const firstParagraphStart = editor.state.doc.child(0).nodeSize + 1;
     const secondParagraphStart =
       editor.state.doc.child(0).nodeSize + editor.state.doc.child(1).nodeSize + 1;
@@ -94,7 +96,7 @@ describe("TipTap list selection", () => {
 
   test("separates a pasted heading and body joined by a hard break", () => {
     const editor = new Editor({
-      extensions: [StarterKit],
+      extensions: [starterKit],
       content: "<p><strong>How should it work?</strong><br>Keep React and Rails visible.</p>",
     });
     const hardBreakEnd = editor.state.doc.child(0).child(1).nodeSize +

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_rails.js

@@ -1,7 +1,8 @@
 // Rails TipTap: dynamic import() from esm.sh (no import map — avoids 2nd map ignored by Firefox vs Vite/host).
 // Idempotent: data-pb-rte-initialized / data-pb-rte-pending.
 
-const RTE_TIPTAP_VERSION = "2.8.0";
+// Keep in sync with TipTap versions used by Playbook docs / Nitro RTE alignment (TipTap v3).
+const RTE_TIPTAP_VERSION = "3.0.7";
 const RTE_TIPTAP_ESM = (pkg) => `https://esm.sh/${pkg}@${RTE_TIPTAP_VERSION}`;
 const RTE_EXTENSIONS = new Set(["underline", "text_align", "horizontal_rule", "image"]);
 
@@ -211,7 +212,6 @@ async function initPlaybookRichTextEditorRails(container) {
   try {
     const { Editor } = await import(RTE_TIPTAP_ESM("@tiptap/core"));
     const { default: StarterKit } = await import(RTE_TIPTAP_ESM("@tiptap/starter-kit"));
-    const { default: Link } = await import(RTE_TIPTAP_ESM("@tiptap/extension-link"));
     const optionalExtensions = await loadOptionalExtensions(extensionNames);
     const neutralClipboardTags = new Set(["html", "head", "body", "meta", "div", "span", "p"]);
     const markdownSourceTags = new Set([...neutralClipboardTags, "pre", "code"]);
@@ -246,11 +246,22 @@ async function initPlaybookRichTextEditorRails(container) {
       }
     }
 
+    // TipTap v3 StarterKit includes Link + Underline. Keep underline opt-in via extensions prop;
+    // configure Link here so we do not load a second @tiptap/extension-link instance.
     const editor = new Editor({
       element: editorNode,
       extensions: [
-        StarterKit.configure({ heading: { levels: [1, 2, 3] } }),
-        Link.configure({ openOnClick: false, HTMLAttributes: { target: "_blank", rel: "noopener" } }),
+        StarterKit.configure({
+          heading: { levels: [1, 2, 3] },
+          link: {
+            openOnClick: false,
+            HTMLAttributes: { target: "_blank", rel: "noopener" },
+          },
+          // TipTap v3 enables TrailingNode by default; disable so getHTML() stays
+          // free of a synthetic trailing <p></p> that would dirty/persist blank lines.
+          trailingNode: false,
+          underline: false,
+        }),
         ...optionalExtensions,
       ],
       content: initialHtml,

data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildHtmlProps } from '../utilities/props'
 import Title from '../pb_title/_title'
 
@@ -11,7 +12,7 @@ type StatValueProps = {
   id?: string,
   unit?: string,
   value: string | number,
-}
+} & GlobalEventProps
 
 const StatValue = (props: StatValueProps): React.ReactElement => {
   const {
@@ -53,6 +54,7 @@ const StatValue = (props: StatValueProps): React.ReactElement => {
         className={classnames('pb_stat_value_kit', globalProps(props), className)}
         id={id}
         {...htmlProps}
+        {...globalEventProps(props)}
     >
       <div className="pb_stat_value_wrapper">
         {displayValue(value)}