sanity-plugin-markdown 3.0.1 → 4.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Sanity.io
+Copyright (c) 2023 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -7,26 +7,20 @@
 
 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).
- 
-### Known issues with the current v3 version
 
-The v2 version used react-mde for editing. The current v3 version @uiw/react-md-editor. This may change before GA.
+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).
 
-At the moment the v3 version does not have drag-and-drop image upload support.
-You can still add markdown image tags, but you will have to get the image url yourself for now.
+![example.png](./assets/example.png)
 
 ## Installation
+Install `sanity-plugin-markdown` and `easymde@2` (peer dependency).
 
 ```
-npm install --save sanity-plugin-markdown
-```
-
-or
-
-```
-yarn add sanity-plugin-markdown
+npm install --save sanity-plugin-markdown easymde@2
 ```
 
 ## Usage
@@ -59,10 +53,139 @@ const myDocument = {
   ]
 }
 ```
-### Demo
+### Next.js compatability
+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";
+```
+
+Then, make sure to add 
+```js
+import 'easymde/dist/easymde.min.css'
+```
+
+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
+
+```tsx
+// CustomMarkdownInput.tsx
+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
+      }
+    }, [])
+
+  return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
+}
+```
+Set the plugin input option:
+
+```ts
+// studio.config.ts
+import {markdownSchema} from 'sanity-plugin-markdown'
+import {CustomMarkdownInput} from './CustomMarkdownInput'
+
+export default defineConfig({
+  // ... rest of the config
+  plugins: [
+    markdownSchema({input: CustomMarkdownInput}),
+  ]
+})
+```
+
+### Customize editor for a single field
+
+Implement a custom input similar to the one above, and use it as `components.input` on the field directly.
+
+```ts
+defineField({
+  type: 'markdown',
+  name: 'markdown',
+  title: 'Markdown',
+  components: {input: CustomMarkdownInput}
+})
+```
+
+### 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
 
