playbook_ui 15.8.0.pre.rc.0 → 15.8.0.pre.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d90a9283e859938c8668c9bda85da84fedc435fb8c2e944540fba1a7b834ced
-  data.tar.gz: 269fdbd32bd3da95347cffbcaca0e9c130e551c2288b0eb92a6f73e9d6e205fa
+  metadata.gz: d0177497af81bb89af7b26046f27197942cb10b7a6640df32234376c1f7cedcb
+  data.tar.gz: 164f59f14bfffc0a889b4859363c311d09dafddf5c1fce518000a42c4e647623
 SHA512:
-  metadata.gz: 8718b1da13b30dc286191523f1ba14e8ec1304389bdd0263f2b71ec6543473b20234090aca5a8d06d56716e9eed8334118429038a31f2e0983dac1c7503b1b59
-  data.tar.gz: 455f5232737b607d4c6c1d6b574e3bcfd5974246c2daff08bef7196af7e50e3ed3d4512fc4752240adb309ac74f1c56065e325ec7d15202ed3992da226a580a4
+  metadata.gz: 6c3ead358396ac6c1adf2c5a2a5af3409513bfc0a944fa7298d74135b66ea59f865e30a51167b6f81247967b5ac2be7326aa5717d5b3d0c2993a2a2a96831d48
+  data.tar.gz: 4a5d41bdcc5e01b9dc0a3ffbaba5292702873902e5325dfeba5759e54049e03c95ce6ba760a0c0e8b1c9bd35c0ca6958bbec137fe7a33da7d978148cc6bc5b2f

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -20,12 +20,23 @@ import {
     handleClickOutside,
 } from "./utilities";
 
+type CustomQuickPickDate = {
+    label: string;
+    value: string[] | { timePeriod: string; amount: number };
+};
+
+type CustomQuickPickDates = {
+    override?: boolean;
+    dates: CustomQuickPickDate[];
+};
+
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
     blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
+    customQuickPickDates?: CustomQuickPickDates;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -63,6 +74,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         blankSelection = '',
         children,
         className,
+        customQuickPickDates,
         dark = false,
         data = {},
         defaultValue = {},
@@ -95,7 +107,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     // ------------- Quick Pick ---------------------------------
     // Use QuickPick options when variant is "quickpick"
     const dropdownOptions = variant === "quickpick" 
-        ? getQuickPickOptions(rangeEndsToday) 
+        ? getQuickPickOptions(rangeEndsToday, customQuickPickDates) 
         : (options || []);
     // ----------------------------------------------------------
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.jsx

@@ -0,0 +1,56 @@
+import React from "react"
+import Dropdown from "../_dropdown"
+
+const DropdownQuickpickCustom = (props) => (
+  <div>
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            // Allow Playbook to handle the logic...
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            // Or, be explicit with an exact date range for more control...
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+        }}
+        label="Date Range"
+        marginBottom="sm"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 15 months",
+              value: {
+                timePeriod: "months",
+                amount: 15,
+              },
+            },
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"],
+            },
+          ],
+          override: false,
+        }}
+        label="Date Range - Append to Defaults"
+        onSelect={(selectedItem) => console.log(selectedItem)}
+        variant="quickpick"
+        {...props}
+    />
+  </div>
+)
+
+export default DropdownQuickpickCustom
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom.md

@@ -0,0 +1,10 @@
+The `customQuickPickDates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `timePeriod` and `amount` properties for dynamic date calculations:
+  - The `timePeriod` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.html.erb

@@ -0,0 +1,64 @@
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    dates: [
+      # Allow Playbook to handle the logic...
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      # Or, be explicit with an exact date range for more control...
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom",
+  label: "Date Range",
+  margin_bottom: "sm",
+  variant: "quickpick"
+}) %>
+
+<%= pb_rails("dropdown", props: {
+  custom_quick_pick_dates: {
+    override: false,
+    dates: [
+      {
+        label: "Last 15 months",
+        value: {
+          time_period: "months",
+          amount: 15
+        }
+      },
+      {
+        label: "First Week of June 2022",
+        value: ["06/01/2022", "06/07/2022"]
+      }
+    ]
+  },
+  id: "date-range-quickpick-custom-append-to-defaults",
+  label: "Date Range - Append to Defaults",
+  variant: "quickpick"
+}) %>
+
+<script>
+  const dropdown1 = document.getElementById("date-range-quickpick-custom");
+  if (dropdown1) {
+    dropdown1.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+
+  const dropdown2 = document.getElementById("date-range-quickpick-custom-append-to-defaults");
+  if (dropdown2) {
+    dropdown2.addEventListener("pb:dropdown:selected", (e) => {
+      const option = e.detail;
+      console.log("Selected option:", option);
+    });
+  }
+</script>
+

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_custom_rails.md

@@ -0,0 +1,10 @@
+The `custom_quick_pick_dates` prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: `dates` and `override`.
+
+**The `dates` property** accepts an array of objects. Each object has `label` and `value` properties. The `label` is what will be displayed in the dropdown menu. The `value` property defines the date range that will be selected, and can be:
+- An array of two date strings representing a specific range (e.g., `["06/01/2022", "06/07/2022"]`)
+- An object with `time_period` and `amount` properties for dynamic date calculations:
+  - The `time_period` property accepts `"days"`, `"weeks"`, `"months"`, `"quarters"`, or `"years"`, representing past time periods calculated from today.
+  - The `amount` property accepts any number.
+
+**The `override` property** is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is `true` (replaces defaults). Set to `false` to append your custom dates to the default quick pick options.
+

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

@@ -25,6 +25,7 @@ examples:
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom_rails: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
 
@@ -57,6 +58,7 @@ examples:
   - dropdown_quickpick: Quick Pick Variant
   - dropdown_quickpick_range_end: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
+  - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
 
 

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

@@ -26,4 +26,5 @@ export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_
 export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
-export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -15,6 +15,8 @@ module Playbook
       prop :default_value
       prop :blank_selection, type: Playbook::Props::String,
                              default: ""
+      prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
+                                     default: {}
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -94,7 +96,10 @@ module Playbook
       end
 
       def quickpick_options
-        QuickpickHelper.get_quickpick_options(range_ends_today: range_ends_today)
+        QuickpickHelper.get_quickpick_options(
+          range_ends_today: range_ends_today,
+          custom_quick_pick_dates: custom_quick_pick_dates
+        )
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -539,4 +539,125 @@ test("quickpick option values are Date objects", () => {
   expect(endDate.getTime()).not.toBeNaN()
   
   expect(endDate.getTime()).toBeGreaterThanOrEqual(startDate.getTime())
+})
+
+test("customQuickPickDates overrides default options when override is true or undefined", () => {
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 15 months",
+              value: { timePeriod: "months", amount: 15 }
+            },
+            {
+              label: "Custom Range",
+              value: ["06/01/2022", "06/07/2022"]
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  expect(options.length).toBe(2)
+  expect(options[0]).toHaveTextContent("Last 15 months")
+  expect(options[1]).toHaveTextContent("Custom Range")
+})
+
+test("customQuickPickDates appends to defaults when override is false", () => {
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          override: false,
+          dates: [
+            {
+              label: "Custom Option",
+              value: { timePeriod: "days", amount: 30 }
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const options = kit.querySelectorAll('.pb_dropdown_option_list')
+  
+  expect(options.length).toBe(11)
+  expect(options[0]).toHaveTextContent("Today")
+  expect(options[10]).toHaveTextContent("Custom Option")
+})
+
+test("customQuickPickDates with explicit date array returns correct values", () => {
+  const onSelectMock = jest.fn()
+  
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "First Week of June 2022",
+              value: ["06/01/2022", "06/07/2022"]
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        onSelect={onSelectMock}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  
+  fireEvent.click(option)
+  
+  const selectedItem = onSelectMock.mock.calls[0][0]
+  
+  expect(selectedItem.label).toBe("First Week of June 2022")
+  expect(Array.isArray(selectedItem.value)).toBe(true)
+  expect(selectedItem.value.length).toBe(2)
+})
+
+test("customQuickPickDates with timePeriod calculates dates correctly", () => {
+  const onSelectMock = jest.fn()
+  
+  render(
+    <Dropdown
+        customQuickPickDates={{
+          dates: [
+            {
+              label: "Last 7 days",
+              value: { timePeriod: "days", amount: 7 }
+            }
+          ]
+        }}
+        data={{ testid: testId }}
+        onSelect={onSelectMock}
+        variant="quickpick"
+    />
+  )
+  
+  const kit = screen.getByTestId(testId)
+  const option = kit.querySelector('.pb_dropdown_option_list')
+  
+  fireEvent.click(option)
+  
+  const selectedItem = onSelectMock.mock.calls[0][0]
+  
+  expect(selectedItem.label).toBe("Last 7 days")
+  expect(Array.isArray(selectedItem.value)).toBe(true)
+  
+  const [startDate, endDate] = selectedItem.value
+  expect(startDate instanceof Date).toBe(true)
+  expect(endDate instanceof Date).toBe(true)
+  
+  const today = new Date()
+  expect(endDate.toDateString()).toBe(today.toDateString())
 })

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -11,8 +11,78 @@ type QuickPickOption = {
   id?: string;
 };
 
+type CustomQuickPickDate = {
+  label: string;
+  value: string[] | { timePeriod: string; amount: number };
+};
+
+type CustomQuickPickDates = {
+  override?: boolean;
+  dates: CustomQuickPickDate[];
+};
+
+// Helper function to calculate date range from timePeriod and amount
+const calculateDateRange = (timePeriod: string, amount: number): Date[] => {
+  const endDate = new Date();
+  const startDate = new Date();
+
+  switch (timePeriod) {
+    case 'days':
+      startDate.setDate(endDate.getDate() - amount);
+      break;
+    case 'weeks':
+      startDate.setDate(endDate.getDate() - (amount * 7));
+      break;
+    case 'months':
+      startDate.setMonth(endDate.getMonth() - amount);
+      break;
+    case 'quarters':
+      startDate.setMonth(endDate.getMonth() - (amount * 3));
+      break;
+    case 'years':
+      startDate.setFullYear(endDate.getFullYear() - amount);
+      break;
+    default:
+      throw new Error('Invalid time period');
+  }
+  return [startDate, endDate];
+};
+
+// Helper to format date for display
+const formatDate = (date: Date) => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+
+  return `${month}/${day}/${year}`;
+};
+
+// Helper to create a QuickPickOption from a custom date
+const createOptionFromCustomDate = (customDate: CustomQuickPickDate): QuickPickOption => {
+  let dateRange: Date[];
+  
+  if (Array.isArray(customDate.value)) {
+    // Explicit date range as string array
+    dateRange = customDate.value.map((dateStr: string) => new Date(dateStr));
+  } else {
+    // Calculate from timePeriod and amount
+    dateRange = calculateDateRange(
+      customDate.value.timePeriod,
+      customDate.value.amount
+    );
+  }
+
+  return {
+    label: customDate.label,
+    value: dateRange,
+    formattedStartDate: formatDate(dateRange[0]),
+    formattedEndDate: formatDate(dateRange[1]),
+    id: `quickpick-${customDate.label.toLowerCase().replace(/\s+/g, '-')}`,
+  };
+};
+
 // Helper to get QuickPick options with date ranges
-const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
+const getQuickPickOptions = (rangeEndsToday = false, customQuickPickDates?: CustomQuickPickDates): QuickPickOption[] => {
   const today = new Date();
   const yesterday = DateTime.getYesterdayDate(new Date());
 
@@ -36,14 +106,7 @@ const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
   const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
   const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
 
-  const formatDate = (date: Date) => {
-  const day = String(date.getDate()).padStart(2, "0")
-  const month = String(date.getMonth() + 1).padStart(2, "0")
-  const year = date.getFullYear()
-
-  return `${month}/${day}/${year}`
-}
-  return [
+  const defaultOptions: QuickPickOption[] = [
     { label: 'Today', value: [today, today], id: 'quickpick-today' },
     { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
     { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
@@ -55,6 +118,19 @@ const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
     { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
     { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
   ];
+
+  // Handle customQuickPickDates and override logic
+  if (customQuickPickDates && customQuickPickDates.dates && customQuickPickDates.dates.length > 0) {
+    const customOptions = customQuickPickDates.dates.map(createOptionFromCustomDate);
+    
+    if (customQuickPickDates.override === false) {
+      return [...defaultOptions, ...customOptions];
+    }
+    
+    return customOptions;
+  }
+
+  return defaultOptions;
 };
 
 export default getQuickPickOptions

data/app/pb_kits/playbook/pb_dropdown/quickpick_helper.rb

@@ -4,7 +4,31 @@ module Playbook
   module PbDropdown
     module QuickpickHelper
       class << self
-        def get_quickpick_options(range_ends_today: false)
+        def get_quickpick_options(range_ends_today: false, custom_quick_pick_dates: {})
+          default_options = build_default_options(range_ends_today)
+
+          # Handle custom_quick_pick_dates
+          return default_options if custom_quick_pick_dates.blank?
+
+          dates = custom_quick_pick_dates[:dates] || custom_quick_pick_dates["dates"]
+          return default_options if dates.blank?
+
+          custom_options = dates.map { |date_config| build_custom_option(date_config) }
+
+          # Override logic
+          override = custom_quick_pick_dates[:override]
+          override = custom_quick_pick_dates["override"] if override.nil?
+
+          if override == false
+            default_options + custom_options
+          else
+            custom_options
+          end
+        end
+
+      private
+
+        def build_default_options(range_ends_today)
           today = Date.today
           yesterday = today - 1.day
 
@@ -42,7 +66,64 @@ module Playbook
           ]
         end
 
-      private
+        def build_custom_option(date_config)
+          label = date_config[:label] || date_config["label"]
+          value = date_config[:value] || date_config["value"]
+
+          date_range = calculate_date_range(value)
+          start_date = date_range[0]
+          end_date = date_range[1]
+
+          {
+            id: "quickpick-#{label.downcase.gsub(/\s+/, '-')}",
+            label: label,
+            value: [start_date.to_s, end_date.to_s],
+            formatted_start_date: format_date(start_date),
+            formatted_end_date: format_date(end_date),
+          }
+        end
+
+        def calculate_date_range(value)
+          # Parse date strings if value is an array
+          if value.is_a?(Array)
+            [parse_date_string(value[0]), parse_date_string(value[1])]
+          else
+            # Calculate date range from time_period and amount
+            time_period = value[:time_period] || value["time_period"] || value[:timePeriod] || value["timePeriod"]
+            amount = value[:amount] || value["amount"]
+
+            end_date = Date.today
+            start_date = calculate_start_date(time_period, amount, end_date)
+
+            [start_date, end_date]
+          end
+        end
+
+        def parse_date_string(date_str)
+          # Handle US date format (MM/DD/YYYY) because Ruby's Date.parse defaults to European format (DD/MM/YYYY)
+          if date_str.include?("/")
+            Date.strptime(date_str, "%m/%d/%Y")
+          else
+            Date.parse(date_str)
+          end
+        end
+
+        def calculate_start_date(time_period, amount, end_date)
+          case time_period.to_s
+          when "days"
+            end_date - amount.days
+          when "weeks"
+            end_date - amount.weeks
+          when "months"
+            end_date - amount.months
+          when "quarters"
+            end_date - (amount * 3).months
+          when "years"
+            end_date - amount.years
+          else
+            raise ArgumentError, "Invalid time period: #{time_period}"
+          end
+        end
 
         def format_date(date)
           date.strftime("%m/%d/%Y")

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -4,7 +4,7 @@ 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 EditorButton  from "./EditorButton";
 import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";

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

@@ -44,6 +44,8 @@ type RichTextEditorProps = {
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
+  inputHeight?: "sm" | "md" | "lg",
+  inputMinHeight?: "sm" | "md" | "lg",
   simple?: boolean,
   sticky?: boolean,
   template: string,
@@ -68,6 +70,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     name,
     onChange = noop,
     placeholder,
+    inputHeight,
+    inputMinHeight,
     simple = false,
     sticky = false,
     template = '',
@@ -214,9 +218,10 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       {
         advancedEditor ? (
           <div 
-              className={classnames("pb_rich_text_editor_advanced_container", { 
-              ["toolbar-active"]: shouldShowToolbar,
-              })}
+              className={classnames(
+                "pb_rich_text_editor_advanced_container",
+                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+              )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

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

@@ -205,6 +205,59 @@
     }
   }
 }
+
+.pb_rich_text_editor_advanced_container.input_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      height: 131px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_md {
+  div {
+    .tiptap.ProseMirror {
+      height: 180px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      height: 230px;
+      overflow: auto;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_sm {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 131px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_md {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 180px;
+    }
+  }
+}
+
+.pb_rich_text_editor_advanced_container.input_min_height_lg {
+  div {
+    .tiptap.ProseMirror {
+      min-height: 230px;
+    }
+  }
+}
+
+
 .tiptap-content {
   @include preview_tiptap_first_child;
   a {