playbook_ui 16.1.0.pre.alpha.play264213818 → 16.1.0.pre.alpha.play274314102

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb

@@ -65,7 +65,7 @@
 }] %>
 
 <%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-label-rails",
-    label: "Select a department",
-    tree_data: treeData
+  id: "select_a_department",
+  label: "Select a Department",
+  tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx

@@ -73,14 +73,11 @@ const MultiLevelSelectDefault = (props) => {
   return (
     <div>
       <MultiLevelSelect
-          id='multiselect-label'
+          id="select_a_department"
           label="Select a Department"
           onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
+            console.log("Selected Items", selectedNodes)
+          }
           treeData={treeData}
           {...props}
       />
@@ -88,4 +85,4 @@ const MultiLevelSelectDefault = (props) => {
   )
 };
 
-export default MultiLevelSelectDefault;
+export default MultiLevelSelectDefault;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.md

@@ -0,0 +1,3 @@
+The MultiLevelSelect component optionally accepts a `label` prop to produce a label above the input. 
+
+Add an `id` to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -192,7 +192,7 @@ describe('MultiLevelSelect multi variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#multi-disabled-test_input')
     fireEvent.click(input)
     
     const disabledCheckbox = kit.querySelector('input[type="checkbox"][disabled]')
@@ -227,7 +227,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-disabled-test_input')
     fireEvent.click(input)
     
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -246,7 +246,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-disabled-click-test_input')
     fireEvent.click(input)
     
     const disabledRadio = kit.querySelector('input[type="radio"][disabled]')
@@ -267,7 +267,7 @@ describe('MultiLevelSelect single variant', () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    const input = kit.querySelector('#multiselect_input')
+    const input = kit.querySelector('#single-enabled-click-test_input')
     fireEvent.click(input)
     
     const enabledRadio = kit.querySelector('input[type="radio"]:not([disabled])')

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -7,6 +7,7 @@ import { globalProps } from "../utilities/globalProps"
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
+import colors from '../tokens/exports/_colors.module.scss'
 import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
@@ -25,6 +26,7 @@ type PassphraseProps = {
   inputProps?: GenericObject,
   label?: string,
   onChange: (inputValue: string) => void,
+  requiredIndicator?: boolean,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
@@ -43,6 +45,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
     onChange = () => undefined,
+    requiredIndicator = false,
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -99,6 +102,7 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
 
   const shieldIcon = getAllIcons()["shieldCheck"]
   const eyeIcon = getAllIcons()["eye"]
+  const hasLabel = label && label !== ""
 
   return (
     <div
@@ -109,11 +113,22 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
         id={id}
     >
       <label>
-        <Flex align="baseline">
-          <Caption
-              className="passphrase-label"
-              text={label}
-          />
+        <Flex
+            align="baseline"
+            {...(hasLabel ? { marginBottom: "xs" } : {})}
+        >
+          {hasLabel && (requiredIndicator ? (
+            <Caption
+                className="passphrase-label"
+            >
+              {label} <span style={{ color: `${colors.error}` }}>*</span>
+            </Caption>
+          ) : (
+            <Caption
+                className="passphrase-label"
+                text={label}
+            />
+          ))}
           {tips.length > 0 && !confirmation &&
             <PbReactPopover
                 className="passphrase-tips"
@@ -163,22 +178,40 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
               {...inputProps}
           />
           <span
+              aria-label={
+                showPassphrase
+                  ? "Passphrase currently visible. Click icon to hide password"
+                  : "Passphrase currently hidden. Click icon to reveal password"
+              }
+              aria-pressed={showPassphrase}
               className="show-passphrase-icon"
               onClick={toggleShowPassphrase}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  toggleShowPassphrase(e as any)
+                }
+              }}
+              role="button"
+              tabIndex={0}
           >
             <Body
                 className={showPassphrase ? "hide-icon" : ""}
                 color="light"
                 dark={dark}
             >
-              <Icon icon="eye-slash" />
+              <Icon 
+                  aria={{ label: "eye icon" }} 
+                  icon="eye-slash" 
+              />
             </Body>
             <Body
                 className={showPassphrase ? "" : "hide-icon"}
                 color="light"
                 dark={dark}
             >
-            <Icon  
+            <Icon 
+                aria={{ label: "eye icon" }} 
                 className="svg-inline--fa"
                 customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
             />

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -120,6 +120,7 @@ const PassphraseMeterSettings = (props) => {
             "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
           }
         </Body>
+        <br/>
         <Passphrase
             label={"Type your passphrase"}
             onChange={handleChange}

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("passphrase", props: {
+  id: "passphrase_required_indicator",
+  label: "Passphrase",
+  placeholder: "Enter passphrase",
+  required_indicator: true,
+  value: "passphrase",
+}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+
+import Passphrase from '../_passphrase'
+
+const PassphraseRequiredIndicator = (props) => {
+  const [passphrase, setPassphrase] = useState('')
+  const handleOnChangePassphrase = (e) => {
+    setPassphrase(e.target ? e.target.value : e)
+  }
+
+  return (
+      <Passphrase
+          id="passphrase_required_indicator"
+          label="Passphrase"
+          name="passphrase"
+          onChange={handleOnChangePassphrase}
+          requiredIndicator
+          value={passphrase}
+          {...props}
+      />
+  )
+}
+
+export default PassphraseRequiredIndicator

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -9,6 +9,7 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
+  - passphrase_required_indicator: Required Indicator
 
   react:
   - passphrase_default: Default
@@ -19,3 +20,4 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
+  - passphrase_required_indicator: Required Indicator

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

@@ -6,3 +6,4 @@ export { default as PassphraseTips } from './_passphrase_tips'
 export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
 export { default as PassphraseCommon } from './_passphrase_common'
 export { default as PassphraseBreached } from './_passphrase_breached'
+export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -10,6 +10,7 @@ module Playbook
                              values: %w[always xs sm md lg xl],
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
+      prop :required_indicator, type: Playbook::Props::Boolean, default: false
       prop :value, type: Playbook::Props::String
 
       def classname
@@ -23,6 +24,7 @@ module Playbook
           confirmation: confirmation,
           inputProps: input_props,
           label: label,
+          requiredIndicator: required_indicator,
           showTipsBelow: show_tips_below,
           tips: tips,
           uncontrolled: true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import { render, screen, within } from '../utilities/test-utils'
 import { Passphrase } from 'playbook-ui'
 
 const testId = 'text-input1',
@@ -86,3 +86,32 @@ test('popover target does not show when tips are not given', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
 })
+
+test('renders required indicator asterisk when requiredIndicator is true', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        label="Passphrase"
+        requiredIndicator
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Passphrase/)
+  expect(label).toBeInTheDocument()
+  expect(kit).toHaveTextContent('*')
+})
+
+test('does not render required indicator asterisk when requiredIndicator is false', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        label="Passphrase"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const label = within(kit).getByText(/Passphrase/)
+  expect(label).toBeInTheDocument()
+  expect(kit).not.toHaveTextContent('*')
+})

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -36,6 +36,7 @@ type PhoneNumberInputProps = {
   excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
+  requiredIndicator?: boolean,
   value?: string,
   formatAsYouType?: boolean,
   strictMode?: boolean,
@@ -91,6 +92,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     onlyCountries = [],
     excludeCountries = [],
     required = false,
+    requiredIndicator = false,
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
@@ -533,6 +535,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       validateErrors()
     },
     onChange: formatAsYouType ? undefined : handleOnChange,
