quill editor

assets/static/js/rich-editor.js

@@ -0,0 +1,174 @@
+// Quill-based rich text editor, ported from the universal_web blog editor and
+// adapted to this shop: each editor lives in a `[data-rich-field]` wrapper so a
+// single form can host several (e.g. short + long description); image uploads go
+// to this app's /images/upload and carry the CSRF token the middleware expects.
+(function () {
+  function setImageSize(image, size) {
+    image.classList.remove('rich-image-small', 'rich-image-medium', 'rich-image-full');
+    image.style.removeProperty('width');
+    image.style.removeProperty('height');
+    image.classList.add('rich-image-' + size);
+  }
+
+  function setImageWidth(image, width) {
+    var px = parseInt(width, 10);
+    if (!Number.isFinite(px) || px < 40) return;
+    image.classList.remove('rich-image-small', 'rich-image-medium', 'rich-image-full');
+    image.style.width = Math.min(px, 1200) + 'px';
+    image.style.height = 'auto';
+  }
+
+  function normalizeEditorImages(root) {
+    root.querySelectorAll('img').forEach(function (image) {
+      if (
+        !image.classList.contains('rich-image-small')
+        && !image.classList.contains('rich-image-medium')
+        && !image.classList.contains('rich-image-full')
+      ) {
+        image.classList.add('rich-image-full');
+      }
+    });
+  }
+
+  // The CSRF middleware accepts the token as an X-CSRF-Token header; read it from
+  // the form's hidden _csrf field (rendered by ui::csrf_field()).
+  function csrfToken(field) {
+    var form = field.closest('form');
+    var input = form && form.querySelector('input[name="_csrf"]');
+    return input ? input.value : '';
+  }
+
+  function initField(field) {
+    var editorEl = field.querySelector('[data-rich-editor]');
+    var contentInput = field.querySelector('[data-rich-content]');
+    var status = field.querySelector('[data-rich-status]');
+    var imageControls = field.querySelector('[data-image-size-controls]');
+    var imageWidthInput = field.querySelector('[data-image-width]');
+    if (!editorEl || !contentInput || !window.Quill) return;
+
+    var selectedImage = null;
+    var toolbar = [
+      [{ header: [2, 3, false] }],
+      ['bold', 'italic'],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      ['link', 'image'],
+      ['clean']
+    ];
+    var editor = new Quill(editorEl, {
+      modules: { toolbar: toolbar },
+      placeholder: editorEl.dataset.placeholder || '',
+      theme: 'snow'
+    });
+
+    var initialContent = contentInput.value.trim();
+    if (initialContent) {
+      if (initialContent.indexOf('<') >= 0) editor.clipboard.dangerouslyPasteHTML(initialContent);
+      else editor.setText(initialContent);
+      normalizeEditorImages(editor.root);
+    }
+
+    function syncContent() {
+      normalizeEditorImages(editor.root);
+      // Quill leaves an empty editor as "<p><br></p>"; store empty instead so the
+      // server sees a blank (nullable) value rather than stray markup.
+      var html = editor.root.innerHTML;
+      contentInput.value = editor.getText().trim() === '' && !editor.root.querySelector('img')
+        ? ''
+        : html;
+    }
+
+    function setStatus(message) {
+      if (status) status.textContent = message || '';
+    }
+
+    function chooseImageFile() {
+      var input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/jpeg,image/png,image/webp,image/gif';
+      input.addEventListener('change', function () {
+        var file = input.files && input.files[0];
+        if (!file) return;
+        uploadImage(file);
+      });
+      input.click();
+    }
+
+    async function uploadImage(file) {
+      var formData = new FormData();
+      formData.append('file', file);
+      setStatus(status ? status.dataset.uploading : '');
+      try {
+        var response = await fetch('/images/upload', {
+          method: 'POST',
+          body: formData,
+          credentials: 'same-origin',
+          headers: { 'X-CSRF-Token': csrfToken(field) }
+        });
+        if (!response.ok) throw new Error('upload failed');
+        var result = await response.json();
+        var range = editor.getSelection(true);
+        editor.insertEmbed(range.index, 'image', result.url, 'user');
+        editor.setSelection(range.index + 1, 0, 'silent');
+        window.setTimeout(function () {
+          var images = editor.root.querySelectorAll('img');
+          var image = images[images.length - 1];
+          if (image) {
+            setImageSize(image, 'full');
+            selectedImage = image;
+            if (imageControls) imageControls.classList.remove('hidden');
+          }
+          syncContent();
+        }, 0);
+        setStatus(status ? status.dataset.uploaded : '');
+      } catch (_error) {
+        setStatus(status ? status.dataset.error : '');
+      }
+    }
+
+    editor.getModule('toolbar').addHandler('image', chooseImageFile);
+
+    editor.root.addEventListener('click', function (event) {
+      if (event.target && event.target.tagName === 'IMG') {
+        selectedImage = event.target;
+        if (imageWidthInput) imageWidthInput.value = parseInt(selectedImage.style.width, 10) || '';
+        if (imageControls) imageControls.classList.remove('hidden');
+      }
+    });
+
+    if (imageControls) {
+      imageControls.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-image-size]');
+        if (button && selectedImage) {
+          setImageSize(selectedImage, button.dataset.imageSize);
+          if (imageWidthInput) imageWidthInput.value = '';
+          syncContent();
+        }
+      });
+    }
+
+    if (imageWidthInput) {
+      imageWidthInput.addEventListener('change', function () {
+        if (!selectedImage) return;
+        setImageWidth(selectedImage, imageWidthInput.value);
+        syncContent();
+      });
+    }
+
+    editor.on('text-change', syncContent);
+    var form = field.closest('form');
+    if (form) form.addEventListener('submit', syncContent);
+    syncContent();
+  }
+
+  function initAll(root) {
+    (root || document).querySelectorAll('[data-rich-field]').forEach(function (field) {
+      if (field.dataset.richReady) return;
+      field.dataset.richReady = '1';
+      initField(field);
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', function () { initAll(document); });
+  // Re-init after htmx swaps a fragment containing an editor into the page.
+  document.addEventListener('htmx:afterSwap', function (event) { initAll(event.target); });
+})();

assets/static/vendor/quill/LICENSE

@@ -0,0 +1,31 @@
+Copyright (c) 2017-2024, Slab
+Copyright (c) 2014, Jason Chen
+Copyright (c) 2013, salesforce.com
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1. Redistributions of source code must retain the above copyright
+   notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS
+IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED
+TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
+PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

assets/static/vendor/quill/quill.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!
+ * Quill Editor v2.0.3
+ * https://quilljs.com
+ * Copyright (c) 2017-2024, Slab
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */