Show frontmatter on story

Author: inokawa

.storybook/components/slate-editor.tsx

@@ -88,7 +88,12 @@ const renderElement = ({
         </pre>
       );
     case "yaml":
-      break;
+    case "toml":
+      return (
+        <pre>
+          <code {...attributes}>{children}</code>
+        </pre>
+      );
     case "definition":
       break;
     case "footnoteDefinition":

.storybook/components/slate0.47-editor.tsx

@@ -106,7 +106,12 @@ export default forwardRef(
               </pre>
             );
           case "yaml":
-            break;
+          case "toml":
+            return (
+              <pre>
+                <code {...attributes}>{children}</code>
+              </pre>
+            );
           case "definition":
             break;
           case "footnoteDefinition":

.storybook/playground-current.stories.tsx

@@ -3,15 +3,24 @@ import { Node } from "slate";
 import unified from "unified";
 import markdown from "remark-parse";
 import gfm from "remark-gfm";
+import frontmatter from "remark-frontmatter";
 import stringify from "remark-stringify";
 import { remarkToSlate, slateToRemark } from "../src";
 import SlateEditor from "./components/slate-editor";
 import TextEditor from "./components/text-editor";
 import Text from "./components/text";
 import text from "../fixture/article.md";
 
-const toSlateProcessor = unified().use(markdown).use(gfm).use(remarkToSlate);
-const toRemarkProcessor = unified().use(slateToRemark).use(gfm).use(stringify);
+const toSlateProcessor = unified()
+  .use(markdown)
+  .use(gfm)
+  .use(frontmatter)
+  .use(remarkToSlate);
+const toRemarkProcessor = unified()
+  .use(slateToRemark)
+  .use(gfm)
+  .use(frontmatter)
+  .use(stringify);
 
 const toSlate = (s: string) => toSlateProcessor.processSync(s).result as Node[];
 const toMd = (value: Node[]) => {

.storybook/playground-legacy.stories.tsx

@@ -3,6 +3,7 @@ import { Value } from "slate_legacy";
 import unified from "unified";
 import markdown from "remark-parse";
 import gfm from "remark-gfm";
+import frontmatter from "remark-frontmatter";
 import stringify from "remark-stringify";
 import { remarkToSlateLegacy, slateToRemarkLegacy } from "../src";
 import SlateEditor from "./components/slate0.47-editor";
@@ -13,10 +14,12 @@ import text from "../fixture/article.md";
 const toSlateProcessor = unified()
   .use(markdown)
   .use(gfm)
+  .use(frontmatter)
   .use(remarkToSlateLegacy);
 const toRemarkProcessor = unified()
   .use(slateToRemarkLegacy)
   .use(gfm)
+  .use(frontmatter)
   .use(stringify);
 
 const toSlate = (s: string) =>

fixture/article.md

@@ -1,3 +1,9 @@
+---
+title: "This is frontmatter"
+date: 2020-04-30 12:34
+categories: [JavaScript, React]
+---
+
 # heading 1
 
 ## heading 2