add data-line attribute

packages/editor/src/services/codemirror-editor/use-codemirror-editor/use-codemirror-editor.ts

@@ -11,6 +11,7 @@ import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 import deepmerge from 'ts-deepmerge';
 
 import { emojiAutocompletionSettings } from '../../extensions/emojiAutocompletionSettings';
+import { setDataLine } from '../../extensions/setDataLine';
 
 import { useAppendExtensions, type AppendExtensions } from './utils/append-extensions';
 import { useFocus, type Focus } from './utils/focus';
@@ -23,6 +24,7 @@ import { useReplaceText, type ReplaceText } from './utils/replace-text';
 import { useScrollIntoView, type ScrollIntoView } from './utils/scroll-into-view';
 import { useSetCaretLine, type SetCaretLine } from './utils/set-caret-line';
 
+
 const markdownHighlighting = HighlightStyle.define([
   { tag: tags.heading1, class: 'cm-header-1 cm-header' },
   { tag: tags.heading2, class: 'cm-header-2 cm-header' },
@@ -58,6 +60,7 @@ const defaultExtensions: Extension[] = [
   syntaxHighlighting(markdownHighlighting),
   Prec.lowest(syntaxHighlighting(defaultHighlightStyle)),
   emojiAutocompletionSettings,
+  setDataLine,
 ];
 
 

packages/editor/src/services/extensions/setDataLine.ts

@@ -0,0 +1,47 @@
+
+// Ref: https://www.npmjs.com/package/@uiw/codemirror-extensions-classname
+
+import { RangeSetBuilder } from '@codemirror/state';
+import {
+  EditorView, Decoration, ViewPlugin, DecorationSet, ViewUpdate,
+} from '@codemirror/view';
+
+const stripeDeco = (view: EditorView) => {
+  const builder = new RangeSetBuilder<Decoration>();
+  for (const { from, to } of view.visibleRanges) {
+    for (let pos = from; pos <= to;) {
+      const line = view.state.doc.lineAt(pos);
+      const cls = line.number.toString();
+      builder.add(
+        line.from,
+        line.from,
+        Decoration.line({
+          attributes: { 'data-line': cls },
+        }),
+      );
+      pos = line.to + 1;
+    }
+  }
+  return builder.finish();
+};
+
+export const setDataLine = ViewPlugin.fromClass(
+  class {
+
+    decorations: DecorationSet;
+
+    constructor(view: EditorView) {
+      this.decorations = stripeDeco(view);
+    }
+
+    update(update: ViewUpdate) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = stripeDeco(update.view);
+      }
+    }
+
+  },
+  {
+    decorations: v => v.decorations,
+  },
+);