+    requiredIndicator,
     value: inputValue
   }
 

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("phone_number_input", props: {
+  id: "phone_number_input_required_indicator",
+  label: "Required Phone Number",
+  required_indicator: true,
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputRequiredIndicator = (props) => (
+    <>
+        <PhoneNumberInput
+            id='phone_number_input_required_indicator'
+            label='Phone Number'
+            requiredIndicator
+            {...props} />
+    </>
+)
+
+export default PhoneNumberInputRequiredIndicator

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md

@@ -0,0 +1,3 @@
+The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
+
+You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -12,6 +12,7 @@ examples:
   - phone_number_input_format: Format as You Type
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
+  - phone_number_input_required_indicator: Required Indicator
 
   rails:
   - phone_number_input_default: Default
@@ -24,3 +25,4 @@ examples:
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
+  - phone_number_input_required_indicator: Required Indicator

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

@@ -9,3 +9,4 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
+export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,6 +7,8 @@ module Playbook
                       default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
+      prop :required_indicator, type: Playbook::Props::Boolean,
+                                default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -52,6 +54,7 @@ module Playbook
           excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
+          requiredIndicator: required_indicator,
           value: value,
           countrySearch: country_search,
         }

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act } from "../utilities/test-utils";
+import { render, screen, act, within } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -129,7 +129,7 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
     };
 
     render(<PhoneNumberInput {...props} />);
-    
+
     const input = screen.getByRole("textbox");
     
     act(() => {
@@ -154,7 +154,38 @@ test("should pass countrySearch prop to component", () => {
     };
   
     render(<PhoneNumberInput {...props} />);
-    
+
     const wrapper = screen.getByTestId('phone-input-with-search');
     expect(wrapper).toBeInTheDocument();
 });
+
+test("renders required indicator asterisk when requiredIndicator is true", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+        label: "Required Phone Number",
+        requiredIndicator: true,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+
+    const kit = screen.getByTestId(testId);
+    const label = within(kit).getByText(/Required Phone Number/);
+    expect(label).toBeInTheDocument();
+    expect(kit).toHaveTextContent("*");
+});
+
+test("does not render required indicator asterisk when requiredIndicator is false", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+        label: "Phone Number",
+    };
+
+    render(<PhoneNumberInput {...props} />);
+
+    const kit = screen.getByTestId(testId);
+    const label = within(kit).getByText(/Phone Number/);
+    expect(label).toBeInTheDocument();
+    expect(kit).not.toHaveTextContent("*");
+});  

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
-import { TrixEditor } from 'react-trix'
+// The user must import and pass TrixEditor as a prop if using the default editor
 
 import inlineFocus from './inlineFocus'
 import useFocus from './useFocus'
