feat(YfmCut): add data-line attribute to cut title

Author: d3m1d0v

demo/stories/examples/line-numbers/md-plugin.ts

@@ -13,6 +13,7 @@ const TOKENS: readonly string[] = [
     'dt_open',
     'checkbox_open',
     'yfm_note_open',
+    'yfm_cut_open',
 ];
 
 export const lineNumbersPlugin: PluginSimple = (md) => {

src/extensions/yfm/YfmCut/YfmCutSpecs/const.ts

@@ -8,6 +8,7 @@ export enum CutNode {
 
 export enum CutAttr {
     Class = 'class',
+    Line = 'data-line',
     Markup = 'data-markup',
 }
 

src/extensions/yfm/YfmCut/YfmCutSpecs/parser.ts

@@ -10,6 +10,19 @@ const getAttrs: ParserToken['getAttrs'] = (tok) => {
 
 export const parserTokens: Record<CutNode, ParserToken> = {
     [CutNode.Cut]: {name: CutNode.Cut, type: 'block', getAttrs},
-    [CutNode.CutTitle]: {name: CutNode.CutTitle, type: 'block'},
+    [CutNode.CutTitle]: {
+        name: CutNode.CutTitle,
+        type: 'block',
+        getAttrs: (token, tokens, index) => {
+            let dataLine = token.attrGet('data-line');
+            if (!dataLine) {
+                const prevToken = tokens[index - 1];
+                if (prevToken?.type === 'yfm_cut_open') {
+                    dataLine = prevToken.attrGet('data-line');
+                }
+            }
+            return {[CutAttr.Line]: dataLine};
+        },
+    },
     [CutNode.CutContent]: {name: CutNode.CutContent, type: 'block'},
 };

src/extensions/yfm/YfmCut/YfmCutSpecs/schema.ts

@@ -43,7 +43,10 @@ export const getSchemaSpecs = (
     },
 
     [CutNode.CutTitle]: {
-        attrs: {class: {default: YfmCutClassName.Title}},
+        attrs: {
+            [CutAttr.Class]: {default: YfmCutClassName.Title},
+            [CutAttr.Line]: {default: null},
+        },
         content: 'inline*',
         group: 'block yfm-cut',
         parseDOM: [{tag: `.${YfmCutClassName.Title}`}],

src/extensions/yfm/YfmCut/const.ts

@@ -1,6 +1,6 @@
 import {YfmCutClassName as YfmCutClassNameSpecs} from './YfmCutSpecs/const';
 
-export {CutNode, cutType, cutTitleType, cutContentType} from './YfmCutSpecs/const';
+export {CutNode, CutAttr, cutType, cutTitleType, cutContentType} from './YfmCutSpecs/const';
 
 export const YfmCutClassName = {
     ...YfmCutClassNameSpecs,

src/extensions/yfm/YfmCut/nodeviews/yfm-cut-title.ts

@@ -1,7 +1,7 @@
 import type {Node} from '#pm/model';
 import type {NodeView} from '#pm/view';
 
-import {YfmCutClassName} from '../const';
+import {CutAttr, YfmCutClassName} from '../const';
 
 import './yfm-cut-title.scss';
 
@@ -17,6 +17,7 @@ export class YfmCutTitleNodeView implements NodeView {
         this.dom = document.createElement('div');
         this.dom.classList.add(YfmCutClassName.Title);
         this.dom.addEventListener('click', this._onTitleClick);
+        updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);
 
         this.contentDOM = this.dom.appendChild(document.createElement('div'));
         this.contentDOM.classList.add(YfmCutClassName.TitleInner);
@@ -26,6 +27,7 @@ export class YfmCutTitleNodeView implements NodeView {
     update(node: Node): boolean {
         if (this.node.type !== node.type) return false;
         this.node = node;
+        updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);
         return true;
     }
 
@@ -52,3 +54,11 @@ export class YfmCutTitleNodeView implements NodeView {
         e.preventDefault();
     };
 }
+
+function updateDomAttribute(elem: Element, attr: string, value: string | null | undefined) {
+    if (value) {
+        elem.setAttribute(attr, value);
+    } else {
+        elem.removeAttribute(attr);
+    }
+}