f3-simple-blog/public/assets/app.js

(() => {
  const on = (selector, handler) => document.querySelectorAll(selector).forEach(handler);

  on('[data-copy-text]', (button) => {
    button.addEventListener('click', async () => {
      const text = button.getAttribute('data-copy-text') || '';
      if (!text) {
        return;
      }

      try {
        await navigator.clipboard.writeText(text);
        const previous = button.textContent;
        button.textContent = 'Copié';
        window.setTimeout(() => {
          button.textContent = previous;
        }, 1200);
      } catch {
        window.prompt('Copie ce texte :', text);
      }
    });
  });

  on('[data-confirm]', (form) => {
    form.addEventListener('submit', (event) => {
      const message = form.getAttribute('data-confirm') || 'Confirmer cette action ?';
      if (!window.confirm(message)) {
        event.preventDefault();
      }
    });
  });

  on('[data-char-count]', (field) => {
    const counter = field.parentElement?.querySelector('[data-char-count-value]');
    if (!counter) {
      return;
    }

    const update = () => {
      counter.textContent = String(field.value.length);
    };

    field.addEventListener('input', update);
    update();
  });

  const editor = document.querySelector('[data-markdown-editor]');
  const picker = document.querySelector('[data-media-picker]');
  const editorLayout = document.querySelector('[data-editor-layout]');
  const pickerClose = document.querySelector('[data-media-picker-close]');

  const focusEditor = () => editor?.focus();

  if (editor) {
    const replaceSelection = (before, after = '', placeholder = '') => {
      const start = editor.selectionStart;
      const end = editor.selectionEnd;
      const selected = editor.value.slice(start, end);
      const content = selected || placeholder;
      const insertion = before + content + after;

      editor.setRangeText(insertion, start, end, 'end');

      if (!selected && placeholder) {
        const cursorStart = start + before.length;
        editor.setSelectionRange(cursorStart, cursorStart + placeholder.length);
      }

      focusEditor();
    };

    const prefixLines = (prefix, placeholder) => {
      const start = editor.selectionStart;
      const end = editor.selectionEnd;
      const selected = editor.value.slice(start, end) || placeholder;
      const prefixed = selected
        .split('\n')
        .map((line) => (line ? prefix + line : prefix.trimEnd()))
        .join('\n');

      editor.setRangeText(prefixed, start, end, 'end');
      focusEditor();
    };

    on('[data-md-action]', (button) => {
      button.addEventListener('click', () => {
        switch (button.getAttribute('data-md-action')) {
          case 'bold':
            replaceSelection('**', '**', 'texte');
            break;
          case 'italic':
            replaceSelection('*', '*', 'texte');
            break;
          case 'heading':
            prefixLines('## ', 'Titre');
            break;
          case 'list':
            prefixLines('- ', 'Élément');
            break;
          case 'quote':
            prefixLines('> ', 'Citation');
            break;
          case 'link':
            replaceSelection('[', '](https://)', 'texte');
            break;
          case 'code': {
            const selected = editor.value.slice(editor.selectionStart, editor.selectionEnd);
            replaceSelection(
              selected.includes('\n') ? '```\n' : '`',
              selected.includes('\n') ? '\n```' : '`',
              'code'
            );
            break;
          }
        }
      });
    });
  }

  const togglePicker = (open) => {
    if (!picker) {
      return;
    }

    picker.classList.toggle('is-hidden', !open);
    editorLayout?.classList.toggle('is-picker-open', open);

    if (!open) {
      focusEditor();
      return;
    }

    picker.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  };

  on('[data-media-picker-open]', (button) => {
    button.addEventListener('click', () => togglePicker(true));
  });

  pickerClose?.addEventListener('click', () => togglePicker(false));

  on('[data-media-picker-select]', (button) => {
    button.addEventListener('click', () => {
      const markdown = button.getAttribute('data-media-markdown') || '';
      if (!editor || !markdown) {
        return;
      }

      const start = editor.selectionStart;
      const end = editor.selectionEnd;
      const prefix = start > 0 && !editor.value.slice(0, start).endsWith('\n\n') ? '\n\n' : '';
      const suffix = end < editor.value.length && !editor.value.slice(end).startsWith('\n\n') ? '\n\n' : '';
      editor.setRangeText(prefix + markdown + suffix, start, end, 'end');
      togglePicker(false);
    });
  });

  on('[data-alt-input]', (input) => {
    const card = input.closest('.card');
    const button = card?.querySelector('[data-markdown-template]');
    if (!button) {
      return;
    }

    const update = () => {
      const template = button.getAttribute('data-markdown-template') || '';
      const alt = input.value;
      button.setAttribute('data-copy-text', template.replace('![](', '![' + alt + ']('));
    };

    input.addEventListener('input', update);
    update();
  });
})();