@diplodoc/transform 4.19.1 → 4.21.0

package/src/transform/plugins/table/index.ts

@@ -1,7 +1,7 @@
 import StateBlock from 'markdown-it/lib/rules_block/state_block';
 import {MarkdownItPluginCb} from '../typings';
 import Token from 'markdown-it/lib/token';
-import {parseAttrsClass} from './utils';
+import {parseAttrs} from './utils';
 
 const pluginName = 'yfm_table';
 const pipeChar = 0x7c; // |
@@ -96,6 +96,7 @@ class StateIterator {
 interface RowPositions {
     rows: [number, number, [Stats, Stats][]][];
     endOfTable: number | null;
+    pos: number;
 }
 
 function getTableRowPositions(
@@ -214,7 +215,17 @@ function getTableRowPositions(
 
         iter.next();
     }
-    return {rows, endOfTable};
+
+    const {pos} = iter;
+
+    return {rows, endOfTable, pos};
+}
+
+function extractAttributes(state: StateBlock, pos: number): Record<string, string[]> {
+    const attrsStringStart = state.skipSpaces(pos);
+    const attrsString = state.src.slice(attrsStringStart);
+
+    return parseAttrs(attrsString) ?? {};
 }
 
 /**
@@ -232,7 +243,7 @@ function extractAndApplyClassFromToken(contentToken: Token, tdOpenToken: Token):
     if (!allAttrs) {
         return;
     }
-    const attrsClass = parseAttrsClass(allAttrs[0].trim());
+    const attrsClass = parseAttrs(allAttrs[0].trim())?.class.join(' ');
     if (attrsClass) {
         tdOpenToken.attrSet('class', attrsClass);
         // remove the class from the token so that it's not propagated to tr or table level
@@ -363,13 +374,15 @@ const yfmTable: MarkdownItPluginCb = (md) => {
                 return true;
             }
 
-            const {rows, endOfTable} = getTableRowPositions(
+            const {rows, endOfTable, pos} = getTableRowPositions(
                 state,
                 startPosition,
                 endPosition,
                 startLine,
             );
 
+            const attrs = extractAttributes(state, pos);
+
             if (!endOfTable) {
                 token = state.push('__yfm_lint', '', 0);
                 token.hidden = true;
@@ -385,6 +398,11 @@ const yfmTable: MarkdownItPluginCb = (md) => {
 
             const tableStart = state.tokens.length;
             token = state.push('yfm_table_open', 'table', 1);
+
+            for (const [property, values] of Object.entries(attrs)) {
+                token.attrJoin(property, values.join(' '));
+            }
+
             token.map = [startLine, endOfTable];
 
             token = state.push('yfm_tbody_open', 'tbody', 1);

package/src/transform/plugins/table/utils.ts

@@ -1,13 +1,61 @@
-/**
- * Parse the markdown-attrs format to retrieve a class name
- * Putting all the requirements in regex was more complicated than parsing a string char by char.
- *
- * @param {string} inputString - The string to parse.
- * @returns {string|null} - The extracted class or null if there is none
- */
+type DatasetKey = `data-${string}`;
+type Attrs = 'class' | 'id' | DatasetKey;
 
-export function parseAttrsClass(inputString: string): string | null {
-    const validChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ .=-_';
+type Selector = (value: string) => {
+    key: Attrs;
+    value: string;
+} | null;
+
+const wrapToData = (key: string): DatasetKey => {
+    if (key.startsWith('data-')) {
+        return key as DatasetKey;
+    }
+
+    return `data-${key}`;
+};
+
+const selectors = {
+    class(value: string) {
+        if (value.startsWith('.')) {
+            return {
+                key: 'class',
+                value: value.slice(1),
+            };
+        }
+
+        return null;
+    },
+    id(value: string) {
+        if (value.startsWith('#')) {
+            return {
+                key: 'id',
+                value: value.slice(1),
+            };
+        }
+
+        return null;
+    },
+    attr(value: string) {
+        const parts = value.split('=');
+
+        if (parts.length === 2) {
+            return {
+                key: wrapToData(parts[0]) as DatasetKey,
+                value: parts[1],
+            };
+        }
+
+        return {
+            key: wrapToData(value) as DatasetKey,
+            value: 'true',
+        };
+    },
+};
+
+const handlers = Object.values(selectors) as Selector[];
+
+export function parseAttrs(inputString: string) {
+    const validChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ .=-_#';
 
     if (!inputString.startsWith('{')) {
         return null;
@@ -23,16 +71,31 @@ export function parseAttrsClass(inputString: string): string | null {
                 return null;
             }
 
-            const parts = contentInside.split('.');
-            if (parts.length !== 2 || !parts[1]) {
-                return null;
-            }
-            //There should be a preceding whitespace
-            if (!parts[0].endsWith(' ') && parts[0] !== '') {
-                return null;
-            }
+            const parts = contentInside.split(' ');
+
+            const attrs: Record<string, string[]> = {
+                class: [],
+                id: [],
+            };
+
+            parts.forEach((part) => {
+                const matched = handlers.find((test) => test(part));
+
+                if (!matched) {
+                    return;
+                }
+
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const {key, value} = matched(part)!;
+
+                if (!attrs[key]) {
+                    attrs[key] = [];
+                }
+
+                attrs[key].push(value);
+            });
 
-            return parts[1];
+            return attrs;
         }
 
         if (!validChars.includes(char)) {