sanity-plugin-markdown 3.0.0-studio-v3.0 → 3.0.0-v3-studio.1

package/LICENSE

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

package/README.md

@@ -10,9 +10,15 @@
 
 A Markdown editor with preview for Sanity Studio. 
 
-Supports Github flavored markdown and image uploads. You can either drag image(s) into the editor or click the bottom bar to bring up a file selector. The resulting image URL(s) are inserted with a default width parameter which you can change to your liking using the [Sanity image pipeline parameters](https://www.sanity.io/docs/image-urls).
+Supports Github flavored markdown and image uploads. You can either drag image(s) into the editor or click the bottom bar to bring up a file selector. 
+The resulting image URL(s) are inserted with a default width parameter which you can change to your liking using the [Sanity image pipeline parameters](https://www.sanity.io/docs/image-urls).
+ 
+### Known issues with the current v3 version
 
-![Markdown input](assets/markdown-input.png)
+The v2 version used react-mde for editing. The current v3 version @uiw/react-md-editor. This may change before GA.
+
+At the moment the v3 version does not have drag-and-drop image upload support.
+You can still add markdown image tags, but you will have to get the image url yourself for now.
 
 ## Installation
 
@@ -27,7 +33,21 @@ yarn add sanity-plugin-markdown@studio-v3
 ```
 
 ## Usage
-Declare a field in your schema to be `markdown`
+
+Add it as a plugin in sanity.config.ts (or .js):
+
+```js
+import { markdownSchema } from "sanity-plugin-markdown";
+
+export default createConfig({
+  // ...
+  plugins: [
+    markdownSchema(),
+  ] 
+})
+```
+
+Then, declare a field in your schema to be `markdown`
 
 ```javascript
 const myDocument = {
@@ -54,22 +74,15 @@ See LICENSE
 
 ## Develop & test
 
-Make sure to run `npm run build` once, then run
-
-```bash
-npm run link-watch
-```
-
-In another shell, `cd` to your test studio and run:
+This plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)
+with default configuration for build & watch scripts.
 
-```bash
-npx yalc add sanity-plugin-markdown --link && yarn install
-```
+See [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)
+on how to run this plugin with hotreload in the studio.
 
-Now, changes in this repo will be automatically built and pushed to the studio,
-triggering hotreload. Yalc avoids issues with react-hooks that are typical when using yarn/npm link.
+### Release new version
 
-### About build & watch
+Run ["CI & Release" workflow](https://github.com/sanity-io/sanity-plugin-markdown/actions).
+Make sure to select the main/v3 branch and check "Release new version".
 
-This plugin uses [@sanity/plugin-sdk](https://github.com/sanity-io/plugin-sdk)
-with default configuration for build & watch scripts.
+Semantic release will only release on configured branches, so it is safe to run release on any branch.

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export const MarkdownEditor: import("react").ForwardRefExoticComponent<import("sanity").StringInputProps<import("sanity").StringSchemaType> & import("react").RefAttributes<any>>;
 export const markdownSchema: import("sanity").Plugin<void>;
 
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"mappings":"AEGA,OAAO,MAAM,6CAcX,CAAA","sources":["src/src/hooks/useDebounce.ts","src/src/components/Editor.tsx","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,null,"import {MarkdownEditor} from './components/Editor'\nimport {createPlugin, defineType} from 'sanity'\n\nexport const markdownSchema = createPlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [\n      defineType({\n        type: 'string',\n        name: 'markdown',\n        title: 'Markdown',\n        components: {\n          input: MarkdownEditor,\n        },\n      }),\n    ],\n  },\n})\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../"}
+{"mappings":"AEIA,OAAA,MAAM,oKAAuB,CAAA;AAI7B,OAAO,MAAM,6CAcX,CAAA","sources":["src/src/hooks/useDebounce.ts","src/src/components/Editor.tsx","src/src/index.ts","src/index.ts"],"sourcesContent":[null,null,null,"import {MarkdownEditor as Editor} from './components/Editor'\nimport {createPlugin, defineType} from 'sanity'\n\n// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:\nconst MarkdownEditor = Editor\n\nexport {MarkdownEditor}\n\nexport const markdownSchema = createPlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [\n      defineType({\n        type: 'string',\n        name: 'markdown',\n        title: 'Markdown',\n        components: {\n          input: MarkdownEditor,\n        },\n      }),\n    ],\n  },\n})\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../"}

package/lib/index.js

@@ -1,14 +1,10 @@
 var $3KLdq$sanity = require("sanity");
 var $3KLdq$reactjsxruntime = require("react/jsx-runtime");
-var $3KLdq$reactmde = require("react-mde");
-var $3KLdq$reactmarkdown = require("react-markdown");
-var $3KLdq$remarkgfm = require("remark-gfm");
-var $3KLdq$reachautoid = require("@reach/auto-id");
-require("react-mde/lib/styles/css/react-mde-all.css");
+var $3KLdq$uiwreactmdeditor = require("@uiw/react-md-editor");
 var $3KLdq$sanityform = require("sanity/form");
 var $3KLdq$react = require("react");
-var $3KLdq$styledcomponents = require("styled-components");
 var $3KLdq$sanityui = require("@sanity/ui");
+var $3KLdq$rehypesanitize = require("rehype-sanitize");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -17,13 +13,11 @@ function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
 
+$parcel$export(module.exports, "MarkdownEditor", () => $244e63ca53592e4d$export$18a9461578883ec4);
 $parcel$export(module.exports, "markdownSchema", () => $244e63ca53592e4d$export$f225414958dd8925);
 
 
 
-
-
-
 function $84fd43422be26bd7$export$2e2bcd8739ae039(value, delay) {
     const [debouncedValue, setDebouncedValue] = (0, $3KLdq$react.useState)(value);
     (0, $3KLdq$react.useEffect)(()=>{
@@ -43,84 +37,11 @@ function $84fd43422be26bd7$export$2e2bcd8739ae039(value, delay) {
 
 
 
-
-
-const $067e75d167fd097d$var$Preview = ({ markdown: markdown  })=>{
-    return /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)((0, ($parcel$interopDefault($3KLdq$reactmarkdown))), {
-        plugins: [
-            (0, ($parcel$interopDefault($3KLdq$remarkgfm)))
-        ],
-        children: markdown
-    });
-};
-const $067e75d167fd097d$var$defaultToolbarCommands = [
-    [
-        "header",
-        "bold",
-        "italic",
-        "strikethrough"
-    ],
-    [
-        "link",
-        "quote",
-        "code"
-    ],
-    [
-        "unordered-list",
-        "ordered-list",
-        "checked-list"
-    ], 
-];
-// !important is used whenever we need to override inline styles for an element
-const $067e75d167fd097d$var$MarkdownTheme = (0, ($parcel$interopDefault($3KLdq$styledcomponents))).div`
-  & .react-mde {
-    border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-  }
-
-  & .mde-text {
-    background: ${({ studioTheme: studioTheme  })=>studioTheme.color.input.default.enabled.bg} !important;
-    color: ${({ studioTheme: studioTheme  })=>studioTheme.color.input.default.enabled.fg} !important;
-  }
-
-  & .mde-header {
-    background: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.bg};
-    color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.fg};
-    border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-
-    & button,
-    .mde-header-item.mde-header-item.mde-header-item button {
-      color: ${({ studioTheme: studioTheme  })=>studioTheme.color.button.bleed.default.enabled.fg};
-    }
-
-    & button.selected {
-      border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-    }
-  }
-
-  & .image-tip {
-    background: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.bg};
-    color: ${({ studioTheme: studioTheme  })=>studioTheme.color.muted.default.enabled.fg};
-    font-family: ${({ studioTheme: studioTheme  })=>studioTheme.fonts.text.family};
-    border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-  }
-`;
 const $067e75d167fd097d$export$18a9461578883ec4 = /*#__PURE__*/ (0, $3KLdq$react.forwardRef)(function MarkdownEditor(props, ref) {
-    const { schemaType: type , value: value = "" , onBlur: onBlur , onChange: onChange , onFocus: onFocus , readOnly: readOnly  } = props;
-    const options = type.options;
-    const [selectedTab, setSelectedTab] = (0, $3KLdq$react.useState)("write");
+    const { value: value = "" , onBlur: onBlur , onChange: onChange , onFocus: onFocus , readOnly: readOnly  } = props;
     const [editedValue, setEditedValue] = (0, $3KLdq$react.useState)(value);
     const debouncedValue = (0, $84fd43422be26bd7$export$2e2bcd8739ae039)(editedValue, 100);
-    const textarea = (0, $3KLdq$react.useRef)(null);
-    const sanityClient = (0, $3KLdq$sanity.useClient)();
-    // Conditionally update textarea styles based on read only access.
-    // It's also possible to define inline styles via `childProps.textArea.style` on `<ReactMde />`,
-    // but this will override any dynamically created styles provided by the component itself.
-    (0, $3KLdq$react.useEffect)(()=>{
-        if (textarea.current) textarea.current.style.backgroundColor = readOnly ? "rgba(240,240,240)" : "rgba(255,255,255)";
-    }, [
-        textarea,
-        readOnly
-    ]);
+    // const sanityClient = useClient()
     (0, $3KLdq$react.useEffect)(()=>{
         setEditedValue(value);
     }, [
@@ -138,63 +59,56 @@ const $067e75d167fd097d$export$18a9461578883ec4 = /*#__PURE__*/ (0, $3KLdq$react
         debouncedValue,
         onChange
     ]);
-    const saveImage = async function*(data) {
-        const client = sanityClient.withConfig({
-            apiVersion: "2021-03-25"
-        });
-        let success = true;
-        const result = await client.assets.upload("image", data).then((doc)=>`${doc.url}?w=450`).catch(()=>{
-            success = false;
-            return `Error: Could not upload file. Only images are supported.`;
-        });
-        yield result;
-        return success;
-    };
-    const generatePreview = (0, $3KLdq$react.useCallback)((markdown)=>Promise.resolve(/*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)($067e75d167fd097d$var$Preview, {
-            markdown: markdown
-        })), []);
-    const inputId = (0, $3KLdq$reachautoid.useId)();
-    const { sanity: studioTheme  } = (0, $3KLdq$sanityui.useTheme)();
-    /*
-   Assign our forwarded ref to a wrapper element.
-   Ideally, this should be assigned to the textarea inside <ReactMde /> component.
-   Whilst `react-mde` does allow you to target individual sub-components' refs,
-   it will complain if you try and assign a forwarded ref.
-  */ return /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)("div", {
+    /*  const saveImage = async function* (data: any) {
+    const client = sanityClient.withConfig({apiVersion: '2021-03-25'})
+
+    let success = true
+    const result = await client.assets
+      .upload('image', data)
+      .then((doc) => `${doc.url}?w=450`)
+      .catch(() => {
+        success = false
+        return `Error: Could not upload file. Only images are supported.`
+      })
+
+    yield result
+    return success
+  }*/ const { sanity: studioTheme  } = (0, $3KLdq$sanityui.useTheme)();
+    return /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)("div", {
         ref: ref,
-        children: /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)($067e75d167fd097d$var$MarkdownTheme, {
-            studioTheme: studioTheme,
-            children: /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)((0, ($parcel$interopDefault($3KLdq$reactmde))), {
-                toolbarCommands: options?.toolbar || $067e75d167fd097d$var$defaultToolbarCommands,
-                value: editedValue,
-                onChange: setEditedValue,
-                selectedTab: selectedTab,
-                onTabChange: setSelectedTab,
-                readOnly: readOnly,
-                generateMarkdownPreview: generatePreview,
-                childProps: {
-                    textArea: {
-                        id: inputId,
-                        onBlur: onBlur,
-                        onFocus: onFocus
-                    },
-                    writeButton: {
-                        tabIndex: -1
-                    }
-                },
-                paste: {
-                    saveImage: saveImage
-                },
-                refs: {
-                    textarea: textarea
-                }
+        "data-color-mode": studioTheme.color.dark ? "dark" : "light",
+        children: readOnly ? /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)((0, $3KLdq$sanityui.Card), {
+            border: true,
+            padding: 3,
+            children: /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)((0, ($parcel$interopDefault($3KLdq$uiwreactmdeditor))).Markdown, {
+                source: value,
+                rehypePlugins: [
+                    [
+                        (0, ($parcel$interopDefault($3KLdq$rehypesanitize)))
+                    ]
+                ]
             })
+        }) : /*#__PURE__*/ (0, $3KLdq$reactjsxruntime.jsx)((0, ($parcel$interopDefault($3KLdq$uiwreactmdeditor))), {
+            value: editedValue,
+            onChange: setEditedValue,
+            onBlur: onBlur,
+            onFocus: onFocus,
+            previewOptions: {
+                rehypePlugins: [
+                    [
+                        (0, ($parcel$interopDefault($3KLdq$rehypesanitize)))
+                    ]
+                ]
+            },
+            preview: "edit"
         })
     });
 });
 
 
 
+// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:
+const $244e63ca53592e4d$export$18a9461578883ec4 = (0, $067e75d167fd097d$export$18a9461578883ec4);
 const $244e63ca53592e4d$export$f225414958dd8925 = (0, $3KLdq$sanity.createPlugin)({
     name: "markdown-editor",
     schema: {
@@ -204,7 +118,7 @@ const $244e63ca53592e4d$export$f225414958dd8925 = (0, $3KLdq$sanity.createPlugin
                 name: "markdown",
                 title: "Markdown",
                 components: {
-                    input: (0, $067e75d167fd097d$export$18a9461578883ec4)
+                    input: $244e63ca53592e4d$export$18a9461578883ec4
                 }
             }), 
         ]

package/lib/index.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["src/index.ts","src/components/Editor.tsx","src/hooks/useDebounce.ts"],"sourcesContent":["import {MarkdownEditor} from './components/Editor'\nimport {createPlugin, defineType} from 'sanity'\n\nexport const markdownSchema = createPlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [\n      defineType({\n        type: 'string',\n        name: 'markdown',\n        title: 'Markdown',\n        components: {\n          input: MarkdownEditor,\n        },\n      }),\n    ],\n  },\n})\n","import ReactMde from 'react-mde'\nimport ReactMarkdown from 'react-markdown'\nimport gfm from 'remark-gfm'\nimport {useId} from '@reach/auto-id'\n\nimport useDebounce from '../hooks/useDebounce'\nimport 'react-mde/lib/styles/css/react-mde-all.css'\nimport {PatchEvent, set, unset} from 'sanity/form'\nimport {StringInputProps, useClient} from 'sanity'\nimport React, {\n  FC,\n  forwardRef,\n  PropsWithChildren,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport {ToolbarCommands} from 'react-mde/lib/definitions/types'\nimport styled from 'styled-components'\nimport {Theme, useTheme} from '@sanity/ui'\n\nconst Preview = ({markdown}: {markdown: string}) => {\n  return <ReactMarkdown plugins={[gfm]}>{markdown}</ReactMarkdown>\n}\n\nconst defaultToolbarCommands = [\n  ['header', 'bold', 'italic', 'strikethrough'],\n  ['link', 'quote', 'code'],\n  ['unordered-list', 'ordered-list', 'checked-list'],\n]\n\ntype SanityTheme = Theme['sanity']\n\ntype Style = PropsWithChildren<{\n  studioTheme: SanityTheme\n}>\n\n// !important is used whenever we need to override inline styles for an element\nconst MarkdownTheme: FC<Style> = styled.div`\n  & .react-mde {\n    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n  }\n\n  & .mde-text {\n    background: ${({studioTheme}: Style) => studioTheme.color.input.default.enabled.bg} !important;\n    color: ${({studioTheme}: Style) => studioTheme.color.input.default.enabled.fg} !important;\n  }\n\n  & .mde-header {\n    background: ${({studioTheme}: Style) => studioTheme.color.card.enabled.bg};\n    color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.fg};\n    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n\n    & button,\n    .mde-header-item.mde-header-item.mde-header-item button {\n      color: ${({studioTheme}: Style) => studioTheme.color.button.bleed.default.enabled.fg};\n    }\n\n    & button.selected {\n      border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n    }\n  }\n\n  & .image-tip {\n    background: ${({studioTheme}: Style) => studioTheme.color.card.enabled.bg};\n    color: ${({studioTheme}: Style) => studioTheme.color.muted.default.enabled.fg};\n    font-family: ${({studioTheme}: Style) => studioTheme.fonts.text.family};\n    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n  }\n`\n\nexport const MarkdownEditor = forwardRef(function MarkdownEditor(\n  props: StringInputProps,\n  ref: Ref<any>\n) {\n  const {schemaType: type, value = '', onBlur, onChange, onFocus, readOnly} = props\n  const options: {toolbar?: ToolbarCommands} | undefined = type.options as any\n  const [selectedTab, setSelectedTab] = useState<'write' | 'preview'>('write')\n  const [editedValue, setEditedValue] = useState(value)\n  const debouncedValue = useDebounce(editedValue, 100)\n  const textarea = useRef<HTMLTextAreaElement>(null)\n  const sanityClient = useClient()\n\n  // Conditionally update textarea styles based on read only access.\n  // It's also possible to define inline styles via `childProps.textArea.style` on `<ReactMde />`,\n  // but this will override any dynamically created styles provided by the component itself.\n  useEffect(() => {\n    if (textarea.current) {\n      textarea.current.style.backgroundColor = readOnly ? 'rgba(240,240,240)' : 'rgba(255,255,255)'\n    }\n  }, [textarea, readOnly])\n\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 saveImage = async function* (data: any) {\n    const client = sanityClient.withConfig({apiVersion: '2021-03-25'})\n\n    let success = true\n    const result = await client.assets\n      .upload('image', data)\n      .then((doc) => `${doc.url}?w=450`)\n      .catch(() => {\n        success = false\n        return `Error: Could not upload file. Only images are supported.`\n      })\n\n    yield result\n    return success\n  }\n\n  const generatePreview = useCallback(\n    (markdown: string) => Promise.resolve(<Preview markdown={markdown} />),\n    []\n  )\n\n  const inputId = useId()\n  const {sanity: studioTheme} = useTheme()\n  /*\n   Assign our forwarded ref to a wrapper element.\n   Ideally, this should be assigned to the textarea inside <ReactMde /> component.\n   Whilst `react-mde` does allow you to target individual sub-components' refs,\n   it will complain if you try and assign a forwarded ref.\n  */\n  return (\n    <div ref={ref}>\n      <MarkdownTheme studioTheme={studioTheme}>\n        <ReactMde\n          toolbarCommands={options?.toolbar || defaultToolbarCommands}\n          value={editedValue}\n          onChange={setEditedValue}\n          selectedTab={selectedTab}\n          onTabChange={setSelectedTab}\n          readOnly={readOnly}\n          generateMarkdownPreview={generatePreview}\n          childProps={{\n            textArea: {\n              id: inputId,\n              onBlur,\n              onFocus,\n            },\n            writeButton: {\n              tabIndex: -1,\n            },\n          }}\n          paste={{saveImage}}\n          refs={{textarea}}\n        />\n      </MarkdownTheme>\n    </div>\n  )\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"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../"}
+{"mappings":";;;;;;;;;;;;;;;;;ACAA;;ACAA;AAEe,kDAAqB,KAAc,EAAE,KAAa,EAAE;IACjE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,CAAA,GAAA,qBAAQ,CAAA,CAAC,KAAK,CAAC;IAC3D,CAAA,GAAA,sBAAS,CAAA,CAAC,IAAM;QACd,MAAM,OAAO,GAAG,UAAU,CAAC,IAAM;YAC/B,iBAAiB,CAAC,KAAK,CAAC;SACzB,EAAE,KAAK,CAAC;QAET,OAAO,IAAM,YAAY,CAAC,OAAO,CAAC,CAAA;KACnC,EAAE;QAAC,KAAK;QAAE,KAAK;KAAC,CAAC;IAElB,OAAO,cAAc,CAAA;CACtB;;;;;;;ADLM,MAAM,yCAAc,iBAAG,CAAA,GAAA,uBAAU,CAAA,CAAC,SAAS,cAAc,CAC9D,KAAuB,EACvB,GAAa,EACb;IACA,MAAM,SAAC,KAAK,GAAG,EAAE,WAAE,MAAM,CAAA,YAAE,QAAQ,CAAA,WAAE,OAAO,CAAA,YAAE,QAAQ,CAAA,EAAC,GAAG,KAAK;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,CAAA,GAAA,qBAAQ,CAAA,CAAqB,KAAK,CAAC;IACzE,MAAM,cAAc,GAAG,CAAA,GAAA,wCAAW,CAAA,CAAC,WAAW,EAAE,GAAG,CAAC;IACpD,mCAAmC;IAEnC,CAAA,GAAA,sBAAS,CAAA,CAAC,IAAM;QACd,cAAc,CAAC,KAAK,CAAC;KACtB,EAAE;QAAC,KAAK;KAAC,CAAC;IAEX,CAAA,GAAA,sBAAS,CAAA,CAAC,IAAM;QACd,IAAI,CAAC,cAAc,IAAI,KAAK,EAC1B,QAAQ,CAAC,CAAA,GAAA,4BAAU,CAAA,CAAC,IAAI,CAAC;YAAC,CAAA,GAAA,uBAAK,CAAA,EAAE;SAAC,CAAC,CAAC;aAC/B,IAAI,cAAc,KAAK,KAAK,EACjC,QAAQ,CAAC,CAAA,GAAA,4BAAU,CAAA,CAAC,IAAI,CAAC;YAAC,CAAA,GAAA,qBAAG,CAAA,CAAC,cAAc,CAAC;SAAC,CAAC,CAAC;IAElD,uDAAuD;KACxD,EAAE;QAAC,cAAc;QAAE,QAAQ;KAAC,CAAC;IAE9B;;;;;;;;;;;;;;KAcG,CAEH,MAAM,EAAC,MAAM,EAAE,WAAW,CAAA,EAAC,GAAG,CAAA,GAAA,wBAAQ,CAAA,EAAE;IACxC,qBACE,gCAAC,KAAG;QAAC,GAAG,EAAE,GAAG;QAAE,iBAAe,EAAE,WAAW,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO;kBACtE,QAAQ,iBACP,gCAAC,CAAA,GAAA,oBAAI,CAAA;YAAC,MAAM;YAAC,OAAO,EAAE,CAAC;sBACrB,cAAA,gCAAC,CAAA,GAAA,iDAAQ,CAAA,CAAC,QAAQ;gBAAC,MAAM,EAAE,KAAK;gBAAE,aAAa,EAAE;oBAAC;wBAAC,CAAA,GAAA,+CAAc,CAAA;qBAAC;iBAAC;cAAI;UAClE,iBAEP,gCAAC,CAAA,GAAA,iDAAQ,CAAA;YACP,KAAK,EAAE,WAAW;YAClB,QAAQ,EAAE,cAAc;YACxB,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,OAAO;YAChB,cAAc,EAAE;gBACd,aAAa,EAAE;oBAAC;wBAAC,CAAA,GAAA,+CAAc,CAAA;qBAAC;iBAAC;aAClC;YACD,OAAO,EAAC,MAAM;UACd,AACH;MACG,CACP;CACF,CAAC;;ADnEF;;AAGA,6FAA6F;AAC7F,MAAM,yCAAc,GAAG,CAAA,GAAA,yCAAM,CAAA;AAItB,MAAM,yCAAc,GAAG,CAAA,GAAA,0BAAY,CAAA,CAAC;IACzC,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE;QACN,KAAK,EAAE;YACL,CAAA,GAAA,wBAAU,CAAA,CAAC;gBACT,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,UAAU;gBACjB,UAAU,EAAE;oBACV,KAAK,EAAE,yCAAc;iBACtB;aACF,CAAC;SACH;KACF;CACF,CAAC","sources":["src/index.ts","src/components/Editor.tsx","src/hooks/useDebounce.ts"],"sourcesContent":["import {MarkdownEditor as Editor} from './components/Editor'\nimport {createPlugin, defineType} from 'sanity'\n\n// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:\nconst MarkdownEditor = Editor\n\nexport {MarkdownEditor}\n\nexport const markdownSchema = createPlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [\n      defineType({\n        type: 'string',\n        name: 'markdown',\n        title: 'Markdown',\n        components: {\n          input: MarkdownEditor,\n        },\n      }),\n    ],\n  },\n})\n","import MDEditor from '@uiw/react-md-editor'\nimport useDebounce from '../hooks/useDebounce'\nimport {PatchEvent, set, unset} from 'sanity/form'\nimport {StringInputProps} from 'sanity'\nimport React, {forwardRef, Ref, useEffect, useState} 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 {value = '', onBlur, onChange, onFocus, readOnly} = props\n  const [editedValue, setEditedValue] = useState<string | undefined>(value)\n  const debouncedValue = useDebounce(editedValue, 100)\n  // const sanityClient = useClient()\n\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 saveImage = async function* (data: any) {\n    const client = sanityClient.withConfig({apiVersion: '2021-03-25'})\n\n    let success = true\n    const result = await client.assets\n      .upload('image', data)\n      .then((doc) => `${doc.url}?w=450`)\n      .catch(() => {\n        success = false\n        return `Error: Could not upload file. Only images are supported.`\n      })\n\n    yield result\n    return success\n  }*/\n\n  const {sanity: studioTheme} = useTheme()\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        />\n      )}\n    </div>\n  )\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"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../"}

package/lib/index.modern.js

@@ -1,17 +1,10 @@
-import {createPlugin as $jPEKE$createPlugin, defineType as $jPEKE$defineType, useClient as $jPEKE$useClient} from "sanity";
+import {createPlugin as $jPEKE$createPlugin, defineType as $jPEKE$defineType} from "sanity";
 import {jsx as $jPEKE$jsx} from "react/jsx-runtime";
-import $jPEKE$reactmde from "react-mde";
-import $jPEKE$reactmarkdown from "react-markdown";
-import $jPEKE$remarkgfm from "remark-gfm";
-import {useId as $jPEKE$useId} from "@reach/auto-id";
-import "react-mde/lib/styles/css/react-mde-all.css";
+import $jPEKE$uiwreactmdeditor from "@uiw/react-md-editor";
 import {PatchEvent as $jPEKE$PatchEvent, unset as $jPEKE$unset, set as $jPEKE$set} from "sanity/form";
-import {forwardRef as $jPEKE$forwardRef, useState as $jPEKE$useState, useRef as $jPEKE$useRef, useEffect as $jPEKE$useEffect, useCallback as $jPEKE$useCallback} from "react";
-import $jPEKE$styledcomponents from "styled-components";
-import {useTheme as $jPEKE$useTheme} from "@sanity/ui";
-
-
-
+import {forwardRef as $jPEKE$forwardRef, useState as $jPEKE$useState, useEffect as $jPEKE$useEffect} from "react";
+import {useTheme as $jPEKE$useTheme, Card as $jPEKE$Card} from "@sanity/ui";
+import $jPEKE$rehypesanitize from "rehype-sanitize";
 
 
 
@@ -35,84 +28,11 @@ function $a9f5cf746146e5f0$export$2e2bcd8739ae039(value, delay) {
 
 
 
-
-
-const $483dd42bf797352b$var$Preview = ({ markdown: markdown  })=>{
-    return /*#__PURE__*/ (0, $jPEKE$jsx)((0, $jPEKE$reactmarkdown), {
-        plugins: [
-            (0, $jPEKE$remarkgfm)
-        ],
-        children: markdown
-    });
-};
-const $483dd42bf797352b$var$defaultToolbarCommands = [
-    [
-        "header",
-        "bold",
-        "italic",
-        "strikethrough"
-    ],
-    [
-        "link",
-        "quote",
-        "code"
-    ],
-    [
-        "unordered-list",
-        "ordered-list",
-        "checked-list"
-    ], 
-];
-// !important is used whenever we need to override inline styles for an element
-const $483dd42bf797352b$var$MarkdownTheme = (0, $jPEKE$styledcomponents).div`
-  & .react-mde {
-    border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-  }
-
-  & .mde-text {
-    background: ${({ studioTheme: studioTheme  })=>studioTheme.color.input.default.enabled.bg} !important;
-    color: ${({ studioTheme: studioTheme  })=>studioTheme.color.input.default.enabled.fg} !important;
-  }
-
-  & .mde-header {
-    background: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.bg};
-    color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.fg};
-    border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-
-    & button,
-    .mde-header-item.mde-header-item.mde-header-item button {
-      color: ${({ studioTheme: studioTheme  })=>studioTheme.color.button.bleed.default.enabled.fg};
-    }
-
-    & button.selected {
-      border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-    }
-  }
-
-  & .image-tip {
-    background: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.bg};
-    color: ${({ studioTheme: studioTheme  })=>studioTheme.color.muted.default.enabled.fg};
-    font-family: ${({ studioTheme: studioTheme  })=>studioTheme.fonts.text.family};
-    border-color: ${({ studioTheme: studioTheme  })=>studioTheme.color.card.enabled.border};
-  }
-`;
 const $483dd42bf797352b$export$18a9461578883ec4 = /*#__PURE__*/ (0, $jPEKE$forwardRef)(function MarkdownEditor(props, ref) {
-    const { schemaType: type , value: value = "" , onBlur: onBlur , onChange: onChange , onFocus: onFocus , readOnly: readOnly  } = props;
-    const options = type.options;
-    const [selectedTab, setSelectedTab] = (0, $jPEKE$useState)("write");
+    const { value: value = "" , onBlur: onBlur , onChange: onChange , onFocus: onFocus , readOnly: readOnly  } = props;
     const [editedValue, setEditedValue] = (0, $jPEKE$useState)(value);
     const debouncedValue = (0, $a9f5cf746146e5f0$export$2e2bcd8739ae039)(editedValue, 100);
-    const textarea = (0, $jPEKE$useRef)(null);
-    const sanityClient = (0, $jPEKE$useClient)();
-    // Conditionally update textarea styles based on read only access.
-    // It's also possible to define inline styles via `childProps.textArea.style` on `<ReactMde />`,
-    // but this will override any dynamically created styles provided by the component itself.
-    (0, $jPEKE$useEffect)(()=>{
-        if (textarea.current) textarea.current.style.backgroundColor = readOnly ? "rgba(240,240,240)" : "rgba(255,255,255)";
-    }, [
-        textarea,
-        readOnly
-    ]);
+    // const sanityClient = useClient()
     (0, $jPEKE$useEffect)(()=>{
         setEditedValue(value);
     }, [
@@ -130,63 +50,56 @@ const $483dd42bf797352b$export$18a9461578883ec4 = /*#__PURE__*/ (0, $jPEKE$forwa
         debouncedValue,
         onChange
     ]);
-    const saveImage = async function*(data) {
-        const client = sanityClient.withConfig({
-            apiVersion: "2021-03-25"
-        });
-        let success = true;
-        const result = await client.assets.upload("image", data).then((doc)=>`${doc.url}?w=450`).catch(()=>{
-            success = false;
-            return `Error: Could not upload file. Only images are supported.`;
-        });
-        yield result;
-        return success;
-    };
-    const generatePreview = (0, $jPEKE$useCallback)((markdown)=>Promise.resolve(/*#__PURE__*/ (0, $jPEKE$jsx)($483dd42bf797352b$var$Preview, {
-            markdown: markdown
-        })), []);
-    const inputId = (0, $jPEKE$useId)();
-    const { sanity: studioTheme  } = (0, $jPEKE$useTheme)();
-    /*
-   Assign our forwarded ref to a wrapper element.
-   Ideally, this should be assigned to the textarea inside <ReactMde /> component.
-   Whilst `react-mde` does allow you to target individual sub-components' refs,
-   it will complain if you try and assign a forwarded ref.
-  */ return /*#__PURE__*/ (0, $jPEKE$jsx)("div", {
+    /*  const saveImage = async function* (data: any) {
+    const client = sanityClient.withConfig({apiVersion: '2021-03-25'})
+
+    let success = true
+    const result = await client.assets
+      .upload('image', data)
+      .then((doc) => `${doc.url}?w=450`)
+      .catch(() => {
+        success = false
+        return `Error: Could not upload file. Only images are supported.`
+      })
+
+    yield result
+    return success
+  }*/ const { sanity: studioTheme  } = (0, $jPEKE$useTheme)();
+    return /*#__PURE__*/ (0, $jPEKE$jsx)("div", {
         ref: ref,
-        children: /*#__PURE__*/ (0, $jPEKE$jsx)($483dd42bf797352b$var$MarkdownTheme, {
-            studioTheme: studioTheme,
-            children: /*#__PURE__*/ (0, $jPEKE$jsx)((0, $jPEKE$reactmde), {
-                toolbarCommands: options?.toolbar || $483dd42bf797352b$var$defaultToolbarCommands,
-                value: editedValue,
-                onChange: setEditedValue,
-                selectedTab: selectedTab,
-                onTabChange: setSelectedTab,
-                readOnly: readOnly,
-                generateMarkdownPreview: generatePreview,
-                childProps: {
-                    textArea: {
-                        id: inputId,
-                        onBlur: onBlur,
-                        onFocus: onFocus
-                    },
-                    writeButton: {
-                        tabIndex: -1
-                    }
-                },
-                paste: {
-                    saveImage: saveImage
-                },
-                refs: {
-                    textarea: textarea
-                }
+        "data-color-mode": studioTheme.color.dark ? "dark" : "light",
+        children: readOnly ? /*#__PURE__*/ (0, $jPEKE$jsx)((0, $jPEKE$Card), {
+            border: true,
+            padding: 3,
+            children: /*#__PURE__*/ (0, $jPEKE$jsx)((0, $jPEKE$uiwreactmdeditor).Markdown, {
+                source: value,
+                rehypePlugins: [
+                    [
+                        (0, $jPEKE$rehypesanitize)
+                    ]
+                ]
             })
+        }) : /*#__PURE__*/ (0, $jPEKE$jsx)((0, $jPEKE$uiwreactmdeditor), {
+            value: editedValue,
+            onChange: setEditedValue,
+            onBlur: onBlur,
+            onFocus: onFocus,
+            previewOptions: {
+                rehypePlugins: [
+                    [
+                        (0, $jPEKE$rehypesanitize)
+                    ]
+                ]
+            },
+            preview: "edit"
         })
     });
 });
 
 
 
+// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:
+const $df9eabe9bda49ea8$export$18a9461578883ec4 = (0, $483dd42bf797352b$export$18a9461578883ec4);
 const $df9eabe9bda49ea8$export$f225414958dd8925 = (0, $jPEKE$createPlugin)({
     name: "markdown-editor",
     schema: {
@@ -196,7 +109,7 @@ const $df9eabe9bda49ea8$export$f225414958dd8925 = (0, $jPEKE$createPlugin)({
                 name: "markdown",
                 title: "Markdown",
                 components: {
-                    input: (0, $483dd42bf797352b$export$18a9461578883ec4)
+                    input: $df9eabe9bda49ea8$export$18a9461578883ec4
                 }
             }), 
         ]
@@ -204,5 +117,5 @@ const $df9eabe9bda49ea8$export$f225414958dd8925 = (0, $jPEKE$createPlugin)({
 });
 
 
-export {$df9eabe9bda49ea8$export$f225414958dd8925 as markdownSchema};
+export {$df9eabe9bda49ea8$export$18a9461578883ec4 as MarkdownEditor, $df9eabe9bda49ea8$export$f225414958dd8925 as markdownSchema};
 //# sourceMappingURL=index.modern.js.map

package/lib/index.modern.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["src/index.ts","src/components/Editor.tsx","src/hooks/useDebounce.ts"],"sourcesContent":["import {MarkdownEditor} from './components/Editor'\nimport {createPlugin, defineType} from 'sanity'\n\nexport const markdownSchema = createPlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [\n      defineType({\n        type: 'string',\n        name: 'markdown',\n        title: 'Markdown',\n        components: {\n          input: MarkdownEditor,\n        },\n      }),\n    ],\n  },\n})\n","import ReactMde from 'react-mde'\nimport ReactMarkdown from 'react-markdown'\nimport gfm from 'remark-gfm'\nimport {useId} from '@reach/auto-id'\n\nimport useDebounce from '../hooks/useDebounce'\nimport 'react-mde/lib/styles/css/react-mde-all.css'\nimport {PatchEvent, set, unset} from 'sanity/form'\nimport {StringInputProps, useClient} from 'sanity'\nimport React, {\n  FC,\n  forwardRef,\n  PropsWithChildren,\n  Ref,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport {ToolbarCommands} from 'react-mde/lib/definitions/types'\nimport styled from 'styled-components'\nimport {Theme, useTheme} from '@sanity/ui'\n\nconst Preview = ({markdown}: {markdown: string}) => {\n  return <ReactMarkdown plugins={[gfm]}>{markdown}</ReactMarkdown>\n}\n\nconst defaultToolbarCommands = [\n  ['header', 'bold', 'italic', 'strikethrough'],\n  ['link', 'quote', 'code'],\n  ['unordered-list', 'ordered-list', 'checked-list'],\n]\n\ntype SanityTheme = Theme['sanity']\n\ntype Style = PropsWithChildren<{\n  studioTheme: SanityTheme\n}>\n\n// !important is used whenever we need to override inline styles for an element\nconst MarkdownTheme: FC<Style> = styled.div`\n  & .react-mde {\n    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n  }\n\n  & .mde-text {\n    background: ${({studioTheme}: Style) => studioTheme.color.input.default.enabled.bg} !important;\n    color: ${({studioTheme}: Style) => studioTheme.color.input.default.enabled.fg} !important;\n  }\n\n  & .mde-header {\n    background: ${({studioTheme}: Style) => studioTheme.color.card.enabled.bg};\n    color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.fg};\n    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n\n    & button,\n    .mde-header-item.mde-header-item.mde-header-item button {\n      color: ${({studioTheme}: Style) => studioTheme.color.button.bleed.default.enabled.fg};\n    }\n\n    & button.selected {\n      border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n    }\n  }\n\n  & .image-tip {\n    background: ${({studioTheme}: Style) => studioTheme.color.card.enabled.bg};\n    color: ${({studioTheme}: Style) => studioTheme.color.muted.default.enabled.fg};\n    font-family: ${({studioTheme}: Style) => studioTheme.fonts.text.family};\n    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};\n  }\n`\n\nexport const MarkdownEditor = forwardRef(function MarkdownEditor(\n  props: StringInputProps,\n  ref: Ref<any>\n) {\n  const {schemaType: type, value = '', onBlur, onChange, onFocus, readOnly} = props\n  const options: {toolbar?: ToolbarCommands} | undefined = type.options as any\n  const [selectedTab, setSelectedTab] = useState<'write' | 'preview'>('write')\n  const [editedValue, setEditedValue] = useState(value)\n  const debouncedValue = useDebounce(editedValue, 100)\n  const textarea = useRef<HTMLTextAreaElement>(null)\n  const sanityClient = useClient()\n\n  // Conditionally update textarea styles based on read only access.\n  // It's also possible to define inline styles via `childProps.textArea.style` on `<ReactMde />`,\n  // but this will override any dynamically created styles provided by the component itself.\n  useEffect(() => {\n    if (textarea.current) {\n      textarea.current.style.backgroundColor = readOnly ? 'rgba(240,240,240)' : 'rgba(255,255,255)'\n    }\n  }, [textarea, readOnly])\n\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 saveImage = async function* (data: any) {\n    const client = sanityClient.withConfig({apiVersion: '2021-03-25'})\n\n    let success = true\n    const result = await client.assets\n      .upload('image', data)\n      .then((doc) => `${doc.url}?w=450`)\n      .catch(() => {\n        success = false\n        return `Error: Could not upload file. Only images are supported.`\n      })\n\n    yield result\n    return success\n  }\n\n  const generatePreview = useCallback(\n    (markdown: string) => Promise.resolve(<Preview markdown={markdown} />),\n    []\n  )\n\n  const inputId = useId()\n  const {sanity: studioTheme} = useTheme()\n  /*\n   Assign our forwarded ref to a wrapper element.\n   Ideally, this should be assigned to the textarea inside <ReactMde /> component.\n   Whilst `react-mde` does allow you to target individual sub-components' refs,\n   it will complain if you try and assign a forwarded ref.\n  */\n  return (\n    <div ref={ref}>\n      <MarkdownTheme studioTheme={studioTheme}>\n        <ReactMde\n          toolbarCommands={options?.toolbar || defaultToolbarCommands}\n          value={editedValue}\n          onChange={setEditedValue}\n          selectedTab={selectedTab}\n          onTabChange={setSelectedTab}\n          readOnly={readOnly}\n          generateMarkdownPreview={generatePreview}\n          childProps={{\n            textArea: {\n              id: inputId,\n              onBlur,\n              onFocus,\n            },\n            writeButton: {\n              tabIndex: -1,\n            },\n          }}\n          paste={{saveImage}}\n          refs={{textarea}}\n        />\n      </MarkdownTheme>\n    </div>\n  )\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"],"names":[],"version":3,"file":"index.modern.js.map","sourceRoot":"../"}
+{"mappings":"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","sources":["src/index.ts","src/components/Editor.tsx","src/hooks/useDebounce.ts"],"sourcesContent":["import {MarkdownEditor as Editor} from './components/Editor'\nimport {createPlugin, defineType} from 'sanity'\n\n// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:\nconst MarkdownEditor = Editor\n\nexport {MarkdownEditor}\n\nexport const markdownSchema = createPlugin({\n  name: 'markdown-editor',\n  schema: {\n    types: [\n      defineType({\n        type: 'string',\n        name: 'markdown',\n        title: 'Markdown',\n        components: {\n          input: MarkdownEditor,\n        },\n      }),\n    ],\n  },\n})\n","import MDEditor from '@uiw/react-md-editor'\nimport useDebounce from '../hooks/useDebounce'\nimport {PatchEvent, set, unset} from 'sanity/form'\nimport {StringInputProps} from 'sanity'\nimport React, {forwardRef, Ref, useEffect, useState} 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 {value = '', onBlur, onChange, onFocus, readOnly} = props\n  const [editedValue, setEditedValue] = useState<string | undefined>(value)\n  const debouncedValue = useDebounce(editedValue, 100)\n  // const sanityClient = useClient()\n\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 saveImage = async function* (data: any) {\n    const client = sanityClient.withConfig({apiVersion: '2021-03-25'})\n\n    let success = true\n    const result = await client.assets\n      .upload('image', data)\n      .then((doc) => `${doc.url}?w=450`)\n      .catch(() => {\n        success = false\n        return `Error: Could not upload file. Only images are supported.`\n      })\n\n    yield result\n    return success\n  }*/\n\n  const {sanity: studioTheme} = useTheme()\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        />\n      )}\n    </div>\n  )\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"],"names":[],"version":3,"file":"index.modern.js.map","sourceRoot":"../"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-markdown",
-  "version": "3.0.0-studio-v3.0",
+  "version": "3.0.0-v3-studio.1",
   "description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
   "scripts": {
     "clean": "rimraf lib",
@@ -39,18 +39,18 @@
   "license": "MIT",
   "dependencies": {
     "@reach/auto-id": "^0.17.0",
-    "@sanity/incompatible-plugin": "^0.0.1-studio-v3.3",
+    "@sanity/incompatible-plugin": "^1.0.0",
     "@sanity/ui": "^0.37.9",
-    "react-markdown": "^5.0.3",
-    "react-mde": "^11.5.0",
-    "remark-gfm": "^1.0.0"
+    "@uiw/react-md-editor": "^3.18.1",
+    "rehype-sanitize": "^5.0.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.1.0",
     "@commitlint/config-conventional": "^15.0.0",
-    "@parcel/packager-ts": "^2.6.0",
-    "@parcel/transformer-typescript-types": "^2.6.0",
-    "@sanity/plugin-kit": "^0.0.1-studio-v3.4",
+    "@parcel/packager-ts": "^2.7.0",
+    "@parcel/transformer-typescript-types": "^2.7.0",
+    "@sanity/plugin-kit": "^1.0.1",
+    "@sanity/semantic-release-preset": "^2.0.0",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
     "@typescript-eslint/parser": "^5.12.0",
@@ -62,17 +62,17 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "^7.0.0",
     "lint-staged": "^12.3.3",
-    "parcel": "^2.6.0",
+    "parcel": "^2.7.0",
     "prettier": "^2.5.1",
     "react": "^17.0.0 || ^18.0.0",
     "rimraf": "^3.0.2",
-    "sanity": "^2.30.1-purple-unicorn.964",
+    "sanity": "3.0.0-dev-preview.15",
     "styled-components": "^5.2.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.8.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
-    "sanity": "purple-unicorn",
+    "sanity": "dev-preview",
     "styled-components": "^5.2.0"
   },
   "repository": {

package/src/components/Editor.tsx

@@ -1,96 +1,19 @@
-import ReactMde from 'react-mde'
-import ReactMarkdown from 'react-markdown'
-import gfm from 'remark-gfm'
-import {useId} from '@reach/auto-id'
-
+import MDEditor from '@uiw/react-md-editor'
 import useDebounce from '../hooks/useDebounce'
-import 'react-mde/lib/styles/css/react-mde-all.css'
 import {PatchEvent, set, unset} from 'sanity/form'
-import {StringInputProps, useClient} from 'sanity'
-import React, {
-  FC,
-  forwardRef,
-  PropsWithChildren,
-  Ref,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import {ToolbarCommands} from 'react-mde/lib/definitions/types'
-import styled from 'styled-components'
-import {Theme, useTheme} from '@sanity/ui'
-
-const Preview = ({markdown}: {markdown: string}) => {
-  return <ReactMarkdown plugins={[gfm]}>{markdown}</ReactMarkdown>
-}
-
-const defaultToolbarCommands = [
-  ['header', 'bold', 'italic', 'strikethrough'],
-  ['link', 'quote', 'code'],
-  ['unordered-list', 'ordered-list', 'checked-list'],
-]
-
-type SanityTheme = Theme['sanity']
-
-type Style = PropsWithChildren<{
-  studioTheme: SanityTheme
-}>
-
-// !important is used whenever we need to override inline styles for an element
-const MarkdownTheme: FC<Style> = styled.div`
-  & .react-mde {
-    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};
-  }
-
-  & .mde-text {
-    background: ${({studioTheme}: Style) => studioTheme.color.input.default.enabled.bg} !important;
-    color: ${({studioTheme}: Style) => studioTheme.color.input.default.enabled.fg} !important;
-  }
-
-  & .mde-header {
-    background: ${({studioTheme}: Style) => studioTheme.color.card.enabled.bg};
-    color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.fg};
-    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};
-
-    & button,
-    .mde-header-item.mde-header-item.mde-header-item button {
-      color: ${({studioTheme}: Style) => studioTheme.color.button.bleed.default.enabled.fg};
-    }
-
-    & button.selected {
-      border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};
-    }
-  }
-
-  & .image-tip {
-    background: ${({studioTheme}: Style) => studioTheme.color.card.enabled.bg};
-    color: ${({studioTheme}: Style) => studioTheme.color.muted.default.enabled.fg};
-    font-family: ${({studioTheme}: Style) => studioTheme.fonts.text.family};
-    border-color: ${({studioTheme}: Style) => studioTheme.color.card.enabled.border};
-  }
-`
+import {StringInputProps} from 'sanity'
+import React, {forwardRef, Ref, useEffect, useState} from 'react'
+import {Card, useTheme} from '@sanity/ui'
+import rehypeSanitize from 'rehype-sanitize'
 
 export const MarkdownEditor = forwardRef(function MarkdownEditor(
   props: StringInputProps,
   ref: Ref<any>
 ) {
-  const {schemaType: type, value = '', onBlur, onChange, onFocus, readOnly} = props
-  const options: {toolbar?: ToolbarCommands} | undefined = type.options as any
-  const [selectedTab, setSelectedTab] = useState<'write' | 'preview'>('write')
-  const [editedValue, setEditedValue] = useState(value)
+  const {value = '', onBlur, onChange, onFocus, readOnly} = props
+  const [editedValue, setEditedValue] = useState<string | undefined>(value)
   const debouncedValue = useDebounce(editedValue, 100)
-  const textarea = useRef<HTMLTextAreaElement>(null)
-  const sanityClient = useClient()
-
-  // Conditionally update textarea styles based on read only access.
-  // It's also possible to define inline styles via `childProps.textArea.style` on `<ReactMde />`,
-  // but this will override any dynamically created styles provided by the component itself.
-  useEffect(() => {
-    if (textarea.current) {
-      textarea.current.style.backgroundColor = readOnly ? 'rgba(240,240,240)' : 'rgba(255,255,255)'
-    }
-  }, [textarea, readOnly])
+  // const sanityClient = useClient()
 
   useEffect(() => {
     setEditedValue(value)
@@ -105,7 +28,7 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedValue, onChange])
 
-  const saveImage = async function* (data: any) {
+  /*  const saveImage = async function* (data: any) {
     const client = sanityClient.withConfig({apiVersion: '2021-03-25'})
 
     let success = true
@@ -119,46 +42,27 @@ export const MarkdownEditor = forwardRef(function MarkdownEditor(
 
     yield result
     return success
-  }
-
-  const generatePreview = useCallback(
-    (markdown: string) => Promise.resolve(<Preview markdown={markdown} />),
-    []
-  )
+  }*/
 
-  const inputId = useId()
   const {sanity: studioTheme} = useTheme()
-  /*
-   Assign our forwarded ref to a wrapper element.
-   Ideally, this should be assigned to the textarea inside <ReactMde /> component.
-   Whilst `react-mde` does allow you to target individual sub-components' refs,
-   it will complain if you try and assign a forwarded ref.
-  */
   return (
-    <div ref={ref}>
-      <MarkdownTheme studioTheme={studioTheme}>
-        <ReactMde
-          toolbarCommands={options?.toolbar || defaultToolbarCommands}
+    <div ref={ref} data-color-mode={studioTheme.color.dark ? 'dark' : 'light'}>
+      {readOnly ? (
+        <Card border padding={3}>
+          <MDEditor.Markdown source={value} rehypePlugins={[[rehypeSanitize]]} />
+        </Card>
+      ) : (
+        <MDEditor
           value={editedValue}
           onChange={setEditedValue}
-          selectedTab={selectedTab}
-          onTabChange={setSelectedTab}
-          readOnly={readOnly}
-          generateMarkdownPreview={generatePreview}
-          childProps={{
-            textArea: {
-              id: inputId,
-              onBlur,
-              onFocus,
-            },
-            writeButton: {
-              tabIndex: -1,
-            },
+          onBlur={onBlur}
+          onFocus={onFocus}
+          previewOptions={{
+            rehypePlugins: [[rehypeSanitize]],
           }}
-          paste={{saveImage}}
-          refs={{textarea}}
+          preview="edit"
         />
-      </MarkdownTheme>
+      )}
     </div>
   )
 })

package/src/index.ts

@@ -1,6 +1,11 @@
-import {MarkdownEditor} from './components/Editor'
+import {MarkdownEditor as Editor} from './components/Editor'
 import {createPlugin, defineType} from 'sanity'
 
+// re-exporting MarkdownEditor directly explodes @parcel/transformer-typescript-types :shrug:
+const MarkdownEditor = Editor
+
+export {MarkdownEditor}
+
 export const markdownSchema = createPlugin({
   name: 'markdown-editor',
   schema: {