RubyGems - playbook_ui - Versions diffs - 16.4.0.pre.rc.2 → 16.4.0.pre.rc.3 - Mend

playbook_ui 16.4.0.pre.rc.2 → 16.4.0.pre.rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e6e2317099ce7cdcf1c23ce70c26f0a51914272dec95c7ef7529921e0c1029f5
-  data.tar.gz: 720485d1b32fb893c00fd2167b9b2a7e636fac03df2fa6e1596fa62202803970
+  metadata.gz: ae3803bd5b745bfb80cc3735185a84ad54261d66a835da1430b4a9e490e99a79
+  data.tar.gz: b43613542fe8f44fb33f03ceefb5e2420ad38e371e4489fc4085187cdcd12361
 SHA512:
-  metadata.gz: 121b5a84eff2012cfa17154a770deeae351f475f2cca5768f2bbc3b71b1b71bd6a06488d002289e196b09c4f6d8f78b06441af3106f4382e368f997bb8a90178
-  data.tar.gz: 104dec1624b69165f12ccffe0f6312981eaf6f7503eddce88889626bf28ea2e6a27fb6db4e60bf75e01afba81867f47b6a0ea5e6ba61970e661ce91c35e406cc
+  metadata.gz: 9d563bf3c9b4ce0829a5dca7747f5365507a24fa0bfeed2a6caaef00ab51f52aeae7df2664060159995d041bced0a521bd0c9fbf0b2bb907386d0e8071184988
+  data.tar.gz: ad84d871ff6f43acdf3da0898888ec99e6b173bc68c71334932dc3a59f938e3bac7f4023028727ca2e6462c5a607c02dc254c768e740d5c2b7f03862edbaffaa

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb CHANGED Viewed

@@ -28,7 +28,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx CHANGED Viewed

@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
 import Button from '../../pb_button/_button'
 import Caption from '../../pb_caption/_caption'
 import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 const DialogCompound = () => {
@@ -25,8 +25,11 @@ const DialogCompound = () => {
           <Body>{'What do you need us to take care of?'}</Body>
         </Dialog.Header>
         <Dialog.Body>
-          <Caption marginBottom="xs">{'Description'}</Caption>
-          <RichTextEditor />
+          <Textarea
+              id="default-example-1"
+              label="Description"
+              rows={4}
+          />
           <br />
           <Caption>
             {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb CHANGED Viewed

@@ -12,7 +12,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-7"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
@@ -31,7 +31,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-8"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
@@ -49,7 +49,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-9"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from '../../pb_textarea/_textarea'
 import Typeahead from '../../pb_typeahead/_typeahead'
 const useDialog = (visible = false) => {
@@ -77,8 +77,11 @@ const DialogFullHeight = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id="default-example-1"
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb CHANGED Viewed

@@ -13,7 +13,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+        <%= pb_rails("textarea", props: {id: "default-2"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     <% end %>
@@ -32,7 +32,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-3"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>
@@ -50,7 +50,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+            <%= pb_rails("textarea", props: {id: "default-4"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Textarea from "../../pb_textarea/_textarea";
 import Typeahead from '../../pb_typeahead/_typeahead'
 const useDialog = (visible = false) => {
@@ -76,8 +76,11 @@ const DialogFullHeightPlacement = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Caption marginBottom="xs">{"Description"}</Caption>
-              <RichTextEditor />
+              <Textarea
+                  id={`default-example-2-${index}`}
+                  label="Description"
+                  rows={4}
+              />
               <br />
               <Caption>
                 {

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

@@ -1,33 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react'
 import classnames from 'classnames'
-import { TrixEditor } from 'react-trix'
-import inlineFocus from './inlineFocus'
-import useFocus from './useFocus'
 import Caption from '../pb_caption/_caption'
 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 = {
-  attributeIsActive?: ([any]: string) => boolean,
-  element?: HTMLElement,
-  getSelectedDocument?: () => any,
-  getSelectedRange?: () => Array<number>,
-  insertHTML?: ([any]: string) => void,
-  loadHTML?: ([any]: string) => void,
-  setSelectedRange?: (range: Array<number>) => void,
-}
+import TipTapEditor from './_tiptap_editor'
+import TrixTextEditor from './_trix_editor'
 type RichTextEditorProps = {
   aria?: { [key: string]: string },
@@ -55,6 +34,8 @@ type RichTextEditorProps = {
   template: string,
   value?: string,
   maxWidth?: string
+  TrixEditor?: React.ComponentType<any>,
+  trixInstance?: any,
 } & GlobalProps
 const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
@@ -84,50 +65,19 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     maxWidth = "md",
     requiredIndicator = false,
     label,
+    TrixEditor,
+    trixInstance: trixInstance = undefined,
   } = props
   const ariaProps = buildAriaProps(aria),
     dataProps = buildDataProps(data),
-    [editor, setEditor] = useState<Editor>(),
     [showToolbarOnFocus, setShowToolbarOnFocus] = useState(false),
     containerRef = useRef<HTMLDivElement>(null)
   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) 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
-    })
-  }
+  const labelElementId = fieldId ? `${fieldId}-label` : undefined
   useEffect(() => {
     if (!advancedEditor || !fieldId || !labelElementId) return
@@ -139,34 +89,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     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,
-      blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
-    // replace default trix "block code" button with "inline code" button
-    let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement
-    if (!inlineCodeButton) {
-      inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
-      blockCodeButton.hidden = true
-      // set button attributes
-      inlineCodeButton.dataset.trixAttribute = 'inlineCode'
-      blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
-    }
-    if (toolbarBottom) editor.element.after(toolbarElement)
-    focus
-      ? (document.addEventListener('trix-focus', useFocus),
-        document.addEventListener('trix-blur', useFocus),
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useFocus())
-      : null
-    document.addEventListener('trix-focus', inlineFocus)
-    document.addEventListener('trix-blur', inlineFocus)
-  }
   //===========focus prop with advanced editor=================
   const isClickInPopover = (event: Event): boolean => {
     return !!(event.target as Element).closest('.pb_tiptap_toolbar_dropdown_popover')
@@ -203,26 +125,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   //============= end focus prop with advanced editor=================
-  useEffect(() => {
-    if (!editor || !template) return
-    editor.loadHTML('')
-    editor.setSelectedRange([0, 0])
-    editor.insertHTML(template)
-  }, [editor, template])
-  useEffect(() => {
-    if (!editor?.element) return
-    editor.element.addEventListener('click', ({ target }: Event) => {
-      const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
-      if (!trixEditorContainer) return
-      const anchorElement = (target as Element).closest('a')
-      if (!anchorElement) return
-      if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
-    })
-  }, [editor])
   // Generate CSS classes
   const css = classnames(
     'pb_rich_text_editor_kit',
@@ -279,35 +181,34 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       </label>
     )}
-      {
-        advancedEditor ? (
-          <div
-              className={classnames(
-              "pb_rich_text_editor_advanced_container",
-              { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-            )}
-          >
-            {shouldShowToolbar && (
-              <EditorToolbar editor={advancedEditor}
-                  extensions={extensions}
-                  simple={simple}
-                  sticky={sticky}
-              />
-            )}
-          { children }
-          </div>
-        ) : (
-          <TrixEditor
-              className=""
-              fileParamName={name}
-              mergeTags={[]}
-              onChange={onChange}
-              onEditorReady={handleOnEditorReady}
-              placeholder={placeholder}
-              value={value}
-          />
-        )
-      }
+      {advancedEditor ? (
+        <TipTapEditor
+            editor={advancedEditor}
+            extensions={extensions}
+            inputHeight={inputHeight}
+            inputMinHeight={inputMinHeight}
+            shouldShowToolbar={shouldShowToolbar}
+            simple={simple}
+            sticky={sticky}
+        >
+          {children}
+        </TipTapEditor>
+      ) : (
+        <TrixTextEditor
+            TrixEditor={TrixEditor}
+            focus={focus}
+            id={id}
+            inputOptions={inputOptions}
+            label={label}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            template={template}
+            toolbarBottom={toolbarBottom}
+            trixInstance={trixInstance}
+            value={value}
+        />
+      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_editor.tsx ADDED Viewed

@@ -0,0 +1,51 @@
+import React from 'react'
+import classnames from 'classnames'
+import EditorToolbar from './TipTap/Toolbar'
+type TipTapEditorProps = {
+    children?: React.ReactNode | React.ReactNode[],
+    editor: unknown,
+    extensions?: { [key: string]: string }[],
+    inputHeight?: 'sm' | 'md' | 'lg',
+    inputMinHeight?: 'sm' | 'md' | 'lg',
+    shouldShowToolbar: boolean,
+    simple?: boolean,
+    sticky?: boolean,
+}
+const TipTapEditor = ({
+    children,
+    editor,
+    extensions,
+    inputHeight,
+    inputMinHeight,
+    shouldShowToolbar,
+    simple = false,
+    sticky = false,
+}: TipTapEditorProps): React.ReactElement => {
+    return (
+        <div
+            className={classnames(
+                'pb_rich_text_editor_advanced_container',
+                {
+                    [`input_height_${inputHeight}`]: !!inputHeight,
+                    [`input_min_height_${inputMinHeight}`]: !!inputMinHeight,
+                    'toolbar-active': shouldShowToolbar,
+                }
+            )}
+        >
+            {shouldShowToolbar && (
+                <EditorToolbar
+                    editor={editor}
+                    extensions={extensions}
+                    simple={simple}
+                    sticky={sticky}
+                />
+            )}
+            {children}
+        </div>
+    )
+}
+export default TipTapEditor

data/app/pb_kits/playbook/pb_rich_text_editor/_trix_editor.tsx ADDED Viewed

@@ -0,0 +1,206 @@
+import React, { useEffect, useState } from 'react'
+import inlineFocus from './inlineFocus'
+import applyFocusState from './useFocus'
+import './_dedupe_trix_toolbar'
+type Editor = {
+	element?: HTMLElement,
+	insertHTML?: (html: string) => void,
+	loadHTML?: (html: string) => void,
+	setSelectedRange?: (range: Array<number>) => void,
+}
+type TrixConfig = {
+	textAttributes?: {
+		inlineCode?: {
+			tagName: string,
+			inheritable: boolean,
+		}
+	}
+}
+type TrixInstance = {
+	config: TrixConfig,
+}
+type TrixEditorComponentProps = {
+	className: string,
+	fileParamName?: string,
+	mergeTags: unknown[],
+	onChange: (html: string, text: string) => void,
+	onEditorReady: (editorInstance: Editor) => void,
+	placeholder?: string,
+	value?: string,
+}
+type TrixTextEditorProps = {
+	TrixEditor?: React.ComponentType<TrixEditorComponentProps>,
+	focus?: boolean,
+	id?: string,
+	inputOptions?: { [key: string]: string | number | boolean | (() => void) },
+	label?: string,
+	name?: string,
+	onChange: (html: string, text: string) => void,
+	placeholder?: string,
+	template: string,
+	toolbarBottom?: boolean,
+	trixInstance?: TrixInstance,
+	value?: string,
+}
+const TrixTextEditor = ({
+	TrixEditor,
+	focus = false,
+	id,
+	inputOptions = {},
+	label,
+	name,
+	onChange,
+	placeholder,
+	template,
+	toolbarBottom = false,
+	trixInstance = undefined,
+	value = '',
+}: TrixTextEditorProps): React.ReactElement => {
+	const [editor, setEditor] = useState<Editor>()
+	useEffect(() => {
+		const textAttributes = trixInstance?.config?.textAttributes
+		if (!textAttributes) return
+		textAttributes.inlineCode = {
+			tagName: 'code',
+			inheritable: true,
+		}
+	}, [trixInstance])
+	const handleOnEditorReady = (editorInstance: Editor) => {
+		setEditor(editorInstance)
+		setTimeout(() => {
+			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)
+			}
+			if (editorInstance.element) {
+				editorInstance.element.id = editorDomId
+			}
+		})
+	}
+	useEffect(() => {
+		if (!editor || !editor.element) return
+		const toolbarElement = editor.element.parentElement?.querySelector('trix-toolbar') as HTMLElement | null
+		if (!toolbarElement) return
+		const blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement | null
+		if (!blockCodeButton) return
+		let inlineCodeButton = toolbarElement.querySelector('[data-trix-attribute=inlineCode]') as HTMLElement | null
+		if (!inlineCodeButton) {
+			inlineCodeButton = blockCodeButton.cloneNode(true) as HTMLElement
+			blockCodeButton.hidden = true
+			inlineCodeButton.dataset.trixAttribute = 'inlineCode'
+			blockCodeButton.insertAdjacentElement('afterend', inlineCodeButton)
+		}
+		if (toolbarBottom) {
+			editor.element.after(toolbarElement)
+		}
+	}, [editor, toolbarBottom])
+	useEffect(() => {
+		if (!focus) return
+		document.addEventListener('trix-focus', applyFocusState)
+		document.addEventListener('trix-blur', applyFocusState)
+		applyFocusState()
+		return () => {
+			document.removeEventListener('trix-focus', applyFocusState)
+			document.removeEventListener('trix-blur', applyFocusState)
+		}
+	}, [focus])
+	useEffect(() => {
+		document.addEventListener('trix-focus', inlineFocus)
+		document.addEventListener('trix-blur', inlineFocus)
+		return () => {
+			document.removeEventListener('trix-focus', inlineFocus)
+			document.removeEventListener('trix-blur', inlineFocus)
+		}
+	}, [])
+	useEffect(() => {
+		if (!editor || !template) return
+		editor.loadHTML && editor.loadHTML('')
+		editor.setSelectedRange && editor.setSelectedRange([0, 0])
+		editor.insertHTML && editor.insertHTML(template)
+	}, [editor, template])
+	useEffect(() => {
+		if (!editor?.element) return
+		const clickHandler = ({ target }: Event) => {
+			const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
+			if (!trixEditorContainer) return
+			const anchorElement = (target as Element).closest('a') as HTMLAnchorElement | null
+			if (!anchorElement) return
+			if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
+		}
+		editor.element.addEventListener('click', clickHandler)
+		return () => {
+			editor.element?.removeEventListener('click', clickHandler)
+		}
+	}, [editor])
+	if (!TrixEditor) {
+		return (
+			<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>
+		)
+	}
+	return React.createElement(TrixEditor, {
+		className: '',
+		fileParamName: name,
+		mergeTags: [],
+		onChange,
+		onEditorReady: handleOnEditorReady,
+		placeholder,
+		value,
+	})
+}
+export default TrixTextEditor