@ccs-ui/rc-pro 2.4.6 → 2.4.7-beta.2

package/es/context/_api.d.ts

@@ -23,7 +23,7 @@ export type FnContextType<T = Store> = {
     formInitialValues: T;
     close: () => void;
 };
-export type TableFieldNames = {
+export type PageFieldNames = {
     /** 数据源 */
     dataSource?: string[];
     /** 数据总条数 */
@@ -33,8 +33,6 @@ export type TableFieldNames = {
      * 默认配置
      * { pageNo:'pageNo',
      *   pageSize: 'pageSize',
-     *   filters':'filters',
-     *   orderProps: 'orderProps',
      *   query: 'query' }
      * */
     requestParam?: {
@@ -42,21 +40,30 @@ export type TableFieldNames = {
         pageNo: string[];
         /** 页记录数 */
         pageSize: string[];
+        /** 列筛选条件 */
+        filters: string[];
+        /** 排序参数 */
+        orderProps: string[];
         /** 查询条件 */
         query?: string[];
-        /** 排序 */
-        orderProps?: string[];
-        /** 列过滤条件 */
-        filters?: string[];
     };
 };
-export type DialogFieldNames = {
+type BaseFieldNames = {
     /** 成功标识字段 */
     success?: string[];
     /** 成功标识值 */
     successTag?: any;
-    /** 错误信息提示 */
-    errorMsg?: string[];
+    /** 信息提示 */
+    msg?: string[];
+    /** 数据 */
+    data?: string[];
+};
+/** 全局接口请求和返回字段配置 */
+export type AppFieldNames = {
+    /** 接口基础配置 */
+    base: BaseFieldNames;
+    /** 分页组件字段全局指定，涉及table，list,接口请求，返回数据字段指定 */
+    page: PageFieldNames;
 };
 export type AppConfigType = {
     /** 主题 */
@@ -69,13 +76,24 @@ export type AppConfigType = {
     watermark?: WaterMarkProps;
     /** modal or drawer holder */
     dialogHolderRef?: React.RefObject<ElementsHolderRef>;
-    /** 接口字段指定 */
-    fieldNames?: {
-        /** CcsProTable 组件字段全局指定 */
-        proTable?: TableFieldNames;
-        /** CcsProTable.Tree 组件字段全局指定 */
-        proTableTree?: Pick<TableFieldNames, 'dataSource'>;
-        /** dialog request 判定字段 */
-        dialog?: DialogFieldNames;
-    };
+    /** 接口字段指定,默认值为：
+     *  base:{
+     *    success: ['success'],
+     *    successTag: true,
+     *    msg: ['msg']
+     *  }
+     *  page:{
+     *    dataSource: ['data', 'result'],
+          total: ['data', 'totalNum'],
+          requestParam: {
+            pageNo: ['pageNo'],
+            pageSize: ['pageSize'],
+            filters: ['filters'],
+            orderProps: ['orderProps'],
+            query: ['query'],
+          }
+        }
+     */
+    fieldNames?: AppFieldNames;
 };
+export {};

package/es/dialog/HookDrawer.js

@@ -19,6 +19,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Drawer } from 'antd';
 import classNames from 'classnames';
 import { useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useInsertCss } from "../hooks/use-insert-css";
 import { DialogButtonHolder } from "./button";
 import { DialogContentContext } from "./context";
 import { FooterButtonHolder } from "./drawer-footer";
@@ -42,6 +43,11 @@ var HookDrawer = function HookDrawer(props) {
   var buttonRef = useRef(null);
   var footerRef = useRef(null);
   var formRef = useRef(null);
+
+  // 添加额外样式
+  useInsertCss('dialog-drawer', function (prefixCls) {
+    return [".".concat(prefixCls, "-drawer .").concat(prefixCls, "-drawer-extra >.").concat(prefixCls, "-btn+.").concat(prefixCls, "-btn {margin-inline-start: 8px;}"), ".ccs-dialog-drawer .".concat(prefixCls, "-drawer-footer{padding:0 !important;}")];
+  });
   var afterClose = function afterClose() {
     hookAfterClose();
   };

package/es/dialog/_api.d.ts

@@ -47,7 +47,7 @@ export interface DialogProps<TParams, TData> {
     /** 请求success和errorMsg字段指定 */
     requestFieldNames?: {
         success?: string;
-        errorMsg?: string;
+        msg?: string;
     };
     /** 阻止对request结果进行处理 */
     preventRequestHandle?: boolean;

package/es/dialog/button.d.ts

@@ -5,7 +5,7 @@ import { DialogFormRef } from './form';
 export type DialogButtonRef = {
     onSetButtons: (e: React.ReactElement) => void;
 };
-export declare const DialogButtonHolder: <TParams, TData>({ auth, extraBtn, formRef, request, onOk, onClose, buttonRef, requestFieldNames, formInitialValues, preventRequestHandle, }: Pick<DialogModalProps<TParams, TData>, "onClose" | "onOk" | "auth" | "extraBtn" | "request" | "requestFieldNames" | "preventRequestHandle"> & {
+export declare const DialogButtonHolder: <TParams, TData>({ auth, extraBtn, formRef, request, onOk, onClose, buttonRef, requestFieldNames, formInitialValues, preventRequestHandle, }: Pick<DialogModalProps<TParams, TData>, "onClose" | "onOk" | "auth" | "request" | "extraBtn" | "requestFieldNames" | "preventRequestHandle"> & {
     formRef: React.RefObject<DialogFormRef<TParams>>;
     formInitialValues: FormProps['initialValues'];
     buttonRef: RefObject<DialogButtonRef>;

package/es/dialog/button.js

@@ -18,7 +18,7 @@ import { Button, Form } from 'antd';
 import React, { useEffect, useImperativeHandle, useState } from 'react';
 import CcsDialog from '.';
 import CcsButton from "../button";
-import { useDialogFields } from "../hooks/use-app";
+import { useBaseFields } from "../hooks/use-app";
 import { getDataByNamePath } from "../utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -42,7 +42,7 @@ export var DialogButtonHolder = function DialogButtonHolder(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     loading = _useState4[0],
     setLoading = _useState4[1];
-  var globalFieldNames = useDialogFields();
+  var globalFieldNames = useBaseFields();
   useImperativeHandle(buttonRef, function () {
     return {
       onSetButtons: function onSetButtons(e) {
@@ -113,7 +113,7 @@ export var DialogButtonHolder = function DialogButtonHolder(_ref) {
               // 获取成功标识
               var success = getDataByNamePath(result, fieldNames.success);
               // 获取异常信息
-              var msg = getDataByNamePath(result, fieldNames.errorMsg);
+              var msg = getDataByNamePath(result, fieldNames.msg);
               if (success === fieldNames.successTag) {
                 // 关闭对话框
                 onHandleClose(values, result);

package/es/editor/_api.d.ts

@@ -1,11 +1,51 @@
+import { InitialConfigType } from '@lexical/react/LexicalComposer';
 import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import { PropsWithCss } from '../ccs';
-export type EditorProps = PropsWithCss & Omit<ReactCodeMirrorProps, 'height'> & {
+import { InputProps } from 'antd';
+import { EditorState, LexicalEditor } from 'lexical';
+import { CSSProperties, ReactNode } from 'react';
+import CCS from '..';
+import { AppConfigType, EditorStyles, PropsWithCss } from '../ccs';
+export type EditorCodeProps = PropsWithCss & Omit<ReactCodeMirrorProps, 'height' | 'theme'> & Pick<InputProps, 'disabled' | 'variant' | 'placeholder' | 'size'> & {
+    /** 值 */
     value?: string;
-    bordered?: boolean;
-    isPreview?: boolean;
-    placeholder?: string;
+    /** 高度 */
     height?: number | string;
+    /** 主题 */
+    theme?: AppConfigType['theme'];
+    /** 扩展 */
     extensions?: ReactCodeMirrorProps['extensions'];
+    /** 语义化style */
+    styles?: EditorStyles;
+    /** 值改变 */
     onChange?: (e: string) => void;
 };
+export type RichImageUpload = CCS.UploadImageProps & {
+    imageUrl?: string;
+};
+export type LexicalEditorBaseProps = Pick<InputProps, 'disabled' | 'variant' | 'placeholder' | 'size'> & {
+    /** 富文本值 */
+    value?: string;
+    /** 高度 */
+    height?: number | string;
+    /** 语义化style */
+    styles?: {
+        root: CSSProperties;
+        input: CSSProperties;
+        toolbar: CSSProperties;
+    };
+    /** 富文本改变事件 */
+    onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void;
+    /** 图片上传 */
+    imageUpload?: RichImageUpload;
+    /** 基础配置 */
+    editorConfig: InitialConfigType;
+    /** 插件 */
+    plugins?: ReactNode;
+};
+/** 富文本编辑器 */
+export type EditorRichProps = Omit<LexicalEditorBaseProps, 'editorConfig' | 'onChange' | 'plugins' | 'showNumber'> & {
+    /** 值改变事件 */
+    onChange?: (value: string) => void;
+    /** 主题 */
+    theme?: AppConfigType['theme'];
+};

package/es/editor/code-base.d.ts

@@ -0,0 +1,3 @@
+import { EditorCodeProps } from './_api';
+import './code.less';
+export default function BaseCodeMirror({ placeholder, height, variant, className, extensions, disabled, styles, size, theme, ...restProps }: EditorCodeProps): import("react/jsx-runtime").JSX.Element;

package/es/editor/{base.js → code-base.js}

@@ -1,5 +1,5 @@
-var _excluded = ["placeholder", "height", "bordered", "isPreview", "style", "className", "extensions"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["placeholder", "height", "variant", "className", "extensions", "disabled", "styles", "size", "theme"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -8,49 +8,54 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import CodeMirror from '@uiw/react-codemirror';
-import { theme } from 'antd';
 import classNames from 'classnames';
 import useAppConfig from "../hooks/use-app";
+import useInputCss from "../hooks/use-input-css";
+import "./code.less";
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function BaseEditor(_ref) {
+export default function BaseCodeMirror(_ref) {
   var _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? '请输入' : _ref$placeholder,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '200px' : _ref$height,
-    bordered = _ref.bordered,
-    isPreview = _ref.isPreview,
-    style = _ref.style,
+    height = _ref$height === void 0 ? 150 : _ref$height,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     className = _ref.className,
-    extensions = _ref.extensions,
+    _ref$extensions = _ref.extensions,
+    extensions = _ref$extensions === void 0 ? [] : _ref$extensions,
+    disabled = _ref.disabled,
+    styles = _ref.styles,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    theme = _ref.theme,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  // 全局配置
   var appConfig = useAppConfig();
-  var _theme$useToken = theme.useToken(),
-    token = _theme$useToken.token;
-  var isDark = appConfig.theme === 'dark';
-  var styles = style || {};
-  var previewProps = {};
-  if (bordered !== false) {
-    styles.border = "1px solid ".concat(token.colorBorder);
-    styles.borderRadius = token.borderRadius;
-  }
-  if (isPreview) {
-    styles.border = 0;
-    previewProps.editable = false;
-    previewProps.readOnly = true;
-    previewProps.height = 'auto';
-    previewProps.basicSetup = _objectSpread(_objectSpread({}, _typeof(restProps.basicSetup) === 'object' ? restProps.basicSetup : {}), {}, {
-      lineNumbers: false
-    });
-    previewProps.className = "".concat(classNames(className, 'ccs-editor', 'ccs-editor-preview'));
-  }
-  var newHeight = typeof height === 'number' ? "".concat(height, "px") : height;
+  // 主题
+  var editorTheme = theme || appConfig.theme || 'light';
+  var _useInputCss = useInputCss({
+      height: height,
+      styles: styles,
+      variant: variant,
+      size: size
+    }),
+    root = _useInputCss.styles.root,
+    onActived = _useInputCss.onActived;
   return /*#__PURE__*/_jsx(CodeMirror, _objectSpread(_objectSpread({
-    height: newHeight,
+    onFocus: function onFocus() {
+      return onActived(true);
+    },
+    onBlur: function onBlur() {
+      return onActived(false);
+    },
+    style: root,
+    readOnly: disabled,
     extensions: extensions,
     placeholder: placeholder,
-    theme: isDark ? 'dark' : 'light'
+    theme: editorTheme
   }, restProps), {}, {
-    style: styles,
-    className: classNames('ccs-editor', className)
-  }, previewProps));
+    className: classNames('ccs-editor', className, {
+      'ccs-editor-fill': variant === 'filled' && editorTheme === 'light'
+    })
+  }));
 }

package/es/editor/code.less

@@ -0,0 +1,16 @@
+.ccs-editor {
+  .cm-editor {
+    height: 100%;
+    outline: none !important;
+  }
+  /* stylelint-disable-next-line */
+  .ͼ2 .cm-gutters.cm-gutters-before {
+    border-right-width: 0;
+  }
+}
+
+.ccs-editor-fill {
+  .cm-editor {
+    background: transparent;
+  }
+}

package/es/editor/index.d.ts

@@ -1,12 +1,17 @@
-import './index.less';
 import JavaScriptEditor from './javascript';
 import JsonEditor from './json';
+import EditorRich from './rich';
 import SqlEditor from './sql';
+import XmlEditor from './xml';
+import YamlEditor from './yaml';
 declare function Editor({}: {}): import("react/jsx-runtime").JSX.Element;
 declare namespace Editor {
     var Json: typeof JsonEditor;
     var Js: typeof JavaScriptEditor;
     var Sql: typeof SqlEditor;
+    var Yaml: typeof YamlEditor;
+    var Xml: typeof XmlEditor;
     var displayName: string;
+    var Rich: typeof EditorRich;
 }
 export default Editor;

package/es/editor/index.js

@@ -1,8 +1,10 @@
 function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
-import "./index.less";
 import JavaScriptEditor from "./javascript";
 import JsonEditor from "./json";
+import EditorRich from "./rich";
 import SqlEditor from "./sql";
+import XmlEditor from "./xml";
+import YamlEditor from "./yaml";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 function Editor(_ref) {
@@ -18,7 +20,16 @@ Editor.Js = JavaScriptEditor;
 
 /** SQL 编辑器 */
 Editor.Sql = SqlEditor;
+
+/** YAML 编辑器 */
+Editor.Yaml = YamlEditor;
+
+/** XML 编辑器 */
+Editor.Xml = XmlEditor;
 if (process.env.NODE_ENV !== 'production') {
   Editor.displayName = 'CcsEditor';
 }
+
+/** 富文本 */
+Editor.Rich = EditorRich;
 export default Editor;

package/es/editor/javascript.d.ts

@@ -1,2 +1,2 @@
-import { EditorProps } from './_api';
-export default function JavaScriptEditor(props: EditorProps): import("react/jsx-runtime").JSX.Element;
+import { EditorCodeProps } from './_api';
+export default function JavaScriptEditor(props: EditorCodeProps): import("react/jsx-runtime").JSX.Element;

package/es/editor/javascript.js

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { javascript } from '@codemirror/lang-javascript';
-import BaseEditor from "./base";
+import BaseEditor from "./code-base";
 import { jsx as _jsx } from "react/jsx-runtime";
 export default function JavaScriptEditor(props) {
   return /*#__PURE__*/_jsx(BaseEditor, _objectSpread(_objectSpread({}, props), {}, {

package/es/editor/json.d.ts

@@ -1,2 +1,2 @@
-import { EditorProps } from './_api';
-export default function JsonEditor(props: EditorProps): import("react/jsx-runtime").JSX.Element;
+import { EditorCodeProps } from './_api';
+export default function JsonEditor(props: EditorCodeProps): import("react/jsx-runtime").JSX.Element;

package/es/editor/json.js

@@ -7,7 +7,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { json } from '@codemirror/lang-json';
 import { syntaxTree } from '@codemirror/language';
 import { linter } from '@codemirror/lint';
-import BaseEditor from "./base";
+import BaseEditor from "./code-base";
 import { jsx as _jsx } from "react/jsx-runtime";
 var regexpLinter = linter(function (view) {
   var diagnostics = [];

package/es/editor/lexical/base/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LexicalEditorBaseProps } from '../../_api';
+import './index.less';
+export declare const EditorRichContext: React.Context<{
+    imageUpload?: LexicalEditorBaseProps['imageUpload'];
+}>;
+export default function LexicalEditorBase({ disabled, height, styles, variant, placeholder, size, imageUpload, plugins, editorConfig, onChange, }: LexicalEditorBaseProps): import("react/jsx-runtime").JSX.Element;

package/es/editor/lexical/base/index.js

@@ -0,0 +1,100 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useAppConfig } from "../../..";
+import useInputCss from "../../../hooks/use-input-css";
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import React from 'react';
+import ImagesPlugin from "../plugins/image";
+import "./index.less";
+import ToolbarPlugin from "./toolbar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var EditorRichContext = /*#__PURE__*/React.createContext({});
+export default function LexicalEditorBase(_ref) {
+  var disabled = _ref.disabled,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 150 : _ref$height,
+    styles = _ref.styles,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '请输入' : _ref$placeholder,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    imageUpload = _ref.imageUpload,
+    plugins = _ref.plugins,
+    editorConfig = _ref.editorConfig,
+    onChange = _ref.onChange;
+  // 全局配置
+  var appConfig = useAppConfig();
+  // 主题
+  var editorTheme = appConfig.theme || 'light';
+  var _useInputCss = useInputCss({
+      height: height,
+      styles: styles,
+      variant: variant,
+      size: size,
+      theme: editorTheme
+    }),
+    _useInputCss$styles = _useInputCss.styles,
+    root = _useInputCss$styles.root,
+    inner = _useInputCss$styles.inner,
+    toolbarStyles = _useInputCss$styles.toolbarStyles,
+    placeholderStyles = _useInputCss$styles.placeholderStyles,
+    background = _useInputCss$styles.background,
+    onActived = _useInputCss.onActived;
+  return /*#__PURE__*/_jsx(EditorRichContext.Provider, {
+    value: {
+      imageUpload: imageUpload
+    },
+    children: /*#__PURE__*/_jsx(LexicalComposer, {
+      initialConfig: _objectSpread(_objectSpread({}, editorConfig), {}, {
+        editable: !disabled,
+        editorState: null
+      }),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: "css-editor-rich",
+        style: _objectSpread({
+          background: background
+        }, root),
+        children: [/*#__PURE__*/_jsx(ToolbarPlugin, {
+          disabled: disabled,
+          style: toolbarStyles
+        }), /*#__PURE__*/_jsxs("div", {
+          className: "editor-inner",
+          style: inner,
+          children: [/*#__PURE__*/_jsx(RichTextPlugin, {
+            contentEditable: /*#__PURE__*/_jsx(ContentEditable, {
+              className: "editor-input",
+              "aria-placeholder": placeholder,
+              placeholder: /*#__PURE__*/_jsx("div", {
+                className: "editor-placeholder",
+                style: placeholderStyles,
+                children: placeholder
+              }),
+              onFocus: function onFocus() {
+                return onActived(true);
+              },
+              onBlur: function onBlur() {
+                return onActived(false);
+              }
+            }),
+            ErrorBoundary: LexicalErrorBoundary
+          }), /*#__PURE__*/_jsx(OnChangePlugin, {
+            onChange: onChange
+          }), /*#__PURE__*/_jsx(ImagesPlugin, {}), /*#__PURE__*/_jsx(HistoryPlugin, {}), /*#__PURE__*/_jsx(LinkPlugin, {}), plugins]
+        })]
+      })
+    })
+  });
+}