@payloadcms/richtext-slate 3.0.0-beta.9 → 3.0.0-beta.90

package/dist/exports/client/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/exports/client/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAA;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAA;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAErE,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAA;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAErE,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAA;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAA;AAExE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAA;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAA;AAE3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,mDAAmD,CAAA;AAEtF,OAAO,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAA;AACxF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAA;AAE9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAA;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAA;AAC/E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAA;AACjF,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,MAAM,uCAAuC,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAA;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,2CAA2C,CAAA;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAC1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,gDAAgD,CAAA;AAExF,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAA;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAA;AAEhF,OAAO,EAAE,aAAa,EAAE,MAAM,iDAAiD,CAAA;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA"}

package/dist/exports/client/index.js

@@ -0,0 +1,50 @@
+'use client';
+export { RichTextCell } from '../../cell/index.js';
+export { ElementButton } from '../../field/elements/Button.js';
+export { BlockquoteElementButton } from '../../field/elements/blockquote/Button.js';
+export { BlockquoteElement } from '../../field/elements/blockquote/Element.js';
+export { H1ElementButton } from '../../field/elements/h1/Button.js';
+export { Heading1Element } from '../../field/elements/h1/Heading1.js';
+export { H2ElementButton } from '../../field/elements/h2/Button.js';
+export { Heading2Element } from '../../field/elements/h2/Heading2.js';
+export { H3ElementButton } from '../../field/elements/h3/Button.js';
+export { Heading3Element } from '../../field/elements/h3/Heading3.js';
+export { H4ElementButton } from '../../field/elements/h4/Button.js';
+export { Heading4Element } from '../../field/elements/h4/Heading4.js';
+export { H5ElementButton } from '../../field/elements/h5/Button.js';
+export { Heading5Element } from '../../field/elements/h5/Heading5.js';
+export { H6ElementButton } from '../../field/elements/h6/Button.js';
+export { Heading6Element } from '../../field/elements/h6/Heading6.js';
+export { IndentButton } from '../../field/elements/indent/Button.js';
+export { IndentElement } from '../../field/elements/indent/Element.js';
+export { ListItemElement } from '../../field/elements/li/ListItem.js';
+export { LinkButton } from '../../field/elements/link/Button/index.js';
+export { LinkElement } from '../../field/elements/link/Element/index.js';
+export { WithLinks } from '../../field/elements/link/WithLinks.js';
+export { OLElementButton } from '../../field/elements/ol/Button.js';
+export { OrderedListElement } from '../../field/elements/ol/OrderedList.js';
+export { RelationshipButton } from '../../field/elements/relationship/Button/index.js';
+export { RelationshipElement } from '../../field/elements/relationship/Element/index.js';
+export { WithRelationship } from '../../field/elements/relationship/plugin.js';
+export { TextAlignElementButton } from '../../field/elements/textAlign/Button.js';
+export { toggleElement } from '../../field/elements/toggle.js';
+export { ULElementButton } from '../../field/elements/ul/Button.js';
+export { UnorderedListElement } from '../../field/elements/ul/UnorderedList.js';
+export { UploadElementButton } from '../../field/elements/upload/Button/index.js';
+export { UploadElement } from '../../field/elements/upload/Element/index.js';
+export { WithUpload } from '../../field/elements/upload/plugin.js';
+export { RichTextField } from '../../field/index.js';
+export { LeafButton } from '../../field/leaves/Button.js';
+export { BoldLeaf } from '../../field/leaves/bold/Bold/index.js';
+export { BoldLeafButton } from '../../field/leaves/bold/LeafButton.js';
+export { CodeLeaf } from '../../field/leaves/code/Code/index.js';
+export { CodeLeafButton } from '../../field/leaves/code/LeafButton.js';
+export { ItalicLeaf } from '../../field/leaves/italic/Italic/index.js';
+export { ItalicLeafButton } from '../../field/leaves/italic/LeafButton.js';
+export { StrikethroughLeafButton } from '../../field/leaves/strikethrough/LeafButton.js';
+export { StrikethroughLeaf } from '../../field/leaves/strikethrough/Strikethrough/index.js';
+export { UnderlineLeafButton } from '../../field/leaves/underline/LeafButton.js';
+export { UnderlineLeaf } from '../../field/leaves/underline/Underline/index.js';
+export { useLeaf } from '../../field/providers/LeafProvider.js';
+
+//# sourceMappingURL=index.js.map

