playbook_ui_docs 15.4.0 → 15.5.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 130f7dac8c44112c08c8028407b2678a4da68ef938375dbcedd7027809cac610
-  data.tar.gz: 5dd483f36bc3d436b8bc35cdbfeb5ced060d1d82ac2d0602c5d2958df869e376
+  metadata.gz: 3251b709fdb1f49c81517f7ef6e60d3c8d83ce4da554b6f646e03ea94966d4fd
+  data.tar.gz: '070835678f96480adb51ec83b0b4bae26b07ff9760a57ca7be485955d6699d35'
 SHA512:
-  metadata.gz: ad1f55066a19cd7a806afdc5a3ecaf45d49ad44c30ddca62bd95efa994c5793499a5ebd5a484d7e77bb100dd049314e84861a78eff8c48c9f22705a15dba2280
-  data.tar.gz: 582c9b64f5163a5d1b72923debf7ac203d92f5caeb2351fdbf1ab24b8c6664117a30a4b423959deaf4d27ee12e726dee1cae66ab47f811d5f33a3fd3d83249d8
+  metadata.gz: b211e59843101d9837123ff1397be65a1e5c5f62716e1701685c5afb7f0a0ef56cd92dfeb0dc5bab369c90c05e6732f6b13ff2f3a8016b96d13d27878d351577
+  data.tar.gz: 1601b6e0bf78c791c880ef18e5dffd7d1c1140d009c54592c3311f38d8f2e64eae124075dd27116e456eb75471825895c58e1312ceaa98cb9479e60ffdbdd6d6

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, size: "xs", show_current_year: true }) %>
+<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, show_current_year: true }) %>

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import DateRangeInline from '../_date_range_inline'
+
+const DateRangeInlineShowCurrentYear = (props) => {
+  return (
+    <div>
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="xs"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+      <DateRangeInline
+          align="center"
+          endDate={new Date(`7 Dec ${new Date().getFullYear()}`)}
+          icon
+          showCurrentYear
+          size="sm"
+          startDate={new Date(`31 Oct ${new Date().getFullYear()}`)}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateRangeInlineShowCurrentYear

data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_show_current_year.md

@@ -0,0 +1 @@
+By default, the Date Range Inline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here. 

data/app/pb_kits/playbook/pb_date_range_inline/docs/_description.md

@@ -1 +1 @@
-Use to display a date range. Year will not show if it is the current year.
+Use to display a date range.

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

@@ -2,11 +2,12 @@ examples:
   
   rails:
   - date_range_inline_default: Default
-  
+  - date_range_inline_show_current_year: Show Current Year
   
   react:
   - date_range_inline_default: Default
-
+  - date_range_inline_show_current_year: Show Current Year
+  
   swift:
   - date_range_inline_default_swift: Default
   - date_range_inline_props_swift: ""

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

@@ -1 +1,2 @@
 export { default as DateRangeInlineDefault } from './_date_range_inline_default.jsx'
+export { default as DateRangeInlineShowCurrentYear } from './_date_range_inline_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("date_stacked", props: {
+  date: DateTime.now,
+  show_current_year: true
+}) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: {
+  date: DateTime.now,
+  show_current_year: true,
+  size: "md"
+}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/{_date_stacked_not_current_year.jsx → _date_stacked_current_year.jsx}

@@ -1,12 +1,13 @@
 import React from 'react'
 import DateStacked from '../_date_stacked'
 
