Synchronisation of marp slide

packages/presentation/src/services/growi-marpit.ts

@@ -3,6 +3,38 @@ import { Element } from '@marp-team/marpit';
 
 export const MARP_CONTAINER_CLASS_NAME = 'marpit';
 
+// Add data-line to Marp slide.
+// https://github.com/marp-team/marp-vscode/blob/d9af184ed12b65bb28c0f328e250955d548ac1d1/src/plugins/line-number.ts
+const sourceMapIgnoredTypesForElements = ['inline', 'marpit_slide_open'];
+const lineNumber = (md) => {
+  const { marpitSlideContainersOpen } = md.renderer.rules;
+
+  // Enable line sync by per slides
+  md.renderer.rules.marpit_slide_containers_open = (tks, i, opts, env, slf) => {
+    const slide = tks.slice(i + 1).find(t => t.type === 'marpit_slide_open');
+
+    if (slide?.map?.length) {
+      tks[i].attrJoin('class', 'has-data-line');
+      tks[i].attrSet('data-line', slide.map[0]);
+    }
+
+    const renderer = marpitSlideContainersOpen || slf.renderToken;
+    return renderer.call(slf, tks, i, opts, env, slf);
+  };
+  // Enables line sync per elements
+  md.core.ruler.push('marp_growi_source_map_attr', (state) => {
+    for (const token of state.tokens) {
+      if (
+        token.map?.length
+        && !sourceMapIgnoredTypesForElements.includes(token.type)
+      ) {
+        token.attrJoin('class', 'has-data-line');
+        token.attrSet('data-line', token.map[0]);
+      }
+    }
+  });
+};
+
 export const slideMarpit = new Marp({
   container: [
     new Element('div', { class: `slides ${MARP_CONTAINER_CLASS_NAME}` }),
@@ -14,7 +46,7 @@ export const slideMarpit = new Marp({
   emoji: undefined,
   html: false,
   math: false,
-});
+}).use(lineNumber);
 
 export const presentationMarpit = new Marp({
   container: [
@@ -27,4 +59,4 @@ export const presentationMarpit = new Marp({
   emoji: undefined,
   html: false,
   math: false,
-});
+}).use(lineNumber);