package/dist/exports/client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/exports/client/index.ts"],"sourcesContent":["'use client'\n\nexport { RichTextCell } from '../../cell/index.js'\nexport { ElementButton } from '../../field/elements/Button.js'\nexport { BlockquoteElementButton } from '../../field/elements/blockquote/Button.js'\nexport { BlockquoteElement } from '../../field/elements/blockquote/Element.js'\nexport { H1ElementButton } from '../../field/elements/h1/Button.js'\nexport { Heading1Element } from '../../field/elements/h1/Heading1.js'\nexport { H2ElementButton } from '../../field/elements/h2/Button.js'\nexport { Heading2Element } from '../../field/elements/h2/Heading2.js'\nexport { H3ElementButton } from '../../field/elements/h3/Button.js'\nexport { Heading3Element } from '../../field/elements/h3/Heading3.js'\nexport { H4ElementButton } from '../../field/elements/h4/Button.js'\nexport { Heading4Element } from '../../field/elements/h4/Heading4.js'\nexport { H5ElementButton } from '../../field/elements/h5/Button.js'\n\nexport { Heading5Element } from '../../field/elements/h5/Heading5.js'\nexport { H6ElementButton } from '../../field/elements/h6/Button.js'\n\nexport { Heading6Element } from '../../field/elements/h6/Heading6.js'\n\nexport { IndentButton } from '../../field/elements/indent/Button.js'\nexport { IndentElement } from '../../field/elements/indent/Element.js'\nexport { ListItemElement } from '../../field/elements/li/ListItem.js'\n\nexport { LinkButton } from '../../field/elements/link/Button/index.js'\n\nexport { LinkElement } from '../../field/elements/link/Element/index.js'\n\nexport { WithLinks } from '../../field/elements/link/WithLinks.js'\nexport { OLElementButton } from '../../field/elements/ol/Button.js'\nexport { OrderedListElement } from '../../field/elements/ol/OrderedList.js'\n\nexport { RelationshipButton } from '../../field/elements/relationship/Button/index.js'\n\nexport { RelationshipElement } from '../../field/elements/relationship/Element/index.js'\nexport { WithRelationship } from '../../field/elements/relationship/plugin.js'\n\nexport { TextAlignElementButton } from '../../field/elements/textAlign/Button.js'\nexport { toggleElement } from '../../field/elements/toggle.js'\nexport { ULElementButton } from '../../field/elements/ul/Button.js'\nexport { UnorderedListElement } from '../../field/elements/ul/UnorderedList.js'\nexport { UploadElementButton } from '../../field/elements/upload/Button/index.js'\nexport { UploadElement } from '../../field/elements/upload/Element/index.js'\nexport { WithUpload } from '../../field/elements/upload/plugin.js'\nexport { RichTextField } from '../../field/index.js'\nexport { LeafButton } from '../../field/leaves/Button.js'\nexport { BoldLeaf } from '../../field/leaves/bold/Bold/index.js'\n\nexport { BoldLeafButton } from '../../field/leaves/bold/LeafButton.js'\n\nexport { CodeLeaf } from '../../field/leaves/code/Code/index.js'\n\nexport { CodeLeafButton } from '../../field/leaves/code/LeafButton.js'\n\nexport { ItalicLeaf } from '../../field/leaves/italic/Italic/index.js'\nexport { ItalicLeafButton } from '../../field/leaves/italic/LeafButton.js'\nexport { StrikethroughLeafButton } from '../../field/leaves/strikethrough/LeafButton.js'\n\nexport { StrikethroughLeaf } from '../../field/leaves/strikethrough/Strikethrough/index.js'\nexport { UnderlineLeafButton } from '../../field/leaves/underline/LeafButton.js'\n\nexport { UnderlineLeaf } from '../../field/leaves/underline/Underline/index.js'\n\nexport { useLeaf } from '../../field/providers/LeafProvider.js'\n"],"names":["RichTextCell","ElementButton","BlockquoteElementButton","BlockquoteElement","H1ElementButton","Heading1Element","H2ElementButton","Heading2Element","H3ElementButton","Heading3Element","H4ElementButton","Heading4Element","H5ElementButton","Heading5Element","H6ElementButton","Heading6Element","IndentButton","IndentElement","ListItemElement","LinkButton","LinkElement","WithLinks","OLElementButton","OrderedListElement","RelationshipButton","RelationshipElement","WithRelationship","TextAlignElementButton","toggleElement","ULElementButton","UnorderedListElement","UploadElementButton","UploadElement","WithUpload","RichTextField","LeafButton","BoldLeaf","BoldLeafButton","CodeLeaf","CodeLeafButton","ItalicLeaf","ItalicLeafButton","StrikethroughLeafButton","StrikethroughLeaf","UnderlineLeafButton","UnderlineLeaf","useLeaf"],"mappings":"AAAA;AAEA,SAASA,YAAY,QAAQ,sBAAqB;AAClD,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,uBAAuB,QAAQ,4CAA2C;AACnF,SAASC,iBAAiB,QAAQ,6CAA4C;AAC9E,SAASC,eAAe,QAAQ,oCAAmC;AACnE,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,eAAe,QAAQ,oCAAmC;AACnE,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,eAAe,QAAQ,oCAAmC;AACnE,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,eAAe,QAAQ,oCAAmC;AACnE,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,eAAe,QAAQ,oCAAmC;AAEnE,SAASC,eAAe,QAAQ,sCAAqC;AACrE,SAASC,eAAe,QAAQ,oCAAmC;AAEnE,SAASC,eAAe,QAAQ,sCAAqC;AAErE,SAASC,YAAY,QAAQ,wCAAuC;AACpE,SAASC,aAAa,QAAQ,yCAAwC;AACtE,SAASC,eAAe,QAAQ,sCAAqC;AAErE,SAASC,UAAU,QAAQ,4CAA2C;AAEtE,SAASC,WAAW,QAAQ,6CAA4C;AAExE,SAASC,SAAS,QAAQ,yCAAwC;AAClE,SAASC,eAAe,QAAQ,oCAAmC;AACnE,SAASC,kBAAkB,QAAQ,yCAAwC;AAE3E,SAASC,kBAAkB,QAAQ,oDAAmD;AAEtF,SAASC,mBAAmB,QAAQ,qDAAoD;AACxF,SAASC,gBAAgB,QAAQ,8CAA6C;AAE9E,SAASC,sBAAsB,QAAQ,2CAA0C;AACjF,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,eAAe,QAAQ,oCAAmC;AACnE,SAASC,oBAAoB,QAAQ,2CAA0C;AAC/E,SAASC,mBAAmB,QAAQ,8CAA6C;AACjF,SAASC,aAAa,QAAQ,+CAA8C;AAC5E,SAASC,UAAU,QAAQ,wCAAuC;AAClE,SAASC,aAAa,QAAQ,uBAAsB;AACpD,SAASC,UAAU,QAAQ,+BAA8B;AACzD,SAASC,QAAQ,QAAQ,wCAAuC;AAEhE,SAASC,cAAc,QAAQ,wCAAuC;AAEtE,SAASC,QAAQ,QAAQ,wCAAuC;AAEhE,SAASC,cAAc,QAAQ,wCAAuC;AAEtE,SAASC,UAAU,QAAQ,4CAA2C;AACtE,SAASC,gBAAgB,QAAQ,0CAAyC;AAC1E,SAASC,uBAAuB,QAAQ,iDAAgD;AAExF,SAASC,iBAAiB,QAAQ,0DAAyD;AAC3F,SAASC,mBAAmB,QAAQ,6CAA4C;AAEhF,SAASC,aAAa,QAAQ,kDAAiD;AAE/E,SAASC,OAAO,QAAQ,wCAAuC"}

