playbook_ui 12.17.1 → 12.18.0.pre.alpha.PLAY747carddarktokens610

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +1 -1
  3. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -2
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +2 -2
  5. data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +48 -36
  6. data/app/pb_kits/playbook/pb_docs/kit_api.rb +97 -9
  7. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_docs/kit_example.rb +9 -5
  9. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +8 -0
  10. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +121 -0
  11. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md +1 -0
  12. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_nav/_item.tsx +6 -6
  15. data/app/pb_kits/playbook/pb_nav/_nav.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +49 -0
  17. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +9 -0
  18. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +62 -0
  19. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +139 -0
  20. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +45 -0
  21. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +59 -0
  22. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +1 -1
  23. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +28 -12
  24. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +231 -0
  25. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md +1 -0
  26. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +36 -0
  27. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md +4 -0
  28. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  29. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +185 -0
  31. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.test.js +85 -0
  32. data/app/pb_kits/playbook/pb_title/_title.tsx +1 -1
  33. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +45 -0
  34. data/app/pb_kits/playbook/pb_title_detail/title_detail.test.js +71 -0
  35. data/app/pb_kits/playbook/pb_toggle/{_toggle.jsx → _toggle.tsx} +20 -22
  36. data/app/pb_kits/playbook/pb_toggle/toggle.test.js +67 -0
  37. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +11 -6
  38. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
  39. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +1 -2
  40. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +0 -1
  41. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  42. data/app/pb_kits/playbook/tokens/_colors.scss +5 -3
  43. data/lib/playbook/markdown/helper.rb +50 -71
  44. data/lib/playbook/markdown.rb +0 -1
  45. data/lib/playbook/number_spacing.rb +10 -10
  46. data/lib/playbook/position.rb +10 -10
  47. data/lib/playbook/spacing.rb +10 -10
  48. data/lib/playbook/version.rb +2 -2
  49. data/lib/playbook/z_index.rb +10 -10
  50. metadata +27 -14
  51. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +0 -172
  52. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +0 -44
  53. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +0 -9
  54. data/lib/playbook/markdown/template_handler.rb +0 -47
