feat(Color): add parseDOM rules to specs (#137)

Author: d3m1d0v

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

@@ -1,19 +1,25 @@
 import {builders} from 'prosemirror-test-builder';
 import {createMarkupChecker} from '../../../../tests/sameMarkup';
+import {parseDOM} from '../../../../tests/parse-dom';
 import {ExtensionsManager} from '../../../core';
 import {BaseNode, BaseSpecsPreset} from '../../base/specs';
 import {colorMarkName, ColorSpecs} from './ColorSpecs';
 
 const {schema, parser, serializer} = new ExtensionsManager({
-    extensions: (builder) => builder.use(BaseSpecsPreset, {}).use(ColorSpecs),
+    extensions: (builder) =>
+        builder.use(BaseSpecsPreset, {}).use(ColorSpecs, {
+            validateClassNameColorName: (color) => color !== 'something',
+            parseStyleColorValue: (value: string) => (value === 'darkred' ? 'red' : null),
+        }),
 }).buildDeps();
 
-const {doc, p, c1, c2} = builders(schema, {
+const {doc, p, color, c1, c2} = builders(schema, {
     doc: {nodeType: BaseNode.Doc},
     p: {nodeType: BaseNode.Paragraph},
+    color: {markType: colorMarkName},
     c1: {nodeType: colorMarkName, [colorMarkName]: 'c1'},
     c2: {nodeType: colorMarkName, [colorMarkName]: 'c2'},
-}) as PMTestBuilderResult<'doc' | 'p', 'c1' | 'c2'>;
+}) as PMTestBuilderResult<'doc' | 'p', 'color' | 'c1' | 'c2'>;
 
 const {same} = createMarkupChecker({parser, serializer});
 
@@ -22,4 +28,44 @@ 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 span with md-colorify--* classname', () => {
+        parseDOM(
+            schema,
+            '<span class="md-colorify--mdcolor">text with md color</span>',
+            doc(p(color({[colorMarkName]: 'mdcolor'}, 'text with md color'))),
+        );
+    });
+
+    it('should parse span with yfm-colorify--* classname', () => {
+        parseDOM(
+            schema,
+            '<span class="yfm-colorify--yfmcolor">text with yfm color</span>',
+            doc(p(color({[colorMarkName]: 'yfmcolor'}, 'text with yfm color'))),
+        );
+    });
+
+    it('should not parse span with yfm-colorify--something classname', () => {
+        parseDOM(
+            schema,
+            '<span class="yfm-colorify--something">text with yfm color</span>',
+            doc(p('text with yfm color')),
+        );
+    });
+
+    it('should parse span with style color darkred', () => {
+        parseDOM(
+            schema,
+            '<span style="color:darkred">text with style color</span>',
+            doc(p(color({[colorMarkName]: 'red'}, 'text with style color'))),
+        );
+    });
+
+    it('should not parse span with style color red', () => {
+        parseDOM(
+            schema,
+            '<span style="color:red">text with style color</span>',
+            doc(p('text with style color')),
+        );
+    });
 });

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

@@ -6,19 +6,57 @@ import {colorMarkName, colorClassName, domColorAttr} from './const';
 export {colorMarkName} from './const';
 export const colorType = markTypeFactory(colorMarkName);
 
-export const ColorSpecs: ExtensionAuto = (builder) => {
+function getColorName(className: string) {
+    const regexp = /^(yfm|md)-colorify--(\w+)$/;
+    return className.match(regexp)?.[2];
+}
+
+export type ColorSpecsOptions = {
+    validateClassNameColorName?: (colorName: string) => boolean;
+    parseStyleColorValue?: (color: string) => string | null;
+};
+
+export const ColorSpecs: ExtensionAuto<ColorSpecsOptions> = (builder, opts) => {
+    const {validateClassNameColorName, parseStyleColorValue} = opts;
+
     builder
         .configureMd((md) => md.use(mdPlugin, {defaultClassName: colorClassName, inline: false}))
         .addMark(colorMarkName, () => ({
             spec: {
                 attrs: {[colorMarkName]: {}},
                 parseDOM: [
                     {
-                        tag: `span[${domColorAttr}]`,
+                        tag: `span`,
+                        preserveWhitespace: false,
+                        getAttrs(node) {
+                            if (typeof node === 'string') return false;
+
+                            for (const className of Array.from(node.classList)) {
+                                const color = getColorName(className);
+                                if (color && (validateClassNameColorName?.(color) ?? true)) {
+                                    return {
+                                        [colorMarkName]: color,
+                                    };
+                                }
+                            }
+
+                            return false;
+                        },
+                    },
+                    {
+                        style: 'color',
+                        preserveWhitespace: false,
                         getAttrs(node) {
-                            return {
-                                [colorMarkName]: (node as HTMLElement).getAttribute(domColorAttr),
-                            };
+                            if (typeof node !== 'string') return false;
+
+                            const color = parseStyleColorValue?.(node);
+                            if (color) {
+                                return {
+                                    [colorMarkName]: color,
+                                };
+                            }
+
+                            return false;
                         },
                     },
                 ],

src/extensions/yfm/Color/index.ts

@@ -3,7 +3,7 @@ import type {Action, ExtensionAuto} from '../../../core';
 import {isMarkActive} from '../../../utils/marks';
 import {ColorSpecs, colorType} from './ColorSpecs';
 import {colorAction, colorMarkName, Colors} from './const';
-import {chainAND} from './utils';
+import {chainAND, parseStyleColorValue, validateClassNameColorName} from './utils';
 
 import './colors.scss';
 
@@ -15,7 +15,10 @@ export type ColorActionParams = {
 };
 
 export const Color: ExtensionAuto = (builder) => {
-    builder.use(ColorSpecs);
+    builder.use(ColorSpecs, {
+        validateClassNameColorName,
+        parseStyleColorValue,
+    });
 
     builder.addAction(colorAction, ({schema}) => {
         const type = colorType(schema);

src/extensions/yfm/Color/utils.ts

@@ -1,4 +1,5 @@
 import type {Command} from 'prosemirror-state';
+import {Colors} from './const';
 
 export {chainCommands as chainOR} from 'prosemirror-commands';
 
@@ -39,3 +40,65 @@ export const chainAND = (...commands: Command[]): Command => {
         return true;
     };
 };
+
+// see styles
+const COLORS: readonly string[] = [
+    Colors.Black,
+    Colors.Gray,
+    Colors.Yellow,
+    Colors.Orange,
+    Colors.Red,
+    Colors.Green,
+    Colors.Blue,
+    Colors.Violet,
+];
+
+export const validateClassNameColorName = (color: string) => COLORS.includes(color);
+
+// eslint-disable-next-line complexity
+export const parseStyleColorValue = (color: string) => {
+    switch (color) {
+        case 'black':
+            return Colors.Black;
+
+        case 'gray':
+        case 'grey':
+        case 'lightgray':
+        case 'lightgrey':
+        case 'darkgray':
+        case 'darkgrey':
+            return Colors.Gray;
+
+        case 'yellow':
+        case 'lightyellow':
+            return Colors.Yellow;
+
+        case 'orange':
+        case 'darkorange':
+            return Colors.Orange;
+
+        case 'red':
+        case 'darkred':
+            return Colors.Red;
+
+        case 'green':
+        case 'lightgreen':
+        case 'darkgreen':
+            return Colors.Green;
+
+        case 'blue':
+        case 'lightblue':
+        case 'mediumblue':
+        case 'darkblue':
+            return Colors.Blue;
+
+        case 'violet':
+        case 'darkviolet':
+        case 'purple':
+        case 'mediumpurple':
+            return Colors.Violet;
+
+        default:
+            return null;
+    }
+};

src/extensions/yfm/specs.ts

@@ -1,7 +1,7 @@
 import type {ExtensionAuto} from '../../core';
 
 import {CheckboxSpecs, CheckboxSpecsOptions} from './Checkbox/CheckboxSpecs';
-import {ColorSpecs} from './Color/ColorSpecs';
+import {ColorSpecs, ColorSpecsOptions} from './Color/ColorSpecs';
 import {MathSpecs} from './Math/MathSpecs';
 import {MonospaceSpecs} from './Monospace/MonospaceSpecs';
 import {ImgSizeSpecs, ImgSizeSpecsOptions} from './ImgSize/ImgSizeSpecs';
@@ -30,6 +30,7 @@ export * from './YfmTabs/YfmTabsSpecs';
 
 export type YfmSpecsPresetOptions = {
     checkbox?: CheckboxSpecsOptions;
+    color?: ColorSpecsOptions;
     video?: VideoSpecsOptions;
     imgSize?: ImgSizeSpecsOptions;
     yfmCut?: YfmCutSpecsOptions;
@@ -42,7 +43,7 @@ export type YfmSpecsPresetOptions = {
 export const YfmSpecsPreset: ExtensionAuto<YfmSpecsPresetOptions> = (builder, opts) => {
     builder
         .use(CheckboxSpecs, opts.checkbox ?? {})
-        .use(ColorSpecs)
+        .use(ColorSpecs, opts.color ?? {})
         .use(ImgSizeSpecs, opts.imgSize ?? {})
         .use(MathSpecs)
         .use(MonospaceSpecs)