feat(core, Сolor): added support for custom escape characters (#746)

Author: makhnatkin

demo/defaults/md-plugins.ts

@@ -20,7 +20,7 @@ import video from '@diplodoc/transform/lib/plugins/video';
 import type {PluginWithParams} from 'markdown-it/lib';
 
 import {emojiDefs} from 'src/bundle/emoji';
-import type {RenderPreviewParams} from 'src/index';
+import {type RenderPreviewParams, colorClassName} from 'src/index';
 import color from 'src/markdown-it/color';
 import {bare as emoji} from 'src/markdown-it/emoji';
 import ins from 'src/markdown-it/ins';
@@ -72,7 +72,7 @@ export function getPlugins({
     const extendedPlugins = defaultPlugins.concat(
         (md) => md.use(emoji, {defs: emojiDefs}),
         checkbox,
-        color,
+        (md) => md.use(color, {escape: true, defaultClassName: colorClassName}),
         ins,
         latex({bundle: false, validate: false, runtime: LATEX_RUNTIME}),
         mark,

package-lock.json

@@ -183,6 +183,7 @@
     "@codemirror/search": "^6.5.8",
     "@codemirror/state": "^6.5.1",
     "@codemirror/view": "^6.36.2",
+    "@diplodoc/color-extension": "0.1.1",
     "@diplodoc/utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.7.0",
     "@gravity-ui/icons": "^2.12.0",
@@ -194,7 +195,6 @@
     "is-number": "^7.0.0",
     "lodash": "^4.17.21",
     "markdown-it-attrs": "^4.2.0",
-    "markdown-it-color": "^2.1.1",
     "markdown-it-emoji": "2.0.2",
     "markdown-it-ins": "^3.0.1",
     "markdown-it-mark": "^3.0.1",

package.json

@@ -129,7 +129,7 @@ export class ExtensionsManager {
         this.#spec.marks().forEach(this.processMark);
     }
 
-    private processNode = (name: string, {spec, fromMd, toMd: toMd, view}: ExtensionNodeSpec) => {
+    private processNode = (name: string, {spec, fromMd, toMd, view}: ExtensionNodeSpec) => {
         this.#schemaRegistry.addNode(name, spec);
 
         this.#parserRegistry.addToken(fromMd.tokenName || name, fromMd.tokenSpec);

src/core/ExtensionsManager.ts

@@ -126,6 +126,7 @@ export class MarkdownSerializerState {
     noAutoBlank: boolean;
     isAutolink: boolean | undefined;
     escapeWhitespace: boolean;
+    escapeCharacters?: string[];
 
     private readonly nodes: NodeMap;
     private readonly marks: MarkMap;
@@ -328,8 +329,9 @@ export class MarkdownSerializerState {
             while (keep < Math.min(active.length, len) && marks[keep].eq(active[keep])) ++keep;
 
             // Close the marks that need to be closed
-            while (keep < active.length)
+            while (keep < active.length) {
                 this.text(this.markString(active.pop()!, false, parent, index), false)
+            }
 
             // Output any previously expelled trailing whitespace outside the marks
             if (leading) this.text(leading)
@@ -378,7 +380,12 @@ export class MarkdownSerializerState {
     // have special meaning only at the start of the line.
     esc(str: string, startOfLine = false) {
         // eslint-disable-next-line no-useless-escape
-        const escRegexp = this.options?.commonEscape || /[`\^+*\\\|~\[\]\{\}<>\$_]/g;
+        const defaultEsc = /[`\^+*\\\|~\[\]\{\}<>\$_]/g;
+        const extraChars = this.escapeCharacters?.length ? this.escapeCharacters.map(c => '\\' + c).join('') : '';
+        const escRegexp = this.options?.commonEscape ||
+            // Compose the escape regexp from default, options, and extra characters
+            new RegExp(defaultEsc.source + (extraChars ? `|[${extraChars}]` : ''), 'g');
+
         const startOfLineEscRegexp = this.options?.startOfLineEscape || /^[:#\-*+>]/;
 
         str = str.replace(escRegexp, '\\$&');

src/core/markdown/MarkdownSerializer.ts

@@ -35,6 +35,18 @@ describe('Color extension', () => {
     it('should parse code inside text', () =>
         same('he{c2}(llo wor)ld!', doc(p('he', c2('llo wor'), 'ld!'))));
 
+    it('should parse nested color marks with escaped parentheses', () =>
+        same(
+            '{green}(some\\(){blue}(2,3){green}(\\))',
+            doc(
+                p(
+                    color({[colorMarkName]: 'green'}, 'some('),
+                    color({[colorMarkName]: 'blue'}, '2,3'),
+                    color({[colorMarkName]: 'green'}, ')'),
+                ),
+            ),
+        ));
+
     it('should parse span with md-colorify--* classname', () => {
         parseDOM(
             schema,
@@ -74,4 +86,18 @@ describe('Color extension', () => {
             doc(p('text with style color')),
         );
     });
+
+    it('should parse nested color spans for escaped parentheses', () => {
+        parseDOM(
+            schema,
+            '<span class="yfm-colorify yfm-colorify--green">some(<span class="yfm-colorify yfm-colorify--blue">2,3</span><span class="yfm-colorify yfm-colorify--green">)</span></span>',
+            doc(
+                p(
+                    color({[colorMarkName]: 'green'}, 'some('),
+                    color({[colorMarkName]: 'blue'}, '2,3'),
+                    color({[colorMarkName]: 'green'}, ')'),
+                ),
+            ),
+        );
+    });
 });

src/extensions/yfm/Color/Color.test.ts

@@ -1,4 +1,6 @@
-import mdPlugin from 'src/markdown-it/color';
+import type MarkdownIt from 'markdown-it';
+
+import color from 'src/markdown-it/color';
 
 import type {ExtensionAuto} from '../../../../core';
 import {markTypeFactory} from '../../../../utils/schema';
@@ -20,6 +22,8 @@ export type ColorSpecsOptions = {
 
 export const ColorSpecs: ExtensionAuto<ColorSpecsOptions> = (builder, opts) => {
     const {validateClassNameColorName, parseStyleColorValue} = opts;
+    const mdPlugin = (md: MarkdownIt) =>
+        md.use(color, {escape: true, defaultClassName: colorClassName});
 
     builder
         .configureMd((md) => md.use(mdPlugin, {defaultClassName: colorClassName, inline: false}))
@@ -87,10 +91,14 @@ export const ColorSpecs: ExtensionAuto<ColorSpecsOptions> = (builder, opts) => {
                 },
             },
             toMd: {
-                open: (_state, mark) => {
+                open: (state, mark) => {
+                    state.escapeCharacters = ['(', ')'];
                     return `{${mark.attrs[colorMarkName]}}(`;
                 },
-                close: ')',
+                close: (state) => {
+                    state.escapeCharacters = undefined;
+                    return `)`;
+                },
                 mixable: true,
                 expelEnclosingWhitespace: true,
             },

src/extensions/yfm/Color/ColorSpecs/index.ts

@@ -1,3 +1,3 @@
-import {colorPlugin} from 'markdown-it-color';
+import {colorPlugin} from '@diplodoc/color-extension';
 
 export default colorPlugin;

src/markdown-it/color.ts

@@ -2,7 +2,7 @@
 
 ### Re-exports Markdown-it plugins:
 
-- [markdown-it-color](https://github.com/nkjmsss/markdown-it-color)
+- [@diplodoc/color-extension](https://github.com/diplodoc-platform/color-extension)
 - [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins)
 - [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark)
 - [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub)