feat(mdx): implement line-highlight

hiroppy · Jul 8, 2019 · 94e83e7 · 94e83e7
1 parent e95432f
commit 94e83e7
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 15 deletions.
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, hydrate } from 'react-dom';
 import { fetchSlides } from './utils/fetchSlides';
+import { setTargetBlank } from './utils/targetBlank';
 import { AppContainer } from './components/AppContainer';
 import './setup/css';
 
@@ -23,10 +24,6 @@ function createBody(slides = [], hash = 0) {
   createBody(slidesInfo.slides);
 
   if (process.env.TARGET_BLANK) {
-    const { setTargetBlank } = await import(
-      /* webpackPreload: true, webpackChunkName: "target-blank" */ './utils/targetBlank'
-    );
-
     setTargetBlank();
   }
 })();
diff --git a/packages/mdx-loader/__tests__/__snapshots__/index.js.snap b/packages/mdx-loader/__tests__/__snapshots__/index.js.snap
@@ -1,5 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`fusuma-loader should add data-line to pre tag 1`] = `
+"/* @jsx mdx */
+
+
+        import React from 'react';
+        import { mdx } from '@mdx-js/react';
+        export const slides = [
+          (props) => (
+            <>
+
+    <pre data-line=\\"5\\"><code parentName=\\"pre\\" {...{
+        \\"className\\": \\"language-js\\",
+        \\"metastring\\": \\"line=\\\\\\"5\\\\\\"\\",
+        \\"line\\": \\"\\\\\\"5\\\\\\"\\"
+      }}>{\`first
+\`}</code></pre>
+    <pre data-line=\\"10-100\\"><code parentName=\\"pre\\" {...{
+        \\"className\\": \\"language-ts\\",
+        \\"metastring\\": \\"line=\\\\\\"10-100\\\\\\"\\",
+        \\"line\\": \\"\\\\\\"10-100\\\\\\"\\"
+      }}>{\`second
+\`}</code></pre>
+
+            </>
+          )];
+        export const fusumaProps = [{}];
+const makeShortcode = name => function MDXDefaultShortcode(props) {
+  console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
+  return <div {...props}/>
+};
+
+const layoutProps = {
+  slides
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    <pre><code parentName=\\"pre\\" {...{
+        \\"className\\": \\"language-js\\",
+        \\"metastring\\": \\"line=\\\\\\"5\\\\\\"\\",
+        \\"line\\": \\"\\\\\\"5\\\\\\"\\"
+      }}>{\`first
+\`}</code></pre>
+    <pre><code parentName=\\"pre\\" {...{
+        \\"className\\": \\"language-ts\\",
+        \\"metastring\\": \\"line=\\\\\\"10-100\\\\\\"\\",
+        \\"line\\": \\"\\\\\\"10-100\\\\\\"\\"
+      }}>{\`second
+\`}</code></pre>
+
+    </MDXLayout>;
+}
+
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should add fusuma options 1`] = `
 "/* @jsx mdx */
 
@@ -520,14 +579,17 @@ exports[`fusuma-loader should convert mermaid 1`] = `
           (props) => (
             <>
 
-    <pre><code parentName=\\"pre\\" {...{
-        \\"className\\": \\"language-flow\\"
-      }}>{\`graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
-\`}</code></pre>
+    <div className=\\"mermaid\\" id=\\"mermaid-1\\" data-value=\\"graph TD;
+A-->B;
+A-->C;
+B-->D;
+C-->D;\\" style={{
+      visibility: 'hidden'
+    }}>graph TD;
+A-->B;
+A-->C;
+B-->D;
+C-->D;</div>
 
             </>
           )];
@@ -550,7 +612,7 @@ export default function MDXContent({
     <h1>{\`FlowChart\`}</h1>
     <hr></hr>
     <pre><code parentName=\\"pre\\" {...{
-        \\"className\\": \\"language-flow\\"
+        \\"className\\": \\"language-chart\\"
       }}>{\`graph TD;
     A-->B;
     A-->C;

diff --git a/packages/mdx-loader/__tests__/index.js b/packages/mdx-loader/__tests__/index.js
@@ -78,7 +78,7 @@ This is Note!
 # FlowChart
 ---
 
-\`\`\`flow
+\`\`\`chart
 graph TD;
     A-->B;
     A-->C;
@@ -109,6 +109,19 @@ $$
     <h2 class="test3">hello</h2>
   </div>
 </div>
+`;
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
+  test('should add data-line to pre tag', async () => {
+    const src = `
+\`\`\`js line="5"
+first
+\`\`\`
+
+\`\`\`ts line="10-100"
+second
+\`\`\`
 `;
     expect(await transformToJS(src)).toMatchSnapshot();
   });

diff --git a/packages/mdx-loader/src/mdxPlugin.js b/packages/mdx-loader/src/mdxPlugin.js
@@ -1,6 +1,5 @@
 'use strict';
 
-const visit = require('unist-util-visit');
 const mdxAstToMdxHast = require('@mdx-js/mdx/mdx-ast-to-mdx-hast');
 const { toJSX } = require('@mdx-js/mdx/mdx-hast-to-jsx');
 
@@ -42,6 +41,9 @@ function createFusumaProps(nodes) {
       if (v.slice(0, 13) === 'sectionTitle:') {
         property.sectionTitle = v.slice(13).trim();
       }
+      // if (v.slice(0, 5) === 'line:') {
+      //   property.lines = v.slice(13).trim();
+      // }
     }
   });
 
@@ -96,6 +98,22 @@ function mdxPlugin() {
         });
 
         ++mermaidId;
+      } else if (n.type === 'code' && n.meta) {
+        const lines = n.meta.match(/line="(.+?)"/);
+
+        if (lines === null) {
+          slide.push(n);
+        } else {
+          const line = lines[1];
+          const hash = mdxAstToMdxHast()(n);
+          const value = toJSX(hash).replace('<pre>', `<pre data-line="${line}">`);
+
+          slide.push({
+            ...n,
+            type: 'jsx',
+            value
+          });
+        }
       } else {
         slide.push(n);