playbook_ui 14.1.0.pre.alpha.PBNTR417addcolorsupdatedefaultcolor3608 → 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5d14c55461df216c1a1d2757bf7035194b7480c4ed582d5644376b4d5ebb3ccd
-  data.tar.gz: ca7918de17e4fd6585896955df44528e29740e28434e4f1d6b86be3e2c7156a0
+  metadata.gz: a8d134303f815c6e0076c01a0aa625cda4c97ceff14ec8eff52b2716ebbb60a8
+  data.tar.gz: 1188d83da657ab95a2c0fb418f04734f2039c73278e1191fc8b75b14a37348f4
 SHA512:
-  metadata.gz: c1fd3cb4bd75222ace6058f9e514eb9785ed9b05177d0de60dd305abbf341a000b55f90dae080ec3396fc2ebdcaf79d23bd8255755646ec613808cc65c824286
-  data.tar.gz: 8d6ba7abbee7dad6cea9a4a7acfc15396b742689e9b6033a7a7fbae510c96ea582d83f8e554cb81ff81147b54836e1403a4687cac17d79926165f2e20154a7ae
+  metadata.gz: d04fdd2687e6accfad40120bbeba65830b7be5c3a15157d21a2ed1cd7b4d0c13202179cf5eeece62f5a7f21559e79af4da3760f7b83ef76ad70c7df607563a75
+  data.tar.gz: 173ab72b24320b444d7f5930fd41e2fae8a2122bacf85e46f142ac8860d05d12dcee0111bcd730ebbdba5586fdceab590667b7c560f921218140e46803b46f06

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -7,7 +7,10 @@
 
 $selector: ".pb_form_pill";
 $pb_form_pill_height: 27px;
-$form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $product_colors));
+$form_pill_colors: (
+  primary: map-get($status_color_text, "primary"),
+  neutral: map-get($status_color_text, "neutral"),
+);
 
 
 [class^=pb_form_pill_kit] {
@@ -33,18 +36,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
           color: $text_lt_default;
         }
       }
-      @if ($color_name == "warning") {
-        background-color: mix($yellow, $card_light, 10%);
-        .pb_form_pill_icon {
-          color: $yellow;
-        }
-      }
-      @if ($color_name == "accessories") {
-        background-color: mix($product_8_background, $card_light, 10%);
-        .pb_form_pill_icon {
-          color: $product_8_background;
-        }
-      }
       transition: background-color 0.2s ease;
       box-shadow: none;
       @media (hover:hover) {
@@ -54,24 +45,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             background-color: mix($neutral, $card_light, 20%);
             border: 1px solid $border_light;
           }
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 20%);
-          }
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 20%);
-          }
         }
         &:active {
           background-color: mix($color_value, $card_light, 30%);
           @if ($color_name == "neutral") {
             background-color: mix($neutral, $card_light, 30%);
           }
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 30%);
-          }
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 30%);
-          }
         }
       }
       #{$selector}_text {
@@ -79,9 +58,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
         padding: 0 $space-xs;
       }
       #{$selector}_close {
@@ -100,23 +76,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             background-color: mix($neutral, $card_light, 60%);
           }
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
-        &:hover {
-          background-color: mix($color_value, $card_light, 40%);
-          @if ($color_name == "warning") {
-            background-color: mix($yellow, $card_light, 40%);
-          }
-        }
-        @if ($color_name == "accessories") {
-          color: $product_8_background;
-        }
-        &:hover {
-          @if ($color_name == "accessories") {
-            background-color: mix($product_8_background, $card_light, 40%);
-          }
-        }
       }
       #{$selector}_tag {
         color: $color_value;
@@ -124,9 +83,6 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         @if ($color_name == "neutral") {
           color: $text_lt_default;
         }
-        @if ($color_name == "warning") {
-          color: $yellow;
-        }
       }
     }
   }
@@ -176,23 +132,25 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   }
   &.dark {
     @each $color_name, $color_value in $form_pill_colors {
+      // In dark mode, the base patterns below are needed for the next tickets for success, warning, error, info. 
+      // Primary and Neutral are exceptions to the general rule in the handoff 
       &[class*=_#{$color_name}]  {
-        background-color: mix($color_value, $card_dark, 10%);
-        .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-          color: $color_name;
-        }
-        .pb_form_pill_close {
-          color: $color_name;
-          &:hover {
-            background-color: mix($color_value, $card_dark, 40%);
-          }
-        }
-        &:hover {
-          background-color: mix($color_value, $card_dark, 20%);
-        }
-        &:active {
-          background-color: mix($color_value, $card_dark, 30%);
-        }
+      //   background-color: mix($color_value, $card_dark, 10%);
+        // .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
+        //   color: $color_name;
+        // }
+        // .pb_form_pill_close {
+        //   color: $color_name;
+        //   &:hover {
+        //     background-color: mix($color_value, $card_dark, 40%);
+        //   }
+        // }
+        // &:hover {
+        //   background-color: mix($color_value, $card_dark, 20%);
+        // }
+        // &:active {
+        //   background-color: mix($color_value, $card_dark, 30%);
+        // }
         @if ($color_name == "neutral") {
           background-color: transparent;
           border: 1px solid $border_dark;
@@ -227,192 +185,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
             }
           }
           &:hover {
-            background-color: mix($active_dark, $card_dark, 20%);
+            background-color: mix($active_dark, $card_dark, 20px);
           }
           &:active {
             background-color: mix($active_dark, $card_dark, 30%);
           }
         }
