I dont know

composer.json

@@ -12,11 +12,11 @@
     }
   ],
   "require": {
-    "scrivo/highlight.php": "v9.18.1.7",
     "ext-pdo": "*",
     "ext-openssl": "*",
-    "erusev/parsedown": "^1.7",
     "ext-gd": "*",
-    "ext-mbstring": "*"
+    "ext-mbstring": "*",
+    "scrivo/highlight.php": "v9.18.1.7",
+    "erusev/parsedown": "^1.7"
   }
 }

js/dom.js

@@ -0,0 +1,27 @@
+const $ = function(selector) {
+    return document.querySelector(selector);
+};
+
+const $$ = function(selector) {
+    return document.querySelectorAll(selector) || [];
+};
+
+const makeEl = function(html) {
+    const template = document.createElement('template');
+
+    template.innerHTML = html.trim();
+
+    return template.content.firstChild;
+};
+
+const escape = function(unsafe) {
+    return unsafe
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+
+export { $, $$, makeEl, escape };

js/main.js

@@ -1,17 +1,14 @@
-import  { TagsInput } from './tag_input';
+import { $$ } from './dom';
+import { TagsInput } from "./tag_input";
 
-class Meme {
-    constructor() {
-        alert('xss');
-    }
+const setupSite = function() {
+    Array.prototype.forEach.call($$('.js-tag-input'), (el) => {
+        new TagsInput(el).attach();
+    });
+};
 
-    meme() {
-        console.log('meme');
-    }
+if (document.readyState !== 'loading') {
+    setupSite();
+} else {
+    document.addEventListener('DOMContentLoaded', setupSite);
 }
-
-const meme = new Meme();
-
-meme.meme();
-
-new TagsInput(null);

js/tag_input.js

@@ -1,19 +1,4 @@
-function htmlToElement(html) {
-    const template = document.createElement('template');
-
-    template.innerHTML = html.trim();
-
-    return template.content.firstChild;
-}
-
-function escapeHtml(unsafe) {
-    return unsafe
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#039;");
-}
+import { makeEl, escape } from "./dom";
 
 class TagsInput {
     constructor(element, options = {}) {
@@ -29,12 +14,19 @@ class TagsInput {
     attach() {
         this.element.style.display = 'none';
 
-        this.containerNode = htmlToElement('<div class="tags-input"></div>');
-        this.inputNode = htmlToElement('<input class="input" type="text" placeholder="10 tags maximum" value="" />');
+        this.containerNode = makeEl('<div class="tags-input"></div>');
+        this.inputNode = makeEl('<input class="input" type="text" placeholder="10 tags maximum" value="" />');
         this.containerNode.appendChild(this.inputNode);
 
         this.element.parentNode.insertBefore(this.containerNode, this.element.nextSibling);
 
+        /* Load existing tags from input */
+        if (this.element.value) {
+            for (const tag of this.element.value.split(',')) {
+                this.addTag(tag);
+            }
+        }
+
         /* Handle addition and removal of tags via key-presses */
         this.containerNode.addEventListener('keydown', this._handleInputKeyUp.bind(this));
 
@@ -70,7 +62,7 @@ class TagsInput {
             this.tags.push(tagValue.toLowerCase());
 
             this.inputNode.parentNode.insertBefore(
-                htmlToElement('<span class="tag is-info" data-value="' + escapeHtml(tagValue) + '">' + escapeHtml(tagValue) + '<span class="delete is-small" /></span>'),
+                makeEl('<span class="tag is-info" data-value="' + escape(tagValue) + '">' + escape(tagValue) + '<span class="delete is-small" /></span>'),
                 this.inputNode
             );
 
@@ -109,4 +101,4 @@ class TagsInput {
     }
 }
 
-export { TagsInput };
+export { TagsInput };

theme/bulma/main.php

@@ -1,16 +1,4 @@
 <link rel="stylesheet" href="theme/bulma/css/bulma-tagsinput.min.css"/>
-<script src="/js/tag_input.js"></script>
-<script>
-    function setupTagsInput() {
-        new TagsInput(document.getElementById('tags-with-source')).attach();
-    }
-
-    if (document.readyState !== 'loading') {
-        setupTagsInput();
-    } else {
-        document.addEventListener('DOMContentLoaded', setupTagsInput);
-    }
-</script>
 <main class="bd-main">
     <div class="bd-side-background"></div>
     <div class="bd-main-container container">
@@ -202,7 +190,7 @@
                                     <div class="field">
                                         <label class="label">Tags</label>
                                         <div class="control">
-                                            <input id="tags-with-source" name="tag_input" class="input"
+                                            <input name="tag_input" class="input js-tag-input"
                                                    value="<?php echo (isset($_POST['tag_input'])) ? pp_html_escape($_POST['tag_input']) : ''; // Pre-populate if we come here on an error" ?>">
                                         </div>
                                     </div>
@@ -213,7 +201,6 @@
 
 
                     <div class='row is-full'>
-
                         <div class="columns">
                             <div class="column is-5">
                                 <nav class="level">