@@ -0,0 +1,62 @@
1
+ import React from "react";
2
+ import Background from "../../pb_background/_background";
3
+ import Flex from "../../pb_flex/_flex";
4
+ import FlexItem from "../../pb_flex/_flex_item";
5
+ import SectionSeparator from "../../pb_section_separator/_section_separator";
6
+
7
+ import EditorButton from "./EditorButton";
8
+ import ToolbarDropdown from "./ToolbarDropdown";
9
+ import ToolbarNodes from "./ToolbarNodes";
10
+ import { ToolbarTypes } from "./EditorTypes";
11
+ import ToolbarHistoryItems from "./ToolbarHistory";
12
+
13
+ const EditorToolbar = ({ editor }:any) => {
14
+ const toolbaritems = [
15
+ {
16
+ icon: "bold",
17
+ text: "Bold",
18
+ classname:`toolbar_button ${editor.isActive('bold') ? 'is-active' : ''}`,
19
+ onclick:()=>editor.chain().focus().toggleBold().run(),
20
+ },
21
+ {
22
+ icon: "italic",
23
+ text: "Italic",
24
+ classname:`toolbar_button ${editor.isActive('italic') ? 'is-active' : ''}`,
25
+ onclick:() => editor.chain().focus().toggleItalic().run(),
26
+ },
27
+ {
28
+ icon: "strikethrough",
29
+ text: "Strikethrough",
30
+ classname:`toolbar_button ${editor.isActive('strike') ? 'is-active' : ''}`,
31
+ onclick:() => editor.chain().focus().toggleStrike().run(),
32
+ },
33
+ ]
34
+
35
+ return (
36
+ <Background backgroundColor="white" className="toolbar">
37
+ <Flex flex="0" justify="between" paddingX="sm" paddingY="xxs">
38
+ <FlexItem className="toolbar_block" displayFlex>
39
+ <ToolbarDropdown editor={editor}/>
40
+ <SectionSeparator orientation="vertical" />
41
+ {toolbaritems && toolbaritems.map(
42
+ ({ icon, text, classname, onclick}:ToolbarTypes, index:number) => (
43
+ <EditorButton
44
+ classname={classname}
45
+ icon={icon}
46
+ key={index}
47
+ text={text}
48
+ onclick={onclick}
49
+ />
50
+ )
51
+ )}
52
+ <SectionSeparator orientation="vertical" />
53
+ <ToolbarNodes editor={editor} />
54
+ </FlexItem>
55
+ <ToolbarHistoryItems editor={editor} />
56
+ </Flex>
57
+ {/* <SectionSeparator /> */}
58
+ </Background>
59
+ );
60
+ };
61
+
62
+ export default EditorToolbar
@@ -0,0 +1,139 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import Flex from '../../pb_flex/_flex'
4
+ import PbReactPopover from '../../pb_popover/_popover'
5
+ import Button from '../../pb_button/_button'
6
+ import Icon from '../../pb_icon/_icon'
7
+ import Nav from '../../pb_nav/_nav'
8
+ import NavItem from '../../pb_nav/_item'
9
+
10
+ import { ToolbarTypes } from './EditorTypes'
11
+
12
+ const ToolbarDropdown = ({editor}: any) => {
13
+ const [showPopover, setShowPopover] = useState(false)
14
+
15
+ const toolbarDropdownItems = [
16
+ {
17
+ node: "paragraph",
18
+ icon: "paragraph",
19
+ isActive: editor.isActive("paragraph"),
20
+ text: "Paragraph",
21
+ onclick: () => editor.chain().focus().setParagraph().run(),
22
+ },
23
+ {
24
+ node: "heading-1",
25
+ icon: "h1",
26
+ isActive: editor.isActive("heading", {level: 1}),
27
+ text: "Heading 1",
28
+ onclick: () => editor.chain().focus().toggleHeading({level:1}).run(),
29
+ },
30
+ {
31
+ node: "heading-2",
32
+ icon: "h2",
33
+ isActive: editor.isActive("heading", {level: 2}),
34
+ text: "Heading 2",
35
+ onclick: () => editor.chain().focus().toggleHeading({level:2}).run(),
36
+ },
37
+ {
38
+ node: "heading-3",
39
+ icon: "h3",
40
+ isActive: editor.isActive("heading", {level: 3}),
41
+ text: "Heading 3",
42
+ onclick: () => editor.chain().focus().toggleHeading({level:3}).run(),
43
+ },
44
+ {
45
+ node: "bulletList",
46
+ icon: "list",
47
+ isActive: editor.isActive("bulletList"),
48
+ text: "Bullet List",
49
+ onclick: () => editor.chain().focus().toggleBulletList().run(),
50
+ },
51
+ {
52
+ node: "orderedList",
53
+ icon: "list-ol",
54
+ isActive: editor.isActive("orderedList"),
55
+ text: "Ordered List",
56
+ onclick: () => editor.chain().focus().toggleOrderedList().run()
57
+ ,
58
+ },
59
+ {
60
+ node: "blockquote",
61
+ icon: "block-quote",
62
+ isActive: editor.isActive("blockquote"),
63
+ text: "Block Quote",
64
+ onclick: () => editor.chain().focus().toggleBlockquote().run(),
65
+ },
66
+ ]
67
+
68
+
69
+ const handleTogglePopover = () => {
70
+ setShowPopover(true)
71
+ }
72
+
73
+ const handlePopoverClose = (shouldClosePopover: boolean) => {
74
+ setShowPopover(!shouldClosePopover)
75
+ }
76
+
77
+ let activeCount = 0;
78
+ const activeItems = [];
79
+
80
+ for (const { text, isActive, icon } of toolbarDropdownItems) {
81
+ if (isActive) {
82
+ activeCount ++
83
+ activeItems.push(
84
+ <Flex align="center" key={icon} gap="xs">
85
+ <Icon icon={icon} size="lg" />
86
+ <div>{text}</div>
87
+ <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
88
+ <Icon fixedWidth icon="angle-down" margin-left="xs" />
89
+ </Flex>
90
+ </Flex>
91
+ );
92
+ }
93
+ }
94
+
95
+ const popoverReference = (
96
+ <Button className="editor-dropdown-button" onClick={handleTogglePopover} variant="secondary">
97
+ {
98
+ activeCount === 2 ? (
99
+ activeItems[1]
100
+ ) : (
101
+ activeItems[0] || null
102
+ )
103
+ }
104
+ </Button>
105
+ );
106
+
107
+ return (
108
+ <PbReactPopover
109
+ closeOnClick='outside'
110
+ padding='none'
111
+ placement="bottom"
112
+ reference={popoverReference}
113
+ shouldClosePopover={handlePopoverClose}
114
+ show={showPopover}
115
+ >
116
+ <Nav
117
+ paddingTop="xs"
118
+ paddingBottom="xs"
119
+ variant="subtle"
120
+ >
121
+ {toolbarDropdownItems.map(({ icon, text, onclick, isActive}:ToolbarTypes, index:number) => (
122
+ <NavItem
123
+ cursor="pointer"
124
+ className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
125
+ iconLeft={icon}
126
+ key={`${text}_${index}`}
127
+ margin='none'
128
+ onClick={()=> {onclick(); setShowPopover(false)}}
129
+ text={text}
130
+ paddingTop='xxs'
131
+ paddingBottom='xxs'
132
+ />
133
+ ))}
134
+ </Nav>
135
+ </PbReactPopover>
136
+ )
137
+ }
138
+
139
+ export default ToolbarDropdown
@@ -0,0 +1,45 @@
1
+ import React from "react";
2
+ import FlexItem from "../../pb_flex/_flex_item";
3
+ import EditorButton from "./EditorButton";
4
+ import { ToolbarTypes } from "./EditorTypes";
5
+
6
+ const ToolbarHistoryItems = ({editor}:any) => {
7
+
8
+ const toolbarHistoryItems = [
9
+ {
10
+ classname: `toolbar_button`,
11
+ icon: "undo",
12
+ text: "Undo",
13
+ onclick: () => editor.chain().focus().undo().run(),
14
+ disable: !editor.can().chain().focus().undo().run()
15
+ },
16
+ {
17
+ classname: `toolbar_button`,
18
+ icon: "redo",
19
+ text: "Redo",
20
+ onclick: () => editor.chain().focus().redo().run(),
21
+ disable: !editor.can().chain().focus().redo().run()
22
+ },
23
+ ];
24
+
25
+ return (
26
+ <>
27
+ <FlexItem displayFlex>
28
+ {toolbarHistoryItems.map(
29
+ ({ onclick, classname, disable, icon, text }:ToolbarTypes, index:number) => (
30
+ <EditorButton
31
+ classname={classname}
32
+ onclick={onclick}
33
+ disable={disable}
34
+ icon={icon}
35
+ key={index}
36
+ text={text}
37
+ />
38
+ )
39
+ )}
40
+ </FlexItem>
41
+ </>
42
+ )
43
+ }
44
+
45
+ export default ToolbarHistoryItems
@@ -0,0 +1,59 @@
1
+ import React, {useCallback} from "react";
2
+ import EditorButton from "./EditorButton";
3
+ import { ToolbarTypes } from "./EditorTypes";
4
+
5
+ const ToolbarNodes = ({editor}:any) => {
6
+
7
+ // eslint-disable-next-line react-hooks/rules-of-hooks
8
+ const setLink = useCallback(() => {
9
+ const previousUrl = editor.getAttributes("link").href;
10
+ const url = window.prompt("URL", previousUrl);
11
+
12
+ // cancelled
13
+ if (url === null) {
14
+ return;
15
+ }
16
+
17
+ // empty
18
+ if (url === "") {
19
+ editor.chain().focus().extendMarkRange("link").unsetLink().run();
20
+
21
+ return;
22
+ }
23
+
24
+ // update link
25
+ editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
26
+ }, [editor]);
27
+
28
+ const toolbarNodesItems = [
29
+ {
30
+ onclick: () => editor.chain().focus().toggleCodeBlock().run(),
31
+ icon: "code",
32
+ isActive: editor.isActive("codeBlock"),
33
+ text: "Codeblock",
34
+ },
35
+ {
36
+ onclick: setLink,
37
+ icon: "link",
38
+ isActive: editor.isActive("link"),
39
+ text: "Link",
40
+ },
41
+ ];
42
+
43
+ return (
44
+ <>
45
+ {toolbarNodesItems.map(({ onclick, icon, text, isActive }:ToolbarTypes, index:number) => (
46
+ <EditorButton
47
+ classname={`toolbar_button ${isActive ? 'is-active' : ''}`}
48
+ onclick={onclick}
49
+ icon={icon}
50
+ key={index}
51
+ text={text}
52
+ />
53
+ ))}
54
+ </>
55
+ )
56
+ }
57
+
58
+
59
+ export default ToolbarNodes
@@ -8,7 +8,7 @@
8
8
  @import "../tokens/transition";
