sanity-plugin-markdown 2.1.0 → 2.1.2

package/.eslintignore

@@ -0,0 +1,6 @@
+.eslintrc.js
+commitlint.config.js
+lib
+lint-staged.config.js
+node_modules
+*.iml

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: false,
+  },
+  extends: [
+    'sanity/react', // must come before sanity/typescript
+    'plugin:prettier/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    project: './tsconfig.json',
+  },
+  plugins: ['prettier'],
+}

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ""

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package/.releaserc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@sanity/semantic-release-preset",
+  "branches": ["main", {"name": "studio-v2", "channel": "studio-v2", "range": "2.1.x"}]
+}

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+<!-- markdownlint-disable --><!-- textlint-disable -->
+
+# 📓 Changelog
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [2.1.2](https://github.com/sanity-io/sanity-plugin-markdown/compare/v2.1.1...v2.1.2) (2022-11-22)
+
+### Bug Fixes
+
+- **ci:** publish using semantic-release ([a597664](https://github.com/sanity-io/sanity-plugin-markdown/commit/a5976646d7712a59d1e68f80b798d4a9ddf80c8b))

package/LICENSE

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

package/README.md

@@ -1,10 +1,21 @@
 # sanity-plugin-markdown
+
+> This is a **Sanity Studio v2** plugin.
+> For the v3 version, please refer to the [v3-branch](https://github.com/sanity-io/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).
 
 ## Installation
 
+```sh
+yarn add sanity-plugin-markdown@studio-v2
 ```
-sanity install markdown
+
+Next, add `"markdown"` to `sanity.json` plugins array:
+```json
+"plugins": [
+  "markdown"
+]
 ```
 
 ## Usage

package/commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+}

package/lib/components/Editor.js

@@ -13,6 +13,8 @@ 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"));
@@ -71,6 +73,9 @@ var _default = /*#__PURE__*/React.forwardRef(function MarkdownEditor(props, ref)
       _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,
@@ -87,14 +92,23 @@ var _default = /*#__PURE__*/React.forwardRef(function MarkdownEditor(props, ref)
       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) {
-      props.onChange(_patchEvent.default.from([(0, _patchEvent.unset)()]));
+      onChange(_patchEvent.default.from([(0, _patchEvent.unset)()]));
     } else if (debouncedValue !== value) {
-      props.onChange(_patchEvent.default.from([(0, _patchEvent.set)(debouncedValue)]));
+      onChange(_patchEvent.default.from([(0, _patchEvent.set)(debouncedValue)]));
     }
   }, [debouncedValue]);
 
@@ -116,17 +130,23 @@ var _default = /*#__PURE__*/React.forwardRef(function MarkdownEditor(props, ref)
     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,
@@ -138,17 +158,22 @@ var _default = /*#__PURE__*/React.forwardRef(function MarkdownEditor(props, ref)
       markdown: markdown
     })),
     childProps: {
+      textArea: {
+        id: inputId,
+        onBlur,
+        onFocus
+      },
       writeButton: {
         tabIndex: -1
       }
     },
-    refs: {
-      textarea: ref
-    },
     paste: {
       saveImage
+    },
+    refs: {
+      textarea
     }
-  }));
+  })));
 });
 
 exports.default = _default;

