playbook_ui 16.5.0.pre.alpha.RTEPOC15747 → 16.5.0.pre.alpha.RTEPOC15748

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e22a1c2088938459e3efb880b3d4e820b0c19aeddd957a828eb585eca3ec45d8
-  data.tar.gz: c4d23d3f4c261089c3fe9f6a592596d698ad9c767e7c85287a8b06177043471d
+  metadata.gz: 8860b0cd8332d8b7d6727c3871dd06ff3b3d429e7cca826855e97657ecc82ce8
+  data.tar.gz: fb9521d937a214c6fae9bd4ea0b3856f95b4d5e9be67e387292b279aca0f5f83
 SHA512:
-  metadata.gz: 4cd4c8e1c3c86d08e9348ff45eaafb1b1f0f1ee111ec95b0f10d7bcbbfe46f412c7938ac53b71667aea8618460b8e783829aa628f23f082e5125620e7348669f
-  data.tar.gz: 69e7c97110e36ac166a46f84f57651be2de4304097940a24dee7f6210b1167742ffa34c65ec14c50c43f0ef1ae85e17ce07f8d75629604cc7dfae0a8bfe416a9
+  metadata.gz: d74bfc111083f77e948b3fda81623aa925ff89acea5370873345e3ac73d70b591f42c5d06cfbe1302867f1bdd992c3a84fe99827545a91c3eb8361eac01caed3
+  data.tar.gz: 6371ded7a68098e54d28074edfadd3ad223d61f8361ce6684ff2081e72686b01e915efc8e5266de664b02b109648a623eee3cc390fde00f28231ac7316104e33

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -196,6 +196,12 @@
     }
 
     // Rails TipTap toolbar: mirror React Toolbar.tsx — <Flex paddingX="sm" paddingY="xxs" justify="between">.
