playbook_ui 16.3.0.pre.alpha.PLAY2779dropdowncustomeventtype14814 → 16.3.0.pre.alpha.PLAY2782RTEPOCs14847

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35ea148133e067dd35dfe27d5f662f9e55dd94a8ce5e8413efd8234405e7f6ec
-  data.tar.gz: dd608024f4e264422496a04d6f6946a67b240117359e1f852926f9af7223ecaf
+  metadata.gz: 8e1992dda937b2b5cbfccb239549fe6ca111676bcb86bae3b296df9b7a5c2d39
+  data.tar.gz: 8ce49f7e0b5a67a7060af0cb5e03181df203a704b5b8ac9e9573ade7a538370e
 SHA512:
-  metadata.gz: d5ba6c0803ad1c8e0332b8c639c50eaece52996d7a482754f630a7473ee3b9c1c6d2c3feb5984ab4fe9c96ef6e8afff7d799cfab494bb1f4f340ecebf29fa677
-  data.tar.gz: 49744400d43e8113480de8ca7977b479f1cf59dcda6443546a1535c46ff3577f47e017364571ff7f76cce70b489fbfa44fa84b7f25e2e6446071919fd1d9f15e
+  metadata.gz: 70cb1043ad6fd7b1222e695336edd15e3ab6565dccd1d6ec09ca03253101855ab40f925b57e51722d78f9ce53834bfb658e6072a52a10d835ae8dc10bd289600
+  data.tar.gz: 14fd821a7c6da64695c77b7eec55238eddf41dd478f84c61d082dcaf2d0d0195da0a39295f691d3a5bddb083cf105fa302137912a9fb3577116e9f682bb6feca

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

@@ -33,7 +33,6 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
-  - dropdown_custom_event_type: Custom Event Type
 
   react:
   - dropdown_default: Default

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -55,8 +55,6 @@ module Playbook
                               default: false
       prop :required_indicator, type: Playbook::Props::Boolean,
                                 default: false
-      prop :custom_event_type, type: Playbook::Props::String,
-                               default: ""
 
       def data
         Hash(prop(:data)).merge(
@@ -69,8 +67,7 @@ module Playbook
           start_date_id: variant == "quickpick" ? start_date_id : nil,
           end_date_id: variant == "quickpick" ? end_date_id : nil,
           controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
-          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil,
-          custom_event_type: custom_event_type.presence
+          controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil
         ).compact
       end
 

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

@@ -95,25 +95,6 @@ export default class PbDropdown extends PbEnhancedElement {
       this.clearBtn.addEventListener("click", this.clearBtnHandler);
     }
     this.updateClearButton();
