update

package.json

 {
     "name": "react-ag-qeditor",
-    "version": "1.1.80",
+    "version": "1.1.81",
     "description": "WYSIWYG html editor",
     "author": "atma",
     "license": "MIT",

src/components/ToolBar.js

@@ -37,17 +37,41 @@ const TABLE_GROUP = {
 }
 
 /**
- * Урок: полный набор.
+ * Модуль: полный набор.
  *
- * ── Почему групп мало ────────────────────────────────────────────────────────
+ * ── Бюджет ширины: 1080 px, и это не «хорошо бы» ─────────────────────────────
  *
- * Каждая граница групп стоит 17 px (разделитель 1 + поля по 8). Раньше почти
- * каждая кнопка была своей группой — двадцать две границы, 289 px только
- * на волосяные линии, и панель не укладывалась в один ряд. Заодно двадцать две
- * линии не показывают структуру, а превращаются в частокол.
+ * 1080 — не случайное число и не ширина моего окна. Это МИНИМАЛЬНАЯ ширина
+ * поля редактора на старых экранах, под которые платформа обязана работать.
+ * Значит набор верстается под неё, а не «поместится на большом мониторе».
  *
- * Теперь границ шесть, по смыслу: правка · структура · оформление блока ·
- * вставка · оживить урок · документы и ссылки.
+ * Замер живой панели (`/tmp/measure-bar.js`, ширина поля 1078, поля 6+6):
+ *   доступно                    1066
+ *   первый ряд занимал          1057
+ *   кнопка «ⓘ» с зазором          28
+ *   ────────────────────────────────
+ *   не влезало на                 19  → «ⓘ» уезжала во второй ряд,
+ *                                        панель становилась 70 px вместо 46
+ *   подпись «Оживить модуль»     125  → её пришлось спрятать @container'ом
+ *
+ * То есть ряд не сходился ещё ДО подписи, а подпись была отключена
+ * до ширины 1200 — то есть на целевом экране её не видел никто. Это было
+ * не решение, а способ не признать, что набор шире бюджета.
+ *
+ * ── Как ряд уложен в бюджет ──────────────────────────────────────────────────
+ *
+ *   объединены «встроить» и «записи» в один список     −48
+ *   «файл» уехал к документам (он и есть документ)     −34
+ *   «встроить по коду» уехал к встраиванию             −34
+ *   убраны два разделителя вокруг обведённой группы    −30
+ *   ────────────────────────────────────────────────────────
+ *                                                     −146
+ *
+ * Разделители у обведённой группы убраны не ради пикселей: у неё СВОЯ рамка,
+ * и линия вплотную к рамке — это две границы подряд на 4 px друг от друга.
+ *
+ * Границ теперь четыре, по смыслу: правка · структура · вставка ·
+ * документы и ссылки; плюс обведённая группа «Оживить модуль».
  */
 const LESSON = [
     { type: 'g', items: ['undo', 'redo', 'clearMarks'] },
@@ -59,9 +83,7 @@ const LESSON = [
     { type: 'g', items: ['bulletList', 'orderedList'] },
     { type: 's', toggle: true, items: ['alignLeft', 'alignCenter', 'alignRight'] },
     // Особые блоки одним списком: у всех пяти общая роль — выделить кусок
-    // материала из общего потока. Врезка и скрытый разбор попали сюда, а не
-    // в «Оживить модуль», по замеру ширины: в один ряд панель укладывается
-    // до 1080 px, и две лишние видимые кнопки её ломали.
+    // материала из общего потока.
     { type: 's', toggle: false, items: ['blockquote', 'callout', 'showAnswer', 'hr', 'codeBlock'] },
     TABLE_GROUP,
     { type: 'g', items: ['emoji'] },
@@ -70,35 +92,38 @@ const LESSON = [
 
     { type: 'g', items: ['activityRef'] },
     { type: 'g', items: ['image'] },
-    { type: 's', toggle: false, items: ['video', 'iframe'] },
-    // Три записи — голос, камера, экран — под одной кнопкой. Иконки у них
-    // близкие, в ряд они читались как одно и то же; в списке у каждой подпись
-    // словами, и различить их можно с первого взгляда.
-    { type: 's', toggle: false, items: ['voicemessage', 'webcamera', 'screencust'] },
 
-    { type: 'g', items: ['|'] },
+    // ── Видео, встраивание и записи — один список ────────────────────────────
+    //
+    // Раньше это были два списка рядом: «встроить» (файл, ссылка) и «записи»
+    // (голос, камера, экран). Делить их незачем — у всех шести один вопрос
+    // автора: «как положить сюда видео или вставку». Зато два списка стоили
+    // 48 px, которых не хватало ряду.
+    //
+    // Иконки у записей близкие и в ряд читались как одно и то же; в списке
+    // у каждой подпись словами, и различить их можно с первого взгляда.
+    { type: 's', toggle: false, title: 'video',
+      items: ['video', 'iframe', 'iframe_custom', 'voicemessage', 'webcamera', 'screencust'] },
 
-    // ── «Оживить урок» ───────────────────────────────────────────────────────
+    // ── «Оживить модуль» ─────────────────────────────────────────────────────
     //
-    // Четыре кнопки: аудио, картинка с подсказками, скрытый блок,
-    // кнопка-ссылка. На боевой базе клиента (601 урок) каждая использована
+    // Пять кнопок: аудио, картинка с подсказками, самопроверка, скрытый блок,
+    // кнопка-ссылка. На боевой базе клиента (601 модуль) каждая использована
     // НОЛЬ раз, хотя все работают.
     //
     // Иконки и подсказки они уже получили — этого мало: растворённые между
     // «изображением» и «ссылкой», они не читаются как отдельная возможность.
-    // Поэтому у них своя обведённая группа с подписью. Мера бесплатная
-    // и делает необязательными дорогие — разовую подсветку новинки
-    // и карточки-примеры в пустом уроке.
+    // Поэтому у них своя обведённая группа С ПОДПИСЬЮ — и подпись обязана быть
+    // видна на 1080, иначе от неё нет никакого толка.
     { type: 'g', label: 'Оживить модуль',
       items: ['audio', 'interactiveImage', 'selfCheck', 'insertToggleBlock', 'buttonLink'] },
 
-    { type: 'g', items: ['|'] },
-
-    // Все четыре «пдф-кнопки» в одном списке — это и была главная путаница
-    // старой панели: четыре разные вещи со словом «pdf» в подписи. Рядом,
-    // с человеческими названиями, они наконец различимы.
-    { type: 's', toggle: false, items: ['iframe_pptx', 'iframe_pdf', 'pdf', 'export_pdf'] },
-    { type: 'g', items: ['link', 'file', 'iframe_custom'] },
+    // Документы одним списком — это и была главная путаница старой панели:
+    // четыре разные вещи со словом «pdf» в подписи. Рядом, с человеческими
+    // названиями, они наконец различимы. «Файл на скачивание» сюда же:
+    // вложение — такой же документ, а не сосед ссылки.
+    { type: 's', toggle: false, items: ['iframe_pptx', 'iframe_pdf', 'pdf', 'export_pdf', 'file'] },
+    { type: 'g', items: ['link'] },
 ]
 
 /**

src/index.scss

@@ -301,23 +301,23 @@ body{
                 margin: 0 4px;
             }
 
+            // Подпись видна ВСЕГДА, в том числе на 1080 — целевой ширине поля
+            // редактора на старых экранах.
+            //
+            // Здесь стояло `display: none` с показом от @container 1200px.
+            // Это значило, что на экране, под который панель и делается,
+            // подписи не видел никто, а вся затея с обведённой группой
+            // теряла смысл. Место под подпись найдено в самом наборе кнопок
+            // (см. LESSON в ToolBar.js), а не отложено до большого монитора.
             &-label{
-                display: none;
+                display: inline;
                 font-size: 10px;
                 font-weight: 600;
                 letter-spacing: 0.06em;
                 text-transform: uppercase;
                 color: #6B7280;
                 white-space: nowrap;
-                padding: 0 8px 0 6px;
-
-                // Подпись занимает 96 px и появляется только там, где панель
-                // и без неё укладывается в один ряд. Браузер без поддержки
-                // @container подпись просто не покажет — деградация мягкая,
-                // группу всё равно видно по рамке.
-                @container (min-width: 1200px){
-                    display: inline;
-                }
+                padding: 0 6px 0 4px;
             }
 
             .qseparator{