Системный редактор

file_edit.html • /srv/myhost/app/templates/file_edit.html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Редактор файла</title>
  
  
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://unpkg.com/lucide@latest"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/xml/xml.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/css/css.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/python/python.min.js"></script>
  
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/addon/search/searchcursor.min.js"></script>

/* --- Стили умного поиска (Хайлайты текста) --- */
    .cm-search-highlight { background-color: rgba(253, 224, 71, 0.6); border-radius: 2px; }
    .dark .cm-search-highlight { background-color: rgba(161, 98, 7, 0.5); }
    .cm-search-active { background-color: #f97316; color: white !important; border-radius: 2px; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3); }
    .dark .cm-search-active { background-color: #ea580c; color: white !important; box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.3);}
  </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans min-h-screen flex flex-col transition-colors duration-200">

<header class="sticky top-0 h-16 border-b border-gray-200 dark:border-gray-700 px-4 md:px-6 flex items-center justify-between shrink-0 bg-white dark:bg-gray-800 shadow-sm z-50">
    <div class="flex items-center gap-2 sm:gap-4 overflow-hidden">
      <a href="/" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition p-2 -ml-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1 shrink-0" title="Назад">
        <i data-lucide="arrow-left" class="w-5 h-5"></i>
        <span class="text-sm font-medium hidden sm:inline">Назад</span>
      </a>
      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 hidden sm:block shrink-0"></div>
      <h1 class="font-bold text-lg flex items-center gap-2 text-gray-900 dark:text-white truncate">
        <i data-lucide="file-edit" class="w-5 h-5 text-blue-500 shrink-0"></i>
        <span class="truncate">Редактор файла</span>
      </h1>
    </div>
    
    <button type="button" onclick="toggleTheme()" class="p-2 bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full text-gray-600 dark:text-gray-300 transition shadow-sm shrink-0 ml-2">
      <i data-lucide="moon" class="w-4 h-4 hidden dark:block"></i>
      <i data-lucide="sun" class="w-4 h-4 block dark:hidden"></i>
    </button>
  </header>

<main class="flex-1 p-4 md:p-6 lg:p-8">
    <div class="max-w-6xl mx-auto space-y-6">

<section class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm overflow-hidden flex flex-col">
        
        
        <div class="p-3 sm:p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50 flex flex-col lg:flex-row lg:items-center justify-between gap-3">
          
          <div class="flex-1 min-w-0 overflow-hidden">
            <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 font-mono break-all bg-white dark:bg-gray-900 px-2.5 py-1.5 rounded border border-gray-200 dark:border-gray-700 inline-block max-w-full shadow-sm">
              <span class="font-bold text-gray-800 dark:text-gray-200 break-all">{{ file.original_name }}</span> 
              <span class="mx-1 text-gray-300 dark:text-gray-600">•</span> 
              slug: <span class="text-blue-600 dark:text-blue-400 font-bold break-all">{{ file.slug }}</span>
            </p>
          </div>

<div class="flex items-center gap-2 shrink-0 overflow-x-auto hide-scrollbar pb-1 lg:pb-0">
            
            
            <button type="button" onclick="insertTab()" class="md:hidden px-3 py-2 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 transition shadow-sm flex items-center gap-1.5 shrink-0" title="Вставить Tab">
              <i data-lucide="arrow-right-to-line" class="w-4 h-4"></i>
              <span class="text-xs font-bold">Tab</span>
            </button>

<button type="button" onclick="openSearch()" class="p-2 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 transition shadow-sm flex items-center gap-1.5 shrink-0" title="Найти в коде (Ctrl+F)">
              <i data-lucide="search" class="w-4 h-4"></i>
              <span class="text-xs font-medium hidden sm:inline">Поиск</span>
            </button>

<div class="flex items-center bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-sm overflow-hidden shrink-0">
              <button type="button" onclick="cmEditor.undo()" class="p-2 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition border-r border-gray-200 dark:border-gray-600" title="Отменить (Ctrl+Z)">
                <i data-lucide="undo" class="w-4 h-4"></i>
              </button>
              <button type="button" onclick="cmEditor.redo()" class="p-2 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition" title="Повторить (Ctrl+Y)">
                <i data-lucide="redo" class="w-4 h-4"></i>
              </button>
            </div>
            
            <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-1 shrink-0"></div>

<button type="button" onclick="copyEditorContent(this)" class="p-2 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 transition shadow-sm flex items-center gap-1.5 shrink-0" title="Копировать весь код">
              <i data-lucide="copy" class="w-4 h-4"></i>
              <span class="text-xs font-medium hidden sm:inline">Копировать</span>
            </button>
            <button type="button" onclick="pasteEditorContent(this)" class="p-2 text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-md border border-gray-200 dark:border-gray-600 transition shadow-sm flex items-center gap-1.5 shrink-0" title="Заменить на код из буфера">
              <i data-lucide="clipboard-paste" class="w-4 h-4"></i>
              <span class="text-xs font-medium hidden sm:inline">Вставить</span>
            </button>
          </div>
        </div>

<textarea name="content" id="code-editor">{{ content }}</textarea>
          </div>
          
          <div class="p-4 bg-gray-50/80 dark:bg-gray-800 flex flex-col sm:flex-row gap-3 justify-end items-center">
            <button type="submit" class="w-full sm:w-auto px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium transition flex items-center justify-center gap-2 shadow-sm">
              <i data-lucide="save" class="w-4 h-4"></i> Сохранить
            </button>
          </div>
        </form>
      </section>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        
        <section class="lg:col-span-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-5 h-fit">
          <h2 class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
            <i data-lucide="archive" class="w-4 h-4 text-gray-500 dark:text-gray-400"></i> Ручной бэкап
          </h2>
          <form method="post" action="/files/create-backup/{{ file.id }}" class="flex flex-col gap-3">
            <input type="text" name="label" placeholder="Название версии (напр. pre-update)" required class="w-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none transition">
            <button type="submit" class="w-full px-4 py-2 bg-gray-800 dark:bg-gray-700 hover:bg-gray-900 dark:hover:bg-gray-600 text-white rounded-md text-sm font-medium transition flex items-center justify-center gap-2 shadow-sm">
              <i data-lucide="plus" class="w-4 h-4"></i> Сохранить версию
            </button>
          </form>
        </section>

<section class="lg:col-span-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm flex flex-col h-fit">
          <div class="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50/50 dark:bg-gray-800/50">
            <h2 class="text-sm font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2">
              <i data-lucide="history" class="w-4 h-4 text-gray-500 dark:text-gray-400"></i> Прошлые версии
            </h2>
          </div>
          
          <div class="p-0">
            {% if backups %}
              <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
                {% for b in backups %}
                <div class="p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition flex flex-col sm:flex-row sm:items-start justify-between gap-4 w-full">
                  
                  <div class="flex-1 min-w-0 w-full">
                    <div class="font-mono text-sm font-medium text-gray-800 dark:text-gray-200 flex items-start gap-2 w-full">
                      <i data-lucide="file-text" class="w-4 h-4 text-blue-500 shrink-0 mt-0.5"></i> 
                      <span class="break-all whitespace-normal leading-snug">{{ b.name }}</span>
                    </div>
                    <div class="text-[11px] text-gray-500 dark:text-gray-400 mt-2 flex flex-wrap items-center gap-2">
                      <span class="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded border border-gray-200 dark:border-gray-700"><i data-lucide="hard-drive" class="w-3 h-3"></i>{{ b.size_h }}</span>
                      <span class="flex items-center gap-1"><i data-lucide="clock" class="w-3 h-3"></i>{{ b.mtime }}</span>
                    </div>
                  </div>
                  
                  <div class="flex items-center gap-2 shrink-0 sm:pt-1">
                    <form method="post" action="/files/restore/{{ file.id }}">
                      <input type="hidden" name="backup_name" value="{{ b.name }}">
                      <button type="submit" class="px-3 py-1.5 bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/40 rounded-md text-xs font-medium transition flex items-center gap-1 border border-green-200 dark:border-green-800/50" title="Заменить текущий конфиг этим">
                        <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i> Восстановить
                      </button>
                    </form>
                    <form method="post" action="/files/delete-backup/{{ file.id }}" onsubmit="return confirm('Удалить этот бэкап навсегда?')">
                      <input type="hidden" name="backup_name" value="{{ b.name }}">
                      <button type="submit" class="p-1.5 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-md transition border border-red-200 dark:border-red-800/50" title="Удалить">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                      </button>
                    </form>
                  </div>

</div>
                {% endfor %}
              </div>
            {% else %}
              <div class="p-10 text-center flex flex-col items-center justify-center">
                <div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-3">
                  <i data-lucide="history" class="w-6 h-6 text-gray-400 dark:text-gray-500"></i>
                </div>
                <p class="text-sm font-medium text-gray-800 dark:text-gray-200">Бэкапов пока нет</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Создайте версию перед внесением изменений</p>
              </div>
            {% endif %}
          </div>
        </section>

</div>
      
    </div>
  </main>

// === ИНИЦИАЛИЗАЦИЯ CODEMIRROR (ПРОДВИНУТЫЙ РЕДАКТОР) ===
    let editorMode = "text/plain";
    const filePath = "{{ file.original_name }}".toLowerCase();
    
    if (filePath.endsWith(".html") || filePath.endsWith(".htm")) editorMode = "htmlmixed";
    else if (filePath.endsWith(".css")) editorMode = "css";
    else if (filePath.endsWith(".js") || filePath.endsWith(".json")) editorMode = "javascript";
    else if (filePath.endsWith(".py")) editorMode = "python";
    else if (filePath.endsWith(".xml")) editorMode = "xml";

const isDarkTheme = document.documentElement.classList.contains('dark');

document.getElementById('file-form').addEventListener('submit', function() {
        cmEditor.save();
    });

// Переопределяем стандартный поиск на наш кастомный
    cmEditor.commands.findPersistent = function(cm) { openSearch(); };
    cmEditor.commands.find = function(cm) { openSearch(); };

// === ЛОГИКА УМНОГО ПОИСКА ===
    let searchMarks = [];
    let activeSearchMark = null;
    let searchMatches = [];
    let currentMatchIndex = -1;

const searchPanel = document.getElementById('custom-search-panel');
    const searchInput = document.getElementById('search-input');
    const searchCounter = document.getElementById('search-counter');

function openSearch() {
      searchPanel.classList.remove('hidden');
      
      const selection = cmEditor.getSelection();
      if (selection && !selection.includes('\n')) {
          searchInput.value = selection;
      }
      
      searchInput.focus();
      searchInput.select();
      executeSearch(searchInput.value);
    }

function closeSearch() {
      searchPanel.classList.add('hidden');
      clearSearch();
      cmEditor.focus();
    }

function clearSearch() {
      searchMarks.forEach(m => m.clear());
      if (activeSearchMark) activeSearchMark.clear();
      searchMarks = [];
      searchMatches = [];
      currentMatchIndex = -1;
      searchCounter.textContent = "0/0";
    }

function executeSearch(query) {
      clearSearch();
      if (!query) return;

if (searchMatches.length > 0) {
          focusMatch(0);
      } else {
          searchCounter.textContent = "0/0";
      }
    }

function focusMatch(index) {
      if (searchMatches.length === 0) return;
      if (activeSearchMark) activeSearchMark.clear();

currentMatchIndex = index;
      const match = searchMatches[currentMatchIndex];
      
      activeSearchMark = cmEditor.markText(match.from, match.to, { className: "cm-search-active" });
      cmEditor.scrollIntoView(match.from, 100);
      searchCounter.textContent = `${currentMatchIndex + 1}/${searchMatches.length}`;
    }

function nextMatch() {
      if (searchMatches.length === 0) return;
      focusMatch((currentMatchIndex + 1) % searchMatches.length);
    }

function prevMatch() {
      if (searchMatches.length === 0) return;
      focusMatch((currentMatchIndex - 1 + searchMatches.length) % searchMatches.length);
    }

searchInput.addEventListener('input', (e) => executeSearch(e.target.value));
    
    searchInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
          e.preventDefault();
          if (e.shiftKey) prevMatch();
          else nextMatch();
      } else if (e.key === 'Escape') {
          closeSearch();
      }
    });

cmEditor.on("keydown", function(cm, event) {
        if (event.key === "Escape" && !searchPanel.classList.contains('hidden')) {
            closeSearch();
        }
    });

// === ФУНКЦИЯ ВСТАВКИ TAB ===
    function insertTab() {
        cmEditor.replaceSelection("    ");
        cmEditor.focus();
    }

// === ПЕРЕКЛЮЧЕНИЕ ТЕМЫ ===
    function toggleTheme() {
      document.documentElement.classList.toggle('dark');
      const isDark = document.documentElement.classList.contains('dark');
      localStorage.theme = isDark ? 'dark' : 'light';
      cmEditor.setOption("theme", isDark ? "dracula" : "default");
    }

// === ФУНКЦИИ КОПИРОВАНИЯ И ВСТАВКИ ===
    function copyEditorContent(btn) {
      const text = cmEditor.getValue();
      const originalHTML = btn.innerHTML;

const showSuccess = () => {
        btn.innerHTML = `<i data-lucide="check" class="w-4 h-4 text-green-500 dark:text-green-400"></i><span class="text-xs font-medium hidden sm:inline text-green-500 dark:text-green-400">Скопировано</span>`;
        lucide.createIcons();
        setTimeout(() => {
            btn.innerHTML = originalHTML; 
            lucide.createIcons();
        }, 1500);
      };

if (!navigator.clipboard) {
        const ta = document.createElement("textarea"); 
        ta.value = text; 
        ta.style.position = "fixed"; 
        document.body.appendChild(ta); 
        ta.select(); 
        try { document.execCommand('copy'); } catch(err) {} 
        document.body.removeChild(ta); 
        showSuccess();
      } else { 
        navigator.clipboard.writeText(text).then(showSuccess); 
      }
    }

