playbook_ui 16.5.0.pre.alpha.RTEPOC15708 → 16.5.0.pre.alpha.RTEPOC15742

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 007e13930c03383e3d8d12e920f115ba93f90a42a7209e1892e5573a035ac924
-  data.tar.gz: db7d6dcd4bf18b7a56d864b5a9e8dd7e95110ba894ff68ece84bf67518a6d69d
+  metadata.gz: 0ae730fde19e05cbbd23bebf541db944a7e7e92ede9564b91886c776e27d930a
+  data.tar.gz: bfc177ae612fe3e2032a4959b3d949f064c478455be2c502fd335ec4147574f6
 SHA512:
-  metadata.gz: c3d8760e03b24889ae15e84e210eb86d600423ae7935ac2a29a23e010bfba4c9510d31a13d55c4fd527f5d64204c16cd0183336f561a9d65840eb3e8ed7714be
-  data.tar.gz: 04b2d00ab21c6bc07c1e2c19d580948b4898cd010138dcf1260fdebfc3081848b5ab6b2da5d7649825390839fff108f07537159d72e131ca08f78760a9d30036
+  metadata.gz: f5e1b1ef50ebee06c617e1dbe5078f95d2770fc216a399398805db6cd6e4fb7795a0d0efe5db34275c361891a49117f50e2dc5659483aecb3a5ca20d03220a81
+  data.tar.gz: d2056b8d90992bbb246ee13c7617100e30bf484450b2180d4e1bcc188d2f6b2ecd13d3efcb48f43f91f4d12287d3c13a10bb1654b43def8faa64747a8fe6c37f

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

@@ -8,7 +8,7 @@
 @import "../tokens/transition";
 @import "previewer_mixin";
 
-[class^="pb_rich_text_editor_kit"] {
+.pb_rich_text_editor_kit {
     &.inline {
         .toolbar {
           opacity: 0;
@@ -94,18 +94,112 @@
       align-items: center;
       gap: $space_xs;
     }
+
+    // Vertical section separators use ::before/::after with height: 100%. With
+    // align-items: center on .toolbar_block the kit’s cross size was 0, so the
+    // lines disappeared (master only had gap on .toolbar_block, default stretch).
+    .pb_section_separator_kit.pb_section_separator_vertical {
+      align-self: center;
+      flex-shrink: 0;
+      height: $space_xl;
+    }
+
+    // Match React ToolbarDropdown: secondary trigger flattened to text-style control.
     .editor-dropdown-button {
       background: transparent;
       border: none;
       color: $text_lt_light;
       cursor: pointer;
       font-weight: $light;
-      padding: ($space_xs - 1) 0px;
-      width: $space_xl * 3;
+      letter-spacing: normal;
+      line-height: 1;
+      min-height: unset;
+      min-width: $space_xl * 5;
+      padding: ($space_xs - 1) $space_xs;
+      width: auto;
+
+      // Undo Playbook .pb_button_kit defaults that throw off icon vs label (line-height 1.5, min-height 40px).
+      .pb_button_content {
+        align-items: center;
+        display: inline-flex;
+        line-height: 1;
+      }
+
+      // React: single Flex row inside the button.
+      .pb_button_content > .pb_flex_kit {
+        align-items: center;
+      }
+
+      // Rails: block-style trigger row (spans + icons).
+      .rte-block-style-trigger-inner {
+        align-items: center;
+      }
+
+      .rte-block-style-trigger-icon,
+      .rte-block-style-chevron {
+        display: inline-flex;
+        flex-shrink: 0;
+        line-height: 0;
+
+        .pb_icon_kit {
+          align-items: center;
+          display: flex;
+          line-height: 0;
+        }
+
+        svg {
+          display: block;
+        }
+      }
+
+      .rte-block-style-trigger-label {
+        align-items: center;
+        display: inline-flex;
+        line-height: 1.2;
+      }
+
       &:focus-visible {
         box-shadow: unset;
       }
     }
+
+    // Rails TipTap toolbar: mirror React Toolbar.tsx — <Flex paddingX="sm" paddingY="xxs" justify="between">.
+    &.rte-rails-toolbar-layout {
+      .rte-rails-toolbar-row {
+        align-items: center;
+        box-sizing: border-box;
+        column-gap: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+        padding: $space_xxs $space_sm;
+        row-gap: $space_xs;
+        width: 100%;
+      }
+
+      .rte-toolbar-left {
+        align-items: center;
+        display: flex;
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+        gap: $space_xs;
+        min-width: 0;
+      }
+
+      .rte-toolbar-right {
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        gap: $space_xs;
+        margin-left: auto;
+      }
+
+      // Align dropdown trigger with icon row (React wraps Popover + SectionSeparator in one flex line).
+      .pb_popover_reference_wrapper {
+        align-items: center;
+        display: inline-flex;
+      }
+    }
   }
 
   .ProseMirror {
@@ -171,6 +265,17 @@
       @include preview_tiptap_ul;
     }
   }
+
+  // Toolbar + editor stack: toolbar keeps its border; editor has no top stroke (classic layout).
+  // Avoid relying on a wrapper-only frame — partial deploys then looked “borderless” because
+  // ProseMirror had been forced to border: none.
+  .pb_rich_text_editor_advanced_container.toolbar-active {
+    .ProseMirror {
+      border-top: none;
+      border-top-left-radius: initial;
+      border-top-right-radius: initial;
+    }
+  }
 }
 
 .pb_tiptap_toolbar_dropdown_list_item {
@@ -197,42 +302,51 @@
     }
   }
 }
