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

package/README.md

@@ -1,14 +1,47 @@
 # sanity-plugin-markdown
-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 inserted image(s) has a default width crop in the url which you can change to your liking with the [Sanity image pipeline parameters](https://www.sanity.io/docs/image-urls).
+
+> **NOTE**
+>
+> This is the **Sanity Studio v3 version** of sanity-plugin-markdown.
+>
+> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity-plugin-markdown).
+
+## What is it?
+
+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).
+
+![Markdown input](assets/markdown-input.png)
 
 ## Installation
 
 ```
-sanity install markdown
+npm install --save sanity-plugin-markdown@studio-v3
+```
+
+or
+
+```
+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 = {
@@ -32,3 +65,25 @@ const myDocument = {
 
 MIT © Sanity.io
 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:
+
+```bash
+npx yalc add sanity-plugin-markdown --link && yarn install
+```
+
+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.
+
+### About build & watch
+
+This plugin uses [@sanity/plugin-sdk](https://github.com/sanity-io/plugin-sdk)
+with default configuration for build & watch scripts.

package/lib/index.d.ts

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

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;ACyEA,OAAO,MAAM,+HA0FX,CAAA;AC9JF,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 {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

@@ -0,0 +1,216 @@
+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$sanityform = require("sanity/form");
+var $3KLdq$react = require("react");
+var $3KLdq$styledcomponents = require("styled-components");
+var $3KLdq$sanityui = require("@sanity/ui");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "markdownSchema", () => $244e63ca53592e4d$export$f225414958dd8925);
+$parcel$export(module.exports, "MarkdownEditor", () => $067e75d167fd097d$export$18a9461578883ec4);
+
+
+
+
+
+
+function $84fd43422be26bd7$export$2e2bcd8739ae039(value, delay) {
+    const [debouncedValue, setDebouncedValue] = (0, $3KLdq$react.useState)(value);
+    (0, $3KLdq$react.useEffect)(()=>{
+        const handler = setTimeout(()=>{
+            setDebouncedValue(value);
+        }, delay);
+        return ()=>clearTimeout(handler);
+    }, [
+        value,
+        delay
+    ]);
+    return debouncedValue;
+}
+
+
+
+
+
+
+
+
+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 [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
+    ]);
+    (0, $3KLdq$react.useEffect)(()=>{
+        setEditedValue(value);
+    }, [
+        value
+    ]);
+    (0, $3KLdq$react.useEffect)(()=>{
+        if (!debouncedValue && value) onChange((0, $3KLdq$sanityform.PatchEvent).from([
+            (0, $3KLdq$sanityform.unset)()
+        ]));
+        else if (debouncedValue !== value) onChange((0, $3KLdq$sanityform.PatchEvent).from([
+            (0, $3KLdq$sanityform.set)(debouncedValue)
+        ]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        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", {
+        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
+                }
+            })
+        })
+    });
+});
+
+
+
+const $244e63ca53592e4d$export$f225414958dd8925 = (0, $3KLdq$sanity.createPlugin)({
+    name: "markdown-editor",
+    schema: {
+        types: [
+            (0, $3KLdq$sanity.defineType)({
+                type: "string",
+                name: "markdown",
+                title: "Markdown",
+                components: {
+                    input: (0, $067e75d167fd097d$export$18a9461578883ec4)
+                }
+            }), 
+        ]
+    }
+});
+
+
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +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 {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 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":"../"}

package/lib/index.modern.js

@@ -0,0 +1,208 @@
+import {createPlugin as $jPEKE$createPlugin, defineType as $jPEKE$defineType, useClient as $jPEKE$useClient} 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 {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";
+
+
+
+
+
+
+
+function $a9f5cf746146e5f0$export$2e2bcd8739ae039(value, delay) {
+    const [debouncedValue, setDebouncedValue] = (0, $jPEKE$useState)(value);
+    (0, $jPEKE$useEffect)(()=>{
+        const handler = setTimeout(()=>{
+            setDebouncedValue(value);
+        }, delay);
+        return ()=>clearTimeout(handler);
+    }, [
+        value,
+        delay
+    ]);
+    return debouncedValue;
+}
+
+
+
+
+
+
+
+
+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 [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
+    ]);
+    (0, $jPEKE$useEffect)(()=>{
+        setEditedValue(value);
+    }, [
+        value
+    ]);
+    (0, $jPEKE$useEffect)(()=>{
+        if (!debouncedValue && value) onChange((0, $jPEKE$PatchEvent).from([
+            (0, $jPEKE$unset)()
+        ]));
+        else if (debouncedValue !== value) onChange((0, $jPEKE$PatchEvent).from([
+            (0, $jPEKE$set)(debouncedValue)
+        ]));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        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", {
+        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
+                }
+            })
+        })
+    });
+});
+
+
+
+const $df9eabe9bda49ea8$export$f225414958dd8925 = (0, $jPEKE$createPlugin)({
+    name: "markdown-editor",
+    schema: {
+        types: [
+            (0, $jPEKE$defineType)({
+                type: "string",
+                name: "markdown",
+                title: "Markdown",
+                components: {
+                    input: (0, $483dd42bf797352b$export$18a9461578883ec4)
+                }
+            }), 
+        ]
+    }
+});
+
+
+export {$df9eabe9bda49ea8$export$f225414958dd8925 as markdownSchema, $483dd42bf797352b$export$18a9461578883ec4 as MarkdownEditor};
+//# sourceMappingURL=index.modern.js.map

package/lib/index.modern.js.map

@@ -0,0 +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 {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 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":"../"}

package/package.json

@@ -1,12 +1,33 @@
 {
   "name": "sanity-plugin-markdown",
-  "version": "2.1.1",
+  "version": "3.0.0-v3-studio.0",
   "description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
   "scripts": {
-    "build": "sanipack build",
-    "watch": "sanipack build --watch",
-    "prepublishOnly": "sanipack build"
+    "clean": "rimraf lib",
+    "prebuild": "npm run clean && plugin-kit verify-package --silent",
+    "build": "parcel build --no-cache",
+    "watch": "parcel watch",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "eslint .",
+    "format": "prettier src -w",
+    "prepare": "husky install",
+    "compile": "tsc --noEmit",
+    "prepublishOnly": " npm run build"
   },
+  "source": "./src/index.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/index.modern.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/index.js",
+      "default": "./lib/index.modern.js"
+    }
+  },
+  "files": [
+    "src",
+    "lib"
+  ],
   "keywords": [
     "sanity",
     "sanity-plugin",
@@ -17,37 +38,42 @@
   "author": "Sanity.io <hello@sanity.io>",
   "license": "MIT",
   "dependencies": {
-    "@reach/auto-id": "^0.13.2",
+    "@reach/auto-id": "^0.17.0",
+    "@sanity/incompatible-plugin": "^0.0.1-studio-v3.3",
+    "@sanity/ui": "^0.37.9",
     "react-markdown": "^5.0.3",
     "react-mde": "^11.5.0",
     "remark-gfm": "^1.0.0"
   },
   "devDependencies": {
-    "eslint": "^7.26.0",
+    "@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",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-sanity": "5.1.0",
-    "eslint-plugin-react": "^7.23.2",
-    "prettier": "^2.3.0",
-    "sanipack": "^2.0.1"
+    "eslint-config-sanity": "^5.1.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
+    "husky": "^7.0.0",
+    "lint-staged": "^12.3.3",
+    "parcel": "^2.6.0",
+    "prettier": "^2.5.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "rimraf": "^3.0.2",
+    "sanity": "^3.0.0-dev-preview.7",
+    "styled-components": "^5.2.0",
+    "typescript": "^4.7.3"
   },
   "peerDependencies": {
-    "@sanity/base": "^2.21.5",
-    "react": "^17.0.0"
-  },
-  "prettier": {
-    "semi": false,
-    "printWidth": 100,
-    "bracketSpacing": false,
-    "singleQuote": true
-  },
-  "eslintConfig": {
-    "parser": "sanipack/babel/eslint-parser",
-    "extends": [
-      "sanity",
-      "sanity/react",
-      "prettier",
-      "prettier/react"
-    ]
+    "react": "^17.0.0 || ^18.0.0",
+    "sanity": "dev-preview",
+    "styled-components": "^5.2.0"
   },
   "repository": {
     "type": "git",
@@ -56,5 +82,9 @@
   "bugs": {
     "url": "https://github.com/sanity-io/sanity-plugin-markdown/issues"
   },
-  "homepage": "https://sanity.io"
+  "homepage": "https://sanity.io",
+  "sanityExchangeUrl": "https://www.sanity.io/plugins/sanity-plugin-markdown",
+  "engines": {
+    "node": ">=14.0.0"
+  }
 }

package/src/components/Editor.tsx

@@ -0,0 +1,164 @@
+import ReactMde from 'react-mde'
+import ReactMarkdown from 'react-markdown'
+import gfm from 'remark-gfm'
+import {useId} from '@reach/auto-id'
+
+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};
+  }
+`
+
+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 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])
+
+  useEffect(() => {
+    setEditedValue(value)
+  }, [value])
+
+  useEffect(() => {
+    if (!debouncedValue && value) {
+      onChange(PatchEvent.from([unset()]))
+    } else if (debouncedValue !== value) {
+      onChange(PatchEvent.from([set(debouncedValue)]))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedValue, onChange])
+
+  const 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 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}
+          value={editedValue}
+          onChange={setEditedValue}
+          selectedTab={selectedTab}
+          onTabChange={setSelectedTab}
+          readOnly={readOnly}
+          generateMarkdownPreview={generatePreview}
+          childProps={{
+            textArea: {
+              id: inputId,
+              onBlur,
+              onFocus,
+            },
+            writeButton: {
+              tabIndex: -1,
+            },
+          }}
+          paste={{saveImage}}
+          refs={{textarea}}
+        />
+      </MarkdownTheme>
+    </div>
+  )
+})

package/src/hooks/useDebounce.ts

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

package/src/index.ts

@@ -0,0 +1,20 @@
+import {MarkdownEditor} from './components/Editor'
+import {createPlugin, defineType} from 'sanity'
+
+export {MarkdownEditor}
+
+export const markdownSchema = createPlugin({
+  name: 'markdown-editor',
+  schema: {
+    types: [
+      defineType({
+        type: 'string',
+        name: 'markdown',
+        title: 'Markdown',
+        components: {
+          input: MarkdownEditor,
+        },
+      }),
+    ],
+  },
+})

package/.vscode/settings.json

@@ -1,22 +0,0 @@
-{
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#ab307e",
-    "activityBar.activeBorder": "#25320e",
-    "activityBar.background": "#ab307e",
-    "activityBar.foreground": "#e7e7e7",
-    "activityBar.inactiveForeground": "#e7e7e799",
-    "activityBarBadge.background": "#25320e",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "sash.hoverBorder": "#ab307e",
-    "statusBar.background": "#832561",
-    "statusBar.foreground": "#e7e7e7",
-    "statusBarItem.hoverBackground": "#ab307e",
-    "statusBarItem.remoteBackground": "#832561",
-    "statusBarItem.remoteForeground": "#e7e7e7",
-    "titleBar.activeBackground": "#832561",
-    "titleBar.activeForeground": "#e7e7e7",
-    "titleBar.inactiveBackground": "#83256199",
-    "titleBar.inactiveForeground": "#e7e7e799"
-  },
-  "peacock.color": "#832561"
-}