9
9
  @import "../pb_icon/icon";
10
10
  @import "./trix_styles";
11
-
11
+ @import "./tiptap_styles";
12
12
 
13
13
  .trix-content pre {
14
14
  display: inline-block;
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import inlineFocus from './inlineFocus'
4
4
  import useFocus from './useFocus'
5
- import { globalProps } from '../utilities/globalProps'
5
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
6
6
  import { buildAriaProps, buildDataProps, noop } from '../utilities/props'
7
7
 
8
8
  try {
@@ -14,6 +14,7 @@ try {
14
14
  } catch (_e) { /* do nothing */ }
15
15
 
16
16
  import { TrixEditor } from "react-trix"
17
+ import EditorToolbar from './TipTap/Toolbar'
17
18
 
18
19
  type Editor = {
19
20
  attributeIsActive?: Function,
@@ -27,7 +28,9 @@ type Editor = {
27
28
 
28
29
  type RichTextEditorProps = {
29
30
  aria?: { [key: string]: string },
31
+ advancedEditor?: any,
30
32
  toolbarBottom?: Boolean,
33
+ children?: React.ReactNode | React.ReactNode[]
31
34
  className?: string,
32
35
  data?: { [key: string]: string },
33
36
  focus?: boolean,
@@ -40,12 +43,15 @@ type RichTextEditorProps = {
40
43
  sticky?: boolean,
41
44
  template: string,
42
45
  value?: string,
43
- }
46
+ maxWidth?: string
47
+ } & GlobalProps
44
48
 
45
49
  const RichTextEditor = (props: RichTextEditorProps) => {
46
50
  const {
47
51
  aria = {},
52
+ advancedEditor,
48
53
  toolbarBottom = false,
54
+ children,
49
55
  className,
50
56
  data = {},
51
57
  focus = false,
@@ -57,6 +63,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
57
63
  sticky = false,
58
64
  template = '',
59
65
  value = '',
66
+ maxWidth="md"
60
67
  } = props
61
68
 
62
69
  const ariaProps = buildAriaProps(aria),
@@ -135,7 +142,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
135
142
  inlineClass = inline ? 'inline' : '',
136
143
  toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
137
144
 
138
- let css = classnames(globalProps(props), className)
145
+ let css = classnames(globalProps(props, {maxWidth}), className)
139
146
  css = classnames(
140
147
  richTextEditorClass,
141
148
  simpleClass,
@@ -152,15 +159,24 @@ const RichTextEditor = (props: RichTextEditorProps) => {
152
159
  {...dataProps}
153
160
  className={css}
154
161
  >
155
- <TrixEditor
156
- className=""
157
- fileParamName={name}
158
- mergeTags={[]}
159
- onChange={onChange}
160
- onEditorReady={handleOnEditorReady}
161
- placeholder={placeholder}
162
- value={value}
163
- />
162
+ {
163
+ advancedEditor ? (
164
+ <div className='pb_rich_text_editor_advanced_container'>
165
+ <EditorToolbar editor={advancedEditor}/>
166
+ { children }
167
+ </div>
168
+ ) : (
169
+ <TrixEditor
170
+ className=""
171
+ fileParamName={name}
172
+ mergeTags={[]}
173
+ onChange={onChange}
174
+ onEditorReady={handleOnEditorReady}
175
+ placeholder={placeholder}
176
+ value={value}
177
+ />
178
+ )
179
+ }
164
180
  </div>
165
181
  )
166
182
  }
@@ -0,0 +1,231 @@
1
+ @import "../tokens/border_radius";
2
+ @import "../tokens/colors";
3
+ @import "../tokens/spacing";
4
+ @import "../tokens/titles";
5
+ @import "../tokens/line_height";
6
+ @import "../tokens/typography";
7
+ @import "../tokens/shadows";
8
+ @import "../tokens/transition";
9
+
10
+ [class^="pb_rich_text_editor_kit"] {
11
+ .toolbar_button {
12
+ display: flex;
13
+ align-items: center;
14
+ background: $transparent;
15
+ border: none;
16
+ border-radius: $border_rad_heaviest;
17
+ color: $text_lt_light;
18
+ cursor: pointer;
19
+ &_icon {
20
+ width: $space_xl + 2;
21
+ height: $space_xl + 2;
22
+ }
23
+ &.open {
24
+ color: $primary;
25
+ }
26
+ &.is-active,
27
+ &:active {
28
+ color: $primary;
29
+ background-color: $bg_light;
30
+ }
31
+ &:hover:not([disabled]) {
32
+ background-color: $neutral_subtle;
33
+ }
34
+ &:disabled {
35
+ .pb_icon_kit {
36
+ color: $border_light;
37
+ }
38
+ }
39
+ &:focus-visible {
40
+ outline: none !important;
41
+ }
42
+ }
43
+
44
+ .toolbar {
45
+ border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
46
+ border: 1px solid $border_light;
47
+ overflow-x: auto;
48
+ &_block {
49
+ gap: $space_xs;
50
+ }
51
+ .editor-dropdown-button {
52
+ background: transparent;
53
+ border: none;
54
+ color: $text_lt_light;
55
+ cursor: pointer;
56
+ font-weight: $light;
57
+ padding: ($space_xs - 1) 0px;
58
+ width: $space_xl * 3;
59
+ &:focus-visible {
60
+ box-shadow: unset;
61
+ }
62
+ }
63
+ }
64
+
65
+ .ProseMirror {
66
+ background: $white;
67
+ border: 1px solid $border_light;
68
+ border-top-color: transparent;
69
+ border-bottom-right-radius: $border_rad_heaviest;
70
+ border-bottom-left-radius: $border_rad_heaviest;
71
+ height: 100%;
72
+ padding: 1rem 1.5rem 1.5rem 1.5rem;
73
+ line-height: $lh_loose;
74
+ @include transition_default;
75
+ :first-child {
76
+ margin-top: 0;
77
+ }
78
+
79
+ h4,
80
+ h5,
81
+ h6,
82
+ ul,
83
+ ol,
84
+ blockquote,
85
+ p {
86
+ margin: 1rem 0 0 0;
87
+ }
88
+
89
+ code {
90
+ font-family: monospace;
91
+ background: $bg_light;
92
+ padding: 0.1rem 0.3rem;
93
+ margin: 0 5px;
94
+ box-shadow: 0 2px 10px $shadow;
95
+ border-radius: 0.25rem;
96
+ overflow: hidden;
97
+ font-size: ($text_small - 1px);
98
+ }
99
+
100
+ pre {
101
+ background: $bg_dark;
102
+ padding: $space_sm;
103
+ border-radius: $border_rad_heaviest;
104
+ margin: 1.5rem 0 2rem 0;
105
+ code {
106
+ background: transparent;
107
+ box-shadow: none;
108
+ border: 0;
109
+ color: #faf6e4;
110
+ }
111
+ }
112
+ a {
113
+ color: $primary;
114
+ border-bottom: 1px solid $primary;
115
+ &:hover {
116
+ color: $text_lt_default;
117
+ border-bottom: 1px solid $text_lt_default;
118
+ }
119
+ }
120
+ blockquote {
121
+ font-size: $font_larger;
122
+ padding: $space_sm $space_md;
123
+ font-style: italic;
124
+ p {
125
+ margin: 0;
126
+ }
127
+ }
128
+ &:focus-visible {
129
+ outline: unset;
130
+ border-top-color: $primary;
131
+ @include transition_default;
132
+ }
133
+ h1 {
134
+ font-size: $text_largest;
135
+ line-height: $text_larger;
136
+ font-weight: $bolder;
137
+ letter-spacing: $lspace_tight;
138
+ margin: 2.1rem 0 0 0;
139
+ }
140
+ h2 {
141
+ font-size: $text_larger;
142
+ line-height: $text_larger;
143
+ font-weight: $bolder;
144
+ letter-spacing: $lspace_tight;
145
+ margin: 1.9rem 0 0 0;
146
+ }
147
+ h3 {
148
+ font-size: $text_large;
149
+ line-height: $text_large;
150
+ font-weight: $bolder;
151
+ letter-spacing: $lspace_tight;
152
+ margin: 1.7rem 0 0 0;
153
+ }
154
+ h4,
155
+ h5,
156
+ h6 {
157
+ font-size: $text_base;
158
+ line-height: $text_base;
159
+ letter-spacing: $lspace_tight;
160
+ font-weight: $bolder;
161
+ }
162
+ hr {
163
+ margin: 2.2rem 0;
164
+ box-sizing: content-box;
165
+ overflow: hidden;
166
+ background: transparent;
167
+ border-bottom: 1px solid $transparent;
168
+ height: 1px;
169
+ padding: 0;
170
+ background-color: $border_light;
171
+ border: 0;
172
+ }
173
+ ol {
174
+ margin: 1rem 0 0 0;
175
+ padding-left: $space_md;
176
+ list-style: decimal;
177
+ li {
178
+ margin: 2px 0;
179
+ p {
180
+ margin: 0;
181
+ }
182
+ }
183
+ }
184
+ ul {
185
+ list-style-position: disc;
186
+ margin: 1rem 0 0 0;
187
+ padding-left: $space_md;
188
+ li {
189
+ margin: 2px 0;
190
+ p {
191
+ margin: 0;
192
+ }
193
+ }
194
+ }
195
+ }
196
+ }
197
+
198
+ .pb_tiptap_toolbar_dropdown_list_item {
199
+ &.is-active,
200
+ &:active {
201
+ color: $primary;
202
+ background-color: $bg_light;
203
+ border-radius: unset !important;
204
+ .pb_nav_list_item_text,
205
+ .pb_nav_list_item_icon_left {
206
+ color: $primary !important;
207
+ }
208
+ }
209
+ &:hover {
210
+ background-color: $neutral_subtle;
211
+ border-radius: unset !important;
212
+ .pb_nav_list_item_text,
213
+ .pb_nav_list_item_icon_left {
214
+ background-color: unset;
215
+ color: $text_lt_light !important;
216
+ }
217
+ .pb_nav_list_item_link {
218
+ background-color: unset !important;
219
+ }
220
+ }
221
+ }
222
+ .pb_rich_text_editor_advanced_container {
223
+ transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
224
+ &:focus-visible,
225
+ &:focus-within {
226
+ outline: unset;
227
+ box-shadow: 0 0 0 1px $primary;
228
+ border-radius: $border_rad_heaviest;
229
+ transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
230
+ }
231
+ }
@@ -0,0 +1 @@
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.
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+ import { RichTextEditor } from '../..'
3
+ import { useEditor, EditorContent } from "@tiptap/react"
4
+ import StarterKit from "@tiptap/starter-kit"
5
+ import Link from '@tiptap/extension-link'
6
+
7
+
8
+ const RichTextEditorAdvancedDefault = (props) => {
9
+
10
+ const editor = useEditor({
11
+ extensions: [
12
+ StarterKit,
13
+ Link
14
+ ],
15
+ content:"Add your text here. You can format your text, add links, quotes, and bullets."
16
+ })
17
+ if (!editor) {
18
+ return null
19
+ }
20
+
21
+
22
+
23
+
24
+ return (
25
+ <div>
26
+ <RichTextEditor
27
+ advancedEditor={editor}
28
+ {...props}
29
+ >
30
+ <EditorContent editor={editor}/>
31
+ </RichTextEditor>
32
+ </div>
33
+ )
34
+ }
35
+
36
+ export default RichTextEditorAdvancedDefault
@@ -0,0 +1,4 @@
1
+ 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.
2
+
3
+
4
+ NOTE: Once the Tiptap editor is initialized as shown below, you must pass that instance to the kit via the `advancedEditor` prop.
@@ -13,6 +13,7 @@ examples:
13
13
 
14
14
  react:
15
15
  - rich_text_editor_default: Default
16
+ - rich_text_editor_advanced_default: Advanced Default
16
17
  - rich_text_editor_simple: Simple
17
18
  - rich_text_editor_attributes: Attributes
18
19
  - rich_text_editor_focus: Focus
@@ -7,3 +7,4 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
7
7
  export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
8
8
  export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
9
9
  export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
10
+ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'