sanity-plugin-markdown 4.1.2 → 5.0.0-canary.0

package/README.md

@@ -5,10 +5,10 @@
 
 ## What is it?
 
-A Markdown editor with preview for Sanity Studio. 
+A Markdown editor with preview for Sanity Studio.
 
-Supports Github flavored markdown and image uploads. 
-You can either drag image(s) into the editor or click the bottom bar to bring up a file selector. 
+Supports Github flavored markdown and image uploads.
+You can either drag image(s) into the editor or click the bottom bar to bring up a file selector.
 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),
@@ -17,6 +17,7 @@ and by extension, [EasyMDE](https://github.com/Ionaru/easy-markdown-editor).
 ![example.png](./assets/example.png)
 
 ## Installation
+
 Install `sanity-plugin-markdown` and `easymde@2` (peer dependency).
 
 ```
@@ -28,13 +29,11 @@ npm install --save sanity-plugin-markdown easymde@2
 Add it as a plugin in sanity.config.ts (or .js):
 
 ```js
-import { markdownSchema } from "sanity-plugin-markdown";
+import {markdownSchema} from 'sanity-plugin-markdown'
 
 export default defineConfig({
   // ...
-  plugins: [
-    markdownSchema(),
-  ] 
+  plugins: [markdownSchema()],
 })
 ```
 
@@ -42,61 +41,65 @@ Then, declare a field in your schema to be `markdown`
 
 ```javascript
 const myDocument = {
-  type: "document",
-  name: "myDocument",
+  type: 'document',
+  name: 'myDocument',
   fields: [
     {
-      type: "markdown",
-      description: "A Github flavored markdown field with image uploading",
-      name: "bio"
-    }
-  ]
+      type: 'markdown',
+      description: 'A Github flavored markdown field with image uploading',
+      name: 'bio',
+    },
+  ],
 }
 ```
+
 ### Next.js compatability
-Next.js *without* Next 13 app directory does not support css imports from `node_modules`. 
+
+Next.js _without_ Next 13 app directory does not support css imports from `node_modules`.
 
 To use this plugin in this context (`pages` directory), use the `sanity-plugin-markdown/next` import instead of `sanity-plugin-markdown`:
+
 ```js
-import { markdownSchema } from "sanity-plugin-markdown/next";
+import {markdownSchema} from 'sanity-plugin-markdown/next'
 ```
 
-Then, make sure to add 
+Then, make sure to add
+
 ```js
 import 'easymde/dist/easymde.min.css'
 ```
 
-to  the top of `pages/_app.tsx`.
+to the top of `pages/_app.tsx`.
 
 ### Customizing the default markdown input editor
 
 The plugin takes an `input` config option that can be used in combination with the `MarkdownInput` export
 to configure the underlying React SimpleMDE component:
 
-* Create a custom component that wraps MarkdownInput
-* Memoize reactMdeProps and pass along
+- Create a custom component that wraps MarkdownInput
+- Memoize reactMdeProps and pass along
 
 ```tsx
 // CustomMarkdownInput.tsx
-import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
+import {MarkdownInput, MarkdownInputProps} from 'sanity-plugin-markdown'
 
 export function CustomMarkdownInput(props) {
-  const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
-    useMemo(() => {
-      return {
-        options: {
-          toolbar: ['bold', 'italic'],
-          // more options available, see:
-          // https://github.com/Ionaru/easy-markdown-editor#options-list
-        },
-        // more props available, see:
-        // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
-      }
-    }, [])
+  const reactMdeProps: MarkdownInputProps['reactMdeProps'] = useMemo(() => {
+    return {
+      options: {
+        toolbar: ['bold', 'italic'],
+        // more options available, see:
+        // https://github.com/Ionaru/easy-markdown-editor#options-list
+      },
+      // more props available, see:
+      // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
+    }
+  }, [])
 
   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
 }
 ```
+
 Set the plugin input option:
 
 ```ts
@@ -106,9 +109,7 @@ import {CustomMarkdownInput} from './CustomMarkdownInput'
 
 export default defineConfig({
   // ... rest of the config
-  plugins: [
-    markdownSchema({input: CustomMarkdownInput}),
-  ]
+  plugins: [markdownSchema({input: CustomMarkdownInput})],
 })
 ```
 
@@ -121,13 +122,13 @@ defineField({
   type: 'markdown',
   name: 'markdown',
   title: 'Markdown',
-  components: {input: CustomMarkdownInput}
+  components: {input: CustomMarkdownInput},
 })
 ```
 
 ### Customizing editor preview
 
