Add data-line attrs support for heading and paragraph (#158)

gravity-ui · Nov 17, 2023 · bee79c1 · bee79c1
1 parent 9c70010
commit bee79c1
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 5 deletions.
diff --git a/src/extensions/base/BaseSchema/BaseSchemaSpecs/index.ts b/src/extensions/base/BaseSchema/BaseSchemaSpecs/index.ts
@@ -8,6 +8,8 @@ export enum BaseNode {
     Paragraph = 'paragraph',
 }
 
+const paragraphLineNumberAttr = 'data-line';
+
 export const pType = nodeTypeFactory(BaseNode.Paragraph);
 
 export type BaseSchemaSpecsOptions = {
@@ -38,11 +40,18 @@ export const BaseSchemaSpecs: ExtensionAuto<BaseSchemaSpecsOptions> = (builder,
         }))
         .addNode(BaseNode.Paragraph, () => ({
             spec: {
+                attrs: {[paragraphLineNumberAttr]: {default: null}},
                 content: 'inline*',
                 group: 'block',
                 parseDOM: [{tag: 'p'}],
-                toDOM() {
-                    return ['p', 0];
+                toDOM(node) {
+                    const lineNumber = node.attrs[paragraphLineNumberAttr];
+
+                    return [
+                        'p',
+                        lineNumber === null ? {} : {[paragraphLineNumberAttr]: lineNumber},
+                        0,
+                    ];
                 },
                 placeholder: opts.paragraphPlaceholder
                     ? {

diff --git a/src/extensions/markdown/Heading/HeadingSpecs/index.ts b/src/extensions/markdown/Heading/HeadingSpecs/index.ts
@@ -4,6 +4,7 @@ import {nodeTypeFactory} from '../../../../utils/schema';
 
 export const headingNodeName = 'heading';
 export const headingLevelAttr = 'level';
+export const headingLineNumberAttr = 'data-line';
 export const headingType = nodeTypeFactory(headingNodeName);
 
 const DEFAULT_PLACEHOLDER = (node: Node) => 'Heading ' + node.attrs[headingLevelAttr];
@@ -18,7 +19,7 @@ export type HeadingSpecsOptions = {
 export const HeadingSpecs: ExtensionAuto<HeadingSpecsOptions> = (builder, opts) => {
     builder.addNode(headingNodeName, () => ({
         spec: {
-            attrs: {[headingLevelAttr]: {default: 1}},
+            attrs: {[headingLevelAttr]: {default: 1}, [headingLineNumberAttr]: {default: null}},
             content: '(text | inline)*',
             group: 'block',
             defining: true,
@@ -31,7 +32,13 @@ export const HeadingSpecs: ExtensionAuto<HeadingSpecsOptions> = (builder, opts)
                 {tag: 'h6', attrs: {[headingLevelAttr]: 6}},
             ],
             toDOM(node) {
-                return ['h' + node.attrs[headingLevelAttr], 0];
+                const lineNumber = node.attrs[headingLineNumberAttr];
+
+                return [
+                    'h' + node.attrs[headingLevelAttr],
+                    lineNumber === null ? {} : {[headingLineNumberAttr]: lineNumber},
+                    0,
+                ];
             },
             placeholder: {
                 content:

diff --git a/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/const.ts b/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/const.ts
@@ -6,4 +6,5 @@ export {headingLevelAttr, headingNodeName} from '../../../markdown/Heading/Headi
 export const YfmHeadingAttr = {
     Level: headingLevelAttr,
     Id: 'id',
+    DataLine: 'data-line',
 } as const;
diff --git a/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/index.ts b/src/extensions/yfm/YfmHeading/YfmHeadingSpecs/index.ts
@@ -21,6 +21,7 @@ export const YfmHeadingSpecs: ExtensionAuto<YfmHeadingSpecsOptions> = (builder,
             attrs: {
                 [YfmHeadingAttr.Id]: {default: ''},
                 [YfmHeadingAttr.Level]: {default: 1},
+                [YfmHeadingAttr.DataLine]: {default: null},
             },
             content: '(text | inline)*',
             group: 'block',
@@ -36,9 +37,13 @@ export const YfmHeadingSpecs: ExtensionAuto<YfmHeadingSpecsOptions> = (builder,
             ],
             toDOM(node) {
                 const id = node.attrs[YfmHeadingAttr.Id];
+                const lineNumber = node.attrs[YfmHeadingAttr.DataLine];
                 return [
                     'h' + node.attrs[YfmHeadingAttr.Level],
-                    id ? {id} : {},
+                    {
+                        id: id || null,
+                        [YfmHeadingAttr.DataLine]: lineNumber,
+                    },
                     0,
                     // [
                     //     'a',