@apexcura/ui-components 0.0.7 → 0.0.8-Beta0

package/dist/index.d.mts

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | undefined;
+    value?: string | number | boolean | any[];
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -16,13 +16,16 @@ type ElementType = {
     name?: string;
     suffix?: React.ReactNode;
     maxLength?: number;
-    onChange?: (value: string | number | boolean) => void;
+    fieldNames?: any[];
+    onChange?: (value: string | number | boolean | any[]) => void;
+    options: any[];
+    onFocusHandler: () => void;
 };
 
-interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | boolean) => void;
+interface ElementExecuterProps$3 extends ElementType {
+    onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
+declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 
 interface InputData {
     placeholder?: string;
@@ -36,18 +39,31 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
+interface ElementExecuterProps$2 extends ElementType {
+    onChange: (value: string | number | boolean | any[]) => void;
+}
+declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
+
 interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean) => void;
+    onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
+declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
+
+declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | boolean) => void;
+    onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
+declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
-declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
+declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const MultipleSelectElement: () => React$1.JSX.Element;
 
 declare const ButtonElement: () => React$1.JSX.Element;
 
-export { ButtonElement, NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };
+export { ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ type ElementType = {
     disabled?: boolean;
     prefix?: React.ReactNode;
     type?: string;
-    value?: string | number | boolean | undefined;
+    value?: string | number | boolean | any[];
     status?: "error" | "warning";
     styles?: React.CSSProperties;
     classNames?: string;
@@ -16,13 +16,16 @@ type ElementType = {
     name?: string;
     suffix?: React.ReactNode;
     maxLength?: number;
-    onChange?: (value: string | number | boolean) => void;
+    fieldNames?: any[];
+    onChange?: (value: string | number | boolean | any[]) => void;
+    options: any[];
+    onFocusHandler: () => void;
 };
 
-interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | boolean) => void;
+interface ElementExecuterProps$3 extends ElementType {
+    onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
+declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 
 interface InputData {
     placeholder?: string;
@@ -36,18 +39,31 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
+interface ElementExecuterProps$2 extends ElementType {
+    onChange: (value: string | number | boolean | any[]) => void;
+}
+declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
+
 interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean) => void;
+    onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const NumberElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
+declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
+
+declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | boolean) => void;
+    onChange: (value: string | number | boolean | any[]) => void;
 }
-declare const TextareaElement: (props: ElementExecuterProps) => React$1.JSX.Element;
+declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
-declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
+declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const MultipleSelectElement: () => React$1.JSX.Element;
 
 declare const ButtonElement: () => React$1.JSX.Element;
 
-export { ButtonElement, NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };
+export { ButtonElement, CheckboxElement, CkEditor, MultipleSelectElement, NumberElement, PasswordElement, RadioElement, SelectElement, SingleSelectElement, TextElement, TextareaElement };

package/dist/index.js

@@ -31,9 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   ButtonElement: () => ButtonElement,
+  CheckboxElement: () => CheckboxElement,
+  CkEditor: () => CkEditor,
+  MultipleSelectElement: () => MultipleSelectElement,
   NumberElement: () => NumberElement,
   PasswordElement: () => PasswordElement,
+  RadioElement: () => RadioElement,
   SelectElement: () => SelectElement,
+  SingleSelectElement: () => SingleSelectElement,
   TextElement: () => TextElement,
   TextareaElement: () => TextareaElement
 });
@@ -146,11 +151,6 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 var import_react5 = __toESM(require("react"));
 var import_antd5 = require("antd");
