@escapenavigator/utils 1.10.131 → 1.10.132

package/dist/quill-clipboard-matchers.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Paste-time matchers для ReactQuill (`modules.clipboard.matchers`).
+ *
+ * Вынесено в общий пакет, чтобы admin и app использовали один и тот же набор
+ * matcher-ов без дублирования. Делает две вещи на входе из буфера обмена:
+ *
+ * 1) Снимает inline-цвета и фоны (`color: false` / `background: false` через
+ *    compose Delta). Это лечит вставку из Word/Google Docs, которая по
+ *    умолчанию приходит с собственной палитрой и часто не читается на наших
+ *    темах (особенно тёмной теме ордеров и контрастных формах админки).
+ *
+ * 2) Заменяет неразрывные пробелы (`\u00A0`) на обычные прямо в Delta до
+ *    того, как Quill сохранит ноду. Без этого ` ` остаётся в HTML и
+ *    ломает word-wrap длинных заголовков и абзацев на странице рендера
+ *    (см. также `sanitizeQuillHtml` на стороне рендеринга — оно ловит то же
+ *    самое, но уже на исторических данных, которые попали в БД до того,
+ *    как paste-matcher появился).
+ *
+ * ELEMENT_NODE matcher срабатывает на всех элементах (страховой случай),
+ * SPAN/FONT — прицельно (Word любит оборачивать раскраску в `<span style="…">`
+ * и `<font color="…">`), TEXT_NODE — для нормализации пробелов в тексте.
+ */
+import Delta from 'quill-delta';
+export type ClipboardMatcher = [number | string, (node: Node, delta: Delta) => Delta];
+/**
+ * Полный набор matcher-ов: и color-strip, и nbsp-normalize. Подключается там,
+ * где редактор не должен принимать цветную раскраску из буфера (waiver, AGB,
+ * локации, контентные модалки).
+ */
+export declare function getStripColorClipboardMatchers(): ClipboardMatcher[];
+/**
+ * Только нормализация пробельных сущностей. Подключается там, где цветную
+ * раскраску в буфере мы готовы пустить дальше (rich email-редактор админа),
+ * но nbsp всё равно надо чистить, чтобы не ломать word-wrap.
+ */
+export declare function getNormalizeWhitespaceClipboardMatchers(): ClipboardMatcher[];
+/**
+ * Готовые `modules` для прямой подстановки в `<ReactQuill modules={…} />`.
+ *
+ * Содержит два изменения относительно дефолтного snow-конфига:
+ *
+ * 1) Тулбар без пикеров `color` / `background`. У нас цветной email-редактор
+ *    живёт ровно в одном месте (`admin/modals/email-send-form`); во всех
+ *    остальных формах цвета только мешают — пользователи случайно красили
+ *    текст оранжевым на белом фоне, а потом он становился нечитаемым в
+ *    тёмной теме клиента (orders/widget) или в письме на чёрном фоне.
+ *
+ * 2) Clipboard-matchers, которые на вставку из буфера снимают inline-цвета
+ *    и нормализуют `\u00A0` → ` ` (см. `getStripColorClipboardMatchers`).
+ */
+export declare const stripColorQuillModules: {
+    toolbar: (string[] | {
+        header: (number | boolean)[];
+    }[] | {
+        list: string;
+    }[] | {
+        indent: string;
+    }[] | {
+        align: any[];
+    }[])[];
+    clipboard: {
+        matchers: ClipboardMatcher[];
+    };
+};

package/dist/quill-clipboard-matchers.js

@@ -0,0 +1,98 @@
+"use strict";
+/**
+ * Paste-time matchers для ReactQuill (`modules.clipboard.matchers`).
+ *
+ * Вынесено в общий пакет, чтобы admin и app использовали один и тот же набор
+ * matcher-ов без дублирования. Делает две вещи на входе из буфера обмена:
+ *
+ * 1) Снимает inline-цвета и фоны (`color: false` / `background: false` через
+ *    compose Delta). Это лечит вставку из Word/Google Docs, которая по
+ *    умолчанию приходит с собственной палитрой и часто не читается на наших
+ *    темах (особенно тёмной теме ордеров и контрастных формах админки).
+ *
+ * 2) Заменяет неразрывные пробелы (`\u00A0`) на обычные прямо в Delta до
+ *    того, как Quill сохранит ноду. Без этого ` ` остаётся в HTML и
+ *    ломает word-wrap длинных заголовков и абзацев на странице рендера
+ *    (см. также `sanitizeQuillHtml` на стороне рендеринга — оно ловит то же
+ *    самое, но уже на исторических данных, которые попали в БД до того,
+ *    как paste-matcher появился).
+ *
+ * ELEMENT_NODE matcher срабатывает на всех элементах (страховой случай),
+ * SPAN/FONT — прицельно (Word любит оборачивать раскраску в `<span style="…">`
+ * и `<font color="…">`), TEXT_NODE — для нормализации пробелов в тексте.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripColorQuillModules = void 0;
+exports.getStripColorClipboardMatchers = getStripColorClipboardMatchers;
+exports.getNormalizeWhitespaceClipboardMatchers = getNormalizeWhitespaceClipboardMatchers;
+const quill_delta_1 = __importDefault(require("quill-delta"));
+const stripColorFromDelta = (_node, delta) => delta.compose(new quill_delta_1.default().retain(delta.length(), {
+    color: false,
+    background: false,
+}));
+const normalizeWhitespaceInDelta = (_node, delta) => {
+    if (!delta?.ops?.length)
+        return delta;
+    let modified = false;
+    const ops = delta.ops.map((op) => {
+        if (typeof op.insert === 'string' && op.insert.indexOf('\u00A0') !== -1) {
+            modified = true;
+            return { ...op, insert: op.insert.replace(/\u00A0/g, ' ') };
+        }
+        return op;
+    });
+    return modified ? new quill_delta_1.default(ops) : delta;
+};
+/**
+ * Полный набор matcher-ов: и color-strip, и nbsp-normalize. Подключается там,
+ * где редактор не должен принимать цветную раскраску из буфера (waiver, AGB,
+ * локации, контентные модалки).
+ */
+function getStripColorClipboardMatchers() {
+    return [
+        [Node.ELEMENT_NODE, stripColorFromDelta],
+        ['SPAN', stripColorFromDelta],
+        ['FONT', stripColorFromDelta],
+        [Node.TEXT_NODE, normalizeWhitespaceInDelta],
+    ];
+}
+/**
+ * Только нормализация пробельных сущностей. Подключается там, где цветную
+ * раскраску в буфере мы готовы пустить дальше (rich email-редактор админа),
+ * но nbsp всё равно надо чистить, чтобы не ломать word-wrap.
+ */
+function getNormalizeWhitespaceClipboardMatchers() {
+    return [[Node.TEXT_NODE, normalizeWhitespaceInDelta]];
+}
+/**
+ * Готовые `modules` для прямой подстановки в `<ReactQuill modules={…} />`.
+ *
+ * Содержит два изменения относительно дефолтного snow-конфига:
+ *
+ * 1) Тулбар без пикеров `color` / `background`. У нас цветной email-редактор
+ *    живёт ровно в одном месте (`admin/modals/email-send-form`); во всех
+ *    остальных формах цвета только мешают — пользователи случайно красили
+ *    текст оранжевым на белом фоне, а потом он становился нечитаемым в
+ *    тёмной теме клиента (orders/widget) или в письме на чёрном фоне.
+ *
+ * 2) Clipboard-matchers, которые на вставку из буфера снимают inline-цвета
+ *    и нормализуют `\u00A0` → ` ` (см. `getStripColorClipboardMatchers`).
+ */
+exports.stripColorQuillModules = {
+    toolbar: [
+        [{ header: [1, 2, 3, false] }],
+        ['bold', 'italic', 'underline', 'strike'],
+        [{ list: 'ordered' }, { list: 'bullet' }],
+        [{ indent: '-1' }, { indent: '+1' }],
+        ['blockquote', 'code-block'],
+        [{ align: [] }],
+        ['link'],
+        ['clean'],
+    ],
+    clipboard: {
+        matchers: getStripColorClipboardMatchers(),
+    },
+};

package/dist/sanitize-quill-html.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Чистим Quill-HTML, который был сохранён без `clearQuill` или с устаревшей
+ * его версией (исторические waiver/AGB/`importantInfo`/локации/маркетинг-письма).
+ *
+ * Делит ответственность на две задачи, обе доступны и по отдельности:
+ *
+ * 1) `stripQuillColors` — снимает цвета и фоны: `style="color:…/background:…/
+ *    background-color:…"`, атрибуты `color="…"`/`data-color`/`data-background`
+ *    и Quill-классы `ql-color-*` / `ql-background-*`. Нужно везде, где тема
+ *    рендера отличается от темы редактора (тёмная тема ордеров на белом фоне
+ *    админки, инвертированные письма и т.п.).
+ *
+ * 2) `normalizeQuillWhitespace` — лечит неразрывные пробелы (` `, U+00A0)
+ *    и одиночные `<br>` внутри `<p>`/`<h*>`. nbsp браузер не считает точкой
+ *    переноса, и длинный заголовок вроде `14.&nbsp;ФОТО-,&nbsp;ВИДЕОФИКСАЦИЯ…`
+ *    превращается в одно «слово» и вылезает за контейнер. То же самое
+ *    случалось из-за вырезанных `<br>` в старом `clearQuill` — соседние строки
+ *    склеивались без разделителя. Меняем nbsp и одиночные `<br>` на пробел,
+ *    пустые `<p>`/`<p><br></p>` удаляем, дубли пробелов в тексте схлопываем.
+ *
+ * Содержимое `<pre>`/`<code>`/`<style>`/`<script>` не трогаем — там пробелы
+ * значимы.
+ *
+ * Все функции — чистые и идемпотентные: повторный вызов на уже очищенном
+ * HTML возвращает тот же результат (важно для сравнения «изменился ли текст»
+ * на стороне клиентских настроек, см. `client-agreement.tsx`).
+ */
+export type SanitizeQuillHtmlOptions = {
+    /** Снять inline-цвета/фоны и `ql-color-*`/`ql-background-*` классы. */
+    stripColors?: boolean;
+};
+export declare function stripQuillColors(html: string): string;
+export declare function normalizeQuillWhitespace(html: string): string;
+export declare function sanitizeQuillHtml(html: string | null | undefined, options?: SanitizeQuillHtmlOptions): string;

package/dist/sanitize-quill-html.js

@@ -0,0 +1,109 @@
+"use strict";
+/**
+ * Чистим Quill-HTML, который был сохранён без `clearQuill` или с устаревшей
+ * его версией (исторические waiver/AGB/`importantInfo`/локации/маркетинг-письма).
+ *
+ * Делит ответственность на две задачи, обе доступны и по отдельности:
+ *
+ * 1) `stripQuillColors` — снимает цвета и фоны: `style="color:…/background:…/
+ *    background-color:…"`, атрибуты `color="…"`/`data-color`/`data-background`
+ *    и Quill-классы `ql-color-*` / `ql-background-*`. Нужно везде, где тема
+ *    рендера отличается от темы редактора (тёмная тема ордеров на белом фоне
+ *    админки, инвертированные письма и т.п.).
+ *
+ * 2) `normalizeQuillWhitespace` — лечит неразрывные пробелы (` `, U+00A0)
+ *    и одиночные `<br>` внутри `<p>`/`<h*>`. nbsp браузер не считает точкой
+ *    переноса, и длинный заголовок вроде `14.&nbsp;ФОТО-,&nbsp;ВИДЕОФИКСАЦИЯ…`
+ *    превращается в одно «слово» и вылезает за контейнер. То же самое
+ *    случалось из-за вырезанных `<br>` в старом `clearQuill` — соседние строки
+ *    склеивались без разделителя. Меняем nbsp и одиночные `<br>` на пробел,
+ *    пустые `<p>`/`<p><br></p>` удаляем, дубли пробелов в тексте схлопываем.
+ *
+ * Содержимое `<pre>`/`<code>`/`<style>`/`<script>` не трогаем — там пробелы
+ * значимы.
+ *
+ * Все функции — чистые и идемпотентные: повторный вызов на уже очищенном
+ * HTML возвращает тот же результат (важно для сравнения «изменился ли текст»
+ * на стороне клиентских настроек, см. `client-agreement.tsx`).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripQuillColors = stripQuillColors;
+exports.normalizeQuillWhitespace = normalizeQuillWhitespace;
+exports.sanitizeQuillHtml = sanitizeQuillHtml;
+const COLOR_STYLE_PROPS = new Set(['color', 'background', 'background-color']);
+const COLOR_CLASS_PATTERN = /^ql-(color|background)-/;
+const PRESERVE_BLOCK_PATTERN = /<(pre|code|style|script)\b[^>]*>[\s\S]*?<\/\1>/gi;
+const PRESERVE_TOKEN_PREFIX = '\u2603SANITIZE_QUILL_PRESERVE_';
+const PRESERVE_TOKEN_SUFFIX = '\u2603';
+const PRESERVE_TOKEN_PATTERN = /\u2603SANITIZE_QUILL_PRESERVE_(\d+)\u2603/g;
+function cleanStyleAttribute(style) {
+    return style
+        .split(';')
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .filter((part) => {
+        const prop = part.split(':')[0]?.trim().toLowerCase() ?? '';
+        return prop && !COLOR_STYLE_PROPS.has(prop);
+    })
+        .join('; ');
+}
+function stripQuillColors(html) {
+    return html
+        .replace(/\s*style="([^"]*)"/gi, (_match, styleContent) => {
+        const cleaned = cleanStyleAttribute(styleContent);
+        return cleaned ? ` style="${cleaned}"` : '';
+    })
+        .replace(/\s*color="[^"]*"/gi, '')
+        .replace(/\s*class="([^"]*)"/gi, (_match, classContent) => {
+        const cleaned = classContent
+            .split(/\s+/)
+            .filter((token) => token && !COLOR_CLASS_PATTERN.test(token))
+            .join(' ');
+        return cleaned ? ` class="${cleaned}"` : '';
+    })
+        .replace(/\s*data-color="[^"]*"/gi, '')
+        .replace(/\s*data-background="[^"]*"/gi, '')
+        .replace(/<span>\s*<\/span>/gi, '')
+        .replace(/<font[^>]*>([\s\S]*?)<\/font>/gi, '$1');
+}
+function normalizeQuillWhitespace(html) {
+    const placeholders = [];
+    const withPlaceholders = html.replace(PRESERVE_BLOCK_PATTERN, (match) => {
+        const token = `${PRESERVE_TOKEN_PREFIX}${placeholders.length}${PRESERVE_TOKEN_SUFFIX}`;
+        placeholders.push(match);
+        return token;
+    });
+    const normalized = withPlaceholders
+        .replace(/&nbsp;|&#160;|&#xa0;|\u00A0/gi, ' ')
+        .replace(/<br\s*\/?>(?!\s*<\/p>)/gi, ' ')
+        .replace(/<p><br\s*\/?><\/p>/gi, '')
+        .replace(/<p>\s*<\/p>/gi, '')
+        .replace(/<br\s*\/?>/gi, '')
+        .replace(/>([^<]+)</g, function (_match, text) {
+        return `>${text.replace(/[ \t]{2,}/g, ' ')}<`;
+    });
+    return normalized.replace(PRESERVE_TOKEN_PATTERN, function (_match, idx) {
+        return placeholders[Number(idx)] || '';
+    });
+}
+/**
+ * Кэш результата по композитному ключу (опции + html). За один рендер
+ * страницы один и тот же `importantInfo`/`prepareText` может попасть в
+ * Typography.Text несколько раз (sidebar + основной блок), а контент
+ * договоров — это десятки КБ HTML. Ключи — конкретные строки полей из API,
+ * их за сессию ограниченное число, освобождаются с закрытием вкладки.
+ */
+const cache = new Map();
+function sanitizeQuillHtml(html, options) {
+    if (!html)
+        return '';
+    const stripColors = options?.stripColors ? '1' : '0';
+    const key = `${stripColors}|${html}`;
+    const cached = cache.get(key);
+    if (cached !== undefined)
+        return cached;
+    const colorStripped = options?.stripColors ? stripQuillColors(html) : html;
+    const result = normalizeQuillWhitespace(colorStripped);
+    cache.set(key, result);
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@escapenavigator/utils",
-  "version": "1.10.131",
+  "version": "1.10.132",
   "publishConfig": {
     "access": "public"
   },
@@ -14,11 +14,12 @@
     "test": "jest"
   },
   "dependencies": {
-    "@escapenavigator/types": "^1.10.127",
+    "@escapenavigator/types": "^1.10.128",
     "axios": "^0.21.4",
     "class-transformer": "^0.5.1",
     "class-validator": "^0.13.2",
-    "i18next": "^21.6.4"
+    "i18next": "^21.6.4",
+    "quill-delta": "^5.1.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.10",
@@ -26,5 +27,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "^5.6"
   },
-  "gitHead": "a592dd20f7b119d54930b606fd92effc45f7aec5"
+  "gitHead": "f314b83d632fc068719426b472f60ab03213d533"
 }