playbook_ui 16.1.0.pre.alpha.play273614090 → 16.1.0.pre.alpha.play274314102

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 33c67b8b945f889b6ccfea5e7b8279f6a865dcfc2463be92d4fc8bd6bbc9c83e
-  data.tar.gz: e265e657829ea242acf7c0196106f86db4dc37a3eba77ec23ae747d2908f08fa
+  metadata.gz: 55c0e17fe1c9ebc070555123e048fad21174f1103ff7c924a70ef6fcbaf10f67
+  data.tar.gz: 7e49dfd207ef248a867883cbd4d2dc3c39f93dbb872578493a6732d2906097bf
 SHA512:
-  metadata.gz: 042aa299615c7b669b07bc8ba55d273c10074a9dc8e6d89f0ec02a5903a0e9908ff92abe1bfeec1a170e4138436a10e9c68ca7ee951e232c8c6d483ef35228e2
-  data.tar.gz: f6d08b67113ad1fd61d652ab425e529c6730768bb028d2314f3c4285e207b6303d10c8003c0113d0ffbeec560776d29aa06094f5753caed34dd23764fc3417d3
+  metadata.gz: df84055b7fa9e7ba93d1e94fe8c4944033897e8841c05ef21c52191a91083856c072cb1d67a53c184d6cb39e28276eb862eb37818d12b200936b4e6e252d7c2e
+  data.tar.gz: 3ad38213a67a4a3c9440db8558c75728d4a6df072070420d1ef93a14efd5f13416addd58c165e5dc92e300ac1c3613870f0812f5bd6896fd10e8323d4eaed27d

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb

@@ -76,7 +76,7 @@
     const option   = e.detail;
     const dropdown = e.target;
 
-    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    const display = dropdown.querySelector("#dropdown_trigger_custom_display");
     if (!display) return;
 
     const nameEl = display.querySelector("#dropdown-avatar-name");

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -7,7 +7,7 @@
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
             data-default-value="<%= input_default_value %>"
-            data-dropdown-selected-option
+            id="dropdown-selected-option"
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"
             <%= object.required ? "required" : ""%>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -23,15 +23,15 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div data-dropdown-trigger-custom-display style="display: none;">
+                        <div id="dropdown_trigger_custom_display" style="display: none;">
                             <%= object.custom_display %>
                         </div>
-                        <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
+                        <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                     <% end %>
                 <% else %>
                     <% if object.multi_select %>
                         <%= pb_rails("flex", props: { align: "center", wrap: true }) do %>
-                            <%= pb_rails("flex", props: { data: { 'dropdown-pills-wrapper': true }, wrap: true }) do %>
+                            <%= pb_rails("flex", props: { id:"dropdown_pills_wrapper", wrap: true }) do %>
                             <% end %>   
                         <% if object.autocomplete %>
                                 <input
@@ -42,7 +42,7 @@
                                     autocomplete="off"
                                 />
                             <% else %>
-                                <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { "dropdown-trigger-display-multi-select": true }}) %>
+                                <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display_multi_select"}) %>
                             <% end %>
                         <% end %>
                     <% else %>
@@ -55,7 +55,7 @@
                                 autocomplete="off"
                             />
                         <% else %>
-                            <%= pb_rails("body", props: {text: object.default_display_placeholder, data: { 'dropdown-trigger-display': true }}) %>
+                            <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
                         <% end %>
                     <% end %>
                 <% end %>
@@ -63,9 +63,9 @@
         <% end %>
             <%= pb_rails("flex/flex_item") do %>
                 <%= pb_rails("body", props: {display: "flex", align_items:"center" }) do  %>
-                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", data:{'dropdown-clear-icon': true }, padding_right:"xs" }) %>
-                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", data:{'dropdown-open-icon': true }}) %>
-                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", data:{ 'dropdown-close-icon': true }}) %>
+                    <%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", id: "dropdown_clear_icon", padding_right:"xs" }) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
+                    <%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
                 <% end %>
             <% end %>
     <% end %>

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

@@ -4,19 +4,18 @@ import { PbDropdownKeyboard } from "./keyboard_accessibility";
 const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
 const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
 const CONTAINER_SELECTOR = "[data-dropdown-container]";
-const DOWN_ARROW_SELECTOR = "[data-dropdown-open-icon]";
-const UP_ARROW_SELECTOR = "[data-dropdown-close-icon]";
+const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
+const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const DROPDOWN_TRIGGER_DISPLAY = "[data-dropdown-trigger-display]";
+const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
-const DROPDOWN_INPUT = "[data-dropdown-selected-option]";
+const DROPDOWN_INPUT = "#dropdown-selected-option";
 const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
 const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
