<div class="md-toolbar" data-md-toolbar>
  <button type="button" data-md="bold" title="Жирный (Ctrl+B)"><b>B</b></button>
  <button type="button" data-md="italic" title="Курсив (Ctrl+I)"><i>I</i></button>
  <button type="button" data-md="heading" title="Заголовок">H1</button>
  <button type="button" data-md="link" title="Ссылка (Ctrl+K)">🔗</button>
  <button type="button" data-md="image" title="Картинка">🖼</button>
  <button type="button" data-md="code" title="Код">&lt;/&gt;</button>
  <button type="button" data-md="quote" title="Цитата">&raquo;</button>
  <button type="button" data-md="ul" title="Список">• list</button>
  <button type="button" data-md="ol" title="Нум. список">1. list</button>
  <button type="button" data-md="preview" title="Предпросмотр">👁 preview</button>
</div>
<script>
(function () {
  var toolbars = document.querySelectorAll('[data-md-toolbar]');
  toolbars.forEach(function (tb) {
    var ta = tb.nextElementSibling;
    while (ta && ta.tagName !== 'TEXTAREA') ta = ta.nextElementSibling;
    if (!ta) return;
    tb.addEventListener('click', function (e) {
      var btn = e.target.closest('[data-md]');
      if (!btn) return;
      var action = btn.getAttribute('data-md');
      var sel = ta.value.substring(ta.selectionStart, ta.selectionEnd);
      var before = ta.value.substring(0, ta.selectionStart);
      var after = ta.value.substring(ta.selectionEnd);
      var wrap = function (o, c) { return o + (sel || '') + c; };
      var insert = '';
      // Промпты выводим через Celena.prompt (асинхронно, со стилизованным модалом).
      // Для остальных действий — синхронный insert.
      function applyInsert(textToInsert) {
        ta.value = before + textToInsert + after;
        ta.focus();
        ta.setSelectionRange(before.length, before.length + textToInsert.length);
      }
      function ask(message, onOk) {
        var p = (window.Celena && window.Celena.prompt)
          ? window.Celena.prompt(message, { title: 'Вставка', placeholder: 'https://…' })
          : Promise.resolve(window.prompt(message));
        p.then(function (v) { if (v !== null && v !== '') onOk(v); });
      }
      switch (action) {
        case 'bold':   insert = wrap('**','**'); break;
        case 'italic': insert = wrap('*','*'); break;
        case 'heading':insert = '\n## ' + (sel || 'Заголовок') + '\n'; break;
        case 'link':   ask('URL:', function (u) { applyInsert('[' + (sel || 'текст') + '](' + u + ')'); }); return;
        case 'image':  ask('URL картинки:', function (u) { applyInsert('![' + (sel || 'alt') + '](' + u + ')'); }); return;
        case 'code':   insert = sel.indexOf('\n') === -1 ? wrap('`','`') : '\n```\n' + (sel || '') + '\n```\n'; break;
        case 'quote':  insert = (sel || 'цитата').split('\n').map(function (l){ return '> ' + l; }).join('\n'); break;
        case 'ul':     insert = (sel || 'пункт').split('\n').map(function (l){ return '- ' + l; }).join('\n'); break;
        case 'ol':     insert = (sel || 'пункт').split('\n').map(function (l,i){ return (i+1) + '. ' + l; }).join('\n'); break;
        case 'preview':
          var prev = document.createElement('div');
          prev.className = 'md-preview';
          prev.innerHTML = '<em>Предпросмотр откроется после сохранения. Сохраните черновик и откройте страницу.</em>';
          ta.parentNode.insertBefore(prev, ta.nextSibling);
          setTimeout(function () { prev.remove(); }, 4000);
          return;
      }
      applyInsert(insert);
    });
  });
})();
</script>
<style>
.md-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; padding: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px 6px 0 0; border-bottom: 0; }
.md-toolbar button { background: transparent; border: 1px solid transparent; padding: 4px 8px; border-radius: 4px; color: var(--text-muted); cursor: pointer; font-size: 13px; }
.md-toolbar button:hover { background: var(--surface); color: var(--accent); border-color: var(--border); }
[data-markdown-editor] { border-radius: 0 0 8px 8px !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.md-preview { margin-top: 8px; padding: 10px; background: var(--surface-2); border-radius: 6px; font-size: 13px; color: var(--text-muted); }
</style>
