feat: Support options.theme in Input component

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

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>
       )}

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(() => {

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)