mod: в CodeMirror добавлена поддержка json

frontend-assembly/CODEMIRROR_INTEGRATION_GUIDE.md

@@ -2,274 +2,151 @@
 
 ## Обзор
 
-CodeMirror 6 — это мощный редактор кода/текста для использования в Django Admin. 
+Это руководство описывает, как использовать и обновлять сборку CodeMirror 6, которая используется для редактирования текстовых полей в админке Django.
-Используется для редактирования HTML, JavaScript, CSS и других текстовых полей со синтаксис-хайлайтингом.
 
 ## Структура проекта
 
-```
+- `frontend-assembly/`: Исходные файлы и скрипты для сборки.
-frontend-assembly/
+  - `package.json`: Список зависимостей CodeMirror 6.
-├── package.json              # Зависимости CodeMirror 6 (обновляй версии здесь!)
+  - `package-lock.json`: Файл с зафиксированными версиями зависимостей. **Не редактировать вручную!**
-├── package-lock.json         # Заблокированные версии (обновляется через npm install)
+  - `build-codemirror6.sh`: Скрипт, который генерирует и собирает финальный JS-бандл.
-├── build-codemirror6.sh      # Скрипт сборки (создает минифицированный бандл)
+- `public/static/codemirror/`: Каталог с готовыми файлами для Django.
-└── README.md
+  - `editor.js`: Финальный, минифицированный JS-бандл. **Не редактировать вручную!**
+  - `codemirror-styles.css`: Кастомные стили для интеграции с админкой.
+  - `codemirror-patch.js`: JS-патч для управления размерами редактора.
 
-public/static/codemirror/
+## Как собрать бандл
-├── editor.js                 # Готовый минифицированный бандл (427 KB, GZIP ~130 KB)
-└── README.md
-```
 
-## Версии пакетов (обновлены 11 июня 2026)
+После клонирования репозитория или обновления зависимостей, выполните:
-
-```json
-{
-  "@babel/runtime": "7.29.7",
-  "@codemirror/autocomplete": "6.20.3",
-  "@codemirror/commands": "6.10.3",
-  "@codemirror/lang-css": "6.3.1",
-  "@codemirror/lang-html": "6.4.11",
-  "@codemirror/lang-javascript": "6.2.5",
-  "@codemirror/language": "6.12.3",
-  "@codemirror/state": "6.6.0",
-  "@codemirror/view": "6.43.1",
-  "@uiw/codemirror-theme-solarized": "4.25.10",
-  "esbuild": "0.28.0"
-}
-```
-
-### Что обновилось
-- `@babel/runtime` 7.29.2 → 7.29.7
-- `@codemirror/autocomplete` 6.20.1 → 6.20.3
-- `@codemirror/view` 6.41.0 → 6.43.1
-- `@uiw/codemirror-theme-solarized` 4.25.9 → 4.25.10
-
-## О package-lock.json
-
-**НИКОГДА не удаляй `package-lock.json` из репозитория!**
-
-### Почему package-lock.json важен
-
-1. **Воспроизводимость** - гарантирует одинаковые версии пакетов на всех машинах
-2. **Скрипт сборки использует `npm ci`** - это команда для CI/CD, работает с package-lock.json
-3. **Безопасность** - lockfile содержит хеши пакетов, которые проверяются при установке
-
-### Правильный workflow обновления
 
 ```bash
-# 1. Обновляешь версии в package.json
+# Перейдите в каталог сборки
-# 2. Удаляешь node_modules (опционально, можешь оставить)
+cd frontend-assembly
-# 3. Запускаешь:
-npm install
 
-# 4. npm автоматически обновит package-lock.json
+# Установите зависимости и соберите бандл
-# 5. Коммитишь обновленные package.json и package-lock.json в гит
+bash ./build-codemirror6.sh
 ```
 
-## Как собрать CodeMirror
+## Как использовать в Django Admin
 
-### Один раз (после обновления версий пакетов)
+### 1. Подключение в ModelAdmin
 
-```bash
+В вашем `admin.py` используйте `Media` класс для подключения необходимых файлов.
-# Обновляешь версии в frontend-assembly/package.json
-# Затем запускаешь сборку:
-bash ./frontend-assembly/build-codemirror6.sh
-```
-
-### Что делает скрипт
-
-1. Создает временную рабочую папку
-2. Копирует `package.json` и `package-lock.json` туда
-3. Генерирует файл `src/editor.js` с интеграцией CodeMirror 6
-4. Запускает `npm ci` для установки точно таких же версий
-5. Запускает `npm run build` для минификации через esbuild
-6. Копирует результат в `public/static/codemirror/editor.js`
-7. Удаляет временные файлы и папки
-
-### Размеры
-- Минифицированный бандл: **427 KB** (js файл)
-- После GZIP: ~**130 KB** (в половине случаев браузер будет получать сжатый файл)
-
-## Как использовать CodeMirror в Django Admin
-
-### 1. Подключи скрипт в template админки
-
-Добавь в `lpon_site/templates/admin/base_site.html` (или создай этот файл):
-
-```html
-{% extends "admin/base_site.html" %}
-
-{% block extrahead %}
-  {{ block.super }}
-  <link rel="stylesheet" href="{% static 'codemirror/editor.css' %}">
-  <script type="module" src="{% static 'codemirror/editor.js' %}"></script>
-  <style>
-    /* Стили для обертки CodeMirror */
-    .cm6-editor-wrapper {
-      height: 400px;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      margin-bottom: 20px;
-      font-size: 14px;
-    }
-    
-    .cm-editor {
-      height: 100% !important;
-      font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
-    }
-  </style>
-{% endblock %}
-```
-
-### 2. Используй в ModelForm
-
-В `frontend/admin.py` для текстовых полей используй виджет с `data-codemirror-editor`:
 
 ```python
-from django import forms
+# frontend/admin.py
 
-class ArticleForm(forms.ModelForm):
+class YourModelAdmin(admin.ModelAdmin):
-    """Форма для статей с CodeMirror"""
+    class Media:
-    
+        css = {
-    class Meta:
+            'all': ('codemirror/codemirror-styles.css',)
-        model = TbArticle
-        fields = '__all__'
-        widgets = {
-            's_article_teaser_html': forms.Textarea(attrs={
-                'data-codemirror-editor': 'true',
-                'data-language': 'html',
-                'class': 'vLargeTextField',
-            }),
-            's_article_content_html': forms.Textarea(attrs={
-                'data-codemirror-editor': 'true',
-                'data-language': 'html',
-                'class': 'vLargeTextField',
-            }),
         }
+        js = (
+            'codemirror/editor.js',
+            'codemirror/codemirror-patch.js',
+        )
+```
 
-class ArticleAdmin(admin.ModelAdmin):
+### 2. Активация для полей
-    form = ArticleForm
+
-    # ... остальная конфигурация
+Чтобы превратить стандартный `Textarea` в редактор CodeMirror, используйте кастомную форму или метод `formfield_for_dbfield` и добавьте к виджету специальные `data-` атрибуты.
+
+```python
+# frontend/admin.py
+
+class YourModelAdmin(admin.ModelAdmin):
+    def formfield_for_dbfield(self, db_field, request, **kwargs):
+        formfield = super().formfield_for_dbfield(db_field, request, **kwargs)
+        
+        # Активируем CodeMirror для всех текстовых полей
+        if isinstance(formfield.widget, forms.Textarea):
+            formfield.widget.attrs['data-codemirror-editor'] = 'true'
+
+            # Устанавливаем язык в зависимости от имени поля
+            if 'j_' in db_field.name:
+                # Обычно в моделях LPON поля с префиксом 'j_' содержат JSON
+                formfield.widget.attrs['data-language'] = 'json'
+            elif 'html' in db_field.name:
+                formfield.widget.attrs['data-language'] = 'html'
+            else:
+                formfield.widget.attrs['data-language'] = 'text' # Обычный текст
+
+            # Добавляем утилитарные CSS-классы для стилизации
+            if db_field.name == 'i_img_sort':
+                formfield.widget.attrs['class'] = 'codemirror-width-s codemirror-no-lines'
+            elif db_field.name == 'j_seller_metadata':
+                formfield.widget.attrs['class'] = 'codemirror-width-xl codemirror-min-height-m'
+
+        return formfield
 ```
 
 ### 3. Поддерживаемые языки
 
-CodeMirror автоматически определяет язык по атрибуту `data-language`:
+- `javascript`
+- `css`
+- `json`
+- `html` (по умолчанию, в него встроенны режимы подсветки синтенза HTML, XML, CSS и JavaScript)
+- `text` (обычный текст, без подсветки синтакса, unocode-режим)
 
-- `html` (по умолчанию) - HTML/Vue/Svelte шаблоны
+## Кастомизация
-- `javascript` - JavaScript/TypeScript код
-- `css` - CSS стили
 
-Пример:
+### Управление размерами и стилями
-```html
-<textarea data-codemirror-editor data-language="javascript">
-let x = 42;
-console.log(x);
-</textarea>
-```
 