-![demo](https://user-images.githubusercontent.com/38528/113196621-91ec8780-9218-11eb-86cc-cf0adfa2fd01.gif)
+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, 
+after upload completes.
+
+The default implementation uses
+```js
+imageAsset => `${imageAsset.url}?w=450`
+```
+
+#### Example imageUrl option
+
+```js
+defineField({
+  type: 'markdown',
+  name: 'markdown',
+  title: 'Markdown',
+  options: {
+    imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
+  }
+})
+```
 
 ## License
 

package/lib/_chunks/plugin-b7a179e6.js

@@ -0,0 +1,162 @@
+'use strict';
+
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var sanity = require('sanity');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styled = require('styled-components');
+var ui = require('@sanity/ui');
+function _interopDefaultCompat(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    default: e
+  };
+}
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+const MarkdownInputStyles = styled__default.default(ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & .CodeMirror.CodeMirror {\n    color: ", ";\n    border-color: ", ";\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ", ";\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ", ";\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .editor-toolbar > * {\n    color: ", ";\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ", ";\n  }\n\n  & .editor-preview {\n    background-color: ", ";\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"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.sanity.color.card.enabled.fg;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.sanity.color.card.enabled.border;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.sanity.color.card.enabled.fg;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.sanity.color.card.enabled.border;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.sanity.color.selectable.primary.hovered.bg;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.sanity.color.card.enabled.bg;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.sanity.color.card.enabled.fg;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.sanity.color.card.enabled.bg;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.sanity.color.card.enabled.bg;
+});
+const SimpleMdeReact = react.lazy(() => import('react-simplemde-editor'));
+function useSimpleMdeReact() {
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    requestAnimationFrame(() => setMounted(true));
+  }, []);
+  return mounted ? SimpleMdeReact : null;
+}
+const defaultMdeTools = ["heading", "bold", "italic", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side"];
+function MarkdownInput(props) {
+  var _a;
+  const {
+    value = "",
+    onChange,
+    elementProps: {
+      onBlur,
+      onFocus,
+      ref
+    },
+    reactMdeProps: {
+      options: mdeCustomOptions,
+      ...reactMdeProps
+    } = {},
+    schemaType
+  } = props;
+  const client = sanity.useClient({
+    apiVersion: "2022-01-01"
+  });
+  const {
+    imageUrl
+  } = (_a = schemaType.options) != null ? _a : {};
+  const imageUpload = react.useCallback((file, onSuccess, onError) => {
+    client.assets.upload("image", file).then(doc => onSuccess(imageUrl ? imageUrl(doc) : "".concat(doc.url, "?w=450"))).catch(e => {
+      console.error(e);
+      onError(e.message);
+    });
+  }, [client, imageUrl]);
+  const mdeOptions = react.useMemo(() => {
+    return {
+      autofocus: false,
+      spellChecker: false,
+      sideBySideFullscreen: false,
+      uploadImage: true,
+      imageUploadFunction: imageUpload,
+      toolbar: defaultMdeTools,
+      status: false,
+      ...mdeCustomOptions
+    };
+  }, [imageUpload, mdeCustomOptions]);
+  const handleChange = react.useCallback(newValue => {
+    onChange(sanity.PatchEvent.from(newValue ? sanity.set(newValue) : sanity.unset()));
+  }, [onChange]);
+  const SimpleMdeReact = useSimpleMdeReact();
+  return /* @__PURE__ */jsxRuntime.jsx(MarkdownInputStyles, {
+    children: SimpleMdeReact && /* @__PURE__ */jsxRuntime.jsx(react.Suspense, {
+      fallback: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        padding: 3,
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          children: "Loading editor..."
+        })
+      }),
+      children: /* @__PURE__ */jsxRuntime.jsx(SimpleMdeReact, {
+        ...reactMdeProps,
+        ref,
+        value,
+        onChange: handleChange,
+        onBlur,
+        onFocus,
+        options: mdeOptions,
+        spellCheck: false
+      })
+    })
+  });
+}
+const markdownTypeName = "markdown";
+const markdownSchemaType = sanity.defineType({
+  type: "string",
+  name: markdownTypeName,
+  title: "Markdown",
+  components: {
+    input: MarkdownInput
+  }
+});
+const markdownSchema = sanity.definePlugin(config => {
+  return {
+    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-b7a179e6.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-b7a179e6.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/useSimpleMdeReact.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport {Box} from '@sanity/ui'\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 {lazy, useEffect, useState} from 'react'\n\nexport const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport function useSimpleMdeReact() {\n  const [mounted, setMounted] = useState(false)\n  useEffect(() => {\n    requestAnimationFrame(() => setMounted(true))\n  }, [])\n\n  return mounted ? SimpleMdeReact : null\n}\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport React, {Suspense, useCallback, useMemo} 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 {useSimpleMdeReact} from './useSimpleMdeReact'\nimport {Box, Text} from '@sanity/ui'\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 SimpleMdeReact = useSimpleMdeReact()\n\n  return (\n    <MarkdownInputStyles>\n      {SimpleMdeReact && (\n        <Suspense\n          fallback={\n            <Box padding={3}>\n              <Text>Loading editor...</Text>\n            </Box>\n          }\n        >\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      )}\n    </MarkdownInputStyles>\n  )\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":["MarkdownInputStyles","styled","Box","_templateObject","_taggedTemplateLiteral","_ref","theme","sanity","color","card","enabled","fg","_ref2","border","_ref3","_ref4","_ref5","selectable","primary","hovered","bg","_ref6","_ref7","_ref8","_ref9","SimpleMdeReact","lazy","useSimpleMdeReact","mounted","setMounted","useState","useEffect","requestAnimationFrame","defaultMdeTools","MarkdownInput","props","_a","value","onChange","elementProps","onBlur","onFocus","ref","reactMdeProps","options","mdeCustomOptions","schemaType","client","useClient","apiVersion","imageUrl","imageUpload","useCallback","file","onSuccess","onError","assets","upload","then","doc","concat","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","Suspense","fallback","padding","Text","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":"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"}

package/lib/_chunks/plugin-ca10aa4c.js

@@ -0,0 +1,151 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { useClient, PatchEvent, set, unset, defineType, definePlugin } from 'sanity';
+import { jsx } from 'react/jsx-runtime';
+import { lazy, useState, useEffect, useCallback, useMemo, Suspense } from 'react';
+import styled from 'styled-components';
+import { Box, Text } from '@sanity/ui';
+const MarkdownInputStyles = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & .CodeMirror.CodeMirror {\n    color: ", ";\n    border-color: ", ";\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ", ";\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ", ";\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .editor-toolbar > * {\n    color: ", ";\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ", ";\n  }\n\n  & .editor-preview {\n    background-color: ", ";\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"])), _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.sanity.color.card.enabled.fg;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.sanity.color.card.enabled.border;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.sanity.color.card.enabled.fg;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.sanity.color.card.enabled.border;
+}, _ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.sanity.color.selectable.primary.hovered.bg;
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.sanity.color.card.enabled.bg;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.sanity.color.card.enabled.fg;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.sanity.color.card.enabled.bg;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.sanity.color.card.enabled.bg;
+});
+const SimpleMdeReact = lazy(() => import('react-simplemde-editor'));
+function useSimpleMdeReact() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    requestAnimationFrame(() => setMounted(true));
+  }, []);
+  return mounted ? SimpleMdeReact : null;
+}
+const defaultMdeTools = ["heading", "bold", "italic", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side"];
+function MarkdownInput(props) {
+  var _a;
+  const {
+    value = "",
+    onChange,
+    elementProps: {
+      onBlur,
+      onFocus,
+      ref
+    },
+    reactMdeProps: {
+      options: mdeCustomOptions,
+      ...reactMdeProps
+    } = {},
+    schemaType
+  } = props;
+  const client = useClient({
+    apiVersion: "2022-01-01"
+  });
+  const {
+    imageUrl
+  } = (_a = schemaType.options) != null ? _a : {};
+  const imageUpload = useCallback((file, onSuccess, onError) => {
+    client.assets.upload("image", file).then(doc => onSuccess(imageUrl ? imageUrl(doc) : "".concat(doc.url, "?w=450"))).catch(e => {
+      console.error(e);
+      onError(e.message);
+    });
+  }, [client, imageUrl]);
+  const mdeOptions = useMemo(() => {
+    return {
+      autofocus: false,
+      spellChecker: false,
+      sideBySideFullscreen: false,
+      uploadImage: true,
+      imageUploadFunction: imageUpload,
+      toolbar: defaultMdeTools,
+      status: false,
+      ...mdeCustomOptions
+    };
+  }, [imageUpload, mdeCustomOptions]);
+  const handleChange = useCallback(newValue => {
+    onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
+  }, [onChange]);
+  const SimpleMdeReact = useSimpleMdeReact();
+  return /* @__PURE__ */jsx(MarkdownInputStyles, {
+    children: SimpleMdeReact && /* @__PURE__ */jsx(Suspense, {
+      fallback: /* @__PURE__ */jsx(Box, {
+        padding: 3,
+        children: /* @__PURE__ */jsx(Text, {
+          children: "Loading editor..."
+        })
+      }),
+      children: /* @__PURE__ */jsx(SimpleMdeReact, {
+        ...reactMdeProps,
+        ref,
+        value,
+        onChange: handleChange,
+        onBlur,
+        onFocus,
+        options: mdeOptions,
+        spellCheck: false
+      })
+    })
+  });
+}
+const markdownTypeName = "markdown";
+const markdownSchemaType = defineType({
+  type: "string",
+  name: markdownTypeName,
+  title: "Markdown",
+  components: {
+    input: MarkdownInput
+  }
+});
+const markdownSchema = definePlugin(config => {
+  return {
+    name: "markdown-editor",
+    schema: {
+      types: [config && config.input ? {
+        ...markdownSchemaType,
+        components: {
+          input: config.input
+        }
+      } : markdownSchemaType]
+    }
+  };
+});
+export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType };
+//# sourceMappingURL=plugin-ca10aa4c.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-ca10aa4c.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/useSimpleMdeReact.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport {Box} from '@sanity/ui'\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 {lazy, useEffect, useState} from 'react'\n\nexport const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport function useSimpleMdeReact() {\n  const [mounted, setMounted] = useState(false)\n  useEffect(() => {\n    requestAnimationFrame(() => setMounted(true))\n  }, [])\n\n  return mounted ? SimpleMdeReact : null\n}\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport React, {Suspense, useCallback, useMemo} 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 {useSimpleMdeReact} from './useSimpleMdeReact'\nimport {Box, Text} from '@sanity/ui'\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 SimpleMdeReact = useSimpleMdeReact()\n\n  return (\n    <MarkdownInputStyles>\n      {SimpleMdeReact && (\n        <Suspense\n          fallback={\n            <Box padding={3}>\n              <Text>Loading editor...</Text>\n            </Box>\n          }\n        >\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      )}\n    </MarkdownInputStyles>\n  )\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":["MarkdownInputStyles","styled","Box","_templateObject","_taggedTemplateLiteral","_ref","theme","sanity","color","card","enabled","fg","_ref2","border","_ref3","_ref4","_ref5","selectable","primary","hovered","bg","_ref6","_ref7","_ref8","_ref9","SimpleMdeReact","lazy","useSimpleMdeReact","mounted","setMounted","useState","useEffect","requestAnimationFrame","defaultMdeTools","MarkdownInput","props","_a","value","onChange","elementProps","onBlur","onFocus","ref","reactMdeProps","options","mdeCustomOptions","schemaType","client","useClient","apiVersion","imageUrl","imageUpload","useCallback","file","onSuccess","onError","assets","upload","then","doc","concat","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","Suspense","fallback","padding","Text","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":"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"}