async function pasteEditorContent(btn) {
      try {
        if (!navigator.clipboard || !navigator.clipboard.readText) {
            throw new Error("Clipboard API unsupported");
        }
        const text = await navigator.clipboard.readText();
        const originalHTML = btn.innerHTML;
        
        cmEditor.operation(() => {
            const lastLine = cmEditor.lastLine();
            const lastCh = cmEditor.getLine(lastLine).length;
            cmEditor.replaceRange(text, {line: 0, ch: 0}, {line: lastLine, ch: lastCh});
        });
        
        btn.innerHTML = `<i data-lucide="check" class="w-4 h-4 text-green-500 dark:text-green-400"></i><span class="text-xs font-medium hidden sm:inline text-green-500 dark:text-green-400">Вставлено</span>`;
        lucide.createIcons();
        setTimeout(() => { 
            btn.innerHTML = originalHTML;
            lucide.createIcons(); 
        }, 1500);
      } catch (err) {
        alert("Браузер заблокировал доступ к буферу обмена. Пожалуйста, кликните мышкой в поле редактора и нажмите Ctrl+V (или Cmd+V).");
      }
    }
  </script>
</body>
</html>

Ручной бэкап

Прошлые версии

file_edit.html-20260315-130215-Stable-file_edit.html

2.05 KB 2026-03-15T10:24:44