frst-components 0.22.16 → 0.22.18

package/dist/index.js

@@ -3470,6 +3470,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
             }
             countChars();
             createFormatAndTextContentToSaveComment();
+            resizeDiv();
         }
     };
     //create a method that increase the size of the div as the scroll height increases
@@ -3579,14 +3580,18 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
     const clearDivContent = () => {
         if (!divInputRef.current)
             return;
-        console.log('placeholder focus = ', focus);
-        console.log('placeholder divInputRef.current.childNodes.length = ', divInputRef.current.childNodes.length);
+        console.log(`placeholder primeiro if divInputRef.current.childNodes.length === 0 && !focus resultado = ${divInputRef.current.childNodes.length === 0 && !focus}`);
+        console.log(`placeholder segundo if divInputRef.current.childNodes.length >= 1 resultado = ${divInputRef.current.childNodes.length >= 1}`);
         if ((divInputRef.current.childNodes.length === 0 && !focus)) {
+            console.log(`placeholder vou incluir o placeholder`);
+            debugger;
             // create a textnode with the placeholder
             divInputRef.current.innerText = placeholder;
             setPlaceholder(true);
         }
         else if (!focus && divInputRef.current.childNodes.length >= 1) {
+            debugger;
+            console.log(`placeholder vou incluir 2 o placeholder`);
             // loop over all child element and check if they are empty
             let isEmpty = true;
             divInputRef.current.childNodes.forEach((child) => {
@@ -3594,6 +3599,10 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
                     isEmpty = false;
                     setPlaceholder(false);
                 }
+                else if (child.textContent === placeholder) {
+                    console.log(`placeholder child.textContent === placeholder resultado = ${child.textContent === placeholder}`);
+                    divInputRef.current.blur();
+                }
             });
             console.log('placeholder isEmpty = ', isEmpty);
             // if they are empty show the placeholder
@@ -3604,6 +3613,8 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
             }
         }
         else if (divInputRef.current.innerText === placeholder) {
+            console.log(`placeholder terceiro divInputRef.current.innerText === placeholder resultado = ${divInputRef.current.innerText === placeholder}`);
+            debugger;
             // create a paragraph node
             divInputRef.current.innerHTML = '';
             // clear complete the div
@@ -3615,6 +3626,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
             divInputRef.current.appendChild(p);
             console.log(`placeholder divInputRef.current.innerHtml= ${divInputRef.current.innerHTML}`);
             setPlaceholder(false);
+            divInputRef.current.blur();
         }
     };
     React.useEffect(() => {
@@ -3624,7 +3636,7 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
         };
     }, []);
     React.useEffect(() => {
-        if (!replyMentionedUser)
+        if (!replyMentionedUser || !divInputRef?.current)
             return;
         divInputRef.current?.focus();
         const selection = window.getSelection();
@@ -3636,7 +3648,6 @@ const useInputHook = ({ limit, placeholder, onSendMentions, onContentFormat, onC
             const spaceNode = document.createTextNode('\u00A0'); // Unicode for non-breaking space
             addMentionToRangeAndSpaceNode(range, spaceNode, mentionedUser);
             createNewRangeAndMoveCursorToTheEnd(selection, spaceNode);
-            divInputRef.current?.focus();
         }
     }, [replyMentionedUser]);
     React.useEffect(() => {
@@ -3885,7 +3896,7 @@ const Mentions = (mention) => {
 
 function InputComment$1({ placeholder, onChange, limit, users, showCharacterCounter, styles, onSendMentions, onContentFormat, onContentUnformat, disabled, className, value, replyMentionedUser, group_uuid, limitMessageExceeded }) {
     const { handleInput, isPlaceholder, focus, divInputRef, handleMentionUser, mentionTopPosition, setShowMention, showMention, textLength, styleLimitExceeded } = useInputHook({ limit, placeholder, onContentFormat, onContentUnformat, onSendMentions, onChange, value, replyMentionedUser });
-    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, children: [jsxRuntime.jsxs(InputWrapper$2, { focus: focus, tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, children: [jsxRuntime.jsx(InputText$4, { tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
+    return (jsxRuntime.jsx(styled.ThemeProvider, { theme: FRSTTheme, children: jsxRuntime.jsxs("div", { style: { minHeight: '48px', ...styles }, tabIndex: 0, contentEditable: false, children: [jsxRuntime.jsxs(InputWrapper$2, { focus: focus, tabIndex: 1, isPlaceholder: isPlaceholder, isInputLimit: styleLimitExceeded, contentEditable: false, children: [jsxRuntime.jsx(InputText$4, { tabIndex: 2, contentEditable: true, ref: divInputRef, onKeyUpCapture: (event) => {
                                 handleInput(event);
                             }, "data-text": "enter", isPlaceholder: isPlaceholder, suppressContentEditableWarning: true, children: jsxRuntime.jsx("p", { children: jsxRuntime.jsx("br", {}) }) }), showMention && users && users.length > 0 && jsxRuntime.jsx(Mentions, { users: users, top: mentionTopPosition, onSelect: (user) => {
                                 setShowMention(false);

package/dist/src/components/input-comment/useInputHook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useInputHook.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/useInputHook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,UAAU,UAAU;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC5C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,IAAI,CAAA;CAC5B;AAED,eAAO,MAAM,YAAY,oHAAqH,UAAU;yBA2HxH,mBAAmB;;;;;;;;;8BA/Ed,IAAI;;;;CAkTxC,CAAA"}
+{"version":3,"file":"useInputHook.d.ts","sourceRoot":"","sources":["../../../../src/components/input-comment/useInputHook.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,UAAU,UAAU;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC5C,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,iBAAiB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kBAAkB,CAAC,EAAE,IAAI,CAAA;CAC5B;AAED,eAAO,MAAM,YAAY,oHAAqH,UAAU;yBA2HxH,mBAAmB;;;;;;;;;8BA/Ed,IAAI;;;;CA4TxC,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "frst-components",
   "homepage": "http://FRST-Falconi.github.io/storybook.frstfalconi.com",
-  "version": "0.22.16",
+  "version": "0.22.18",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",