sanity-plugin-markdown 4.1.0 → 4.1.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Sanity.io
+Copyright (c) 2024 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/lib/_chunks/{plugin-ca10aa4c.js → plugin-0fd9aa65.js}

@@ -3,53 +3,14 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { useClient, PatchEvent, set, unset, defineType, definePlugin } from 'sanity';
 import { jsx } from 'react/jsx-runtime';
 import { lazy, useState, useEffect, useCallback, useMemo, Suspense } from 'react';
-import styled from 'styled-components';
 import { Box, Text } from '@sanity/ui';
-const MarkdownInputStyles = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & .CodeMirror.CodeMirror {\n    color: ", ";\n    border-color: ", ";\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ", ";\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ", ";\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .editor-toolbar > * {\n    color: ", ";\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ", ";\n  }\n\n  & .editor-preview {\n    background-color: ", ";\n\n    & h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-size: revert;\n    }\n\n    & ul,\n    li {\n      list-style: revert;\n      padding: revert;\n    }\n\n    & a {\n      text-decoration: revert;\n    }\n  }\n"])), _ref => {
+import styled, { css } from 'styled-components';
+const MarkdownInputStyles = styled(Box)(_ref => {
   let {
     theme
   } = _ref;
-  return theme.sanity.color.card.enabled.fg;
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.sanity.color.card.enabled.border;
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.sanity.color.card.enabled.fg;
-}, _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.sanity.color.card.enabled.border;
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.sanity.color.selectable.primary.hovered.bg;
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.sanity.color.card.enabled.bg;
-}, _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.sanity.color.card.enabled.fg;
-}, _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.sanity.color.card.enabled.bg;
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.sanity.color.card.enabled.bg;
+  var _a, _b, _c;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    & .CodeMirror.CodeMirror {\n      color: ", ";\n      border-color: ", ";\n      background-color: inherit;\n    }\n\n    & .cm-s-easymde .CodeMirror-cursor {\n      border-color: ", ";\n    }\n\n    & .editor-toolbar,\n    .editor-preview-side {\n      border-color: ", ";\n    }\n\n    & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n      background-color: ", ";\n    }\n\n    & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n      background-color: ", ";\n    }\n\n    & .editor-toolbar > * {\n      color: ", ";\n    }\n\n    & .editor-toolbar > .active,\n    .editor-toolbar > button:hover,\n    .editor-preview pre,\n    .cm-s-easymde .cm-comment {\n      background-color: ", ";\n    }\n\n    & .editor-preview {\n      background-color: ", ";\n\n      & h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-size: revert;\n      }\n\n      & ul,\n      li {\n        list-style: revert;\n        padding: revert;\n      }\n\n      & a {\n        text-decoration: revert;\n      }\n    }\n  "])), theme.sanity.color.card.enabled.fg, theme.sanity.color.card.enabled.border, theme.sanity.color.card.enabled.fg, theme.sanity.color.card.enabled.border, (_c = (_b = (_a = theme.sanity.color.selectable) == null ? void 0 : _a.primary) == null ? void 0 : _b.hovered) == null ? void 0 : _c.bg, theme.sanity.color.card.enabled.bg, theme.sanity.color.card.enabled.fg, theme.sanity.color.card.enabled.bg, theme.sanity.color.card.enabled.bg);
 });
 const SimpleMdeReact = lazy(() => import('react-simplemde-editor'));
 function useSimpleMdeReact() {
@@ -148,4 +109,4 @@ const markdownSchema = definePlugin(config => {
   };
 });
 export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType };
-//# sourceMappingURL=plugin-ca10aa4c.js.map
+//# sourceMappingURL=plugin-0fd9aa65.js.map

package/lib/_chunks/plugin-0fd9aa65.js.map

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

package/lib/_chunks/{plugin-b7a179e6.js → plugin-fb6e236d.js}

@@ -5,59 +5,20 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var sanity = require('sanity');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var styled = require('styled-components');
 var ui = require('@sanity/ui');