package/lib/components/Editor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Editor.jsx"],"names":["Preview","markdown","gfm","defaultToolbarCommands","React","forwardRef","MarkdownEditor","props","ref","type","value","markers","presence","readOnly","options","useState","selectedTab","setSelectedTab","editedValue","setEditedValue","debouncedValue","useEffect","onChange","PatchEvent","from","saveImage","data","client","sanityClient","withConfig","apiVersion","success","result","assets","upload","then","doc","url","catch","description","title","Promise","resolve","writeButton","tabIndex","textarea"],"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'\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, 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\n  React.useEffect(() => {\n    setEditedValue(value)\n  }, [value])\n\n  React.useEffect(() => {\n    if (!debouncedValue && value) {\n      props.onChange(PatchEvent.from([unset()]))\n    } else if (debouncedValue !== value) {\n      props.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  return (\n    <FormField\n      description={type.description} // Creates description from schema\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      <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          writeButton: {\n            tabIndex: -1,\n          },\n        }}\n        refs={{textarea: ref}}\n        paste={{saveImage}}\n      />\n    </FormField>\n  )\n})\n"],"file":"Editor.js"}
+{"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":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AAEA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,OAAO,GAAG,SAAgB;AAAA,MAAdC,QAAc,SAAdA,QAAc;AAC9B,sBAAO,oBAAC,sBAAD;AAAe,IAAA,OAAO,EAAE,CAACC,kBAAD;AAAxB,KAAgCD,QAAhC,CAAP;AACD,CAFD;;AAIA,IAAME,sBAAsB,GAAG,CAC7B,CAAC,QAAD,EAAW,MAAX,EAAmB,QAAnB,EAA6B,eAA7B,CAD6B,EAE7B,CAAC,MAAD,EAAS,OAAT,EAAkB,MAAlB,CAF6B,EAG7B,CAAC,gBAAD,EAAmB,cAAnB,EAAmC,cAAnC,CAH6B,CAA/B;;4BAMeC,KAAK,CAACC,UAAN,CAAiB,SAASC,cAAT,CAAwBC,KAAxB,EAA+BC,GAA/B,EAAoC;AAClE,MAAOC,IAAP,GAAmFF,KAAnF,CAAOE,IAAP;AAAA,qBAAmFF,KAAnF,CAAaG,KAAb;AAAA,MAAaA,KAAb,6BAAqB,EAArB;AAAA,MAAyBC,OAAzB,GAAmFJ,KAAnF,CAAyBI,OAAzB;AAAA,MAAkCC,MAAlC,GAAmFL,KAAnF,CAAkCK,MAAlC;AAAA,MAA0CC,QAA1C,GAAmFN,KAAnF,CAA0CM,QAA1C;AAAA,MAAoDC,OAApD,GAAmFP,KAAnF,CAAoDO,OAApD;AAAA,MAA6DC,QAA7D,GAAmFR,KAAnF,CAA6DQ,QAA7D;AAAA,MAAuEC,QAAvE,GAAmFT,KAAnF,CAAuES,QAAvE;AACA,sBAAuBP,IAAvB,CAAOQ,OAAP;AAAA,MAAOA,OAAP,8BAAiB,EAAjB;;AACA,wBAAsCb,KAAK,CAACc,QAAN,CAAe,OAAf,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AACA,yBAAsChB,KAAK,CAACc,QAAN,CAAeR,KAAf,CAAtC;AAAA;AAAA,MAAOW,WAAP;AAAA,MAAoBC,cAApB;;AACA,MAAMC,cAAc,GAAG,0BAAYF,WAAZ,EAAyB,GAAzB,CAAvB;AACA,MAAMG,QAAQ,GAAGpB,KAAK,CAACqB,MAAN,EAAjB,CANkE,CAQlE;AACA;AACA;;AACArB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpB,QAAIF,QAAQ,CAACG,OAAb,EAAsB;AACpBH,MAAAA,QAAQ,CAACG,OAAT,CAAiBC,KAAjB,CAAuBC,eAAvB,GAAyCb,QAAQ,GAAG,mBAAH,GAAyB,mBAA1E;AACD;AACF,GAJD,EAIG,CAACQ,QAAD,CAJH;AAMApB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpBJ,IAAAA,cAAc,CAACZ,KAAD,CAAd;AACD,GAFD,EAEG,CAACA,KAAD,CAFH;AAIAN,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpB,QAAI,CAACH,cAAD,IAAmBb,KAAvB,EAA8B;AAC5BG,MAAAA,QAAQ,CAACiB,oBAAWC,IAAX,CAAgB,CAAC,wBAAD,CAAhB,CAAD,CAAR;AACD,KAFD,MAEO,IAAIR,cAAc,KAAKb,KAAvB,EAA8B;AACnCG,MAAAA,QAAQ,CAACiB,oBAAWC,IAAX,CAAgB,CAAC,qBAAIR,cAAJ,CAAD,CAAhB,CAAD,CAAR;AACD;AACF,GAND,EAMG,CAACA,cAAD,CANH;;AAQA,MAAMS,SAAS;AAAA,mCAAG,WAAiBC,IAAjB,EAAuB;AACvC,UAAMC,MAAM,GAAGC,gBAAaC,UAAb,CAAwB;AAACC,QAAAA,UAAU,EAAE;AAAb,OAAxB,CAAf;;AAEA,UAAIC,OAAO,GAAG,IAAd;AACA,UAAMC,MAAM,8BAASL,MAAM,CAACM,MAAP,CAClBC,MADkB,CACX,OADW,EACFR,IADE,EAElBS,IAFkB,CAEZC,GAAD,cAAYA,GAAG,CAACC,GAAhB,WAFa,EAGlBC,KAHkB,CAGZ,MAAM;AACXP,QAAAA,OAAO,GAAG,KAAV;AACA;AACD,OANkB,CAAT,CAAZ;AAQA,YAAMC,MAAN;AACA,aAAOD,OAAP;AACD,KAdc;;AAAA,oBAATN,SAAS;AAAA;AAAA;AAAA,KAAf,CA7BkE,CA6ClE;;;AACA,MAAMc,OAAO,GAAG,oBAAhB;AAEA,sBACE,oBAAC,qBAAD;AACE,IAAA,WAAW,EAAErC,IAAI,CAACsC,WADpB,CACiC;AADjC;AAEE,IAAA,OAAO,EAAED,OAFX,CAEoB;AAFpB;AAGE,IAAA,KAAK,EAAErC,IAAI,CAACuC,KAHd,CAGqB;AAHrB;AAIE,IAAA,kBAAkB,EAAErC,OAJtB,CAI+B;AAJ/B;AAKE,IAAA,mBAAmB,EAAEI,QALvB,CAKiC;;AALjC,kBAcE;AAAK,IAAA,GAAG,EAAEP;AAAV,kBACE,oBAAC,iBAAD;AACE,IAAA,eAAe,EAAES,OAAO,CAAC,SAAD,CAAP,IAAsBd,sBADzC;AAEE,IAAA,KAAK,EAAEkB,WAFT;AAGE,IAAA,QAAQ,EAAEC,cAHZ;AAIE,IAAA,WAAW,EAAEH,WAJf;AAKE,IAAA,WAAW,EAAEC,cALf;AAME,IAAA,QAAQ,EAAEJ,QANZ;AAOE,IAAA,uBAAuB,EAAGf,QAAD,IAAcgD,OAAO,CAACC,OAAR,eAAgB,oBAAC,OAAD;AAAS,MAAA,QAAQ,EAAEjD;AAAnB,MAAhB,CAPzC;AAQE,IAAA,UAAU,EAAE;AACVkD,MAAAA,QAAQ,EAAE;AACRC,QAAAA,EAAE,EAAEN,OADI;AAERlC,QAAAA,MAFQ;AAGRE,QAAAA;AAHQ,OADA;AAMVuC,MAAAA,WAAW,EAAE;AACXC,QAAAA,QAAQ,EAAE,CAAC;AADA;AANH,KARd;AAkBE,IAAA,KAAK,EAAE;AAACtB,MAAAA;AAAD,KAlBT;AAmBE,IAAA,IAAI,EAAE;AAACR,MAAAA;AAAD;AAnBR,IADF,CAdF,CADF;AAwCD,CAxFc,C","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

@@ -5,11 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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; }
+var _react = require("react");
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -34,7 +30,7 @@ function useDebounce(value, delay) {
       setDebouncedValue(value);
     }, delay);
     return () => clearTimeout(handler);
-  }, [value]);
+  }, [value, delay]);
   return debouncedValue;
 }
 //# sourceMappingURL=useDebounce.js.map

package/lib/hooks/useDebounce.js.map

@@ -1 +1 @@
-{"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"}
+{"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,EAAQC,KAAR,CANH;AAQA,SAAOC,cAAP;AACD","sourcesContent":["import {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, delay])\n\n  return debouncedValue\n}\n"],"file":"useDebounce.js"}

package/lint-staged.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  '**/*.{js,jsx}': ['eslint'],
+  '**/*.{ts,tsx}': ['eslint', () => 'tsc --noEmit'],
+}

package/package.json

@@ -1,12 +1,7 @@
 {
   "name": "sanity-plugin-markdown",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
-  "scripts": {
-    "build": "sanipack build",
-    "watch": "sanipack build --watch",
-    "prepublishOnly": "sanipack build"
-  },
   "keywords": [
     "sanity",
     "sanity-plugin",
@@ -14,29 +9,27 @@
     "markdown",
     "github flavored markdown"
   ],
-  "author": "Sanity.io <hello@sanity.io>",
-  "license": "MIT",
-  "dependencies": {
-    "react-markdown": "^5.0.3",
-    "react-mde": "^11.5.0",
-    "remark-gfm": "^1.0.0"
+  "homepage": "https://sanity.io",
+  "bugs": {
+    "url": "https://github.com/sanity-io/sanity-plugin-markdown/issues"
   },
-  "devDependencies": {
-    "eslint": "^7.26.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"
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:sanity-io/sanity-plugin-markdown.git"
   },
-  "peerDependencies": {
-    "@sanity/base": "^2.21.5",
-    "react": "^17.0.0"
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "scripts": {
+    "build": "sanipack build",
+    "lint": "eslint .",
+    "prepare": "husky install",
+    "prepublishOnly": "sanipack build",
+    "watch": "sanipack build --watch"
   },
   "prettier": {
-    "semi": false,
-    "printWidth": 100,
     "bracketSpacing": false,
+    "printWidth": 100,
+    "semi": false,
     "singleQuote": true
   },
   "eslintConfig": {
@@ -48,12 +41,29 @@
       "prettier/react"
     ]
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sanity-io/sanity-plugin-markdown.git"
+  "dependencies": {
+    "@reach/auto-id": "^0.13.2",
+    "react-markdown": "^5.0.3",
+    "react-mde": "^11.5.0",
+    "remark-gfm": "^1.0.0"
   },
-  "bugs": {
-    "url": "https://github.com/sanity-io/sanity-plugin-markdown/issues"
+  "devDependencies": {
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@sanity/semantic-release-preset": "^2.0.0",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "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": "^8.0.1",
+    "lint-staged": "^12.4.1",
+    "prettier": "^2.7.1",
+    "sanipack": "^2.0.1"
   },
-  "homepage": "https://sanity.io"
+  "peerDependencies": {
+    "@sanity/base": "^2.21.5",
+    "react": "^17.0.0"
+  }
 }

package/renovate.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "baseBranches": ["v3"],
+  "extends": [
+    "github>sanity-io/renovate-presets//ecosystem/auto",
+    "github>sanity-io/renovate-presets//ecosystem/studio-v3"
+  ]
+}