+    &.rte-rails-toolbar-layout--simple {
+      .rte-toolbar-left {
+        overflow-x: visible;
+      }
+    }
+
     &.rte-rails-toolbar-layout {
       max-width: 100%;
       min-width: 0;

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

@@ -10,3 +10,7 @@ The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, b
 
 - 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.
 - 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.
+
+### Simple toolbar (`simple: true`)
+
+**Bold**, **Italic**, **Undo**, and **Redo** only (no block dropdown / Popover). See the **Rails (TipTap — Simple toolbar)** example.

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

@@ -0,0 +1,9 @@
+<%= pb_rails("rich_text_editor", props: {
+  simple: true,
+  label: "Notes",
+  input_options: {
+    id: "rails_rte_simple_demo",
+    name: "content",
+  },
+  value: "<p>Use <strong>Bold</strong> and <em>Italic</em> from the toolbar.</p>",
+}) %>

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

@@ -0,0 +1,12 @@
+### Simple toolbar (`simple: true`)
+
+Pass **`simple: true`** for a compact toolbar: **Bold**, **Italic**, **Undo**, and **Redo** (same history controls as the full toolbar—plain buttons, not popovers).
+
+- No block-style dropdown (no “Paragraph” / headings / lists in the menu).
+- No **`pb_popover`** on the toolbar—useful in **native `<dialog>`** modals, turbo-loaded panels, or other tight layouts where the full block menu is awkward to position.
+
+The underlying TipTap document still accepts the same HTML as the default Rails editor; `simple` only changes which **toolbar controls** are shown.
+
+### When to use the default instead
+
+Keep the **default** toolbar (omit `simple` or pass `simple: false`) when you need the block-style menu, strikethrough, code block, and link actions in the chrome.

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

@@ -2,6 +2,7 @@ examples:
 
   rails:
   - rich_text_editor_rails_default: "Rails (TipTap)"
+  - rich_text_editor_rails_simple: "Rails (TipTap — Simple toolbar)"
 
   react:
   - rich_text_editor_advanced_default: Advanced Default

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

@@ -109,8 +109,10 @@
     "simple": {
       "type": "boolean",
       "platforms": [
-        "react"
-      ]
+        "react",
+        "rails"
+      ],
+      "default": false
     },
     "sticky": {
       "type": "boolean",

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

@@ -68,7 +68,38 @@
     </label>
   <% end %>
   <input type="hidden" name="<%= object.input_name %>" id="<%= object.input_id %>" value="" />
-  <div class="pb_rich_text_editor_advanced_container toolbar-active">
+  <div class="pb_rich_text_editor_advanced_container toolbar-active<%= " pb_rich_text_editor_rte--simple" if object.simple %>">
+    <% if object.simple %>
+    <%# Compact toolbar: Bold/Italic + Undo/Redo — no block-style Popover (avoids dialog positioning issues). %>
+    <div class="pb_background_kit pb_background_color_white toolbar rte-rails-toolbar-layout rte-rails-toolbar-layout--simple" id="<%= object.toolbar_id %>">
+      <div class="rte-rails-toolbar-row">
+        <div class="toolbar_block rte-toolbar-left">
+          <button type="button" class="toolbar_button" data-action="bold" title="Bold" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "bold", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="italic" title="Italic" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "italic", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+        <div class="toolbar_block rte-toolbar-right">
+          <button type="button" class="toolbar_button" data-action="undo" title="Undo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "undo", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="redo" title="Redo" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "redo", size: "lg" }) %>
+            <% end %>
+          </button>
+        </div>
+      </div>
+    </div>
+    <% else %>
     <% block_style_options = [
       { value: "paragraph", text: "Paragraph", icon: "paragraph" },
       { value: "heading-1", text: "Heading 1", icon: "h1" },
@@ -174,6 +205,7 @@
         </span>
       <% end %>
     </div>
+    <% end %>
     <div class="rte-editor-wrap">
       <div id="<%= object.editor_node_id %>"></div>
     </div>
@@ -193,8 +225,9 @@
   const hiddenInput = document.getElementById(inputId);
   const editorNode = document.getElementById("<%= object.editor_node_id %>");
   const toolbar = document.getElementById("<%= object.toolbar_id %>");
+  const rteSimple = <%= object.simple ? "true" : "false" %> === "true";
   const blockTooltipId = "<%= object.rte_block_style_tooltip_id %>";
-  const iconTemplatesRoot = document.getElementById("<%= object.container_id %>-block-icon-templates");
+  const iconTemplatesRoot = rteSimple ? null : document.getElementById("<%= object.container_id %>-block-icon-templates");
   if (!editorNode || !hiddenInput || !toolbar) return;
 
   function syncToHiddenInput(editor) {
@@ -239,6 +272,7 @@
   }
 
   function syncBlockTrigger() {
+    if (rteSimple) return;
     const current = getCurrentBlockValue();
     const triggerRoot = toolbar.querySelector("[data-rte-block-trigger]");
     let tpl = iconTemplatesRoot && [...iconTemplatesRoot.children].find(
@@ -276,18 +310,20 @@
     else if (value === "blockquote") chain.toggleBlockquote().run();
   }
 
-  const blockStyleTooltip = document.getElementById(blockTooltipId);
-  if (blockStyleTooltip) {
-    blockStyleTooltip.addEventListener("click", (e) => {
-      const a = e.target.closest("a[href^='#']");
-      if (!a || !blockStyleTooltip.contains(a)) return;
-      e.preventDefault();
-      const href = a.getAttribute("href") || "";
-      const v = href.startsWith("#") ? href.slice(1) : "";
-      if (!v) return;
-      applyBlockType(v);
-      updateActiveStates();
-    });
+  if (!rteSimple) {
+    const blockStyleTooltip = document.getElementById(blockTooltipId);
+    if (blockStyleTooltip) {
+      blockStyleTooltip.addEventListener("click", (e) => {
+        const a = e.target.closest("a[href^='#']");
+        if (!a || !blockStyleTooltip.contains(a)) return;
+        e.preventDefault();
+        const href = a.getAttribute("href") || "";
+        const v = href.startsWith("#") ? href.slice(1) : "";
+        if (!v) return;
+        applyBlockType(v);
+        updateActiveStates();
+      });
+    }
   }
 
   function updateActiveStates() {

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

@@ -9,6 +9,9 @@ module Playbook
       prop :input_options, type: Playbook::Props::HashProp, default: {}
       prop :label
       prop :required_indicator, 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
 
       # Match React default (globalProps maxWidth "md").
       def max_width