-## Фишки CodeMirror 6
+В файле `public/static/codemirror/codemirror-styles.css` определены утилитарные CSS-классы для управления внешним
+видом редакторов:
 
-### Подсветка синтаксиса
+- **Ширина**: `.codemirror-width-s`, `.codemirror-width-m`, `.codemirror-width-l`, `.codemirror-width-xl`
-- HTML / CSS / JavaScript с красивой подсветкой
+- **Минимальная высота**: `.codemirror-min-height-5` и `.codemirror-min-height-10` (по 5 и 10 строк соответственно)
-- Тема Solarized (dark/light) автоматически определяется по теме админки
+- **Отключение номеров строк**: `.codemirror-no-lines`
 
-### Возможности
+Просто примените нужный класс к атрибуту `class` виджета в `admin.py`. По аналогии можно создавать свои классы
-- :leftwards_arrow_with_hook: Undo/Redo
+для своих настройек.
-- :mag: Find and Replace (Ctrl+H / Cmd+Ctrl+H)
-- :keyboard: Автодополнение (Ctrl+Space)
-- :arrow_right: Автоотступы
-- :straight_ruler: Нумерация строк
-- :paperclip: Перенос слов на новую строку
 
-### Синхронизация
+## Как добавить новый язык (например, jinja2 или xml)
-Все изменения в CodeMirror:
-1. Живо синхронизируются в скрытое текстовое поле
-2. При сохранении формы отправляются на сервер
 
-## Проверка работы
+1.  **Добавить зависимость**: Откройте `frontend-assembly/package.json` и добавьте в `devDependencies` новый языковой пакет. Версию выбирайте близкую к другим пакетам `@codemirror/lang-*`.
 
-1. Откройся на http://localhost:8000/admin/
+    ```json
-2. Перейди в раздел "Статьи" (или другой с HTML полями)
+    // package.json
-3. Создай или отредактируй статью
+    ...
-4. В полях с HTML кодом должен появиться CodeMirror с подсветкой синтаксиса
+    "@codemirror/lang-json": "6.0.1",
+    "@codemirror/lang-xml": "6.1.0", // <-- Новая строка для добавления xml
+    "@codemirror/language": "6.12.3",
+    ...
+    ```
 
-Вместо обычного текстового поля должен быть редактор с:
+2.  **Обновить скрипт сборки**: Откройте `frontend-assembly/build-codemirror6.sh` и внесите два изменения в секцию `cat > "$WORK_DIR/src/editor.js" <<'EOF'`:
-- Нумерацией строк слева
+    -   Добавьте импорт:
-- Подсветкой синтаксиса (теги, атрибуты, значения...)
+        ```javascript
-- Темой Solarized (light или dark)
+        import { xml } from '@codemirror/lang-xml';
+        ```
+    -   Добавьте условие для его использования:
+        ```javascript
+        } else if (language === 'xml') {
+          extensions.unshift(xml());
+        }
+        ```
 
-## Обновление CodeMirror в будущем
+3.  **Пересобрать бандл**:
+    ```bash
+    cd frontend-assembly
+    npm install  # Установит новый пакет и обновит package-lock.json
+    bash build-codemirror6.sh # Пересоберет editor.js с поддержкой XML
+    ```
 
-Когда выйдут новые версии пакетов:
+4.  **Использовать в админке**: Теперь вы можете использовать `data-language="xml"` для любого поля.
 