-.pb_rich_text_editor_advanced_container {
-  transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out,
-    border-color 0.3s ease-in-out;
+
+// Rails RTE: block-style menu uses Nav (popover) instead of React NavItem class hook.
+.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_item_link.is-active {
+  background-color: $bg_light;
+  border-radius: unset !important;
+  color: $primary;
+
+  .pb_nav_list_item_text,
+  .pb_nav_list_item_icon_left {
+    color: $primary !important;
+  }
+}
+
+.pb_rich_text_editor_kit .pb_popover_tooltip .pb_nav_list_kit_item:hover .pb_nav_list_item_link:not(.is-active) {
+  background-color: $neutral_subtle;
+  border-radius: unset !important;
+
+  .pb_nav_list_item_text,
+  .pb_nav_list_item_icon_left {
+    background-color: unset;
+    color: $text_lt_light !important;
+  }
+}
+
+// No toolbar: ring the whole control.
+.pb_rich_text_editor_advanced_container:not(.toolbar-active) {
+  transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   &:focus-visible,
   &:focus-within {
-    outline: unset;
-    box-shadow: 0 0 0 1px $input_border_state;
     border-radius: $border_rad_heaviest;
+    box-shadow: 0 0 0 1px $input_border_state;
+    outline: unset;
     transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
   }
-  // Single outer frame (toolbar + editor): avoids inner ProseMirror border + focus ring looking like two bottoms.
-  &.toolbar-active {
-    border: 1px solid $input_border_default;
-    border-radius: $border_rad_heaviest;
-    overflow: hidden;
-
-    &:focus-visible,
-    &:focus-within {
-      outline: unset;
-      box-shadow: none;
-      border-color: $input_border_state;
-    }
+}
 
+// Toolbar + editor: use border color (not an outer box-shadow) so the bottom isn’t doubled.
+.pb_rich_text_editor_advanced_container.toolbar-active {
+  &:focus-within {
     .toolbar {
-      border: none;
-      border-bottom: 1px solid $input_border_default;
-      border-radius: 0;
-    }
-
-    &:focus-within .toolbar {
-      border-bottom-color: $input_border_state;
+      border-color: $input_border_state;
     }
 
     .ProseMirror {
-      border: none;
-      border-radius: 0;
+      border-color: $input_border_state;
     }
   }
 }

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

@@ -1 +1,12 @@
-TipTap (vanilla JS) — the Playbook **Rails** rich text editor. No React; same editor core as the React TipTap variant. Content is synced to a hidden input for Rails form submission. Use `pb_rails("rich_text_editor", props: { input_options: { id: "...", name: "..." }, value: "..." })`.
+The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, block-style menu, formatting actions) is rendered with Playbook Rails kits (`pb_rails`). The editor document is a vanilla TipTap `Editor` instance; HTML is synced to a hidden `<input>` so standard Rails forms can submit the value.
+
+### How TipTap is loaded (Rails)
+
+- The kit ships an `importmap` in the ERB template that maps `@tiptap/*` and ProseMirror packages to ES module URLs on a CDN (see `rich_text_editor.html.erb`). A small `type="module"` script `import()`s `@tiptap/core`, `@tiptap/starter-kit`, `@tiptap/extension-link`, and related modules at runtime.
+- You do not need to add TipTap to your app’s npm dependencies or Gemfile for this kit to work out of the box—the browser loads those modules from the CDN when the page runs.
+- Your app must support import maps and ES modules in the browser (modern browsers; ensure CSP allows the CDN if you lock scripts down).
+
+### 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.
+- 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.html.erb

@@ -69,140 +69,111 @@
   <% 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_background_kit pb_background_color_white toolbar" id="<%= object.toolbar_id %>">
-      <div class="toolbar_block">
-        <%= pb_rails("button", props: {
-          icon: "bold",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "bold" },
-            title: "Bold",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "italic",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "italic" },
-            title: "Italic",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "strikethrough",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "strike" },
-            title: "Strikethrough",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "h1",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "heading", level: "1" },
-            title: "Heading 1",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "h2",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "heading", level: "2" },
-            title: "Heading 2",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "list",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "bulletList" },
-            title: "Bullet list",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "list-ol",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "orderedList" },
-            title: "Ordered list",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "quote-left",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "blockquote" },
-            title: "Quote",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "code",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "codeBlock" },
-            title: "Code block",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
-        <%= pb_rails("button", props: {
-          icon: "link",
-          size: "sm",
-          variant: "link",
-          html_options: {
-            type: "button",
-            data: { action: "link" },
-            title: "Link",
-            role: "button",
-            tabindex: 0,
-            class: "toolbar_button"
-          }
-        }) %>
+    <% block_style_options = [
+      { value: "paragraph", text: "Paragraph", icon: "paragraph" },
+      { value: "heading-1", text: "Heading 1", icon: "h1" },
+      { value: "heading-2", text: "Heading 2", icon: "h2" },
+      { value: "heading-3", text: "Heading 3", icon: "h3" },
+      { value: "bulletList", text: "Bullet List", icon: "list" },
+      { value: "orderedList", text: "Ordered List", icon: "list-ol" },
+      { value: "blockquote", text: "Block Quote", icon: "block-quote" },
+    ] %>
+    <div class="pb_background_kit pb_background_color_white toolbar rte-rails-toolbar-layout" id="<%= object.toolbar_id %>">
+      <div class="rte-rails-toolbar-row">
+        <div class="toolbar_block rte-toolbar-left">
+          <span class="pb_popover_reference_wrapper">
+            <%# Button kit wraps content in <span class="pb_button_content"> — block <div>s inside are invalid and break layout. Single <span> row + JS sync from templates. %>
+            <%= pb_rails("button", props: {
+              id: object.rte_block_style_trigger_id,
+              variant: "secondary",
+              classname: "editor-dropdown-button",
+              html_options: {
+                type: "button",
+                "aria-label": "Text style",
+                "aria-haspopup": "true",
+              },
+            }) do %>
+              <span class="pb_flex_kit pb_flex_kit_orientation_row pb_flex_kit_justify_content_left pb_flex_kit_align_items_center pb_flex_kit_spacing_none pb_flex_kit_gap_xs gap_xs rte-block-style-trigger-inner" data-rte-block-trigger>
+                <span class="rte-block-style-trigger-icon">
+                  <%= pb_rails("icon", props: { icon: "paragraph", size: "lg" }) %>
+                </span>
+                <span class="rte-block-style-trigger-label">Paragraph</span>
+                <span class="display_inline_flex rte-block-style-chevron">
+                  <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
+                </span>
+              </span>
+            <% end %>
+          </span>
+          <%= pb_rails("popover", props: {
+            trigger_element_id: object.rte_block_style_trigger_id,
+            tooltip_id: object.rte_block_style_tooltip_id,
+            position: "bottom",
+            padding: "none",
+            close_on_click: "any",
+            offset: true,
+          }) do %>
+            <%= pb_rails("nav", props: { variant: "subtle", padding_top: "xs", padding_bottom: "xs" }) do %>
+              <% block_style_options.each do |opt| %>
+                <%= pb_rails("nav/item", props: {
+                  link: "##{opt[:value]}",
+                  text: opt[:text],
+                  icon_left: opt[:icon],
+                  margin: "none",
+                  padding_top: "xxs",
+                  padding_bottom: "xxs",
+                }) %>
+              <% end %>
+            <% end %>
+          <% end %>
+          <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+          <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>
+          <button type="button" class="toolbar_button" data-action="strike" title="Strikethrough" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "strikethrough", size: "lg" }) %>
+            <% end %>
+          </button>
+          <%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
+          <button type="button" class="toolbar_button" data-action="codeBlock" title="Code block" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "code", size: "lg" }) %>
+            <% end %>
+          </button>
+          <button type="button" class="toolbar_button" data-action="link" title="Link" role="button" tabindex="0">
+            <%= pb_rails("flex", props: { align: "center", justify: "center", classname: "toolbar_button_icon" }) do %>
+              <%= pb_rails("icon", props: { icon: "link", 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>
+    <div id="<%= object.container_id %>-block-icon-templates" hidden aria-hidden="true">
+      <% block_style_options.each do |opt| %>
+        <span data-block-template-for="<%= opt[:value] %>" data-label="<%= opt[:text] %>">
+          <%= pb_rails("icon", props: { icon: opt[:icon], size: "lg" }) %>
+        </span>
+      <% end %>
+    </div>
     <div class="rte-editor-wrap">
       <div id="<%= object.editor_node_id %>"></div>
     </div>
@@ -222,6 +193,8 @@
   const hiddenInput = document.getElementById(inputId);
   const editorNode = document.getElementById("<%= object.editor_node_id %>");
   const toolbar = document.getElementById("<%= object.toolbar_id %>");
+  const blockTooltipId = "<%= object.rte_block_style_tooltip_id %>";
+  const iconTemplatesRoot = document.getElementById("<%= object.container_id %>-block-icon-templates");
   if (!editorNode || !hiddenInput || !toolbar) return;
 
   function syncToHiddenInput(editor) {
@@ -251,28 +224,90 @@
     bold: "toggleBold",
     italic: "toggleItalic",
     strike: "toggleStrike",
-    bulletList: "toggleBulletList",
-    orderedList: "toggleOrderedList",
-    blockquote: "toggleBlockquote",
     codeBlock: "toggleCodeBlock",
   };
 
+  function getCurrentBlockValue() {
+    let value = "paragraph";
+    if (editor.isActive("heading", { level: 1 })) value = "heading-1";
+    else if (editor.isActive("heading", { level: 2 })) value = "heading-2";
+    else if (editor.isActive("heading", { level: 3 })) value = "heading-3";
+    else if (editor.isActive("bulletList")) value = "bulletList";
+    else if (editor.isActive("orderedList")) value = "orderedList";
+    else if (editor.isActive("blockquote")) value = "blockquote";
+    return value;
+  }
+
+  function syncBlockTrigger() {
+    const current = getCurrentBlockValue();
+    const triggerRoot = toolbar.querySelector("[data-rte-block-trigger]");
+    let tpl = iconTemplatesRoot && [...iconTemplatesRoot.children].find(
+      (el) => el.getAttribute("data-block-template-for") === current
+    );
+    if (!tpl && iconTemplatesRoot) {
+      tpl = [...iconTemplatesRoot.children].find(
+        (el) => el.getAttribute("data-block-template-for") === "paragraph"
+      );
+    }
+    if (triggerRoot && tpl) {
+      const iconWrap = triggerRoot.querySelector(".rte-block-style-trigger-icon");
+      const labelEl = triggerRoot.querySelector(".rte-block-style-trigger-label");
+      if (iconWrap) iconWrap.innerHTML = tpl.innerHTML;
+      if (labelEl) labelEl.textContent = tpl.getAttribute("data-label") || "";
+    }
+    const tooltip = document.getElementById(blockTooltipId);
+    if (tooltip) {
+      tooltip.querySelectorAll("a.pb_nav_list_item_link").forEach((a) => {
+        const href = a.getAttribute("href") || "";
+        const v = href.startsWith("#") ? href.slice(1) : "";
+        a.classList.toggle("is-active", v === current);
+      });
+    }
+  }
+
+  function applyBlockType(value) {
+    const chain = editor.chain().focus();
+    if (value === "paragraph") chain.setParagraph().run();
+    else if (value === "heading-1") chain.toggleHeading({ level: 1 }).run();
+    else if (value === "heading-2") chain.toggleHeading({ level: 2 }).run();
+    else if (value === "heading-3") chain.toggleHeading({ level: 3 }).run();
+    else if (value === "bulletList") chain.toggleBulletList().run();
+    else if (value === "orderedList") chain.toggleOrderedList().run();
+    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();
+    });
+  }
+
   function updateActiveStates() {
+    syncBlockTrigger();
     toolbar.querySelectorAll("button[data-action]").forEach((btn) => {
       const action = btn.dataset.action;
-      const level = btn.dataset.level ? parseInt(btn.dataset.level, 10) : null;
       let active = false;
       if (action === "bold") active = editor.isActive("bold");
       else if (action === "italic") active = editor.isActive("italic");
       else if (action === "strike") active = editor.isActive("strike");
-      else if (action === "blockquote") active = editor.isActive("blockquote");
-      else if (action === "bulletList") active = editor.isActive("bulletList");
-      else if (action === "orderedList") active = editor.isActive("orderedList");
       else if (action === "codeBlock") active = editor.isActive("codeBlock");
       else if (action === "link") active = editor.isActive("link");
-      else if (action === "heading" && level != null) active = editor.isActive("heading", { level });
       btn.classList.toggle("is-active", active);
     });
+    toolbar.querySelectorAll("button[data-action='undo']").forEach((btn) => {
+      btn.disabled = !editor.can().undo();
+    });
+    toolbar.querySelectorAll("button[data-action='redo']").forEach((btn) => {
+      btn.disabled = !editor.can().redo();
+    });
   }
 
   toolbar.addEventListener("click", (e) => {
@@ -280,13 +315,20 @@
     if (!btn) return;
     e.preventDefault();
     const action = btn.dataset.action;
-    const level = btn.dataset.level ? parseInt(btn.dataset.level, 10) : null;
 
-    if (action === "heading" && level) {
-      editor.chain().focus().toggleHeading({ level }).run();
+    if (action === "undo") {
+      editor.chain().focus().undo().run();
+    } else if (action === "redo") {
+      editor.chain().focus().redo().run();
     } else if (action === "link") {
-      const url = window.prompt("URL:");
-      if (url) editor.chain().focus().setLink({ href: url }).run();
+      const previousUrl = editor.getAttributes("link").href || "";
+      const url = window.prompt("URL", previousUrl);
+      if (url === null) return;
+      if (url === "") {
+        editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      } else {
+        editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+      }
     } else {
       const chainMethod = actionToChain[action];
       if (chainMethod && typeof editor.chain().focus()[chainMethod] === "function") {

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

@@ -10,6 +10,12 @@ module Playbook
       prop :label
       prop :required_indicator, type: Playbook::Props::Boolean, default: false
 
+      # Match React default (globalProps maxWidth "md").
+      def max_width
+        v = values[:max_width] || values["max_width"]
+        v.nil? || v == "" ? "md" : v
+      end
+
       def classname
         generate_classname("pb_rich_text_editor_kit", "rte-container")
       end
@@ -40,6 +46,15 @@ module Playbook
       def toolbar_id
         "#{container_id}-toolbar"
       end
+
+      # Stable DOM ids for TipTap toolbar popover (used in ERB + module script; must be kit methods — not ERB locals).
+      def rte_block_style_trigger_id
+        "#{toolbar_id}-block-trigger"
+      end
+
+      def rte_block_style_tooltip_id
+        "#{toolbar_id}-block-tooltip"
+      end
     end
   end
 end