feat(wysiwyg): allow to disable markdown-it-attrs in yfm preset (#690)

d3m1d0v · web-flow · commit da1c20949ec8 · 2025-03-25T19:39:21.000+03:00
diff --git a/demo/components/Playground.tsx b/demo/components/Playground.tsx
@@ -79,6 +79,7 @@ export type PlaygroundProps = {
     onChangeSplitModeEnabled?: (splitModeEnabled: boolean) => void;
     directiveSyntax?: DirectiveSyntaxValue;
     disabledHTMLBlockModes?: EmbeddingMode[];
+    disableMarkdownItAttrs?: boolean;
 } & Pick<UseMarkdownEditorProps, 'experimental' | 'wysiwygConfig'> &
     Pick<
         MarkdownEditorViewProps,
@@ -128,6 +129,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
         experimental,
         directiveSyntax,
         disabledHTMLBlockModes,
+        disableMarkdownItAttrs,
     } = props;
     const [editorMode, setEditorMode] = useState<MarkdownEditorMode>(initialEditor ?? 'wysiwyg');
     const [mdRaw, setMdRaw] = useState<MarkupString>(initial || '');
@@ -146,10 +148,11 @@ export const Playground = memo<PlaygroundProps>((props) => {
                 breaks={md.breaks}
                 needToSanitizeHtml={sanitizeHtml}
                 plugins={getPlugins({directiveSyntax})}
+                disableMarkdownItAttrs={disableMarkdownItAttrs}
                 htmlRuntimeConfig={{disabledModes: disabledHTMLBlockModes}}
             />
         ),
-        [sanitizeHtml, disabledHTMLBlockModes],
+        [sanitizeHtml, disabledHTMLBlockModes, disableMarkdownItAttrs],
     );
 
     const logger = useMemo(() => new Logger2().nested({env: 'playground'}), []);
@@ -161,6 +164,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
             preset: 'full',
             wysiwygConfig: {
                 placeholderOptions: placeholderOptions,
+                disableMarkdownAttrs: disableMarkdownItAttrs,
                 extensions: (builder) => {
                     builder
                         .use(Math, {
@@ -250,6 +254,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
             experimental?.beforeEditorModeChange,
             experimental?.prepareRawMarkup,
             directiveSyntax,
+            disableMarkdownItAttrs,
         ],
     );
 
diff --git a/demo/components/PlaygroundMini.tsx b/demo/components/PlaygroundMini.tsx
@@ -24,6 +24,7 @@ export type PlaygroundMiniProps = Pick<
     | 'onChangeSplitModeEnabled'
     | 'directiveSyntax'
     | 'disabledHTMLBlockModes'
+    | 'disableMarkdownItAttrs'
 > & {withDefaultInitialContent?: boolean};
 
 export const PlaygroundMini = memo<PlaygroundMiniProps>(
diff --git a/demo/components/SplitModePreview.tsx b/demo/components/SplitModePreview.tsx
@@ -25,14 +25,15 @@ const Preview = withMermaid({runtime: MERMAID_RUNTIME})(
 );
 
 export type SplitModePreviewProps = {
-    plugins?: MarkdownIt.PluginSimple[];
+    plugins: MarkdownIt.PluginSimple[];
     getValue: () => MarkupString;
     allowHTML?: boolean;
     breaks?: boolean;
     linkify?: boolean;
     linkifyTlds?: string | string[];
     needToSanitizeHtml?: boolean;
     htmlRuntimeConfig?: HTMLRuntimeConfig;
+    disableMarkdownItAttrs?: boolean;
 };
 
 export const SplitModePreview: React.FC<SplitModePreviewProps> = (props) => {
@@ -45,6 +46,7 @@ export const SplitModePreview: React.FC<SplitModePreviewProps> = (props) => {
         linkifyTlds,
         needToSanitizeHtml,
         htmlRuntimeConfig,
+        disableMarkdownItAttrs,
     } = props;
     const [html, setHtml] = useState('');
     const [meta, setMeta] = useState<object | undefined>({});
@@ -58,12 +60,17 @@ export const SplitModePreview: React.FC<SplitModePreviewProps> = (props) => {
                 const res = transform(getValue(), {
                     allowHTML,
                     breaks,
-                    plugins,
                     linkify,
                     linkifyTlds,
                     needToSanitizeHtml,
                     linkAttrs: [[ML_ATTR, true]],
                     defaultClassName: colorClassName,
+                    plugins: [
+                        ...plugins,
+                        ...(disableMarkdownItAttrs
+                            ? [(md: MarkdownIt) => md.core.ruler.disable('curly_attributes')]
+                            : []),
+                    ],
                 }).result;
                 setHtml(res.html);
                 setMeta(res.meta);
diff --git a/demo/defaults/args.ts b/demo/defaults/args.ts
@@ -18,4 +18,5 @@ export const args: Meta<PlaygroundMiniProps>['args'] = {
     height: 'initial',
     directiveSyntax: 'disabled',
     disabledHTMLBlockModes: [],
+    disableMarkdownItAttrs: true,
 };
diff --git a/demo/stories/playground/Playground.stories.tsx b/demo/stories/playground/Playground.stories.tsx
@@ -4,7 +4,11 @@ import {type PlaygroundProps, Playground as component} from '../../components/Pl
 import {args} from '../../defaults/args';
 import {getInitialMd} from '../../utils/getInitialMd';
 
-export const Story: StoryObj<typeof component> = {};
+export const Story: StoryObj<typeof component> = {
+    args: {
+        disableMarkdownItAttrs: true,
+    },
+};
 Story.storyName = 'Playground';
 
 const meta: Meta<PlaygroundProps> = {
diff --git a/demo/stories/presets/Preset.tsx b/demo/stories/presets/Preset.tsx
@@ -90,6 +90,7 @@ export const Preset = memo<PresetDemoProps>((props) => {
             splitModeEnabled: true,
         },
         wysiwygConfig: {
+            disableMarkdownAttrs: true,
             extensionOptions: {
                 imgSize: {
                     parseInsertedUrlAsImage,
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -181,6 +181,7 @@
     "@codemirror/search": "~6.5.8",
     "@codemirror/state": "~6.5.1",
     "@codemirror/view": "~6.36.2",
+    "@diplodoc/utils": "^2.1.0",
     "@gravity-ui/i18n": "^1.7.0",
     "@gravity-ui/icons": "^2.12.0",
     "@lezer/highlight": "~1.2.1",
diff --git a/src/bundle/types.ts b/src/bundle/types.ts
@@ -178,6 +178,13 @@ export type MarkdownEditorWysiwygConfig = {
     extensionOptions?: ExtensionsOptions;
     escapeConfig?: EscapeConfig;
     placeholderOptions?: WysiwygPlaceholderOptions;
+    // MAJOR: remove markdown-it-attrs
+    /**
+     * Disable the markdown-it-attrs plugin in the markup parser.
+     *
+     * Note: The use of the markdown-it-attrs plugin will be removed in the next major version.
+     */
+    disableMarkdownAttrs?: boolean;
 };
 
 export type MarkdownEditorOptions = {
diff --git a/src/bundle/useMarkdownEditor.ts b/src/bundle/useMarkdownEditor.ts
@@ -57,6 +57,7 @@ export function useMarkdownEditor(
                     editor.emit('submit', null);
                     return true;
                 },
+                disableMdAttrs: wysiwygConfig.disableMarkdownAttrs,
                 preserveEmptyRows: experimental.preserveEmptyRows,
                 placeholderOptions: wysiwygConfig.placeholderOptions,
                 mdBreaks: md.breaks,
diff --git a/src/bundle/wysiwyg-preset.ts b/src/bundle/wysiwyg-preset.ts
@@ -40,6 +40,8 @@ export type BundlePresetOptions = ExtensionsOptions &
         needToSetDimensionsForUploadedImages?: boolean;
         enableNewImageSizeCalculation?: boolean;
         directiveSyntax: DirectiveSyntaxContext;
+        // MAJOR: remove markdown-it-attrs
+        disableMdAttrs?: boolean;
     };
 
 declare global {
@@ -136,6 +138,7 @@ export const BundlePreset: ExtensionAuto<BundlePresetOptions> = (builder, opts)
     };
     const yfmOptions: BehaviorPresetOptions & YfmPresetOptions = {
         ...defaultOptions,
+        yfmConfigs: {disableAttrs: opts.disableMdAttrs, ...opts.yfmConfigs},
         selectionContext: {config: wSelectionMenuConfigByPreset.yfm, ...opts.selectionContext},
         commandMenu: {actions: wCommandMenuConfigByPreset.yfm, ...opts.commandMenu},
         underline: {underlineKey: f.toPM(A.Underline), ...opts.underline},
diff --git a/src/extensions/yfm/YfmConfigs/YfmConfigsSpecs/index.ts b/src/extensions/yfm/YfmConfigs/YfmConfigsSpecs/index.ts
@@ -1,7 +1,7 @@
-import attrsPlugin, {type AttrsOptions} from 'markdown-it-attrs'; // eslint-disable-line import/no-extraneous-dependencies
+import attrsPlugin, {type AttrsOptions} from 'markdown-it-attrs';
 
-import type {ExtensionAuto} from '../../../../core';
-import {noop} from '../../../../lodash';
+import type {ExtensionAuto} from '#core';
+import {noop} from 'src/lodash';
 
 const defaultAttrsOpts: AttrsOptions = {
     allowedAttributes: ['id'],
@@ -10,12 +10,17 @@ const defaultAttrsOpts: AttrsOptions = {
 export type YfmConfigsSpecsOptions = {
     /** markdown-it-attrs options */
     attrs?: AttrsOptions;
+    /** Disable markdown-it-attrs plugin */
+    disableAttrs?: boolean;
 };
 
 export const YfmConfigsSpecs: ExtensionAuto<YfmConfigsSpecsOptions> = (builder, opts) => {
     const attrsOpts = {...defaultAttrsOpts, ...opts.attrs};
 
-    builder.configureMd((md) => md.use<AttrsOptions>(attrsPlugin, attrsOpts), {text: false});
+    // MAJOR: remove markdown-it-attrs
+    if (!opts.disableAttrs) {
+        builder.configureMd((md) => md.use<AttrsOptions>(attrsPlugin, attrsOpts), {text: false});
+    }
 
     // ignore yfm lint token
     builder.addNode('__yfm_lint', () => ({
diff --git a/src/extensions/yfm/YfmHeading/YfmHeading.test.ts b/src/extensions/yfm/YfmHeading/YfmHeading.test.ts
@@ -1,4 +1,5 @@
 import {builders} from 'prosemirror-test-builder';
+import dd from 'ts-dedent';
 
 import {parseDOM} from '../../../../tests/parse-dom';
 import {createMarkupChecker} from '../../../../tests/sameMarkup';
@@ -73,21 +74,21 @@ describe('Heading extension', () => {
     });
 
     it('should parse few headings', () => {
-        const markup = `
-# h1 {#one}
+        const markup = dd`
+            # h1 {#one}
 
-## h2 {#two}
+            ## h2 {#two}
 
-### h3 {#three}
+            ### h3 {#three}
 
-#### h4 {#four}
+            #### h4 {#four}
 
-##### h5 {#five}
+            ##### h5 {#five}
 
-###### h6 {#six}
+            ###### h6 {#six}
 
-para
-`.trim();
+            para
+            `.trim();
 
         same(
             markup,
@@ -103,6 +104,59 @@ para
         );
     });
 
+    it('should parse headings with id without markdown-it-attrs', () => {
+        const markup = dd`
+            # h1 {#one}
+
+            ## h2 {#two}
+
+            ### h3 {#three}
+
+            #### h4 {#four}
+
+            ##### h5 {#five}
+
+            ###### h6 {#six}
+
+            para
+            `.trim();
+
+        const {
+            schema,
+            markupParser: parser,
+            serializer,
+        } = new ExtensionsManager({
+            extensions: (builder) =>
+                builder
+                    .use(BaseSchemaSpecs, {})
+                    .use(YfmConfigsSpecs, {disableAttrs: true})
+                    .use(YfmHeadingSpecs, {}),
+        }).buildDeps();
+        const {same} = createMarkupChecker({parser, serializer});
+
+        const {doc, p, h} = builders<
+            'doc' | 'p' | 'h' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
+            'b'
+        >(schema, {
+            doc: {nodeType: BaseNode.Doc},
+            p: {nodeType: BaseNode.Paragraph},
+            h: {nodeType: headingNodeName},
+        });
+
+        same(
+            markup,
+            doc(
+                h({[YfmHeadingAttr.Level]: 1, [YfmHeadingAttr.Id]: 'one'}, 'h1'),
+                h({[YfmHeadingAttr.Level]: 2, [YfmHeadingAttr.Id]: 'two'}, 'h2'),
+                h({[YfmHeadingAttr.Level]: 3, [YfmHeadingAttr.Id]: 'three'}, 'h3'),
+                h({[YfmHeadingAttr.Level]: 4, [YfmHeadingAttr.Id]: 'four'}, 'h4'),
+                h({[YfmHeadingAttr.Level]: 5, [YfmHeadingAttr.Id]: 'five'}, 'h5'),
+                h({[YfmHeadingAttr.Level]: 6, [YfmHeadingAttr.Id]: 'six'}, 'h6'),
+                p('para'),
+            ),
+        );
+    });
+
     it.each([1, 2, 3, 4, 5, 6])('should parse html - h%s tag', (lvl) => {
         parseDOM(
             schema,
diff --git a/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/index.ts b/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/index.ts
@@ -1,8 +1,8 @@
-import type {Node, NodeSpec} from 'prosemirror-model';
-
-import type {ExtensionAuto} from '../../../../core';
+import type {ExtensionAuto} from '#core';
+import type {Node, NodeSpec} from '#pm/model';
 
 import {YfmHeadingAttr, headingNodeName} from './const';
+import {headingAttrsPlugin} from './markdown/heading-attrs';
 import {getNodeAttrs} from './utils';
 
 const DEFAULT_PLACEHOLDER = (node: Node) => 'Heading ' + node.attrs[YfmHeadingAttr.Level];
@@ -18,6 +18,7 @@ export type YfmHeadingSpecsOptions = {
 
 /** YfmHeading extension needs markdown-it-attrs plugin */
 export const YfmHeadingSpecs: ExtensionAuto<YfmHeadingSpecsOptions> = (builder, opts) => {
+    builder.configureMd((md) => md.use(headingAttrsPlugin));
     builder.addNode(headingNodeName, () => ({
         spec: {
             attrs: {
diff --git a/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/markdown/heading-attrs.ts b/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/markdown/heading-attrs.ts
