playbook_ui 17.2.0.pre.rc.2 → 18.0.0

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

@@ -24,6 +24,7 @@ examples:
     - multi_level_select_default: Default
     - multi_level_select_react_hook: React Hook
     - multi_level_select_single: Single Select
+    - multi_level_select_format_selected_display: Custom Single Select Display
     - multi_level_select_single_children_only: Single Select w/ Hidden Radios
     - multi_level_select_return_all_selected: Return All Selected
     - multi_level_select_input_display: With Input Display None

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

@@ -1,5 +1,6 @@
 export { default as MultiLevelSelectDefault } from "./_multi_level_select_default.jsx"
 export { default as MultiLevelSelectSingle } from "./_multi_level_select_single.jsx"
+export { default as MultiLevelSelectFormatSelectedDisplay } from "./_multi_level_select_format_selected_display.jsx"
 export { default as MultiLevelSelectSingleChildrenOnly } from "./_multi_level_select_single_children_only.jsx"
 export { default as MultiLevelSelectReturnAllSelected } from "./_multi_level_select_return_all_selected.jsx"
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"

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

@@ -23,6 +23,12 @@
       ],
       "default": ""
     },
+    "formatSelectedDisplay": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
     "inputDisplay": {
       "type": "enum",
       "platforms": [
@@ -91,7 +97,10 @@
       "default": true
     },
     "treeData": {
-      "type": "GenericObject",
+      "type": {
+        "react": "GenericObject",
+        "rails": "array"
+      },
       "platforms": [
         "react",
         "rails"
@@ -118,7 +127,10 @@
       "default": "Start typing..."
     },
     "selectedIds": {
-      "type": "string[] | any",
+      "type": {
+        "react": "string[] | any",
+        "rails": "array"
+      },
       "platforms": [
         "react",
         "rails"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -384,8 +384,47 @@ describe('MultiLevelSelect single variant', () => {
 
     expect(input.value).toBe('Power Home Remodeling')
   })
+
+  test('should format the selected input display with hierarchy context', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          formatSelectedDisplay={(item, { path }) =>
+            path.map(({ label }) => label).join(' / ')
+          }
+          treeData={treeData}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    fireEvent.click(kit.querySelector('#people1'))
+
+    expect(input.value).toBe('Power Home Remodeling / People')
+  })
+
+  test('should format the selected input display from selectedIds', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          formatSelectedDisplay={(item, { ancestors }) => {
+            const parent = ancestors[ancestors.length - 1]
+            return `${parent.label}: ${item.label}`
+          }}
+          selectedIds={['talent1']}
+          treeData={treeData}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+
+    expect(input.value).toBe('People: Talent Acquisition')
+  })
 })
 