-var options = [
-  { label: "female", value: "female" },
-  { label: "male", value: "male" },
-  { label: "other", value: "other" }
-];
 var labelRender = (props) => {
   const { label, value } = props;
   if (label) {
@@ -159,7 +159,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -168,7 +168,7 @@ var SelectElement = (props) => {
     import_antd5.Select,
     {
       labelRender,
-      options,
+      options: props.fieldNames,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -178,21 +178,209 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
 
-// src/Components/Button.tsx
+// src/Components/RadioElement.tsx
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
-var ButtonElement = () => /* @__PURE__ */ import_react6.default.createElement(import_antd6.Flex, { gap: "small" }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Button, { type: "primary" }, "Primary Button"));
+var RadioElement = (props) => {
+  const handleChange3 = (e) => {
+    if (props && props.onChange) {
+      props.onChange(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange3 }, "D"));
+};
+
+// src/Components/Checkbox.tsx
+var import_react7 = __toESM(require("react"));
+var import_antd7 = require("antd");
+var CheckboxGroup = import_antd7.Checkbox.Group;
+var plainOptions = ["Apple", "Pear", "Orange"];
+var defaultCheckedList = [];
+var CheckboxElement = (props) => {
+  const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
+  const checkAll = plainOptions.length === checkedList.length;
+  const handleChange3 = (list) => {
+    setCheckedList(list);
+    if (props.onChange) {
+      props.onChange(list);
+    }
+  };
+  const onHandleAllChanges = (e) => {
+    const newList = e.target.checked ? plainOptions : [];
+    setCheckedList(newList);
+    if (props.onChange) {
+      props.onChange(newList);
+    }
+  };
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(
+    import_antd7.Checkbox,
+    {
+      disabled: props.disabled,
+      id: props.name,
+      style: props.styles,
+      className: props.classNames,
+      onChange: onHandleAllChanges,
+      checked: checkAll
+    },
+    "Check all"
+  ), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
+    CheckboxGroup,
+    {
+      disabled: props.disabled,
+      style: props.styles,
+      className: props.classNames,
+      options: plainOptions,
+      value: checkedList,
+      onChange: handleChange3
+    }
+  ));
+};
+
+// src/Components/CkEditor.tsx
+var import_react8 = require("react");
+var import_tinymce_react = require("@tinymce/tinymce-react");
+var import_react9 = __toESM(require("react"));
+var CkEditor = (props) => {
+  const editorRef = (0, import_react8.useRef)(null);
+  const log = () => {
+    if (editorRef.current) {
+      let content = editorRef.current.getContent();
+      if (props.onChange) {
+        props.onChange(content);
+      }
+    }
+  };
+  return /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement(
+    import_tinymce_react.Editor,
+    {
+      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
+      onInit: (_evt, editor) => {
+        if (editor)
+          editorRef.current = editor;
+      },
+      initialValue: "<p>This is the initial content of the editor.</p>",
+      init: {
+        height: 500,
+        menubar: false,
+        plugins: [
+          "advlist",
+          "autolink",
+          "lists",
+          "link",
+          "image",
+          "charmap",
+          "preview",
+          "anchor",
+          "searchreplace",
+          "visualblocks",
+          "code",
+          "fullscreen",
+          "insertdatetime",
+          "media",
+          "table",
+          "code",
+          "help",
+          "wordcount"
+        ],
+        toolbar: "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+        content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
+      }
+    }
+  ), /* @__PURE__ */ import_react9.default.createElement("button", { onClick: log }, "Log editor content"));
+};
+
+// src/Components/Select/SingleSelectElement.tsx
+var import_react10 = __toESM(require("react"));
+var import_antd8 = require("antd");
+var onSearch = (value) => {
+  console.log("search:", value);
+};
+var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
+var SingleSelectElement = (props) => {
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_antd8.Select,
+    {
+      showSearch: true,
+      placeholder: props.placeholder,
+      optionFilterProp: "children",
+      onChange: handleChange,
+      onSearch,
+      filterOption,
+      onFocus: props.onFocusHandler,
+      options: props.options
+    }
+  );
+};
+
+// src/Components/Select/MultipleSelectElement.tsx
+var import_react11 = __toESM(require("react"));
+var import_antd9 = require("antd");
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_antd9.Select,
+    {
+      mode: "multiple",
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ import_react11.default.createElement(import_antd9.Space, null, /* @__PURE__ */ import_react11.default.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
+    }
+  );
+};
+
+// src/Components/Button.tsx
+var import_react12 = __toESM(require("react"));
+var import_antd10 = require("antd");
+var ButtonElement = () => /* @__PURE__ */ import_react12.default.createElement(import_antd10.Flex, { gap: "small" }, /* @__PURE__ */ import_react12.default.createElement(import_antd10.Button, { type: "primary" }, "Primary Button"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ButtonElement,
+  CheckboxElement,
+  CkEditor,
+  MultipleSelectElement,
   NumberElement,
   PasswordElement,
+  RadioElement,
   SelectElement,
+  SingleSelectElement,
   TextElement,
   TextareaElement
 });

package/dist/index.mjs

@@ -105,11 +105,6 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 import React5 from "react";
 import { Select } from "antd";
