kompress_eshop/assets/static/js/rich-editor.js

// 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); });
})();