@capillarytech/creatives-library 9.0.5 → 9.0.6-beta.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.5",
+  "version": "9.0.6-beta.0.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/NewCallTask/index.js

@@ -40,15 +40,18 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
     this.insertAtCursor(`{{${data}}}`);
   }
 
+  setInputRef = (textarea) => {
+    this.textArea = textarea;
+  }
+
   insertAtCursor = (myValue) => {
-    const textAreaRef = document.getElementById('new-call-task-message-body');
-    if (!textAreaRef) return;
-    textAreaRef.focus();
+    this.textArea.focus();
+    const textAreaRef = this.textArea.textAreaRef;
     let pos = textAreaRef.selectionEnd + myValue.length;
     //IE support
     let newMessage = textAreaRef.value + myValue;
     if (document.selection) {
-      textAreaRef.focus();
+      this.textArea.focus();
       const sel = document.selection.createRange();
       sel.text = myValue;
     } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others
@@ -125,7 +128,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
                   injectedTags={injectedTags}
                 />
                 <CapInput.TextArea
-                  id="new-call-task-message-body"
+                  setInputRef={this.setInputRef}
                   label={formatMessage(messages.messageHeader)}
                   onChange={this.updateMessageBody}
                   value={messageBody}

package/v2Containers/FTP/index.js

@@ -166,6 +166,10 @@ export class FTP extends React.Component {
     this.insertAtCursor(`{{${data}}}`);
   };
 
+  setInputRef = (textarea) => {
+    this.textArea = textarea;
+  };
+
   getServerSelectionContent = () => {
     const { getFTPServersInProgress } = this.props.FTP || {};
     const { formatMessage } = this.props.intl;
@@ -253,7 +257,7 @@ export class FTP extends React.Component {
               injectedTags={injectedTags || {}}
             />
             <CapInput.TextArea
-              id="ftp-message-content"
+              setInputRef={this.setInputRef}
               label={formatMessage(messages.messageHeader)}
               onChange={this.updateMessageBody}
               value={messageContent}
@@ -525,14 +529,13 @@ export class FTP extends React.Component {
   };
 
   insertAtCursor = (myValue) => {
-    const textAreaRef = document.getElementById('ftp-message-content');
-    if (!textAreaRef) return;
-    textAreaRef.focus();
+    this.textArea.focus();
+    const textAreaRef = this.textArea.textAreaRef;
     let pos = textAreaRef.selectionEnd + myValue.length;
     //IE support
     let newMessage = textAreaRef.value + myValue;
     if (document.selection) {
-      textAreaRef.focus();
+      this.textArea.focus();
       const sel = document.selection.createRange();
       sel.text = myValue;
     } else if (textAreaRef.selectionStart || textAreaRef.selectionStart === '0') { //MOZILLA and others

package/v2Containers/WebPush/Create/components/MessageSection.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import CapInput from '@capillarytech/cap-ui-library/CapInput';
@@ -73,13 +73,6 @@ export const MessageSection = ({
   handleMessageTextAreaRef,
   isAiContentBotDisabled,
 }) => {
-  // resolve the underlying DOM
-  // <textarea> by id and feed it to the existing ref handler. CapEmojiPicker and
-  // the Aira trigger both read `messageTextAreaRef.current` as that DOM node.
-  useEffect(() => {
-    handleMessageTextAreaRef(document?.getElementById('webpush-message-input'));
-  }, [handleMessageTextAreaRef]);
-
   const renderCharacterCount = () => {
     if (!SHOW_CHARACTER_COUNT) return null;
 
@@ -126,6 +119,7 @@ export const MessageSection = ({
               size="default"
               isRequired
               autosize={{ minRows: 3, maxRows: 5 }}
+              setInputRef={handleMessageTextAreaRef}
               errorMessage={
                 error && (
                   <CapError className="webpush-template-message-error">
@@ -152,7 +146,7 @@ MessageSection.propTypes = {
   tagList: PropTypes.node,
   messageCountRef: PropTypes.object,
   messageTextAreaRef: PropTypes.object,
-  handleMessageTextAreaRef: PropTypes.func,
+  handleMessageTextAreaRef: PropTypes.func.isRequired,
   isAiContentBotDisabled: PropTypes.bool,
 };
 
@@ -161,7 +155,6 @@ MessageSection.defaultProps = {
   tagList: null,
   messageCountRef: null,
   messageTextAreaRef: null,
-  handleMessageTextAreaRef: () => {},
   isAiContentBotDisabled: false,
 };