wip

__tests__/compilers/callouts.test.ts

@@ -0,0 +1,12 @@
+import { mdast, mdx } from '../../index';
+
+describe('callout compiler', () => {
+  it('compiles callouts', () => {
+    const markdown = `> 🦉 Owl Facts
+>
+> Owls have large, tube-shaped eyes that are completely immobile. Their retinas contain many rod cells for excellent night vision and depth perception for hunting.
+`;
+
+    expect(mdx(mdast(markdown))).toBe(markdown);
+  });
+});

enums.ts

@@ -1,5 +1,5 @@
 export enum NodeTypes {
-  callout = 'callout',
+  callout = 'rdme-callout',
   codeTabs = 'code-tabs',
   emoji = 'emoji',
   i = 'i',

index.tsx

@@ -77,7 +77,7 @@ export const compile = (text: string, opts = {}) => {
         remarkPlugins,
         ...opts,
       }),
-    ).replace(/await import\(_resolveDynamicMdxSpecifier\('react'\)\)/, 'arguments[0].imports.React');
+    ).replace(/await import\(_resolveDynamicMdxSpecifier\('react'|"react"\)\)/, 'arguments[0].imports.React');
   } catch (error) {
     console.error(error);
     throw error.line ? new MdxSyntaxError(error, text) : error;

processor/compile/callout.ts

@@ -0,0 +1,24 @@
+import { NodeTypes } from '../../enums';
+import { Callout } from '../../types';
+
+const callout = (node: Callout, _, state, info) => {
+  const tracker = state.createTracker(info);
+  const exit = state.enter(NodeTypes.callout);
+
+  state.join.push(() => 0);
+  const value = state.containerFlow(node, tracker.current());
+  state.join.pop();
+
+  exit();
+
+  const [first, ...rest] = value.split('\n');
+  const blocks = [first, '', ...rest]
+    .map((line: string, index) => (index > 0 ? `>${line.length > 0 ? ' ' : ''}${line}` : line))
+    .join('\n');
+
+  const block = `> ${node.data.hProperties.icon} ${blocks}`;
+
+  return block;
+};
+
+export default callout;

processor/compile/index.ts

@@ -2,6 +2,7 @@ import gemoji from './gemoji';
 import codeTabs from './code-tabs';
 import image from './image';
 import htmlBlock from './html-block';
+import callout from './callout';
 import { NodeTypes } from '../../enums';
 
 function compilers() {
@@ -10,13 +11,14 @@ function compilers() {
   const toMarkdownExtensions = data.toMarkdownExtensions || (data.toMarkdownExtensions = []);
 
   const handlers = {
+    [NodeTypes.callout]: callout,
     [NodeTypes.emoji]: gemoji,
     [NodeTypes.codeTabs]: codeTabs,
     [NodeTypes.image]: image,
     [NodeTypes.htmlBlock]: htmlBlock,
   };
 
   toMarkdownExtensions.push({ extensions: [{ handlers }] });
-};
+}
 
 export default compilers;

processor/transform/callouts.ts

@@ -1,6 +1,7 @@
 import { visit } from 'unist-util-visit';
 import emojiRegex from 'emoji-regex';
 import { Blockquote, BlockContent, Parent, DefinitionContent } from 'mdast';
+import { NodeTypes } from '../../enums';
 
 const regex = `^(${emojiRegex().source}|⚠)(\\s+|$)`;
 
@@ -12,27 +13,23 @@ interface Callout extends Parent {
 const calloutTransformer = () => {
   return (tree: any) => {
     visit(tree, 'blockquote', (node: Blockquote | Callout) => {
-      try {
-        if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text')) return;
+      if (!(node.children[0].type === 'paragraph' && node.children[0].children[0].type === 'text')) return;
 
-        const startText = node.children[0].children[0].value;
-        const [match, icon] = startText.match(regex) || [];
+      const startText = node.children[0].children[0].value;
+      const [match, icon] = startText.match(regex) || [];
 
-        if (icon && match) {
-          const heading = startText.slice(match.length);
+      if (icon && match) {
+        const heading = startText.slice(match.length);
 
-          node.children.shift();
-          node.type = 'rdme-callout';
-          node.data = {
-            hName: 'Callout',
-            hProperties: {
-              heading,
-              icon,
-            },
-          };
-        }
-      } catch (e) {
-        console.log(e);
+        node.children[0].children[0].value = heading;
+        node.type = NodeTypes.callout;
+        node.data = {
+          hName: 'Callout',
+          hProperties: {
+            heading,
+            icon,
+          },
+        };
       }
     });
   };