sanity-plugin-markdown 3.0.1 → 4.1.0

package/lib/index.esm.js

@@ -1,2 +1,3 @@
-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};
+import 'easymde/dist/easymde.min.css';
+export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from './_chunks/plugin-ca10aa4c.js';
 //# 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":[],"sourcesContent":[],"names":[],"mappings":";"}

package/lib/index.js

@@ -1,2 +1,12 @@
-"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';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+require('easymde/dist/easymde.min.css');
+var plugin = require('./_chunks/plugin-b7a179e6.js');
+exports.MarkdownInput = plugin.MarkdownInput;
+exports.defaultMdeTools = plugin.defaultMdeTools;
+exports.markdownSchema = plugin.markdownSchema;
+exports.markdownSchemaType = plugin.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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/lib/indexNext.esm.js

@@ -0,0 +1,2 @@
+export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from './_chunks/plugin-ca10aa4c.js';
+//# sourceMappingURL=indexNext.esm.js.map

package/lib/indexNext.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indexNext.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/indexNext.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var plugin = require('./_chunks/plugin-b7a179e6.js');
+exports.MarkdownInput = plugin.MarkdownInput;
+exports.defaultMdeTools = plugin.defaultMdeTools;
+exports.markdownSchema = plugin.markdownSchema;
+exports.markdownSchemaType = plugin.markdownSchemaType;
+//# sourceMappingURL=indexNext.js.map

package/lib/indexNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indexNext.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-markdown",
-  "version": "3.0.1",
+  "version": "4.1.0",
   "description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
   "keywords": [
     "sanity",
@@ -15,76 +15,95 @@
   },
   "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",
+      "import": "./lib/index.esm.js",
       "default": "./lib/index.esm.js"
     },
+    "./next": {
+      "types": "./lib/index.d.ts",
+      "source": "./src/indexNext.ts",
+      "require": "./lib/indexNext.js",
+      "import": "./lib/indexNext.esm.js",
+      "default": "./lib/indexNext.esm.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./lib/index.js",
   "module": "./lib/index.esm.js",
   "source": "./src/index.ts",
-  "types": "./lib/src/index.d.ts",
+  "types": "./lib/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "next": [
+        "./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",
-    "@uiw/react-md-editor": "^3.19.7",
-    "rehype-sanitize": "^5.0.1"
+    "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.2.6",
+    "@sanity/plugin-kit": "^3.1.7",
     "@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",
+    "sanity": "^3.1.4",
     "styled-components": "^5.3.6",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
+    "easymde": "^2",
     "react": "^18",
-    "sanity": "^3.0.0",
+    "sanity": "^3",
     "styled-components": "^5.2"
   },
   "engines": {

package/src/commonExports.ts

@@ -0,0 +1,4 @@
+export {markdownSchemaType, type MarkdownDefinition} from './schema'
+export {MarkdownInput, defaultMdeTools, type MarkdownInputProps} from './components/MarkdownInput'
+
+export {markdownSchema, type MarkdownConfig} from './plugin'

package/src/components/MarkdownInput.tsx

@@ -0,0 +1,108 @@
+import {type Options as EasyMdeOptions} from 'easymde'
+import React, {Suspense, useCallback, useMemo} 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'
+import {MarkdownOptions} from '../schema'
+import {MarkdownInputStyles} from './MarkdownInputStyles'
+import {useSimpleMdeReact} from './useSimpleMdeReact'
+import {Box, Text} from '@sanity/ui'
+
+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]
+  )
+
+  const SimpleMdeReact = useSimpleMdeReact()
+
+  return (
+    <MarkdownInputStyles>
+      {SimpleMdeReact && (
+        <Suspense
+          fallback={
+            <Box padding={3}>
+              <Text>Loading editor...</Text>
+            </Box>
+          }
+        >
+          <SimpleMdeReact
+            {...reactMdeProps}
+            ref={ref}
+            value={value}
+            onChange={handleChange}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            options={mdeOptions}
+            spellCheck={false}
+          />
+        </Suspense>
+      )}
+    </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/components/useSimpleMdeReact.tsx

@@ -0,0 +1,12 @@
+import {lazy, useEffect, useState} from 'react'
+
+export const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))
+
+export function useSimpleMdeReact() {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => {
+    requestAnimationFrame(() => setMounted(true))
+  }, [])
+
+  return mounted ? SimpleMdeReact : null
+}

package/src/index.ts

@@ -1,16 +1,3 @@
-import {MarkdownEditor as Editor} from './components/Editor'
-import {definePlugin} from 'sanity'
-import {markdownSchemaType, MarkdownDefinition} from './schema'
+import 'easymde/dist/easymde.min.css'
 
-// 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 * from './commonExports'

package/src/indexNext.ts

@@ -0,0 +1 @@
+export * from './commonExports'

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
-  }
-}