playbook_ui 12.16.0.pre.alpha.lightboxcurrentphotoprop531 → 12.16.0.pre.alpha.tiptaptestingpart1528

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: accf792d3ae05665b499210171ab0a2401b7d89109b53f18904bbb23a73a7d5a
-  data.tar.gz: 5d2ceb2031b2a4fcc38245e5584dcd94da4a97b61a5eb6fe4324163a91938b30
+  metadata.gz: 4341c04235a54ee87163dc70611a3316292d39b9b1fdfbd18f2071918b5b52ba
+  data.tar.gz: 43730de1e579c36b56dd7d18683a22143170392ea4901b424d064333af087814
 SHA512:
-  metadata.gz: 1f44a2e628700f4579afa50346aa506b6a57e43ddbc50e30685b5b977f81f49c9fcfb864df1e08adc27788d487316ae475cf740f7522ebe9ceca4c829d3ac567
-  data.tar.gz: dc0ee866dd0e92ba69c8688fb331535a743d6f4f362de42ed5641d3151a5485533cbb05b6296ba665360385df839322f59d38fa76d2763a5c2a43c8fe3e1ec88
+  metadata.gz: 3eefd540b9b47832aaaef279e5b6b30557d9bd3dcad56f0f0bba654d10916bfde828daa12a9b24ce41bfa9ff4678fc0bf6484491999b5997e98e98e0edbaa152
+  data.tar.gz: 0521a6ececeaf575787632b452b9b0ea8041d176be10dcb21c1e52868115fa1c7d8bc0e3f3137f958c73600aaef3bfc34ce932b7b80b408300ab51063079791f

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -4,6 +4,7 @@ import Slides from './Slides'
 import Thumbnails from './Thumbnails'
 
 type CarouselType = {
+  initialPhoto?: string,
   onClose?: () => void,
   icon?: string,
   currentIndex: number,

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -12,11 +12,11 @@ type LightboxType = {
   aria?: {[key: string]: string},
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
-  currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
   id?: string,
   photos: [],
+  initialPhoto?: number,
   onChange?: (index: number)=> {},
   onClickRight?: () => void,
   onClose?: () => void,
@@ -31,10 +31,10 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     aria = {},
     children,
     className,
-    currentPhotoIndex,
     data = {},
     description,
     id = '',
+    initialPhoto = 0,
     photos,
     onChange = ()=>{},
     onClose,
@@ -44,15 +44,12 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     title,
   } = props
 
-  const [activePhoto, setActivePhoto] = useState(0)
+  const [activePhoto, setActivePhoto] = useState(initialPhoto)
+
   useEffect(() => {
     onChange(activePhoto)
   },[activePhoto])
 
-  useEffect(() => {
-    setActivePhoto(currentPhotoIndex)
-  },[currentPhotoIndex])
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -10,14 +10,17 @@ const LightboxCompoundComponent = (props) => {
     'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
     'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -31,6 +34,7 @@ const LightboxCompoundComponent = (props) => {
         {showLightbox ? (
           <Lightbox
               description='Description Content Goes Here.'
+              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               title='Windows, Sidings, & Gutters'

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -10,14 +10,17 @@ const LightboxCustomHeader = (props) => {
     "https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
     "https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
   ];
+  const [selectedPhoto, setSelectedPhoto] = useState(0);
   const [showLightbox, toggleShowLightbox] = useState(false);
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(null);
   };
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleShowLightbox(!showLightbox);
+    setSelectedPhoto(photo);
   };
 
   const exampleStyles = {
@@ -52,6 +55,7 @@ const LightboxCustomHeader = (props) => {
       {showLightbox ? (
           <Lightbox
               description={customDescription}
+              initialPhoto={selectedPhoto}
               navRight="All Photos"
               onClickRight={()=> alert("Clicked!")}
               onClose={handleCloseLightbox}

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -8,14 +8,17 @@ const LightboxDefault = (props) => {
   const photos = [
     'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [showLightbox, toggleShowLightbox] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photoIndex) => {
     toggleShowLightbox(!showLightbox)
+    setSelectedPhoto(photoIndex)
   }
 
   return (
@@ -24,6 +27,7 @@ const LightboxDefault = (props) => {
         {showLightbox ? (
           <Lightbox
               icon="times"
+              initialPhoto={selectedPhoto}
               onClose={handleCloseLightbox}
               photos={photos}
               {...props}

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md

@@ -1 +1 @@
-Lightbox contains several props: `photos` (an array of urls), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
+Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -29,14 +29,17 @@ const LightboxMultiple = (props) => {
     'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
     'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
   ]
+  const [selectedPhoto, setSelectedPhoto] = useState(0)
   const [light, toggleLight] = useState(false)
 
   const handleCloseLightbox = () => {
     toggleLight(!light)
+    setSelectedPhoto(null)
   }
 
-  const onPhotoClick = () => {
+  const onPhotoClick = (photo) => {
     toggleLight(!light)
+    setSelectedPhoto(photo)
   }
 
   const exampleStyles = {
@@ -49,6 +52,7 @@ const LightboxMultiple = (props) => {
       {light ? (
         <Lightbox
             icon="times"
+            initialPhoto={selectedPhoto}
             onChange={(index) => console.log(`current photo index: ${index}`)}
             onClose={handleCloseLightbox}
             photos={photos}

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

@@ -5,4 +5,3 @@ examples:
   - lightbox_multiple: Multiple
   - lightbox_compound_component: Compound Component
   - lightbox_custom_header: Custom Header
-  - lightbox_current_photo: Current Photo

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

@@ -2,4 +2,3 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
 export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
 export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
 export { default as LightboxCustomHeader } from './_lightbox_custom_header'
-export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -18,6 +18,7 @@ test('Kit renders', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -34,6 +35,7 @@ test('Shows selected images', () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={1}
         onClose={() => {}}
         photos={TEST_PHOTOS}
     />
@@ -41,7 +43,7 @@ test('Shows selected images', () => {
   const kit = screen.getByTestId(testId)
   const slide = kit.getElementsByClassName('Slide')[0]
   const image = slide.getElementsByTagName('img')[0]
-  expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
+  expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
 
   const thumbnails = kit.getElementsByClassName('Thumbnail')
 
@@ -75,6 +77,7 @@ test('Closes on escape key', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />
@@ -103,6 +106,7 @@ test('Closes on close button', async () => {
         data={{ testid: testId }}
         icon="close"
         id="test1"
+        initialPhoto={0}
         onClose={mockClose}
         photos={TEST_PHOTOS}
     />

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 import Image from '../pb_image/_image'
@@ -13,15 +13,15 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode,
   className?: string,
   data?: object,
-  iconLeft: string,
-  iconRight: string,
+  iconLeft?: string,
+  iconRight?: string,
   id?: string,
-  imageUrl: string,
-  link: string,
+  imageUrl?: string,
+  link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   target?: '_blank' | '_self' | '_parent' | '_top',
   text: string,
-}
+} & GlobalProps
 
 const NavItem = (props: NavItemProps) => {
   const {

data/app/pb_kits/playbook/pb_nav/_nav.tsx

@@ -17,8 +17,8 @@ type NavProps = {
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link: string,
-  title: string,
+  link?: string,
+  title?: string,
   variant?: "normal" | "subtle",
 }
 

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

@@ -0,0 +1,49 @@
+import React from "react";
+
+import Icon from "../../pb_icon/_icon";
+import Flex from "../../pb_flex/_flex";
+import Tooltip from "../../pb_tooltip/_tooltip";
+
+
+type EditorButtonProps = {
+  classname?: string,
+  onclick?: () => {} | void,
+  icon?: string;
+  text?: string;
+  disable?: boolean
+};
+
+const EditorButton = ({
+  classname,
+  disable,
+  onclick,
+  icon,
+  text,
+}: EditorButtonProps) => {
+  return (
+    <Tooltip 
+      delay={{
+        open: 2000
+      }}
+      interaction 
+      placement="top" 
+      text={text}
+    >
+      <button
+        className={classname}
+        onClick={onclick}
+        disabled={disable}
+      >
+        <Flex 
+          align="center"
+          className="toolbar_button_icon"
+          justify="center"
+        >
+          <Icon icon={icon} size="lg" />
+        </Flex>
+      </button>
+    </Tooltip>
+  );
+};
+
+export default EditorButton

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts

@@ -0,0 +1,9 @@
+export type ToolbarTypes = {
+    node?: string,
+    icon?: string,
+    isActive?: any,
+    text?: string,
+    onclick?: () => {}
+    classname?: string
+    disable?: boolean
+}

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

@@ -0,0 +1,62 @@
+import React from "react";
+import Background from "../../pb_background/_background";
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+import SectionSeparator from "../../pb_section_separator/_section_separator";
+
+import  EditorButton  from "./EditorButton";
+import ToolbarDropdown from "./ToolbarDropdown";
+import ToolbarNodes from "./ToolbarNodes";
+import { ToolbarTypes } from "./EditorTypes";
+import ToolbarHistoryItems from "./ToolbarHistory";
+
+const EditorToolbar = ({ editor }:any) => {
+  const toolbaritems = [
+    {
+        icon: "bold",
+        text: "Bold",
+        classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
+        onclick:()=>editor.chain().focus().toggleBold().run(),
+    },
+    {
+        icon: "italic",
+        text: "Italic",
+        classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
+        onclick:() => editor.chain().focus().toggleItalic().run(),
+    },
+    {
+        icon: "strikethrough",
+        text: "Strikethrough",
+        classname:`toolbar_button ${editor.isActive('strike') ? 'is-active' : ''}`,
+        onclick:() => editor.chain().focus().toggleStrike().run(),
+    },
+  ]
+
+  return (
+    <Background backgroundColor="white" className="toolbar">
+      <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
+        <FlexItem className="toolbar_block" displayFlex>
+          <ToolbarDropdown editor={editor}/>
+          <SectionSeparator orientation="vertical" />
+            {toolbaritems && toolbaritems.map(
+              ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
+                <EditorButton
+                  classname={classname}
+                  icon={icon}
+                  key={index}
+                  text={text}
+                  onclick={onclick}
+                />
+              )
+            )}
+            <SectionSeparator orientation="vertical" />
+            <ToolbarNodes editor={editor} />
+        </FlexItem>
+        <ToolbarHistoryItems editor={editor} />
+      </Flex>
+      {/* <SectionSeparator /> */}
+    </Background>
+  );
+};
+
+export default EditorToolbar

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

@@ -0,0 +1,128 @@
+import React, { useState } from 'react'
+
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
+import Button from '../../pb_button/_button'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+import { ToolbarTypes } from './EditorTypes'
+
+const ToolbarDropdown = ({editor}: any) => {
+  const [showPopover, setShowPopover] = useState(false)
+  const [activeItem, setActiveItem] = useState({text: "Paragraph", icon: "paragraph"})
+
+const toolbarDropdownItems = [
+    {
+        node: "paragraph",
+        icon: "paragraph",
+        isActive: editor.isActive("paragraph"),
+        text: "Paragraph",
+        onclick: () => editor.chain().focus().setParagraph().run(),
+    },
+    {
+        node: "heading-1",
+        icon: "h1",
+        isActive: editor.isActive("heading", {level: 1}),
+        text: "Heading 1",
+        onclick: () => editor.chain().focus().toggleHeading({level:1}).run(),
+    },
+    {
+        node: "heading-2",
+        icon: "h2",
+        isActive: editor.isActive("heading", {level: 2}),
+        text: "Heading 2",
+        onclick: () => editor.chain().focus().toggleHeading({level:2}).run(),
+    },
+    {
+        node: "heading-3",
+        icon: "h3",
+        isActive: editor.isActive("heading", {level: 3}),
+        text: "Heading 3",
+        onclick: () => editor.chain().focus().toggleHeading({level:3}).run(),
+    },
+    {
+        node: "bulletList",
+        icon: "list",
+        isActive: editor.isActive("bulletList"),
+        text: "Bullet List",
+        onclick: () => editor.chain().focus().toggleBulletList().run(),
+    },
+    {
+        node: "orderedList",
+        icon: "list-ol",
+        isActive: editor.isActive("orderedList"),
+        text: "Ordered List",
+        onclick: () =>   editor.chain().focus().toggleOrderedList().run()
+        ,
+    },
+    {
+        node: "blockquote",
+        icon: "block-quote",
+        isActive: editor.isActive("blockquote"),
+        text: "Block Quote",
+        onclick: () => editor.chain().focus().toggleBlockquote().run(),
+    },
+]
+
+
+  const handleTogglePopover = () => {
+    setShowPopover(true)
+  }
+
+  const handlePopoverClose = (shouldClosePopover: boolean) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+  const popoverReference = (
+    <Button className="editor-dropdown-button"
+        onClick={handleTogglePopover}
+        variant="secondary"
+    >
+      <Flex align="center"
+            key={activeItem ? activeItem.icon : toolbarDropdownItems[0].icon}
+            gap="xs"
+      >
+        <Icon icon={activeItem ? activeItem.icon : toolbarDropdownItems[0].icon} size='lg'/>
+        {activeItem.text}
+        <Flex
+            className={showPopover ? "fa-flip-vertical" : ""}
+            display="inline_flex"
+        >
+          <Icon 
+              fixedWidth 
+              icon="angle-down" 
+              margin-left="xs" 
+          />
+        </Flex>
+      </Flex>
+    </Button>
+  )
+
+  return (
+      <PbReactPopover
+          closeOnClick='outside'
+          padding='none'
+          placement="bottom"
+          reference={popoverReference}
+          shouldClosePopover={handlePopoverClose}
+          show={showPopover}
+      >
+        <Nav variant="subtle">
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
+            <NavItem
+              cursor="pointer"
+              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "active" : ""}`}
+              iconLeft={icon}
+              key={`${text}_${index}`}
+              onClick={()=> {onclick(); setShowPopover(false); setActiveItem({text:text, icon:icon})}}
+              text={text}
+            />
+          ))}
+        </Nav>
+      </PbReactPopover>
+  )
+}
+
+export default ToolbarDropdown

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

@@ -0,0 +1,45 @@
+import React from "react";
+import FlexItem from "../../pb_flex/_flex_item";
+import EditorButton from "./EditorButton";
+import { ToolbarTypes } from "./EditorTypes";
+
+const ToolbarHistoryItems = ({editor}:any) => {
+
+const toolbarHistoryItems = [
+    {
+        classname: `toolbar_button`,
+        icon: "undo",
+        text: "Undo",
+        onclick: () => editor.chain().focus().undo().run(),
+        disable: !editor.can().chain().focus().undo().run()
+    },
+    {
+        classname: `toolbar_button`,
+        icon: "redo",
+        text: "Redo",
+        onclick: () => editor.chain().focus().redo().run(),
+        disable: !editor.can().chain().focus().redo().run()
+    },
+];
+
+    return (
+    <>
+    <FlexItem displayFlex>
+          {toolbarHistoryItems.map(
+            ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
+              <EditorButton
+                classname={classname}
+                onclick={onclick}
+                disable={disable}
+                icon={icon}
+                key={index}
+                text={text}
+              />
+            )
+          )}
+        </FlexItem>
+    </>
+    )
+}
+
+export default ToolbarHistoryItems

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

@@ -0,0 +1,59 @@
+import React, {useCallback} from "react";
+import EditorButton from "./EditorButton";
+import { ToolbarTypes } from "./EditorTypes";
+
+const ToolbarNodes = ({editor}:any) => {
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+const setLink = useCallback(() => {
+  const previousUrl = editor.getAttributes("link").href;
+  const url = window.prompt("URL", previousUrl);
+
+  // cancelled
+  if (url === null) {
+    return;
+  }
+
+  // empty
+  if (url === "") {
+    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+
+    return;
+  }
+
+  // update link
+  editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+}, [editor]);
+
+const toolbarNodesItems = [
+        {
+          onclick: () => editor.chain().focus().toggleCodeBlock().run(),
+          icon: "code",
+          isActive: editor.isActive("codeBlock"),
+          text: "Codeblock",
+        },
+        {
+          onclick: setLink,
+          icon: "link",
+          isActive: editor.isActive("link"),
+          text: "Link",
+        },
+      ];
+
+return (
+    <>
+        {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
+            <EditorButton
+            classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
+            onclick={onclick}
+            icon={icon}
+            key={index}
+            text={text}
+            />
+        ))}
+   </>
+    )
+}
+
+
+export default ToolbarNodes

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

@@ -8,7 +8,7 @@
 @import "../tokens/transition";
 @import "../pb_icon/icon";
 @import "./trix_styles";
-
+@import "./tiptap_styles";
 
 .trix-content pre {
   display: inline-block;

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

@@ -14,6 +14,7 @@ try {
 } catch (_e) { /* do nothing */ }
 
 import { TrixEditor } from "react-trix"
+import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
   attributeIsActive?: Function,
@@ -27,7 +28,9 @@ type Editor = {
 
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
+  advancedEditor?: any,
   toolbarBottom?: Boolean,
+  children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
@@ -45,7 +48,9 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    advancedEditor,
     toolbarBottom = false,
+    children,
     className,
     data = {},
     focus = false,
@@ -152,15 +157,24 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       {...dataProps}
       className={css}
     >
-      <TrixEditor
-        className=""
-        fileParamName={name}
-        mergeTags={[]}
-        onChange={onChange}
-        onEditorReady={handleOnEditorReady}
-        placeholder={placeholder}
-        value={value}
-      />
+      {
+        advancedEditor ? (
+          <div>
+          <EditorToolbar editor={advancedEditor}/>
+          { children }
+          </div>
+        ) : (
+          <TrixEditor
+              className=""
+              fileParamName={name}
+              mergeTags={[]}
+              onChange={onChange}
+              onEditorReady={handleOnEditorReady}
+              placeholder={placeholder}
+              value={value}
+          />
+        )
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss

@@ -0,0 +1,192 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/titles";
+@import "../tokens/line_height";
+@import "../tokens/typography";
+@import "../tokens/shadows";
+@import "../tokens/transition";
+
+[class^="pb_rich_text_editor_kit"] {
+  .toolbar_button {
+    display: flex;
+    align-items: center;
+    background: $transparent;
+    border: none;
+    border-radius: $border_rad_heaviest;
+    color: $text_lt_light;
+    cursor: pointer;
+    &_icon {
+      width: $space_xl + 2;
+      height: $space_xl + 2;
+    }
+    &.open {
+      color: $primary;
+    }
+    &.active,
+    &:active {
+      color: $primary;
+      background-color: $bg_light;
+    }
+    &:hover:not([disabled]) {
+      background-color: $neutral_subtle;
+    }
+    &:disabled {
+      .pb_icon_kit {
+        color: $border_light;
+      }
+    }
+    &:focus-visible {
+      outline: none !important;
+    }
+  }
+
+  .toolbar {
+    border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
+    border: 1px solid $border_light;
+    overflow-x: auto;
+    &_block {
+      gap: $space_xs;
+    }
+    .editor-dropdown-button {
+      background: transparent;
+      border: none;
+      color: $text_lt_light;
+      cursor: pointer;
+      font-weight: $light;
+      padding: ($space_xs - 1) 0px;
+      width: $space_xl * 3;
+    }
+  }
+
+  .ProseMirror {
+    background: $white;
+    border: 1px solid $border_light;
+    border-top-color: transparent;
+    border-bottom-right-radius: $border_rad_heaviest;
+    border-bottom-left-radius: $border_rad_heaviest;
+    height: 100%;
+    padding: 1rem 1.5rem 1.5rem 1.5rem;
+    line-height: $lh_loose;
+    :first-child {
+      margin-top: 0;
+    }
+
+    h4,
+    h5,
+    h6,
+    ul,
+    ol,
+    blockquote,
+    p {
+      margin: 1rem 0 0 0;
+    }
+
+    code {
+      font-family: monospace;
+      background: $bg_light;
+      padding: 0.1rem 0.3rem;
+      margin: 0 5px;
+      box-shadow: 0 2px 10px $shadow;
+      border-radius: 0.25rem;
+      overflow: hidden;
+      font-size: ($text_small - 1px);
+    }
+
+    pre {
+      background: $bg_dark;
+      padding: $space_sm;
+      border-radius: $border_rad_heaviest;
+      margin: 1.5rem 0 2rem 0;
+      code {
+        background: transparent;
+        box-shadow: none;
+        border: 0;
+        color: #faf6e4;
+      }
+    }
+    a {
+      color: $primary;
+      border-bottom: 1px solid $primary;
+      &:hover {
+        color: $text_lt_default;
+        border-bottom: 1px solid $text_lt_default;
+      }
+    }
+    blockquote {
+      font-size: $font_larger;
+      padding: $space_sm $space_md;
+      font-style: italic;
+      p {
+        margin: 0;
+      }
+    }
+    &:focus-visible {
+      outline: unset;
+      border-color: $primary;
+      @include transition_default;
+    }
+    h1 {
+      font-size: $text_larger;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 2.1rem 0 0 0;
+    }
+    h2 {
+      font-size: $text_larger;
+      line-height: $text_larger;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.9rem 0 0 0;
+    }
+    h3 {
+      font-size: $text_large;
+      line-height: $text_large;
+      font-weight: $bolder;
+      letter-spacing: $lspace_tight;
+      margin: 1.7rem 0 0 0;
+    }
+    h4,
+    h5,
+    h6 {
+      font-size: $text_base;
+      line-height: $text_base;
+      letter-spacing: $lspace_tight;
+      font-weight: $bolder;
+    }
+    hr {
+      margin: 2.2rem 0;
+      box-sizing: content-box;
+      overflow: hidden;
+      background: transparent;
+      border-bottom: 1px solid $transparent;
+      height: 1px;
+      padding: 0;
+      background-color: $border_light;
+      border: 0;
+    }
+    ol {
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      list-style: decimal;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
+    }
+    ul {
+      list-style-position: disc;
+      margin: 1rem 0 0 0;
+      padding-left: $space_md;
+      li {
+        margin: 2px 0;
+        p {
+          margin: 0;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+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'
+
+
+const RichTextEditorAdvancedDefault = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+      
+
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedDefault

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

@@ -13,6 +13,7 @@ examples:
 
   react:
   - rich_text_editor_default: Default
+  - rich_text_editor_advanced_default: Advanced Default
   - 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,3 +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'

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.16.0"
-  VERSION = "12.16.0.pre.alpha.lightboxcurrentphotoprop531"
+  VERSION = "12.16.0.pre.alpha.tiptaptestingpart1528"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.16.0.pre.alpha.lightboxcurrentphotoprop531
+  version: 12.16.0.pre.alpha.tiptaptestingpart1528
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-04-25 00:00:00.000000000 Z
+date: 2023-04-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1332,8 +1332,6 @@ files:
 - app/pb_kits/playbook/pb_lightbox/docs/_description.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -1719,9 +1717,17 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.html.erb
 - app/pb_kits/playbook/pb_radio/radio.rb
 - 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/Toolbar.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx
+- app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,121 +0,0 @@
-/* @flow */
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
-import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from '../../'
-import Lightbox from '../_lightbox.tsx'
-
-const LightboxCurrentPhoto = (props) => {
-  const photos = [
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-  ]
-  const [light, toggleLight] = useState(false)
-  //Setting state with the index of the current slide exposed by the onChange prop
-  const [active, setActive] = useState(0)
-  //Setting state for the current photo to pass to the kit
-  const [currentPhoto, setCurrentPhoto] = useState(active)
-
-  const handleCloseLightbox = () => {
-    toggleLight(!light)
-  }
-
-  const onPhotoClick = () => {
-    toggleLight(!light)
-  }
-
-  const exampleStyles = {
-    width: "100%",
-    overflow: "auto"
-  }
-
-  return (
-    <div className="lightbox_doc_example_custom">
-      {light ? (
-        <>
-          <Flex alignItems="center" 
-              className='custom_lightbox_sidebar'
-              justifyContent="center"
-          >
-            <Flex margin='lg'
-                orientation='column'
-            >
-              <Body marginBottom='md'>
-                This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
-              </Body>
-              <FlexItem alignSelf="center">
-                <Flex justifyContent="center">
-                  <Button 
-                      onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
-                  >
-                    Back
-                  </Button>
-                  <Button marginLeft='sm'
-                      onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
-                  >
-                    Next
-                  </Button>
-                </Flex>
-              </FlexItem>
-            </Flex>
-          </Flex>
-          <Lightbox
-              currentPhotoIndex={currentPhoto}
-              icon="times"
-              onChange={(index) => setActive(index)}
-              onClose={handleCloseLightbox}
-              photos={photos}
-              {...props}
-          />
-        </>
-      ) : (
-        <div
-            className="PhotoViewer"
-            style={exampleStyles}
-        >
-          <Flex>
-            {photos.map((photo, index) => {
-              return (
-                <div
-                    key={index}
-                    onClick={() => onPhotoClick(index)}
-                >
-                  <Image
-                      cursor="pointer"
-                      marginRight="xl"
-                      rounded
-                      size="lg"
-                      url={photo}
-                  />
-
-                  <div className="overlay" />
-                </div>
-              )
-            })}
-          </Flex>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default LightboxCurrentPhoto

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md

@@ -1 +0,0 @@
-The `currentPhotoIndex` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop.