@arkyn/components 1.3.120 → 1.3.121

package/dist/components/RichText/functions/deserialize.d.ts

@@ -0,0 +1,3 @@
+declare const getSlateFromHtml: (html: string) => (import("../defineType").CustomElement | import("../defineType").CustomText)[];
+export { getSlateFromHtml };
+//# sourceMappingURL=deserialize.d.ts.map

package/dist/components/RichText/functions/deserialize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deserialize.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/deserialize.ts"],"names":[],"mappings":"AA8CA,QAAA,MAAM,gBAAgB,SAAU,MAAM,mFAarC,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/RichText/functions/deserialize.js

@@ -0,0 +1,54 @@
+import parse from "html-react-parser";
+const deserialize = (el) => {
+    if (typeof el === "string")
+        return { text: el || "" };
+    function parsedChildren(children) {
+        return children.map((child) => deserialize(child));
+    }
+    const children = Array.isArray(el.props.children)
+        ? parsedChildren(el.props.children)
+        : [{ text: el.props.children }];
+    switch (el.type) {
+        case "p":
+            return { type: "paragraph", children };
+        case "blockquote":
+            return { type: "blockQuote", children };
+        case "ul":
+            return { type: "bulletedList", children };
+        case "h1":
+            return { type: "headingOne", children };
+        case "h2":
+            return { type: "headingTwo", children };
+        case "li":
+            return { type: "listItem", children };
+        case "ol":
+            return { type: "numberedList", children };
+        case "strong":
+            return { text: "", children, bold: true };
+        case "code":
+            return { text: "", children, code: true };
+        case "em":
+            return { text: "", children, italic: true };
+        case "u":
+            return { text: "", children, underline: true };
+        default:
+            return { text: "", children };
+    }
+};
+const getSlateFromHtml = (html) => {
+    const parsed = parse(html);
+    if (Array.isArray(parsed)) {
+        return parsed.flatMap((el) => {
+            if (typeof el === "string")
+                return { text: el };
+            return deserialize(el);
+        });
+    }
+    else if (typeof parsed === "string") {
+        return [{ text: parsed }];
+    }
+    else {
+        return [deserialize(parsed)];
+    }
+};
+export { getSlateFromHtml };

package/dist/components/RichText/functions/extractText.d.ts

@@ -0,0 +1,4 @@
+import { Descendant } from "slate";
+declare function extractText(nodes: Descendant[]): string;
+export { extractText };
+//# sourceMappingURL=extractText.d.ts.map

package/dist/components/RichText/functions/extractText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/extractText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,OAAO,CAAC;AAEzC,iBAAS,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,UAEvC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/RichText/functions/extractText.js

@@ -0,0 +1,5 @@
+import { Node } from "slate";
+function extractText(nodes) {
+    return nodes.map((n) => Node.string(n)).join("");
+}
+export { extractText };

package/dist/components/RichText/functions/serialize.d.ts

@@ -1,3 +1,4 @@
-declare const serialize: (node: any) => string;
-export { serialize };
+import { Editor } from "slate";
+declare const getHtmlFromSlate: (editor: Editor) => string;
+export { getHtmlFromSlate };
 //# sourceMappingURL=serialize.d.ts.map

package/dist/components/RichText/functions/serialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serialize.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/serialize.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,SAAS,SAAU,GAAG,KAAG,MAgD9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"serialize.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/serialize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAiC,MAAM,OAAO,CAAC;AA8C9D,QAAA,MAAM,gBAAgB,WAAY,MAAM,KAAG,MAE1C,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/RichText/functions/serialize.js

@@ -1,11 +1,21 @@
-// import { Node, Element as SlateElement } from "slate";
-import { Element as SlateElement } from "slate";
+import { Element as SlateElement, Text } from "slate";
 const serialize = (node) => {
-    // function exportHtml() {
-    //   const content = editor.children;
-    //   const html = content.map((node) => serialize(node)).join("");
-    //   setHtml(html);
-    // }
+    if (Text.isText(node)) {
+        let text = node.text;
+        if (node.bold) {
+            text = `<strong>${text}</strong>`;
+        }
+        if (node.code) {
+            text = `<code>${text}</code>`;
+        }
+        if (node.italic) {
+            text = `<em>${text}</em>`;
+        }
+        if (node.underline) {
+            text = `<u>${text}</u>`;
+        }
+        return text;
+    }
     if (SlateElement.isElement(node)) {
         const children = node.children.map((n) => serialize(n)).join("");
         switch (node.type) {
@@ -27,22 +37,9 @@ const serialize = (node) => {
                 return children;
         }
     }
-    if (node.text) {
-        let text = node.text;
-        if (node.bold) {
-            text = `<strong>${text}</strong>`;
-        }
-        if (node.code) {
-            text = `<code>${text}</code>`;
-        }
-        if (node.italic) {
-            text = `<em>${text}</em>`;
-        }
-        if (node.underline) {
-            text = `<u>${text}</u>`;
-        }
-        return text;
-    }
     return "";
 };
-export { serialize };
+const getHtmlFromSlate = (editor) => {
+    return editor.children.map((node) => serialize(node)).join("");
+};
+export { getHtmlFromSlate };

package/dist/components/RichText/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAgB,UAAU,EAAoB,MAAM,OAAO,CAAC;AAanE,OAAO,cAAc,CAAC;AAGtB,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,YAAY,EACZ,qBAA6B,EAC7B,uBAAuB,EACvB,QAAe,EACf,aAAa,EACb,QAAQ,EACR,OAAO,EAAE,WAAW,GACrB,EAAE,aAAa,2CAqHf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAgB,UAAU,EAAc,MAAM,OAAO,CAAC;AAc7D,OAAO,cAAc,CAAC;AAMtB,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,YAAY,EACZ,qBAA6B,EAC7B,uBAAuB,EACvB,QAAe,EACf,aAAa,EACb,QAAQ,EACR,OAAO,EAAE,WAAW,GACrB,EAAE,aAAa,2CAwGf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/RichText/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import isHotkey from "is-hotkey";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code, Heading1, Heading2, Italic, Quote, Underline, } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { createEditor, Transforms, Node } from "slate";
+import { createEditor, Transforms } from "slate";
 import { withHistory } from "slate-history";
 import { Editable, Slate, withReact } from "slate-react";
 import { BlockButton } from "./components/BlockButton/intex";
@@ -13,21 +13,24 @@ import { Toolbar } from "./components/Toolbar";
 import { toggleMark } from "./functions/toggleMark";
 import { HOTKEYS } from "./template/HOTKEYS";
 import { INITIAL_VALUE } from "./template/INITIAL_VALUE";
-import "./styles.css";
 import { useFormController } from "../Form/FormController";
