Update index.html

index.html

@@ -6,32 +6,71 @@
 <title>Проверка русского текста (LanguageTool)</title>
 <style>
   * { box-sizing: border-box; }
-  body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 12px; background: #f4f6f8; }
-  h1 { font-size: 18px; margin: 0 0 10px; }
-  .toolbar { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  html, body { height: 100%; }
+  body {
+    font-family: -apple-system, Segoe UI, Roboto, sans-serif;
+    margin: 0; padding: 12px; background: #f4f6f8;
+    height: 100vh; height: 100dvh;
+    display: flex; flex-direction: column; overflow: hidden;
+  }
+  h1 { font-size: 18px; margin: 0 0 8px; flex: none; }
+  .toolbar { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex: none; }
   button { padding: 8px 12px; font-size: 14px; cursor: pointer; border: none; border-radius: 6px; background: #2563eb; color: #fff; }
   button:disabled { background: #94a3b8; cursor: not-allowed; }
   button.pause { background: #f59e0b; }
   button.reset { background: #64748b; }
-  .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+
+  /* ===== Три колонки на всю высоту экрана ===== */
+  .cols {
+    flex: 1; min-height: 0;
+    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-rows: minmax(0, 1fr);
+    gap: 10px;
+  }
   @media (max-width: 900px) {
-    .cols { grid-template-columns: 1fr; }
-    textarea, .output { height: 40vh; }
+    .cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
+  }
+  .col {
+    background: #fff; border-radius: 10px; padding: 10px;
+    display: flex; flex-direction: column; min-height: 0; min-width: 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08);
+  }
+  .col h2 { flex: none; font-size: 13px; margin: 0 0 8px; color: #334155; text-transform: uppercase; letter-spacing: .5px; }
+
+  /* ===== Единый стиль текста для 1-й и 3-й колонок ===== */
+  .txt {
+    font-family: Georgia, "Times New Roman", serif;
+    font-size: 16px; line-height: 1.6; color: #0f172a;
+    font-weight: 400; font-style: normal;
+    white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
+  }
+  .txt b, .txt strong { font-weight: 700; }
+  .txt i, .txt em { font-style: italic; }
+
+  .pane {
+    flex: 1; min-height: 0; overflow-y: auto;
+    padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fafafa;
   }
-  .col { background: #fff; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
-  .col h2 { font-size: 13px; margin: 0 0 8px; color: #334155; text-transform: uppercase; letter-spacing: .5px; }
-  textarea { width: 100%; height: 55vh; resize: vertical; font-size: 14px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; }
-  .output { height: 55vh; overflow-y: auto; font-size: 14px; line-height: 1.5; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fafafa; white-space: pre-wrap; word-wrap: break-word; }
-  .chunk-buttons { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
-  .chunk-buttons button { background: #0ea5e9; font-size: 13px; padding: 6px 10px; }
+  #input { outline: none; background: #fff; }
+  #input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
+  #input:empty::before { content: attr(data-placeholder); color: #94a3b8; pointer-events: none; }
+  #input div { min-height: 1.6em; }
+
+  /* Результаты проверки (2-я колонка) */
+  #results { font-size: 14px; line-height: 1.5; font-family: -apple-system, Segoe UI, Roboto, sans-serif; white-space: normal; }
+
+  .chunk-buttons { flex: none; margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; max-height: 84px; overflow-y: auto; }
+  .chunk-buttons button { background: #0ea5e9; font-size: 13px; padding: 5px 9px; }
   .chunk-buttons button.done { background: #16a34a; }
   .chunk-buttons button.err { background: #dc2626; }
-  .chunk-info { font-size: 12px; color: #64748b; margin-top: 6px; }
+  .chunk-info { flex: none; font-size: 12px; color: #64748b; margin-top: 6px; }
   .status { font-size: 13px; color: #475569; margin-left: 8px; }
+
   .err { background: #fee2e2; border-bottom: 2px solid #ef4444; cursor: help; }
-  .fix { background: #dcfce7; color: #166534; font-weight: 600; }
+  .fix { background: #dcfce7; color: #166534; font-weight: 600; font-family: -apple-system, Segoe UI, Roboto, sans-serif; font-size: 13px; }
   .block { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed #e2e8f0; }
-  .block-title { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
+  .block:last-child { border-bottom: none; }
+  .block-title { font-family: -apple-system, Segoe UI, Roboto, sans-serif; font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
   .issue { background: #fff; border-left: 4px solid #ef4444; padding: 6px 8px; margin-bottom: 6px; border-radius: 4px; font-size: 13px; }
   .issue.ok { border-color: #16a34a; }
   .issue .msg { font-weight: 600; }
@@ -55,19 +94,20 @@
 <div class="cols">
   <div class="col">
     <h2>1. Ваш текст</h2>
-    <textarea id="input" placeholder="Вставьте сюда большой русский текст..."></textarea>
+    <div id="input" class="pane txt" contenteditable="true" spellcheck="false"
+         data-placeholder="Вставьте сюда большой русский текст…"></div>
     <div class="chunk-info" id="chunkInfo"></div>
     <div class="chunk-buttons" id="chunkButtons"></div>
   </div>
 
   <div class="col">
     <h2>2. Результаты проверки</h2>
-    <div class="output" id="results">Здесь появятся ошибки по каждому куску…</div>
+    <div class="pane" id="results">Здесь появятся ошибки по каждому куску…</div>
   </div>
 
   <div class="col">
     <h2>3. Текст с подсветкой</h2>
-    <div class="output" id="highlighted">Здесь будет сводный текст: красным — проблемные места, зелёным — предложенные исправления.</div>
+    <div class="pane txt" id="highlighted">Здесь будет сводный текст: красным — проблемные места, зелёным — предложенные исправления.</div>
   </div>
 </div>
 
@@ -76,8 +116,6 @@ const API = 'https://api.languagetool.org/v2/check';
 const LIMIT = 20000;
 
 /* ================== СТОП-ЛИСТ СЛОВ ================== */
-// Слова, которые LanguageTool не должен проверять и предлагать замены.
-// Регистр не важен. Можно с пробелами и дефисами.
 const STOP_WORDS = [
   'Иезавель',
   'Иезавели',
@@ -86,17 +124,14 @@ const STOP_WORDS = [
   'Ругияш',
   'Осия',
   'Потифар',
-  
+
   // добавьте свои — каждое с новой строки в кавычках и с запятой
 ];
 const STOP_SET = new Set(STOP_WORDS.map(w => w.toLowerCase().trim()));
 
 /* ================== ИГНОР-ЛИСТ ПРАВИЛ ================== */
-// ID правил LanguageTool, которые нужно полностью игнорировать.
-// Список ID можно смотреть на https://community.languagetool.org/rule/list?lang=ru
 const IGNORED_RULES = new Set([
   'Many_PNN', // Загруженность предложения местоимениями
-  // добавьте сюда другие ID, если найдёте ненужные правила
 ]);
 
 /* ================== ФИЛЬТРЫ ================== */
@@ -105,7 +140,6 @@ function isInsideStopWord(text, offset, length) {
   const target = text.substring(offset, offset + length).toLowerCase().trim();
   if (STOP_SET.has(target)) return true;
 
-  // если LT выделил часть слова — проверим границы целого слова
   const isLetter = c => /[а-яёa-z]/i.test(c);
   const before = text[offset - 1] || ' ';
   const after  = text[offset + length] || ' ';
@@ -140,11 +174,8 @@ function filterMatches(matches, text) {
       return { ...m, replacements: good };
     })
     .filter(m => {
-      // оставляем, если есть хоть одна замена
       if (m.replacements.length > 0) return true;
-      // или если это орфографическая ошибка (её стоит показать даже без замен)
       if (m.rule?.issueType === 'misspelling') return true;
-      // иначе — скрываем
       return false;
     });
 }
@@ -161,6 +192,149 @@ let chunks = [];
 let running = false;
 let paused = false;
 
+// Снимок текста и форматирования на момент разбивки
+let fullText = '';
+let fullFmt = [];   // для каждого символа: бит 1 = жирный, бит 2 = курсив
+
+/* ================== ВСТАВКА: чистим всё, кроме жирного и курсива ================== */
+function esc(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+
+const BLOCK_TAGS = new Set(['P','DIV','LI','UL','OL','TR','BLOCKQUOTE','TABLE','SECTION','ARTICLE','PRE','HR','H1','H2','H3','H4','H5','H6']);
+const SKIP_TAGS  = new Set(['SCRIPT','STYLE','HEAD','META','TITLE','LINK']);
+
+function sanitizeHtml(html) {
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const runs = [];
+  const atLineStart = () => runs.length === 0 || runs[runs.length - 1].t === '\n';
+  const endLine = () => { if (!atLineStart()) runs.push({ t: '\n' }); };
+
+  function walk(n, b, i) {
+    if (n.nodeType === 3) {
+      let s = n.nodeValue.replace(/[\s\u00a0]+/g, ' ');
+      if (atLineStart()) s = s.replace(/^ /, '');
+      if (!s) return;
+      runs.push({ t: s, b, i });
+      return;
+    }
+    if (n.nodeType !== 1) return;
+    const tag = n.tagName;
+    if (SKIP_TAGS.has(tag)) return;
+    if (tag === 'BR') { runs.push({ t: '\n' }); return; }
+
+    let nb = b, ni = i;
+    if (tag === 'B' || tag === 'STRONG' || /^H[1-6]$/.test(tag)) nb = true;
+    if (tag === 'I' || tag === 'EM' || tag === 'CITE') ni = true;
+    const st = n.style || {};
+    // inline-стиль главнее тега (Google Docs оборачивает всё в <b style="font-weight:normal">)
+    if (st.fontWeight) nb = (st.fontWeight === 'bold' || st.fontWeight === 'bolder' || parseInt(st.fontWeight) >= 600);
+    if (st.fontStyle)  ni = (st.fontStyle === 'italic' || st.fontStyle === 'oblique');
+
+    const blk = BLOCK_TAGS.has(tag);
+    if (blk) endLine();
+    n.childNodes.forEach(c => walk(c, nb, ni));
+    if (blk) endLine();
+  }
+  walk(doc.body, false, false);
+
+  // собираем строки
+  const lines = [[]];
+  for (const r of runs) {
+    if (r.t === '\n') lines.push([]); else lines[lines.length - 1].push(r);
+  }
+  while (lines.length && lines[lines.length - 1].length === 0) lines.pop();
+
+  return lines.map(line => {
+    if (!line.length) return '<div><br></div>';
+    line[line.length - 1] = { ...line[line.length - 1], t: line[line.length - 1].t.replace(/ $/, '') };
+    return '<div>' + line.map(r => {
+      let s = esc(r.t);
+      if (r.b) s = '<b>' + s + '</b>';
+      if (r.i) s = '<i>' + s + '</i>';
+      return s;
+    }).join('') + '</div>';
+  }).join('');
+}
+
+function plainToHtml(text) {
+  return text.replace(/\r/g, '').split('\n')
+    .map(l => l ? '<div>' + esc(l) + '</div>' : '<div><br></div>').join('');
+}
+
+function insertFromData(dt) {
+  const html = dt.getData('text/html');
+  const text = dt.getData('text/plain');
+  const clean = html ? sanitizeHtml(html) : plainToHtml(text);
+  document.execCommand('insertHTML', false, clean || plainToHtml(text));
+}
+
+input.addEventListener('paste', e => {
+  e.preventDefault();
+  insertFromData(e.clipboardData);
+});
+input.addEventListener('drop', e => {
+  e.preventDefault();
+  input.focus();
+  insertFromData(e.dataTransfer);
+});
+
+/* ================== Извлечение текста + форматирования из редактора ================== */
+function extractFromEditor(root) {
+  let text = '';
+  const fmt = [];
+  const styleCache = new Map();
+
+  function flagsOf(el) {
+    if (styleCache.has(el)) return styleCache.get(el);
+    const cs = getComputedStyle(el);
+    const f = (parseInt(cs.fontWeight) >= 600 ? 1 : 0) | ((cs.fontStyle === 'italic' || cs.fontStyle === 'oblique') ? 2 : 0);
+    styleCache.set(el, f);
+    return f;
+  }
+  function push(s, f) {
+    text += s;
+    for (let k = 0; k < s.length; k++) fmt.push(f);
+  }
+  const endsNL = () => text.length === 0 || text[text.length - 1] === '\n';
+
+  function walk(n) {
+    if (n.nodeType === 3) {
+      const s = n.nodeValue.replace(/\u00a0/g, ' ');
+      if (s) push(s, flagsOf(n.parentElement));
+      return;
+    }
+    if (n.nodeType !== 1) return;
+    if (n.tagName === 'BR') { push('\n', 0); return; }
+    const blk = BLOCK_TAGS.has(n.tagName);
+    if (blk && !endsNL()) push('\n', 0);
+    n.childNodes.forEach(walk);
+    if (blk && !endsNL()) push('\n', 0);
+  }
+  root.childNodes.forEach(walk);
+
+  // убираем хвостовые переводы строк
+  while (text.endsWith('\n')) { text = text.slice(0, -1); fmt.pop(); }
+  return { text, fmt };
+}
+
+/* Текст [from,to) из снимка, с жирным/курсивом, в HTML */
+function fmtSpan(from, to) {
+  let out = '';
+  let i = from;
+  while (i < to) {
+    const f = fullFmt[i];
+    let j = i + 1;
+    while (j < to && fullFmt[j] === f) j++;
+    let s = esc(fullText.substring(i, j));
+    if (f & 1) s = '<b>' + s + '</b>';
+    if (f & 2) s = '<i>' + s + '</i>';
+    out += s;
+    i = j;
+  }
+  return out;
+}
+
 /* ================== СИНХРОННАЯ ПРОКРУТКА ================== */
 const scrollables = [input, results, highlighted];
 let syncing = false;
@@ -180,12 +354,11 @@ function syncScroll(source) {
 scrollables.forEach(el => {
   el.addEventListener('scroll', () => syncScroll(el), { passive: true });
 });
-/* =========================================================== */
 
 /* ---------- Разбивка на куски ≤ LIMIT по абзацам ---------- */
 function splitText(text, limit) {
   const parts = [];
-  const paragraphs = text.split(/(\n\s*\n)/);
+  const paragraphs = text.split(/(\n)/);
   let buf = '';
   let cursor = 0;
   let bufStart = 0;
@@ -237,10 +410,14 @@ function hardSplit(s, limit) {
 }
 
 document.getElementById('btnSplit').onclick = () => {
-  const text = input.value;
-  if (!text.trim()) { alert('Введите текст'); return; }
-  chunks = splitText(text, LIMIT);
-  chunkInfo.textContent = `Всего знаков: ${text.length}. Кусков: ${chunks.length} (по ≤ ${LIMIT}).`;
+  const ex = extractFromEditor(input);
+  if (!ex.text.trim()) { alert('Введите текст'); return; }
+  fullText = ex.text;
+  fullFmt = ex.fmt;
+
+  chunks = splitText(fullText, LIMIT);
+  chunks.forEach(ch => { ch.text = fullText.substring(ch.start, ch.end); }); // гарантия совпадения смещений
+  chunkInfo.textContent = `Всего знаков: ${fullText.length}. Кусков: ${chunks.length} (по ≤ ${LIMIT}).`;
 
   chunkButtons.innerHTML = '';
   chunks.forEach((ch, i) => {
@@ -253,7 +430,7 @@ document.getElementById('btnSplit').onclick = () => {
 
   document.getElementById('btnRunAll').disabled = false;
   results.textContent = '';
-  highlighted.textContent = 'Нажмите «Проверить все куски» или отдельный кусок.';
+  renderHighlighted();
   status.textContent = '';
 };
 
@@ -280,7 +457,6 @@ async function checkChunk(text) {
     throw new Error('HTTP ' + res.status + hint + (detail ? ' | ' + detail : ''));
   }
   const data = await res.json();
-  // Пропускаем через стоп-лист, игнор правил и фильтр нелепых замен
   return filterMatches(data.matches || [], text);
 }
 
@@ -350,40 +526,43 @@ function renderChunkError(idx, msg) {
   results.scrollTop = results.scrollHeight;
 }
 
-/* ---------- Подсветка в 3-й колонке ---------- */
+/* ---------- Подсветка в 3-й колонке (с сохранением жирного/курсива) ---------- */
 function renderHighlighted() {
+  const keepScroll = highlighted.scrollTop;
   let html = '';
   chunks.forEach((ch, idx) => {
     html += `<div class="block"><div class="block-title">Кусок ${idx+1}</div>`;
     if (ch.error) {
-      html += `<div class="issue">❌ ${escapeHtml(ch.error)}</div>` + escapeHtml(ch.text);
+      html += `<div class="issue">❌ ${escapeHtml(ch.error)}</div>` + fmtSpan(ch.start, ch.end);
     } else if (!ch.done) {
-      html += escapeHtml(ch.text);
+      html += fmtSpan(ch.start, ch.end);
     } else {
       html += highlightChunk(ch);
     }
     html += `</div>`;
   });
   highlighted.innerHTML = html;
+  highlighted.scrollTop = keepScroll;
 }
 
 function highlightChunk(ch) {
   const text = ch.text;
+  const g = ch.start;
   const matches = [...ch.matches].sort((a,b) => a.offset - b.offset);
   let out = '';
   let pos = 0;
   for (const m of matches) {
     if (m.offset < pos) continue;
-    out += escapeHtml(text.substring(pos, m.offset));
+    out += fmtSpan(g + pos, g + m.offset);
     const orig = text.substring(m.offset, m.offset + m.length);
     const sugg = m.replacements.length ? m.replacements[0].value : '';
-    out += `<span class="err" title="${escapeAttr(m.message)}${sugg ? ' → ' + escapeAttr(sugg) : ''}">${escapeHtml(orig)}</span>`;
+    out += `<span class="err" title="${escapeAttr(m.message)}${sugg ? ' → ' + escapeAttr(sugg) : ''}">${fmtSpan(g + m.offset, g + m.offset + m.length)}</span>`;
     if (sugg && sugg !== orig) {
       out += ` <span class="fix">[→ ${escapeHtml(sugg)}]</span> `;
     }
     pos = m.offset + m.length;
   }
-  out += escapeHtml(text.substring(pos));
+  out += fmtSpan(g + pos, g + text.length);
   return out;
 }
 
@@ -424,8 +603,9 @@ document.getElementById('btnPause').onclick = () => { paused = true; };
 
 document.getElementById('btnReset').onclick = () => {
   chunks = [];
+  fullText = ''; fullFmt = [];
   running = false; paused = false;
-  input.value = '';
+  input.innerHTML = '';
   results.textContent = '';
   highlighted.textContent = '';
   chunkButtons.innerHTML = '';
@@ -436,12 +616,8 @@ document.getElementById('btnReset').onclick = () => {
 };
 
 function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
-function escapeHtml(s) {
-  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-}
-function escapeAttr(s) {
-  return escapeHtml(s).replace(/"/g,'&quot;');
-}
+function escapeHtml(s) { return esc(s); }
+function escapeAttr(s) { return esc(s).replace(/"/g,'&quot;'); }
 </script>
 </body>
 </html>