package/dist/field/RichText.d.ts

@@ -1,27 +1,16 @@
-import type { FormFieldBase } from '@payloadcms/ui/fields/shared';
-import type { FieldBase } from 'payload/types';
 import type { BaseEditor } from 'slate';
 import type { HistoryEditor } from 'slate-history';
 import type { ReactEditor } from 'slate-react';
 import React from 'react';
-import type { ElementNode, RichTextPlugin, TextNode } from '../types.js';
-import type { EnabledFeatures } from './types.js';
+import type { ElementNode, TextNode } from '../types.js';
+import type { LoadedSlateFieldProps } from './types.js';
 import './index.scss';
 declare module 'slate' {
     interface CustomTypes {
-        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Editor: BaseEditor & HistoryEditor & ReactEditor;
         Element: ElementNode;
         Text: TextNode;
     }
 }
-export declare const RichText: React.FC<FormFieldBase & {
-    elements: EnabledFeatures['elements'];
-    label?: FieldBase['label'];
-    leaves: EnabledFeatures['leaves'];
-    name: string;
-    placeholder?: string;
-    plugins: RichTextPlugin[];
-    richTextComponentMap: Map<string, React.ReactNode>;
-    width?: string;
-}>;
+export declare const RichText: React.FC<LoadedSlateFieldProps>;
 //# sourceMappingURL=RichText.d.ts.map