-const DateStackedNotCurrentYear = (props) => {
+const DateStackedCurrentYear = (props) => {
   return (
     <div>
 
       <DateStacked
-          date={new Date('20 Mar 2018')}
+          date={new Date()}
+          showCurrentYear
           size="sm"
           {...props}
       />
@@ -14,13 +15,13 @@ const DateStackedNotCurrentYear = (props) => {
       <br />
 
       <DateStacked
-          date={new Date('20 Mar 2018')}
+          date={new Date()}
+          showCurrentYear
           size="md"
           {...props}
       />
-
     </div>
   )
 }
 
-export default DateStackedNotCurrentYear
+export default DateStackedCurrentYear

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_current_year.md

@@ -0,0 +1 @@
+By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting `showCurrentYear`/`show_current_year` to true as shown here.

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb

@@ -2,4 +2,4 @@
 
 <br>
 
-<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>
+<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -15,7 +15,7 @@ const DateStackedDefault = (props) => {
       <br />
 
       <DateStacked
-          date={new Date()}
+          date={new Date('20 Mar 2018')}
           size="md"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_stacked/docs/_description.md

@@ -1 +1 @@
-Use to display the date, stacking month and day. Year will not show if it is the current year.
+Use to display the date, stacking month and day.

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

@@ -2,7 +2,7 @@ examples:
 
   rails:
   - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
@@ -11,7 +11,7 @@ examples:
 
   react:
   - date_stacked_default: Default
-  - date_stacked_not_current_year: Not Current Year
+  - date_stacked_current_year: Show Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_bold: Bold

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

@@ -1,6 +1,6 @@
 export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
-export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
+export { default as DateStackedCurrentYear } from './_date_stacked_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -15,6 +15,7 @@ const FlexItemExample = (props) => {
         <FlexItem
             displayFlex
             gap="xs"
+            htmlOptions={{style: {padding:"2px"}}}
             {...props}
         >
           <FlexItem>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Subtle Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>
+<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Bold Variant" }) %>
+<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
+  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx

@@ -0,0 +1,113 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import Caption from '../../pb_caption/_caption'
+
+const HorizontalNavDisabled = (props) => {
+  return (
+    <>
+    <Caption marginBottom="sm">Default Variant</Caption>
+    <Nav
+        link="#"
+        orientation="horizontal"
+        {...props}
+    >
+      <NavItem
+          link="#"
+          text="About"
+          {...props}
+      />
+      <NavItem
+          active
+          link="#"
+          text="Case Studies"
+          {...props}
+      />
+      <NavItem
+          disabled
+          link="#"
+          text="Service"
+          {...props}
+      />
+      <NavItem
+          link="#"
+          text="Contacts"
+          {...props}
+      />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Subtle Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="subtle"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+      <Caption  
+          marginBottom="sm" 
+          marginTop="lg"
+      >
+        Bold Variant
+      </Caption>
+      <Nav
+          link="#"
+          orientation="horizontal"
+          variant="bold"
+          {...props}
+      >
+        <NavItem
+            link="#"
+            text="About"
+            {...props}
+        />
+        <NavItem
+            active
+            link="#"
+            text="Case Studies"
+            {...props}
+        />
+        <NavItem
+            disabled
+            link="#"
+            text="Service"
+            {...props}
+        />
+        <NavItem
+            link="#"
+            text="Contacts"
+            {...props}
+        />
+      </Nav>
+    </>
+  )
+}
+
+export default HorizontalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md

@@ -0,0 +1 @@
+Use the `disabled` prop on a `navItem`/`nav_item` within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb

@@ -0,0 +1,30 @@
+<%= pb_rails("flex", props: { justify: "between" }) do %>
+  <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
+    <%= pb_rails("nav") do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "subtle"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
+    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
+    <%= pb_rails("nav", props:{variant: "bold"}) do %>
+      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
+      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
+      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
+    <% end %>
+  <% end %>
+  
+<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx

@@ -0,0 +1,117 @@
+import React from 'react'
+
+import Nav from '../_nav'
+import NavItem from '../_item'
+import Caption from '../../pb_caption/_caption'
+import Flex from '../../pb_flex/_flex'
+
+const VerticalNavDisabled = (props) => {
+  return (
+    <Flex justify="between" 
+        wrap
+    >
+        <Flex orientation="column">
+            <Caption marginBottom="sm">Default Variant</Caption>
+            <Nav
+                link="#"
+                {...props}
+            >
+            <NavItem
+                link="#"
+                text="About"
+                {...props}
+            />
+            <NavItem
+                active
+                link="#"
+                text="Case Studies"
+                {...props}
+            />
+            <NavItem
+                disabled
+                link="#"
+                text="Service"
+                {...props}
+            />
+            <NavItem
+                link="#"
+                text="Contacts"
+                {...props}
+            />
+            </Nav>
+        </Flex>
+        <Flex orientation="column">
+            <Caption  
+                marginBottom="sm" 
+            >
+                Subtle Variant
+            </Caption>
+            <Nav
+                link="#"
+                variant="subtle"
+                {...props}
+            >
+            <NavItem
+                link="#"
+                text="About"
+                {...props}
+            />
+            <NavItem
+                active
+                link="#"
+                text="Case Studies"
+                {...props}
+            />
+            <NavItem
+                disabled
+                link="#"
+                text="Service"
+                {...props}
+            />
+            <NavItem
+                link="#"
+                text="Contacts"
+                {...props}
+            />
+            </Nav>
+        </Flex>
+        <Flex orientation="column">
+            <Caption  
+                marginBottom="sm" 
+            >
+                Bold Variant
+            </Caption>
+            <Nav
+                link="#"
+                variant="bold"
+                {...props}
+            >
+                <NavItem
+                    link="#"
+                    text="About"
+                    {...props}
+                />
+                <NavItem
+                    active
+                    link="#"
+                    text="Case Studies"
+                    {...props}
+                />
+                <NavItem
+                    disabled
+                    link="#"
+                    text="Service"
+                    {...props}
+                />
+                <NavItem
+                    link="#"
+                    text="Contacts"
+                    {...props}
+                />
+            </Nav>
+        </Flex>
+    </Flex>
+  )
+}
+
+export default VerticalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md

@@ -0,0 +1 @@
+Use the `disabled` prop on a `navItem`/`nav_item` within a vertical nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

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

@@ -18,6 +18,8 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
+  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
+  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
@@ -44,6 +46,8 @@ examples:
   - subtle_horizontal_nav: Subtle Horizontal Nav
   - bold_horizontal_nav: Bold Horizontal Nav
   - horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
+  - horizontal_nav_disabled: Horizontal Nav With Disabled Item
+  - vertical_nav_disabled: Vertical Nav With Disabled Item
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab

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

@@ -20,4 +20,6 @@ export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
 export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
 export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
 export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
-export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
+export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
+export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'

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

@@ -0,0 +1,7 @@
+The Rails RichTextEditor is a React-Rendered-Rails component that uses [Tiptap](https://tiptap.dev/) and requires the following packages to be installed in your project:
+
+- `@tiptap/react`
+- `@tiptap/starter-kit`
+- `@tiptap/extension-link`
+
+Once installed, the editor is initialized automatically when you use the component. Unlike the [React Advanced RichTextEditor](https://playbook.powerapp.cloud/kits/rich_text_editor/react#advanced-default) variant, [custom extensions](https://playbook.powerapp.cloud/kits/rich_text_editor/react#advanced-extra-extensions) are not currently supported. The doc examples below showcase some preset prop-enabled Rails RichTextEditor customizations.

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

@@ -1,3 +1,11 @@
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>
+<%= pb_rails("rich_text_editor", props: {
+    id: "focus-editor-1",
+    focus: true,
+    value: "Click inside to see the toolbar. Click outside to hide it."
+}) %>
 <br>
-<%= pb_rails("rich_text_editor", props: {focus: true}) %>
+<%= pb_rails("rich_text_editor", props: {
+    id: "focus-editor-2",
+    focus: true,
+    value: "When the optional focus prop is set to true, the toolbar will only show once you click in to the RichTextEditor."
+}) %>

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

@@ -0,0 +1 @@
+When the optional `inline` prop is set to true, the editor borders and the toolbar will only be visible when hovered or focused on. 

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

@@ -1,30 +1,38 @@
+<%= pb_rails("rich_text_editor", props: { 
+  id: "content-preview-editor",
+  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: "preview-button", text: "Preview Output", variant: "secondary" }) %>
 
-<%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
   <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
-   <div id="content-preview" class="trix-content">
+   <div id="content-preview" class="tiptap-content">
    </div>
   <% end %>
 </div>
-<%= pb_rails("button", props: { id: "preview-button", variant: "secondary", margin_top: "md" }) do %>
-  <span>Preview Output</span>
-<% end %>
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     function handleButtonClick() {
+      // 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":"content-preview-editor"'))
 
-      const editorElement = editorContainer?.querySelector('trix-editor')
-      const inputId = editorElement?.getAttribute('input')
-      const inputElement = inputId && document.getElementById(inputId)
-      
-      const editorContent = inputElement?.value || '' 
+      if (!editorContainer) {
+        console.log('Editor container not found')
+        return
+      }
+
+      // Find the TipTap editor content
+      const tiptapEditor = editorContainer.querySelector('.ProseMirror')
       const previewArea = document.getElementById('content-preview')
       const cardDiv = document.getElementById('card-obfuscation')
 
-      if (previewArea && cardDiv) {
+      if (tiptapEditor && previewArea && cardDiv) {
+        // Get the HTML content from the TipTap editor
+        const editorContent = tiptapEditor.innerHTML || ''
         previewArea.innerHTML = editorContent 
         cardDiv.style.display = 'block'
       }

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

@@ -1 +1,5 @@
-<%= pb_rails("rich_text_editor", props: {simple: true, id: "simple"}) %>
+<%= pb_rails("rich_text_editor", props: {
+    id: "simple-editor",
+    simple: true,
+    value: "Add your text here. Use the simple toolbar above to format your text." 
+}) %>