sanity-plugin-markdown 5.1.1 → 5.1.3

package/README.md

@@ -1,6 +1,5 @@
 # sanity-plugin-markdown
 
-> This is a **Sanity Studio v3** plugin.
 > For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity-plugin-markdown/tree/studio-v2).
 
 ## What is it?

package/lib/_chunks-cjs/plugin.js

@@ -96,11 +96,13 @@ function MarkdownInput(props) {
   const {
     value = "",
     onChange,
-    elementProps: { onBlur, onFocus, ref },
+    elementProps: { onBlur, onFocus, ref: elementRef },
     reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
     schemaType,
     focused
-  } = props, client = sanity.useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, imageUpload = react.useCallback(
+  } = props, client = sanity.useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, [shouldAutoFocus, setShouldAutoFocus] = react.useState(!1), ref = react.useRef(null);
+  react.useImperativeHandle(elementRef, () => ref.current);
+  const imageUpload = react.useCallback(
     (file, onSuccess, onError) => {
       client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
         console.error(e), onError(e.message);
@@ -115,8 +117,26 @@ function MarkdownInput(props) {
     toolbar: defaultMdeTools,
     status: !1,
     ...mdeCustomOptions,
-    autofocus: focused
-  }), [imageUpload, mdeCustomOptions, focused]), handleChange = react.useCallback(
+    autofocus: shouldAutoFocus
+  }), [imageUpload, mdeCustomOptions, shouldAutoFocus]);
+  react.useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      if (focused && !shouldAutoFocus) {
+        const raf = requestAnimationFrame(
+          () => setShouldAutoFocus(!node.contains(document.activeElement))
+        );
+        return () => cancelAnimationFrame(raf);
+      }
+      if (!focused && shouldAutoFocus) {
+        const raf = requestAnimationFrame(
+          () => setShouldAutoFocus(node.contains(document.activeElement))
+        );
+        return () => cancelAnimationFrame(raf);
+      }
+    }
+  }, [focused, shouldAutoFocus]);
+  const handleChange = react.useCallback(
     (newValue) => {
       onChange(sanity.PatchEvent.from(newValue ? sanity.set(newValue) : sanity.unset()));
     },

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

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import {Box} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const MarkdownInputStyles = styled(Box)`\n  & .CodeMirror.CodeMirror {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.selectable?.primary?.hovered?.bg};\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-toolbar > * {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-preview {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n    & h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-size: revert;\n    }\n\n    & ul,\n    li {\n      list-style: revert;\n      padding: revert;\n    }\n\n    & a {\n      text-decoration: revert;\n    }\n  }\n`\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport {lazy, Suspense, useCallback, useMemo} from 'react'\n// dont import non-types here, it will break SSR on next\nimport type {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\nimport {Box, Text} from '@sanity/ui'\n\nconst SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport interface MarkdownInputProps extends StringInputProps {\n  /**\n   * These are passed along directly to\n   *\n   * Note: MarkdownInput sets certain reactMdeProps.options by default.\n   * These will be merged with any custom options.\n   */\n  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>\n}\n\nexport const defaultMdeTools: EasyMdeOptions['toolbar'] = [\n  'heading',\n  'bold',\n  'italic',\n  '|',\n  'quote',\n  'unordered-list',\n  'ordered-list',\n  '|',\n  'link',\n  'image',\n  'code',\n  '|',\n  'preview',\n  'side-by-side',\n]\n\nexport function MarkdownInput(props: MarkdownInputProps) {\n  const {\n    value = '',\n    onChange,\n    elementProps: {onBlur, onFocus, ref},\n    reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n    schemaType,\n    focused,\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      spellChecker: false,\n      sideBySideFullscreen: false,\n      uploadImage: true,\n      imageUploadFunction: imageUpload,\n      toolbar: defaultMdeTools,\n      status: false,\n      ...mdeCustomOptions,\n      autofocus: focused,\n    }\n  }, [imageUpload, mdeCustomOptions, focused])\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      <Suspense fallback={fallback}>\n        <SimpleMdeReact\n          {...reactMdeProps}\n          ref={ref}\n          value={value}\n          onChange={handleChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          options={mdeOptions}\n          spellCheck={false}\n        />\n      </Suspense>\n    </MarkdownInputStyles>\n  )\n}\n\nconst fallback = (\n  <Box padding={3}>\n    <Text>Loading editor...</Text>\n  </Box>\n)\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n  /**\n   * Used to create image url for any uploaded image.\n   * The function will be invoked whenever an image is pasted or dragged into the\n   * markdown editor, after upload completes.\n   *\n   * The default implementation uses\n   * ```js\n   * imageAsset => `${imageAsset.url}?w=450`\n   * ```\n   * ## Example\n   * ```js\n   * {\n   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n   * }\n   * ```\n   * @param imageAsset\n   */\n  imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof markdownTypeName\n  options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n  // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    markdown: MarkdownDefinition\n  }\n}\n\nexport const markdownSchemaType = defineType({\n  type: 'string',\n  name: markdownTypeName,\n  title: 'Markdown',\n  components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n  /**\n   * When provided, will replace the default input component.\n   *\n   * Use this to customize MarkdownInput by wrapping it in a custom component,\n   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   * via the `reactMdeProps` prop.\n   *\n   * ### Example\n   *\n   * ```tsx\n   * // CustomMarkdownInput.tsx\n   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n   *\n   * export function CustomMarkdownInput(props) {\n   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n   *     useMemo(() => {\n   *       return {\n   *         options: {\n   *           toolbar: ['bold', 'italic'],\n   *           // more options available, see:\n   *           // https://github.com/Ionaru/easy-markdown-editor#options-list\n   *         },\n   *         // more props available, see:\n   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   *       }\n   *     }, [])\n   *\n   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n   * }\n   *\n   * // studio.config.ts\n   * markdownSchema({input: CustomMarkdownInput})\n   * ```\n   */\n  input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n  return {\n    name: 'markdown-editor',\n    schema: {\n      types: [\n        config && config.input\n          ? {...markdownSchemaType, components: {input: config.input}}\n          : markdownSchemaType,\n      ],\n    },\n  }\n})\n"],"names":["styled","Box","lazy","useClient","useCallback","useMemo","PatchEvent","set","unset","jsx","Suspense","Text","defineType","definePlugin"],"mappings":"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"}
+{"version":3,"file":"plugin.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import {Box} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const MarkdownInputStyles = styled(Box)`\n  & .CodeMirror.CodeMirror {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.selectable?.primary?.hovered?.bg};\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-toolbar > * {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-preview {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n    & h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-size: revert;\n    }\n\n    & ul,\n    li {\n      list-style: revert;\n      padding: revert;\n    }\n\n    & a {\n      text-decoration: revert;\n    }\n  }\n`\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport {\n  lazy,\n  Suspense,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n// dont import non-types here, it will break SSR on next\nimport type {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\nimport {Box, Text} from '@sanity/ui'\n\nconst SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport interface MarkdownInputProps extends StringInputProps {\n  /**\n   * These are passed along directly to\n   *\n   * Note: MarkdownInput sets certain reactMdeProps.options by default.\n   * These will be merged with any custom options.\n   */\n  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>\n}\n\nexport const defaultMdeTools: EasyMdeOptions['toolbar'] = [\n  'heading',\n  'bold',\n  'italic',\n  '|',\n  'quote',\n  'unordered-list',\n  'ordered-list',\n  '|',\n  'link',\n  'image',\n  'code',\n  '|',\n  'preview',\n  'side-by-side',\n]\n\nexport function MarkdownInput(props: MarkdownInputProps) {\n  const {\n    value = '',\n    onChange,\n    elementProps: {onBlur, onFocus, ref: elementRef},\n    reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n    schemaType,\n    focused,\n  } = props\n  const client = useClient({apiVersion: '2022-01-01'})\n  const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n  const [shouldAutoFocus, setShouldAutoFocus] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  // Forward ref to parent form state\n  useImperativeHandle(elementRef, () => ref.current)\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      spellChecker: false,\n      sideBySideFullscreen: false,\n      uploadImage: true,\n      imageUploadFunction: imageUpload,\n      toolbar: defaultMdeTools,\n      status: false,\n      ...mdeCustomOptions,\n      autofocus: shouldAutoFocus,\n    }\n  }, [imageUpload, mdeCustomOptions, shouldAutoFocus])\n\n  // eslint-disable-next-line consistent-return\n  useEffect(() => {\n    const node = ref.current\n    if (!node) return undefined\n\n    if (focused && !shouldAutoFocus) {\n      // Do not set autofocus if the field already has focus\n      const raf = requestAnimationFrame(() =>\n        setShouldAutoFocus(!node.contains(document.activeElement)),\n      )\n      return () => cancelAnimationFrame(raf)\n    }\n\n    if (!focused && shouldAutoFocus) {\n      // If `focused` is false, and the current active focus is no longer within the editor, reset autofocus state\n      const raf = requestAnimationFrame(() =>\n        setShouldAutoFocus(node.contains(document.activeElement)),\n      )\n      return () => cancelAnimationFrame(raf)\n    }\n  }, [focused, shouldAutoFocus])\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      <Suspense fallback={fallback}>\n        <SimpleMdeReact\n          {...reactMdeProps}\n          ref={ref}\n          value={value}\n          onChange={handleChange}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          options={mdeOptions}\n          spellCheck={false}\n        />\n      </Suspense>\n    </MarkdownInputStyles>\n  )\n}\n\nconst fallback = (\n  <Box padding={3}>\n    <Text>Loading editor...</Text>\n  </Box>\n)\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n  /**\n   * Used to create image url for any uploaded image.\n   * The function will be invoked whenever an image is pasted or dragged into the\n   * markdown editor, after upload completes.\n   *\n   * The default implementation uses\n   * ```js\n   * imageAsset => `${imageAsset.url}?w=450`\n   * ```\n   * ## Example\n   * ```js\n   * {\n   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n   * }\n   * ```\n   * @param imageAsset\n   */\n  imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof markdownTypeName\n  options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n  // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    markdown: MarkdownDefinition\n  }\n}\n\nexport const markdownSchemaType = defineType({\n  type: 'string',\n  name: markdownTypeName,\n  title: 'Markdown',\n  components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n  /**\n   * When provided, will replace the default input component.\n   *\n   * Use this to customize MarkdownInput by wrapping it in a custom component,\n   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   * via the `reactMdeProps` prop.\n   *\n   * ### Example\n   *\n   * ```tsx\n   * // CustomMarkdownInput.tsx\n   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n   *\n   * export function CustomMarkdownInput(props) {\n   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n   *     useMemo(() => {\n   *       return {\n   *         options: {\n   *           toolbar: ['bold', 'italic'],\n   *           // more options available, see:\n   *           // https://github.com/Ionaru/easy-markdown-editor#options-list\n   *         },\n   *         // more props available, see:\n   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   *       }\n   *     }, [])\n   *\n   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n   * }\n   *\n   * // studio.config.ts\n   * markdownSchema({input: CustomMarkdownInput})\n   * ```\n   */\n  input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n  return {\n    name: 'markdown-editor',\n    schema: {\n      types: [\n        config && config.input\n          ? {...markdownSchemaType, components: {input: config.input}}\n          : markdownSchemaType,\n      ],\n    },\n  }\n})\n"],"names":["styled","Box","lazy","useClient","useState","useRef","useImperativeHandle","useCallback","useMemo","useEffect","PatchEvent","set","unset","jsx","Suspense","Text","defineType","definePlugin"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGO,MAAM,sBAAsBA,iBAAAA,OAAOC,MAAG;AAAA;AAAA,aAEhC,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,EAAE;AAAA,oBACxC,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKnD,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,oBAK/C,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,MAAM;AAAA;AAAA;AAAA;AAAA,wBAI/C,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,YAAY,SAAS,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA,wBAIhE,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,aAI1D,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOpC,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,wBAI/C,CAAC,EAAC,MAAA,MAAW,MAAM,OAAO,MAAM,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCrBjE,iBAAiBC,MAAAA,KAAK,MAAM,OAAO,wBAAwB,CAAC,GAYrD,kBAA6C;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,SAAS,cAAc,OAA2B;AACvD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA,cAAc,EAAC,QAAQ,SAAS,KAAK,WAAA;AAAA,IACrC,eAAe,EAAC,SAAS,kBAAkB,GAAG,cAAA,IAAiB,CAAA;AAAA,IAC/D;AAAA,IACA;AAAA,EAAA,IACE,OACE,SAASC,OAAAA,UAAU,EAAC,YAAY,cAAa,GAC7C,EAAC,SAAA,IAAa,WAAW,WAA2C,IACpE,CAAC,iBAAiB,kBAAkB,IAAIC,MAAAA,SAAS,EAAK,GACtD,MAAMC,MAAAA,OAAuB,IAAI;AAGvCC,QAAAA,oBAAoB,YAAY,MAAM,IAAI,OAAO;AAEjD,QAAM,cAAcC,MAAAA;AAAAA,IAClB,CAAC,MAAY,WAAkC,YAAqC;AAClF,aAAO,OACJ,OAAO,SAAS,IAAI,EACpB,KAAK,CAAC,QAAQ,UAAU,WAAW,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,QAAQ,CAAC,EACtE,MAAM,CAAC,MAAM;AACZ,gBAAQ,MAAM,CAAC,GACf,QAAQ,EAAE,OAAO;AAAA,MACnB,CAAC;AAAA,IACL;AAAA,IACA,CAAC,QAAQ,QAAQ;AAAA,EAAA,GAGb,aAA6BC,MAAAA,QAAQ,OAClC;AAAA,IACL,cAAc;AAAA,IACd,sBAAsB;AAAA,IACtB,aAAa;AAAA,IACb,qBAAqB;AAAA,IACrB,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,GAAG;AAAA,IACH,WAAW;AAAA,EAAA,IAEZ,CAAC,aAAa,kBAAkB,eAAe,CAAC;AAGnDC,QAAAA,UAAU,MAAM;AACd,UAAM,OAAO,IAAI;AACjB,QAAK,MAEL;AAAA,UAAI,WAAW,CAAC,iBAAiB;AAE/B,cAAM,MAAM;AAAA,UAAsB,MAChC,mBAAmB,CAAC,KAAK,SAAS,SAAS,aAAa,CAAC;AAAA,QAAA;AAE3D,eAAO,MAAM,qBAAqB,GAAG;AAAA,MACvC;AAEA,UAAI,CAAC,WAAW,iBAAiB;AAE/B,cAAM,MAAM;AAAA,UAAsB,MAChC,mBAAmB,KAAK,SAAS,SAAS,aAAa,CAAC;AAAA,QAAA;AAE1D,eAAO,MAAM,qBAAqB,GAAG;AAAA,MACvC;AAAA,IAAA;AAAA,EACF,GAAG,CAAC,SAAS,eAAe,CAAC;AAE7B,QAAM,eAAeF,MAAAA;AAAAA,IACnB,CAAC,aAAqB;AACpB,eAASG,OAAAA,WAAW,KAAK,WAAWC,OAAAA,IAAI,QAAQ,IAAIC,OAAAA,MAAA,CAAO,CAAC;AAAA,IAC9D;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,SACEC,2BAAAA,IAAC,qBAAA,EACC,UAAAA,2BAAAA,IAACC,gBAAA,EAAS,UACR,UAAAD,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,YAAY;AAAA,IAAA;AAAA,EAAA,GAEhB,EAAA,CACF;AAEJ;AAEA,MAAM,0CACHZ,GAAAA,KAAA,EAAI,SAAS,GACZ,UAAAY,2BAAAA,IAACE,GAAAA,MAAA,EAAK,+BAAiB,EAAA,CACzB,GCxIW,mBAAmB,YAsCnB,qBAAqBC,kBAAW;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY,EAAC,OAAO,cAAA;AACtB,CAAC,GCLY,iBAAiBC,OAAAA,aAAa,CAAC,YACnC;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,UAAU,OAAO,QACb,EAAC,GAAG,oBAAoB,YAAY,EAAC,OAAO,OAAO,MAAA,MACnD;AAAA,IAAA;AAAA,EACN;AAEJ,EACD;;;;;"}

package/lib/_chunks-es/plugin.mjs

@@ -1,6 +1,6 @@
 import { useClient, PatchEvent, set, unset, defineType, definePlugin } from "sanity";
 import { jsx } from "react/jsx-runtime";
-import { lazy, useCallback, useMemo, Suspense } from "react";
+import { lazy, useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect, Suspense } from "react";
 import { Box, Text } from "@sanity/ui";
 import { styled } from "styled-components";
 const MarkdownInputStyles = styled(Box)`
@@ -80,11 +80,13 @@ function MarkdownInput(props) {
   const {
     value = "",
     onChange,
-    elementProps: { onBlur, onFocus, ref },
+    elementProps: { onBlur, onFocus, ref: elementRef },
     reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
     schemaType,
     focused
-  } = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, imageUpload = useCallback(
+  } = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, [shouldAutoFocus, setShouldAutoFocus] = useState(!1), ref = useRef(null);
+  useImperativeHandle(elementRef, () => ref.current);
+  const imageUpload = useCallback(
     (file, onSuccess, onError) => {
       client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
         console.error(e), onError(e.message);
@@ -99,8 +101,26 @@ function MarkdownInput(props) {
     toolbar: defaultMdeTools,
     status: !1,
     ...mdeCustomOptions,
-    autofocus: focused
-  }), [imageUpload, mdeCustomOptions, focused]), handleChange = useCallback(
+    autofocus: shouldAutoFocus
+  }), [imageUpload, mdeCustomOptions, shouldAutoFocus]);
+  useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      if (focused && !shouldAutoFocus) {
+        const raf = requestAnimationFrame(
+          () => setShouldAutoFocus(!node.contains(document.activeElement))
+        );
+        return () => cancelAnimationFrame(raf);
+      }
+      if (!focused && shouldAutoFocus) {
+        const raf = requestAnimationFrame(
+          () => setShouldAutoFocus(node.contains(document.activeElement))
+        );
+        return () => cancelAnimationFrame(raf);
+      }
+    }
+  }, [focused, shouldAutoFocus]);
+  const handleChange = useCallback(
     (newValue) => {
       onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
     },

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

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

package/lib/_legacy/plugin.esm.js

@@ -1,6 +1,6 @@
 import { useClient, PatchEvent, set, unset, defineType, definePlugin } from "sanity";
 import { jsx } from "react/jsx-runtime";
-import { lazy, useCallback, useMemo, Suspense } from "react";
+import { lazy, useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect, Suspense } from "react";
 import { Box, Text } from "@sanity/ui";
 import { styled } from "styled-components";
 const MarkdownInputStyles = styled(Box)`
@@ -80,11 +80,13 @@ function MarkdownInput(props) {
   const {
     value = "",
     onChange,
-    elementProps: { onBlur, onFocus, ref },
+    elementProps: { onBlur, onFocus, ref: elementRef },
     reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
     schemaType,
     focused
-  } = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, imageUpload = useCallback(
+  } = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, [shouldAutoFocus, setShouldAutoFocus] = useState(!1), ref = useRef(null);
+  useImperativeHandle(elementRef, () => ref.current);
+  const imageUpload = useCallback(
     (file, onSuccess, onError) => {
       client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
         console.error(e), onError(e.message);
@@ -99,8 +101,26 @@ function MarkdownInput(props) {
     toolbar: defaultMdeTools,
     status: !1,
     ...mdeCustomOptions,
-    autofocus: focused
-  }), [imageUpload, mdeCustomOptions, focused]), handleChange = useCallback(
+    autofocus: shouldAutoFocus
+  }), [imageUpload, mdeCustomOptions, shouldAutoFocus]);
+  useEffect(() => {
+    const node = ref.current;
+    if (node) {
+      if (focused && !shouldAutoFocus) {
+        const raf = requestAnimationFrame(
+          () => setShouldAutoFocus(!node.contains(document.activeElement))
+        );
+        return () => cancelAnimationFrame(raf);
+      }
+      if (!focused && shouldAutoFocus) {
+        const raf = requestAnimationFrame(
+          () => setShouldAutoFocus(node.contains(document.activeElement))
+        );
+        return () => cancelAnimationFrame(raf);
+      }
+    }
+  }, [focused, shouldAutoFocus]);
+  const handleChange = useCallback(
     (newValue) => {
       onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
     },

package/lib/_legacy/plugin.esm.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-markdown",
-  "version": "5.1.1",
+  "version": "5.1.3",
   "description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
   "keywords": [
     "sanity",
@@ -64,7 +64,7 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@sanity/incompatible-plugin": "^1.0.4",
+    "@sanity/incompatible-plugin": "^1.0.5",
     "@sanity/ui": "^2.8.9",
     "react-simplemde-editor": "^5.2.0"
   },
@@ -75,6 +75,7 @@
     "@sanity/plugin-kit": "^4.0.18",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^2.0.5",
+    "@sanity/vision": "^4.1.1",
     "@types/react": "^18.3.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
@@ -92,14 +93,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "sanity": "^3.57.1",
-    "styled-components": "^6.1.13",
+    "sanity": "^4.1.1",
+    "styled-components": "^6.1.19",
     "typescript": "5.5.4"
   },
   "peerDependencies": {
     "easymde": "^2.18",
     "react": "^18.3 || ^19",
-    "sanity": "^3.23",
+    "sanity": "^3.23 || ^4.0.0-0",
     "styled-components": "^6.1"
   },
   "engines": {

package/src/components/MarkdownInput.tsx

@@ -1,5 +1,14 @@
 import {type Options as EasyMdeOptions} from 'easymde'
-import {lazy, Suspense, useCallback, useMemo} from 'react'
+import {
+  lazy,
+  Suspense,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 // dont import non-types here, it will break SSR on next
 import type {SimpleMDEReactProps} from 'react-simplemde-editor'
 import {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'
@@ -40,13 +49,18 @@ export function MarkdownInput(props: MarkdownInputProps) {
   const {
     value = '',
     onChange,
-    elementProps: {onBlur, onFocus, ref},
+    elementProps: {onBlur, onFocus, ref: elementRef},
     reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},
     schemaType,
     focused,
   } = props
   const client = useClient({apiVersion: '2022-01-01'})
   const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}
+  const [shouldAutoFocus, setShouldAutoFocus] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  // Forward ref to parent form state
+  useImperativeHandle(elementRef, () => ref.current)
 
   const imageUpload = useCallback(
     (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {
@@ -70,9 +84,31 @@ export function MarkdownInput(props: MarkdownInputProps) {
       toolbar: defaultMdeTools,
       status: false,
       ...mdeCustomOptions,
-      autofocus: focused,
+      autofocus: shouldAutoFocus,
+    }
+  }, [imageUpload, mdeCustomOptions, shouldAutoFocus])
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    const node = ref.current
+    if (!node) return undefined
+
+    if (focused && !shouldAutoFocus) {
+      // Do not set autofocus if the field already has focus
+      const raf = requestAnimationFrame(() =>
+        setShouldAutoFocus(!node.contains(document.activeElement)),
+      )
+      return () => cancelAnimationFrame(raf)
+    }
+
+    if (!focused && shouldAutoFocus) {
+      // If `focused` is false, and the current active focus is no longer within the editor, reset autofocus state
+      const raf = requestAnimationFrame(() =>
+        setShouldAutoFocus(node.contains(document.activeElement)),
+      )
+      return () => cancelAnimationFrame(raf)
     }
-  }, [imageUpload, mdeCustomOptions, focused])
+  }, [focused, shouldAutoFocus])
 
   const handleChange = useCallback(
     (newValue: string) => {

package/src/components/sanity-ui.d.ts

@@ -0,0 +1,6 @@
+import {type Theme} from '@sanity/ui/theme'
+
+declare module 'styled-components' {
+  // eslint-disable-next-line no-unused-vars
+  interface DefaultTheme extends Theme {}
+}