package/dist/field/RichText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../src/field/RichText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAY9C,OAAO,KAAkD,MAAM,OAAO,CAAA;AAKtE,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAMjD,OAAO,cAAc,CAAA;AAWrB,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,MAAM,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,CAAA;QAChD,OAAO,EAAE,WAAW,CAAA;QACpB,IAAI,EAAE,QAAQ,CAAA;KACf;CACF;AA4ZD,eAAO,MAAM,QAAQ;cAxZP,eAAe,CAAC,UAAU,CAAC;YAC7B,SAAS,CAAC,OAAO,CAAC;YAClB,eAAe,CAAC,QAAQ,CAAC;UAC3B,MAAM;kBACE,MAAM;aACX,cAAc,EAAE;0BACH,IAAI,MAAM,EAAE,MAAM,SAAS,CAAC;YAC1C,MAAM;EAiZkC,CAAA"}
+{"version":3,"file":"RichText.d.ts","sourceRoot":"","sources":["../../src/field/RichText.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAe9C,OAAO,KAAkD,MAAM,OAAO,CAAA;AAKtE,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAA;AAMvD,OAAO,cAAc,CAAA;AAWrB,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,MAAM,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;QAChD,OAAO,EAAE,WAAW,CAAA;QACpB,IAAI,EAAE,QAAQ,CAAA;KACf;CACF;AA+ZD,eAAO,MAAM,QAAQ,iCAA+B,CAAA"}

package/dist/field/RichText.js

@@ -1,14 +1,8 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
-import { FieldDescription } from '@payloadcms/ui/forms/FieldDescription';
-import { FieldError } from '@payloadcms/ui/forms/FieldError';
-import { FieldLabel } from '@payloadcms/ui/forms/FieldLabel';
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider';
-import { useField } from '@payloadcms/ui/forms/useField';
-import { withCondition } from '@payloadcms/ui/forms/withCondition';
-import { useEditDepth } from '@payloadcms/ui/providers/EditDepth';
-import { useTranslation } from '@payloadcms/ui/providers/Translation';
-import isHotkey from 'is-hotkey';
+import { FieldDescription, FieldError, FieldLabel, RenderComponent, useEditDepth, useField, useFieldProps, useTranslation, withCondition } from '@payloadcms/ui';
+import { isHotkey } from 'is-hotkey';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Node, Element as SlateElement, Text, Transforms, createEditor } from 'slate';
 import { withHistory } from 'slate-history';
@@ -27,7 +21,8 @@ import { LeafButtonProvider } from './providers/LeafButtonProvider.js';
 import { LeafProvider } from './providers/LeafProvider.js';
 const baseClass = 'rich-text';
 const RichTextField = (props)=>{
-    const { name, CustomDescription, CustomError, CustomLabel, className, descriptionProps, elements, errorProps, label, labelProps, leaves, path: pathFromProps, placeholder, plugins, readOnly, required, style, validate = richTextValidate, width } = props;
+    const { descriptionProps, elements, errorProps, field, field: { name, _path: pathFromProps, admin: { className, components: { Description, Error, Label }, placeholder, readOnly: readOnlyFromAdmin, style, width } = {}, label, required }, labelProps, leaves, plugins, readOnly: readOnlyFromTopLevelProps, validate = richTextValidate } = props;
+    const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin;
     const { i18n } = useTranslation();
     const editorRef = useRef(null);
     const toolbarRef = useRef(null);
@@ -37,18 +32,23 @@ const RichTextField = (props)=>{
         if (typeof validate === 'function') {
             return validate(value, {
                 ...validationOptions,
+                req: {
+                    t: i18n.t
+                },
                 required
             });
         }
     }, [
         validate,
-        required
+        required,
+        i18n
     ]);
