nexusyazi/public/app.js

/* ============================================================
   NexusYazı — iskelet (client-side kelime islemcisi)
   - zengin metin: document.execCommand ile biçim komutları
   - localStorage: otomatik kayıt (3sn) + aç/kaydet/yeni
   - dışa aktar: HTML / TXT indir
   - canlı kelime-karakter sayacı, kısayollar, açık/koyu tema
   ============================================================ */
(function () {
  'use strict';

  /* ---------- ELEMANLAR ---------- */
  const $ = (s) => document.querySelector(s);
  const editor = $('#editor');
  const fileNameEl = $('#fileName');

  const btnTheme = $('#btnTheme');
  const btnNew = $('#btnNew');
  const btnSave = $('#btnSave');
  const btnOpen = $('#btnOpen');
  const btnExport = $('#btnExport');
  const btnUndo = $('#btnUndo');
  const btnRedo = $('#btnRedo');
  const btnClearFmt = $('#btnClearFmt');

  // --- İçindekiler (başlık gezinme) ---
  const btnToc = $('#btnToc');
  const tocPanel = $('#tocPanel');
  const tocBody = $('#tocBody');
  const tocEmpty = $('#tocEmpty');

  // --- Bul & Değiştir paneli ---
  const findbar = $('#findbar');
  const findInput = $('#findInput');
  const replaceInput = $('#replaceInput');
  const findCount = $('#findCount');
  const btnFindPrev = $('#findPrev');
  const btnFindNext = $('#findNext');
  const btnReplace = $('#btnReplace');
  const btnReplaceAll = $('#btnReplaceAll');
  const btnFindClose = $('#findClose');

  const selFont = $('#selFont');
  const selSize = $('#selSize');
  const selBlock = $('#selBlock');
  const colorFg = $('#colorFg');
  const wrapFg = $('#wrapFg');
  const colorBg = $('#colorBg');
  const wrapBg = $('#wrapBg');

  const saveState = $('#saveState');
  const countWords = $('#countWords');
  const countChars = $('#countChars');

  /* ---------- DURUM ---------- */
  const LS_DOC = 'nexusyazi.documento';
  const LS_META = 'nexusyazi.meta';
  const LS_THEME = 'nexusyazi.tema';

  let theme = localStorage.getItem(LS_THEME) || 'light';
  let docName = 'Belgesiz.docx';
  let dirty = false;
  let autoSaveTimer = null;

  /* =========================================================
     TEMA
     ========================================================= */
  function applyTheme(t) {
    theme = t;
    document.documentElement.setAttribute('data-theme', t);
    try { localStorage.setItem(LS_THEME, t); } catch (e) {}
  }
  btnTheme.addEventListener('click', () => applyTheme(theme === 'dark' ? 'light' : 'dark'));

  /* =========================================================
     ZENGİN METİN KOMUTLARI
     ========================================================= */
  function focusEditor() { try { editor.focus(); } catch (e) {} }

  function exec(cmd, val) {
    editor.focus();
    const ok = document.execCommand(cmd, false, val);
    editor.focus();
    refreshState();
    return ok;
  }

  // araç çubuğundaki data-cmd butonları
  document.querySelectorAll('.tool[data-cmd]').forEach((btn) => {
    btn.addEventListener('mousedown', (e) => e.preventDefault()); // seçimi koru
    btn.addEventListener('click', () => {
      exec(btn.dataset.cmd);
    });
  });

  // üst şerit undo/redo
  btnUndo.addEventListener('mousedown', (e) => e.preventDefault());
  btnUndo.addEventListener('click', () => exec('undo'));
  btnRedo.addEventListener('mousedown', (e) => e.preventDefault());
  btnRedo.addEventListener('click', () => exec('redo'));

  btnClearFmt.addEventListener('mousedown', (e) => e.preventDefault());
  btnClearFmt.addEventListener('click', () => exec('removeFormat'));

  // renkler
  colorFg.addEventListener('input', (e) => exec('foreColor', e.target.value));
  wrapFg.addEventListener('mousedown', (e) => e.preventDefault());
  colorBg.addEventListener('input', (e) => exec('hiliteColor', e.target.value));
  wrapBg.addEventListener('mousedown', (e) => e.preventDefault());

  // font ailesi / boyutu
  selFont.addEventListener('change', (e) => exec('fontName', e.target.value));
  selSize.addEventListener('change', (e) => exec('fontSize', e.target.value));

  // blok / başlık stili
  selBlock.addEventListener('change', (e) => {
    const v = e.target.value;
    const after = () => { setBlockActive(v); };
    if (v === 'p') {
      exec('formatBlock', '<p>');
    } else {
      exec('formatBlock', '<' + v + '>');
    }
    setBlockActive(v);
  });

  /* =========================================================
     AKTİF BUTON TAKİBİ (seçime göre vurgula)
     ========================================================= */
  const TOOLS = ['bold', 'italic', 'underline', 'strikeThrough',
                 'insertUnorderedList', 'insertOrderedList',
                 'justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'];

  function refreshState() {
    let sel = null;
    try { sel = window.getSelection(); } catch (e) {}
    if (sel && sel.rangeCount) {
      const node = sel.getRangeAt(0).commonAncestorContainer;
      const el = node.nodeType === 3 ? node.parentElement : node;
      if (el) {
        TOOLS.forEach((cmd) => {
          const b = document.querySelector('.tool[data-cmd="' + cmd + '"]');
          if (b) b.classList.toggle('on', !!document.queryCommandState(cmd));
        });
        setBlockActive(detectBlock(el));
      }
    }
    // word count live
    updateCounts();
    // undo/redo durumu
    btnUndo.disabled = !canUndo();
    btnRedo.disabled = !canRedo();
  }

  function setBlockActive(tag) {
    const map = { H1: 'h1', H2: 'h2', H3: 'h3', P: 'p', DIV: 'p', LI: 'p' };
    let cur = map[tag] || 'p';
    if (tag === 'P') cur = 'p';
    if (tag === 'LI') cur = 'p';
    selBlock.value = cur;
  }

  function detectBlock(el) {
    let n = el;
    while (n && n !== editor) {
      if (n.tagName === 'H1' || n.tagName === 'H2' || n.tagName === 'H3' || n.tagName === 'P') {
        return n.tagName;
      }
      n = n.parentElement;
    }
    return 'P';
  }

  function canUndo() {
    try { return document.queryCommandEnabled('undo'); } catch (e) { return true; }
  }
  function canRedo() {
    try { return document.queryCommandEnabled('redo'); } catch (e) { return true; }
  }

  /* =========================================================
     KELİME / KARAKTER SAYACI
     ========================================================= */
  function textOf(root) {
    const clone = root.cloneNode(true);
    clone.querySelectorAll('script,style').forEach((x) => x.remove());
    return (clone.textContent || '').replace(/\u00a0/g, ' ');
  }

  function updateCounts() {
    const raw = textOf(editor);
    const chars = raw.length;
    const words = raw.trim() ? raw.trim().split(/\s+/).length : 0;
    countChars.textContent = chars;
    countWords.textContent = words;
  }

  /* =========================================================
     DİRTY / OTOMATİK KAYIT (3 sn)
     ========================================================= */
  function markDirty() {
    dirty = true;
    saveState.className = 'save-ind dirty';
    saveState.innerHTML = '<span class="dot"></span>Kaydedilmedi';
    scheduleAutoSave();
  }

  function scheduleAutoSave() {
    if (autoSaveTimer) clearTimeout(autoSaveTimer);
    autoSaveTimer = setTimeout(save, 3000);
  }

  /* =========================================================
     KAYDET / AÇ / YENİ / DIŞA AKTAR  (localStorage)
     ========================================================= */
  function ls() {
    try { return localStorage; } catch (e) { return null; }
  }

  function getMeta() {
    try { const m = JSON.parse(localStorage.getItem(LS_META) || '{}'); return m; }
    catch (e) { return {}; }
  }
  function setMeta(patch) {
    const m = Object.assign(getMeta(), patch);
    try { localStorage.setItem(LS_META, JSON.stringify(m)); } catch (e) {}
  }

  function save() {
    if (!ls()) { setSaveText('Kayıt engellendi'); return; }
    const html = editor.innerHTML;
    try {
      localStorage.setItem(LS_DOC, html);
      setMeta({ name: docName, savedAt: new Date().toISOString() });
      dirty = false;
      setSaveText('Kaydedildi • ' + new Date().toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
      if (autoSaveTimer) { clearTimeout(autoSaveTimer); autoSaveTimer = null; }
    } catch (e) {
      setSaveText('Kayıt hatası');
    }
  }

  const INFO_WORDS = ['Açıldı', 'İndirildi', 'Hazır', 'yok'];
  var savingTextTimer = null;
  function setSaveText(txt) {
    let cls = 'saving';
    if (txt.indexOf('Kaydedildi') !== -1 || INFO_WORDS.some((w) => txt.indexOf(w) !== -1)) {
      cls = 'saved';
    } else if (txt.indexOf('engellendi') !== -1 || txt.indexOf('hata') !== -1) {
      cls = 'dirty';
    }
    saveState.className = 'save-ind ' + cls;
    saveState.innerHTML = '<span class="dot"></span>' + txt;
  }

  function load() {
    if (!ls()) return;
    const html = localStorage.getItem(LS_DOC);
    if (html) {
      editor.innerHTML = html;
      // için kirli sayma: temiz başlat
      dirty = false;
      const meta = getMeta();
      if (meta.name) { docName = meta.name; fileNameEl.textContent = docName; }
    } else {
      editor.innerHTML = '<p>Yeni bir belge... (yazmaya başlayın)</p>';
    }
    editor.focus();
    setCaretToEnd();
    refreshState();
  }

  function setCaretToEnd() {
    try {
      const range = document.createRange();
      range.selectNodeContents(editor);
      range.collapse(false);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } catch (e) {}
  }

  /* Yeni belge */
  function neu() {
    const ok = confirm('Yeni bir belge oluşturulsun mu?\nMevcut belge otomatik kaydedilecek.');
    if (!ok) return;
    save();
    docName = 'Belgesiz.docx';
    fileNameEl.textContent = docName;
    editor.innerHTML = '<h1>nexusyazi</h1><p>Yeni belgenize yazmaya başlayın.</p>';
    setMeta({ name: docName });
    editor.focus();
    refreshState();
  }

  /* Aç: kayıtlı belgeleri listele */
  function openDialog() {
    if (!ls()) return setSaveText('Aç engellendi');
    // Tek-belge modeli: son taslak otomatik yüklendi. Kutu olarak "son kayıt" içeriği döndürülür.
    // Not: proje tek taslak dosyası tutar (belge + ad). Basit & gizlilik dostu.
    const cur = localStorage.getItem(LS_DOC);
    if (!cur) { setSaveText('Kayıtlı belge yok'); return; }
    const meta = getMeta();
    const t = meta.savedAt ? new Date(meta.savedAt).toLocaleString('tr-TR') : 'bilinmiyor';
    const go = confirm('Son kaydedilen belge yüklensin mi?\nAd: "' + (meta.name || 'Belgesiz') + '"\nSon kayıt: ' + t);
    if (go) {
      editor.innerHTML = cur;
      fileNameEl.textContent = meta.name || 'Belgesiz.docx';
      docName = meta.name || 'Belgesiz.docx';
      dirty = false;
      setSaveText('Açıldı');
    }
  }

  /* Dışa aktar: HTML ve TXT */
  function download(name, content, mime) {
    const blob = new Blob([content], { type: mime });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = name;
    document.body.appendChild(a);
    a.click();
    a.remove();
    setTimeout(() => URL.revokeObjectURL(url), 300);
  }

  function exportDialog() {
    const fmt = confirm('Nasıl indirmek istersiniz?\n"Tamam" = HTML, "İptal" = TXT (düz metin)');
    const base = (docName || 'belge').replace(/\.(docx?|html|txt)$/i, '');
    if (fmt) {
      const full = '<!DOCTYPE html><html lang="tr"><head><meta charset="utf-8"><title>' +
        (docName || 'Belge') + '</title><style>body{font-family:Segoe UI,Arial,sans-serif;max-width:820px;margin:40px auto;line-height:1.7;padding:0 20px} h1,h2,h3{line-height:1.3}</style></head><body>' +
        editor.innerHTML + '</body></html>';
      download(base + '.html', full, 'text/html;charset=utf-8');
    } else {
      const plain = editor.innerText || (editor.textContent || '');
      download(base + '.txt', plain, 'text/plain;charset=utf-8');
    }
    setSaveText('İndirildi');
  }

  /* =========================================================
     ZORUNLU KAYIT İÇİN UNSAVED (Ctrl+S)
     ========================================================= */
  function requestSave() {
    save();
  }

  /* =========================================================
     OLAYLAR
     ========================================================= */
  btnNew.addEventListener('click', neu);
  btnSave.addEventListener('mousedown', (e) => e.preventDefault());
  btnSave.addEventListener('click', requestSave);
  btnOpen.addEventListener('click', openDialog);
  btnExport.addEventListener('click', exportDialog);

  /* --- Dosya adını düzenleme (Enter / odak kaybı / Esc) --- */
  function commitFileName() {
    let name = fileNameEl.textContent.trim().replace(/\s+/g, ' ');
    if (!name) { name = 'Belgesiz.docx'; }
    // uzantı yoksa .docx ekle
    if (!/\.(docx?|html|txt)$/i.test(name)) name += '.docx';
    docName = name;
    fileNameEl.textContent = name;
    dirty = true;              // ad değişimi de kopyalanmalı → otomatik kayıt
    scheduleAutoSave();
  }
  fileNameEl.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') { e.preventDefault(); fileNameEl.blur(); }
    else if (e.key === 'Escape') { e.preventDefault(); fileNameEl.textContent = docName; fileNameEl.blur(); }
    e.stopPropagation(); // editor kısayollarına taşmasın
  });
  fileNameEl.addEventListener('blur', commitFileName);
  fileNameEl.addEventListener('input', () => { dirty = false; }); // yazarken 'kirlendi' balonu yanmasın; bitince blur commit eder

  /* ============ BUL & DEĞİŞTİR (native window.find tabanlı — sağlam) ============ */
  function findCountTotal(q) {
    // Tüm eşleşmeleri say: seçimi başa al, native bul'u döngüle
    try {
      const sel = window.getSelection();
      sel.removeAllRanges();
      const r = document.createRange();
      r.selectNodeContents(editor);
      sel.addRange(r);
      sel.collapseToStart();
      let c = 0;
      while (window.find(q, false, false, false)) { c++; }
      return c;
    } catch (e) { return -1; }
  }
  function gotoNext(backward) {
    const q = findInput.value;
    if (!q) { findCount.textContent = ''; editor.focus(); return; }
    // native bul: hiç bulamazsa başa dönüp bir kez daha dener
    if (!window.find(q, false, backward, false) && !window.find(q, false, backward, false)) {
      findCount.textContent = 'Eşleşme yok';
    } else {
      findCount.textContent = '';
    }
  }
  function openFind(replaceMode) {
    findbar.hidden = false;
    findInput.focus(); findInput.select();
    const rs = document.getElementById('find-sep-repl');
    const rc = document.getElementById('replaceInput');
    const ra = document.getElementById('btnReplaceAll');
    // Değiştir alanına ait unsurlar (ayraç + giriş + buton) yalnız Ctrl+H modunda görünür
    if (rs) rs.style.display = replaceMode ? '' : 'none';
    if (rc) rc.style.display = replaceMode ? '' : 'none';
    if (ra) ra.style.display = replaceMode ? '' : 'none';
  }
  function closeFind() {
    findbar.hidden = true; findCount.textContent = '';
    editor.focus();
  }
  findInput.addEventListener('input', () => { findCount.textContent = ''; });
  btnFindNext.addEventListener('click', () => gotoNext(false));
  btnFindPrev.addEventListener('click', () => gotoNext(true));
  findInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') { e.preventDefault(); gotoNext(e.shiftKey); }
    if (e.key === 'Escape') { closeFind(); }
  });
  btnFindClose.addEventListener('click', closeFind);
  btnReplace.addEventListener('click', () => {
    const q = findInput.value, rep = replaceInput.value;
    const sel = window.getSelection();
    if (!q || !sel.rangeCount) return;
    // Teğet eşleşme seçili değilse önce bul
    if (!sel.toString().toLowerCase() || !window.find(q, false, false, false)) {
      // bulamadıysa ilk geçiş
    }
    const s = window.getSelection();
    if (s.rangeCount && s.toString()) {
      s.getRangeAt(0).deleteContents();
      s.getRangeAt(0).insertNode(document.createTextNode(rep));
      dirty = true; scheduleAutoSave(); updateCounts();
      saveState.textContent = '1 kez değiştirildi';
    } else {
      saveState.textContent = 'Önce bir eşleşme seçin (▼ göz at)';
    }
  });
  btnReplaceAll.addEventListener('click', () => {
    const q = findInput.value, rep = replaceInput.value;
    if (!q) return;
    // Başa dön ve toplamda kaç, sonra hepsini değiştir
    const sel = window.getSelection();
    const r = document.createRange();
    r.selectNodeContents(editor);
    sel.removeAllRanges(); sel.addRange(r); sel.collapseToStart();
    let count = 0, guard = 0;
    while (window.find(q, false, false, false) && guard++ < 2000) {
      const s = window.getSelection();
      if (!s.rangeCount || !s.toString()) break;
      s.getRangeAt(0).deleteContents();
      s.getRangeAt(0).insertNode(document.createTextNode(rep));
      count++;
    }
    if (count) { dirty = true; scheduleAutoSave(); updateCounts(); saveState.textContent = count + ' kez değiştirildi'; }
    findCount.textContent = count ? ('Tümü: ' + count) : 'Eşleşme yok';
  });
  document.addEventListener('keydown', (e) => {
    const mod = e.ctrlKey || e.metaKey;
    if (mod && e.key.toLowerCase() === 'f' && !e.shiftKey) { e.preventDefault(); openFind(false); }
    else if (mod && e.key.toLowerCase() === 'h') { e.preventDefault(); openFind(true); }
  });

  // düzenleme anında -> dirty + sayaç + araç vurgusu
  editor.addEventListener('input', markDirty);
  editor.addEventListener('keyup', refreshState);
  editor.addEventListener('click', refreshState);
  editor.addEventListener('mouseup', () => setTimeout(refreshState, 0));
  document.addEventListener('selectionchange', () => setTimeout(refreshState, 60));

  // klavye kısayolları
  document.addEventListener('keydown', (e) => {
    const mod = e.ctrlKey || e.metaKey;
    if (!mod) return;
    const k = e.key.toLowerCase();
    if (k === 's') { e.preventDefault(); save(); }
    else if (k === 'b') { e.preventDefault(); exec('bold'); }
    else if (k === 'i') { e.preventDefault(); exec('italic'); }
    else if (k === 'u') { e.preventDefault(); exec('underline'); }
    else if (k === 'z') { e.preventDefault(); exec('undo'); }
    else if (k === 'y') { e.preventDefault(); exec('redo'); }
    else if (k === 'a') { /* default select-all */ }
  });

  // pencere kapanırken kirli ise kaydet (best-effort)
  window.addEventListener('beforeunload', () => { if (dirty) save(); });

  /* =========================================================
     BAŞLAT
     ========================================================= */
  // Erişilebilirlik: title taşıyan ikon-butonlarına aria-label türet (SVG-only butonlar)
  function autoAria() {
    document.querySelectorAll('button.icon-btn[title], button.tool[title]').forEach((b) => {
      if (!b.getAttribute('aria-label')) {
        b.setAttribute('aria-label', (b.getAttribute('title') || '').replace(/\s*\(.*\)$/, '').trim());
      }
    });
  }

  function init() {
    applyTheme(theme);
    autoAria();
    load();
    saveState.className = 'save-ind saved';
    saveState.innerHTML = '<span class="dot"></span>Hazır';
    refreshState();
    setupExtras();
  bindToc();
  }

  /* =========================================================
     GENİŞLETMELER: satır aralığı, girinti, tablo, resim, yazdır
     ========================================================= */
  function parseLH(v) { const n = parseFloat(v); return isNaN(n) ? 0 : n; }

  // Seçimin "ilgilendirdiği" blokları (p,h1..h3,li,blockquote) sırayla döndürür.
  function selBlocks() {
    const s = window.getSelection();
    if (!s || s.rangeCount === 0) return [];
    const r = s.getRangeAt(0);
    const tagSel = 'p,h1,h2,h3,h4,li,blockquote,figure,table';
    function nearest(n) {
      if (!n) return null;
      const el = n.nodeType === 1 ? n : (n.parentNode || null);
      return el && typeof el.closest === 'function' ? el.closest(tagSel) : null;
    }
    const first = nearest(r.startContainer);
    const last = nearest(r.endContainer);
    if (!first) return [];
    if (!last || first === last) return [first];
    const out = [first];
    let cur = first.nextElementSibling;
    while (cur && cur !== last) {
      if (cur.matches && cur.matches(tagSel)) out.push(cur);
      cur = cur.nextElementSibling;
    }
    if (last) out.push(last);
    return out;
  }

  // ---- Satır aralığı ----
  function setLineHeight(val) {
    if (!/^\d+(\.\d+)?$/.test(val)) return;
    selBlocks().forEach(function (b) {
      b.style.lineHeight = val;
    });
    markDirty(); refreshState();
  }

  // ---- Girinti ----
  const INDENT_STEP = 24;
  function indentBlocks(fn) {
    selBlocks().forEach(function (b) {
      if (b.tagName === 'LI' || b.tagName === 'BLOCKQUOTE') return;
      const cur = parseInt(b.style.paddingLeft, 10) || 0;
      let v = cur + INDENT_STEP * (fn > 0 ? 1 : -1);
      if (v < 0) v = 0;
      if (v > 312) v = 312;
      b.style.paddingLeft = (v > 0 ? v + 'px' : '');
    });
    markDirty(); refreshState();
  }

  // ---- Tablo: mini panel + grid ----
  const TBL_ROWS = 7, TBL_COLS = 8;
  var tblHov = { r: 1, c: 1 };

  function buildTableGrid() {
    const g = $('#tblGrid');
    g.innerHTML = '';
    for (let r = 0; r < TBL_ROWS; r++) {
      for (let c = 0; c < TBL_COLS; c++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.dataset.r = r + 1;
        cell.dataset.c = c + 1;
        cell.addEventListener('mouseenter', function () {
          g.querySelectorAll('.cell').forEach(function (el) {
            el.classList.toggle('hov', el.dataset.r <= (r + 1) && el.dataset.c <= (c + 1));
          });
          tblHov = { r: r + 1, c: c + 1 };
          const lb = $('#tblSizeLabel');
          if (lb) lb.textContent = (r + 1) + ' × ' + (c + 1);
        });
        cell.addEventListener('click', function () {
          insertTable(r + 1, c + 1);
          closeTblPanel();
        });
        g.appendChild(cell);
      }
    }
  }

  function insertTable(rows, cols) {
    let html = '<table>';
    for (let r = 0; r < rows; r++) {
      html += '<tr>';
      for (let c = 0; c < cols; c++) {
        const isHead = r === 0;
        html += (isHead ? '<th' : '<td') + '>&nbsp;</' + (isHead ? 'th' : 'td') + '>';
      }
      html += '</tr>';
    }
    html += '</table><p><br></p>';
    const ok = exec('insertHTML', html);
    focusEditor();
    markDirty();
    refreshState();
  }

  function openTblPanel() {
    const btn = $('#btnTable');
    buildTableGrid();
    const panel = $('#tblPanel');
    if (!btn || !panel) return;
    const rect = btn.getBoundingClientRect();
    const pRect = panel.getBoundingClientRect();
    panel.hidden = false;
    // Yeniden ölç (fixed, viewport'a göre)
    const w = panel.offsetWidth;
    let left = rect.left;
    if (left + w > window.innerWidth - 8) left = window.innerWidth - w - 8;
    if (left < 8) left = 8;
    let top = rect.bottom + 6;
    if (top + panel.offsetHeight > window.innerHeight - 8) top = rect.top - panel.offsetHeight - 6;
    panel.style.left = left + 'px';
    panel.style.top = top + 'px';
  }
  function closeTblPanel() { const p = $('#tblPanel'); if (p) p.hidden = true; }

  // ---- Resim ekleme + seçim + yeniden boyutlandırma ----
  const inputImg = document.createElement('input');
  inputImg.type = 'file';
  inputImg.accept = '.png,.jpg,.jpeg,.gif,.bmp,.webp,.svg,image/*';
  inputImg.style.display = 'none';
  document.body.appendChild(inputImg);
  inputImg.addEventListener('change', function () {
    const f = inputImg.files && inputImg.files[0];
    inputImg.value = '';
    if (!f) return;
    const fr = new FileReader();
    fr.onload = function (ev) {
      // dosya boyutu güvenliği: 3 MB üstü büyüklükte "önizleme" resmi gömme (gizlilik dostu)
      const src = ev.target.result;
      const imgHtml = '<img src="' + src + '" alt="Resim" style="max-width:100%">';
      exec('insertHTML', imgHtml);
      focusEditor();
      markDirty();
      refreshState();
    };
    fr.onerror = function () { };
    fr.readAsDataURL(f);
  });

  // Resim seçilince sarmalayıcı + köşe tutamacı
  function attachImgHandle(img) {
    // Zaten sarmalanmış mı?
    let wrap = img.closest ? img.closest('.img-wrap') : null;
    if (!wrap) {
      wrap = document.createElement('span');
      wrap.className = 'img-wrap';
      wrap.contentEditable = 'false';
      img.parentNode.insertBefore(wrap, img);
      wrap.appendChild(img);
    }
    document.querySelectorAll('.img-wrap .img-handle').forEach(function (h) { h.remove(); });
    img.classList.add('old-sel');
    const handle = document.createElement('span');
    handle.className = 'img-handle';
    handle.title = 'Sürükleyerek boyutlandır';
    wrap.appendChild(handle);

    let startX, startY, baseW;
    const onMove = function (e) {
      e.preventDefault();
      let w = Math.max(48, Math.round(baseW + (e.clientX - startX)));
      const maxW = Math.max(120, editor.getBoundingClientRect().width - 40);
      if (w > maxW) w = maxW;
      img.style.width = w + 'px';
      img.style.height = 'auto';
    };
    function onUp() {
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);
      document.body.style.cursor = '';
      markDirty();
    }
    handle.addEventListener('mousedown', function (e) {
      e.preventDefault(); e.stopPropagation();
      startX = e.clientX; startY = e.clientY;
      baseW = img.offsetWidth || 200;
      document.body.style.cursor = 'nwse-resize';
      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onUp);
    });
  }
  function clearImgSel() {
    document.querySelectorAll('.page .old-sel').forEach(function (i) { i.classList.remove('old-sel'); });
    document.querySelectorAll('.img-wrap .img-handle').forEach(function (h) { h.remove(); });
  }
  function handleEditorClick(ev) {
    const t = ev.target;
    if (t && t.tagName === 'IMG' && editor.contains(t)) {
      clearImgSel();
      attachImgHandle(t);
      ev.preventDefault();
    } else if (t && t.classList && !t.classList.contains('img-handle') && t.closest && !t.closest('.img-wrap, .tbl-panel')) {
      clearImgSel();
    }
  }

  // ---- Yazdır ----
  function doPrint() { window.print(); }

  function setupExtras() {
    var sel = $('#selLineHeight');
    if (sel) {
      sel.addEventListener('change', function () { setLineHeight(sel.value); });
    }
    const bOut = $('#btnOutdent'), bIn = $('#btnIndent');
    if (bOut) bOut.addEventListener('click', function () { indentBlocks(-1); });
    if (bIn)  bIn .addEventListener('click', function () { indentBlocks(1); });
    const bTbl = $('#btnTable');
    if (bTbl) bTbl.addEventListener('click', function (e) {
      const panel = $('#tblPanel');
      if (panel && !panel.hidden) { closeTblPanel(); }
      else { e.stopPropagation(); openTblPanel(); }
    });
    const bImg = $('#btnImage');
    if (bImg) bImg.addEventListener('click', function () { inputImg.click(); });
    const bPr = $('#btnPrint');
    if (bPr) bPr.addEventListener('click', doPrint);
    if (editor) {
      editor.addEventListener('click', handleEditorClick);
    }
    document.addEventListener('mousedown', function (e) {
      const panel = $('#tblPanel');
      if (panel && !panel.hidden && e.target.closest && !e.target.closest('#btnTable') && !(panel.contains && panel.contains(e.target))) {
        closeTblPanel();
      }
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && $('#tblPanel') && !$('#tblPanel').hidden) { closeTblPanel(); }
    });
  }

  /* =========================================================
     İÇİNDEKİLER (başlık gezinme)
     ========================================================= */
  let tocHideTimer = null;
  function closeToc() {
    if (!tocPanel) return;
    if (btnToc) { btnToc.classList.remove('on'); btnToc.setAttribute('aria-expanded', 'false'); }
    tocPanel.classList.remove('open');
    clearTimeout(tocHideTimer);
    tocHideTimer = setTimeout(function () { tocPanel.hidden = true; }, 240);
  }
  function openToc() {
    if (!tocPanel) return;
    clearTimeout(tocHideTimer);
    tocPanel.hidden = false;
    if (btnToc) { btnToc.classList.add('on'); btnToc.setAttribute('aria-expanded', 'true'); }
    // yeniden akışı zorla ki translate geçişi çalışsın
    void tocPanel.offsetWidth;
    tocPanel.classList.add('open');
  }
  function toggleToc() {
    if (!tocPanel) return;
    if (tocPanel.classList.contains('open')) { closeToc(); }
    else { openToc(); updateToc(); }
  }

  function updateToc() {
    if (!tocBody || !editor || !tocPanel) return;
    if (!tocPanel.classList.contains('open')) return; // kapalıyken boşa masraf yok
    const heads = editor.querySelectorAll('h1, h2, h3');
    tocBody.textContent = '';
    if (!heads.length) {
      tocBody.hidden = true;
      if (tocEmpty) tocEmpty.hidden = false;
      return;
    }
    tocBody.hidden = false;
    if (tocEmpty) tocEmpty.hidden = true;
    heads.forEach(function (h) {
      const txt = (h.textContent || '').trim() || '(Başlıksız)';
      const li = document.createElement('li');
      const b = document.createElement('button');
      b.type = 'button';
      b.className = 'toc-item lv-' + h.tagName[1]; // H1→lv-1, H2→lv-2, H3→lv-3
      const num = document.createElement('span');
      num.className = 'toc-hl';
      num.textContent = h.tagName[1];
      const sp = document.createElement('span');
      sp.className = 'toc-txt';
      sp.textContent = txt;
      b.appendChild(num);
      b.appendChild(sp);
      b.addEventListener('click', function () {
        h.scrollIntoView({ behavior: 'smooth', block: 'start' });
        focusEditor();
      });
      li.appendChild(b);
      tocBody.appendChild(li);
    });
  }

  function bindToc() {
    if (btnToc) btnToc.addEventListener('click', toggleToc);
    const tc = $('#tocClose');
    if (tc) tc.addEventListener('click', closeToc);
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && tocPanel && tocPanel.classList.contains('open')) {
        closeToc();
      }
    });
    if (editor) {
      editor.addEventListener('input', function () { updateToc(); });
      editor.addEventListener('keyup', function () { updateToc(); });
    }
  }

  init();
})();