sanity-plugin-markdown 6.0.0 → 7.0.0

package/lib/indexNext.d.mts

@@ -1,107 +0,0 @@
-import {JSX as JSX_2} from 'react'
-import {Options} from 'easymde'
-import {Plugin as Plugin_2} from 'sanity'
-import {ReactElement} from 'react'
-import {SanityImageAssetDocument} from '@sanity/client'
-import type {SimpleMDEReactProps} from 'react-simplemde-editor'
-import {StringDefinition} from 'sanity'
-import {StringInputProps} from 'sanity'
-
-export declare const defaultMdeTools: Options['toolbar']
-
-export declare interface MarkdownConfig {
-  /**
-   * When provided, will replace the default input component.
-   *
-   * Use this to customize MarkdownInput by wrapping it in a custom component,
-   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
-   * via the `reactMdeProps` prop.
-   *
-   * ### Example
-   *
-   * ```tsx
-   * // CustomMarkdownInput.tsx
-   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
-   *
-   * export function CustomMarkdownInput(props) {
-   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
-   *     useMemo(() => {
-   *       return {
-   *         options: {
-   *           toolbar: ['bold', 'italic'],
-   *           // more options available, see:
-   *           // https://github.com/Ionaru/easy-markdown-editor#options-list
-   *         },
-   *         // more props available, see:
-   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
-   *       }
-   *     }, [])
-   *
-   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
-   * }
-   *
-   * // studio.config.ts
-   * markdownSchema({input: CustomMarkdownInput})
-   * ```
-   */
-  input?: (props: StringInputProps) => ReactElement
-}
-
-/**
- * @public
- */
-export declare interface MarkdownDefinition
-  extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
-  type: typeof markdownTypeName
-  options?: MarkdownOptions
-}
-
-export declare function MarkdownInput(props: MarkdownInputProps): JSX_2.Element
-
-export declare interface MarkdownInputProps extends StringInputProps {
-  /**
-   * These are passed along directly to
-   *
-   * Note: MarkdownInput sets certain reactMdeProps.options by default.
-   * These will be merged with any custom options.
-   */
-  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
-}
-
-declare interface MarkdownOptions {
-  /**
-   * Used to create image url for any uploaded image.
-   * The function will be invoked whenever an image is pasted or dragged into the
-   * markdown editor, after upload completes.
-   *
-   * The default implementation uses
-   * ```js
-   * imageAsset => `${imageAsset.url}?w=450`
-   * ```
-   * ## Example
-   * ```js
-   * {
-   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
-   * }
-   * ```
-   * @param imageAsset
-   */
-  imageUrl?: (imageAsset: SanityImageAssetDocument) => string
-}
-
-export declare const markdownSchema: Plugin_2<void | MarkdownConfig>
-
-export declare const markdownSchemaType: {
-  type: 'string'
-  name: 'markdown'
-} & Omit<StringDefinition, 'preview'>
-
-declare const markdownTypeName: 'markdown'
-
-export {}
-
-declare module '@sanity/types' {
-  interface IntrinsicDefinitions {
-    markdown: MarkdownDefinition
-  }
-}

package/lib/indexNext.d.ts

@@ -1,107 +0,0 @@
-import {JSX as JSX_2} from 'react'
-import {Options} from 'easymde'
-import {Plugin as Plugin_2} from 'sanity'
-import {ReactElement} from 'react'
-import {SanityImageAssetDocument} from '@sanity/client'
-import type {SimpleMDEReactProps} from 'react-simplemde-editor'
-import {StringDefinition} from 'sanity'
-import {StringInputProps} from 'sanity'
-
-export declare const defaultMdeTools: Options['toolbar']
-
-export declare interface MarkdownConfig {
-  /**
-   * When provided, will replace the default input component.
-   *
-   * Use this to customize MarkdownInput by wrapping it in a custom component,
-   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
-   * via the `reactMdeProps` prop.
-   *
-   * ### Example
-   *
-   * ```tsx
-   * // CustomMarkdownInput.tsx
-   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
-   *
-   * export function CustomMarkdownInput(props) {
-   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
-   *     useMemo(() => {
-   *       return {
-   *         options: {
-   *           toolbar: ['bold', 'italic'],
-   *           // more options available, see:
-   *           // https://github.com/Ionaru/easy-markdown-editor#options-list
-   *         },
-   *         // more props available, see:
-   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
-   *       }
-   *     }, [])
-   *
-   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
-   * }
-   *
-   * // studio.config.ts
-   * markdownSchema({input: CustomMarkdownInput})
-   * ```
-   */
-  input?: (props: StringInputProps) => ReactElement
-}
-
-/**
- * @public
- */
-export declare interface MarkdownDefinition
-  extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
-  type: typeof markdownTypeName
-  options?: MarkdownOptions
-}
-
-export declare function MarkdownInput(props: MarkdownInputProps): JSX_2.Element
-
-export declare interface MarkdownInputProps extends StringInputProps {
-  /**
-   * These are passed along directly to
-   *
-   * Note: MarkdownInput sets certain reactMdeProps.options by default.
-   * These will be merged with any custom options.
-   */
-  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
-}
-
-declare interface MarkdownOptions {
-  /**
-   * Used to create image url for any uploaded image.
-   * The function will be invoked whenever an image is pasted or dragged into the
-   * markdown editor, after upload completes.
-   *
-   * The default implementation uses
-   * ```js
-   * imageAsset => `${imageAsset.url}?w=450`
-   * ```
-   * ## Example
-   * ```js
-   * {
-   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
-   * }
-   * ```
-   * @param imageAsset
-   */
-  imageUrl?: (imageAsset: SanityImageAssetDocument) => string
-}
-
-export declare const markdownSchema: Plugin_2<void | MarkdownConfig>
-
-export declare const markdownSchemaType: {
-  type: 'string'
-  name: 'markdown'
-} & Omit<StringDefinition, 'preview'>
-
-declare const markdownTypeName: 'markdown'
-
-export {}
-
-declare module '@sanity/types' {
-  interface IntrinsicDefinitions {
-    markdown: MarkdownDefinition
-  }
-}

