playbook_ui 15.1.0.pre.alpha.testingtiptap11043 → 15.1.0.pre.alpha.timelinescss11189

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, simple }: any): React.ReactElement => {
+const EditorToolbar = ({ editor, extensions }: any): React.ReactElement => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -33,21 +33,6 @@ const EditorToolbar = ({ editor, extensions, simple }: 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"
@@ -57,25 +42,6 @@ const EditorToolbar = ({ editor, extensions, simple }: any): React.ReactElement
           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
         >
@@ -103,10 +69,6 @@ const EditorToolbar = ({ editor, extensions, simple }: any): React.ReactElement
             }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
-        </>
-          )
-        }
-       
       </Flex>
     </Background>
   );

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

@@ -12,6 +12,7 @@
 }
 
 @mixin preview_tiptap_p {
+    margin: 1rem 0 0 0;
     min-height: 1rem;
 }
 
@@ -55,9 +56,13 @@
 }
 
 @mixin preview_tiptap_blockquote {
-    border-left: 3px solid $text_lt_lighter;
-    margin: 1.5rem 0;
-    padding-left: 1rem;
+    font-size: $font_larger;
+    padding: $space_sm $space_md;
+    font-style: italic;
+    margin: 1rem 0 0 0;
+    p {
+        margin: 0;
+    }
 }
 
 @mixin preview_tiptap_h1 {
@@ -65,6 +70,7 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
+    margin: 2.1rem 0 0 0;
 }
 
 @mixin preview_tiptap_h2 {
@@ -72,6 +78,7 @@
     line-height: $text_larger;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
+    margin: 1.9rem 0 0 0;
 }
 
 @mixin preview_tiptap_h3 {
@@ -79,6 +86,7 @@
     line-height: $text_large;
     font-weight: $bolder;
     letter-spacing: $lspace_tight;
+    margin: 1.7rem 0 0 0;
 }
 
 @mixin preview_tiptap_smaller_headings {
@@ -86,6 +94,7 @@
     line-height: $text_base;
     letter-spacing: $lspace_tight;
     font-weight: $bolder;
+    margin: 1rem 0 0 0;
 }
 
 @mixin preview_tiptap_hr {
@@ -101,6 +110,7 @@
 }
 
 @mixin preview_tiptap_ol {
+    margin: 1rem 0 0 0;
     padding-left: $space_md;
     list-style: decimal;
     li {

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

@@ -183,7 +183,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
             {advancedEditorToolbar && (
               <EditorToolbar editor={advancedEditor}
                   extensions={extensions}
-                  simple={simple}
               />
             )}
           { children }

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

@@ -75,6 +75,16 @@
       margin-top: 0;
     }
 
+    h4,
+    h5,
+    h6,
+    ul,
+    ol,
+    blockquote,
+    p {
+      margin: 1rem 0 0 0;
+    }
+
     code {
       @include preview_tiptap_code;
     }

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

@@ -16,7 +16,6 @@ examples:
   - rich_text_editor_advanced_default: Advanced Default
   - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
-  - rich_text_editor_advanced_simple: Advanced (Simple)
   - 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

@@ -11,4 +11,3 @@ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_ad
 export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
 export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
 export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
-export { default as RichTextEditorAdvancedSimple } from './_rich_text_editor_advanced_simple.jsx'

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -3,6 +3,9 @@
 @import "../tokens/colors";
 
 .pb_text_input_kit {
+  label {
+    display: block !important;
+  }
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;