-    const { path: pathFromContext } = useFieldProps();
-    const { initialValue, path, schemaPath, setValue, showError, value } = useField({
-        path: pathFromContext || pathFromProps || name,
+    const { path: pathFromContext, readOnly: readOnlyFromContext } = useFieldProps();
+    const { formInitializing, initialValue, path, schemaPath, setValue, showError, value } = useField({
+        path: pathFromContext ?? pathFromProps ?? name,
         validate: memoizedValidate
     });
+    const disabled = readOnlyFromProps || readOnlyFromContext || formInitializing;
     const editor = useMemo(()=>{
         let CreatedEditor = withEnterBreakOut(withHistory(withReact(createEditor())));
         CreatedEditor = withHTML(CreatedEditor);
@@ -147,18 +147,24 @@ const RichTextField = (props)=>{
             }
         }
         if (Element) {
-            const el = /*#__PURE__*/ React.createElement(ElementProvider, {
+            const el = /*#__PURE__*/ _jsx(ElementProvider, {
                 attributes: attr,
                 childNodes: children,
                 editorRef: editorRef,
                 element: element,
                 fieldProps: props,
                 path: path,
-                schemaPath: schemaPath
-            }, Element);
+                schemaPath: schemaPath,
+                children: /*#__PURE__*/ _jsx(RenderComponent, {
+                    mappedComponent: Element
+                })
+            });
             return el;
         }
-        return /*#__PURE__*/ React.createElement("div", attr, children);
+        return /*#__PURE__*/ _jsx("div", {
+            ...attr,
+            children: children
+        });
     }, [
         elements,
         path,
@@ -171,21 +177,29 @@ const RichTextField = (props)=>{
             return matchedLeaves.reduce((result, [, leafConfig], i)=>{
                 if (leafConfig?.Leaf) {
                     const Leaf = leafConfig.Leaf;
-                    return /*#__PURE__*/ React.createElement(LeafProvider, {
+                    return /*#__PURE__*/ _jsx(LeafProvider, {
                         attributes: attributes,
                         editorRef: editorRef,
                         fieldProps: props,
-                        key: i,
                         leaf: leaf,
                         path: path,
                         result: result,
-                        schemaPath: schemaPath
-                    }, Leaf);
+                        schemaPath: schemaPath,
+                        children: /*#__PURE__*/ _jsx(RenderComponent, {
+                            mappedComponent: Leaf
+                        })
+                    }, i);
                 }
                 return result;
-            }, /*#__PURE__*/ React.createElement("span", attributes, children));
+            }, /*#__PURE__*/ _jsx("span", {
+                ...attributes,
+                children: children
+            }));
         }
-        return /*#__PURE__*/ React.createElement("span", attributes, children);
+        return /*#__PURE__*/ _jsx("span", {
+            ...attributes,
+            children: children
+        });
     }, [
         path,
         props,
@@ -204,13 +218,13 @@ const RichTextField = (props)=>{
             return false;
         });
         if (ops && Array.isArray(ops) && ops.length > 0) {
-            if (!readOnly && val !== defaultRichTextValue && val !== value) {
+            if (!disabled && val !== defaultRichTextValue && val !== value) {
                 setValue(val);
             }
         }
     }, [
         editor?.operations,
-        readOnly,
+        disabled,
         setValue,
         value
     ]);
@@ -225,16 +239,16 @@ const RichTextField = (props)=>{
                 if (isButton) child.setAttribute('disabled', isDisabling ? 'disabled' : null);
             });
         }
-        if (readOnly) {
+        if (disabled) {
             setClickableState('disabled');
         }
         return ()=>{
-            if (readOnly) {
+            if (disabled) {
                 setClickableState('enabled');
             }
         };
     }, [
-        readOnly
+        disabled
     ]);
     // useEffect(() => {
     //   // If there is a change to the initial value, we need to reset Slate history