+var styled = require('styled-components');
 function _interopDefaultCompat(e) {
   return e && typeof e === 'object' && 'default' in e ? e : {
     default: e
   };
 }
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const MarkdownInputStyles = styled__default.default(ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & .CodeMirror.CodeMirror {\n    color: ", ";\n    border-color: ", ";\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ", ";\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ", ";\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ", ";\n  }\n\n  & .editor-toolbar > * {\n    color: ", ";\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ", ";\n  }\n\n  & .editor-preview {\n    background-color: ", ";\n\n    & h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-size: revert;\n    }\n\n    & ul,\n    li {\n      list-style: revert;\n      padding: revert;\n    }\n\n    & a {\n      text-decoration: revert;\n    }\n  }\n"])), _ref => {
+const MarkdownInputStyles = styled__default.default(ui.Box)(_ref => {
   let {
     theme
   } = _ref;
-  return theme.sanity.color.card.enabled.fg;
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.sanity.color.card.enabled.border;
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.sanity.color.card.enabled.fg;
-}, _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.sanity.color.card.enabled.border;
-}, _ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.sanity.color.selectable.primary.hovered.bg;
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme.sanity.color.card.enabled.bg;
-}, _ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme.sanity.color.card.enabled.fg;
-}, _ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme.sanity.color.card.enabled.bg;
-}, _ref9 => {
-  let {
-    theme
-  } = _ref9;
-  return theme.sanity.color.card.enabled.bg;
+  var _a, _b, _c;
+  return styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    & .CodeMirror.CodeMirror {\n      color: ", ";\n      border-color: ", ";\n      background-color: inherit;\n    }\n\n    & .cm-s-easymde .CodeMirror-cursor {\n      border-color: ", ";\n    }\n\n    & .editor-toolbar,\n    .editor-preview-side {\n      border-color: ", ";\n    }\n\n    & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n      background-color: ", ";\n    }\n\n    & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n      background-color: ", ";\n    }\n\n    & .editor-toolbar > * {\n      color: ", ";\n    }\n\n    & .editor-toolbar > .active,\n    .editor-toolbar > button:hover,\n    .editor-preview pre,\n    .cm-s-easymde .cm-comment {\n      background-color: ", ";\n    }\n\n    & .editor-preview {\n      background-color: ", ";\n\n      & h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-size: revert;\n      }\n\n      & ul,\n      li {\n        list-style: revert;\n        padding: revert;\n      }\n\n      & a {\n        text-decoration: revert;\n      }\n    }\n  "])), theme.sanity.color.card.enabled.fg, theme.sanity.color.card.enabled.border, theme.sanity.color.card.enabled.fg, theme.sanity.color.card.enabled.border, (_c = (_b = (_a = theme.sanity.color.selectable) == null ? void 0 : _a.primary) == null ? void 0 : _b.hovered) == null ? void 0 : _c.bg, theme.sanity.color.card.enabled.bg, theme.sanity.color.card.enabled.fg, theme.sanity.color.card.enabled.bg, theme.sanity.color.card.enabled.bg);
 });
 const SimpleMdeReact = react.lazy(() => import('react-simplemde-editor'));
 function useSimpleMdeReact() {
@@ -159,4 +120,4 @@ exports.MarkdownInput = MarkdownInput;
 exports.defaultMdeTools = defaultMdeTools;
 exports.markdownSchema = markdownSchema;
 exports.markdownSchemaType = markdownSchemaType;
-//# sourceMappingURL=plugin-b7a179e6.js.map
+//# sourceMappingURL=plugin-fb6e236d.js.map

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

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

package/lib/index.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-
+import {JSX as JSX_2} from 'react/jsx-runtime'
 import {Options} from 'easymde'
 import {Plugin as Plugin_2} from 'sanity'
 import {ReactElement} from 'react'
@@ -57,7 +56,7 @@ export declare interface MarkdownDefinition
   options?: MarkdownOptions
 }
 