-const CLEAR_ICON_SELECTOR = "[data-dropdown-clear-icon]";
+const CLEAR_ICON_SELECTOR = "#dropdown_clear_icon";
 const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
 
-
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
     return DROPDOWN_SELECTOR;
@@ -306,7 +305,7 @@ export default class PbDropdown extends PbEnhancedElement {
   onOptionSelected(value, selectedOption) {
     const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
     const customDisplayElement = this.element.querySelector(
-      '[data-dropdown-trigger-custom-display]',
+      "#dropdown_trigger_custom_display",
     );
 
     if (triggerElement) {
@@ -694,9 +693,9 @@ export default class PbDropdown extends PbEnhancedElement {
   updatePills() {
     if (!this.isMultiSelect) return;
 
-    const wrapper = this.element.querySelector('[data-dropdown-pills-wrapper]');
+    const wrapper = this.element.querySelector("#dropdown_pills_wrapper");
     const placeholder = this.element.querySelector(
-      '[data-dropdown-trigger-display-multi-select]',
+      "#dropdown_trigger_display_multi_select",
     );
     if (!wrapper) return;
 
@@ -774,7 +773,7 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
     const customDisplay = this.element.querySelector(
-      '[data-dropdown-trigger-custom-display]',
+      "#dropdown_trigger_custom_display",
     );
     if (customDisplay) {
       customDisplay.style.display = "none";
@@ -830,7 +829,7 @@ export default class PbDropdown extends PbEnhancedElement {
     }
 
     const customDisplay = this.element.querySelector(
-      '[data-dropdown-trigger-custom-display]',
+      "#dropdown_trigger_custom_display",
     );
     if (customDisplay) {
       customDisplay.style.display = "none";

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
-import { TrixEditor } from 'react-trix'
+// The user must import and pass TrixEditor as a prop if using the default editor
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
@@ -9,14 +9,6 @@ import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
-import Trix from 'trix'
-import './_dedupe_trix_toolbar'
-
-Trix.config.textAttributes.inlineCode = {
-  tagName: 'code',
-  inheritable: true,
-}
-
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
@@ -55,6 +47,7 @@ type RichTextEditorProps = {
   template: string,
   value?: string,
   maxWidth?: string
+  TrixEditor?: React.ComponentType<any>,
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -84,6 +77,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     maxWidth = "md",
     requiredIndicator = false,
     label,
+    TrixEditor,
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -295,15 +289,23 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
           { children }
           </div>
         ) : (
-          <TrixEditor
-              className=""
-              fileParamName={name}
-              mergeTags={[]}
-              onChange={onChange}
-              onEditorReady={handleOnEditorReady}
-              placeholder={placeholder}
-              value={value}
-          />
+          TrixEditor ? (
+            <TrixEditor
+                className=""
+                fileParamName={name}
+                mergeTags={[]}
+                onChange={onChange}
+                onEditorReady={handleOnEditorReady}
+                placeholder={placeholder}
+                value={value}
+            />
+          ) : (
+            <div style={{ color: 'red', padding: '1em', border: '1px solid #f00', background: '#fff0f0' }}>
+              <strong>Trix Editor is not available.</strong><br />
+              Please import <code>TrixEditor</code> from <code>react-trix</code> and pass it as a prop to <code>RichTextEditor</code>.<br />
+              <pre>{`import { TrixEditor } from 'react-trix';\n<RichTextEditor TrixEditor={TrixEditor} ... />`}</pre>
+            </div>
+          )
         )
       }
     </div>

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

@@ -1,9 +1,13 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorAttributes = (props) => (
   <div>
     <RichTextEditor
+        TrixEditor={TrixEditor}
         aria={{ label: 'rich textarea' }}
         data={{ key: 'value', key2: 'value2' }}
         name="name-attribute"

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

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix' 
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -8,6 +11,7 @@ const RichTextEditorDefault = (props) => {
   return (
     <div>
       <RichTextEditor
+          TrixEditor={TrixEditor}
           onChange={handleOnChange}
           value={value}
           {...props}

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

@@ -1,14 +1,19 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorFocus = (props) => (
   <>
     <RichTextEditor
+        TrixEditor={TrixEditor}
         focus
         {...props}
     />
     <br />
     <RichTextEditor
+        TrixEditor={TrixEditor}
         focus
         {...props}
     />

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

@@ -1,9 +1,13 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorInline = (props) => (
   <div>
     <RichTextEditor
+        TrixEditor={TrixEditor}
         id="inline"
         inline
         toolbarBottom

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

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorLabel = (props) => {
   const [value, setValue] = useState(''),
@@ -8,6 +11,7 @@ const RichTextEditorLabel = (props) => {
   return (
     <div>
       <RichTextEditor
+          TrixEditor={TrixEditor}
           id="example"
           label="Example Label"
           onChange={handleOnChange}
@@ -16,6 +20,7 @@ const RichTextEditorLabel = (props) => {
       />
       <br/>
       <RichTextEditor
+          TrixEditor={TrixEditor}
           label="Example Label No ID"
           onChange={handleOnChange}
           value={value}

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

@@ -2,6 +2,9 @@ import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Button from '../../pb_button/_button'
 import Card from '../../pb_card/_card'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)
@@ -15,6 +18,7 @@ const RichTextEditorPreview = (props) => {
   return (
     <div>
       <RichTextEditor
+          TrixEditor={TrixEditor}
           id="content-preview-editor"
           onChange={handleChange}
           {...props}

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

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorRequiredIndicator = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),
@@ -8,6 +11,7 @@ const RichTextEditorRequiredIndicator = (props) => {
   return (
     <div>
       <RichTextEditor
+          TrixEditor={TrixEditor}
           inputOptions = {{ id: "required" }}
           label="Label"
           onChange={handleOnChange}

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

@@ -1,9 +1,13 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorSimple = (props) => (
   <div>
     <RichTextEditor
+        TrixEditor={TrixEditor}
         simple
         {...props}
     />

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

@@ -1,9 +1,13 @@
 import React from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorSticky = (props) => (
   <div>
     <RichTextEditor
+        TrixEditor={TrixEditor}
         id="sticky"
         sticky
         value="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_templates.jsx

@@ -2,6 +2,9 @@ import React, { useState } from 'react'
 import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Select from '../../pb_select/_select'
 import { changelog, release } from './templates.js'
+import { TrixEditor } from 'react-trix'
+// eslint-disable-next-line no-unused-vars
+import Trix from 'trix'
 
 const RichTextEditorTemplates = (props) => {
   const [editorContent, setEditorContent] = useState('')
@@ -31,6 +34,7 @@ const RichTextEditorTemplates = (props) => {
           {...props}
       />
       <RichTextEditor
+          TrixEditor={TrixEditor}
           id="template"
           template={editorContent}
           {...props}

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

@@ -1,40 +1,41 @@
 examples:
 
   rails:
-  - rich_text_editor_default: Default
-  - rich_text_editor_simple: Simple
-  - rich_text_editor_attributes: Attributes
-  - rich_text_editor_focus: Focus
-  - rich_text_editor_sticky: Sticky
-  - rich_text_editor_templates: Templates
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
-  - rich_text_editor_inline: Inline
-  - rich_text_editor_required_indicator: Required Indicator
-  - rich_text_editor_preview: Preview
 
   react:
-  - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
-  - rich_text_editor_simple: Simple
   - rich_text_editor_advanced_simple: Advanced (Simple)
-  - rich_text_editor_attributes: Attributes
   - rich_text_editor_advanced_attributes: Advanced (Attributes)
-  - rich_text_editor_focus: Focus
   - rich_text_editor_advanced_focus: Advanced (Focus)
-  - rich_text_editor_sticky: Sticky
   - rich_text_editor_advanced_sticky: Advanced (Sticky)
-  - rich_text_editor_templates: Templates
   - rich_text_editor_advanced_templates: Advanced (Templates)
-  # - rich_text_editor_toolbar_bottom: Toolbar Bottom
-  - rich_text_editor_inline: Inline
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
-  - rich_text_editor_label: Label
   - rich_text_editor_advanced_label: Advanced (Label)
-  - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
-  - rich_text_editor_preview: Preview
   - rich_text_editor_advanced_preview: Advanced Preview
+  - rich_text_editor_default: Legacy Default (Trix)
+  - rich_text_editor_simple: Legacy Simple (Trix)
+  - rich_text_editor_attributes: Legacy Attributes (Trix)
+  - rich_text_editor_focus: Legacy Focus (Trix)
+  - rich_text_editor_sticky: Legacy Sticky (Trix)
+  - rich_text_editor_templates: Legacy Templates (Trix)
+  - rich_text_editor_inline: Legacy Inline (Trix)
+  - rich_text_editor_label: Legacy Label (Trix)
+  - rich_text_editor_required_indicator: Legacy Required Indicator (Trix)
+  - rich_text_editor_preview: Legacy Preview (Trix)
+
+
+
+
+
+
+
+
+
+
+
+

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

@@ -4,7 +4,6 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
-export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
 export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'