playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown626

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

@@ -0,0 +1,121 @@
+/* @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

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

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

@@ -5,3 +5,4 @@ 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,3 +2,4 @@ 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_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 {
@@ -87,7 +87,7 @@ const NavItem = (props: NavItemProps) => {
         <span className="pb_nav_list_item_text">
           {text || children}
         </span>
-        
+
         {iconRight &&
           <div
             className="pb_nav_list_item_icon_section"

data/app/pb_kits/playbook/pb_nav/_nav.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 Caption from '../pb_caption/_caption'
 
@@ -17,10 +17,10 @@ type NavProps = {
   id?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,
   orientation?: "vertical" | "horizontal",
-  link: string,
-  title: string,
+  link?: string,
+  title?: string,
   variant?: "normal" | "subtle",
-}
+} & GlobalProps
 
 const Nav = (props: NavProps) => {
   const {

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -44,7 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
-       letter-spacing: normal;
+      letter-spacing: normal;
     }
   }
 }

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?: string | null,
+    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,139 @@
+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 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)
+  }
+
+let activeCount = 0;
+const activeItems = [];
+
+for (const { text, isActive, icon } of toolbarDropdownItems) {
+  if (isActive) {
+    activeCount ++
+    activeItems.push(
+      <Flex align="center" key={icon} gap="xs">
+        <Icon icon={icon} size="lg" />
+        <div>{text}</div>
+        <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
+          <Icon fixedWidth icon="angle-down" margin-left="xs" />
+        </Flex>
+      </Flex>
+    );
+  }
+}
+
+const popoverReference = (
+  <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
+    {
+       activeCount === 2 ? (
+        activeItems[1]
+       ) : (
+        activeItems[0] || null
+       )
+    }
+  </Button>
+);
+
+  return (
+      <PbReactPopover
+          closeOnClick='outside'
+          padding='none'
+          placement="bottom"
+          reference={popoverReference}
+          shouldClosePopover={handlePopoverClose}
+          show={showPopover}
+      >
+        <Nav 
+          paddingTop="xs"
+          paddingBottom="xs" 
+          variant="subtle"
+        >
+          {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, 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 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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import classnames from 'classnames'
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
 
 try {
@@ -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,
@@ -40,12 +43,15 @@ type RichTextEditorProps = {
   sticky?: boolean,
   template: string,
   value?: string,
-}
+  maxWidth?: string
+} & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    advancedEditor,
     toolbarBottom = false,
+    children,
     className,
     data = {},
     focus = false,
@@ -57,6 +63,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     sticky = false,
     template = '',
     value = '',
+    maxWidth="md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -135,7 +142,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props), className)
+  let css = classnames(globalProps(props, {maxWidth}), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,
@@ -152,15 +159,24 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       {...dataProps}
       className={css}
     >
-      <TrixEditor
-        className=""
-        fileParamName={name}
-        mergeTags={[]}
-        onChange={onChange}
-        onEditorReady={handleOnEditorReady}
-        placeholder={placeholder}
-        value={value}
-      />
+      {
+        advancedEditor ? (
+          <div className='pb_rich_text_editor_advanced_container'>
+          <EditorToolbar editor={advancedEditor}/>
+          { children }
+          </div>
+        ) : (
+          <TrixEditor
+              className=""
+              fileParamName={name}
+              mergeTags={[]}
+              onChange={onChange}
+              onEditorReady={handleOnEditorReady}
+              placeholder={placeholder}
+              value={value}
+          />
+        )
+      }
     </div>
   )
 }