Blanks with restored contents are cut off

[SybelBlue]

Issue

When the page is reloaded and the blank contents are restored from a previous attempt (eg after a grading request), the blank is not sized properly to fit the contents of the blank.

Proposed Solution

Find a hook that fires when contents are restored by prarielearn, and trigger a resize on that hook.

Example

For example, typing "expect" into this rspec blank properly resizes it:

But after grading, the text is cut off like this:

[timothyaveni]

ah I just wrote a fix for this -- though I'm just doing it in document.ready (seems to work after grading, anyway). I don't think I have write access to this repo so here's the patch (off 88cb25e):

diff --git a/pl-faded-parsons.js b/pl-faded-parsons.js
index a5f19f4..33ca858 100644
--- a/pl-faded-parsons.js
+++ b/pl-faded-parsons.js
@@ -143,8 +143,13 @@ class ParsonsWidget {

         // when blanks are filled, adjust their width
         $('input.text-box').on('input', function() {
-            $(this).width( this.value.length.toString() + 'ch');
+            that.autoSizeInput(this);
         });
+        // auto-size on load/ready
+        $('input.text-box').each(function () {
+            that.autoSizeInput(this);
+        });
+

         // Log the original codelines in the exercise in order to be able to
         // match the input/output hashes to the code later on. We need only a
@@ -173,6 +178,9 @@ class ParsonsWidget {
         // */

     }
+    autoSizeInput(el) {
+        $(el).width( el.value.length.toString() + 'ch');
+    }
     getSourceLines() {
         let source_tray = document.getElementById("ul-" + this.options.source_tray);
         if (source_tray === null) { return []; }