Added ability to use templates

- Added replace, append and prepend actions for template content into
both the WYSIWYG editor and markdown editor.
- Added further testing to cover.

resources/assets/js/components/template-manager.js

@@ -0,0 +1,85 @@
+import * as DOM from "../services/dom";
+
+class TemplateManager {
+
+    constructor(elem) {
+        this.elem = elem;
+        this.list = elem.querySelector('[template-manager-list]');
+        this.searching = false;
+
+        // Template insert action buttons
+        DOM.onChildEvent(this.elem, '[template-action]', 'click', this.handleTemplateActionClick.bind(this));
+
+        // Template list pagination click
+        DOM.onChildEvent(this.elem, '.pagination a', 'click', this.handlePaginationClick.bind(this));
+
+        // Template list item content click
+        DOM.onChildEvent(this.elem, '.template-item-content', 'click', this.handleTemplateItemClick.bind(this));
+
+        this.setupSearchBox();
+    }
+
+    handleTemplateItemClick(event, templateItem) {
+        const templateId = templateItem.closest('[template-id]').getAttribute('template-id');
+        this.insertTemplate(templateId, 'replace');
+    }
+
+    handleTemplateActionClick(event, actionButton) {
+        event.stopPropagation();
+
+        const action = actionButton.getAttribute('template-action');
+        const templateId = actionButton.closest('[template-id]').getAttribute('template-id');
+        this.insertTemplate(templateId, action);
+    }
+
+    async insertTemplate(templateId, action = 'replace') {
+        const resp = await window.$http.get(`/templates/${templateId}`);
+        const eventName = 'editor::' + action;
+        window.$events.emit(eventName, resp.data);
+    }
+
+    async handlePaginationClick(event, paginationLink) {
+        event.preventDefault();
+        const paginationUrl = paginationLink.getAttribute('href');
+        const resp = await window.$http.get(paginationUrl);
+        this.list.innerHTML = resp.data;
+    }
+
+    setupSearchBox() {
+        const searchBox = this.elem.querySelector('.search-box');
+        const input = searchBox.querySelector('input');
+        const submitButton = searchBox.querySelector('button');
+        const cancelButton = searchBox.querySelector('button.search-box-cancel');
+
+        async function performSearch() {
+            const searchTerm = input.value;
+            const resp = await window.$http.get(`/templates`, {
+                search: searchTerm
+            });
+            cancelButton.style.display = searchTerm ? 'block' : 'none';
+            this.list.innerHTML = resp.data;
+        }
+        performSearch = performSearch.bind(this);
+
+        // Searchbox enter press
+        searchBox.addEventListener('keypress', event => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                performSearch();
+            }
+        });
+
+        // Submit button press
+        submitButton.addEventListener('click', event => {
+            performSearch();
+        });
+
+        // Cancel button press
+        cancelButton.addEventListener('click', event => {
+            input.value = '';
+            performSearch();
+        });
+    }
+}
+
+export default TemplateManager;