-
-    // Listen for clear and select events from external source
-    this.handleClearEventBound = this.handleClearEvent.bind(this);
-    document.addEventListener("pb:dropdown:clear", this.handleClearEventBound);
-    this.handleSelectEventBound = this.handleSelectEvent.bind(this);
-    document.addEventListener("pb:dropdown:select", this.handleSelectEventBound);
-
-    // Listen for custom_event_type to clear on custom events
-    const customEventTypeString = this.element.dataset.customEventType;
-    if (customEventTypeString) {
-      this.customClearEventTypes = customEventTypeString
-        .split(",")
-        .map((e) => e.trim())
-        .filter(Boolean);
-      this.handleCustomClearBound = this.handleCustomClearEvent.bind(this);
-      this.customClearEventTypes.forEach((eventType) => {
-        document.addEventListener(eventType, this.handleCustomClearBound);
-      });
-    }
   }
 
   disconnect() {
@@ -165,19 +146,6 @@ export default class PbDropdown extends PbEnhancedElement {
     if (this.clearBtn && this.clearBtnHandler) {
       this.clearBtn.removeEventListener('click', this.clearBtnHandler)
     }
-
-    // Clean up external clear/select listeners
-    if (this.handleClearEventBound) {
-      document.removeEventListener("pb:dropdown:clear", this.handleClearEventBound)
-    }
-    if (this.handleSelectEventBound) {
-      document.removeEventListener("pb:dropdown:select", this.handleSelectEventBound)
-    }
-    if (this.customClearEventTypes && this.handleCustomClearBound) {
-      this.customClearEventTypes.forEach((eventType) => {
-        document.removeEventListener(eventType, this.handleCustomClearBound)
-      })
-    }
   }
 
   updateClearButton() {
@@ -386,135 +354,6 @@ export default class PbDropdown extends PbEnhancedElement {
     }
   }
 
-  // ----- External events handling section -----
-  // Handles pb:dropdown:clear - clear this dropdown when event.detail.dropdownId matches.
-  handleClearEvent(event) {
-    const targetId = event.detail?.dropdownId;
-    if (targetId && this.element.id === targetId) {
-      this.clearSelection();
-    }
-  }
-
-  // Handles custom_event_type events (e.g. turbo:submit-end) - clear when detail.dropdownId matches or is omitted.
-  handleCustomClearEvent(event) {
-    const targetId = event.detail?.dropdownId;
-    if (targetId == null || this.element.id === targetId) {
-      this.clearSelection();
-    }
-  }
-
-  // Handles pb:dropdown:select - set dropdown selection by option id(s).
-  // Single: detail: { dropdownId, optionId }. Multi: detail: { dropdownId, optionIds: ['id1', 'id2'] }.
-  handleSelectEvent(event) {
-    const targetId = event.detail?.dropdownId;
-    if (!targetId || this.element.id !== targetId) return;
-
-    const optionId = event.detail?.optionId;
-    const optionIds = event.detail?.optionIds;
-    if (optionId != null) {
-      this.setSelectionByOptionId(optionId);
-    } else if (Array.isArray(optionIds)) {
-      this.setSelectionByOptionIds(optionIds);
-    }
-  }
-
-  // Set single-select dropdown to the option with the given id. No-op if id not found.
-  setSelectionByOptionId(optionId) {
-    if (this.isMultiSelect) return;
-    const hiddenInput = this.baseInput;
-    const optionEls = Array.from(this.element.querySelectorAll(OPTION_SELECTOR));
-    const selectedOption = optionEls.find((opt) => {
-      try {
-        return JSON.parse(opt.dataset.dropdownOptionLabel).id === optionId;
-      } catch {
-        return false;
-      }
-    });
-    if (!selectedOption) return;
-
-    optionEls.forEach((opt) => opt.classList.remove("pb_dropdown_option_selected"));
-    selectedOption.classList.add("pb_dropdown_option_selected");
-    if (hiddenInput) hiddenInput.value = optionId;
-    const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
-    const customDisplayElement = this.element.querySelector(
-      '[data-dropdown-trigger-custom-display]',
-    );
-    if (customDisplayElement) {
-      this.setTriggerElementText("");
-      customDisplayElement.style.display = "block";
-      customDisplayElement.style.paddingRight = "8px";
-    } else {
-      this.setTriggerElementText(optionData.label);
-    }
-    if (this.searchInput) {
-      this.searchInput.value = optionData.label;
-    }
-
-    if (optionData.formatted_start_date && optionData.formatted_end_date) {
-      const startDateId = this.element.dataset.startDateId;
-      const endDateId = this.element.dataset.endDateId;
-      const controlsStartId = this.element.dataset.controlsStartId;
-      const controlsEndId = this.element.dataset.controlsEndId;
-      if (startDateId) {
-        const startDateInput = document.getElementById(startDateId);
-        if (startDateInput) startDateInput.value = optionData.formatted_start_date;
-      }
-      if (endDateId) {
-        const endDateInput = document.getElementById(endDateId);
-        if (endDateInput) endDateInput.value = optionData.formatted_end_date;
-      }
-      const syncDatePickers = () => {
-        if (controlsStartId) {
-          const startPicker = document.querySelector(`#${CSS.escape(controlsStartId)}`)?._flatpickr;
-          if (startPicker) startPicker.setDate(optionData.formatted_start_date, true, "m/d/Y");
-        }
-        if (controlsEndId) {
-          const endPicker = document.querySelector(`#${CSS.escape(controlsEndId)}`)?._flatpickr;
-          if (endPicker) endPicker.setDate(optionData.formatted_end_date, true, "m/d/Y");
-        }
-      };
-      syncDatePickers();
-      setTimeout(syncDatePickers, 100);
-      setTimeout(syncDatePickers, 300);
-    }
-
-    this.updateClearButton();
-    this.emitSelectionChange();
-  }
-
-  // Set multi-select dropdown to the options with the given ids. Invalid ids are skipped.
-  setSelectionByOptionIds(optionIds) {
-    if (!this.isMultiSelect || !optionIds.length) return;
-    const optionEls = Array.from(this.element.querySelectorAll(OPTION_SELECTOR));
-    this.selectedOptions.clear();
-    optionEls.forEach((opt) => {
-      opt.classList.remove("pb_dropdown_option_selected");
-      opt.style.display = "";
-    });
-
-    optionIds.forEach((id) => {
-      const opt = optionEls.find((o) => {
-        try {
-          return JSON.parse(o.dataset.dropdownOptionLabel).id === id;
-        } catch {
-          return false;
-        }
-      });
-      if (opt) {
-        const raw = opt.dataset.dropdownOptionLabel;
-        this.selectedOptions.add(raw);
-        opt.style.display = "none";
-      }
-    });
-
-    this.updatePills();
-    this.updateClearButton();
-    this.adjustDropdownHeight();
-    this.syncHiddenInputs();
-    this.emitSelectionChange();
-  }
-  // ----- End External events handling section -----
-
   isClickOutside(event) {
     const label = event.target.closest(LABEL_SELECTOR);
     if (label && this.element.contains(label)) return false;

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

@@ -0,0 +1,69 @@
+// Playbook-themed overrides for Lexxy POC (toolbar + icons).
+// Scoped to [data-pb-rte-lexxy] so default Lexxy styling is unchanged elsewhere.
+
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/transition";
+
+[data-pb-rte-lexxy] {
+  // Remove Lexxy’s outer wrapper border and padding so only toolbar + content form one card
+  lexxy-editor,
+  lexxy-editor.lexxy-content {
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  lexxy-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $space_xs;
+    background: $white;
+    border: 1px solid $input_border_default;
+    border-bottom: none;
+    border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
+    padding: $space_xs;
+    @include transition_default;
+  }
+
+  .lexxy-editor__content {
+    border: 1px solid $input_border_default;
+    border-radius: 0 0 $border_rad_heaviest $border_rad_heaviest;
+  }
+
+  .lexxy-editor__toolbar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    border-radius: $border_rad_heaviest;
+    color: $text_lt_light;
+    width: $space_xl + 2;
+    height: $space_xl + 2;
+    cursor: pointer;
+    @include transition_default;
+
+    &:hover:not([disabled]) {
+      background-color: $neutral_subtle;
+    }
+
+    &[aria-pressed="true"] {
+      color: $primary;
+      background-color: $bg_light;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .lexxy-editor__toolbar-button svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    fill: currentColor;
+  }
+}

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

@@ -0,0 +1,86 @@
+// Playbook-themed overrides for Quill POC (toolbar + icons).
+// Scoped to [data-pb-rte-quill] so default Quill styling is unchanged elsewhere.
+
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/transition";
+
+[data-pb-rte-quill] {
+  .ql-toolbar.ql-snow {
+    background: $white;
+    border: 1px solid $input_border_default;
+    border-bottom: 1px solid $input_border_default;
+    border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
+    padding: $space_xs;
+    @include transition_default;
+  }
+
+  .ql-container.ql-snow {
+    border: 1px solid $input_border_default;
+    border-radius: 0 0 $border_rad_heaviest $border_rad_heaviest;
+  }
+
+  // Single border: remove Quill Snow’s extra border/outline from the inner editor to avoid double-thick bottom and blue focus
+  .ql-container .ql-editor {
+    border: none;
+    outline: none;
+    box-shadow: none;
+  }
+
+  .ql-toolbar .ql-formats {
+    margin-right: $space_sm;
+  }
+
+  .ql-toolbar.ql-snow button {
+    background: transparent;
+    border: none;
+    border-radius: $border_rad_heaviest;
+    color: $text_lt_light;
+    width: $space_xl + 2;
+    height: $space_xl + 2;
+    @include transition_default;
+
+    &:hover {
+      background-color: $neutral_subtle;
+    }
+
+    &.ql-active {
+      color: $primary;
+      background-color: $bg_light;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  // Quill uses .ql-stroke and .ql-fill for SVG strokes/fills; use currentColor so icons match toolbar color
+  .ql-toolbar .ql-stroke {
+    stroke: currentColor;
+  }
+
+  .ql-toolbar .ql-fill {
+    fill: currentColor;
+  }
+
+  .ql-toolbar button svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  // Picker (e.g. heading dropdown) align with Playbook
+  .ql-toolbar .ql-picker {
+    color: $text_lt_light;
+
+    &.ql-expanded {
+      .ql-picker-label {
+        color: $primary;
+      }
+    }
+  }
+
+  .ql-toolbar .ql-picker-label:hover {
+    color: $primary;
+  }
+}

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

@@ -9,6 +9,8 @@
 @import "../pb_icon/icon";
 @import "./trix_styles";
 @import "./tiptap_styles";
+@import "./quill_styles";
+@import "./lexxy_styles";
 
 .pb_rich_text_editor_kit {
   // Disables File Attatchment Button in Toolbar

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

@@ -107,14 +107,14 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       const hiddenInput = document.getElementById(oldId) as HTMLElement | null
       if (!hiddenInput) return
 
-      const hiddenInputId = (inputOptions.id as string) || oldId
+      const hiddenInputId = (inputOptions?.id as string) || oldId
 
       if (hiddenInputId !== oldId) {
         hiddenInput.id = hiddenInputId
         editorInstance.element?.setAttribute("input", hiddenInputId)
       }
 
-      if (inputOptions.name) {
+      if (inputOptions?.name) {
         hiddenInput.setAttribute("name", inputOptions.name as string)
       }
 
@@ -240,7 +240,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
-  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions?.id ? `${inputOptions.id}_trix` : undefined))
 
   return (
     <div

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

@@ -73,6 +73,12 @@
     }
   }
 
+  // Active state for toolbar (Rails kit uses pb_button_kit pb_button_link; override link variant when active)
+  .toolbar button.pb_button_kit.is-active {
+    color: $primary;
+    background-color: $bg_light;
+  }
+
   .pb_rich_text_editor_tiptap_toolbar_sticky {
     position: sticky;
     top: 0;
@@ -83,6 +89,9 @@
     border: 1px solid $input_border_default;
     overflow-x: auto;
     &_block {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
       gap: $space_xs;
     }
     .editor-dropdown-button {

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

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor_lexxy", props: { input_options: { id: 'lexxy_editor_id', name: "hidden_input_name" }, placeholder: "Write something…" }) %>

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

@@ -0,0 +1 @@
+Lexxy (37signals / Lexical) kit — form-associated custom element; submits with the form like a textarea. Attachments disabled in this demo. Use `pb_rails("rich_text_editor_lexxy", props: { input_options: { id: "...", name: "..." }, placeholder: "..." })`.

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

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor_quill", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "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_quill_default.md

@@ -0,0 +1 @@
+Quill kit — framework-agnostic editor with Snow theme. Content is synced to a hidden input for Rails form submission. Use `pb_rails("rich_text_editor_quill", props: { input_options: { id: "...", name: "..." }, value: "..." })`.

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

@@ -0,0 +1 @@
+<%= pb_rails("rich_text_editor_tiptap", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "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_tiptap_default.md

@@ -0,0 +1 @@
+TipTap (vanilla JS) kit — 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_tiptap", props: { input_options: { id: "...", name: "..." }, value: "..." })`.

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

@@ -11,6 +11,9 @@ examples:
   - rich_text_editor_inline: Inline
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_preview: Preview
+  - rich_text_editor_tiptap_default: "TipTap (Vanilla JS)"
+  - rich_text_editor_quill_default: "Quill"
+  - rich_text_editor_lexxy_default: "Lexxy"
 
   react:
   - rich_text_editor_default: Default

data/app/pb_kits/playbook/pb_rich_text_editor_lexxy/rich_text_editor_lexxy.html.erb

@@ -0,0 +1,32 @@
+<link rel="stylesheet" href="https://unpkg.com/@37signals/lexxy@0.7.6-beta/dist/stylesheets/lexxy-content.css" />
+<link rel="stylesheet" href="https://unpkg.com/@37signals/lexxy@0.7.6-beta/dist/stylesheets/lexxy-editor.css" />
+<%= pb_content_tag(:div, id: object.container_id, class: object.classname, data: { pb_rte_lexxy: true }) do %>
+  <div class="pb_rich_text_editor_kit">
+  <% if object.label.present? %>
+    <label for="<%= object.input_id %>">
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %><span style="color: #DA0014;"> *</span>
+      <% else %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
+      <% end %>
+    </label>
+  <% end %>
+  <lexxy-editor
+    id="<%= object.input_id %>"
+    name="<%= object.input_name %>"
+    placeholder="<%= h(object.placeholder.presence || 'Write something…') %>"
+    class="lexxy-content"
+  ></lexxy-editor>
+  </div>
+<% end %>
+
+<script type="module">
+(async function() {
+  const container = document.getElementById("<%= object.container_id %>");
+  if (!container) return;
+  const Lexxy = await import("https://esm.sh/@37signals/lexxy@0.7.6-beta");
+  if (Lexxy.configure) {
+    Lexxy.configure({ default: { attachments: false } });
+  }
+})();
+</script>

data/app/pb_kits/playbook/pb_rich_text_editor_lexxy/rich_text_editor_lexxy.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbRichTextEditorLexxy
+    class RichTextEditorLexxy < Playbook::KitBase
+      prop :value
+      prop :placeholder
+      prop :input_options, type: Playbook::Props::HashProp, default: {}
+      prop :label
+      prop :required_indicator, type: Playbook::Props::Boolean, default: false
+
+      def classname
+        generate_classname("pb_rich_text_editor_kit", "rte-container")
+      end
+
+      def input_id
+        input_options[:id].presence || (id.present? ? "#{id}-input" : "rich_text_editor_lexxy-input")
+      end
+
+      def input_name
+        input_options[:name].presence || "content"
+      end
+
+      def container_id
+        id.present? ? "rte-lexxy-#{id}" : "rte-lexxy-#{input_id.gsub(/[^a-z0-9_-]/i, '')}"
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_rich_text_editor_quill/rich_text_editor_quill.html.erb

@@ -0,0 +1,47 @@
+<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
+<%= pb_content_tag(:div, id: object.container_id, class: object.classname, data: { pb_rte_quill: true, input_id: object.input_id, initial_html: object.initial_html }) do %>
+  <div class="pb_rich_text_editor_kit">
+  <% if object.label.present? %>
+    <label for="<%= object.input_id %>">
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %><span style="color: #DA0014;"> *</span>
+      <% else %>
+        <%= pb_rails("caption", props: { color: "lighter", text: object.label, dark: object.dark }) %>
+      <% end %>
+    </label>
+  <% end %>
+  <input type="hidden" name="<%= object.input_name %>" id="<%= object.input_id %>" value="" />
+  <div id="<%= object.editor_node_id %>">
+    <%= raw object.initial_html %>
+  </div>
+  </div>
+<% end %>
+
+<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
+<script>
+(function() {
+  const container = document.getElementById("<%= object.container_id %>");
+  if (!container) return;
+  const inputId = container.dataset.inputId;
+  const hiddenInput = document.getElementById(inputId);
+  const editorNode = document.getElementById("<%= object.editor_node_id %>");
+  if (!editorNode || !hiddenInput) return;
+
+  function syncToHiddenInput() {
+    if (typeof Quill !== "undefined" && window._pbQuillInstances && window._pbQuillInstances["<%= object.container_id %>"]) {
+      const quill = window._pbQuillInstances["<%= object.container_id %>"];
+      hiddenInput.value = quill.root.innerHTML;
+    }
+  }
+
+  if (typeof Quill === "undefined") return;
+  const quill = new Quill("#<%= object.editor_node_id %>", {
+    theme: "snow",
+    placeholder: "<%= j(object.placeholder.presence || 'Compose...') %>",
+  });
+  window._pbQuillInstances = window._pbQuillInstances || {};
+  window._pbQuillInstances["<%= object.container_id %>"] = quill;
+  quill.on("text-change", syncToHiddenInput);
+  syncToHiddenInput();
+})();
+</script>

data/app/pb_kits/playbook/pb_rich_text_editor_quill/rich_text_editor_quill.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbRichTextEditorQuill
+    class RichTextEditorQuill < Playbook::KitBase
+      prop :value
+      prop :placeholder
+      prop :input_options, type: Playbook::Props::HashProp, default: {}
+      prop :label
+      prop :required_indicator, type: Playbook::Props::Boolean, default: false
+
+      def classname
+        generate_classname("pb_rich_text_editor_kit", "rte-container")
+      end
+
+      def input_id
+        input_options[:id].presence || (id.present? ? "#{id}-input" : "rich_text_editor_quill-input")
+      end
+
+      def input_name
+        input_options[:name].presence || "content"
+      end
+
+      def initial_html
+        value.present? ? value.to_s : "<p><br></p>"
+      end
+
+      def container_id
+        id.present? ? "rte-quill-#{id}" : "rte-quill-#{input_id.gsub(/[^a-z0-9_-]/i, '')}"
+      end
+
+      def editor_node_id
+        "#{container_id}-editor"
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_rich_text_editor_tiptap/README.md

@@ -0,0 +1,35 @@
+# Rich Text Editor (TipTap) — Vanilla JS Kit
+
+This kit loads TipTap from CDN via an **import map** so the editor runs without a build step.
+
+## Using in your app
+
+Use a Playbook gem that includes this kit, include Playbook CSS, and (if you use CSP) allow `cdn.jsdelivr.net` and inline scripts. For full details see the docs guide **Rich Text Editor POCs**.
+
+## Drawbacks of the current approach
+
+- **Deep dependency tree**: TipTap and ProseMirror pull in many packages (`orderedmap`, `w3c-keyname`, `rope-sequence`, `@tiptap/extension-text-style`, etc.). Each must be listed in the import map or the browser fails with "Failed to resolve module specifier".
+- **Whack-a-mole**: Adding one missing dependency can surface another. The list may grow when TipTap or ProseMirror versions change.
+- **Version pinning**: All mapped packages are pinned to specific versions. Upgrading TipTap may require updating the import map and re-testing.
+
+## Recommended alternative for production
+
+**Use a single bundled script** instead of the import map:
+
+1. In your app (e.g. playbook-website), add a small build step that bundles TipTap once:
+   ```js
+   // tiptap-bundle.js (built with esbuild, rollup, etc.)
+   import { Editor } from '@tiptap/core'
+   import StarterKit from '@tiptap/starter-kit'
+   import Link from '@tiptap/extension-link'
+   export { Editor, StarterKit, Link }
+   ```
+2. Serve the output (e.g. `tiptap-bundle.js`) from your assets or CDN.
+3. In this kit’s template, replace the import map + bare-specifier `import()` with a single script that loads that bundle and then creates the editor.
+
+That way there are no import-map entries to maintain, and you get one consistent dependency set.
+
+## When this kit is still useful
+
+- **Docs/demos**: Showing the kit on the Playbook docs site with the import map is fine; we add dependencies as needed.
+- **Quick Rails-only setups**: If you can’t add a front-end build, the import map is the only no-build option; just be aware more deps may need to be added over time.