Rewrite JavaScript on news page without jQuery

As archweb gradually wants to remove jQuery, port this code to use the
fetch API and vanilla JavaScript.

Author: jelly

templates/news/add.html

@@ -43,22 +43,28 @@ <h2>News: Add Article</h2>
     <h2>News Preview: <span id="news-preview-title"></span></h2>
     <div id="news-preview-data" class="article-content"></div>
 </div>
-{% load cdn %}{% jquery %}
-<script type="text/javascript" nonce={{ CSP_NONCE }}>
-$(document).ready(function() {
-    $('#news-preview-button').click(function(event) {
-        event.preventDefault();
-        $.post('/news/preview/', {
-                data: $('#id_content').val(),
-                csrfmiddlewaretoken: $('#newsform input[name=csrfmiddlewaretoken]').val()
-            },
-            function(data) {
-                $('#news-preview-data').html(data);
-                $('#news-preview').show();
-            }
-        );
-        $('#news-preview-title').html($('#id_title').val());
-    });
-});
+<script type="text/javascript" nonce={{ CSP_NONCE }} defer>
+function onPreviewButtonClick(event) {
+	event.preventDefault();
+
+	const formData = new FormData();
+	formData.append('data', document.querySelector('#id_content').value);
+	formData.append('csrfmiddlewaretoken', document.querySelector('#newsform input[name=csrfmiddlewaretoken]').value);
+
+	fetch('/news/preview/', {
+		method: 'POST',
+		body: formData,
+	}).then(response => response.text())
+	.then(data => {
+		document.querySelector('#news-preview-data').innerHTML = data;
+		document.querySelector('#news-preview').style.display = 'block';
+		document.querySelector('#news-preview-title').innerHTML = document.querySelector('#id_title').value;
+	}).catch(error => {
+		console.error(error);
+	});
+}
+
+const previewButton = document.getElementById('news-preview-button');
+previewButton.addEventListener('click', onPreviewButtonClick);
 </script>
 {% endblock %}