-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PLAY-807] Created extensions prop For advanced RTE (#2560)
**What does this PR do?** A clear and concise description with your runway ticket url. This PR adds a new prop called `moreExtensions` to the advanced variant of the RTE to allows devs to be able to add as many extensions they want to the editor and hav e the button show up in the ellipsis dropdown. [RUNWAY STORY](https://nitro.powerhrg.com/runway/backlog_items/PLAY-807) **Screenshots:** Screenshots to visualize your addition/change  **How to test?** Steps to confirm the desired behavior: 1. Scroll down to the Advanced (More Extensions) doc example. 2. Click the ellipsis drowpdown to see the menu.
- Loading branch information
Showing
10 changed files
with
175 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
69 changes: 69 additions & 0 deletions
69
playbook/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import React, { useState } from 'react' | ||
|
|
||
| import Flex from '../../pb_flex/_flex' | ||
| import PbReactPopover from '../../pb_popover/_popover' | ||
| import Icon from '../../pb_icon/_icon' | ||
| import Nav from '../../pb_nav/_nav' | ||
| import NavItem from '../../pb_nav/_item' | ||
|
|
||
| const MoreExtensionsDropdown = ({extensions}: any) => { | ||
| const [showPopover, setShowPopover] = useState(false) | ||
|
|
||
| const handleTogglePopover = () => { | ||
| setShowPopover(true) | ||
| } | ||
|
|
||
| const handlePopoverClose = (shouldClosePopover: boolean) => { | ||
| setShowPopover(!shouldClosePopover) | ||
| } | ||
|
|
||
|
|
||
| const popoverReference = ( | ||
| <button | ||
| className="toolbar_button" | ||
| onClick={handleTogglePopover} | ||
| > | ||
| <Flex | ||
| align="center" | ||
| className="toolbar_button_icon" | ||
| justify="center" | ||
| > | ||
| <Icon icon="ellipsis" size="lg" /> | ||
| </Flex> | ||
| </button> | ||
|
|
||
| ); | ||
|
|
||
| return ( | ||
| <PbReactPopover | ||
| closeOnClick='outside' | ||
| padding='none' | ||
| placement="bottom" | ||
| reference={popoverReference} | ||
| shouldClosePopover={handlePopoverClose} | ||
| show={showPopover} | ||
| > | ||
| <Nav | ||
| paddingTop={extensions.length > 1 ? "xs" : "none"} | ||
| paddingBottom={extensions.length > 1 ? "xs" : "none"} | ||
| variant="subtle" | ||
| > | ||
| {extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => ( | ||
| <NavItem | ||
| cursor="pointer" | ||
| className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`} | ||
| iconLeft={icon} | ||
| key={`${text}_${index}`} | ||
| margin='none' | ||
| onClick={()=> {onclick(); setShowPopover(false)}} | ||
| text={text} | ||
| paddingTop='xxs' | ||
| paddingBottom='xxs' | ||
| /> | ||
| ))} | ||
| </Nav> | ||
| </PbReactPopover> | ||
| ) | ||
| } | ||
|
|
||
| export default MoreExtensionsDropdown |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
playbook/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import React from 'react' | ||
| import { RichTextEditor } from '../..' | ||
| import { useEditor, EditorContent } from "@tiptap/react" | ||
| import StarterKit from "@tiptap/starter-kit" | ||
| import Link from '@tiptap/extension-link' | ||
|
|
||
| import HorizontalRule from "@tiptap/extension-horizontal-rule" | ||
| import Highlight from '@tiptap/extension-highlight' | ||
|
|
||
|
|
||
| const RichTextEditorMoreExtensions = (props) => { | ||
|
|
||
| const editor = useEditor({ | ||
| extensions: [ | ||
| StarterKit, | ||
| Link, | ||
| HorizontalRule, | ||
| Highlight.configure({ multicolor: true }) | ||
| ], | ||
| content:"Add your text here. You can format your text, add links, quotes, and bullets." | ||
| }) | ||
| if (!editor) { | ||
| return null | ||
| } | ||
|
|
||
| const ExtensionsList = [ | ||
| { | ||
| icon: "horizontal-rule", | ||
| isActive: editor.isActive("horizontalRule"), | ||
| text: "Horizontal Rule", | ||
| onclick: () => editor.chain().focus().setHorizontalRule().run(), | ||
| }, | ||
| { | ||
| icon: "highlighter", | ||
| isActive: editor.isActive("highlight"), | ||
| text: "Highlighter", | ||
| onclick: () => editor.chain().focus().toggleHighlight().run(), | ||
| } | ||
| ] | ||
|
|
||
|
|
||
| return ( | ||
| <div> | ||
| <RichTextEditor | ||
| advancedEditor={editor} | ||
| extensions={ExtensionsList} | ||
| {...props} | ||
| > | ||
| <EditorContent editor={editor}/> | ||
| </RichTextEditor> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default RichTextEditorMoreExtensions |
12 changes: 12 additions & 0 deletions
12
.../pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| This variant allows you to optionally include any of [Tiptap’s 53 extensions](https://tiptap.dev/extensions) within any advanced editor by using the `extensions` prop. | ||
|
|
||
| __NOTE__: In order to leverage this prop, you __must__ install the extension you need in your project, import it and pass it to the extensions array as shown in this example with the HorizontalRule and the Highlight extensions. | ||
|
|
||
| In order to add the extension to the editor toolbar, create an array of objects (as shown in the ExtensionsList array in the example below). Each object in this array should include: | ||
|
|
||
| `icon`: the icon to display within the toolbar dropdown (any Fontawesome icons can be used) | ||
| `isActive`: sets the extension to active within the dropdown, when applicable | ||
| `text`: the label within the toolbar dropdown | ||
| `onclick`: initializes the extension when it’s clicked within the dropdown (snytax varies with extension, see Tiptap's docs for more information) | ||
|
|
||
| This array can then be passed to the `extensions` prop and all extensions in the array will be rendered in the ellipsis dropdown. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters