Upgrade iframe-resizer to its latest version.

The `iframe-resizer` has been replaced with the `@iframe-resizer/parent`
and `@iframe-resizer/child` packages. The latest version is 5.5.2 which
this upgrades to.

There are several changes needed for this. The `data-iframe-height` and
`data-iframe-width` options are deprecated and now there is only the
`data-iframe-size` option. This requires a small change to PG as well.
Also, the `iFrameResize` method is deprecated and replaced with the
`iframeResize` method (annoying change here). The `iFrameResizer`
property set on the iframe still exists but is not documented. The
`iframeResizer` property replaces it. I assume the `iFrameResizer` is
also deprecated, so that switch was made.

Author: drgrice1

htdocs/js/ProblemSetDetail/problemsetdetail.js

@@ -250,7 +250,7 @@
 		() => {
 			document.querySelectorAll('.rpc_render_area').forEach((renderArea) => {
 				const iframe = renderArea.querySelector('[id^="psr_render_area_"][id$="_iframe"]');
-				if (iframe && iframe.iFrameResizer) iframe.iFrameResizer.close();
+				if (iframe && iframe.iframeResizer) iframe.iframeResizer.close();
 			});
 		},
 		{ passive: true }
@@ -379,8 +379,8 @@
 				const id = renderButton.id.match(/^pdr_render_(\d+)/)[1];
 				const renderArea = document.getElementById(`psr_render_area_${id}`);
 				const iframe = document.getElementById(`psr_render_area_${id}_iframe`);
-				if (iframe && iframe.iFrameResizer) {
-					iframe.iFrameResizer.close();
+				if (iframe && iframe.iframeResizer) {
+					iframe.iframeResizer.close();
 					renderArea.innerHTML = '';
 				} else if (/\S/.test(renderArea.innerHTML)) {
 					renderArea.innerHTML = '';

htdocs/js/RenderProblem/renderproblem.js

@@ -8,7 +8,7 @@
 			if (!renderArea || !renderArea.id) return resolve();
 
 			let iframe = renderArea.querySelector(`#${renderArea.id}_iframe`);
-			if (iframe && iframe.iFrameResizer) iframe.contentDocument.location.replace('about:blank');
+			if (iframe && iframe.iframeResizer) iframe.contentDocument.location.replace('about:blank');
 
 			const ro = {
 				courseID: document.getElementsByName('hidden_course_id')[0]?.value,
@@ -65,7 +65,7 @@
 					)
 						throw 'There was an error rendering this problem!';
 
-					if (!(iframe && iframe.iFrameResizer)) {
+					if (!(iframe && iframe.iframeResizer)) {
 						iframe = document.createElement('iframe');
 						iframe.id = `${renderArea.id}_iframe`;
 						iframe.style.border = 'none';
@@ -77,12 +77,13 @@
 							container.innerHTML = data.pg_flags.comment;
 							iframe.after(container);
 						}
-						iFrameResize(
+						iframeResize(
 							{
 								checkOrigin: false,
 								warningTimeout: 20000,
 								scrolling: 'omit',
-								heightCalculationMethod: 'taggedElement'
+								heightCalculationMethod: 'taggedElement',
+								license: 'GPLv3'
 							},
 							iframe
 						);

htdocs/js/SetMaker/setmaker.js

@@ -428,7 +428,7 @@
 			// Render any problems that were hidden that have not yet been rendered.
 			for (const area of unshownAreas) {
 				const iframe = area.querySelector('iframe[id^="problem_render_area_"][id$="_iframe"]');
-				if (iframe && iframe.iFrameResizer) iframe.iFrameResizer.resize();
+				if (iframe && iframe.iframeResizer) iframe.iframeResizer.resize();
 				else await render(area.id.match(/^pgrow(\d+)/)[1]);
 			}
 			mltIcon.textContent = 'L';

htdocs/package-lock.json

@@ -14,10 +14,11 @@
 	},
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^7.0.0",
+		"@iframe-resizer/child": "^5.5.2",
+		"@iframe-resizer/parent": "^5.5.2",
 		"@openwebwork/pg-codemirror-editor": "^0.0.5",
 		"bootstrap": "~5.3.7",
 		"flatpickr": "^4.6.13",
-		"iframe-resizer": "^4.4.2",
 		"jquery": "^3.7.1",
 		"jquery-ui-dist": "^1.13.3",
 		"luxon": "^3.7.1",

htdocs/package.json

@@ -87,9 +87,9 @@ sub formatRenderedProblem {
 	# The second element of each array in the following is whether or not the file is a theme file.
 	# The third element is a hash containing the necessary attributes for the script tag.
 	my @third_party_js = map { [ getAssetURL($ce, $_->[0], $_->[1]), $_->[2] ] } (
-		[ 'node_modules/jquery/dist/jquery.min.js',                            0, {} ],
-		[ 'node_modules/jquery-ui-dist/jquery-ui.min.js',                      0, {} ],
-		[ 'node_modules/iframe-resizer/js/iframeResizer.contentWindow.min.js', 0, {} ],
+		[ 'node_modules/jquery/dist/jquery.min.js',                 0, {} ],
+		[ 'node_modules/jquery-ui-dist/jquery-ui.min.js',           0, {} ],
+		[ 'node_modules/@iframe-resizer/child/index.umd.js',        0, {} ],
 		[ 'js/MathJaxConfig/mathjax-config.js',                     0, { defer => undef } ],
 		[ 'node_modules/mathjax/es5/tex-svg.js',                    0, { defer => undef, id => 'MathJax-script' } ],
 		[ 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', 0, { defer => undef } ],

lib/FormatRenderedProblem.pm

@@ -25,7 +25,7 @@
 		defer => undef =%>
 	<%= javascript getAssetURL($ce, 'js/DatePicker/datepicker.js'), defer => undef =%>
 	<%= javascript getAssetURL($ce, 'node_modules/sortablejs/Sortable.min.js'), defer => undef =%>
-	<%= javascript getAssetURL($ce, 'node_modules/iframe-resizer/js/iframeResizer.min.js') =%>
+	<%= javascript getAssetURL($ce, 'node_modules/@iframe-resizer/parent/index.umd.js') =%>
 	<%= javascript getAssetURL($ce, 'js/RenderProblem/renderproblem.js'), defer => undef =%>
 	<%= javascript getAssetURL($ce, 'js/ProblemSetDetail/problemsetdetail.js'), defer => undef =%>
 % end

templates/ContentGenerator/Instructor/ProblemSetDetail.html.ep

@@ -34,7 +34,7 @@
 	%== $extra_header_text
 </head>
 <body>
-	<div class="container-fluid" data-iframe-height="1">
+	<div class="container-fluid" data-iframe-size="1">
 		<div class="row g-0">
 			<div class="col-12 problem">
 				%== $resultSummary
@@ -193,7 +193,7 @@
 	</div>
 	% # Show the footer unless it is explicity disabled.
 	% if ($showFooter ne '0') {
-		<div id="footer" data-iframe-height="1">
+		<div id="footer" data-iframe-size="1">
 			WeBWorK &copy; <%= $ce->{WW_COPYRIGHT_YEARS} || 'unknown' %> |
 			host: <%= $SITE_URL %> |
 			course: <%= $courseID %> |