playbook_ui_docs 12.20.0.pre.alpha.movemarkdown668 → 12.23.0.pre.alpha.movemarkdown708

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef42dd99e654b47a91a0428f661f08a594c630c6cae4f37dd3a202c13c5e86c8
-  data.tar.gz: ea3efaebf0f722fd6102da5105e34dff222a9b5628197b3f1dd0ea973b052aa0
+  metadata.gz: e471b0bebeb846befc1526d396e41f109b93d8c3847cc43de0f75b238a40f855
+  data.tar.gz: 24ba8ae1a3d6d837f530eadff86da7108451eff0c6ff012ff86fbd77054ccc36
 SHA512:
-  metadata.gz: 8c972e002dcaeb376f64c45c1e8ed030caa83af9ce50d088bdc429c5a32469af7a4ee37c4bdd5f0e797e8f44e1c27621f0640524fca11fc8c80d0d79b3110686
-  data.tar.gz: b97100ec760536d2f8a238b53b405c504fa12306b325fd53e57917c88712b1984cba399d2af589f813dbc4e7bb691e09584c6feaaf780396b86095841b32a62a
+  metadata.gz: 4015ff527a1cc6656de8834a6cc4e702dbe58307562653d10b26c7cdfe52f85b92b3516142c8ec1cfb52039a97fa63360071f6ac859a02ad5644360d1e7ad536
+  data.tar.gz: e26a880970de6b0dacd442f1ab058f539986336281d2e9e934fc9cd51f016e7de9f11568a4241579cdd458dcce47f5f451cdfa1492cad570fae0a30ead45a03a

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { RichTextEditor } from '../..'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+import HorizontalRule from "@tiptap/extension-horizontal-rule"
+import Highlight from '@tiptap/extension-highlight'
+
+
+const RichTextEditorMoreExtensions = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link,
+            HorizontalRule,
+            Highlight.configure({ multicolor: true })
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+  const ExtensionsList = [
+    {
+        icon: "horizontal-rule",
+        isActive: editor.isActive("horizontalRule"),
+        text: "Horizontal Rule",
+        onclick: () => editor.chain().focus().setHorizontalRule().run(),
+    },
+    {
+      icon: "highlighter",
+      isActive: editor.isActive("highlight"),
+      text: "Highlighter",
+      onclick: () => editor.chain().focus().toggleHighlight().run(),
+    }
+  ]
+
+      
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          extensions={ExtensionsList}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorMoreExtensions

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

@@ -0,0 +1,12 @@
+This variant allows you to optionally include any of [Tiptap’s 53 extensions](https://tiptap.dev/extensions) within any advanced editor by using the `extensions` prop.
+
+__NOTE__: In order to leverage this prop, you __must__ install the extension you need in your project, import it and pass it to the extensions array as shown in this example with the HorizontalRule and the Highlight extensions. 
+
+In order to add the extension to the editor toolbar, create an array of objects (as shown in the ExtensionsList array in the example below). Each object in this array should include:
+
+`icon`: the icon to display within the toolbar dropdown (any Fontawesome icons can be used)
+`isActive`: sets the extension to active within the dropdown, when applicable
+`text`: the label within the toolbar dropdown
+`onclick`: initializes the extension when it’s clicked within the dropdown (snytax varies with extension, see Tiptap's docs for more information)
+
+This array can then be passed to the `extensions` prop and all extensions in the array will be rendered in the ellipsis dropdown. 

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

@@ -14,6 +14,7 @@ examples:
   react:
   - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
+  - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus

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

@@ -7,4 +7,5 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
 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'
+export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
+export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'

data/dist/app/components/playbook/pb_docs/kit_example.html.erb

@@ -15,31 +15,60 @@
     <div id="code-wrapper">
       <div class="pb--codeControls">
         <ul>
-          <% if type == "rails" %>
+          <% hide_button = type == "rails" ? 'flex' : 'none' %>
             <li>
-              <a href="#" id="copy-<%= example_key %>-trigger" onclick="copyOnClick(`<%= example_html %>`, `copy-<%= example_key %>`)">
-                Copy HTML
-              </a>
+            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
             </li>
-          <% end %>
           <li>
-            <a href="#" id="toggle-open" data-toggle="code_example">Code Example</a>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
+            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
           </li>
         </ul>
       </div>
       <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
         <%= pb_rails("section_separator", props: { dark: dark })%>
-        <a href="#" id="toggle-close" data-toggle="false" class="pb--close-toggle">Close</a>
+        <a href="#" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
+          <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy", padding_x: "xs" }) %>
+        </a>
         <pre class="highlight"><%= raw render_code(source, highlighter) %></pre>
       </div>
+        <%= pb_rails("popover", props: {
+          trigger_element_id: "copy-button-#{example_key}",
+          tooltip_id: "tooltip-#{example_key}",
+          offset: true,
+          position: "bottom"
+        }) do %>
+        Code Copied
+    <% end %>
     </div>
   <% end %>
 <% end %>
 
 <script>
-  function copyOnClick(content, elementID) {
-    copyContent(content)
+  var htmlButton = document.getElementById('<%= "copy-html-#{example_key}" %>')
+  if (htmlButton) {
+    htmlButton.addEventListener('click', function() {
+      var tempElement = document.createElement('div')
+      tempElement.innerHTML = `<%= example_html %>`
+      var decodedString = tempElement.textContent || tempElement.innerText;
+      copyContent(decodedString)
+    })
+  }
+
+  var button = document.getElementById('<%= "copy-button-#{example_key}" %>')
+  if (button) {
+    button.addEventListener('click', function() {
+      var tempElement = document.createElement('div')
+      tempElement.innerHTML = `<%= source %>`
+      var decodedString = tempElement.textContent || tempElement.innerText;
+      copyContent(decodedString)
+      var fadeAwayDiv = document.getElementById("<%= "tooltip-#{example_key}" %>")
+      setTimeout(function() {
+        fadeAwayDiv.classList.remove('show')
+      }, 3000)
+      setTimeout(function() {
+        fadeAwayDiv.classList.add('hide')
+      }, 3001)
+    })
   }
-  
 </script>
-   

data/dist/menu.yml

@@ -31,6 +31,7 @@ kits:
     - form
     - form_group
     - form_pill
+    - multi_level_select
     - passphrase
     - phone_number_input
     - radio
@@ -57,7 +58,6 @@ kits:
   - list
   - loading_inline
   - map
-  - multi_level_select
   - nav
   - tags:
     - badge