sanity-plugin-markdown 3.0.0 → 4.0.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,125 @@ const myDocument = {
   ]
 }
 ```
-### Demo
 
-![demo](https://user-images.githubusercontent.com/38528/113196621-91ec8780-9218-11eb-86cc-cf0adfa2fd01.gif)
+### 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
+
+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/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 {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
+  }
+}

package/lib/index.esm.js

@@ -1,2 +1,141 @@
-function e(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}import{jsx as r}from"react/jsx-runtime";import n from"@uiw/react-md-editor";import{useState as o,useEffect as a,forwardRef as i,useCallback as c}from"react";import{useClient as s,PatchEvent as l,unset as u,set as p,defineType as m,definePlugin as f}from"sanity";import{useTheme as d,Card as y}from"@sanity/ui";import b from"rehype-sanitize";const g=i((function(e,t){const{value:i="",onChange:m,elementProps:{onBlur:f,onFocus:g},readOnly:w}=e,[h,P]=o(i),j=function(e,t){const[r,n]=o(e);return a((()=>{const r=setTimeout((()=>{n(e)}),t);return()=>clearTimeout(r)}),[e,t]),r}(h,100),v=s({apiVersion:"2022-01-01"});a((()=>{P(i)}),[i]),a((()=>{!j&&i?m(l.from([u()])):j!==i&&m(l.from([p(j)]))}),[j,m]);const{sanity:k}=d(),D=c((async e=>{await O(e.clipboardData,P,v)}),[P,v]),E=c((async e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer&&await O(e.dataTransfer,P,v)}),[P,v]);return r("div",{ref:t,"data-color-mode":k.color.dark?"dark":"light",children:w?r(y,{border:!0,padding:3,children:r(n.Markdown,{source:i,rehypePlugins:[[b]]})}):r(n,{value:h,onChange:P,onBlur:f,onFocus:g,previewOptions:{rehypePlugins:[[b]]},preview:"edit",onPaste:D,onDrop:E})})}));async function O(e,t,r){const n=[];for(let t=0;t<e.items.length;t+=1){const r=e.files.item(t);r&&n.push(r)}await Promise.all(n.map((async e=>{const n=await r.assets.upload("image",e).then((e=>"".concat(e.url,"?w=450"))),o=function(e){const t=document.querySelector("textarea");if(!t)return null;let r=t.value;const n=r.length,o=t.selectionStart,a=t.selectionEnd,i=r.slice(0,o),c=r.slice(o,n);return r=i+e+c,t.value=r,t.selectionEnd=a+e.length,r}("![](".concat(n,")"));o&&t(o)})))}const w=m(function(r){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?e(Object(o),!0).forEach((function(e){t(r,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}({type:"string",name:"markdown",title:"Markdown"},{components:{input:g}})),h=g,P=f({name:"markdown-editor",schema:{types:[w]}});export{h as MarkdownEditor,P as markdownSchema,w as markdownSchemaType};
+const _excluded = ["options"];
+var _templateObject;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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 'easymde/dist/easymde.min.css';
+import { useCallback, useMemo } from 'react';
+import SimpleMdeReact from 'react-simplemde-editor';
+import styled from 'styled-components';
+import { Box } 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 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
+      } = {},
+      schemaType
+    } = props,
+    reactMdeProps = _objectWithoutProperties(props.reactMdeProps, _excluded);
+  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 _objectSpread({
+      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]);
+  return /* @__PURE__ */jsx(MarkdownInputStyles, {
+    children: /* @__PURE__ */jsx(SimpleMdeReact, _objectSpread(_objectSpread({}, 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 ? _objectSpread(_objectSpread({}, markdownSchemaType), {}, {
+        components: {
+          input: config.input
+        }
+      }) : markdownSchemaType]
+    }
+  };
+});
+export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType };
 //# sourceMappingURL=index.esm.js.map

package/lib/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/Editor.tsx","../src/hooks/useDebounce.ts","../src/schema.ts","../src/index.ts"],"sourcesContent":["import MDEditor from '@uiw/react-md-editor'\nimport useDebounce from '../hooks/useDebounce'\nimport {PatchEvent, SanityClient, set, StringInputProps, unset, useClient} from 'sanity'\nimport React, {\n  ClipboardEvent,\n  forwardRef,\n  Ref,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n} from 'react'\nimport {Card, useTheme} from '@sanity/ui'\nimport rehypeSanitize from 'rehype-sanitize'\n\nexport const MarkdownEditor = forwardRef(function MarkdownEditor(\n  props: StringInputProps,\n  ref: Ref<any>\n) {\n  const {\n    value = '',\n    onChange,\n    elementProps: {onBlur, onFocus},\n    readOnly,\n  } = props\n  const [editedValue, setEditedValue] = useState<string | undefined>(value)\n  const debouncedValue = useDebounce(editedValue, 100)\n  // const client = useClient({apiVersion: '2021-03-25'})\n  const client = useClient({apiVersion: '2022-01-01'})\n  useEffect(() => {\n    setEditedValue(value)\n  }, [value])\n\n  useEffect(() => {\n    if (!debouncedValue && value) {\n      onChange(PatchEvent.from([unset()]))\n    } else if (debouncedValue !== value) {\n      onChange(PatchEvent.from([set(debouncedValue)]))\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedValue, onChange])\n\n  const {sanity: studioTheme} = useTheme()\n  const onPaste = useCallback(\n    async (event: ClipboardEvent<HTMLDivElement>) => {\n      await onImagePasted(event.clipboardData, setEditedValue, client)\n    },\n    [setEditedValue, client]\n  )\n\n  const onDrop = useCallback(\n    async (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault()\n      event.stopPropagation()\n      if (event.dataTransfer) {\n        await onImagePasted(event.dataTransfer, setEditedValue, client)\n      }\n    },\n    [setEditedValue, client]\n  )\n\n  return (\n    <div ref={ref} data-color-mode={studioTheme.color.dark ? 'dark' : 'light'}>\n      {readOnly ? (\n        <Card border padding={3}>\n          <MDEditor.Markdown source={value} rehypePlugins={[[rehypeSanitize]]} />\n        </Card>\n      ) : (\n        <MDEditor\n          value={editedValue}\n          onChange={setEditedValue}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          previewOptions={{\n            rehypePlugins: [[rehypeSanitize]],\n          }}\n          preview=\"edit\"\n          onPaste={onPaste}\n          onDrop={onDrop}\n        />\n      )}\n    </div>\n  )\n})\n\n// https://github.com/uiwjs/react-md-editor/issues/83#issuecomment-1185471844\nasync function onImagePasted(\n  dataTransfer: DataTransfer,\n  setMarkdown: (value: SetStateAction<string | undefined>) => void,\n  client: SanityClient\n) {\n  const files: File[] = []\n  for (let index = 0; index < dataTransfer.items.length; index += 1) {\n    const file = dataTransfer.files.item(index)\n\n    if (file) {\n      files.push(file)\n    }\n  }\n\n  await Promise.all(\n    files.map(async (file) => {\n      const url = await client.assets.upload('image', file).then((doc) => `${doc.url}?w=450`)\n      const insertedMarkdown = insertToTextArea(`![](${url})`)\n      if (!insertedMarkdown) {\n        return\n      }\n      setMarkdown(insertedMarkdown)\n    })\n  )\n}\n\nfunction insertToTextArea(insertString: string) {\n  const textarea = document.querySelector('textarea')\n  if (!textarea) {\n    return null\n  }\n\n  let sentence = textarea.value\n  const len = sentence.length\n  const pos = textarea.selectionStart\n  const end = textarea.selectionEnd\n\n  const front = sentence.slice(0, pos)\n  const back = sentence.slice(pos, len)\n\n  sentence = front + insertString + back\n\n  textarea.value = sentence\n  textarea.selectionEnd = end + insertString.length\n\n  return sentence\n}\n","import {useState, useEffect} from 'react'\n\nexport default function useDebounce(value: unknown, delay: number) {\n  const [debouncedValue, setDebouncedValue] = useState(value)\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => clearTimeout(handler)\n  }, [value, delay])\n\n  return debouncedValue\n}\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownEditor} from './components/Editor'\n\nconst markdownTypeName = 'markdown' as const\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof markdownTypeName\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: MarkdownEditor}} as {}), //TODO revert when rc.1 ships\n})\n","import {MarkdownEditor as Editor} from './components/Editor'\nimport {definePlugin} from 'sanity'\nimport {markdownSchemaType, MarkdownDefinition} from './schema'\n\n// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:\nconst MarkdownEditor = Editor\n\nexport {MarkdownEditor, markdownSchemaType}\nexport type {MarkdownDefinition}\n\nexport const markdownSchema = definePlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [markdownSchemaType],\n  },\n})\n"],"names":["MarkdownEditor","forwardRef","props","ref","value","onChange","elementProps","onBlur","onFocus","readOnly","editedValue","setEditedValue","useState","debouncedValue","delay","setDebouncedValue","useEffect","handler","setTimeout","clearTimeout","useDebounce","client","useClient","apiVersion","PatchEvent","from","unset","set","sanity","studioTheme","useTheme","onPaste","useCallback","async","onImagePasted","event","clipboardData","onDrop","preventDefault","stopPropagation","dataTransfer","jsx","color","dark","children","Card","border","padding","MDEditor","Markdown","source","rehypePlugins","rehypeSanitize","previewOptions","preview","setMarkdown","files","index","items","length","file","item","push","Promise","all","map","url","assets","upload","then","doc","insertedMarkdown","insertString","textarea","document","querySelector","sentence","len","pos","selectionStart","end","selectionEnd","front","slice","back","insertToTextArea","concat","markdownSchemaType","defineType","_objectSpread","type","name","title","components","input","Editor","markdownSchema","definePlugin","schema","types"],"mappings":"2qBAgBO,MAAMA,EAAiBC,GAAW,SACvCC,EACAC,GAEM,MAAAC,MACJA,EAAQ,GAAAC,SACRA,EACAC,cAAcC,OAACA,EAAAC,QAAQA,GAAOC,SAC9BA,GACEP,GACGQ,EAAaC,GAAkBC,EAA6BR,GAC7DS,ECzBgB,SAAYT,EAAgBU,GAClD,MAAOD,EAAgBE,GAAqBH,EAASR,GAS9C,OARPY,GAAU,KACF,MAAAC,EAAUC,YAAW,KACzBH,EAAkBX,EAAK,GACtBU,GAEI,MAAA,IAAMK,aAAaF,EAAO,GAChC,CAACb,EAAOU,IAEJD,CACT,CDcyBO,CAAYV,EAAa,KAE1CW,EAASC,EAAU,CAACC,WAAY,eACtCP,GAAU,KACRL,EAAeP,EAAK,GACnB,CAACA,IAEJY,GAAU,MACHH,GAAkBT,EACrBC,EAASmB,EAAWC,KAAK,CAACC,OACjBb,IAAmBT,GAC5BC,EAASmB,EAAWC,KAAK,CAACE,EAAId,KAChC,GAEC,CAACA,EAAgBR,IAEpB,MAAOuB,OAAQC,GAAeC,IACxBC,EAAUC,GACdC,gBACQC,EAAcC,EAAMC,cAAezB,EAAgBU,EAAM,GAEjE,CAACV,EAAgBU,IAGbgB,EAASL,GACbC,UACEE,EAAMG,iBACNH,EAAMI,kBACFJ,EAAMK,oBACFN,EAAcC,EAAMK,aAAc7B,EAAgBU,EAC1D,GAEF,CAACV,EAAgBU,IAGnB,OACGoB,EAAA,MAAA,CAAItC,MAAU,kBAAiB0B,EAAYa,MAAMC,KAAO,OAAS,QAC/DC,WACEH,EAAAI,EAAA,CAAKC,QAAM,EAACC,QAAS,EACpBH,SAAAH,EAACO,EAASC,SAAT,CAAkBC,OAAQ9C,EAAO+C,cAAe,CAAC,CAACC,QAGpDX,EAAAO,EAAA,CACC5C,MAAOM,EACPL,SAAUM,EACVJ,SACAC,UACA6C,eAAgB,CACdF,cAAe,CAAC,CAACC,KAEnBE,QAAQ,OACRvB,UACAM,YAKV,IAGAJ,eAAeC,EACbM,EACAe,EACAlC,GAEA,MAAMmC,EAAgB,GACtB,IAAA,IAASC,EAAQ,EAAGA,EAAQjB,EAAakB,MAAMC,OAAQF,GAAS,EAAG,CACjE,MAAMG,EAAOpB,EAAagB,MAAMK,KAAKJ,GAEjCG,GACFJ,EAAMM,KAAKF,EAEf,OAEMG,QAAQC,IACZR,EAAMS,KAAIhC,UACR,MAAMiC,QAAY7C,EAAO8C,OAAOC,OAAO,QAASR,GAAMS,MAAMC,aAAWA,EAAIJ,IAAW,YAChFK,EASZ,SAA0BC,GAClB,MAAAC,EAAWC,SAASC,cAAc,YACxC,IAAKF,EACI,OAAA,KAGT,IAAIG,EAAWH,EAASrE,MACxB,MAAMyE,EAAMD,EAASjB,OACfmB,EAAML,EAASM,eACfC,EAAMP,EAASQ,aAEfC,EAAQN,EAASO,MAAM,EAAGL,GAC1BM,EAAOR,EAASO,MAAML,EAAKD,GAO1B,OALPD,EAAWM,EAAQV,EAAeY,EAElCX,EAASrE,MAAQwE,EACRH,EAAAQ,aAAeD,EAAMR,EAAab,OAEpCiB,CACT,CA7B+BS,CAAiB,OAAAC,OAAOpB,EAAM,MAClDK,GAGLhB,EAAYgB,EAAgB,IAGlC,CE5GA,MAgBagB,EAAqBC,iWAAWC,CAAA,CAC3CC,KAAM,SACNC,KAlBuB,WAmBvBC,MAAO,YACH,CAACC,WAAY,CAACC,MAAO9F,MClBrBA,EAAiB+F,EAKVC,EAAiBC,EAAa,CACzCN,KAAM,kBACNO,OAAQ,CACNC,MAAO,CAACZ"}
+{"version":3,"file":"index.esm.js","sources":["../src/components/MarkdownInputStyles.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 'easymde/dist/easymde.min.css'\nimport {type Options as EasyMdeOptions} from 'easymde'\nimport React, {useCallback, useMemo} from 'react'\nimport SimpleMdeReact, {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\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  return (\n    <MarkdownInputStyles>\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    </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","theme","sanity","color","card","enabled","fg","border","selectable","primary","hovered","bg","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","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","SimpleMdeReact","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":";;;;;;;;;;;;;;;;;AAGa,MAAAA,mBAAA,GAAsBC,OAAOC,GAAG,CAAA,giCAEhC;EAAA,IAAC;IAACC;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAC,EAAA;AAAA,GACtC;EAAA,IAAC;IAACL;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAE,MAAA;AAAA,GAK7C;EAAA,IAAC;IAACN;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAC,EAAA;AAAA,GAK7C;EAAA,IAAC;IAACL;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAE,MAAA;AAAA,GAIzC;EAAA,IAAC;IAACN;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMK,UAAW,CAAAC,OAAA,CAAQC,OAAQ,CAAAC,EAAA;AAAA,GAI3D;EAAA,IAAC;IAACV;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAM,EAAA;AAAA,GAIxD;EAAA,IAAC;IAACV;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAC,EAAA;AAAA,GAOlC;EAAA,IAAC;IAACL;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAM,EAAA;AAAA,GAI7C;EAAA,IAAC;IAACV;EAAK,CAAA;EAAA,OAAMA,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAM,EAAA;AAAA,EAAA;ACrB9D,MAAMC,eAA6C,GAAA,CACxD,SAAA,EACA,MAAA,EACA,QAAA,EACA,GAAA,EACA,OAAA,EACA,gBAAA,EACA,cAAA,EACA,GAAA,EACA,MAAA,EACA,OAAA,EACA,MAAA,EACA,GAAA,EACA,SAAA,EACA,cAAA,CACF;AAEO,SAASC,cAAcC,KAA2B,EAAA;EAnCzD,IAAAC,EAAA;EAoCQ,MAAA;MACJC,KAAQ,GAAA,EAAA;MACRC,QAAA;MACAC,YAAc,EAAA;QAACC,MAAQ;QAAAC,OAAA;QAASC;MAAG,CAAA;MACnCC,eAAe;QAACC,OAAA,EAASC;UAAsC,CAAC,CAAA;MAChEC;IACE,CAAA,GAAAX,KAAA;IAF4CQ,aAAA,4BAE5CR,KAAA,CAFFQ;EAGF,MAAMI,MAAS,GAAAC,SAAA,CAAU;IAACC,UAAA,EAAY;EAAa,CAAA,CAAA;EACnD,MAAM;IAACC;EAAQ,CAAA,GAAA,CAAKd,EAAW,GAAAU,UAAA,CAAAF,OAAA,KAAX,YAAsD,EAAC;EAE3E,MAAMO,WAAc,GAAAC,WAAA,CAClB,CAACC,IAAY,EAAAC,SAAA,EAAkCC,OAAqC,KAAA;IAC3ER,MAAA,CAAAS,MAAA,CACJC,OAAO,OAAS,EAAAJ,IAAI,EACpBK,IAAK,CAACC,OAAQL,SAAU,CAAAJ,QAAA,GAAWA,SAASS,GAAG,CAAA,aAAOA,GAAI,CAAAC,GAAA,WAAW,CAAC,CACtE,CAAAC,KAAA,CAAOC,CAAM,IAAA;MACZC,OAAA,CAAQC,MAAMF,CAAC,CAAA;MACfP,OAAA,CAAQO,EAAEG,OAAO,CAAA;IAAA,CAClB,CAAA;EACL,CAAA,EACA,CAAClB,QAAQG,QAAQ,CAAA,CACnB;EAEM,MAAAgB,UAAA,GAA6BC,QAAQ,MAAM;IACxC;MACLC,SAAW,EAAA,KAAA;MACXC,YAAc,EAAA,KAAA;MACdC,oBAAsB,EAAA,KAAA;MACtBC,WAAa,EAAA,IAAA;MACbC,mBAAqB,EAAArB,WAAA;MACrBsB,OAAS,EAAAxC,eAAA;MACTyC,MAAQ,EAAA;IAAA,GACL7B,gBAAA;EACL,CACC,EAAA,CAACM,WAAa,EAAAN,gBAAgB,CAAC,CAAA;EAElC,MAAM8B,YAAe,GAAAvB,WAAA,CAClBwB,QAAqB,IAAA;IACXtC,QAAA,CAAAuC,UAAA,CAAWC,KAAKF,QAAW,GAAAG,GAAA,CAAIH,QAAQ,CAAI,GAAAI,KAAA,EAAO,CAAC,CAAA;EAC9D,CAAA,EACA,CAAC1C,QAAQ,CAAA,CACX;EAEA,OACG,eAAA2C,GAAA,CAAA9D,mBAAA,EAAA;IACC+D,QAAC,EAAA,eAAAD,GAAA,CAAAE,cAAA,kCACKxC,aAAA;MACJD,GAAA;MACAL,KAAA;MACAC,QAAU,EAAAqC,YAAA;MACVnC,MAAA;MACAC,OAAA;MACAG,OAAS,EAAAsB,UAAA;MACTkB,UAAY,EAAA;IAAA;EACd,CACF,CAAA;AAEJ;ACzFO,MAAMC,gBAAmB,GAAA,UAAA;AAsCzB,MAAMC,qBAAqBC,UAAW,CAAA;EAC3CC,IAAM,EAAA,QAAA;EACNC,IAAM,EAAAJ,gBAAA;EACNK,KAAO,EAAA,UAAA;EACPC,UAAA,EAAY;IAACC,KAAA,EAAO1D;EAAa;AACnC,CAAC,CAAA;ACLY,MAAA2D,cAAA,GAAiBC,YAAa,CAACC,MAAkC,IAAA;EACrE,OAAA;IACLN,IAAM,EAAA,iBAAA;IACNO,MAAQ,EAAA;MACNC,KAAO,EAAA,CACLF,MAAU,IAAAA,MAAA,CAAOH,KACb,mCAAIN,kBAAA;QAAoBK,UAAY,EAAA;UAACC,KAAO,EAAAG,MAAA,CAAOH;QAAK;MAAA,KACxDN,kBAAA;IAER;EAAA,CACF;AACF,CAAC,CAAA;"}

package/lib/index.js

@@ -1,2 +1,156 @@
-"use strict";function e(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function t(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react/jsx-runtime"),n=require("@uiw/react-md-editor"),o=require("react"),a=require("sanity"),i=require("@sanity/ui"),c=require("rehype-sanitize");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=s(n),l=s(c);const f=o.forwardRef((function(e,t){const{value:n="",onChange:c,elementProps:{onBlur:s,onFocus:f},readOnly:p}=e,[y,m]=o.useState(n),b=function(e,t){const[r,n]=o.useState(e);return o.useEffect((()=>{const r=setTimeout((()=>{n(e)}),t);return()=>clearTimeout(r)}),[e,t]),r}(y,100),h=a.useClient({apiVersion:"2022-01-01"});o.useEffect((()=>{m(n)}),[n]),o.useEffect((()=>{!b&&n?c(a.PatchEvent.from([a.unset()])):b!==n&&c(a.PatchEvent.from([a.set(b)]))}),[b,c]);const{sanity:w}=i.useTheme(),g=o.useCallback((async e=>{await d(e.clipboardData,m,h)}),[m,h]),O=o.useCallback((async e=>{e.preventDefault(),e.stopPropagation(),e.dataTransfer&&await d(e.dataTransfer,m,h)}),[m,h]);return r.jsx("div",{ref:t,"data-color-mode":w.color.dark?"dark":"light",children:p?r.jsx(i.Card,{border:!0,padding:3,children:r.jsx(u.default.Markdown,{source:n,rehypePlugins:[[l.default]]})}):r.jsx(u.default,{value:y,onChange:m,onBlur:s,onFocus:f,previewOptions:{rehypePlugins:[[l.default]]},preview:"edit",onPaste:g,onDrop:O})})}));async function d(e,t,r){const n=[];for(let t=0;t<e.items.length;t+=1){const r=e.files.item(t);r&&n.push(r)}await Promise.all(n.map((async e=>{const n=await r.assets.upload("image",e).then((e=>"".concat(e.url,"?w=450"))),o=function(e){const t=document.querySelector("textarea");if(!t)return null;let r=t.value;const n=r.length,o=t.selectionStart,a=t.selectionEnd,i=r.slice(0,o),c=r.slice(o,n);return r=i+e+c,t.value=r,t.selectionEnd=a+e.length,r}("![](".concat(n,")"));o&&t(o)})))}const p=a.defineType(function(r){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?e(Object(o),!0).forEach((function(e){t(r,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}({type:"string",name:"markdown",title:"Markdown"},{components:{input:f}})),y=f,m=a.definePlugin({name:"markdown-editor",schema:{types:[p]}});exports.MarkdownEditor=y,exports.markdownSchema=m,exports.markdownSchemaType=p;
+'use strict';
+
+const _excluded = ["options"];
+var _templateObject;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var sanity = require('sanity');
+var jsxRuntime = require('react/jsx-runtime');
+require('easymde/dist/easymde.min.css');
+var react = require('react');
+var SimpleMdeReact = require('react-simplemde-editor');
+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 SimpleMdeReact__default = /*#__PURE__*/_interopDefaultCompat(SimpleMdeReact);
+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 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
+      } = {},
+      schemaType
+    } = props,
+    reactMdeProps = _objectWithoutProperties(props.reactMdeProps, _excluded);
+  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 _objectSpread({
+      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]);
+  return /* @__PURE__ */jsxRuntime.jsx(MarkdownInputStyles, {
+    children: /* @__PURE__ */jsxRuntime.jsx(SimpleMdeReact__default.default, _objectSpread(_objectSpread({}, 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 ? _objectSpread(_objectSpread({}, markdownSchemaType), {}, {
+        components: {
+          input: config.input
+        }
+      }) : markdownSchemaType]
+    }
+  };
+});
+exports.MarkdownInput = MarkdownInput;
+exports.defaultMdeTools = defaultMdeTools;
+exports.markdownSchema = markdownSchema;
+exports.markdownSchemaType = markdownSchemaType;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/Editor.tsx","../src/hooks/useDebounce.ts","../src/schema.ts","../src/index.ts"],"sourcesContent":["import MDEditor from '@uiw/react-md-editor'\nimport useDebounce from '../hooks/useDebounce'\nimport {PatchEvent, SanityClient, set, StringInputProps, unset, useClient} from 'sanity'\nimport React, {\n  ClipboardEvent,\n  forwardRef,\n  Ref,\n  SetStateAction,\n  useCallback,\n  useEffect,\n  useState,\n  DragEvent,\n} from 'react'\nimport {Card, useTheme} from '@sanity/ui'\nimport rehypeSanitize from 'rehype-sanitize'\n\nexport const MarkdownEditor = forwardRef(function MarkdownEditor(\n  props: StringInputProps,\n  ref: Ref<any>\n) {\n  const {\n    value = '',\n    onChange,\n    elementProps: {onBlur, onFocus},\n    readOnly,\n  } = props\n  const [editedValue, setEditedValue] = useState<string | undefined>(value)\n  const debouncedValue = useDebounce(editedValue, 100)\n  // const client = useClient({apiVersion: '2021-03-25'})\n  const client = useClient({apiVersion: '2022-01-01'})\n  useEffect(() => {\n    setEditedValue(value)\n  }, [value])\n\n  useEffect(() => {\n    if (!debouncedValue && value) {\n      onChange(PatchEvent.from([unset()]))\n    } else if (debouncedValue !== value) {\n      onChange(PatchEvent.from([set(debouncedValue)]))\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debouncedValue, onChange])\n\n  const {sanity: studioTheme} = useTheme()\n  const onPaste = useCallback(\n    async (event: ClipboardEvent<HTMLDivElement>) => {\n      await onImagePasted(event.clipboardData, setEditedValue, client)\n    },\n    [setEditedValue, client]\n  )\n\n  const onDrop = useCallback(\n    async (event: DragEvent<HTMLDivElement>) => {\n      event.preventDefault()\n      event.stopPropagation()\n      if (event.dataTransfer) {\n        await onImagePasted(event.dataTransfer, setEditedValue, client)\n      }\n    },\n    [setEditedValue, client]\n  )\n\n  return (\n    <div ref={ref} data-color-mode={studioTheme.color.dark ? 'dark' : 'light'}>\n      {readOnly ? (\n        <Card border padding={3}>\n          <MDEditor.Markdown source={value} rehypePlugins={[[rehypeSanitize]]} />\n        </Card>\n      ) : (\n        <MDEditor\n          value={editedValue}\n          onChange={setEditedValue}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          previewOptions={{\n            rehypePlugins: [[rehypeSanitize]],\n          }}\n          preview=\"edit\"\n          onPaste={onPaste}\n          onDrop={onDrop}\n        />\n      )}\n    </div>\n  )\n})\n\n// https://github.com/uiwjs/react-md-editor/issues/83#issuecomment-1185471844\nasync function onImagePasted(\n  dataTransfer: DataTransfer,\n  setMarkdown: (value: SetStateAction<string | undefined>) => void,\n  client: SanityClient\n) {\n  const files: File[] = []\n  for (let index = 0; index < dataTransfer.items.length; index += 1) {\n    const file = dataTransfer.files.item(index)\n\n    if (file) {\n      files.push(file)\n    }\n  }\n\n  await Promise.all(\n    files.map(async (file) => {\n      const url = await client.assets.upload('image', file).then((doc) => `${doc.url}?w=450`)\n      const insertedMarkdown = insertToTextArea(`![](${url})`)\n      if (!insertedMarkdown) {\n        return\n      }\n      setMarkdown(insertedMarkdown)\n    })\n  )\n}\n\nfunction insertToTextArea(insertString: string) {\n  const textarea = document.querySelector('textarea')\n  if (!textarea) {\n    return null\n  }\n\n  let sentence = textarea.value\n  const len = sentence.length\n  const pos = textarea.selectionStart\n  const end = textarea.selectionEnd\n\n  const front = sentence.slice(0, pos)\n  const back = sentence.slice(pos, len)\n\n  sentence = front + insertString + back\n\n  textarea.value = sentence\n  textarea.selectionEnd = end + insertString.length\n\n  return sentence\n}\n","import {useState, useEffect} from 'react'\n\nexport default function useDebounce(value: unknown, delay: number) {\n  const [debouncedValue, setDebouncedValue] = useState(value)\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => clearTimeout(handler)\n  }, [value, delay])\n\n  return debouncedValue\n}\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownEditor} from './components/Editor'\n\nconst markdownTypeName = 'markdown' as const\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof markdownTypeName\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: MarkdownEditor}} as {}), //TODO revert when rc.1 ships\n})\n","import {MarkdownEditor as Editor} from './components/Editor'\nimport {definePlugin} from 'sanity'\nimport {markdownSchemaType, MarkdownDefinition} from './schema'\n\n// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:\nconst MarkdownEditor = Editor\n\nexport {MarkdownEditor, markdownSchemaType}\nexport type {MarkdownDefinition}\n\nexport const markdownSchema = definePlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [markdownSchemaType],\n  },\n})\n"],"names":["MarkdownEditor","forwardRef","props","ref","value","onChange","elementProps","onBlur","onFocus","readOnly","editedValue","setEditedValue","useState","debouncedValue","delay","setDebouncedValue","useEffect","handler","setTimeout","clearTimeout","useDebounce","client","useClient","apiVersion","PatchEvent","from","unset","set","sanity","studioTheme","useTheme","onPaste","useCallback","async","onImagePasted","event","clipboardData","onDrop","preventDefault","stopPropagation","dataTransfer","jsx","color","dark","children","Card","border","padding","MDEditor","Markdown","source","rehypePlugins","rehypeSanitize","previewOptions","preview","setMarkdown","files","index","items","length","file","item","push","Promise","all","map","url","assets","upload","then","doc","insertedMarkdown","insertString","textarea","document","querySelector","sentence","len","pos","selectionStart","end","selectionEnd","front","slice","back","insertToTextArea","concat","markdownSchemaType","defineType","_objectSpread","type","name","title","components","input","Editor","markdownSchema","definePlugin","schema","types"],"mappings":"qpBAgBO,MAAMA,EAAiBC,EAAAA,YAAW,SACvCC,EACAC,GAEM,MAAAC,MACJA,EAAQ,GAAAC,SACRA,EACAC,cAAcC,OAACA,EAAAC,QAAQA,GAAOC,SAC9BA,GACEP,GACGQ,EAAaC,GAAkBC,WAA6BR,GAC7DS,ECzBgB,SAAYT,EAAgBU,GAClD,MAAOD,EAAgBE,GAAqBH,WAASR,GAS9C,OARPY,EAAAA,WAAU,KACF,MAAAC,EAAUC,YAAW,KACzBH,EAAkBX,EAAK,GACtBU,GAEI,MAAA,IAAMK,aAAaF,EAAO,GAChC,CAACb,EAAOU,IAEJD,CACT,CDcyBO,CAAYV,EAAa,KAE1CW,EAASC,EAAAA,UAAU,CAACC,WAAY,eACtCP,EAAAA,WAAU,KACRL,EAAeP,EAAK,GACnB,CAACA,IAEJY,EAAAA,WAAU,MACHH,GAAkBT,EACrBC,EAASmB,aAAWC,KAAK,CAACC,EAAAA,WACjBb,IAAmBT,GAC5BC,EAASmB,aAAWC,KAAK,CAACE,MAAId,KAChC,GAEC,CAACA,EAAgBR,IAEpB,MAAOuB,OAAQC,GAAeC,EAASA,WACjCC,EAAUC,EAAAA,aACdC,gBACQC,EAAcC,EAAMC,cAAezB,EAAgBU,EAAM,GAEjE,CAACV,EAAgBU,IAGbgB,EAASL,EAAAA,aACbC,UACEE,EAAMG,iBACNH,EAAMI,kBACFJ,EAAMK,oBACFN,EAAcC,EAAMK,aAAc7B,EAAgBU,EAC1D,GAEF,CAACV,EAAgBU,IAGnB,OACGoB,EAAAA,IAAA,MAAA,CAAItC,MAAU,kBAAiB0B,EAAYa,MAAMC,KAAO,OAAS,QAC/DC,WACEH,EAAAA,IAAAI,OAAA,CAAKC,QAAM,EAACC,QAAS,EACpBH,SAAAH,EAAAA,IAACO,UAASC,SAAT,CAAkBC,OAAQ9C,EAAO+C,cAAe,CAAC,CAACC,EAAAA,cAGpDX,EAAAA,IAAAO,UAAA,CACC5C,MAAOM,EACPL,SAAUM,EACVJ,SACAC,UACA6C,eAAgB,CACdF,cAAe,CAAC,CAACC,EAAAA,WAEnBE,QAAQ,OACRvB,UACAM,YAKV,IAGAJ,eAAeC,EACbM,EACAe,EACAlC,GAEA,MAAMmC,EAAgB,GACtB,IAAA,IAASC,EAAQ,EAAGA,EAAQjB,EAAakB,MAAMC,OAAQF,GAAS,EAAG,CACjE,MAAMG,EAAOpB,EAAagB,MAAMK,KAAKJ,GAEjCG,GACFJ,EAAMM,KAAKF,EAEf,OAEMG,QAAQC,IACZR,EAAMS,KAAIhC,UACR,MAAMiC,QAAY7C,EAAO8C,OAAOC,OAAO,QAASR,GAAMS,MAAMC,aAAWA,EAAIJ,IAAW,YAChFK,EASZ,SAA0BC,GAClB,MAAAC,EAAWC,SAASC,cAAc,YACxC,IAAKF,EACI,OAAA,KAGT,IAAIG,EAAWH,EAASrE,MACxB,MAAMyE,EAAMD,EAASjB,OACfmB,EAAML,EAASM,eACfC,EAAMP,EAASQ,aAEfC,EAAQN,EAASO,MAAM,EAAGL,GAC1BM,EAAOR,EAASO,MAAML,EAAKD,GAO1B,OALPD,EAAWM,EAAQV,EAAeY,EAElCX,EAASrE,MAAQwE,EACRH,EAAAQ,aAAeD,EAAMR,EAAab,OAEpCiB,CACT,CA7B+BS,CAAiB,OAAAC,OAAOpB,EAAM,MAClDK,GAGLhB,EAAYgB,EAAgB,IAGlC,CE5GA,MAgBagB,EAAqBC,EAAAA,0WAAWC,CAAA,CAC3CC,KAAM,SACNC,KAlBuB,WAmBvBC,MAAO,YACH,CAACC,WAAY,CAACC,MAAO9F,MClBrBA,EAAiB+F,EAKVC,EAAiBC,EAAAA,aAAa,CACzCN,KAAM,kBACNO,OAAQ,CACNC,MAAO,CAACZ"}
+{"version":3,"file":"index.js","sources":["../src/components/MarkdownInputStyles.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 'easymde/dist/easymde.min.css'\nimport {type Options as EasyMdeOptions} from 'easymde'\nimport React, {useCallback, useMemo} from 'react'\nimport SimpleMdeReact, {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\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  return (\n    <MarkdownInputStyles>\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    </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","theme","sanity","color","card","enabled","fg","border","selectable","primary","hovered","bg","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","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","SimpleMdeReact","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-markdown",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
   "keywords": [
     "sanity",
@@ -15,13 +15,13 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/sanity-io/sanity-plugin-markdown.git"
+    "url": "git@github.com:sanity-io/sanity-plugin-markdown.git"
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "exports": {
     ".": {
-      "types": "./lib/src/index.d.ts",
+      "types": "./lib/index.d.ts",
       "source": "./src/index.ts",
       "import": "./lib/index.esm.js",
       "require": "./lib/index.js",
@@ -32,59 +32,64 @@
   "main": "./lib/index.js",
   "module": "./lib/index.esm.js",
   "source": "./src/index.ts",
-  "types": "./lib/src/index.d.ts",
+  "types": "./lib/index.d.ts",
   "files": [
-    "src",
     "lib",
-    "v2-incompatible.js",
-    "sanity.json"
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
   ],
   "scripts": {
     "prebuild": "npm run clean && plugin-kit verify-package --silent && pkg-utils",
-    "build": "pkg-utils build --strict",
+    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
     "clean": "rimraf lib",
     "compile": "tsc --noEmit",
-    "format": "prettier src -w",
+    "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
     "prepare": "husky install",
-    "prepublishOnly": " npm run build",
-    "watch": "pkg-utils watch"
+    "prepublishOnly": "run-s build",
+    "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
     "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "1.0.0-beta.32",
-    "@uiw/react-md-editor": "^3.19.7",
-    "rehype-sanitize": "^5.0.1"
+    "@sanity/ui": "^1.0.0",
+    "react-simplemde-editor": "^5.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/pkg-utils": "^1.18.0",
-    "@sanity/plugin-kit": "^2.1.16",
+    "@sanity/pkg-utils": "^2.1.0",
+    "@sanity/plugin-kit": "^3.1.1",
     "@sanity/semantic-release-preset": "^2.0.2",
+    "@types/react": "^18.0.26",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
-    "eslint": "^8.26.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "easymde": "^2.18.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.1",
     "prettier-plugin-packagejson": "^2.3.0",
-    "react": "^18",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
     "rimraf": "^3.0.2",
-    "sanity": "3.0.0-rc.2",
+    "sanity": "^3.1.4",
     "styled-components": "^5.3.6",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
+    "easymde": "^2",
     "react": "^18",
-    "sanity": "dev-preview || 3.0.0-rc.2",
+    "sanity": "^3",
     "styled-components": "^5.2"
   },
   "engines": {

package/src/components/MarkdownInput.tsx

@@ -0,0 +1,94 @@
+import 'easymde/dist/easymde.min.css'
+import {type Options as EasyMdeOptions} from 'easymde'
+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 {
+  /**
+   * 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'>
+}
+
+export const defaultMdeTools: EasyMdeOptions['toolbar'] = [
+  'heading',
+  'bold',
+  'italic',
+  '|',
+  'quote',
+  'unordered-list',
+  'ordered-list',
+  '|',
+  'link',
+  'image',
+  'code',
+  '|',
+  'preview',
+  'side-by-side',
+]
+
+export function MarkdownInput(props: MarkdownInputProps) {
+  const {
+    value = '',
+    onChange,
+    elementProps: {onBlur, onFocus, ref},
+    reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},
+    schemaType,
+  } = props
+  const client = useClient({apiVersion: '2022-01-01'})
+  const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}
+
+  const imageUpload = useCallback(
+    (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {
+      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]
+  )
+
+  const mdeOptions: EasyMdeOptions = useMemo(() => {
+    return {
+      autofocus: false,
+      spellChecker: false,
+      sideBySideFullscreen: false,
+      uploadImage: true,
+      imageUploadFunction: imageUpload,
+      toolbar: defaultMdeTools,
+      status: false,
+      ...mdeCustomOptions,
+    }
+  }, [imageUpload, mdeCustomOptions])
+
+  const handleChange = useCallback(
+    (newValue: string) => {
+      onChange(PatchEvent.from(newValue ? set(newValue) : unset()))
+    },
+    [onChange]
+  )
+
+  return (
+    <MarkdownInputStyles>
+      <SimpleMdeReact
+        {...reactMdeProps}
+        ref={ref}
+        value={value}
+        onChange={handleChange}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        options={mdeOptions}
+        spellCheck={false}
+      />
+    </MarkdownInputStyles>
+  )
+}

package/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;
+    }
+  }
+`

package/src/index.ts

@@ -1,16 +1,4 @@
-import {MarkdownEditor as Editor} from './components/Editor'
-import {definePlugin} from 'sanity'
-import {markdownSchemaType, MarkdownDefinition} from './schema'
+export {markdownSchemaType, type MarkdownDefinition} from './schema'
+export {MarkdownInput, defaultMdeTools, type MarkdownInputProps} from './components/MarkdownInput'
 
-// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:
-const MarkdownEditor = Editor
-
-export {MarkdownEditor, markdownSchemaType}
-export type {MarkdownDefinition}
-
-export const markdownSchema = definePlugin({
-  name: 'markdown-editor',
-  schema: {
-    types: [markdownSchemaType],
-  },
-})
+export {markdownSchema, type MarkdownConfig} from './plugin'

package/src/plugin.tsx

@@ -0,0 +1,54 @@
+import {definePlugin, StringInputProps} from 'sanity'
+import {markdownSchemaType} from './schema'
+import {ReactElement} from 'react'
+
+export 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
+}
+
+export const markdownSchema = definePlugin((config: MarkdownConfig | void) => {
+  return {
+    name: 'markdown-editor',
+    schema: {
+      types: [
+        config && config.input
+          ? {...markdownSchemaType, components: {input: config.input}}
+          : markdownSchemaType,
+      ],
+    },
+  }
+})

