playbook_ui 15.2.0 → 15.3.0.pre.alpha.PLAY2322popoverconditionalrender11766

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -89,7 +89,7 @@ const Popover = (props: PbPopoverProps) => {
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps
       ? "p_sm"
-      : filteredGlobalProps 
+      : filteredGlobalProps
   const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
   const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
   const widthHeightStyles = () => {
@@ -170,42 +170,56 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
     minHeight,
     minWidth,
     width,
+    closeOnClick,
+    shouldClosePopover = noop,
   } = props;
 
+  // Store latest callback in a ref to avoid re-runs
+  const shouldClosePopoverRef = useRef(shouldClosePopover);
+
+  // Update ref on change
   useEffect(() => {
-    const { closeOnClick, shouldClosePopover = noop } = props;
+    shouldClosePopoverRef.current = shouldClosePopover;
+  }, [shouldClosePopover]);
 
+  useEffect(() => {
     if (!closeOnClick) return;
 
-    document.body.addEventListener(
-      "click",
-      (e: MouseEvent) => {
-        const target = e.target as HTMLElement
+    // Function to handle popover event listener and targetId.
+    // Ensure that whenever the component is conditionally rendered
+    // that the old listener is removed and the new listener is
+    // updated with the targetId.
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement
 
-        const targetIsPopover =
-          target.closest("#" + targetId) !== null;
-        const targetIsReference =
-          target.closest("#reference-" + targetId) !== null;
+      const targetIsPopover =
+        target.closest("#" + targetId) !== null;
+      const targetIsReference =
+        target.closest("#reference-" + targetId) !== null;
 
-        const shouldClose = () => {
-          setTimeout(() => shouldClosePopover(true), 0);
-        }
+      const shouldClose = () => {
+        setTimeout(() => shouldClosePopoverRef.current(true), 0);
+      }
 
-        switch (closeOnClick) {
-          case "outside":
-            if (!targetIsPopover && !targetIsReference) shouldClose();
-            break;
-          case "inside":
-            if (targetIsPopover) shouldClose();
-            break;
-          case "any":
-            if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
-            break;
-        }
-      },
-      { capture: true }
-    );
-  }, []);
+      switch (closeOnClick) {
+        case "outside":
+          if (!targetIsPopover && !targetIsReference) shouldClose();
+          break;
+        case "inside":
+          if (targetIsPopover) shouldClose();
+          break;
+        case "any":
+          if (targetIsPopover || !targetIsPopover && !targetIsReference) shouldClose();
+          break;
+      }
+    };
+
+    document.body.addEventListener("click", handleClick, { capture: true });
+
+    return () => {
+      document.body.removeEventListener("click", handleClick, { capture: true });
+    };
+  }, [targetId, closeOnClick]);
 
   const popoverComponent = (
     <Popover

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -3,11 +3,14 @@ import React, { useState } from 'react'
 import Button from '../../pb_button/_button'
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
+// Temporary code to replicate bug - DO NOT MERGE (Revert example when done)
+import useSmallScreenIndicator from './hook/useSmallScreenIndicator'
 
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)
   const [showOutsidePopover, setOutsideShowPopover] = useState(false)
   const [showAnyPopover, setAnyShowPopover] = useState(false)
+  const isPwa = useSmallScreenIndicator()
 
   const handleInsideShouldClosePopover = (shouldClosePopover) => {
     setInsideShowPopover(!shouldClosePopover)
@@ -59,6 +62,10 @@ const PopoverClose = (props) => {
     />
   )
 
+  if (isPwa) {
+    return null
+  }
+
   return (
     <Flex spacing="between">
       <PbReactPopover

data/app/pb_kits/playbook/pb_popover/docs/hook/useSmallScreenIndicator.tsx

@@ -0,0 +1,27 @@
+// Temporary code to replicate bug - DO NOT MERGE
+import { useEffect, useState } from "react";
+
+const useSmallScreenIndicator = (): boolean => {
+  const [isPwa, setIsPwa] = useState(false);
+
+  useEffect(() => {
+    const update = () => {
+      const value = getComputedStyle(document.documentElement)
+        .getPropertyValue("--is-pwa")
+        .trim();
+      setIsPwa(value === "1");
+    };
+
+    update();
+
+    // Observes changes using ResizeObserver
+    const observer = new ResizeObserver(update);
+    observer.observe(document.documentElement);
+
+    return () => observer.disconnect();
+  }, []);
+
+  return isPwa;
+};
+
+export default useSmallScreenIndicator;

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

@@ -11,7 +11,7 @@ import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
 import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions, simple, sticky }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -33,15 +33,50 @@ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
     },
   ]
 