-export declare function MarkdownInput(props: MarkdownInputProps): JSX.Element
+export declare function MarkdownInput(props: MarkdownInputProps): JSX_2.Element
 
 export declare interface MarkdownInputProps extends StringInputProps {
   /**

package/lib/index.esm.js

@@ -1,3 +1,3 @@
 import 'easymde/dist/easymde.min.css';
-export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from './_chunks/plugin-ca10aa4c.js';
+export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from './_chunks/plugin-0fd9aa65.js';
 //# sourceMappingURL=index.esm.js.map

package/lib/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', {
   value: true
 });
 require('easymde/dist/easymde.min.css');
-var plugin = require('./_chunks/plugin-b7a179e6.js');
+var plugin = require('./_chunks/plugin-fb6e236d.js');
 exports.MarkdownInput = plugin.MarkdownInput;
 exports.defaultMdeTools = plugin.defaultMdeTools;
 exports.markdownSchema = plugin.markdownSchema;

package/lib/indexNext.esm.js

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

package/lib/indexNext.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var plugin = require('./_chunks/plugin-b7a179e6.js');
+var plugin = require('./_chunks/plugin-fb6e236d.js');
 exports.MarkdownInput = plugin.MarkdownInput;
 exports.defaultMdeTools = plugin.defaultMdeTools;
 exports.markdownSchema = plugin.markdownSchema;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-markdown",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
   "keywords": [
     "sanity",
@@ -95,16 +95,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "rimraf": "^3.0.2",
+    "rimraf": "^5.0.0",
     "sanity": "^3.1.4",
     "styled-components": "^5.3.6",
-    "typescript": "^4.9.4"
+    "typescript": "^5.0.0"
   },
   "peerDependencies": {
     "easymde": "^2",
     "react": "^18",
     "sanity": "^3",
-    "styled-components": "^5.2"
+    "styled-components": "^5.2 || ^6"
   },
   "engines": {
     "node": ">=14"

package/src/components/MarkdownInputStyles.tsx

@@ -1,61 +1,63 @@
-import styled from 'styled-components'
-import {Box} from '@sanity/ui'
-
-export const MarkdownInputStyles = styled(Box)`
-  & .CodeMirror.CodeMirror {
-    color: ${({theme}) => theme.sanity.color.card.enabled.fg};
-    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};
-    background-color: inherit;
-  }
-
-  & .cm-s-easymde .CodeMirror-cursor {
-    border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};
-  }
-
-  & .editor-toolbar,
-  .editor-preview-side {
-    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};
-  }
-
-  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
-    background-color: ${({theme}) => theme.sanity.color.selectable.primary.hovered.bg};
-  }
-
-  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
-    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};
-  }
-
-  & .editor-toolbar > * {
-    color: ${({theme}) => theme.sanity.color.card.enabled.fg};
-  }
-
-  & .editor-toolbar > .active,
-  .editor-toolbar > button:hover,
-  .editor-preview pre,
-  .cm-s-easymde .cm-comment {
-    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};
-  }
-
-  & .editor-preview {
-    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};
-
-    & h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-size: revert;
-    }
-
-    & ul,
-    li {
-      list-style: revert;
-      padding: revert;
-    }
-
-    & a {
-      text-decoration: revert;
-    }
-  }
-`
+import {Box, type Theme} from '@sanity/ui'
+import styled, {css} from 'styled-components'
+
+export const MarkdownInputStyles = styled(Box)(({theme}: {theme: Theme}) => {
+  return css`
+    & .CodeMirror.CodeMirror {
+      color: ${theme.sanity.color.card.enabled.fg};
+      border-color: ${theme.sanity.color.card.enabled.border};
+      background-color: inherit;
+    }
+
+    & .cm-s-easymde .CodeMirror-cursor {
+      border-color: ${theme.sanity.color.card.enabled.fg};
+    }
+
+    & .editor-toolbar,
+    .editor-preview-side {
+      border-color: ${theme.sanity.color.card.enabled.border};
+    }
+
+    & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
+      background-color: ${theme.sanity.color.selectable?.primary?.hovered?.bg};
+    }
+
+    & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
+      background-color: ${theme.sanity.color.card.enabled.bg};
+    }
+
+    & .editor-toolbar > * {
+      color: ${theme.sanity.color.card.enabled.fg};
+    }
+
+    & .editor-toolbar > .active,
+    .editor-toolbar > button:hover,
+    .editor-preview pre,
+    .cm-s-easymde .cm-comment {
+      background-color: ${theme.sanity.color.card.enabled.bg};
+    }
+
+    & .editor-preview {
+      background-color: ${theme.sanity.color.card.enabled.bg};
+
+      & h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        font-size: revert;
+      }
+
+      & ul,
+      li {
+        list-style: revert;
+        padding: revert;
+      }
+
+      & a {
+        text-decoration: revert;
+      }
+    }
+  `
+})

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

@@ -1 +0,0 @@
-{"version":3,"file":"plugin-b7a179e6.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/useSimpleMdeReact.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport {Box} from '@sanity/ui'\n\nexport const MarkdownInputStyles = styled(Box)`\n  & .CodeMirror.CodeMirror {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n    background-color: inherit;\n  }\n\n  & .cm-s-easymde .CodeMirror-cursor {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar,\n  .editor-preview-side {\n    border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n  }\n\n  & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.selectable.primary.hovered.bg};\n  }\n\n  & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-toolbar > * {\n    color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n  }\n\n  & .editor-toolbar > .active,\n  .editor-toolbar > button:hover,\n  .editor-preview pre,\n  .cm-s-easymde .cm-comment {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n  }\n\n  & .editor-preview {\n    background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n    & h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-size: revert;\n    }\n\n    & ul,\n    li {\n      list-style: revert;\n      padding: revert;\n    }\n\n    & a {\n      text-decoration: revert;\n    }\n  }\n`\n","import {lazy, useEffect, useState} from 'react'\n\nexport const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport function useSimpleMdeReact() {\n  const [mounted, setMounted] = useState(false)\n  useEffect(() => {\n    requestAnimationFrame(() => setMounted(true))\n  }, [])\n\n  return mounted ? SimpleMdeReact : null\n}\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport React, {Suspense, useCallback, useMemo} from 'react'\n// dont import non-types here, it will break SSR on next\nimport type {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\nimport {useSimpleMdeReact} from './useSimpleMdeReact'\nimport {Box, Text} from '@sanity/ui'\n\nexport interface MarkdownInputProps extends StringInputProps {\n  /**\n   * These are passed along directly to\n   *\n   * Note: MarkdownInput sets certain reactMdeProps.options by default.\n   * These will be merged with any custom options.\n   * */\n  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>\n}\n\nexport const defaultMdeTools: EasyMdeOptions['toolbar'] = [\n  'heading',\n  'bold',\n  'italic',\n  '|',\n  'quote',\n  'unordered-list',\n  'ordered-list',\n  '|',\n  'link',\n  'image',\n  'code',\n  '|',\n  'preview',\n  'side-by-side',\n]\n\nexport function MarkdownInput(props: MarkdownInputProps) {\n  const {\n    value = '',\n    onChange,\n    elementProps: {onBlur, onFocus, ref},\n    reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n    schemaType,\n  } = props\n  const client = useClient({apiVersion: '2022-01-01'})\n  const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n\n  const imageUpload = useCallback(\n    (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {\n      client.assets\n        .upload('image', file)\n        .then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`))\n        .catch((e) => {\n          console.error(e)\n          onError(e.message)\n        })\n    },\n    [client, imageUrl]\n  )\n\n  const mdeOptions: EasyMdeOptions = useMemo(() => {\n    return {\n      autofocus: false,\n      spellChecker: false,\n      sideBySideFullscreen: false,\n      uploadImage: true,\n      imageUploadFunction: imageUpload,\n      toolbar: defaultMdeTools,\n      status: false,\n      ...mdeCustomOptions,\n    }\n  }, [imageUpload, mdeCustomOptions])\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      onChange(PatchEvent.from(newValue ? set(newValue) : unset()))\n    },\n    [onChange]\n  )\n\n  const SimpleMdeReact = useSimpleMdeReact()\n\n  return (\n    <MarkdownInputStyles>\n      {SimpleMdeReact && (\n        <Suspense\n          fallback={\n            <Box padding={3}>\n              <Text>Loading editor...</Text>\n            </Box>\n          }\n        >\n          <SimpleMdeReact\n            {...reactMdeProps}\n            ref={ref}\n            value={value}\n            onChange={handleChange}\n            onBlur={onBlur}\n            onFocus={onFocus}\n            options={mdeOptions}\n            spellCheck={false}\n          />\n        </Suspense>\n      )}\n    </MarkdownInputStyles>\n  )\n}\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n  /**\n   * Used to create image url for any uploaded image.\n   * The function will be invoked whenever an image is pasted or dragged into the\n   * markdown editor, after upload completes.\n   *\n   * The default implementation uses\n   * ```js\n   * imageAsset => `${imageAsset.url}?w=450`\n   * ```\n   * ## Example\n   * ```js\n   * {\n   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n   * }\n   * ```\n   * @param imageAsset\n   */\n  imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof markdownTypeName\n  options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n  // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    markdown: MarkdownDefinition\n  }\n}\n\nexport const markdownSchemaType = defineType({\n  type: 'string',\n  name: markdownTypeName,\n  title: 'Markdown',\n  components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n  /**\n   * When provided, will replace the default input component.\n   *\n   * Use this to customize MarkdownInput by wrapping it in a custom component,\n   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   * via the `reactMdeProps` prop.\n   *\n   * ### Example\n   *\n   * ```tsx\n   * // CustomMarkdownInput.tsx\n   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n   *\n   * export function CustomMarkdownInput(props) {\n   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n   *     useMemo(() => {\n   *       return {\n   *         options: {\n   *           toolbar: ['bold', 'italic'],\n   *           // more options available, see:\n   *           // https://github.com/Ionaru/easy-markdown-editor#options-list\n   *         },\n   *         // more props available, see:\n   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n   *       }\n   *     }, [])\n   *\n   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n   * }\n   *\n   * // studio.config.ts\n   * markdownSchema({input: CustomMarkdownInput})\n   * ```\n   */\n  input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n  return {\n    name: 'markdown-editor',\n    schema: {\n      types: [\n        config && config.input\n          ? {...markdownSchemaType, components: {input: config.input}}\n          : markdownSchemaType,\n      ],\n    },\n  }\n})\n"],"names":["MarkdownInputStyles","styled","Box","_templateObject","_taggedTemplateLiteral","_ref","theme","sanity","color","card","enabled","fg","_ref2","border","_ref3","_ref4","_ref5","selectable","primary","hovered","bg","_ref6","_ref7","_ref8","_ref9","SimpleMdeReact","lazy","useSimpleMdeReact","mounted","setMounted","useState","useEffect","requestAnimationFrame","defaultMdeTools","MarkdownInput","props","_a","value","onChange","elementProps","onBlur","onFocus","ref","reactMdeProps","options","mdeCustomOptions","schemaType","client","useClient","apiVersion","imageUrl","imageUpload","useCallback","file","onSuccess","onError","assets","upload","then","doc","concat","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","Suspense","fallback","padding","Text","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":";;;;;;;;;;;;;;;AAGa,MAAAA,mBAAA,GAAsBC,eAAAA,CAAAA,QAAOC,EAAAA,CAAAA,GAAG,CAAA,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,m+BAEhCC,IAAA;EAAA,IAAC;IAACC;EAAK,CAAA,GAAAD,IAAA;EAAA,OAAMC,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAC,EAAA;AAAA,GACtCC,KAAA;EAAA,IAAC;IAACN;EAAK,CAAA,GAAAM,KAAA;EAAA,OAAMN,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAG,MAAA;AAAA,GAK7CC,KAAA;EAAA,IAAC;IAACR;EAAK,CAAA,GAAAQ,KAAA;EAAA,OAAMR,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAC,EAAA;AAAA,GAK7CI,KAAA;EAAA,IAAC;IAACT;EAAK,CAAA,GAAAS,KAAA;EAAA,OAAMT,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAG,MAAA;AAAA,GAIzCG,KAAA;EAAA,IAAC;IAACV;EAAK,CAAA,GAAAU,KAAA;EAAA,OAAMV,MAAMC,MAAO,CAAAC,KAAA,CAAMS,UAAW,CAAAC,OAAA,CAAQC,OAAQ,CAAAC,EAAA;AAAA,GAI3DC,KAAA;EAAA,IAAC;IAACf;EAAK,CAAA,GAAAe,KAAA;EAAA,OAAMf,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAU,EAAA;AAAA,GAIxDE,KAAA;EAAA,IAAC;IAAChB;EAAK,CAAA,GAAAgB,KAAA;EAAA,OAAMhB,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAC,EAAA;AAAA,GAOlCY,KAAA;EAAA,IAAC;IAACjB;EAAK,CAAA,GAAAiB,KAAA;EAAA,OAAMjB,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAU,EAAA;AAAA,GAI7CI,KAAA;EAAA,IAAC;IAAClB;EAAK,CAAA,GAAAkB,KAAA;EAAA,OAAMlB,MAAMC,MAAO,CAAAC,KAAA,CAAMC,KAAKC,OAAQ,CAAAU,EAAA;AAAA,EAAA;ACrC9D,MAAMK,cAAiB,GAAAC,KAAA,CAAAA,IAAA,CAAK,MAAM,MAAO,CAAA,wBAAyB,CAAA,CAAA;AAElE,SAASC,iBAAoBA,CAAA,EAAA;EAClC,MAAM,CAACC,OAAA,EAASC,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;EAC5CC,KAAAA,CAAAA,SAAA,CAAU,MAAM;IACQC,qBAAA,CAAA,MAAMH,UAAW,CAAA,IAAI,CAAC,CAAA;EAC9C,CAAA,EAAG,EAAE,CAAA;EAEL,OAAOD,UAAUH,cAAiB,GAAA,IAAA;AACpC;ACSO,MAAMQ,eAA6C,GAAA,CACxD,SAAA,EACA,MAAA,EACA,QAAA,EACA,GAAA,EACA,OAAA,EACA,gBAAA,EACA,cAAA,EACA,GAAA,EACA,MAAA,EACA,OAAA,EACA,MAAA,EACA,GAAA,EACA,SAAA,EACA,cAAA,CACF;AAEO,SAASC,cAAcC,KAA2B,EAAA;EArCzD,IAAAC,EAAA;EAsCQ,MAAA;IACJC,KAAQ,GAAA,EAAA;IACRC,QAAA;IACAC,YAAc,EAAA;MAACC,MAAQ;MAAAC,OAAA;MAASC;IAAG,CAAA;IACnCC,eAAe;MAACC,OAAA,EAASC,gBAAqB;MAAA,GAAAF;QAAiB,CAAC,CAAA;IAChEG;EACE,CAAA,GAAAX,KAAA;EACJ,MAAMY,MAAS,GAAAC,MAAA,CAAAA,SAAA,CAAU;IAACC,UAAA,EAAY;EAAa,CAAA,CAAA;EACnD,MAAM;IAACC;EAAQ,CAAA,GAAA,CAAKd,EAAW,GAAAU,UAAA,CAAAF,OAAA,KAAX,YAAsD,EAAC;EAE3E,MAAMO,WAAc,GAAAC,KAAA,CAAAA,WAAA,CAClB,CAACC,IAAY,EAAAC,SAAA,EAAkCC,OAAqC,KAAA;IAC3ER,MAAA,CAAAS,MAAA,CACJC,OAAO,OAAS,EAAAJ,IAAI,EACpBK,IAAK,CAACC,OAAQL,SAAU,CAAAJ,QAAA,GAAWA,SAASS,GAAG,CAAA,MAAAC,MAAA,CAAOD,GAAI,CAAAE,GAAA,WAAW,CAAC,CACtE,CAAAC,KAAA,CAAOC,CAAM,IAAA;MACZC,OAAA,CAAQC,MAAMF,CAAC,CAAA;MACfR,OAAA,CAAQQ,EAAEG,OAAO,CAAA;IAAA,CAClB,CAAA;EACL,CAAA,EACA,CAACnB,QAAQG,QAAQ,CAAA,CACnB;EAEM,MAAAiB,UAAA,GAA6BC,KAAAA,CAAAA,QAAQ,MAAM;IACxC,OAAA;MACLC,SAAW,EAAA,KAAA;MACXC,YAAc,EAAA,KAAA;MACdC,oBAAsB,EAAA,KAAA;MACtBC,WAAa,EAAA,IAAA;MACbC,mBAAqB,EAAAtB,WAAA;MACrBuB,OAAS,EAAAzC,eAAA;MACT0C,MAAQ,EAAA,KAAA;MACR,GAAG9B;IAAA,CACL;EAAA,CACC,EAAA,CAACM,WAAa,EAAAN,gBAAgB,CAAC,CAAA;EAElC,MAAM+B,YAAe,GAAAxB,KAAA,CAAAA,WAAA,CAClByB,QAAqB,IAAA;IACXvC,QAAA,CAAAwC,MAAAA,CAAAA,UAAA,CAAWC,KAAKF,QAAW,GAAAG,MAAA,CAAAA,GAAA,CAAIH,QAAQ,CAAI,GAAAI,YAAA,EAAO,CAAC,CAAA;EAC9D,CAAA,EACA,CAAC3C,QAAQ,CAAA,CACX;EAEA,MAAMb,iBAAiBE,iBAAkB,EAAA;EAEzC,OACGuD,eAAAA,UAAAA,CAAAA,GAAA,CAAAlF,mBAAA,EAAA;IACEmF,2CACED,UAAA,CAAAA,GAAA,CAAAE,cAAA,EAAA;MACCC,yBACGH,UAAA,CAAAA,GAAA,CAAAhF,MAAA,EAAA;QAAIoF,OAAS,EAAA,CAAA;QACZH,QAAC,EAAA,eAAAD,UAAA,CAAAA,GAAA,CAAAK,OAAA,EAAA;UAAKJ,QAAA,EAAA;QAAA,CAAiB;MAAA,CACzB,CAAA;MAGFA,QAAC,EAAA,eAAAD,UAAA,CAAAA,GAAA,CAAAzD,cAAA,EAAA;QACE,GAAGkB,aAAA;QACJD,GAAA;QACAL,KAAA;QACAC,QAAU,EAAAsC,YAAA;QACVpC,MAAA;QACAC,OAAA;QACAG,OAAS,EAAAuB,UAAA;QACTqB,UAAY,EAAA;MAAA,CACd;IAAA,CACF;EAAA,CAEJ,CAAA;AAEJ;ACvGO,MAAMC,gBAAmB,GAAA,UAAA;AAsCzB,MAAMC,qBAAqBC,MAAAA,CAAAA,UAAW,CAAA;EAC3CC,IAAM,EAAA,QAAA;EACNC,IAAM,EAAAJ,gBAAA;EACNK,KAAO,EAAA,UAAA;EACPC,UAAA,EAAY;IAACC,KAAA,EAAO9D;EAAa;AACnC,CAAC,CAAA;ACLY,MAAA+D,cAAA,GAAiBC,MAAAA,CAAAA,YAAa,CAACC,MAAkC,IAAA;EACrE,OAAA;IACLN,IAAM,EAAA,iBAAA;IACNO,MAAQ,EAAA;MACNC,KAAO,EAAA,CACLF,MAAU,IAAAA,MAAA,CAAOH,KACb,GAAA;QAAC,GAAGN,kBAAA;QAAoBK,UAAY,EAAA;UAACC,KAAO,EAAAG,MAAA,CAAOH;QAAK;MACxD,CAAA,GAAAN,kBAAA;IAER;EAAA,CACF;AACF,CAAC,CAAA;;;;"}

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

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