package/lib/components/Editor.js

@@ -1,180 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var React = _interopRequireWildcard(require("react"));
-
-var _reactMde = _interopRequireDefault(require("react-mde"));
-
-var _reactMarkdown = _interopRequireDefault(require("react-markdown"));
-
-var _remarkGfm = _interopRequireDefault(require("remark-gfm"));
-
-var _autoId = require("@reach/auto-id");
-
-var _patchEvent = _interopRequireWildcard(require("part:@sanity/form-builder/patch-event"));
-
-var _client = _interopRequireDefault(require("part:@sanity/base/client"));
-
-var _components = require("@sanity/base/components");
-
-var _useDebounce = _interopRequireDefault(require("../hooks/useDebounce"));
-
-require("react-mde/lib/styles/css/react-mde-all.css?raw");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _awaitAsyncGenerator(value) { return new _AwaitValue(value); }
-
-function _wrapAsyncGenerator(fn) { return function () { return new _AsyncGenerator(fn.apply(this, arguments)); }; }
-
-function _AsyncGenerator(gen) { var front, back; function send(key, arg) { return new Promise(function (resolve, reject) { var request = { key: key, arg: arg, resolve: resolve, reject: reject, next: null }; if (back) { back = back.next = request; } else { front = back = request; resume(key, arg); } }); } function resume(key, arg) { try { var result = gen[key](arg); var value = result.value; var wrappedAwait = value instanceof _AwaitValue; Promise.resolve(wrappedAwait ? value.wrapped : value).then(function (arg) { if (wrappedAwait) { resume(key === "return" ? "return" : "next", arg); return; } settle(result.done ? "return" : "normal", arg); }, function (err) { resume("throw", err); }); } catch (err) { settle("throw", err); } } function settle(type, value) { switch (type) { case "return": front.resolve({ value: value, done: true }); break; case "throw": front.reject(value); break; default: front.resolve({ value: value, done: false }); break; } front = front.next; if (front) { resume(front.key, front.arg); } else { back = null; } } this._invoke = send; if (typeof gen.return !== "function") { this.return = undefined; } }
-
-_AsyncGenerator.prototype[typeof Symbol === "function" && Symbol.asyncIterator || "@@asyncIterator"] = function () { return this; };
-
-_AsyncGenerator.prototype.next = function (arg) { return this._invoke("next", arg); };
-
-_AsyncGenerator.prototype.throw = function (arg) { return this._invoke("throw", arg); };
-
-_AsyncGenerator.prototype.return = function (arg) { return this._invoke("return", arg); };
-
-function _AwaitValue(value) { this.wrapped = value; }
-
-var Preview = _ref2 => {
-  var markdown = _ref2.markdown;
-  return /*#__PURE__*/React.createElement(_reactMarkdown.default, {
-    plugins: [_remarkGfm.default]
-  }, markdown);
-};
-
-var defaultToolbarCommands = [['header', 'bold', 'italic', 'strikethrough'], ['link', 'quote', 'code'], ['unordered-list', 'ordered-list', 'checked-list']];
-
-var _default = /*#__PURE__*/React.forwardRef(function MarkdownEditor(props, ref) {
-  var type = props.type,
-      _props$value = props.value,
-      value = _props$value === void 0 ? '' : _props$value,
-      markers = props.markers,
-      onBlur = props.onBlur,
-      onChange = props.onChange,
-      onFocus = props.onFocus,
-      presence = props.presence,
-      readOnly = props.readOnly;
-  var _type$options = type.options,
-      options = _type$options === void 0 ? {} : _type$options;
-
-  var _React$useState = React.useState('write'),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      selectedTab = _React$useState2[0],
-      setSelectedTab = _React$useState2[1];
-
-  var _React$useState3 = React.useState(value),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      editedValue = _React$useState4[0],
-      setEditedValue = _React$useState4[1];
-
-  var debouncedValue = (0, _useDebounce.default)(editedValue, 100);
-  var textarea = React.useRef(); // 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.
-
-  React.useEffect(() => {
-    if (textarea.current) {
-      textarea.current.style.backgroundColor = readOnly ? 'rgba(240,240,240)' : 'rgba(255,255,255)';
-    }
-  }, [textarea]);
-  React.useEffect(() => {
-    setEditedValue(value);
-  }, [value]);
-  React.useEffect(() => {
-    if (!debouncedValue && value) {
-      onChange(_patchEvent.default.from([(0, _patchEvent.unset)()]));
-    } else if (debouncedValue !== value) {
-      onChange(_patchEvent.default.from([(0, _patchEvent.set)(debouncedValue)]));
-    }
-  }, [debouncedValue]);
-
-  var saveImage = /*#__PURE__*/function () {
-    var _ref = _wrapAsyncGenerator(function* (data) {
-      var client = _client.default.withConfig({
-        apiVersion: '2021-03-25'
-      });
-
-      var success = true;
-      var result = yield _awaitAsyncGenerator(client.assets.upload('image', data).then(doc => "".concat(doc.url, "?w=450")).catch(() => {
-        success = false;
-        return "Error: Could not upload file. Only images are supported.";
-      }));
-      yield result;
-      return success;
-    });
-
-    return function saveImage(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(); // Generate a random ID to link our FormField label and input component
-
-
-  var inputId = (0, _autoId.useId)();
-  return /*#__PURE__*/React.createElement(_components.FormField, {
-    description: type.description // Creates description from schema
-    ,
-    inputId: inputId // A unique ID for this input
-    ,
-    title: type.title // Creates label from schema title
-    ,
-    __unstable_markers: markers // Handles all markers including validation
-    ,
-    __unstable_presence: presence // Handles presence avatars
-
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(_reactMde.default, {
-    toolbarCommands: options['toolbar'] || defaultToolbarCommands,
-    value: editedValue,
-    onChange: setEditedValue,
-    selectedTab: selectedTab,
-    onTabChange: setSelectedTab,
-    readOnly: readOnly,
-    generateMarkdownPreview: markdown => Promise.resolve( /*#__PURE__*/React.createElement(Preview, {
-      markdown: markdown
-    })),
-    childProps: {
-      textArea: {
-        id: inputId,
-        onBlur,
-        onFocus
-      },
-      writeButton: {
-        tabIndex: -1
-      }
-    },
-    paste: {
-      saveImage
-    },
-    refs: {
-      textarea
-    }
-  })));
-});
-
-exports.default = _default;
-//# sourceMappingURL=Editor.js.map

package/lib/components/Editor.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/components/Editor.jsx"],"names":["Preview","markdown","gfm","defaultToolbarCommands","React","forwardRef","MarkdownEditor","props","ref","type","value","markers","onBlur","onChange","onFocus","presence","readOnly","options","useState","selectedTab","setSelectedTab","editedValue","setEditedValue","debouncedValue","textarea","useRef","useEffect","current","style","backgroundColor","PatchEvent","from","saveImage","data","client","sanityClient","withConfig","apiVersion","success","result","assets","upload","then","doc","url","catch","inputId","description","title","Promise","resolve","textArea","id","writeButton","tabIndex"],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport ReactMde from 'react-mde'\nimport ReactMarkdown from 'react-markdown'\nimport gfm from 'remark-gfm'\nimport {useId} from '@reach/auto-id'\n\nimport PatchEvent, {set, unset} from 'part:@sanity/form-builder/patch-event'\nimport sanityClient from 'part:@sanity/base/client'\nimport {FormField} from '@sanity/base/components'\n\nimport useDebounce from '../hooks/useDebounce'\n\nimport 'react-mde/lib/styles/css/react-mde-all.css?raw'\n\nconst Preview = ({markdown}) => {\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\nexport default React.forwardRef(function MarkdownEditor(props, ref) {\n  const {type, value = '', markers, onBlur, onChange, onFocus, presence, readOnly} = props\n  const {options = {}} = type\n  const [selectedTab, setSelectedTab] = React.useState('write')\n  const [editedValue, setEditedValue] = React.useState(value)\n  const debouncedValue = useDebounce(editedValue, 100)\n  const textarea = React.useRef()\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  React.useEffect(() => {\n    if (textarea.current) {\n      textarea.current.style.backgroundColor = readOnly ? 'rgba(240,240,240)' : 'rgba(255,255,255)'\n    }\n  }, [textarea])\n\n  React.useEffect(() => {\n    setEditedValue(value)\n  }, [value])\n\n  React.useEffect(() => {\n    if (!debouncedValue && value) {\n      onChange(PatchEvent.from([unset()]))\n    } else if (debouncedValue !== value) {\n      onChange(PatchEvent.from([set(debouncedValue)]))\n    }\n  }, [debouncedValue])\n\n  const saveImage = async function* (data) {\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  // Generate a random ID to link our FormField label and input component\n  const inputId = useId()\n\n  return (\n    <FormField\n      description={type.description} // Creates description from schema\n      inputId={inputId} // A unique ID for this input\n      title={type.title} // Creates label from schema title\n      __unstable_markers={markers} // Handles all markers including validation\n      __unstable_presence={presence} // Handles presence avatars\n    >\n      {/*\n        Assign our forwarded ref to a wrapper element.\n\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      <div ref={ref}>\n        <ReactMde\n          toolbarCommands={options['toolbar'] || defaultToolbarCommands}\n          value={editedValue}\n          onChange={setEditedValue}\n          selectedTab={selectedTab}\n          onTabChange={setSelectedTab}\n          readOnly={readOnly}\n          generateMarkdownPreview={(markdown) => Promise.resolve(<Preview markdown={markdown} />)}\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      </div>\n    </FormField>\n  )\n})\n"],"file":"Editor.js"}