+import "./styles.css";
+import { getSlateFromHtml } from "./functions/deserialize";
+import { extractText } from "./functions/extractText";
+import { getHtmlFromSlate } from "./functions/serialize";
 function RichText({ name, defaultValue, enforceCharacterLimit = false, onChangeCharactersCount, maxLimit = 2000, onValueChange, onChange, isError: baseIsError, }) {
-    function extractText(nodes) {
-        return nodes.map((n) => Node.string(n)).join("");
-    }
-    const defaultNodes = defaultValue ? JSON.parse(defaultValue) : INITIAL_VALUE;
-    const [charactersCount, setCharactersCount] = useState(extractText(defaultNodes).length);
-    const [editorValue, setEditorValue] = useState(defaultNodes);
-    const [onFocus, setOnFocus] = useState(false);
+    const editor = useMemo(() => withHistory(withReact(createEditor())), []);
     const { id, inputRef, error } = useFormController();
     const baseRef = useRef(null);
+    const defaultNodes = defaultValue
+        ? getSlateFromHtml(defaultValue)
+        : INITIAL_VALUE;
+    const textFromNodes = extractText(defaultNodes);
+    const [charactersCount, setCharactersCount] = useState(textFromNodes.length);
+    const [inputValue, setInputValue] = useState(defaultValue);
+    const [onFocus, setOnFocus] = useState(false);
     const ref = inputRef || baseRef;
     const isError = baseIsError || !!error;
-    const editor = useMemo(() => withHistory(withReact(createEditor())), []);
     const renderLeaf = useCallback(Leaf, []);
     const renderElement = useCallback(Element, []);
     function handleChange(value) {
@@ -38,9 +41,9 @@ function RichText({ name, defaultValue, enforceCharacterLimit = false, onChangeC
             return;
         }
         else {
-            setEditorValue(value);
+            setInputValue(getHtmlFromSlate(editor));
             onChange && onChange(value);
-            onValueChange && onValueChange(text);
+            onValueChange && onValueChange(getHtmlFromSlate(editor));
             editor.children = value;
             Transforms.setNodes(editor, { children: value });
         }
@@ -53,7 +56,7 @@ function RichText({ name, defaultValue, enforceCharacterLimit = false, onChangeC
             : "errorFalse";
     const className = `arkynRichText ${errorClass} ${focusClass}`;
     const restatesCharacters = maxLimit - charactersCount;
-    return (_jsxs(Slate, { editor: editor, initialValue: defaultValue ? JSON.parse(defaultValue) : INITIAL_VALUE, onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [_jsx(BlockButton, { format: "headingOne", icon: Heading1 }), _jsx(BlockButton, { format: "headingTwo", icon: Heading2 }), _jsx(BlockButton, { format: "blockQuote", icon: Quote }), _jsx(MarkButton, { format: "bold", icon: Bold }), _jsx(MarkButton, { format: "italic", icon: Italic }), _jsx(MarkButton, { format: "underline", icon: Underline }), _jsx(MarkButton, { format: "code", icon: Code }), _jsx(BlockButton, { format: "left", icon: AlignLeft }), _jsx(BlockButton, { format: "right", icon: AlignRight }), _jsx(BlockButton, { format: "center", icon: AlignCenter }), _jsx(BlockButton, { format: "justify", icon: AlignJustify })] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, id: id, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
+    return (_jsxs(Slate, { editor: editor, initialValue: defaultNodes, onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [_jsx(BlockButton, { format: "headingOne", icon: Heading1 }), _jsx(BlockButton, { format: "headingTwo", icon: Heading2 }), _jsx(BlockButton, { format: "blockQuote", icon: Quote }), _jsx(MarkButton, { format: "bold", icon: Bold }), _jsx(MarkButton, { format: "italic", icon: Italic }), _jsx(MarkButton, { format: "underline", icon: Underline }), _jsx(MarkButton, { format: "code", icon: Code }), _jsx(BlockButton, { format: "left", icon: AlignLeft }), _jsx(BlockButton, { format: "right", icon: AlignRight }), _jsx(BlockButton, { format: "center", icon: AlignCenter }), _jsx(BlockButton, { format: "justify", icon: AlignJustify })] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, id: id, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
                             for (const hotkey in HOTKEYS) {
                                 if (isHotkey(hotkey, event)) {
                                     event.preventDefault();
@@ -61,6 +64,6 @@ function RichText({ name, defaultValue, enforceCharacterLimit = false, onChangeC
                                     toggleMark(editor, mark);
                                 }
                             }
-                        } }), restatesCharacters < 0 && (_jsx("div", { className: "restatesCharacters", children: restatesCharacters }))] }), _jsx("input", { ref: ref, type: "hidden", name: name, value: JSON.stringify(editorValue) }), _jsx("input", { type: "hidden", name: `${name}Count`, value: charactersCount })] }));
+                        } }), restatesCharacters < 0 && (_jsx("div", { className: "restatesCharacters", children: restatesCharacters }))] }), _jsx("input", { ref: ref, type: "hidden", name: name, value: inputValue }), _jsx("input", { type: "hidden", name: `${name}Count`, value: charactersCount })] }));
 }
 export { RichText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arkyn/components",
-  "version": "1.3.120",
+  "version": "1.3.121",
   "main": "./dist/bundle.js",
   "types": "./dist/index.d.ts",
   "author": "Lucas Gonçalves",
@@ -14,6 +14,7 @@
     "@react-google-maps/api": "^2.19.3",
     "@react-input/mask": "^1.2.5",
     "framer-motion": "^11.3.21",
+    "html-react-parser": "^5.1.16",
     "is-hotkey": "^0.2.0",
     "lucide-react": "^0.424.0",
     "react-scroll": "^1.9.0",

package/src/components/RichText/defineType.d.ts

@@ -24,6 +24,7 @@ type CustomElement = {
 
 type CustomText = {
   bold?: boolean;
+  text: string;
   italic?: boolean;
   code?: boolean;
   underline?: boolean;

package/src/components/RichText/functions/deserialize.ts

@@ -0,0 +1,62 @@
+import { Descendant } from "slate";
+import parse from "html-react-parser";
+
+type ParseElement =
+  | { type: string; props: { children: ParseElement[] | string } }
+  | "string";
+
+const deserialize = (el: ParseElement): Descendant => {
+  if (typeof el === "string") return { text: el || "" };
+
+  function parsedChildren(children: ParseElement[]) {
+    return children.map((child) => deserialize(child));
+  }
+
+  const children = Array.isArray(el.props.children)
+    ? parsedChildren(el.props.children)
+    : [{ text: el.props.children }];
+
+  switch (el.type) {
+    case "p":
+      return { type: "paragraph", children };
+    case "blockquote":
+      return { type: "blockQuote", children };
+    case "ul":
+      return { type: "bulletedList", children };
+    case "h1":
+      return { type: "headingOne", children };
+    case "h2":
+      return { type: "headingTwo", children };
+    case "li":
+      return { type: "listItem", children };
+    case "ol":
+      return { type: "numberedList", children };
+    case "strong":
+      return { text: "", children, bold: true };
+    case "code":
+      return { text: "", children, code: true };
+    case "em":
+      return { text: "", children, italic: true };
+    case "u":
+      return { text: "", children, underline: true };
+    default:
+      return { text: "", children };
+  }
+};
+
+const getSlateFromHtml = (html: string) => {
+  const parsed = parse(html);
+
+  if (Array.isArray(parsed)) {
+    return parsed.flatMap((el) => {
+      if (typeof el === "string") return { text: el };
+      return deserialize(el);
+    });
+  } else if (typeof parsed === "string") {
+    return [{ text: parsed }];
+  } else {
+    return [deserialize(parsed)];
+  }
+};
+
+export { getSlateFromHtml };

package/src/components/RichText/functions/extractText.ts

@@ -0,0 +1,7 @@
+import { Descendant, Node } from "slate";
+
+function extractText(nodes: Descendant[]) {
+  return nodes.map((n) => Node.string(n)).join("");
+}
+
+export { extractText };

package/src/components/RichText/functions/serialize.ts

@@ -1,12 +1,22 @@
-// import { Node, Element as SlateElement } from "slate";
-import { Element as SlateElement } from "slate";
+import { Editor, Element as SlateElement, Text } from "slate";
 
 const serialize = (node: any): string => {
-  // function exportHtml() {
-  //   const content = editor.children;
-  //   const html = content.map((node) => serialize(node)).join("");
-  //   setHtml(html);
-  // }
+  if (Text.isText(node)) {
+    let text = node.text;
+    if (node.bold) {
+      text = `<strong>${text}</strong>`;
+    }
+    if (node.code) {
+      text = `<code>${text}</code>`;
+    }
+    if (node.italic) {
+      text = `<em>${text}</em>`;
+    }
+    if (node.underline) {
+      text = `<u>${text}</u>`;
+    }
+    return text;
+  }
 
   if (SlateElement.isElement(node)) {
     const children = node.children.map((n: any) => serialize(n)).join("");
@@ -31,24 +41,11 @@ const serialize = (node: any): string => {
     }
   }
 
-  if (node.text) {
-    let text = node.text;
-    if (node.bold) {
-      text = `<strong>${text}</strong>`;
-    }
-    if (node.code) {
-      text = `<code>${text}</code>`;
-    }
-    if (node.italic) {
-      text = `<em>${text}</em>`;
-    }
-    if (node.underline) {
-      text = `<u>${text}</u>`;
-    }
-    return text;
-  }
-
   return "";
 };
 
-export { serialize };
+const getHtmlFromSlate = (editor: Editor): string => {
+  return editor.children.map((node) => serialize(node)).join("");
+};
+
+export { getHtmlFromSlate };

package/src/components/RichText/index.tsx

@@ -13,7 +13,7 @@ import {
   Underline,
 } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { createEditor, Descendant, Transforms, Node } from "slate";
+import { createEditor, Descendant, Transforms } from "slate";
 import { withHistory } from "slate-history";
 import { Editable, Slate, withReact } from "slate-react";
 
@@ -26,8 +26,12 @@ import { toggleMark } from "./functions/toggleMark";
 import { HOTKEYS } from "./template/HOTKEYS";
 import { INITIAL_VALUE } from "./template/INITIAL_VALUE";
 
-import "./styles.css";
 import { useFormController } from "../Form/FormController";
+import "./styles.css";
+
+import { getSlateFromHtml } from "./functions/deserialize";
+import { extractText } from "./functions/extractText";
+import { getHtmlFromSlate } from "./functions/serialize";
 
 type RichTextProps = {
   name: string;
@@ -50,28 +54,24 @@ function RichText({
   onChange,
   isError: baseIsError,
 }: RichTextProps) {
-  function extractText(nodes: Descendant[]) {
-    return nodes.map((n) => Node.string(n)).join("");
-  }
-
-  const defaultNodes = defaultValue ? JSON.parse(defaultValue) : INITIAL_VALUE;
+  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
+  const { id, inputRef, error } = useFormController();
 
-  const [charactersCount, setCharactersCount] = useState(
-    extractText(defaultNodes).length
-  );
+  const baseRef = useRef<HTMLInputElement>(null);
 
-  const [editorValue, setEditorValue] = useState<Descendant[]>(defaultNodes);
-  const [onFocus, setOnFocus] = useState(false);
+  const defaultNodes = defaultValue
+    ? getSlateFromHtml(defaultValue)
+    : INITIAL_VALUE;
 
-  const { id, inputRef, error } = useFormController();
+  const textFromNodes = extractText(defaultNodes);
 
-  const baseRef = useRef<HTMLInputElement>(null);
+  const [charactersCount, setCharactersCount] = useState(textFromNodes.length);
+  const [inputValue, setInputValue] = useState(defaultValue);
+  const [onFocus, setOnFocus] = useState(false);
 
   const ref = inputRef || baseRef;
   const isError = baseIsError || !!error;
 
-  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
-
   const renderLeaf = useCallback(Leaf, []);
   const renderElement = useCallback(Element, []);
 
@@ -84,10 +84,10 @@ function RichText({
     if (enforceCharacterLimit && text.length >= maxLimit) {
       return;
     } else {
-      setEditorValue(value);
+      setInputValue(getHtmlFromSlate(editor));
 
       onChange && onChange(value);
-      onValueChange && onValueChange(text);
+      onValueChange && onValueChange(getHtmlFromSlate(editor));
 
       editor.children = value;
       Transforms.setNodes(editor, { children: value });
@@ -108,7 +108,7 @@ function RichText({
   return (
     <Slate
       editor={editor}
-      initialValue={defaultValue ? JSON.parse(defaultValue) : INITIAL_VALUE}
+      initialValue={defaultNodes}
       onChange={handleChange}
       onValueChange={handleChange}
     >
@@ -117,9 +117,6 @@ function RichText({
           <BlockButton format="headingOne" icon={Heading1} />
           <BlockButton format="headingTwo" icon={Heading2} />
           <BlockButton format="blockQuote" icon={Quote} />
-          {/* <BlockButton format="bulletedList" icon={ListVideo} /> */}
-          {/* <BlockButton format="listItem" icon={List} /> */}
-          {/* <BlockButton format="numberedList" icon={ListOrdered} /> */}
 
           <MarkButton format="bold" icon={Bold} />
           <MarkButton format="italic" icon={Italic} />
@@ -156,13 +153,7 @@ function RichText({
         )}
       </div>
 
-      <input
-        ref={ref}
-        type="hidden"
-        name={name}
-        value={JSON.stringify(editorValue)}
-      />
-
+      <input ref={ref} type="hidden" name={name} value={inputValue} />
       <input type="hidden" name={`${name}Count`} value={charactersCount} />
     </Slate>
   );