playbook_ui_docs 15.3.0.pre.alpha.PLAY2565formkitsubmitfix11681 → 15.3.0.pre.alpha.PLAY2568richtexteditortiptaprails11790

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bba1f9b8ae412f2303274ac7a52b952213605dbe2c77721a69558a1e80228d8e
-  data.tar.gz: b8326328deb9f409ef075ed7322224db6e616af4e986baf408372b19993c7011
+  metadata.gz: c1358de176cde4e1b99df47749f8c77913c37cd9bd0066a4862c7cb9fcdd2398
+  data.tar.gz: bc24c83b8c64c106ca7dd118bc4a1289ff614c9484340b296c976a02005813db
 SHA512:
-  metadata.gz: 67e96b8d88f0a7db6b6a3e763856f7b67a7bc55e4bb6cd8fc79e781c8630ae0b0f40c8bbdb61f76f0fb2260cb45ca49dfb33659cfe67d09fbb8fe28844c67e21
-  data.tar.gz: 6b0b26a22109b5e268f90b8390526f154c78a636dcc6d1e0797ab54e6a17c1799081df5bfc4ef3a17dcb69be961a3199095a8110a22158d395f622a24e8bb5b7
+  metadata.gz: 5d46b7cd075bfa15f6d47b0e381811add8a1abbe1491386f503fbe57c5cdd15eeea37528264cacb8f4239061153c95a86f0166105195bb46ac973a7ae39fd765
+  data.tar.gz: f9ab3f7097660093c16ddbe23ca2f5d571dd35544183cf82e84487d980686af1b687acc3a5c68e50ca1feb7dd6ab86d469aaefa8b5a2ac68e08dbbea9a1b65c7

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Caption from '../../pb_caption/_caption'
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
+import { MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN } from "./_mock_data_inline_loading_empty_children"
 
 const AdvancedTableInlineRowLoading = (props) => {
   const columnDefinitions = [
@@ -41,16 +43,42 @@ const AdvancedTableInlineRowLoading = (props) => {
 
   return (
     <div>
+      <Caption text="Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           enableToggleExpansion="all"
           inlineRowLoading
+          marginBottom="md"
           tableData={MOCK_DATA_INLINE_LOADING}
           {...props}
       >
         <AdvancedTable.Header />
         <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
       </AdvancedTable>
+      <Caption text="Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          marginBottom="md"
+          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+      <Caption text="Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" />
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          inlineRowLoading
+          persistToggleExpansionButton
+          tableData={MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md

@@ -1,5 +1,14 @@
+### inlineRowLoading
 As a default, the kit assumes that the initial dataset is complete, and it renders all expansion buttons/controls based on that data; if no children are present, no expansion controls are rendered. If, however, you want to change the initial dataset to omit some or all of its children (to improve load times of a complex dataset, perhaps), and you implement a querying logic that loads children only when its parent is expanded, then you must use the `inlineRowLoading` prop to ensure your expansion controls are rendered even though your child data is not yet loaded. You must also pass an empty `children` array to any node that will have children to ensure its parent maintains its ability to expand. If this prop is called AND your data contains empty `children` arrays, the kit will render expansion controls on any row with empty children, and then add an inline loading state within the expanded subrow until those child row(s) are returned to the page [by your query logic].
 
-In this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
+In the first Advanced Table in this code example, 2021 has an empty children array. Toggle it open to see the inline loading state. Once the correct data loads, this state will be replaced with the correct data rows. 
 
-This prop is set to `false` by default. 
+This prop is set to `false` by default. 
+
+
+### persistToggleExpansion
+The `persistToggleExpansionButton` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceeding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
+
+In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persistToggleExpansionButton` in place. The third Advanced Table shows the toggle all button due to `persistToggleExpansionButton`. 
+
+This prop is set to false by default and should only be used in conjunction with `inlineRowLoading`.

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js

@@ -0,0 +1,42 @@
+export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      year: "2022",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "25",
+      scheduledMeetings: "17",
+      attendanceRate: "75%",
+      completedClasses: "5",
+      classCompletionRate: "45%",
+      graduatedStudents: "32",
+      children: [],
+    },
+    {
+      year: "2023",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "10",
+      scheduledMeetings: "15",
+      attendanceRate: "65%",
+      completedClasses: "4",
+      classCompletionRate: "49%",
+      graduatedStudents: "29",
+      children: [],
+    },
+  ]
+  

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

@@ -0,0 +1,127 @@
+ <%= pb_rails("caption", props: { text: "Advanced Default" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  placeholder: "Start typing your content here...",
+  value: "Add your text here. You can format your text, add links, quotes, and bullets. This is the <strong>TipTap-based</strong> rich text editor rendered through Rails which requires a direct import of Tiptap into the tsx file.",
+}) %>
+
+<%= pb_rails("caption", props: { text: "AdvancedToolbar disabled" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+    rails_advanced_editor: true,
+    advanced_editor_toolbar: false,
+    margin_bottom: "md",
+    value: "<p>This advanced editor has the toolbar disabled, showing only the content area.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Simple" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  simple: true,
+  value: "<p>This is a <strong>simple</strong> version of the advanced editor with fewer toolbar options.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Attributes" }) %>
+<%= pb_rails("rich_text_editor", props: {
+  aria: { label: "rich-textarea" },
+  data: { key: "value", key2: "value2" },
+  name: "textarea-label",
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  value: "<p>This advanced editor has attributes, aria, and data attributes.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Focus" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  focus: true,
+  margin_bottom: "md",
+  value: "<p>This advanced editor shows the toolbar only when focused.</p>"
+}) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Sticky" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  sticky: true,
+  margin_bottom: "md",
+  value: "<p>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.</p>"
+}) %>
+ 
+<%= pb_rails("caption", props: { text: "Advanced Templates" }) %>
+<%= pb_rails("body", props: { margin_bottom: "md", text: "Not getting into this on POC feels like more of a nice to have" }) %>
+
+<%= pb_rails("caption", props: { text: "Advanced Inline" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  inline: true,
+  margin_bottom: "md",
+  value: "<p>This advanced editor has an inline toolbar, showing all the formatting options.</p>"
+}) %>
+
+ <%= pb_rails("caption", props: { text: "Advanced Preview" }) %>
+<%= pb_rails("rich_text_editor", props: { 
+  id: "advanced-preview-editor",
+  rails_advanced_editor: true,
+  margin_bottom: "md",
+  value: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
+}) %>
+
+<%= pb_rails("button", props: { id: "advanced-preview-button", text: "Preview Output", variant: "secondary" }) %>
+
+<div id="advanced-card-obfuscation" style="display:none">
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
+   <div id="advanced-content-preview" class="tiptap-content">
+   </div>
+  <% end %>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleAdvancedButtonClick() {
+      // Find the specific TipTap editor container by ID
+      const editorContainer = [...document.querySelectorAll('[data-pb-react-props]')]
+        .find(element => element.getAttribute('data-pb-react-props')?.includes('"id":"advanced-preview-editor"'))
+
+      if (!editorContainer) {
+        console.log('Editor container not found')
+        return
+      }
+
+      // Find the TipTap editor content
+      const tiptapEditor = editorContainer.querySelector('.ProseMirror')
+      const previewArea = document.getElementById('advanced-content-preview')
+      const cardDiv = document.getElementById('advanced-card-obfuscation')
+
+      console.log('Found elements:', { tiptapEditor, previewArea, cardDiv })
+
+      if (tiptapEditor && previewArea && cardDiv) {
+        // Get the HTML content from the TipTap editor
+        const editorContent = tiptapEditor.innerHTML || ''
+        console.log('Editor content:', editorContent)
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      } else {
+        console.log('Missing elements:', { tiptapEditor: !!tiptapEditor, previewArea: !!previewArea, cardDiv: !!cardDiv })
+      }
+    }
+
+    document.getElementById('advanced-preview-button')?.addEventListener('click', handleAdvancedButtonClick)
+  })
+</script>
+
+
+<%= pb_rails("caption", props: { margin_top: "md", text: "Bonus: Advanced Extra Extensions (couldnt help thinking about this a little)" }) %>
+<%= pb_rails("body", props: { margin_bottom: "md", text: "Possibly possible: I tried to set up a tip_tap_options prop via which any extensions would need to be passed through after being impoted directly to an external propject. Look at code example for hypothetical use." }) %>
+<% tip_tap_options = {
+  extensions: []  # Extensions would be passed here as actual TipTap extension objects. Not sure if would work right away or if rich_text_editor.tsx would need to account for them.
+} %>
+<%= pb_rails("rich_text_editor", props: { 
+  rails_advanced_editor: true,
+  tip_tap_options: tip_tap_options,
+  margin_bottom: "md",
+  value: "HYPOTHETICALLY extensions can be added via tip_tap_options.extensions array.",
+}) %>
+
+<%= pb_rails("caption", props: { text: "Alt thought: some sort of stimulus or enhanced element based RTE that imports TipTap directly into Rails?" }) %>
+<%= pb_rails("body", props: {text: "If anything, may serve as an extension of the EXTENSIONS/tip_tap_options configuration. Not sure if works solo." }) %>

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

@@ -0,0 +1 @@
+This is a POC for a react-rendered-rails version of the Advanced RTE, which necessarily requires we import Tiptap as an internal dependency since it is not compatible with Rails. Because of that, I'm not sure how we will be able to truly leverage Tiptap extensions/customizability to its full potential. We should be able to provide certain props/prop combos like we do now and provide them as options for customized editors - may require a few more doc examples and methods in the controller than we currently have but once it exists should be usable (for example, if there are usecases or examples of things like horizontal bar, highlight, etc. in Nitro or documented we can build those into the kit HUB request style.)

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

@@ -1,6 +1,7 @@
 examples:
 
   rails:
+  - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_default: Default
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes