feat(YfmTable): support for ignoring splitters in table content (#800)

Author: d3m1d0v

demo/components/Playground.tsx

@@ -156,7 +156,11 @@ export const Playground = memo<PlaygroundProps>((props) => {
                 linkifyTlds={md.linkifyTlds}
                 breaks={md.breaks}
                 needToSanitizeHtml={sanitizeHtml}
-                plugins={getPlugins({directiveSyntax})}
+                plugins={getPlugins({
+                    directiveSyntax,
+                    table_ignoreSplittersInBlockMath: true,
+                    table_ignoreSplittersInInlineMath: true,
+                })}
                 disableMarkdownItAttrs={disableMarkdownItAttrs}
                 htmlRuntimeConfig={{disabledModes: disabledHTMLBlockModes}}
             />
@@ -215,6 +219,12 @@ export const Playground = memo<PlaygroundProps>((props) => {
                     imgSize: {
                         parseInsertedUrlAsImage,
                     },
+                    yfmTable: {
+                        table_ignoreSplittersInBlockCode: true,
+                        table_ignoreSplittersInBlockMath: true,
+                        table_ignoreSplittersInInlineCode: true,
+                        table_ignoreSplittersInInlineMath: true,
+                    },
                     ...wysiwygConfig?.extensionOptions,
                 },
             },

demo/defaults/md-plugins.ts

@@ -16,6 +16,7 @@ import monospace from '@diplodoc/transform/lib/plugins/monospace';
 import notes from '@diplodoc/transform/lib/plugins/notes';
 import sup from '@diplodoc/transform/lib/plugins/sup';
 import yfmTable from '@diplodoc/transform/lib/plugins/table';
+import type {YfmTablePluginOptions} from '@diplodoc/transform/lib/plugins/table/types';
 import video from '@diplodoc/transform/lib/plugins/video';
 import type {PluginWithParams} from 'markdown-it/lib';
 
@@ -33,10 +34,14 @@ export const YFM_HTML_BLOCK_RUNTIME = 'extension:yfm-html-block';
 
 type GetPluginsOptions = {
     directiveSyntax?: RenderPreviewParams['directiveSyntax'];
-};
+} & Pick<
+    YfmTablePluginOptions,
+    'table_ignoreSplittersInBlockMath' | 'table_ignoreSplittersInInlineMath'
+>;
 
 export function getPlugins({
     directiveSyntax,
+    ...options
 }: GetPluginsOptions = {}): markdownit.PluginWithParams[] {
     const defaultPlugins: PluginWithParams[] = [
         anchors,
@@ -67,7 +72,14 @@ export function getPlugins({
             },
         }),
         video,
-        yfmTable,
+        (md, opts) =>
+            yfmTable(md, {
+                ...opts,
+                table_ignoreSplittersInBlockCode: true,
+                table_ignoreSplittersInInlineCode: true,
+                table_ignoreSplittersInBlockMath: options.table_ignoreSplittersInBlockMath,
+                table_ignoreSplittersInInlineMath: options.table_ignoreSplittersInInlineMath,
+            }),
     ];
     const extendedPlugins = defaultPlugins.concat(
         (md) => md.use(emoji, {defs: emojiDefs}),

package-lock.json

@@ -228,7 +228,7 @@
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/quote-link-extension": "0.1.3",
     "@diplodoc/tabs-extension": "^3.5.1",
-    "@diplodoc/transform": "^4.57.2",
+    "@diplodoc/transform": "^4.58.0",
     "@gravity-ui/components": "4.2.2",
     "@gravity-ui/eslint-config": "3.3.0",
     "@gravity-ui/gulp-utils": "1.0.3",

package.json

@@ -2,7 +2,8 @@ import {log} from '@diplodoc/transform/lib/log.js';
 import yfmPlugin from '@diplodoc/transform/lib/plugins/notes/index.js';
 import type {NodeSpec} from 'prosemirror-model';
 
-import type {ExtensionAuto} from '../../../../core';
+import {getConfig} from 'src/configure';
+import type {ExtensionAuto} from 'src/core';
 
 import {NoteNode} from './const';
 import {parserTokens} from './parser';
@@ -23,7 +24,7 @@ export const YfmNoteSpecs: ExtensionAuto<YfmNoteSpecsOptions> = (builder, opts)
     const schemaSpecs = getSchemaSpecs(opts, builder.context.get('placeholder'));
 
     builder
-        .configureMd((md) => md.use(yfmPlugin, {log}))
+        .configureMd((md) => md.use(yfmPlugin, {log, lang: getConfig().lang || 'en'}))
         .addNode(NoteNode.Note, () => ({
             spec: schemaSpecs[NoteNode.Note],
             toMd: serializerTokens[NoteNode.Note],

src/extensions/yfm/YfmNote/YfmNoteSpecs/index.ts

@@ -1,5 +1,6 @@
 import {log} from '@diplodoc/transform/lib/log.js';
 import yfmTable from '@diplodoc/transform/lib/plugins/table/index.js';
+import type {YfmTablePluginOptions} from '@diplodoc/transform/lib/plugins/table/types.js';
 
 import type {ExtensionWithOptions} from '../../../../core';
 
@@ -11,13 +12,39 @@ import {serializerTokens} from './serializer';
 export {YfmTableNode} from './const';
 export {yfmTableType, yfmTableBodyType, yfmTableRowType, yfmTableCellType} from './utils';
 
-export type YfmTableSpecsOptions = YfmTableSchemaOptions & {};
+export type YfmTableSpecsOptions = YfmTableSchemaOptions &
+    Pick<
+        YfmTablePluginOptions,
+        | 'table_ignoreSplittersInBlockCode'
+        | 'table_ignoreSplittersInBlockMath'
+        | 'table_ignoreSplittersInInlineCode'
+        | 'table_ignoreSplittersInInlineMath'
+    > & {};
 
 export const YfmTableSpecs: ExtensionWithOptions<YfmTableSpecsOptions> = (builder, options) => {
     const schemaSpecs = getSchemaSpecs(options, builder.context.get('placeholder'));
 
+    /* eslint-disable camelcase */
+    const {
+        table_ignoreSplittersInBlockCode,
+        table_ignoreSplittersInBlockMath,
+        table_ignoreSplittersInInlineCode,
+        table_ignoreSplittersInInlineMath,
+    } = options;
+    /* eslint-enable camelcase */
+
     builder
-        .configureMd((md) => md.use(yfmTable, {log}))
+        .configureMd((md) =>
+            md.use(yfmTable, {
+                log,
+                /* eslint-disable camelcase */
+                table_ignoreSplittersInBlockCode,
+                table_ignoreSplittersInBlockMath,
+                table_ignoreSplittersInInlineCode,
+                table_ignoreSplittersInInlineMath,
+                /* eslint-enable camelcase */
+            }),
+        )
         .addNode(YfmTableNode.Table, () => ({
             spec: schemaSpecs[YfmTableNode.Table],
             toMd: serializerTokens[YfmTableNode.Table],