-One way to customize the preview that does not involve ReactDOMServer 
+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:
 
@@ -137,24 +138,23 @@ Then use these to create a custom editor:
 
 ```tsx
 // MarkdownInputCustomPreview.tsx
-import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
+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
+  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} />
 }
@@ -166,12 +166,13 @@ Use the component as described in previous sections.
 
 Provide a function to options.imageUrl that takes a SanityImageAssetDocument and returns a string.
 
-The function will be invoked whenever an image is pasted or dragged into the markdown editor, 
+The function will be invoked whenever an image is pasted or dragged into the markdown editor,
 after upload completes.
 
 The default implementation uses
+
 ```js
-imageAsset => `${imageAsset.url}?w=450`
+;(imageAsset) => `${imageAsset.url}?w=450`
 ```
 
 #### Example imageUrl option
@@ -182,8 +183,8 @@ defineField({
   name: 'markdown',
   title: 'Markdown',
   options: {
-    imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
-  }
+    imageUrl: (imageAsset) => `${imageAsset.url}?w=400&h=400`,
+  },
 })
 ```
 

package/lib/_chunks-cjs/plugin.js

@@ -0,0 +1,160 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+));
+var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ui = require("@sanity/ui"), styledComponents = require("styled-components");
+const MarkdownInputStyles = styledComponents.styled(ui.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;
+    }
+  }
+`, SimpleMdeReact = react.lazy(() => import("react-simplemde-editor")), defaultMdeTools = [
+  "heading",
+  "bold",
+  "italic",
+  "|",
+  "quote",
+  "unordered-list",
+  "ordered-list",
+  "|",
+  "link",
+  "image",
+  "code",
+  "|",
+  "preview",
+  "side-by-side"
+];
+function MarkdownInput(props) {
+  const {
+    value = "",
+    onChange,
+    elementProps: { onBlur, onFocus, ref },
+    reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
+    schemaType
+  } = props, client = sanity.useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, imageUpload = react.useCallback(
+    (file, onSuccess, onError) => {
+      client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
+        console.error(e), onError(e.message);
+      });
+    },
+    [client, imageUrl]
+  ), mdeOptions = react.useMemo(() => ({
+    autofocus: !1,
+    spellChecker: !1,
+    sideBySideFullscreen: !1,
+    uploadImage: !0,
+    imageUploadFunction: imageUpload,
+    toolbar: defaultMdeTools,
+    status: !1,
+    ...mdeCustomOptions
+  }), [imageUpload, mdeCustomOptions]), handleChange = react.useCallback(
+    (newValue) => {
+      onChange(sanity.PatchEvent.from(newValue ? sanity.set(newValue) : sanity.unset()));
+    },
+    [onChange]
+  );
+  return react.useSyncExternalStore(
+    noop,
+    () => !0,
+    () => !1
+  ) ? /* @__PURE__ */ jsxRuntime.jsx(MarkdownInputStyles, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback, children: /* @__PURE__ */ jsxRuntime.jsx(
+    SimpleMdeReact,
+    {
+      ...reactMdeProps,
+      ref,
+      value,
+      onChange: handleChange,
+      onBlur,
+      onFocus,
+      options: mdeOptions,
+      spellCheck: !1
+    }
+  ) }) }) : /* @__PURE__ */ jsxRuntime.jsx(MarkdownInputStyles, { children: fallback });
+}
+const noop = () => () => {
+}, fallback = /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Loading editor..." }) }), markdownTypeName = "markdown", markdownSchemaType = sanity.defineType({
+  type: "string",
+  name: markdownTypeName,
+  title: "Markdown",
+  components: { input: MarkdownInput }
+}), markdownSchema = sanity.definePlugin((config) => ({
+  name: "markdown-editor",
+  schema: {
+    types: [
+      config && config.input ? { ...markdownSchemaType, components: { input: config.input } } : markdownSchemaType
+    ]
+  }
+}));
+exports.MarkdownInput = MarkdownInput;
+exports.defaultMdeTools = defaultMdeTools;
+exports.markdownSchema = markdownSchema;
+exports.markdownSchemaType = markdownSchemaType;
+//# sourceMappingURL=plugin.js.map

package/lib/_chunks-cjs/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import {Box} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const MarkdownInputStyles = styled(Box)`\n  & .CodeMirror.CodeMirror {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.selectable?.primary?.hovered?.bg};\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-toolbar > * {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-preview {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n    & h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-size: revert;\n    }\n\n    & ul,\n    li {\n      list-style: revert;\n      padding: revert;\n    }\n\n    & a {\n      text-decoration: revert;\n    }\n  }\n`\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport {lazy, Suspense, useCallback, useMemo, useSyncExternalStore} from 'react'\n// dont import non-types here, it will break SSR on next\nimport type {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\nimport {Box, Text} from '@sanity/ui'\n\nconst SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport interface MarkdownInputProps extends StringInputProps {\n  /**\n   * These are passed along directly to\n   *\n   * Note: MarkdownInput sets certain reactMdeProps.options by default.\n   * These will be merged with any custom options.\n   */\n  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>\n}\n\nexport const defaultMdeTools: EasyMdeOptions['toolbar'] = [\n  'heading',\n  'bold',\n  'italic',\n  '|',\n  'quote',\n  'unordered-list',\n  'ordered-list',\n  '|',\n  'link',\n  'image',\n  'code',\n  '|',\n  'preview',\n  'side-by-side',\n]\n\nexport function MarkdownInput(props: MarkdownInputProps) {\n  const {\n    value = '',\n    onChange,\n    elementProps: {onBlur, onFocus, ref},\n    reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n    schemaType,\n  } = props\n  const client = useClient({apiVersion: '2022-01-01'})\n  const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n\n  const imageUpload = useCallback(\n    (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {\n      client.assets\n        .upload('image', file)\n        .then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`))\n        .catch((e) => {\n          console.error(e)\n          onError(e.message)\n        })\n    },\n    [client, imageUrl],\n  )\n\n  const mdeOptions: EasyMdeOptions = useMemo(() => {\n    return {\n      autofocus: false,\n      spellChecker: false,\n      sideBySideFullscreen: false,\n      uploadImage: true,\n      imageUploadFunction: imageUpload,\n      toolbar: defaultMdeTools,\n      status: false,\n      ...mdeCustomOptions,\n    }\n  }, [imageUpload, mdeCustomOptions])\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      onChange(PatchEvent.from(newValue ? set(newValue) : unset()))\n    },\n    [onChange],\n  )\n\n  const mounted = useSyncExternalStore(\n    noop,\n    () => true,\n    () => false,\n  )\n\n  if (!mounted) {\n    return <MarkdownInputStyles>{fallback}</MarkdownInputStyles>\n  }\n\n  return (\n    <MarkdownInputStyles>\n      <Suspense fallback={fallback}>\n        <SimpleMdeReact\n          {...reactMdeProps}\n          ref={ref}\n          value={value}\n          onChange={handleChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          options={mdeOptions}\n          spellCheck={false}\n        />\n      </Suspense>\n    </MarkdownInputStyles>\n  )\n}\n\n// eslint-disable-next-line no-empty-function\nconst noop = () => () => {}\n\nconst fallback = (\n  <Box padding={3}>\n    <Text>Loading editor...</Text>\n  </Box>\n)\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n  /**\n   * Used to create image url for any uploaded image.\n   * The function will be invoked whenever an image is pasted or dragged into the\n   * markdown editor, after upload completes.\n   *\n   * The default implementation uses\n   * ```js\n   * imageAsset => `${imageAsset.url}?w=450`\n   * ```\n   * ## Example\n   * ```js\n   * {\n   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n   * }\n   * ```\n   * @param imageAsset\n   */\n  imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof markdownTypeName\n  options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n  // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    markdown: MarkdownDefinition\n  }\n}\n\nexport const markdownSchemaType = defineType({\n  type: 'string',\n  name: markdownTypeName,\n  title: 'Markdown',\n  components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n  /**\n   * When provided, will replace the default input component.\n   *\n   * Use this to customize MarkdownInput by wrapping it in a custom component,\n   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   * via the `reactMdeProps` prop.\n   *\n   * ### Example\n   *\n   * ```tsx\n   * // CustomMarkdownInput.tsx\n   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n   *\n   * export function CustomMarkdownInput(props) {\n   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n   *     useMemo(() => {\n   *       return {\n   *         options: {\n   *           toolbar: ['bold', 'italic'],\n   *           // more options available, see:\n   *           // https://github.com/Ionaru/easy-markdown-editor#options-list\n   *         },\n   *         // more props available, see:\n   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   *       }\n   *     }, [])\n   *\n   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n   * }\n   *\n   * // studio.config.ts\n   * markdownSchema({input: CustomMarkdownInput})\n   * ```\n   */\n  input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n  return {\n    name: 'markdown-editor',\n    schema: {\n      types: [\n        config && config.input\n          ? {...markdownSchemaType, components: {input: config.input}}\n          : markdownSchemaType,\n      ],\n    },\n  }\n})\n"],"names":["styled","Box","lazy","useClient","useCallback","useMemo","PatchEvent","set","unset","useSyncExternalStore","jsx","Suspense","Text","defineType","definePlugin"],"mappings":"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"}