+
 describe('MultiLevelSelect disabled parent behavior', () => {
   test('children of disabled parent should also be disabled in single variant', () => {
     render(
@@ -833,4 +872,3 @@ describe('PbMultiLevelSelect Rails enhanced element', () => {
     expect(element.querySelectorAll('.dropdown_item').length).toBeGreaterThan(0)
   })
 })
-

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

@@ -26,7 +26,10 @@
       "default": "card_light"
     },
     "dynamic": {
-      "type": "false",
+      "type": {
+        "react": "false",
+        "rails": "boolean"
+      },
       "platforms": [
         "react",
         "rails"

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,3 +1,3 @@
 <%= pb_content_tag do %>
-     <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
+     <%= helpers.will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

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

@@ -36,7 +36,10 @@
       "default": false
     },
     "variant": {
-      "type": "enum",
+      "type": {
+        "react": "string",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"
@@ -48,7 +51,10 @@
       "default": "default"
     },
     "color": {
-      "type": "enum",
+      "type": {
+        "react": "string",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -16,7 +16,10 @@
       "default": ""
     },
     "checked": {
-      "type": "boolean, // removed default assignment here",
+      "type": {
+        "react": "boolean, // removed default assignment here",
+        "rails": "boolean"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -8,6 +8,7 @@ import Nav from '../../pb_nav/_nav'
 import NavItem from '../../pb_nav/_item'
 
 import { ToolbarTypes } from './EditorTypes'
+import { normalizeListSelection } from './listSelection'
 
 const ToolbarDropdown = ({editor}: any): React.ReactElement => {
   const [showPopover, setShowPopover] = useState(false)
@@ -46,14 +47,20 @@ const toolbarDropdownItems = [
         icon: "list",
         isActive: editor.isActive("bulletList"),
         text: "Bullet List",
-        onclick: () => editor.chain().focus().toggleBulletList().run(),
+        onclick: () => {
+          normalizeListSelection(editor)
+          editor.chain().focus().toggleBulletList().run()
+        },
     },
     {
         node: "orderedList",
         icon: "list-ol",
         isActive: editor.isActive("orderedList"),
         text: "Ordered List",
-        onclick: () =>   editor.chain().focus().toggleOrderedList().run()
+        onclick: () => {
+          normalizeListSelection(editor)
+          editor.chain().focus().toggleOrderedList().run()
+        }
         ,
     },
     {

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/listSelection.ts

@@ -0,0 +1,59 @@
+import { Editor } from "@tiptap/core"
+
+type ListSelection = { from: number, to: number } | null
+
+const getNormalizedListSelection = (editor: Editor): ListSelection => {
+  const { selection } = editor.state
+
+  if (selection.empty) return null
+
+  const { $from, $to } = selection
+  let { from, to } = selection
+
+  if (
+    $from.depth > 0 &&
+    $from.parent.isTextblock &&
+    $from.parentOffset === $from.parent.content.size
+  ) {
+    const nextBlockStart = $from.after($from.depth) + 1
+    if (nextBlockStart < to) from = nextBlockStart
+  }
+
+  if (
+    $to.depth > 0 &&
+    $to.parent.isTextblock &&
+    $to.parentOffset === 0
+  ) {
+    const previousBlockEnd = $to.before($to.depth) - 1
+    if (previousBlockEnd > from) to = previousBlockEnd
+  }
+
+  return from === selection.from && to === selection.to ? null : { from, to }
+}
+
+const normalizeListSelection = (editor: Editor): void => {
+  const initialSelection = editor.state.selection
+
+  if (
+    !initialSelection.empty &&
+    initialSelection.$from.nodeBefore?.type.name === "hardBreak"
+  ) {
+    const selectedSize = initialSelection.to - initialSelection.from
+    const breakPosition = initialSelection.from - 1
+
+    editor.chain()
+      .deleteRange({ from: breakPosition, to: initialSelection.from })
+      .setTextSelection(breakPosition)
+      .splitBlock()
+      .run()
+
+    const from = editor.state.selection.from
+    editor.commands.setTextSelection({ from, to: from + selectedSize })
+  }
+
+  const selection = getNormalizedListSelection(editor)
+
+  if (selection) editor.commands.setTextSelection(selection)
+}
+
+export { getNormalizedListSelection, normalizeListSelection }

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/markdownPaste.ts

@@ -0,0 +1,100 @@
+const NEUTRAL_CLIPBOARD_TAGS = new Set(["html", "head", "body", "meta", "div", "span", "p"])
+const MARKDOWN_SOURCE_TAGS = new Set([...NEUTRAL_CLIPBOARD_TAGS, "pre", "code"])
+
+type MarkdownJSONNode = {
+  content?: MarkdownJSONNode[],
+  marks?: unknown[],
+  type: string,
+}
+
+type MarkdownDocumentNode = {
+  content: unknown,
+  toJSON: () => MarkdownJSONNode,
+  type: { schema: unknown },
+}
+
+type MarkdownParser = {
+  parse: (text: string) => MarkdownDocumentNode | null,
+}
+
+type MarkdownDOMSerializer = {
+  fromSchema: (schema: unknown) => {
+    serializeFragment: (content: unknown) => DocumentFragment,
+  },
+}
+
+type MarkdownDependencies = {
+  parser: MarkdownParser,
+  serializer: MarkdownDOMSerializer,
+}
+
+const hasRichTextFormatting = (html: string, text: string): boolean => {
+  if (!html) return false
+
+  const clipboardDocument = new DOMParser().parseFromString(html, "text/html")
+  const elements = [...clipboardDocument.querySelectorAll("*")]
+  const hasStyledElement = elements.some((element) => element.hasAttribute("style"))
+  if (hasStyledElement) return true
+
+  const hasOnlyNeutralTags = elements.every((element) =>
+    NEUTRAL_CLIPBOARD_TAGS.has(element.tagName.toLowerCase())
+  )
+  if (hasOnlyNeutralTags) return false
+
+  const hasOnlyMarkdownSourceTags = elements.every((element) =>
+    MARKDOWN_SOURCE_TAGS.has(element.tagName.toLowerCase())
+  )
+  const sourceTextMatches = clipboardDocument.body.textContent?.trim() === text.trim()
+  return !(hasOnlyMarkdownSourceTags && sourceTextMatches)
+}
+
+const hasMarkdownFormatting = (node: MarkdownJSONNode): boolean => {
+  const isFormattedNode = !["doc", "paragraph", "text"].includes(node.type)
+  if (isFormattedNode || node.marks?.length) return true
+
+  return node.content?.some(hasMarkdownFormatting) || false
+}
+
+const createMarkdownToHTML = (
+  markdownParser: MarkdownParser,
+  domSerializer: MarkdownDOMSerializer
+) => (text: string): string | null => {
+  const documentNode = markdownParser.parse(text)
+  if (!documentNode || !hasMarkdownFormatting(documentNode.toJSON())) return null
+
+  const container = document.createElement("div")
+  const serializer = domSerializer.fromSchema(documentNode.type.schema)
+  container.appendChild(serializer.serializeFragment(documentNode.content))
+  container.querySelectorAll("[data-tight]").forEach((node) => node.removeAttribute("data-tight"))
+
+  return container.innerHTML
+}
+
+const handleMarkdownPaste = (
+  event: ClipboardEvent,
+  insertHTML: (html: string) => void,
+  markdownToHTML: (text: string) => string | null
+): boolean => {
+  const text = event.clipboardData?.getData("text/plain")
+  const richHtml = event.clipboardData?.getData("text/html")
+  if (!text || hasRichTextFormatting(richHtml, text)) return false
+
+  let html
+  try {
+    html = markdownToHTML(text)
+  } catch (_error) {
+    return false
+  }
+  if (!html) return false
+
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  insertHTML(html)
+  return true
+}
+
+export {
+  createMarkdownToHTML,
+  handleMarkdownPaste,
+}
+export type { MarkdownDependencies }

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

@@ -5,6 +5,11 @@ import Caption from '../pb_caption/_caption'
 import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
+import {
+  createMarkdownToHTML,
+  handleMarkdownPaste,
+} from './TipTap/markdownPaste'
+import type { MarkdownDependencies } from './TipTap/markdownPaste'
 import TipTapEditor from './_tiptap_editor'
 import TrixTextEditor from './_trix_editor'
 
@@ -22,6 +27,7 @@ type RichTextEditorProps = {
   id?: string,
   inline?: boolean,
   label?: string,
+  markdownSupport?: MarkdownDependencies,
   extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
@@ -65,6 +71,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     maxWidth = "md",
     requiredIndicator = false,
     label,
+    markdownSupport,
     TrixEditor,
     trixInstance: trixInstance = undefined,
   } = props
@@ -89,6 +96,30 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     dom.setAttribute("aria-multiline", "true")
   }, [advancedEditor, fieldId, labelElementId])
 
+  useEffect(() => {
+    if (!markdownSupport) return
+
+    const editorElement = advancedEditor?.view?.dom
+    if (!editorElement) return
+    const markdownToHTML = createMarkdownToHTML(
+      markdownSupport.parser,
+      markdownSupport.serializer
+    )
+
+    const handleMarkdownSupport = (event: ClipboardEvent) => {
+      handleMarkdownPaste(
+        event,
+        (html) => advancedEditor.chain().focus().insertContent(html).run(),
+        markdownToHTML
+      )
+    }
+    editorElement.addEventListener("paste", handleMarkdownSupport, true)
+
+    return () => {
+      editorElement.removeEventListener("paste", handleMarkdownSupport, true)
+    }
+  }, [advancedEditor, markdownSupport])
+
   //===========focus prop with advanced editor=================
   const isClickInPopover = (event: Event): boolean => {
     return !!(event.target as Element).closest('.pb_tiptap_toolbar_dropdown_popover')

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

@@ -2,6 +2,7 @@
   "template": "<RichTextEditor{{props}} />",
   "propTargets": {},
   "defaults": {
+    "markdownSupport": false,
     "requiredIndicator": false,
     "simple": false,
     "advancedEditorToolbar": true,
@@ -133,7 +134,9 @@
       "trix",
       "@tiptap/react",
       "@tiptap/starter-kit",
-      "@tiptap/extension-link"
+      "@tiptap/extension-link",
+      "prosemirror-markdown",
+      "prosemirror-model"
     ],
     "optional": true,
     "note": "Default React editor uses Trix (pass TrixEditor from react-trix). Advanced editor uses TipTap. The host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails advanced TipTap may load via the kit’s esm.sh script."
@@ -158,6 +161,7 @@
     "advancedEditor",
     "extensions",
     "inputOptions",
+    "markdownSupport",
     "onChange",
     "template",
     "TrixEditor",

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

@@ -5,7 +5,9 @@
       "trix",
       "@tiptap/react",
       "@tiptap/starter-kit",
-      "@tiptap/extension-link"
+      "@tiptap/extension-link",
+      "prosemirror-markdown",
+      "prosemirror-model"
     ],
     "optional": true,
     "note": "Default React editor uses Trix (pass TrixEditor from react-trix). Advanced editor uses TipTap. The host app must already have the needed packages installed. Agents must not install packages — tell the user if they are missing. Rails advanced TipTap may load via the kit’s esm.sh script."
@@ -40,6 +42,7 @@
     "advancedEditor",
     "extensions",
     "inputOptions",
+    "markdownSupport",
     "onChange",
     "template",
     "TrixEditor",

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

@@ -0,0 +1,31 @@
+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],
+    content: 'Paste Markdown here to preserve headings, emphasis, links, lists, quotes, and code blocks.',
+  })
+
+  if (!editor) return null
+
+  return (
+    <RichTextEditor
+        advancedEditor={editor}
+        markdownSupport={{
+          parser: defaultMarkdownParser,
+          serializer: DOMSerializer,
+        }}
+        {...props}
+    >
+      <EditorContent editor={editor} />
+    </RichTextEditor>
+  )
+}
+
+export default RichTextEditorAdvancedMarkdownSupport

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

@@ -0,0 +1,5 @@
+Use `markdownSupport` to convert recognizable Markdown from the clipboard into formatted TipTap content when it is pasted into the editor. Pass the parser and serializer together through `markdownSupport`; Playbook owns the conversion, safe clipboard detection, and TipTap insertion while the consuming application supplies the libraries.
+
+Markdown support is opt-in for backward compatibility. Omit `markdownSupport` to keep TipTap's standard paste behavior. Rich HTML and ordinary plain text also continue through the standard paste path when Markdown syntax is not detected.
+
+The example uses `prosemirror-markdown` and `prosemirror-model`. These parser packages are not included in the `playbook-ui` runtime bundle.

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

@@ -0,0 +1,9 @@
+<%= pb_rails("rich_text_editor", props: {
+  label: "Markdown-enabled description",
+  markdown_support: true,
+  input_options: {
+    id: "rails_rte_markdown_support_demo",
+    name: "description",
+  },
+  value: "<p>Paste Markdown here to preserve its formatting.</p>",
+}) %>

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

@@ -0,0 +1,5 @@
+Set `markdown_support: true` to convert recognizable Markdown from the clipboard into formatted TipTap content. Supported formatting includes headings, bold and italic text, links, ordered and unordered lists, blockquotes, and fenced code blocks.
+
+The prop is opt-in and defaults to `false`, so existing Rails Rich Text Editors retain TipTap's standard paste behavior. Rich HTML, tables, styled content, media, and ordinary plain text also remain on TipTap's native paste path.
+
+When Markdown support is enabled, the Rails editor loads `prosemirror-markdown` and `prosemirror-model` from [esm.sh](https://esm.sh) before initializing. Applications with a strict Content Security Policy must allow esm.sh and its redirected module URLs.

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

@@ -2,10 +2,12 @@ examples:
 
   rails:
   - rich_text_editor_rails_default: "Rails (TipTap)"
+  - rich_text_editor_rails_markdown_support: "Rails (Markdown Support)"
   - rich_text_editor_rails_simple: "Rails (TipTap — Simple toolbar)"
 
   react:
   - rich_text_editor_advanced_default: Advanced Default
+  - rich_text_editor_advanced_markdown_support: Advanced (Markdown Support)
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
   - rich_text_editor_advanced_simple: Advanced (Simple)
@@ -30,5 +32,3 @@ examples:
 
 
 
-
-

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

@@ -1,5 +1,6 @@
 export { default as RichTextEditorDefault } from './_rich_text_editor_default.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
+export { default as RichTextEditorAdvancedMarkdownSupport } from './_rich_text_editor_advanced_markdown_support.jsx'
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
 export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'

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

@@ -51,6 +51,17 @@
         "rails"
       ]
     },
+    "markdownSupport": {
+      "type": {
+        "react": "MarkdownDependencies",
+        "rails": "boolean"
+      },
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
     "extensions": {
       "type": "GenericObject",
       "platforms": [

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,5 @@
 <%# TipTap loads via full URL dynamic import() in rich_text_editor_rails.js (esm.sh) — no import map, so no clash with Vite/host maps. %>
-<%= pb_content_tag(:div, id: object.container_id, class: object.classname, data: { pb_rte_tiptap: true, input_id: object.input_id, initial_html: object.initial_html, rte_simple: object.simple }) do %>
+<%= pb_content_tag(:div, id: object.container_id, class: object.classname, data: { pb_rte_tiptap: true, input_id: object.input_id, initial_html: object.initial_html, markdown_support: object.markdown_support, rte_simple: object.simple }) do %>
   <div class="pb_rich_text_editor_kit">
   <% if object.label.present? %>
     <label for="<%= object.input_id %>">
@@ -158,5 +158,5 @@
 
 <%# Module script: rich_text_editor_rails.js %>
 <script type="module">
-<%= File.read(Playbook.kit_path("rich_text_editor", "rich_text_editor_rails.js")).html_safe %>
+<%= ::File.read(Playbook.kit_path("rich_text_editor", "rich_text_editor_rails.js")).html_safe %>
 </script>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :input_options, type: Playbook::Props::HashProp, default: {}
       prop :label
       prop :required_indicator, type: Playbook::Props::Boolean, default: false
+      prop :markdown_support, type: Playbook::Props::Boolean, default: false
       # When true, TipTap toolbar matches React `simple`: Bold + Italic only (no block-style Popover).
       # Use in modals or narrow layouts where the block dropdown misbehaves.
       prop :simple, type: Playbook::Props::Boolean, default: false