From 4cb65c1ba0b3e28dee0337d3caf2c650cda363e6 Mon Sep 17 00:00:00 2001
From: Raymond Julin <raymond.julin@gmail.com>
Date: Thu, 26 Mar 2020 14:39:49 +0100
Subject: [PATCH] feat: Support options.theme in Input component

---
 README.md                     |  4 ++--
 src/components/Input/index.js |  2 +-
 src/components/Mermaid.js     |  3 ++-
 src/useMermaid.js             | 13 ++++++++-----
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index e8fc3b7..2f030dc 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 Add a [Mermaid](https://mermaid-js.github.io/mermaid/) graph input type for [Sanity CMS](http://sanity.io)
 
+Read more about [using the plugin in this blog post](https://raymondjulin.com/blog/drawing-diagrams-in-sanity-with-mermaid-js)
+
 ![Screenshot](/sanity-plugin-mermaid.png)
 
 ```js
@@ -31,8 +33,6 @@ In order to render in your frontend you need to manually use the mermaid package
 
 ## TODO
 
-- [ ] Document how to use in frontend
 - [ ] Write a helper package providing a serialiser for portable text
 - [ ] Link to mermaid docs in editor
 - [ ] Syntax highlighted editor
-- [ ] Polish and npm publishing
diff --git a/src/components/Input/index.js b/src/components/Input/index.js
index af3cedf..a41e678 100644
--- a/src/components/Input/index.js
+++ b/src/components/Input/index.js
@@ -40,7 +40,7 @@ function Input ({
       {!isSSR && (
         <React.Suspense fallback={<div />}>
           <FormField level={level} label="Preview">
-            <Mermaid graph={value} id={id} />
+            <Mermaid graph={value} id={id} options={type?.options} />
           </FormField>
         </React.Suspense>
       )}
diff --git a/src/components/Mermaid.js b/src/components/Mermaid.js
index 5a973cb..d7b5b59 100644
--- a/src/components/Mermaid.js
+++ b/src/components/Mermaid.js
@@ -6,9 +6,10 @@ import useMermaid from '../useMermaid'
 export default function Mermaid ({
   graph,
   id,
+  options,
   fallback = 'Invalid graph definition'
 }) {
-  const [valid, html] = useMermaid(graph, id)
+  const [valid, html] = useMermaid(graph, id, options)
   const ref = useRef()
 
   useEffect(() => {
diff --git a/src/useMermaid.js b/src/useMermaid.js
index 20992ea..caa4923 100644
--- a/src/useMermaid.js
+++ b/src/useMermaid.js
@@ -1,13 +1,16 @@
 import { useState, useEffect } from 'react'
 import mermaid from 'mermaid'
 
-mermaid.mermaidAPI.initialize({
-  startOnLoad: true,
-})
-
-export default function useMermaid(graph = '', id = 'mermaid') {
+export default function useMermaid(graph = '', id = 'mermaid', options = {}) {
   const [svg, setSvg] = useState('')
 
+  useEffect(() => {
+    mermaid.mermaidAPI.initialize({
+      startOnLoad: true,
+      theme: options.theme || 'neutral',
+    })
+  }, [])
+
   useEffect(() => {
     try {
       mermaid.parse(graph)