package/lib/hooks/useDebounce.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useDebounce;
-
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function useDebounce(value, delay) {
-  var _useState = (0, _react.useState)(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      debouncedValue = _useState2[0],
-      setDebouncedValue = _useState2[1];
-
-  (0, _react.useEffect)(() => {
-    var handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => clearTimeout(handler);
-  }, [value]);
-  return debouncedValue;
-}
-//# sourceMappingURL=useDebounce.js.map

package/lib/hooks/useDebounce.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/hooks/useDebounce.js"],"names":["useDebounce","value","delay","debouncedValue","setDebouncedValue","handler","setTimeout","clearTimeout"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;AACe,SAASA,WAAT,CAAqBC,KAArB,EAA4BC,KAA5B,EAAmC;AAChD,kBAA4C,qBAASD,KAAT,CAA5C;AAAA;AAAA,MAAOE,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,wBAAU,MAAM;AACd,QAAMC,OAAO,GAAGC,UAAU,CAAC,MAAM;AAC/BF,MAAAA,iBAAiB,CAACH,KAAD,CAAjB;AACD,KAFyB,EAEvBC,KAFuB,CAA1B;AAIA,WAAO,MAAMK,YAAY,CAACF,OAAD,CAAzB;AACD,GAND,EAMG,CAACJ,KAAD,CANH;AAQA,SAAOE,cAAP;AACD","sourcesContent":["import React, {useState, useEffect} from 'react'\nexport default function useDebounce(value, delay) {\n  const [debouncedValue, setDebouncedValue] = useState(value)\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => clearTimeout(handler)\n  }, [value])\n\n  return debouncedValue\n}\n"],"file":"useDebounce.js"}

package/lib/schemaType.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Editor = _interopRequireDefault(require("./components/Editor"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  type: 'string',
-  name: 'markdown',
-  inputComponent: _Editor.default
-};
-exports.default = _default;
-//# sourceMappingURL=schemaType.js.map

package/lib/schemaType.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/schemaType.js"],"names":["type","name","inputComponent","Editor"],"mappings":";;;;;;;AAAA;;;;eAEe;AACbA,EAAAA,IAAI,EAAE,QADO;AAEbC,EAAAA,IAAI,EAAE,UAFO;AAGbC,EAAAA,cAAc,EAAEC;AAHH,C","sourcesContent":["import Editor from './components/Editor'\n\nexport default {\n  type: 'string',\n  name: 'markdown',\n  inputComponent: Editor,\n}\n"],"file":"schemaType.js"}

package/sanity.json

@@ -1,12 +0,0 @@
-{
-  "paths": {
-    "source": "./src",
-    "compiled": "./lib"
-  },
-  "parts": [
-    {
-      "implements": "part:@sanity/base/schema-type",
-      "path": "schemaType"
-    }
-  ]
-}