First commit

public/assets/app.js

@@ -0,0 +1,234 @@
+(() => {
+  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 pickerTitle = document.querySelector('[data-media-picker-title]');
+  const pickerHelp = document.querySelector('[data-media-picker-help]');
+  const pickerClose = document.querySelector('[data-media-picker-close]');
+  const coverInput = document.querySelector('[data-cover-input]');
+  const coverPreview = document.querySelector('[data-cover-preview]');
+  const coverPlaceholder = document.querySelector('[data-cover-placeholder]');
+  const coverClear = document.querySelector('[data-cover-clear]');
+  let pickerMode = 'markdown';
+
+  const focusEditor = () => editor?.focus();
+
+  const updateCoverPreview = (item = null) => {
+    if (!coverInput || !coverPreview || !coverPlaceholder) {
+      return;
+    }
+
+    if (item && item.id && item.url) {
+      coverInput.value = item.id;
+      coverPreview.src = item.url;
+      coverPreview.alt = 'Image de couverture';
+      coverPreview.classList.remove('is-hidden');
+      coverPlaceholder.classList.add('is-hidden');
+      if (coverClear) {
+        coverClear.disabled = false;
+      }
+      return;
+    }
+
+    coverInput.value = '';
+    coverPreview.removeAttribute('src');
+    coverPreview.classList.add('is-hidden');
+    coverPlaceholder.classList.remove('is-hidden');
+    if (coverClear) {
+      coverClear.disabled = true;
+    }
+  };
+
+  coverClear?.addEventListener('click', () => updateCoverPreview());
+
+  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, mode = pickerMode) => {
+    if (!picker) {
+      return;
+    }
+
+    pickerMode = mode;
+    picker.classList.toggle('is-hidden', !open);
+    editorLayout?.classList.toggle('is-picker-open', open);
+
+    if (!open) {
+      focusEditor();
+      return;
+    }
+
+    const isCover = pickerMode === 'cover';
+    if (pickerTitle) {
+      pickerTitle.textContent = isCover ? 'Choisir une couverture' : 'Insérer une image';
+    }
+    if (pickerHelp) {
+      pickerHelp.textContent = isCover
+        ? 'Clique sur une image pour l’utiliser comme couverture.'
+        : 'Clique sur une image pour l’insérer dans l’article.';
+    }
+
+    picker.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  };
+
+  on('[data-media-picker-open]', (button) => {
+    button.addEventListener('click', () => {
+      togglePicker(true, button.getAttribute('data-media-picker-open') || 'markdown');
+    });
+  });
+
+  pickerClose?.addEventListener('click', () => togglePicker(false));
+
+  on('[data-media-picker-select]', (button) => {
+    button.addEventListener('click', () => {
+      const item = {
+        id: button.getAttribute('data-media-id') || '',
+        url: button.getAttribute('data-media-url') || '',
+        markdown: button.getAttribute('data-media-markdown') || '',
+      };
+
+      if (pickerMode === 'cover') {
+        updateCoverPreview(item);
+        togglePicker(false);
+        return;
+      }
+
+      if (!editor || !item.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 + item.markdown + suffix, start, end, 'end');
+      togglePicker(false);
+    });
+  });
+
+  // Synchronise data-copy-text du bouton Markdown quand l'alt est modifié.
+  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();
+  });
+})();

public/assets/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#111827"/>
+  <path d="M18 18h28v8H26v10h18v8H26v12h-8z" fill="#f8fafc"/>
+</svg>