@@ -250,7 +264,7 @@ const RichTextField = (props)=>{
         'field-type',
         className,
         showError && 'error',
-        readOnly && `${baseClass}--read-only`
+        disabled && `${baseClass}--read-only`
     ].filter(Boolean).join(' ');
     let valueToRender = value;
     if (typeof valueToRender === 'string') {
@@ -262,130 +276,160 @@ const RichTextField = (props)=>{
         }
     }
     if (!valueToRender) valueToRender = defaultRichTextValue;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ _jsxs("div", {
         className: classes,
         style: {
             ...style,
             width
-        }
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrap`
-    }, /*#__PURE__*/ React.createElement(FieldError, {
-        CustomError: CustomError,
-        path: path,
-        ...errorProps || {}
-    }), /*#__PURE__*/ React.createElement(FieldLabel, {
-        CustomLabel: CustomLabel,
-        label: label,
-        required: required,
-        ...labelProps || {}
-    }), /*#__PURE__*/ React.createElement(Slate, {
-        editor: editor,
-        key: JSON.stringify({
-            initialValue,
-            path
-        }),
-        onChange: handleChange,
-        value: valueToRender
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__wrapper`
-    }, Object.keys(elements)?.length + Object.keys(leaves)?.length > 0 && /*#__PURE__*/ React.createElement("div", {
-        className: [
-            `${baseClass}__toolbar`,
-            drawerIsOpen && `${baseClass}__drawerIsOpen`
-        ].filter(Boolean).join(' '),
-        ref: toolbarRef
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__toolbar-wrap`
-    }, Object.values(elements).map((element)=>{
-        const Button = element?.Button;
-        if (Button) {
-            return /*#__PURE__*/ React.createElement(ElementButtonProvider, {
-                fieldProps: props,
-                key: element.name,
-                path: path,
-                schemaPath: schemaPath
-            }, Button);
-        }
-        return null;
-    }), Object.values(leaves).map((leaf)=>{
-        const Button = leaf?.Button;
-        if (Button) {
-            return /*#__PURE__*/ React.createElement(LeafButtonProvider, {
-                fieldProps: props,
-                key: leaf.name,
-                path: path,
-                schemaPath: schemaPath
-            }, Button);
-        }
-        return null;
-    }))), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__editor`,
-        ref: editorRef
-    }, /*#__PURE__*/ React.createElement(Editable, {
-        className: `${baseClass}__input`,
-        id: `field-${path.replace(/\./g, '__')}`,
-        onKeyDown: (event)=>{
-            if (event.key === 'Enter') {
-                if (event.shiftKey) {
-                    event.preventDefault();
-                    editor.insertText('\n');
-                } else {
-                    const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
-                    if (SlateElement.isElement(selectedElement)) {
-                        // Allow hard enter to "break out" of certain elements
-                        if (editor.shouldBreakOutOnEnter(selectedElement)) {
-                            event.preventDefault();
-                            const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-                            if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === editor.selection.anchor.offset) {
-                                Transforms.insertNodes(editor, {
-                                    children: [
-                                        {
-                                            text: ''
-                                        }
-                                    ]
-                                });
-                            } else {
-                                Transforms.splitNodes(editor);
-                                Transforms.setNodes(editor, {});
-                            }
-                        }
-                    }
-                }
-            }
-            if (event.key === 'Backspace') {
-                const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
-                if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
-                    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-                    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
-                        event.preventDefault();
-                        Transforms.unwrapNodes(editor, {
-                            match: (n)=>SlateElement.isElement(n) && listTypes.includes(n.type),
-                            mode: 'lowest',
-                            split: true
-                        });
-                        Transforms.setNodes(editor, {
-                            type: undefined
-                        });
-                    }
-                } else if (editor.isVoid(selectedElement)) {
-                    Transforms.removeNodes(editor);
-                }
-            }
-            Object.keys(hotkeys).forEach((hotkey)=>{
-                if (isHotkey(hotkey, event)) {
-                    event.preventDefault();
-                    const mark = hotkeys[hotkey];
-                    toggleLeaf(editor, mark);
-                }
-            });
         },
-        placeholder: getTranslation(placeholder, i18n),
-        readOnly: readOnly,
-        renderElement: renderElement,
-        renderLeaf: renderLeaf,
-        spellCheck: true
-    })))), CustomDescription !== undefined ? CustomDescription : /*#__PURE__*/ React.createElement(FieldDescription, descriptionProps || {})));
+        children: [
+            /*#__PURE__*/ _jsx(FieldLabel, {
+                Label: Label,
+                label: label,
+                required: required,
+                ...labelProps || {},
+                field: field
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: `${baseClass}__wrap`,
+                children: [
+                    /*#__PURE__*/ _jsx(FieldError, {
+                        CustomError: Error,
+                        field: field,
+                        path: path,
+                        ...errorProps || {}
+                    }),
+                    /*#__PURE__*/ _jsx(Slate, {
+                        editor: editor,
+                        onChange: handleChange,
+                        value: valueToRender,
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            className: `${baseClass}__wrapper`,
+                            children: [
+                                Object.keys(elements)?.length + Object.keys(leaves)?.length > 0 && /*#__PURE__*/ _jsx("div", {
+                                    className: [
+                                        `${baseClass}__toolbar`,
+                                        drawerIsOpen && `${baseClass}__drawerIsOpen`
+                                    ].filter(Boolean).join(' '),
+                                    ref: toolbarRef,
+                                    children: /*#__PURE__*/ _jsxs("div", {
+                                        className: `${baseClass}__toolbar-wrap`,
+                                        children: [
+                                            Object.values(elements).map((element)=>{
+                                                const Button = element?.Button;
+                                                if (Button) {
+                                                    return /*#__PURE__*/ _jsx(ElementButtonProvider, {
+                                                        disabled: disabled,
+                                                        fieldProps: props,
+                                                        path: path,
+                                                        schemaPath: schemaPath,
+                                                        children: /*#__PURE__*/ _jsx(RenderComponent, {
+                                                            mappedComponent: Button
+                                                        })
+                                                    }, element.name);
+                                                }
+                                                return null;
+                                            }),
+                                            Object.values(leaves).map((leaf)=>{
+                                                const Button = leaf?.Button;
+                                                if (Button) {
+                                                    return /*#__PURE__*/ _jsx(LeafButtonProvider, {
+                                                        fieldProps: props,
+                                                        path: path,
+                                                        schemaPath: schemaPath,
+                                                        children: /*#__PURE__*/ _jsx(RenderComponent, {
+                                                            mappedComponent: Button
+                                                        })
+                                                    }, leaf.name);
+                                                }
+                                                return null;
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: `${baseClass}__editor`,
+                                    ref: editorRef,
+                                    children: /*#__PURE__*/ _jsx(Editable, {
+                                        className: `${baseClass}__input`,
+                                        id: `field-${path.replace(/\./g, '__')}`,
+                                        onKeyDown: (event)=>{
+                                            if (event.key === 'Enter') {
+                                                if (event.shiftKey) {
+                                                    event.preventDefault();
+                                                    editor.insertText('\n');
+                                                } else {
+                                                    const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
+                                                    if (SlateElement.isElement(selectedElement)) {
+                                                        // Allow hard enter to "break out" of certain elements
+                                                        if (editor.shouldBreakOutOnEnter(selectedElement)) {
+                                                            event.preventDefault();
+                                                            const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+                                                            if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === editor.selection.anchor.offset) {
+                                                                Transforms.insertNodes(editor, {
+                                                                    children: [
+                                                                        {
+                                                                            text: ''
+                                                                        }
+                                                                    ]
+                                                                });
+                                                            } else {
+                                                                Transforms.splitNodes(editor);
+                                                                Transforms.setNodes(editor, {});
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                            if (event.key === 'Backspace') {
+                                                const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
+                                                if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
+                                                    const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
+                                                    if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
+                                                        event.preventDefault();
+                                                        Transforms.unwrapNodes(editor, {
+                                                            match: (n)=>SlateElement.isElement(n) && listTypes.includes(n.type),
+                                                            mode: 'lowest',
+                                                            split: true
+                                                        });
+                                                        Transforms.setNodes(editor, {
+                                                            type: undefined
+                                                        });
+                                                    }
+                                                } else if (editor.isVoid(selectedElement)) {
+                                                    Transforms.removeNodes(editor);
+                                                }
+                                            }
+                                            Object.keys(hotkeys).forEach((hotkey)=>{
+                                                if (isHotkey(hotkey, event)) {
+                                                    event.preventDefault();
+                                                    const mark = hotkeys[hotkey];
+                                                    toggleLeaf(editor, mark);
+                                                }
+                                            });
+                                        },
+                                        placeholder: getTranslation(placeholder, i18n),
+                                        readOnly: disabled,
+                                        renderElement: renderElement,
+                                        renderLeaf: renderLeaf,
+                                        spellCheck: true
+                                    })
+                                })
+                            ]
+                        })
+                    }, JSON.stringify({
+                        initialValue,
+                        path
+                    })),
+                    /*#__PURE__*/ _jsx(FieldDescription, {
+                        Description: Description,
+                        field: field,
+                        ...descriptionProps || {}
+                    })
+                ]
+            })
+        ]
+    });
 };
 export const RichText = withCondition(RichTextField);