hot-fix: NodeList conversion on MessageInput.Paste (#536)

NodeList cannot use Array methods, but our conversion was not really explicit.
So, during the ESLint upgrade, NodeList -> Array(Nodes) conversion was deleted

As a fix, we make explicit function to convert NodeList to Array(Nodes)

Author: Sravan S

src/ui/MessageInput/__tests__/utils.spec.ts

@@ -0,0 +1,25 @@
+import jsdom from 'jsdom';
+
+import { nodeListToArray } from '../utils';
+
+describe('MessageInputUtils/nodeListToArray', () => {
+  it('should convert node list to array', () => {
+    const P_COUNT = 4;
+    const dom = new jsdom.JSDOM(`
+      <div>${Array(P_COUNT).fill(0).map(() => '<p></p>').join('')}
+      </div>
+    `);
+    const nodes = nodeListToArray(dom.window.document.querySelectorAll('p'));
+    expect(nodes.length).toEqual(4);
+  });
+
+  it('should return empty array if nodelist is null', () => {
+    const nodes = nodeListToArray(null);
+    expect(nodes.length).toBe(0);
+  });
+
+  it('should return empty array if nodelist is undefined', () => {
+    const nodes = nodeListToArray(null);
+    expect(nodes.length).toBe(0);
+  });
+});

src/ui/MessageInput/hooks/usePaste/utils.ts

@@ -11,6 +11,7 @@ import {
 import { Word } from './types';
 import { TEXT_MESSAGE_BODY_CLASSNAME } from '../../../TextMessageItemBody/consts';
 import { OG_MESSAGE_BODY_CLASSNAME } from '../../../OGMessageItemBody/consts';
+import { nodeListToArray } from '../../utils';
 
 export function querySelectorIncludingSelf(
   master: HTMLElement,
@@ -30,15 +31,15 @@ export function getLeafNodes(master: HTMLElement): ChildNode[] {
   // og message
   const ogMessage = querySelectorIncludingSelf(master, `.${OG_MESSAGE_BODY_CLASSNAME}`);
   if (ogMessage) {
-    return Array.from(ogMessage.childNodes);
+    return nodeListToArray(ogMessage.childNodes);
   }
 
   const textMessageBody = querySelectorIncludingSelf(master, `.${TEXT_MESSAGE_BODY_CLASSNAME}`);
   if (textMessageBody) {
-    return Array.from(textMessageBody.childNodes);
+    return nodeListToArray(textMessageBody.childNodes);
   }
 
-  return Array.from(master.childNodes);
+  return nodeListToArray(master.childNodes);
 }
 
 export function createPasteNode(): HTMLDivElement | null {

src/ui/MessageInput/index.jsx

@@ -18,7 +18,7 @@ import renderMentionLabelToString from '../MentionUserLabel/renderToString';
 import Icon, { IconTypes, IconColors } from '../Icon';
 import Label, { LabelTypography, LabelColors } from '../Label';
 import { LocalizationContext } from '../../lib/LocalizationContext';
-import { sanitizeString } from './utils';
+import { nodeListToArray, sanitizeString } from './utils';
 import {
   arrayEqual,
   getClassName,
@@ -215,7 +215,7 @@ const MessageInput = React.forwardRef((props, ref) => {
       if (targetString && startNodeIndex !== null && startOffsetIndex !== null) {
         // const textField = document.getElementById(textFieldId);
         const textField = ref?.current;
-        const childNodes = textField?.childNodes;
+        const childNodes = nodeListToArray(textField?.childNodes);
         const frontTextNode = document?.createTextNode(
           childNodes[startNodeIndex]?.textContent.slice(0, startOffsetIndex),
         );

src/ui/MessageInput/utils.js

@@ -25,4 +25,17 @@ export const sanitizeString = (str) => (
   str?.replace(/[\u00A0-\u9999<>]/gim, (i) => ''.concat('&#', i.charCodeAt(0), ';'))
 );
 
+/**
+ * NodeList cannot be used with Array methods
+ * @param {childNodes} NodeList
+ * @returns Array of child nodes
+ */
+export const nodeListToArray = (childNodes) => {
+  try {
+    return Array.from(childNodes);
+  } catch (error) {
+    return [];
+  }
+};
+
 export default debounce;