playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY747carddarktokens610

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>
   )
 }

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

@@ -0,0 +1,231 @@
+@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;
+    }
+    &.is-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;
+      &:focus-visible {
+        box-shadow: unset;
+      }
+    }
+  }
+
+  .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;
+    @include transition_default;
+    :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-top-color: $primary;
+      @include transition_default;
+    }
+    h1 {
+      font-size: $text_largest;
+      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;
+        }
+      }
+    }
+  }
+}
+
+.pb_tiptap_toolbar_dropdown_list_item {
+  &.is-active,
+  &:active {
+    color: $primary;
+    background-color: $bg_light;
+    border-radius: unset !important;
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_icon_left {
+      color: $primary !important;
+    }
+  }
+  &:hover {
+    background-color: $neutral_subtle;
+    border-radius: unset !important;
+    .pb_nav_list_item_text,
+    .pb_nav_list_item_icon_left {
+      background-color: unset;
+      color: $text_lt_light !important;
+    }
+    .pb_nav_list_item_link {
+      background-color: unset !important;
+    }
+  }
+}
+.pb_rich_text_editor_advanced_container {
+  transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+  &:focus-visible,
+  &:focus-within {
+    outline: unset;
+    box-shadow: 0 0 0 1px $primary;
+    border-radius: $border_rad_heaviest;
+    transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
+  }
+}

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

@@ -0,0 +1 @@
+NOTE: All editors have a default max-width of "md". Use our [Max Width global prop](https://playbook.powerapp.cloud/visual_guidelines/max_width) to override this default, as necessary.

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/_rich_text_editor_advanced_default.md

@@ -0,0 +1,4 @@
+The advanced variant leverages Tiptap to unlock additional UI options (e.g., consolidated nav toolbar, styling, etc.) as well as several extensions (see [Tiptap docs](https://tiptap.dev/extensions) for more). To leverage this variant, Tiptap __must be installed__ in your project. Complete docs for using the library can be found [here](https://tiptap.dev/). To get started with this variant, see the Code Example below for required imports as well as the basic setup. 
+
+
+NOTE: Once the Tiptap editor is initialized as shown below, you must pass that instance to the kit via the `advancedEditor` prop. 

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'