-```bash
+## Обновление зависимостей
-# 1. Проверь обновления
-cd frontend-assembly
-npm outdated
-
-# 2. При необходимости обнови версии в package.json вручную
-# Или используй npm update (осторожнее, может нарушить совместимость)
-
-# 3. Пересоздай package-lock.json
-rm package-lock.json
-npm install
-
-# 4. Собери новый бандл
-bash build-codemirror6.sh
-
-# 5. Коммит обновов (если через гит)
-git add package.json package-lock.json ../public/static/codemirror/editor.js
-git commit -m "Update CodeMirror 6 and dependencies"
-```
-
-## Возможные ошибки и решения
-
-### Ошибка: "npm: command not found"
-```bash
-# Установи Node.js
-brew install node
-```
-
-### Ошибка: "не найден package-lock.json"
-```bash
-# Пересоздай его
-cd frontend-assembly
-npm install
-bash build-codemirror6.sh
-```
-
-### CodeMirror не появляется в админке
-1. Проверь, что `public/static/codemirror/editor.js` существует
-2. Проверь, что `static/` папка будет скопирована при deploy
-3. Запусти `python manage.py collectstatic` если используешь Django collectstatic
-
-### Медленная загрузка админки
-CodeMirror бандл ~427 KB - это нормально. Он:
-- :white_check_mark: кэшируется браузером
-- :white_check_mark: отправляется в GZIP (~130 KB)
-- :white_check_mark: загружается асинхронно
-
-Если всё еще медленно, можно:
-1. Использовать CDN (например, jsDelivr)
-2. Лениво загружать CodeMirror только на нужных страницах
-
-## Файлы конфигурации
-
-### frontend-assembly/package.json
-Главный файл для управления версиями. Обновляй здесь версии пакетов.
-
-### frontend-assembly/package-lock.json
-**Не трогай вручную!** Обновляется автоматически через `npm install`.
-
-### frontend-assembly/build-codemirror6.sh
-Скрипт сборки. Не требует изменений если только не нужна другая сборка.
-
-### public/static/codemirror/
-**Не редактируй вручную!** Пересоздается каждый раз при запуске `build-codemirror6.sh`.
-
-## Дополнительное чтение
-
-- [CodeMirror 6 документация](https://codemirror.net/docs/guide/)
-- [Доступные расширения](https://codemirror.net/docs/ref/)
-- [Solarized тема](https://github.com/uiwjs/codemirror-theme-solarized)
 
+1.  **Проверить устаревшие пакеты**:
+    ```bash
+    cd frontend-assembly
+    npm outdated
+    ```
+2.  **Обновить версии**: Аккуратно обновите номера версий в `package.json`.
+3.  **Установить обновления и пересобрать**:
+    ```bash
+    npm install
+    bash build-codemirror6.sh
+    ```
+4.  **Закоммитить изменения**: Добавьте в коммит обновленные `package.json`, `package-lock.json` и `public/static/codemirror/editor.js`.

frontend-assembly/build-codemirror6.sh

@@ -50,6 +50,7 @@ import { EditorView } from '@codemirror/view';
 import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { html } from '@codemirror/lang-html';
 import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
 import { css } from '@codemirror/lang-css';
 import { solarizedDark, solarizedLight } from '@uiw/codemirror-theme-solarized';
 import { lineNumbers } from '@codemirror/view';
@@ -103,6 +104,8 @@ function initCodeMirrorEditors() {
       extensions.unshift(javascript());
     } else if (language === 'css') {
       extensions.unshift(css());
+    } else if (language === 'json') {
+      extensions.unshift(json());
     } else {
       extensions.unshift(html());
     }
@@ -150,4 +153,4 @@ log 'Собираю CodeMirror 6'
 export CM6_OUTPUT_DIR="$OUTPUT_DIR"
 npm run build
 
-log 'ГОТОВО'
+log 'ГОТОВО'

frontend-assembly/package-lock.json

@@ -14,6 +14,7 @@
         "@codemirror/lang-css": "6.3.1",
         "@codemirror/lang-html": "6.4.11",
         "@codemirror/lang-javascript": "6.2.5",
+        "@codemirror/lang-json": "6.0.1",
         "@codemirror/language": "6.12.3",
         "@codemirror/state": "6.6.0",
         "@codemirror/view": "6.43.1",
@@ -97,6 +98,17 @@
         "@lezer/javascript": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-json": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
+      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@lezer/json": "^1.0.0"
+      }
+    },
     "node_modules/@codemirror/language": {
       "version": "6.12.3",
       "dev": true,
@@ -624,6 +636,18 @@
         "@lezer/lr": "^1.3.0"
       }
     },
+    "node_modules/@lezer/json": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@lezer/lr": {
       "version": "1.4.8",
       "dev": true,

frontend-assembly/package.json

@@ -14,10 +14,11 @@
     "@codemirror/lang-css": "6.3.1",
     "@codemirror/lang-html": "6.4.11",
     "@codemirror/lang-javascript": "6.2.5",
+    "@codemirror/lang-json": "6.0.1",
     "@codemirror/language": "6.12.3",
     "@codemirror/state": "6.6.0",
     "@codemirror/view": "6.43.1",
     "@uiw/codemirror-theme-solarized": "4.25.10",
     "esbuild": "0.28.0"
   }
-}
+}

public/static/codemirror/codemirror-styles.css

@@ -60,6 +60,9 @@
 .codemirror-min-height-5 .cm-editor {
     min-height: 8em; /* 5 строк */
 }
+.codemirror-min-height-10 .cm-editor {
+    min-height: 16em; /* 10 строк */
+}
 
 .codemirror-no-lines .cm-gutters {
   /* Скрываем  нумерацию строк */