+  const simpleToolbaritems = [
+    {
+        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(),
+    },
+  ]
+
   return (
     <Background backgroundColor="white"
-        className="toolbar"
+        className={`toolbar ${sticky ? 'pb_rich_text_editor_tiptap_toolbar_sticky' : ''}`}
+        
     >
       <Flex flex="0"
           justify="between"
           paddingX="sm"
           paddingY="xxs"
       >
+        {
+          simple ? (
+            <>
+              <Flex className="toolbar_block">
+                {simpleToolbaritems && simpleToolbaritems.map(
+                  ({ icon, text, classname, onclick}: ToolbarTypes, index: number) => (
+                    <EditorButton
+                        classname={classname}
+                        icon={icon}
+                        key={index}
+                        onclick={onclick}
+                        text={text}
+                    />
+                  )
+                )}
+              </Flex>
+            </>
+          ) : (
+            <>
         <FlexItem className="toolbar_block"
             displayFlex
         >
@@ -69,6 +104,10 @@ const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
             }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
+        </>
+          )
+        }
+       
       </Flex>
     </Background>
   );

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

@@ -146,6 +146,7 @@ const popoverReference = (
 
   return (
       <PbReactPopover
+          className='pb_tiptap_toolbar_dropdown_popover'
           closeOnClick='outside'
           padding='none'
           placement="bottom"

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
 import { TrixEditor } from 'react-trix'
 
@@ -77,7 +77,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>()
+    [editor, setEditor] = useState<Editor>(),
+    [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
+    containerRef = useRef<HTMLDivElement>(null)
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
@@ -128,6 +130,42 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     document.addEventListener('trix-blur', inlineFocus)
   }
 
+  //===========focus prop with advanced editor=================
+  const isClickInPopover = (event: Event): boolean => {
+    return !!(event.target as Element).closest('.pb_tiptap_toolbar_dropdown_popover')
+  }
+
+  const isClickInContainer = (event: Event): boolean => {
+    return !!(containerRef.current && containerRef.current.contains(event.target as Node))
+  }
+
+  useEffect(() => {
+    if (!advancedEditor || !focus) return
+
+    const handleFocus = () => setShowToolbarOnFocus(true)
+    
+    const handleClickOutside = (event: Event) => {
+      if (isClickInContainer(event) || isClickInPopover(event)) return
+      setShowToolbarOnFocus(false)
+    }
+
+    const editorElement = advancedEditor?.view?.dom
+    if (editorElement) {
+      editorElement.addEventListener('focus', handleFocus)
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      if (editorElement) {
+        editorElement.removeEventListener('focus', handleFocus)
+      }
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [advancedEditor, focus])
+
+  //============= end focus prop with advanced editor=================
+
   useEffect(() => {
     if (!editor || !template) return
     editor.loadHTML('')
@@ -148,41 +186,43 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     })
   }, [editor])
 
-  const richTextEditorClass = 'pb_rich_text_editor_kit',
-    simpleClass = simple ? 'simple' : '',
-    focusClass = focus ? 'focus-editor-targets' : '',
-    stickyClass = sticky ? 'sticky' : '',
-    inlineClass = inline ? 'inline' : '',
-    toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
-
-  let css = classnames(globalProps(props, { maxWidth }), className)
-  css = classnames(
-    richTextEditorClass,
-    simpleClass,
-    focusClass,
-    stickyClass,
-    inlineClass,
-    toolbarBottomClass,
-    css
+  // Generate CSS classes
+  const css = classnames(
+    'pb_rich_text_editor_kit',
+    {
+      simple: simple,
+      'focus-editor-targets': focus,
+      sticky: sticky,
+      inline: inline,
+      'toolbar-bottom': toolbarBottom,
+    },
+    globalProps(props, { maxWidth }),
+    className
   )
 
+  // Determine if toolbar should be shown
+  const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
+
   return (
     <div
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
         className={css}
+        ref={focus ? containerRef : undefined}
     >
       {
         advancedEditor ? (
           <div 
               className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: advancedEditorToolbar,
+              ["toolbar-active"]: shouldShowToolbar,
               })}
           >
-            {advancedEditorToolbar && (
+            {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
+                  simple={simple}
+                  sticky={sticky}
               />
             )}
           { children }

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

@@ -9,6 +9,37 @@
 @import "previewer_mixin";
 
 [class^="pb_rich_text_editor_kit"] {
+    &.inline {
+        .toolbar {
+          opacity: 0;
+          transition: all 0.3s ease-in-out 0s;
+        }
+    
+        &:focus-within .toolbar {
+          opacity: 100;
+        }
+    
+        .ProseMirror {
+          border: 1px solid transparent;
+          transition: all 0.3s ease-in-out 0s;
+        }
+    
+        &:focus-within .ProseMirror {
+          border: 1px solid $border_light;
+          border-top: none;
+        }
+    
+        &:hover {
+          .toolbar {
+            opacity: 100;
+          }
+    
+          .ProseMirror {
+            border: 1px solid $border_light;
+            border-top: none;
+          }
+        }
+      }
   .toolbar_button {
     display: flex;
     align-items: center;
@@ -42,6 +73,11 @@
     }
   }
 
+  .pb_rich_text_editor_tiptap_toolbar_sticky {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+  }
   .toolbar {
     border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
     border: 1px solid $border_light;

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedAttributes = (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}
+          aria={{ label: 'I am a rich text editor' }}
+          data={{ 'test-data': 'value', 'test-data2': 'value2' }}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedAttributes

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

@@ -0,0 +1 @@
+Aria labels and data attributes can also be added to the top level div for the RichTextEditor.

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

@@ -0,0 +1,34 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedFocus = (props) => {
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Click inside to see the toolbar. Click outside to hide it."
+    })
+
+    if (!editor) {
+        return null
+    } 
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          focus
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedFocus

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

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedInline = (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}
+          inline
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.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_advanced_simple.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedSimple = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"Add your text here. Use the simple toolbar above to format your text"
+    })
+      if (!editor) {
+        return null
+      } 
+
+      
+
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          simple
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedSimple

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedSticky = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link
+        ],
+        content:"In this example, when you scroll down, the rich text editor's toolbar will scroll along with the page and it will no longer be visible at the top of the page. Dummy text to enable scroll.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare lorem ut pellentesque tempor. Vivamus ut ex vestibulum velit rich text editor eleifend fringilla. Sed non metus dictum, elementum mauris wysiwyg html editor non, sagittis odio. Nullam pellentesque leo sit amet ante suscipit wysiwyg html editor sagittis. Donec tempus vulputate suscipit. Ut non felis rich text editor ac dolor pulvinar lacinia eu eget urna. Sed tincidunt sapien vulputate tellus fringilla sodales. Morbi accumsan dui wysiwyg html editor sed massa pellentesque, quis vestibulum lectus scelerisque. Nulla ultrices mi id felis luctus aliquet. Donec nec ligula wysiwyg html editor pretium sapien semper dictum eu id quam. Etiam ut sollicitudin nibh. Quisque eu ultrices dui. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus rich text editor mi eu consequat. Nullam tincidunt erat et placerat mattis. Nunc rich text editor congue, enim vitae dictum dignissim, libero nisl sagittis augue, non aliquet nibh tortor sit amet ex. Aliquam cursus maximus mi eu consequat. Nullam tincidunt erat et placerat mattis."
+
+    })
+      if (!editor) {
+        return null
+      } 
+
+      
+
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          sticky
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedSticky

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

@@ -0,0 +1 @@
+Use the optional `sticky` prop to make the toolbar sticky on scroll.