-var options = [
-  { label: "female", value: "female" },
-  { label: "male", value: "male" },
-  { label: "other", value: "other" }
-];
 var labelRender = (props) => {
   const { label, value } = props;
   if (label) {
@@ -118,7 +113,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ React5.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -127,7 +122,7 @@ var SelectElement = (props) => {
     Select,
     {
       labelRender,
-      options,
+      options: props.fieldNames,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -137,20 +132,208 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
 
-// src/Components/Button.tsx
+// src/Components/RadioElement.tsx
 import React6 from "react";
+import { Radio } from "antd";
+var RadioElement = (props) => {
+  const handleChange3 = (e) => {
+    if (props && props.onChange) {
+      props.onChange(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange3 }, "D"));
+};
+
+// src/Components/Checkbox.tsx
+import React7, { useState as useState2 } from "react";
+import { Checkbox, Divider } from "antd";
+var CheckboxGroup = Checkbox.Group;
+var plainOptions = ["Apple", "Pear", "Orange"];
+var defaultCheckedList = [];
+var CheckboxElement = (props) => {
+  const [checkedList, setCheckedList] = useState2(defaultCheckedList);
+  const checkAll = plainOptions.length === checkedList.length;
+  const handleChange3 = (list) => {
+    setCheckedList(list);
+    if (props.onChange) {
+      props.onChange(list);
+    }
+  };
+  const onHandleAllChanges = (e) => {
+    const newList = e.target.checked ? plainOptions : [];
+    setCheckedList(newList);
+    if (props.onChange) {
+      props.onChange(newList);
+    }
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+    Checkbox,
+    {
+      disabled: props.disabled,
+      id: props.name,
+      style: props.styles,
+      className: props.classNames,
+      onChange: onHandleAllChanges,
+      checked: checkAll
+    },
+    "Check all"
+  ), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
+    CheckboxGroup,
+    {
+      disabled: props.disabled,
+      style: props.styles,
+      className: props.classNames,
+      options: plainOptions,
+      value: checkedList,
+      onChange: handleChange3
+    }
+  ));
+};
+
+// src/Components/CkEditor.tsx
+import { useRef } from "react";
+import { Editor } from "@tinymce/tinymce-react";
+import React8 from "react";
+var CkEditor = (props) => {
+  const editorRef = useRef(null);
+  const log = () => {
+    if (editorRef.current) {
+      let content = editorRef.current.getContent();
+      if (props.onChange) {
+        props.onChange(content);
+      }
+    }
+  };
+  return /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
+    Editor,
+    {
+      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
+      onInit: (_evt, editor) => {
+        if (editor)
+          editorRef.current = editor;
+      },
+      initialValue: "<p>This is the initial content of the editor.</p>",
+      init: {
+        height: 500,
+        menubar: false,
+        plugins: [
+          "advlist",
+          "autolink",
+          "lists",
+          "link",
+          "image",
+          "charmap",
+          "preview",
+          "anchor",
+          "searchreplace",
+          "visualblocks",
+          "code",
+          "fullscreen",
+          "insertdatetime",
+          "media",
+          "table",
+          "code",
+          "help",
+          "wordcount"
+        ],
+        toolbar: "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
+        content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
+      }
+    }
+  ), /* @__PURE__ */ React8.createElement("button", { onClick: log }, "Log editor content"));
+};
+
+// src/Components/Select/SingleSelectElement.tsx
+import React9 from "react";
+import { Select as Select2 } from "antd";
+var onSearch = (value) => {
+  console.log("search:", value);
+};
+var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
+var SingleSelectElement = (props) => {
+  return /* @__PURE__ */ React9.createElement(
+    Select2,
+    {
+      showSearch: true,
+      placeholder: props.placeholder,
+      optionFilterProp: "children",
+      onChange: handleChange,
+      onSearch,
+      filterOption,
+      onFocus: props.onFocusHandler,
+      options: props.options
+    }
+  );
+};
+
+// src/Components/Select/MultipleSelectElement.tsx
+import React10 from "react";
+import { Select as Select3, Space as Space2 } from "antd";
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
+  return /* @__PURE__ */ React10.createElement(
+    Select3,
+    {
+      mode: "multiple",
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ React10.createElement(Space2, null, /* @__PURE__ */ React10.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
+    }
+  );
+};
+
+// src/Components/Button.tsx
+import React11 from "react";
 import { Button as Button2, Flex as Flex2 } from "antd";
-var ButtonElement = () => /* @__PURE__ */ React6.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React6.createElement(Button2, { type: "primary" }, "Primary Button"));
+var ButtonElement = () => /* @__PURE__ */ React11.createElement(Flex2, { gap: "small" }, /* @__PURE__ */ React11.createElement(Button2, { type: "primary" }, "Primary Button"));
 export {
   ButtonElement,
+  CheckboxElement,
+  CkEditor,
+  MultipleSelectElement,
   NumberElement,
   PasswordElement,
+  RadioElement,
   SelectElement,
+  SingleSelectElement,
   TextElement,
   TextareaElement
 };

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.7",
+  "version": "0.0.8-Beta0",
   "description": "Apex cura React components library",
-  "keywords" : ["apex cura", "input", "ui", "react", "react-component"],
+  "keywords": [
+    "apex cura",
+    "input",
+    "ui",
+    "react",
+    "react-component"
+  ],
   "homepage": "https://www.apexcura.com/",
   "bugs": {
     "url": "https://github.com/apexcura/ui-components/issues"
@@ -11,7 +17,7 @@
     "type": "git",
     "url": "git+https://github.com/apexcura/ui-components.git",
     "directory": "packages/ui-components"
-  },  
+  },
   "author": "Apex Cura <hello@apexcura.com>",
   "license": "ISC",
   "main": "./dist/index.js",
@@ -24,21 +30,24 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.6",
-    "@types/react-global-configuration": "^1.3.3",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.3.1",
     "@types/react-dom": "18.2.18",
+    "@types/react-global-configuration": "^1.3.3",
     "@types/testing-library__react": "^10.2.0",
     "antd": "^5.16.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tsup": "^8.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "ts-jest": "^29.1.2",
+    "tsup": "^8.0.2",
     "typescript": "^5.4.5"
   },
   "engines": {
     "node": ">=18.0.0"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-react": "^5.0.1"
   }
 }