playbook_ui 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680 → 12.21.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9561ff1283a2c2a61fd7562e899a6c2391f1cbf95010e4365229d432904b878a
-  data.tar.gz: 8e70472802e711a1d8d304e973f1bca85a9b496c1d7af38af367e931dcf320f6
+  metadata.gz: 1649557cda106585da9087061c3e7e8017578aed64a96820b78ff08ae29b357a
+  data.tar.gz: 7969b004419abdc3a207667de30b50439a42559d00ad1c9144755074932aa2e7
 SHA512:
-  metadata.gz: 3bead3870a688c20c322c9bf534ddef966ed46e361eeded0d79b351e99640693bd9bb3f6ab5a2b2e62129145c189b5d2becc7c6fd34647f6b2485c1cc42ed077
-  data.tar.gz: f572b39bd3f17ea6619df329cd1e5986f8374b7b713e74ffab52094b45180c9f8a5a168651e909ad3d4b1af7d5097503d4dc156ab0f49c334e67b2b1c9c1c94a
+  metadata.gz: cad804b80ced6b0f966c72f7e35a02e782898b03ed8b789120ac8662f6c88c293f63f4b5cc5970916bc91aa0be3a182d42d17e365c79ca07b4f5500edf3aa348
+  data.tar.gz: f8abc54b2526773eb5bdb0244f157a23f27cda78ea88029b59261c4d58938761b0d9eaa9cadce84ea31ffafc23c9a8ff6cb5c09914dcf294b9a74664ab6bddd7

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -46,29 +46,25 @@
 
 <script>
   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)
-    })
-  }
+  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)
-    })
-  }
+  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/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -9,9 +9,8 @@ import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
-import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor, extensions }:any) => {
+const EditorToolbar = ({ editor }:any) => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -52,17 +51,10 @@ const EditorToolbar = ({ editor, extensions }:any) => {
             )}
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
-            {
-          extensions && (
-            <>
-            <MoreExtensionsDropdown extensions={extensions}/>
-            </>
-          )
-        }
-
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
       </Flex>
+      {/* <SectionSeparator /> */}
     </Background>
   );
 };

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -98,17 +98,7 @@ const popoverReference = (
        activeCount === 2 ? (
         activeItems[1]
        ) : (
-        activeCount === 1 ? (
         activeItems[0] || null
-        ) : (
-          <Flex align="center" key="paragraph" gap="xs">
-            <Icon icon="paragraph" size="lg" />
-            <div>Paragraph</div>
-            <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
-              <Icon fixedWidth icon="angle-down" margin-left="xs" />
-            </Flex>
-          </Flex>
-        )
        )
     }
   </Button>

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

@@ -35,8 +35,7 @@ type RichTextEditorProps = {
   data?: { [key: string]: string },
   focus?: boolean,
   id?: string,
-  inline?: boolean, 
-  extensions?: { [key: string]: string }[],
+  inline?: boolean,
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
@@ -57,7 +56,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     data = {},
     focus = false,
     inline = false,
-    extensions,
     name,
     onChange = noop,
     placeholder,
@@ -164,7 +162,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       {
         advancedEditor ? (
           <div className='pb_rich_text_editor_advanced_container'>
-          <EditorToolbar extensions={extensions} editor={advancedEditor}/>
+          <EditorToolbar editor={advancedEditor}/>
           { children }
           </div>
         ) : (

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

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

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.21.0"
-  VERSION = "12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680"
+  PREVIOUS_VERSION = "12.20.0"
+  VERSION = "12.21.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.21.0.pre.alpha.PLAY807RTEcustomtoolbar680
+  version: 12.21.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-05-18 00:00:00.000000000 Z
+date: 2023-05-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1721,7 +1721,6 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts
-- app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
@@ -1741,8 +1740,6 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
@@ -2490,7 +2487,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2501,12 +2498,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx

@@ -1,69 +0,0 @@
-import React, { useState } from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
-import Icon from '../../pb_icon/_icon'
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
-
-const MoreExtensionsDropdown = ({extensions}: any) => {
-  const [showPopover, setShowPopover] = useState(false)
-
-  const handleTogglePopover = () => {
-    setShowPopover(true)
-  }
-
-  const handlePopoverClose = (shouldClosePopover: boolean) => {
-    setShowPopover(!shouldClosePopover)
-  }
-
-
-const popoverReference = (
-    <button
-    className="toolbar_button"
-    onClick={handleTogglePopover}
-  >
-    <Flex 
-      align="center"
-      className="toolbar_button_icon"
-      justify="center"
-    >
-      <Icon icon="ellipsis" size="lg" />
-    </Flex>
-  </button>
-
-);
-
-  return (
-      <PbReactPopover
-          closeOnClick='outside'
-          padding='none'
-          placement="bottom"
-          reference={popoverReference}
-          shouldClosePopover={handlePopoverClose}
-          show={showPopover}
-      >
-        <Nav 
-          paddingTop={extensions.length > 1 ? "xs" : "none"}
-          paddingBottom={extensions.length > 1 ? "xs" : "none"} 
-          variant="subtle"
-        >
-          {extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => ( 
-            <NavItem
-              cursor="pointer"
-              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
-              iconLeft={icon}
-               key={`${text}_${index}`}
-              margin='none'
-              onClick={()=> {onclick(); setShowPopover(false)}}
-              text={text}
-              paddingTop='xxs'
-              paddingBottom='xxs'
-            />
-        ))}
-        </Nav>
-      </PbReactPopover>
-  )
-}
-
-export default MoreExtensionsDropdown

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

@@ -1,55 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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.