package/lib/_chunks-es/plugin.mjs

@@ -0,0 +1,146 @@
+import { useClient, PatchEvent, set, unset, defineType, definePlugin } from "sanity";
+import { jsx } from "react/jsx-runtime";
+import { lazy, useCallback, useMemo, useSyncExternalStore, Suspense } from "react";
+import { Box, Text } from "@sanity/ui";
+import { styled } from "styled-components";
+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;
+    }
+  }
+`, SimpleMdeReact = lazy(() => import("react-simplemde-editor")), defaultMdeTools = [
+  "heading",
+  "bold",
+  "italic",
+  "|",
+  "quote",
+  "unordered-list",
+  "ordered-list",
+  "|",
+  "link",
+  "image",
+  "code",
+  "|",
+  "preview",
+  "side-by-side"
+];
+function MarkdownInput(props) {
+  const {
+    value = "",
+    onChange,
+    elementProps: { onBlur, onFocus, ref },
+    reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
+    schemaType
+  } = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, imageUpload = useCallback(
+    (file, onSuccess, onError) => {
+      client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
+        console.error(e), onError(e.message);
+      });
+    },
+    [client, imageUrl]
+  ), mdeOptions = useMemo(() => ({
+    autofocus: !1,
+    spellChecker: !1,
+    sideBySideFullscreen: !1,
+    uploadImage: !0,
+    imageUploadFunction: imageUpload,
+    toolbar: defaultMdeTools,
+    status: !1,
+    ...mdeCustomOptions
+  }), [imageUpload, mdeCustomOptions]), handleChange = useCallback(
+    (newValue) => {
+      onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
+    },
+    [onChange]
+  );
+  return useSyncExternalStore(
+    noop,
+    () => !0,
+    () => !1
+  ) ? /* @__PURE__ */ jsx(MarkdownInputStyles, { children: /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(
+    SimpleMdeReact,
+    {
+      ...reactMdeProps,
+      ref,
+      value,
+      onChange: handleChange,
+      onBlur,
+      onFocus,
+      options: mdeOptions,
+      spellCheck: !1
+    }
+  ) }) }) : /* @__PURE__ */ jsx(MarkdownInputStyles, { children: fallback });
+}
+const noop = () => () => {
+}, fallback = /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Text, { children: "Loading editor..." }) }), markdownTypeName = "markdown", markdownSchemaType = defineType({
+  type: "string",
+  name: markdownTypeName,
+  title: "Markdown",
+  components: { input: MarkdownInput }
+}), markdownSchema = definePlugin((config) => ({
+  name: "markdown-editor",
+  schema: {
+    types: [
+      config && config.input ? { ...markdownSchemaType, components: { input: config.input } } : markdownSchemaType
+    ]
+  }
+}));
+export {
+  MarkdownInput,
+  defaultMdeTools,
+  markdownSchema,
+  markdownSchemaType
+};
+//# sourceMappingURL=plugin.mjs.map

package/lib/_chunks-es/plugin.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.mjs","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import {Box} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const MarkdownInputStyles = styled(Box)`\n  & .CodeMirror.CodeMirror {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.selectable?.primary?.hovered?.bg};\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-toolbar > * {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-preview {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n    & h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-size: revert;\n    }\n\n    & ul,\n    li {\n      list-style: revert;\n      padding: revert;\n    }\n\n    & a {\n      text-decoration: revert;\n    }\n  }\n`\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport {lazy, Suspense, useCallback, useMemo, useSyncExternalStore} from 'react'\n// dont import non-types here, it will break SSR on next\nimport type {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\nimport {Box, Text} from '@sanity/ui'\n\nconst SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport interface MarkdownInputProps extends StringInputProps {\n  /**\n   * These are passed along directly to\n   *\n   * Note: MarkdownInput sets certain reactMdeProps.options by default.\n   * These will be merged with any custom options.\n   */\n  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>\n}\n\nexport const defaultMdeTools: EasyMdeOptions['toolbar'] = [\n  'heading',\n  'bold',\n  'italic',\n  '|',\n  'quote',\n  'unordered-list',\n  'ordered-list',\n  '|',\n  'link',\n  'image',\n  'code',\n  '|',\n  'preview',\n  'side-by-side',\n]\n\nexport function MarkdownInput(props: MarkdownInputProps) {\n  const {\n    value = '',\n    onChange,\n    elementProps: {onBlur, onFocus, ref},\n    reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n    schemaType,\n  } = props\n  const client = useClient({apiVersion: '2022-01-01'})\n  const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n\n  const imageUpload = useCallback(\n    (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {\n      client.assets\n        .upload('image', file)\n        .then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`))\n        .catch((e) => {\n          console.error(e)\n          onError(e.message)\n        })\n    },\n    [client, imageUrl],\n  )\n\n  const mdeOptions: EasyMdeOptions = useMemo(() => {\n    return {\n      autofocus: false,\n      spellChecker: false,\n      sideBySideFullscreen: false,\n      uploadImage: true,\n      imageUploadFunction: imageUpload,\n      toolbar: defaultMdeTools,\n      status: false,\n      ...mdeCustomOptions,\n    }\n  }, [imageUpload, mdeCustomOptions])\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      onChange(PatchEvent.from(newValue ? set(newValue) : unset()))\n    },\n    [onChange],\n  )\n\n  const mounted = useSyncExternalStore(\n    noop,\n    () => true,\n    () => false,\n  )\n\n  if (!mounted) {\n    return <MarkdownInputStyles>{fallback}</MarkdownInputStyles>\n  }\n\n  return (\n    <MarkdownInputStyles>\n      <Suspense fallback={fallback}>\n        <SimpleMdeReact\n          {...reactMdeProps}\n          ref={ref}\n          value={value}\n          onChange={handleChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          options={mdeOptions}\n          spellCheck={false}\n        />\n      </Suspense>\n    </MarkdownInputStyles>\n  )\n}\n\n// eslint-disable-next-line no-empty-function\nconst noop = () => () => {}\n\nconst fallback = (\n  <Box padding={3}>\n    <Text>Loading editor...</Text>\n  </Box>\n)\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n  /**\n   * Used to create image url for any uploaded image.\n   * The function will be invoked whenever an image is pasted or dragged into the\n   * markdown editor, after upload completes.\n   *\n   * The default implementation uses\n   * ```js\n   * imageAsset => `${imageAsset.url}?w=450`\n   * ```\n   * ## Example\n   * ```js\n   * {\n   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n   * }\n   * ```\n   * @param imageAsset\n   */\n  imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof markdownTypeName\n  options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n  // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    markdown: MarkdownDefinition\n  }\n}\n\nexport const markdownSchemaType = defineType({\n  type: 'string',\n  name: markdownTypeName,\n  title: 'Markdown',\n  components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n  /**\n   * When provided, will replace the default input component.\n   *\n   * Use this to customize MarkdownInput by wrapping it in a custom component,\n   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   * via the `reactMdeProps` prop.\n   *\n   * ### Example\n   *\n   * ```tsx\n   * // CustomMarkdownInput.tsx\n   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n   *\n   * export function CustomMarkdownInput(props) {\n   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n   *     useMemo(() => {\n   *       return {\n   *         options: {\n   *           toolbar: ['bold', 'italic'],\n   *           // more options available, see:\n   *           // https://github.com/Ionaru/easy-markdown-editor#options-list\n   *         },\n   *         // more props available, see:\n   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   *       }\n   *     }, [])\n   *\n   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n   * }\n   *\n   * // studio.config.ts\n   * markdownSchema({input: CustomMarkdownInput})\n   * ```\n   */\n  input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n  return {\n    name: 'markdown-editor',\n    schema: {\n      types: [\n        config && config.input\n          ? {...markdownSchemaType, components: {input: config.input}}\n          : markdownSchemaType,\n      ],\n    },\n  }\n})\n"],"names":[],"mappings":"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"}