package/lib/indexNext.esm.js

@@ -1,8 +0,0 @@
-import { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from "./_legacy/plugin.esm.js";
-export {
-  MarkdownInput,
-  defaultMdeTools,
-  markdownSchema,
-  markdownSchemaType
-};
-//# sourceMappingURL=indexNext.esm.js.map

package/lib/indexNext.esm.js.map

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

package/lib/indexNext.js

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

package/lib/indexNext.js.map

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

package/lib/indexNext.mjs

@@ -1,8 +0,0 @@
-import { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from "./_chunks-es/plugin.mjs";
-export {
-  MarkdownInput,
-  defaultMdeTools,
-  markdownSchema,
-  markdownSchemaType
-};
-//# sourceMappingURL=indexNext.mjs.map

package/lib/indexNext.mjs.map

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

package/sanity.json

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/src/commonExports.ts

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

package/src/components/MarkdownInput.tsx

@@ -1,142 +0,0 @@
-import {type Options as EasyMdeOptions} from 'easymde'
-import {
-  lazy,
-  Suspense,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-// dont import non-types here, it will break SSR on next
-import type {SimpleMDEReactProps} from 'react-simplemde-editor'
-import {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'
-import {MarkdownOptions} from '../schema'
-import {MarkdownInputStyles} from './MarkdownInputStyles'
-import {Box, Text} from '@sanity/ui'
-
-const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))
-
-export interface MarkdownInputProps extends StringInputProps {
-  /**
-   * These are passed along directly to
-   *
-   * Note: MarkdownInput sets certain reactMdeProps.options by default.
-   * These will be merged with any custom options.
-   */
-  reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
-}
-
-export const defaultMdeTools: EasyMdeOptions['toolbar'] = [
-  'heading',
-  'bold',
-  'italic',
-  '|',
-  'quote',
-  'unordered-list',
-  'ordered-list',
-  '|',
-  'link',
-  'image',
-  'code',
-  '|',
-  'preview',
-  'side-by-side',
-]
-
-export function MarkdownInput(props: MarkdownInputProps) {
-  const {
-    value = '',
-    onChange,
-    elementProps: {onBlur, onFocus, ref: elementRef},
-    reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},
-    schemaType,
-    focused,
-  } = props
-  const client = useClient({apiVersion: '2022-01-01'})
-  const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}
-  const [shouldAutoFocus, setShouldAutoFocus] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  // Forward ref to parent form state
-  useImperativeHandle(elementRef, () => ref.current)
-
-  const imageUpload = useCallback(
-    (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {
-      client.assets
-        .upload('image', file)
-        .then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`))
-        .catch((e) => {
-          console.error(e)
-          onError(e.message)
-        })
-    },
-    [client, imageUrl],
-  )
-
-  const mdeOptions: EasyMdeOptions = useMemo(() => {
-    return {
-      spellChecker: false,
-      sideBySideFullscreen: false,
-      uploadImage: true,
-      imageUploadFunction: imageUpload,
-      toolbar: defaultMdeTools,
-      status: false,
-      ...mdeCustomOptions,
-      autofocus: shouldAutoFocus,
-    }
-  }, [imageUpload, mdeCustomOptions, shouldAutoFocus])
-
-  // eslint-disable-next-line consistent-return
-  useEffect(() => {
-    const node = ref.current
-    if (!node) return undefined
-
-    if (focused && !shouldAutoFocus) {
-      // Do not set autofocus if the field already has focus
-      const raf = requestAnimationFrame(() =>
-        setShouldAutoFocus(!node.contains(document.activeElement)),
-      )
-      return () => cancelAnimationFrame(raf)
-    }
-
-    if (!focused && shouldAutoFocus) {
-      // If `focused` is false, and the current active focus is no longer within the editor, reset autofocus state
-      const raf = requestAnimationFrame(() =>
-        setShouldAutoFocus(node.contains(document.activeElement)),
-      )
-      return () => cancelAnimationFrame(raf)
-    }
-  }, [focused, shouldAutoFocus])
-
-  const handleChange = useCallback(
-    (newValue: string) => {
-      onChange(PatchEvent.from(newValue ? set(newValue) : unset()))
-    },
-    [onChange],
-  )
-
-  return (
-    <MarkdownInputStyles>
-      <Suspense fallback={fallback}>
-        <SimpleMdeReact
-          {...reactMdeProps}
-          ref={ref}
-          value={value}
-          onChange={handleChange}
-          onBlur={onBlur}
-          onFocus={onFocus}
-          options={mdeOptions}
-          spellCheck={false}
-        />
-      </Suspense>
-    </MarkdownInputStyles>
-  )
-}
-
-const fallback = (
-  <Box padding={3}>
-    <Text>Loading editor...</Text>
-  </Box>
-)

package/src/components/MarkdownInputStyles.tsx

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

package/src/components/sanity-ui.d.ts

@@ -1,6 +0,0 @@
-import {type Theme} from '@sanity/ui/theme'
-
-declare module 'styled-components' {
-  // eslint-disable-next-line no-unused-vars
-  interface DefaultTheme extends Theme {}
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-import 'easymde/dist/easymde.min.css'
-
-export * from './commonExports'

package/src/indexNext.ts

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

package/src/plugin.tsx

@@ -1,54 +0,0 @@
-import {definePlugin, StringInputProps} from 'sanity'
-import {markdownSchemaType} from './schema'
-import {ReactElement} from 'react'
-
-export interface MarkdownConfig {
-  /**
-   * When provided, will replace the default input component.
-   *
-   * Use this to customize MarkdownInput by wrapping it in a custom component,
-   * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
-   * via the `reactMdeProps` prop.
-   *
-   * ### Example
-   *
-   * ```tsx
-   * // CustomMarkdownInput.tsx
-   * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
-   *
-   * export function CustomMarkdownInput(props) {
-   *   const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
-   *     useMemo(() => {
-   *       return {
-   *         options: {
-   *           toolbar: ['bold', 'italic'],
-   *           // more options available, see:
-   *           // https://github.com/Ionaru/easy-markdown-editor#options-list
-   *         },
-   *         // more props available, see:
-   *         // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
-   *       }
-   *     }, [])
-   *
-   *   return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
-   * }
-   *
-   * // studio.config.ts
-   * markdownSchema({input: CustomMarkdownInput})
-   * ```
-   */
-  input?: (props: StringInputProps) => ReactElement
-}
-
-export const markdownSchema = definePlugin((config: MarkdownConfig | void) => {
-  return {
-    name: 'markdown-editor',
-    schema: {
-      types: [
-        config && config.input
-          ? {...markdownSchemaType, components: {input: config.input}}
-          : markdownSchemaType,
-      ],
-    },
-  }
-})

package/src/schema.ts

@@ -1,48 +0,0 @@
-import {defineType, StringDefinition} from 'sanity'
-import {MarkdownInput} from './components/MarkdownInput'
-import {SanityImageAssetDocument} from '@sanity/client'
-
-export const markdownTypeName = 'markdown' as const
-
-export interface MarkdownOptions {
-  /**
-   * Used to create image url for any uploaded image.
-   * The function will be invoked whenever an image is pasted or dragged into the
-   * markdown editor, after upload completes.
-   *
-   * The default implementation uses
-   * ```js
-   * imageAsset => `${imageAsset.url}?w=450`
-   * ```
-   * ## Example
-   * ```js
-   * {
-   *   imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
-   * }
-   * ```
-   * @param imageAsset
-   */
-  imageUrl?: (imageAsset: SanityImageAssetDocument) => string
-}
-
-/**
- * @public
- */
-export interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
-  type: typeof markdownTypeName
-  options?: MarkdownOptions
-}
-
-declare module '@sanity/types' {
-  // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember
-  export interface IntrinsicDefinitions {
-    markdown: MarkdownDefinition
-  }
-}
-
-export const markdownSchemaType = defineType({
-  type: 'string',
-  name: markdownTypeName,
-  title: 'Markdown',
-  components: {input: MarkdownInput},
-})

package/v2-incompatible.js

@@ -1,11 +0,0 @@
-const {showIncompatiblePluginDialog} = require('@sanity/incompatible-plugin')
-const {name, version, sanityExchangeUrl} = require('./package.json')
-
-export default showIncompatiblePluginDialog({
-  name: name,
-  versions: {
-    v3: version,
-    v2: '^0.2.1',
-  },
-  sanityExchangeUrl,
-})