feat: mdx callouts

components/Callout/index.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+interface Props extends React.PropsWithChildren<React.HTMLAttributes<HTMLQuoteElement>> {
+  attributes: {};
+  icon: string;
+  theme: string;
+  heading?: React.ReactElement;
+}
+
+const Callout = (props: Props) => {
+  const { attributes, theme, icon, heading } = props;
+
+  return (
+    // @ts-ignore
+    <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
+      {heading && (
+        <h3 className={`callout-heading${heading ? '' : ' empty'}`}>
+          <span className="callout-icon">{icon}</span>
+          {heading}
+        </h3>
+      )}
+      {props.children}
+    </blockquote>
+  );
+};
+
+Callout.sanitize = sanitizeSchema => {
+  sanitizeSchema.attributes['rdme-callout'] = ['icon', 'theme', 'heading'];
+
+  return sanitizeSchema;
+};
+
+export default Callout;

index.tsx

@@ -62,12 +62,14 @@ export const html = (text: string, opts = {}) => {
 };
 
 export const mdast = (text: string, opts = {}) => {
-  const processor = unified().use(remark).use(calloutTransformer);
+  const processor = remark().use(remarkMdx);
 
   try {
+    console.log(processor.parse('wtf'));
     const tree = processor.parse(text);
     return processor.runSync(tree);
   } catch (e) {
+    console.log(e);
     return { type: 'root', children: [] };
   }
 };