package/src/schema.ts

@@ -1,13 +1,36 @@
 import {defineType, StringDefinition} from 'sanity'
-import {MarkdownEditor} from './components/Editor'
+import {MarkdownInput} from './components/MarkdownInput'
+import {SanityImageAssetDocument} from '@sanity/client'
 
-const markdownTypeName = 'markdown' as const
+export const markdownTypeName = 'markdown' as const
+
+export 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
+}
 
 /**
  * @public
  */
 export interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
   type: typeof markdownTypeName
+  options?: MarkdownOptions
 }
 
 declare module '@sanity/types' {
@@ -21,5 +44,5 @@ export const markdownSchemaType = defineType({
   type: 'string',
   name: markdownTypeName,
   title: 'Markdown',
-  ...({components: {input: MarkdownEditor}} as {}), //TODO revert when rc.1 ships
+  components: {input: MarkdownInput},
 })

package/lib/src/index.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-
-import {ForwardRefExoticComponent} from 'react'
-import {Plugin as Plugin_2} from 'sanity'
-import {RefAttributes} from 'react'
-import {StringDefinition} from 'sanity'
-import {StringInputProps} from 'sanity'
-import {StringSchemaType} from 'sanity'
-
-/**
- * @public
- */
-export declare interface MarkdownDefinition
-  extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
-  type: typeof markdownTypeName
-}
-
-export declare const MarkdownEditor: ForwardRefExoticComponent<
-  StringInputProps<StringSchemaType> & RefAttributes<any>
->
-
-export declare const markdownSchema: Plugin_2<void>
-
-export declare const markdownSchemaType: {
-  type: 'string'
-  name: 'markdown'
-} & Omit<StringDefinition, 'preview'>
-
-declare const markdownTypeName: 'markdown'
-
-export {}
-
-declare module '@sanity/types' {
-  interface IntrinsicDefinitions {
-    markdown: MarkdownDefinition
-  }
-}

package/src/components/Editor.tsx

@@ -1,134 +0,0 @@
-import MDEditor from '@uiw/react-md-editor'
-import useDebounce from '../hooks/useDebounce'
-import {PatchEvent, SanityClient, set, StringInputProps, unset, useClient} from 'sanity'
-import React, {
-  ClipboardEvent,
-  forwardRef,
-  Ref,
-  SetStateAction,
-  useCallback,
-  useEffect,
-  useState,
-  DragEvent,
-} from 'react'
-import {Card, useTheme} from '@sanity/ui'
-import rehypeSanitize from 'rehype-sanitize'
-
-export const MarkdownEditor = forwardRef(function MarkdownEditor(
-  props: StringInputProps,
-  ref: Ref<any>
-) {
-  const {
-    value = '',
-    onChange,
-    elementProps: {onBlur, onFocus},
-    readOnly,
-  } = props
-  const [editedValue, setEditedValue] = useState<string | undefined>(value)
-  const debouncedValue = useDebounce(editedValue, 100)
-  // const client = useClient({apiVersion: '2021-03-25'})
-  const client = useClient({apiVersion: '2022-01-01'})
-  useEffect(() => {
-    setEditedValue(value)
-  }, [value])
-
-  useEffect(() => {
-    if (!debouncedValue && value) {
-      onChange(PatchEvent.from([unset()]))
-    } else if (debouncedValue !== value) {
-      onChange(PatchEvent.from([set(debouncedValue)]))
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedValue, onChange])
-
-  const {sanity: studioTheme} = useTheme()
-  const onPaste = useCallback(
-    async (event: ClipboardEvent<HTMLDivElement>) => {
-      await onImagePasted(event.clipboardData, setEditedValue, client)
-    },
-    [setEditedValue, client]
-  )
-
-  const onDrop = useCallback(
-    async (event: DragEvent<HTMLDivElement>) => {
-      event.preventDefault()
-      event.stopPropagation()
-      if (event.dataTransfer) {
-        await onImagePasted(event.dataTransfer, setEditedValue, client)
-      }
-    },
-    [setEditedValue, client]
-  )
-
-  return (
-    <div ref={ref} data-color-mode={studioTheme.color.dark ? 'dark' : 'light'}>
-      {readOnly ? (
-        <Card border padding={3}>
-          <MDEditor.Markdown source={value} rehypePlugins={[[rehypeSanitize]]} />
-        </Card>
-      ) : (
-        <MDEditor
-          value={editedValue}
-          onChange={setEditedValue}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          previewOptions={{
-            rehypePlugins: [[rehypeSanitize]],
-          }}
-          preview="edit"
-          onPaste={onPaste}
-          onDrop={onDrop}
-        />
-      )}
-    </div>
-  )
-})
-
-// https://github.com/uiwjs/react-md-editor/issues/83#issuecomment-1185471844
-async function onImagePasted(
-  dataTransfer: DataTransfer,
-  setMarkdown: (value: SetStateAction<string | undefined>) => void,
-  client: SanityClient
-) {
-  const files: File[] = []
-  for (let index = 0; index < dataTransfer.items.length; index += 1) {
-    const file = dataTransfer.files.item(index)
-
-    if (file) {
-      files.push(file)
-    }
-  }
-
-  await Promise.all(
-    files.map(async (file) => {
-      const url = await client.assets.upload('image', file).then((doc) => `${doc.url}?w=450`)
-      const insertedMarkdown = insertToTextArea(`![](${url})`)
-      if (!insertedMarkdown) {
-        return
-      }
-      setMarkdown(insertedMarkdown)
-    })
-  )
-}
-
-function insertToTextArea(insertString: string) {
-  const textarea = document.querySelector('textarea')
-  if (!textarea) {
-    return null
-  }
-
-  let sentence = textarea.value
-  const len = sentence.length
-  const pos = textarea.selectionStart
-  const end = textarea.selectionEnd
-
-  const front = sentence.slice(0, pos)
-  const back = sentence.slice(pos, len)
-
-  sentence = front + insertString + back
-
-  textarea.value = sentence
-  textarea.selectionEnd = end + insertString.length
-
-  return sentence
-}

package/src/hooks/useDebounce.ts

@@ -1,14 +0,0 @@
-import {useState, useEffect} from 'react'
-
-export default function useDebounce(value: unknown, delay: number) {
-  const [debouncedValue, setDebouncedValue] = useState(value)
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value)
-    }, delay)
-
-    return () => clearTimeout(handler)
-  }, [value, delay])
-
-  return debouncedValue
-}