-        @if ($color_name == "data_1") {
-          background-color: mix($active_dark, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: mix($active_dark, $card_light, 90%);
-          }
-          .pb_form_pill_close {
-            color: mix($active_dark, $card_light, 90%);
-            &:hover {
-              background-color: mix($active_dark, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($active_dark, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($data_1, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "data_6") {
-          background-color: mix($data_6, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $text_dk_light;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_light;
-            &:hover {
-              background-color: mix($text_dk_light, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($data_6, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($data_6, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "windows") {
-          background-color: mix($product_1_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_1_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_1_highlight;
-            &:hover {
-              background-color: mix($product_1_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_1_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_1_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "siding") {
-          background-color: mix($product_2_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_2_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_2_highlight;
-            &:hover {
-              background-color: mix($product_2_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_2_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_2_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "roofing") {
-          background-color: mix($product_5_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_5_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_5_highlight;
-            &:hover {
-              background-color: mix($product_5_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_5_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_5_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "doors") {
-          background-color: mix($product_3_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_3_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_3_highlight;
-            &:hover {
-              background-color: mix($product_3_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_3_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_3_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "gutters") {
-          background-color: mix($product_6_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_6_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_6_highlight;
-            &:hover {
-              background-color: mix($product_6_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_6_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_6_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "solar") {
-          background-color: mix($product_4_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_4_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_4_highlight;
-            &:hover {
-              background-color: mix($product_4_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_4_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_4_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "insulation") {
-          background-color: mix($product_7_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $product_7_highlight;
-          }
-          .pb_form_pill_close {
-            color: $product_7_highlight;
-            &:hover {
-              background-color: mix($product_7_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_7_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_7_highlight, $card_dark, 30%);
-          }
-        }
-        @if ($color_name == "accessories") {
-          background-color: mix($product_8_highlight, $card_dark, 10%);
-          .pb_form_pill_text, .pb_form_pill_tag, .pb_form_pill_icon {
-            color: $text_dk_light;
-          }
-          .pb_form_pill_close {
-            color: $text_dk_light;
-            &:hover {
-              background-color: mix($product_8_highlight, $card_dark, 40%);
-            }
-          }
-          &:hover {
-            background-color: mix($product_8_highlight, $card_dark, 20%);
-          }
-          &:active {
-            background-color: mix($product_8_highlight, $card_dark, 30%);
-          }
-        }
       }
     }
   }

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -13,7 +13,7 @@ test('should render classname', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_form_pill_kit_neutral none')
+    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
 });
 
 test('displays text content', () => {
@@ -31,13 +31,13 @@ test('displays text content', () => {
 test('displays color variant', () => {
     render(
         <FormPill
-            color={"primary"}
+            color={"neutral"}
             data={{ testid: testId }}
             text={"test"}
         />
     )
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
 });
 
 test('displays size variant', () => {
@@ -49,7 +49,7 @@ test('displays size variant', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_neutral small none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
 });
 
 test('displays icon', () => {
@@ -60,5 +60,5 @@ test('displays icon', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_neutral_icon none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
 });

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -17,7 +17,7 @@ type FormPillProps = {
   avatarUrl?: string,
   size?: string,
   textTransform?: 'none' | 'lowercase',
-  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
+  color?: "primary" | "neutral",
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,
@@ -39,7 +39,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     closeProps = {},
     size = '',
     textTransform = 'none',
-    color = "neutral",
+    color = "primary",
     data = {},
     tabIndex,
     icon = "",

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

@@ -6,7 +6,6 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
@@ -14,4 +13,3 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
-  - form_pill_colors: Form Pill Colors

data/app/pb_kits/playbook/pb_form_pill/docs/index.js

@@ -3,4 +3,3 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
-export { default as FormPillColors } from './_form_pill_colors.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -12,8 +12,8 @@ module Playbook
                             values: %w[none lowercase],
                             default: "none"
       prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
-                   default: "neutral"
+                   values: %w[primary neutral],
+                   default: "primary"
       prop :tabindex
       prop :icon
 

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -34,7 +34,6 @@ type MultiLevelSelectProps = {
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
   variant?: "multi" | "single"
-  color?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -51,8 +50,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
-    variant = "multi",
-    color = "neutral"
+    variant = "multi"
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -469,7 +467,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? returnedArray.map((item, index) => (
                       <FormPill
-                          color={color}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}
@@ -482,7 +479,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 inputDisplay === "pills"
                   ? defaultReturn.map((item, index) => (
                       <FormPill
-                          color={color}
                           key={index}
                           onClick={(event: any) => handlePillClose(event, item)}
                           text={item.label}

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

@@ -6,7 +6,6 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
-  - multi_level_select_color: Color
 
   react:
   - multi_level_select_default: Default
@@ -14,4 +13,3 @@ examples:
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
-  - multi_level_select_color: Color

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -3,4 +3,3 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
-export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -19,9 +19,6 @@ module Playbook
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[multi single],
                      default: "multi"
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
-                   default: "neutral"
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -37,7 +34,6 @@ module Playbook
           selectedIds: selected_ids,
           input_name: input_name,
           variant: variant,
-          color: color,
         }
       end
     end

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

@@ -3,18 +3,20 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-@mixin preview_first_child {
+
+// Tiptap mixins section (React Advanced Editor)
+@mixin preview_tiptap_first_child {
     :first-child {
         margin-top: 0;
     }
 }
 
-@mixin preview_p {
+@mixin preview_tiptap_p {
     margin: 1rem 0 0 0;
     min-height: 1rem;
 }
 
-@mixin preview_code {
+@mixin preview_tiptap_code {
     font-family: monospace;
     background: $bg_light;
     padding: 0.1rem 0.3rem;
@@ -23,7 +25,7 @@
     overflow: hidden;
 }
 
-@mixin preview_pre_codeblock {
+@mixin preview_tiptap_pre_codeblock {
     display: inline-block;
     width: 100%;
     vertical-align: top;
@@ -44,7 +46,7 @@
     }
 }
 
-@mixin preview_a {
+@mixin preview_tiptap_a {
     color: $primary;
     border-bottom: 1px solid $primary;
     &:hover {
@@ -53,7 +55,7 @@
     }
 }
 
-@mixin preview_blockquote {
+@mixin preview_tiptap_blockquote {
     font-size: $font_larger;
     padding: $space_sm $space_md;
     font-style: italic;
@@ -63,7 +65,7 @@
     }
 }
 
-@mixin preview_h1 {
+@mixin preview_tiptap_h1 {
     font-size: $text_largest;
     line-height: $text_larger;
     font-weight: $bolder;
@@ -71,7 +73,7 @@
     margin: 2.1rem 0 0 0;
 }
 
-@mixin preview_h2 {
+@mixin preview_tiptap_h2 {
     font-size: $text_larger;
     line-height: $text_larger;
     font-weight: $bolder;
@@ -79,7 +81,7 @@
     margin: 1.9rem 0 0 0;
 }
 
-@mixin preview_h3 {
+@mixin preview_tiptap_h3 {
     font-size: $text_large;
     line-height: $text_large;
     font-weight: $bolder;
@@ -87,7 +89,7 @@
     margin: 1.7rem 0 0 0;
 }
 
-@mixin preview_smaller_headings {
+@mixin preview_tiptap_smaller_headings {
     font-size: $text_base;
     line-height: $text_base;
     letter-spacing: $lspace_tight;
@@ -95,7 +97,7 @@
     margin: 1rem 0 0 0;
 }
 
-@mixin preview_hr {
+@mixin preview_tiptap_hr {
     margin: 2.2rem 0;
     box-sizing: content-box;
     overflow: hidden;
@@ -107,7 +109,7 @@
     border: 0; 
 }
 
-@mixin preview_ol {
+@mixin preview_tiptap_ol {
     margin: 1rem 0 0 0;
     padding-left: $space_md;
     list-style: decimal;
@@ -119,7 +121,7 @@
     }
 }
 
-@mixin preview_ul {
+@mixin preview_tiptap_ul {
     list-style-position: disc;
     margin: 1rem 0 0 0;
     padding-left: $space_md;
@@ -130,3 +132,37 @@
       }
     }
 }
+
+// Trix mixins section (Rails and React default editor)
+@mixin preview_trix_div {
+    line-height: 1.4;
+}
+
+@mixin preview_trix_h1 {
+    font-size: 2em;
+    line-height: 1.4; 
+}
+@mixin preview_trix_blockquote {
+    border: 0 solid #ccc;
+    border-left-width: 0.3em;
+    margin-left: 0.3em;
+    padding-left: 0.6em; 
+    line-height: 1.4;
+}
+
+@mixin preview_trix_li {
+    line-height: 1.4;
+    margin-left: $space_sm;
+}
+
+@mixin preview_trix_pre {
+    display: inline-block;
+    width: 100%;
+    vertical-align: top;
+    font-family: monospace;
+    font-size: 0.9em;
+    padding: 0.5em;
+    white-space: pre;
+    background-color: #eee;
+    overflow-x: auto; 
+}

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

@@ -10,18 +10,6 @@
 @import "./trix_styles";
 @import "./tiptap_styles";
 
-.trix-content pre {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-  font-family: monospace;
-  font-size: 0.9em;
-  padding: 0.5em;
-  white-space: pre;
-  background-color: #ccc !important;
-  color: black !important;
-  overflow-x: auto;
-}
 [class^=pb_rich_text_editor_kit] {
   // Disables File Attatchment Button in Toolbar
   trix-toolbar [data-trix-button-group="file-tools"] {