JSFiddle - React, Tailwind, and code Playground

HTML

Input:<br><textarea id="input"></textarea>
<br><button onclick="document.getElementById('result').innerText = solvePuzzle(document.getElementById('input').value)">
Run
</button>
<br>Result:<br>
<code id="result">

</code>
<script>
function solvePuzzle(p)
{
	p = p.trim();
	var lines = p.split('\n'), line, data = [];
	var N = lines.length, val;
	var highest = 0, rb = {row: 0, col: 0};
	for (var i = 0; i < N; i++)
	{
		if ((line = lines[i]).length != N) { return 'Bad puzzle.'; }
		var tmp = [];
		for (var j = 0; j < N; j++)
		{
			val = line.charAt(j) == 'X' ? 0 : 1;
			if (val && i > 0 && j > 0)
			{
				val += Math.min(tmp[j-1], data[i-1][j], data[i-1][j-1]);
			}
			if (val > highest)
			{
				highest = val;
				rb.row = i; rb.col = j;
			}
			tmp.push(val);
		}
		data.push(tmp);
	}
	
	var ret = highest * highest + ' dropships!\n';
	var lt = {row:rb.row - highest, col:rb.col - highest};
	for (var i = 0; i < N; i++)
	{
		for (var j = 0; j < N; j++)
		{
			if (i > lt.row && i <= rb.row && j > lt.col && j <= rb.col) { ret += 'O'; }
			else { ret += lines[i].charAt(j); }
		}
		ret += '\n';
	}
	return ret;
}
</script>