Problem: textareas don't adjust to text after user has resized them. example: user makes textarea twice as tall. now there is huge gap between text and bottom. user starts typing text but this gap doesnt dissappear.

<script src="jquery-3.6.0.js"></script>
<script src="jquery-ui.js"></script>
<script>
    $(function() {
        var isFullHandleMode = false; // Track whether full handle mode is active

        $(document).keydown(function(event) {
            // Check if Alt + L is pressed
            if (event.altKey && event.key === 'l') {
                toggleFullHandleMode();
            }
        });

        function toggleFullHandleMode() {
            isFullHandleMode = !isFullHandleMode;
            $('.draggable').toggleClass('full-handle', isFullHandleMode);
        }

        $(document).contextmenu(function(event) {
            event.preventDefault();
            var newTextBox = $('<div>').addClass('draggable ui-widget-content').css({
                position: 'absolute',
                top: event.clientY,
                left: event.clientX
            }).appendTo('body').draggable({
                snap: true,
                start: function(event, ui) {
                    $(this).css('cursor', 'grabbing'); // Change cursor shape on drag start
                },
                stop: function(event, ui) {
                    $(this).css('cursor', 'move'); // Reset cursor shape on drag stop
                }
            });

            // Add drag handle
            $('<div>').addClass('drag-handle').appendTo(newTextBox);
            // Add textarea
            newTextBox.append('<textarea>New Text Box</textarea>');

            // Apply resizable to the text box
            newTextBox.resizable();

            // Apply full handle mode if active
            if (isFullHandleMode) {
                newTextBox.addClass('full-handle');
            }

            // Automatically adjust textarea height based on content
            newTextBox.find('textarea').on('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
        });

        $(document).on('paste', function(event) {
            var items = (event.clipboardData || event.originalEvent.clipboardData).items;
            for (index in items) {
                var item = items[index];
                if (item.kind === 'file') {
                    var blob = item.getAsFile();
                    if (blob.type.indexOf('image') !== -1) {
                        var reader = new FileReader();
                        reader.onload = function(event) {
                            var $img = $('<div>').addClass('draggable').append('<img src="' + event.target.result + '">').css({
                                position: 'absolute',
                                top: event.clientY,
                                left: event.clientX
                            }).appendTo('body');

                            $img.find('img').resizable(); // Apply resizable to the image

                            $img.draggable({
                                snap: true,
                            });
                        };
                        reader.readAsDataURL(blob);
                    }
                }
            }
        });
    });
</script>