update

package.json

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

src/components/EmojiPicker.js

 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { Icon } from '../icons'
+import Tip from './Tip'
 
 const emojiSource = require('emojibase-data/en/data.json')
 

src/components/Tip.js

+import React from 'react'
+import { Tooltip } from 'antd'
+
+/**
+ * Подсказка кнопки — одна на весь редактор.
+ *
+ * ── Зачем отдельный файл ─────────────────────────────────────────────────────
+ *
+ * Кнопки живут в трёх местах: панель (ToolBar), всплывающее меню над выделением
+ * (QEditor) и кнопка эмодзи со своим компонентом (EmojiPicker). Подсказка
+ * у них была разная: на панели — своя, оформленная; в двух других — нативный
+ * `title` браузера, серый и с секундной задержкой.
+ *
+ * Держать обёртку в ToolBar значило бы, что EmojiPicker импортирует панель
+ * ради одной функции. Поэтому она здесь: у всех трёх мест общий источник,
+ * и разъехаться им нечем.
+ *
+ * ── Почему не нативный title ─────────────────────────────────────────────────
+ *
+ * У браузерной подсказки задержка около секунды, системный вид и одна строка.
+ * Именно она давала ощущение «панель из 2003 года», с которого началась вся
+ * работа над редактором. Здесь — название и строка «что я получу».
+ */
+const Tip = ({ info, placement = 'bottom', children }) => {
+    // Нет названия — нет и подсказки: пустое чёрное окошко хуже, чем ничего
+    if (!info || !info.title) {
+        return children
+    }
+
+    return (
+        <Tooltip
+            placement={placement}
+            mouseEnterDelay={0.3}
+            mouseLeaveDelay={0}
+            overlayClassName="atma-editor-tip"
+            title={
+                <span className="atma-editor-tip-body">
+                    <b className="atma-editor-tip-title">{info.title}</b>
+                    {info.hint && <span className="atma-editor-tip-hint">{info.hint}</span>}
+                </span>
+            }
+        >
+            {children}
+        </Tooltip>
+    )
+}
+
+export default Tip

src/components/ToolBar.js

 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'antd';
 import { Icon } from '../icons';
+import Tip from './Tip';
 
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -371,33 +372,6 @@ export const toolInfo = (type, item, labels = {}) => {
     }
 }
 
-/**
- * Обёртка-подсказка. Вынесена, чтобы панель и всплывающее меню показывали
- * подсказку ОДИНАКОВО: разъедься они, получилось бы две разные подсказки
- * в одном редакторе.
- */
-export const Tip = ({ info, placement = 'bottom', children }) => {
-    if (!info.title) {
-        return children
-    }
-
-    return (
-        <Tooltip
-            placement={placement}
-            mouseEnterDelay={0.3}
-            mouseLeaveDelay={0}
-            overlayClassName="atma-editor-tip"
-            title={
-                <span className="atma-editor-tip-body">
-                    <b className="atma-editor-tip-title">{info.title}</b>
-                    {info.hint && <span className="atma-editor-tip-hint">{info.hint}</span>}
-                </span>
-            }
-        >
-            {children}
-        </Tooltip>
-    )
-}
 
 /** Ширина панели, ниже которой берётся узкий набор */
 const NARROW_AT = 640
@@ -799,4 +773,5 @@ const ToolBar = ({ editor, toolsLib = [], toolsOptions, onInfo, labels = {} }) =
     )
 }
 
+export { Tip }
 export default ToolBar;

src/icons.js

 import React from 'react'
 
 /**
- * Набор иконок панели: 61 штука, один визуальный язык.
+ * Набор иконок панели: 62 штук, один визуальный язык.
+ *
+ * Уровни текста (T, H2, H3, H4) значками НЕ рисуются — см. TEXT_ICONS ниже:
+ * стопка полос была неотличима от кнопок выравнивания.
  *
  * ── Почему тут разметка, а не картинки ───────────────────────────────────────
  *
@@ -50,9 +53,6 @@ const ICONS = {
     file: '<path d="M5.5 6h13a2.5 2.5 0 0 1 2.5 2.5v7a2.5 2.5 0 0 1 -2.5 2.5h-13a2.5 2.5 0 0 1 -2.5 -2.5v-7a2.5 2.5 0 0 1 2.5 -2.5z"></path><path d="M7 9h2.5999999999999996a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2.5999999999999996a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z"></path><path d="M13.2 11h5"></path><path d="M13.2 15h3.2"></path>',
     fontSize: '<path d="M6 7.6v8.8"></path><path d="M4 9.6 6 7.6l2 2"></path><path d="M4 14.4l2 2 2-2"></path><path d="M11.5 8h8.5"></path><path d="M11.5 12h8.5"></path><path d="M11.5 16h5"></path>',
     glossary: '<path d="M7 3.4h10a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-3a2 2 0 0 1 2 -2z"></path><path d="M10.9 10.4l1.1 2.2 1.1-2.2"></path><path d="M6.6 16.4h10.8"></path><path d="M6.6 20h10.8" stroke-dasharray="1.8 2.4"></path>',
-    h2: '<path d="M5 7.2h14" stroke-width="4.6"></path><path d="M5 14.4h13" stroke-width="1.5"></path><path d="M5 19h8.5" stroke-width="1.5"></path>',
-    h3: '<path d="M5 7.2h9.8" stroke-width="3.6"></path><path d="M5 14.4h13" stroke-width="1.5"></path><path d="M5 19h8.5" stroke-width="1.5"></path>',
-    h4: '<path d="M5 7.2h6.4" stroke-width="2.6"></path><path d="M5 14.4h13" stroke-width="1.5"></path><path d="M5 19h8.5" stroke-width="1.5"></path>',
     hardBreak: '<path d="M20 6.4v5.6a2.5 2.5 0 0 1-2.5 2.5H5"></path><path d="M8.5 11 5 14.5 8.5 18"></path>',
     highlight: '<path d="M6.4 6.2h11.2" stroke-width="2.2"></path><path d="M6.6000000000000005 10.4h10.799999999999999a2.2 2.2 0 0 1 2.2 2.2v2.1999999999999993a2.2 2.2 0 0 1 -2.2 2.2h-10.799999999999999a2.2 2.2 0 0 1 -2.2 -2.2v-2.1999999999999993a2.2 2.2 0 0 1 2.2 -2.2z"></path><path d="M7.6 13.7h8.8" stroke-width="2.4"></path><path d="M6.4 20.6h8" stroke-width="2.2"></path>',
     hr: '<path d="M5 5.6h14"></path><path d="M5 9h9"></path><path d="M3.5 13h17" stroke-width="2.2"></path><path d="M5 17h14"></path><path d="M5 20.4h6"></path>',
@@ -68,7 +68,6 @@ const ICONS = {
     link: '<path d="M10.2 13.4a4.6 4.6 0 0 0 6.9.5l2.7-2.7a4.6 4.6 0 0 0-6.5-6.5l-1.6 1.6"></path><path d="M13.8 10.6a4.6 4.6 0 0 0-6.9-.5l-2.7 2.7a4.6 4.6 0 0 0 6.5 6.5l1.6-1.6"></path>',
     mergeOrSplit: '<path d="M5.5 6h13a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z"></path><path d="M12 6v3"></path><path d="M12 15v3"></path><path d="M6.6 12h10.8"></path><path d="M9.1 9.5 6.6 12l2.5 2.5"></path><path d="M14.9 9.5 17.4 12l-2.5 2.5"></path>',
     orderedList: '<path d="M4.9 6.2l.95-.7v3" stroke-width="1.1"></path><path d="M4.45 11.15a1.02 1.02 0 0 1 1.95.45c0 .75-1.95 1.35-1.95 1.95h2.1" stroke-width="1.1"></path><path d="M4.6 16.1a1 1 0 0 1 1.85.4c0 .5-.45.8-.9.8.5 0 1 .35 1 .9a1.05 1.05 0 0 1-1.95.4" stroke-width="1.1"></path><path d="M10.2 7h8.8"></path><path d="M10.2 12h8.8"></path><path d="M10.2 17h8.8"></path>',
-    paragraph: '<path d="M8.6 5.6h10.4" stroke-width="1.6"></path><path d="M5 10.2h14" stroke-width="1.6"></path><path d="M5 14.8h14" stroke-width="1.6"></path><path d="M5 19.4h8" stroke-width="1.6"></path>',
     pdf: '<path d="M5 11.4V4.8A1.8 1.8 0 0 1 6.8 3h6.4L19 8.8v2.6"></path><path d="M13.2 3v4.2a1.5 1.5 0 0 0 1.5 1.5H19"></path><path d="M4.6 14.9h14.8"></path><path d="M4.6 17.9h14.8"></path><path d="M4.6 20.9h9"></path>',
     redo: '<path d="M19.5 8.5H8.7a4.75 4.75 0 0 0 0 9.5h6.7"></path><path d="M15.6 5l3.9 3.5-3.9 3.5"></path>',
     screencust: '<path d="M5 4.5h14a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z"></path><path d="M12 16.5v3.3"></path><path d="M8.4 19.8h7.2"></path><path d="M9.3 10.5a2.7 2.7 0 1 0 5.4 0a2.7 2.7 0 1 0 -5.4 0z"></path><path d="M11 10.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0z" fill="currentColor" stroke="none"></path>',