@@ -9,14 +9,6 @@ import colors from '../tokens/exports/_colors.module.scss'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
 
-import Trix from 'trix'
-import './_dedupe_trix_toolbar'
-
-Trix.config.textAttributes.inlineCode = {
-  tagName: 'code',
-  inheritable: true,
-}
-
 import EditorToolbar from './TipTap/Toolbar'
 
 type Editor = {
@@ -55,6 +47,7 @@ type RichTextEditorProps = {
   template: string,
   value?: string,
   maxWidth?: string
+  TrixEditor?: React.ComponentType<any>,
 } & GlobalProps
 
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -84,6 +77,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     maxWidth = "md",
     requiredIndicator = false,
     label,
+    TrixEditor,
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -94,25 +88,51 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
 
+  const fieldId = id ? (id as string) : null
+  const labelElementId = fieldId ? `${fieldId}-label` : null
+
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
+
     setTimeout(() => {
-      const oldId = editorInstance.element.getAttribute('input')
-      if (oldId) {
-        const hiddenInput = document.getElementById(oldId)
-        if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId
-          hiddenInput.id = newId
-          editorInstance.element.setAttribute('input', newId)
-
-          if (inputOptions.name) {
-            hiddenInput.setAttribute('name', inputOptions.name as string)
-          }
-        }
+      const oldId = editorInstance.element?.getAttribute("input")
+      if (!oldId) return
+
+      const hiddenInput = document.getElementById(oldId) as HTMLElement | null
+      if (!hiddenInput) return
+
+      const hiddenInputId = (inputOptions.id as string) || oldId
+
+      if (hiddenInputId !== oldId) {
+        hiddenInput.id = hiddenInputId
+        editorInstance.element?.setAttribute("input", hiddenInputId)
       }
+
+      if (inputOptions.name) {
+        hiddenInput.setAttribute("name", inputOptions.name as string)
+      }
+
+      const editorDomId = (id as string) || `${hiddenInputId}_trix`
+      const trixLabelId = ((id as string) || hiddenInputId) + "-label"
+
+      if (label) {
+        editorInstance.element?.setAttribute("aria-labelledby", trixLabelId)
+      }
+      editorInstance.element!.id = editorDomId
     })
   }
 
+  useEffect(() => {
+    if (!advancedEditor || !fieldId || !labelElementId) return
+
+    const dom = advancedEditor.view?.dom as HTMLElement | undefined
+    if (!dom) return
+
+    dom.setAttribute("aria-labelledby", labelElementId)
+    dom.setAttribute("role", "textbox")
+    dom.setAttribute("aria-multiline", "true")
+  }, [advancedEditor, fieldId, labelElementId])
+
   // DOM manipulation must wait for editor to be ready
   if (editor && editor.element) {
     const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
@@ -214,6 +234,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
 
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
+
   return (
     <div
         {...ariaProps}
@@ -223,7 +245,14 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         ref={focus ? containerRef : undefined}
     >
     {label && (
-      <label  htmlFor={id}>
+      <label
+          {...(labelFor ? { htmlFor: labelFor, id: labelElementId } : {})}
+          onMouseDown={(e) => {
+            if (!advancedEditor || !fieldId) return
+            e.preventDefault()
+            advancedEditor.commands.focus()
+          }}
+      >
         {
           requiredIndicator ? (
             <Caption className="pb_text_input_kit_label"
@@ -246,9 +275,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         advancedEditor ? (
           <div
               className={classnames(
-                "pb_rich_text_editor_advanced_container",
-                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-              )}
+              "pb_rich_text_editor_advanced_container",
+              { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+            )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}
@@ -260,15 +289,23 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
           { children }
           </div>
         ) : (
-          <TrixEditor
-              className=""
-              fileParamName={name}
-              mergeTags={[]}
-              onChange={onChange}
-              onEditorReady={handleOnEditorReady}
-              placeholder={placeholder}
-              value={value}
-          />
+          TrixEditor ? (
+            <TrixEditor
+                className=""
+                fileParamName={name}
+                mergeTags={[]}
+                onChange={onChange}
+                onEditorReady={handleOnEditorReady}
+                placeholder={placeholder}
+                value={value}
+            />
+          ) : (
+            <div style={{ color: 'red', padding: '1em', border: '1px solid #f00', background: '#fff0f0' }}>
+              <strong>Trix Editor is not available.</strong><br />
+              Please import <code>TrixEditor</code> from <code>react-trix</code> and pass it as a prop to <code>RichTextEditor</code>.<br />
+              <pre>{`import { TrixEditor } from 'react-trix';\n<RichTextEditor TrixEditor={TrixEditor} ... />`}</pre>
+            </div>
+          )
         )
       }
     </div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+
+const RichTextEditorAdvancedLabel = (props) => {
+
+    const editor = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    const editorNoLabel = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+
+    if (!editor || !editorNoLabel) return null
+
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id={"advanced-example"}
+          label="Advanced Example Label"
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      <br/>
+      <RichTextEditor
+          advancedEditor={editorNoLabel}
+          label="Advanced Example Label No ID"
+          {...props}
+      >
+        <EditorContent editor={editorNoLabel}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorAdvancedLabel