fix: preview styles

README.md

@@ -12,7 +12,9 @@ You can either drag image(s) into the editor or click the bottom bar to bring up
 The resulting image URL(s) are inserted with a default width parameter which you can change to your liking using the [Sanity image pipeline parameters](https://www.sanity.io/docs/image-urls).
 
 The current version is a wrapper around [React SimpleMDE (EasyMDE) Markdown Editor](https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor),
-and by extension [EasyMDE](https://github.com/Ionaru/easy-markdown-editor).
+and by extension, [EasyMDE](https://github.com/Ionaru/easy-markdown-editor).
+
+![example.png](./assets/example.png)
 
 ## Installation
 Install `sanity-plugin-markdown` and `easymde` (peer dependency).
@@ -109,6 +111,43 @@ defineField({
 })
 ```
 
+### Customizing editor preview
+
+One way to customize the preview that does not involve ReactDOMServer 
+(used by React SimpleMDE) is to install [marked](https://github.com/markedjs/marked) and
+[DOMPurify](https://github.com/cure53/DOMPurify) and create a custom preview:
+
+`npm i marked dompurify`
+
+Then use these to create a custom editor:
+
+```tsx
+// MarkdownInputCustomPreview.tsx
+import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
+import DOMPurify from 'dompurify'
+import {marked} from 'marked'
+
+export function CustomMarkdownInput(props) {
+  const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
+    useMemo(() => {
+      return {
+        options: {
+          previewRender: (markdownText) => {
+            // configure as needed according to 
+            // https://github.com/markedjs/marked#docs
+            return DOMPurify.sanitize(marked.parse(markdownText))
+          }
+          //customizing using renderingConfig is also an option
+        },
+      }
+    }, [])
+
+  return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
+}
+```
+
+Use the component as described in previous sections.
+
 ### Custom image urls
 
 Provide a function to options.imageUrl that takes a SanityImageAssetDocument and returns a string.
@@ -134,7 +173,6 @@ defineField({
 })
 ```
 
-
 ## License
 
 MIT-licensed. See LICENSE.

src/components/MarkdownInput.tsx

@@ -1,11 +1,10 @@
 import 'easymde/dist/easymde.min.css'
-
-import {useTheme} from '@sanity/ui'
 import {type Options as EasyMdeOptions} from 'easymde'
-import React, {forwardRef, Ref, useCallback, useMemo} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import SimpleMdeReact, {SimpleMDEReactProps} from 'react-simplemde-editor'
 import {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'
 import {MarkdownOptions} from '../schema'
+import {MarkdownInputStyles} from './MarkdownInputStyles'
 
 export interface MarkdownInputProps extends StringInputProps {
   /**
@@ -34,19 +33,15 @@ export const defaultMdeTools: EasyMdeOptions['toolbar'] = [
   'side-by-side',
 ]
 
-export const MarkdownInput = forwardRef(function MarkdownInput(
-  props: MarkdownInputProps,
-  ref: Ref<any>
-) {
+export function MarkdownInput(props: MarkdownInputProps) {
   const {
     value = '',
     onChange,
-    elementProps: {onBlur, onFocus},
+    elementProps: {onBlur, onFocus, ref},
     reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},
     schemaType,
   } = props
   const client = useClient({apiVersion: '2022-01-01'})
-  const {sanity: studioTheme} = useTheme()
   const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}
 
   const imageUpload = useCallback(
@@ -70,6 +65,7 @@ export const MarkdownInput = forwardRef(function MarkdownInput(
       uploadImage: true,
       imageUploadFunction: imageUpload,
       toolbar: defaultMdeTools,
+      status: false,
       ...mdeCustomOptions,
     }
   }, [imageUpload, mdeCustomOptions])
@@ -82,16 +78,17 @@ export const MarkdownInput = forwardRef(function MarkdownInput(
   )
 
   return (
-    <div ref={ref} data-color-mode={studioTheme.color.dark ? 'dark' : 'light'}>
+    <MarkdownInputStyles>
       <SimpleMdeReact
         {...reactMdeProps}
+        ref={ref}
         value={value}
         onChange={handleChange}
         onBlur={onBlur}
         onFocus={onFocus}
         options={mdeOptions}
         spellCheck={false}
       />
-    </div>
+    </MarkdownInputStyles>
   )
-})
+}

src/components/MarkdownInputStyles.tsx

@@ -0,0 +1,61 @@
+import styled from 'styled-components'
+import {Box} from '@sanity/ui'
+
+export const MarkdownInputStyles = styled(Box)`
+  & .CodeMirror.CodeMirror {
+    color: ${({theme}) => theme.sanity.color.card.enabled.fg};
+    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};
+    background-color: inherit;
+  }
+
+  & .cm-s-easymde .CodeMirror-cursor {
+    border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};
+  }
+
+  & .editor-toolbar,
+  .editor-preview-side {
+    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};
+  }
+
+  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
+    background-color: ${({theme}) => theme.sanity.color.selectable.primary.hovered.bg};
+  }
+
+  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
+    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};
+  }
+
+  & .editor-toolbar > * {
+    color: ${({theme}) => theme.sanity.color.card.enabled.fg};
+  }
+
+  & .editor-toolbar > .active,
+  .editor-toolbar > button:hover,
+  .editor-preview pre,
+  .cm-s-easymde .cm-comment {
+    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};
+  }
+
+  & .editor-preview {
+    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};
+
+    & h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: revert;
+    }
+
+    & ul,
+    li {
+      list-style: revert;
+      padding: revert;
+    }
+
+    & a {
+      text-decoration: revert;
+    }
+  }
+`