package/lib/index.d.ts

@@ -0,0 +1,108 @@
+/// <reference types="react" />
+
+import {Options} from 'easymde'
+import {Plugin as Plugin_2} from 'sanity'
+import {ReactElement} from 'react'
+import {SanityImageAssetDocument} from '@sanity/client'
+import type {SimpleMDEReactProps} from 'react-simplemde-editor'
+import {StringDefinition} from 'sanity'
+import {StringInputProps} from 'sanity'
+
+export declare const defaultMdeTools: Options['toolbar']
+
+export declare interface MarkdownConfig {
+  /**
+   * When provided, will replace the default input component.
+   *
+   * Use this to customize MarkdownInput by wrapping it in a custom component,
+   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
+   * via the `reactMdeProps` prop.
+   *
+   * ### Example
+   *
+   * ```tsx
+   * // CustomMarkdownInput.tsx
+   * 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
+   *       }
+   *     }, [])
+   *
+   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
+   * }
+   *
+   * // studio.config.ts
+   * markdownSchema({input: CustomMarkdownInput})
+   * ```
+   */
+  input?: (props: StringInputProps) => ReactElement
+}
+
+/**
+ * @public
+ */
+export declare interface MarkdownDefinition
+  extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
+  type: typeof markdownTypeName
+  options?: MarkdownOptions
+}
+
+export declare function MarkdownInput(props: MarkdownInputProps): JSX.Element
+
+export declare interface MarkdownInputProps extends StringInputProps {
+  /**
+   * These are passed along directly to
+   *
+   * Note: MarkdownInput sets certain reactMdeProps.options by default.
+   * These will be merged with any custom options.
+   * */
+  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
+}
+
+declare interface MarkdownOptions {
+  /**
+   * Used to create image url for any uploaded image.
+   * 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`
+   * ```
+   * ## Example
+   * ```js
+   * {
+   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
+   * }
+   * ```
+   * @param imageAsset
+   */
+  imageUrl?: (imageAsset: SanityImageAssetDocument) => string
+}
+
+export declare const markdownSchema: Plugin_2<void | MarkdownConfig>
+
+export declare const markdownSchemaType: {
+  type: 'string'
+  name: 'markdown'
+} & Omit<StringDefinition, 'preview'>
+
+declare const markdownTypeName: 'markdown'
+
+export {}
+
+declare module '@sanity/types' {
+  interface IntrinsicDefinitions {
+    markdown: MarkdownDefinition
+  }
+}