[SOLVED] Bookmarklet to increase text area

Bookmarklet to increase text area

Question is very similar to (my own) question posted here...

Increase the text area to view more lines of text

But I am looking for a way to get more space to write on this site:

paraphrasetool.com

I tried to modify the bookmarklet as mentioned below but it did not work.

// Find the text area.
element = document.getElementById('text_entry_entry_text_input')

// Calculate new height.
newHeight = Math.max(500, element.scrollHeight)

// Set height of element.
element.style.height = newHeight + 'px'

I am not sure if the textarea ID is correct.

Update:

There are 2 text boxes on the site and both should be enlarged so that the text can be compared side-by-side.

Solution

Your code is working, you just need to add additional js to remove its parent's max-height and height property:

javascript: (() => {
    // Find the textareas.
    const element = document.getElementById('text_entry_entry_text_input')
    const element2 = document.getElementById('text_entry_text_area')

    // Calculate new height.
    const newHeight = Math.max(500, element.scrollHeight, element2.scrollHeight)

    // Set height of element.
    element.style.height = newHeight + 'px'
    element2.style.height = newHeight + 'px'

    const parentElm = document.querySelector('[data-testid="text_entry_paraphrase_text_entry"]')
    parentElm.style.maxHeight = "none"
    parentElm.style.height = "auto"
    element2.parentElement.style.maxHeight = "none"
    element2.parentElement.style.height = "auto"

    const parentChildren = document.querySelectorAll('.h-full')
    parentChildren.forEach(child => child.classList.remove('h-full'))
})();