Auto resize text areas

tginfo · Jan 8, 2025 · d48aa75 · d48aa75
1 parent b0bfe12
commit d48aa75
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/editor.html b/editor.html
@@ -1597,6 +1597,11 @@ <h1>Telegram Limits Editor</h1>
                         this.markDirty();
                     });
 
+                    setTimeout(() => {
+                        itemName.style.height = "5px";
+                        itemName.style.height = (itemName.scrollHeight) + "px";
+                    }, 0);
+
                     const itemHint = document.createElement('textarea');
                     itemHint.value = sectionLocale.items[item.id].hint || '';
                     itemHint.placeholder = 'Hint';
@@ -1612,6 +1617,11 @@ <h1>Telegram Limits Editor</h1>
                         this.markDirty();
                     });
 
+                    setTimeout(() => {
+                        itemHint.style.height = "5px";
+                        itemHint.style.height = (itemHint.scrollHeight) + "px";
+                    }, 0);
+
                     const itemContentContainer = document.createElement('div');
                     itemContentContainer.classList.add('item-content-container');
                     itemFields.appendChild(itemContentContainer);
@@ -1633,6 +1643,11 @@ <h1>Telegram Limits Editor</h1>
                         this.markDirty();
                     });
 
+                    setTimeout(() => {
+                        itemContent.style.height = "5px";
+                        itemContent.style.height = (itemContent.scrollHeight) + "px";
+                    }, 0);
+
                     const itemContentPremiumContainer = document.createElement('div');
                     itemContentPremiumContainer.classList.add('item-content-premium-container');
                     itemFields.appendChild(itemContentPremiumContainer);
@@ -1658,6 +1673,11 @@ <h1>Telegram Limits Editor</h1>
                         this.markDirty();
                     });
 
+                    setTimeout(() => {
+                        itemContentPremium.style.height = "5px";
+                        itemContentPremium.style.height = (itemContentPremium.scrollHeight) + "px";
+                    }, 0);
+
                     const idContainer = document.createElement('div');
                     idContainer.classList.add('id-container');
                     idContainer.textContent = item.id;
@@ -1760,18 +1780,43 @@ <h1>Telegram Limits Editor</h1>
                     idContainer.textContent = itemId;
                 });
 
+                setTimeout(() => {
+                    newItemName.style.height = "5px";
+                    newItemName.style.height = (newItemName.scrollHeight) + "px";
+                }, 0);
+
                 const newItemHint = document.createElement('textarea');
                 newItemHint.placeholder = 'Hint';
                 newItemHint.title = 'Enter a hint for the limit';
                 newItemHint.rows = 1;
                 newItemTitleContainer.appendChild(newItemHint);
 
+                newItemHint.addEventListener('input', () => {
+                    newItemHint.style.height = "5px";
+                    newItemHint.style.height = (newItemHint.scrollHeight) + "px";
+                });
+
+                setTimeout(() => {
+                    newItemHint.style.height = "5px";
+                    newItemHint.style.height = (newItemHint.scrollHeight) + "px";
+                }, 0);
+
                 const newItemContent = document.createElement('textarea');
                 newItemContent.placeholder = 'Limit Description';
                 newItemContent.title = 'Describe the limit';
                 newItemContent.rows = 1;
                 addItemPanelRow.appendChild(newItemContent);
 
+                newItemContent.addEventListener('input', () => {
+                    newItemContent.style.height = "5px";
+                    newItemContent.style.height = (newItemContent.scrollHeight) + "px";
+                });
+
+                setTimeout(() => {
+                    newItemContent.style.height = "5px";
+                    newItemContent.style.height = (newItemContent.scrollHeight) + "px";
+                }, 0);
+
                 const newItemContentPremiumContainer = document.createElement('div');
                 newItemContentPremiumContainer.classList.add('item-content-premium-container');
                 addItemPanelRow.appendChild(newItemContentPremiumContainer);
@@ -1787,6 +1832,16 @@ <h1>Telegram Limits Editor</h1>
                 newItemContentPremium.rows = 1;
                 newItemContentPremiumContainer.appendChild(newItemContentPremium);
 
+                newItemContentPremium.addEventListener('input', () => {
+                    newItemContentPremium.style.height = "5px";
+                    newItemContentPremium.style.height = (newItemContentPremium.scrollHeight) + "px";
+                });
+
+                setTimeout(() => {
+                    newItemContentPremium.style.height = "5px";
+                    newItemContentPremium.style.height = (newItemContentPremium.scrollHeight) + "px";
+                }, 0);
+
                 addItemPanelRow.appendChild(idContainer);
 
                 const trailingContainer = document.createElement('span');