sanity-plugin-markdown 4.1.2 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +56 -55
- package/lib/_chunks-cjs/plugin.js +160 -0
- package/lib/_chunks-cjs/plugin.js.map +1 -0
- package/lib/_chunks-es/plugin.mjs +146 -0
- package/lib/_chunks-es/plugin.mjs.map +1 -0
- package/lib/_legacy/plugin.esm.js +146 -0
- package/lib/_legacy/plugin.esm.js.map +1 -0
- package/lib/index.d.mts +107 -0
- package/lib/index.d.ts +2 -2
- package/lib/index.esm.js +8 -2
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +4 -7
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +9 -0
- package/lib/index.mjs.map +1 -0
- package/lib/indexNext.d.mts +107 -0
- package/lib/indexNext.d.ts +107 -0
- package/lib/indexNext.esm.js +7 -1
- package/lib/indexNext.esm.js.map +1 -1
- package/lib/indexNext.js +3 -6
- package/lib/indexNext.js.map +1 -1
- package/lib/indexNext.mjs +8 -0
- package/lib/indexNext.mjs.map +1 -0
- package/package.json +32 -36
- package/src/components/MarkdownInput.tsx +36 -26
- package/src/components/MarkdownInputStyles.tsx +61 -63
- package/lib/_chunks/plugin-0fd9aa65.js +0 -112
- package/lib/_chunks/plugin-0fd9aa65.js.map +0 -1
- package/lib/_chunks/plugin-fb6e236d.js +0 -123
- package/lib/_chunks/plugin-fb6e236d.js.map +0 -1
- package/src/components/useSimpleMdeReact.tsx +0 -12
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { useClient, PatchEvent, set, unset, defineType, definePlugin } from "sanity";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { lazy, useCallback, useMemo, useSyncExternalStore, Suspense } from "react";
|
|
4
|
+
import { Box, Text } from "@sanity/ui";
|
|
5
|
+
import { styled } from "styled-components";
|
|
6
|
+
const MarkdownInputStyles = styled(Box)`
|
|
7
|
+
& .CodeMirror.CodeMirror {
|
|
8
|
+
color: ${({ theme }) => theme.sanity.color.card.enabled.fg};
|
|
9
|
+
border-color: ${({ theme }) => theme.sanity.color.card.enabled.border};
|
|
10
|
+
background-color: inherit;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
& .cm-s-easymde .CodeMirror-cursor {
|
|
14
|
+
border-color: ${({ theme }) => theme.sanity.color.card.enabled.fg};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
& .editor-toolbar,
|
|
18
|
+
.editor-preview-side {
|
|
19
|
+
border-color: ${({ theme }) => theme.sanity.color.card.enabled.border};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
& .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
|
|
23
|
+
background-color: ${({ theme }) => theme.sanity.color.selectable?.primary?.hovered?.bg};
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
& .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {
|
|
27
|
+
background-color: ${({ theme }) => theme.sanity.color.card.enabled.bg};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
& .editor-toolbar > * {
|
|
31
|
+
color: ${({ theme }) => theme.sanity.color.card.enabled.fg};
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
& .editor-toolbar > .active,
|
|
35
|
+
.editor-toolbar > button:hover,
|
|
36
|
+
.editor-preview pre,
|
|
37
|
+
.cm-s-easymde .cm-comment {
|
|
38
|
+
background-color: ${({ theme }) => theme.sanity.color.card.enabled.bg};
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
& .editor-preview {
|
|
42
|
+
background-color: ${({ theme }) => theme.sanity.color.card.enabled.bg};
|
|
43
|
+
|
|
44
|
+
& h1,
|
|
45
|
+
h2,
|
|
46
|
+
h3,
|
|
47
|
+
h4,
|
|
48
|
+
h5,
|
|
49
|
+
h6 {
|
|
50
|
+
font-size: revert;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
& ul,
|
|
54
|
+
li {
|
|
55
|
+
list-style: revert;
|
|
56
|
+
padding: revert;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
& a {
|
|
60
|
+
text-decoration: revert;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
`, SimpleMdeReact = lazy(() => import("react-simplemde-editor")), defaultMdeTools = [
|
|
64
|
+
"heading",
|
|
65
|
+
"bold",
|
|
66
|
+
"italic",
|
|
67
|
+
"|",
|
|
68
|
+
"quote",
|
|
69
|
+
"unordered-list",
|
|
70
|
+
"ordered-list",
|
|
71
|
+
"|",
|
|
72
|
+
"link",
|
|
73
|
+
"image",
|
|
74
|
+
"code",
|
|
75
|
+
"|",
|
|
76
|
+
"preview",
|
|
77
|
+
"side-by-side"
|
|
78
|
+
];
|
|
79
|
+
function MarkdownInput(props) {
|
|
80
|
+
const {
|
|
81
|
+
value = "",
|
|
82
|
+
onChange,
|
|
83
|
+
elementProps: { onBlur, onFocus, ref },
|
|
84
|
+
reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
|
|
85
|
+
schemaType
|
|
86
|
+
} = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, imageUpload = useCallback(
|
|
87
|
+
(file, onSuccess, onError) => {
|
|
88
|
+
client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
|
|
89
|
+
console.error(e), onError(e.message);
|
|
90
|
+
});
|
|
91
|
+
},
|
|
92
|
+
[client, imageUrl]
|
|
93
|
+
), mdeOptions = useMemo(() => ({
|
|
94
|
+
autofocus: !1,
|
|
95
|
+
spellChecker: !1,
|
|
96
|
+
sideBySideFullscreen: !1,
|
|
97
|
+
uploadImage: !0,
|
|
98
|
+
imageUploadFunction: imageUpload,
|
|
99
|
+
toolbar: defaultMdeTools,
|
|
100
|
+
status: !1,
|
|
101
|
+
...mdeCustomOptions
|
|
102
|
+
}), [imageUpload, mdeCustomOptions]), handleChange = useCallback(
|
|
103
|
+
(newValue) => {
|
|
104
|
+
onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
|
|
105
|
+
},
|
|
106
|
+
[onChange]
|
|
107
|
+
);
|
|
108
|
+
return useSyncExternalStore(
|
|
109
|
+
noop,
|
|
110
|
+
() => !0,
|
|
111
|
+
() => !1
|
|
112
|
+
) ? /* @__PURE__ */ jsx(MarkdownInputStyles, { children: /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(
|
|
113
|
+
SimpleMdeReact,
|
|
114
|
+
{
|
|
115
|
+
...reactMdeProps,
|
|
116
|
+
ref,
|
|
117
|
+
value,
|
|
118
|
+
onChange: handleChange,
|
|
119
|
+
onBlur,
|
|
120
|
+
onFocus,
|
|
121
|
+
options: mdeOptions,
|
|
122
|
+
spellCheck: !1
|
|
123
|
+
}
|
|
124
|
+
) }) }) : /* @__PURE__ */ jsx(MarkdownInputStyles, { children: fallback });
|
|
125
|
+
}
|
|
126
|
+
const noop = () => () => {
|
|
127
|
+
}, fallback = /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Text, { children: "Loading editor..." }) }), markdownTypeName = "markdown", markdownSchemaType = defineType({
|
|
128
|
+
type: "string",
|
|
129
|
+
name: markdownTypeName,
|
|
130
|
+
title: "Markdown",
|
|
131
|
+
components: { input: MarkdownInput }
|
|
132
|
+
}), markdownSchema = definePlugin((config) => ({
|
|
133
|
+
name: "markdown-editor",
|
|
134
|
+
schema: {
|
|
135
|
+
types: [
|
|
136
|
+
config && config.input ? { ...markdownSchemaType, components: { input: config.input } } : markdownSchemaType
|
|
137
|
+
]
|
|
138
|
+
}
|
|
139
|
+
}));
|
|
140
|
+
export {
|
|
141
|
+
MarkdownInput,
|
|
142
|
+
defaultMdeTools,
|
|
143
|
+
markdownSchema,
|
|
144
|
+
markdownSchemaType
|
|
145
|
+
};
|
|
146
|
+
//# sourceMappingURL=plugin.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin.esm.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import {Box} from '@sanity/ui'\nimport {styled} from 'styled-components'\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 {type Options as EasyMdeOptions} from 'easymde'\nimport {lazy, Suspense, useCallback, useMemo, useSyncExternalStore} 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 {Box, Text} from '@sanity/ui'\n\nconst SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\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 mounted = useSyncExternalStore(\n noop,\n () => true,\n () => false,\n )\n\n if (!mounted) {\n return <MarkdownInputStyles>{fallback}</MarkdownInputStyles>\n }\n\n return (\n <MarkdownInputStyles>\n <Suspense fallback={fallback}>\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 </MarkdownInputStyles>\n )\n}\n\n// eslint-disable-next-line no-empty-function\nconst noop = () => () => {}\n\nconst fallback = (\n <Box padding={3}>\n <Text>Loading editor...</Text>\n </Box>\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":[],"mappings":"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"}
|
package/lib/index.d.mts
ADDED
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import {JSX as JSX_2} from 'react'
|
|
2
|
+
import {Options} from 'easymde'
|
|
3
|
+
import {Plugin as Plugin_2} from 'sanity'
|
|
4
|
+
import {ReactElement} from 'react'
|
|
5
|
+
import {SanityImageAssetDocument} from '@sanity/client'
|
|
6
|
+
import type {SimpleMDEReactProps} from 'react-simplemde-editor'
|
|
7
|
+
import {StringDefinition} from 'sanity'
|
|
8
|
+
import {StringInputProps} from 'sanity'
|
|
9
|
+
|
|
10
|
+
export declare const defaultMdeTools: Options['toolbar']
|
|
11
|
+
|
|
12
|
+
export declare interface MarkdownConfig {
|
|
13
|
+
/**
|
|
14
|
+
* When provided, will replace the default input component.
|
|
15
|
+
*
|
|
16
|
+
* Use this to customize MarkdownInput by wrapping it in a custom component,
|
|
17
|
+
* and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
|
|
18
|
+
* via the `reactMdeProps` prop.
|
|
19
|
+
*
|
|
20
|
+
* ### Example
|
|
21
|
+
*
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // CustomMarkdownInput.tsx
|
|
24
|
+
* import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
|
|
25
|
+
*
|
|
26
|
+
* export function CustomMarkdownInput(props) {
|
|
27
|
+
* const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
|
|
28
|
+
* useMemo(() => {
|
|
29
|
+
* return {
|
|
30
|
+
* options: {
|
|
31
|
+
* toolbar: ['bold', 'italic'],
|
|
32
|
+
* // more options available, see:
|
|
33
|
+
* // https://github.com/Ionaru/easy-markdown-editor#options-list
|
|
34
|
+
* },
|
|
35
|
+
* // more props available, see:
|
|
36
|
+
* // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
|
|
37
|
+
* }
|
|
38
|
+
* }, [])
|
|
39
|
+
*
|
|
40
|
+
* return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
|
|
41
|
+
* }
|
|
42
|
+
*
|
|
43
|
+
* // studio.config.ts
|
|
44
|
+
* markdownSchema({input: CustomMarkdownInput})
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
input?: (props: StringInputProps) => ReactElement
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* @public
|
|
52
|
+
*/
|
|
53
|
+
export declare interface MarkdownDefinition
|
|
54
|
+
extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
|
|
55
|
+
type: typeof markdownTypeName
|
|
56
|
+
options?: MarkdownOptions
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export declare function MarkdownInput(props: MarkdownInputProps): JSX_2.Element
|
|
60
|
+
|
|
61
|
+
export declare interface MarkdownInputProps extends StringInputProps {
|
|
62
|
+
/**
|
|
63
|
+
* These are passed along directly to
|
|
64
|
+
*
|
|
65
|
+
* Note: MarkdownInput sets certain reactMdeProps.options by default.
|
|
66
|
+
* These will be merged with any custom options.
|
|
67
|
+
*/
|
|
68
|
+
reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
declare interface MarkdownOptions {
|
|
72
|
+
/**
|
|
73
|
+
* Used to create image url for any uploaded image.
|
|
74
|
+
* The function will be invoked whenever an image is pasted or dragged into the
|
|
75
|
+
* markdown editor, after upload completes.
|
|
76
|
+
*
|
|
77
|
+
* The default implementation uses
|
|
78
|
+
* ```js
|
|
79
|
+
* imageAsset => `${imageAsset.url}?w=450`
|
|
80
|
+
* ```
|
|
81
|
+
* ## Example
|
|
82
|
+
* ```js
|
|
83
|
+
* {
|
|
84
|
+
* imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
|
|
85
|
+
* }
|
|
86
|
+
* ```
|
|
87
|
+
* @param imageAsset
|
|
88
|
+
*/
|
|
89
|
+
imageUrl?: (imageAsset: SanityImageAssetDocument) => string
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export declare const markdownSchema: Plugin_2<void | MarkdownConfig>
|
|
93
|
+
|
|
94
|
+
export declare const markdownSchemaType: {
|
|
95
|
+
type: 'string'
|
|
96
|
+
name: 'markdown'
|
|
97
|
+
} & Omit<StringDefinition, 'preview'>
|
|
98
|
+
|
|
99
|
+
declare const markdownTypeName: 'markdown'
|
|
100
|
+
|
|
101
|
+
export {}
|
|
102
|
+
|
|
103
|
+
declare module '@sanity/types' {
|
|
104
|
+
interface IntrinsicDefinitions {
|
|
105
|
+
markdown: MarkdownDefinition
|
|
106
|
+
}
|
|
107
|
+
}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {JSX as JSX_2} from 'react
|
|
1
|
+
import {JSX as JSX_2} from 'react'
|
|
2
2
|
import {Options} from 'easymde'
|
|
3
3
|
import {Plugin as Plugin_2} from 'sanity'
|
|
4
4
|
import {ReactElement} from 'react'
|
|
@@ -64,7 +64,7 @@ export declare interface MarkdownInputProps extends StringInputProps {
|
|
|
64
64
|
*
|
|
65
65
|
* Note: MarkdownInput sets certain reactMdeProps.options by default.
|
|
66
66
|
* These will be merged with any custom options.
|
|
67
|
-
|
|
67
|
+
*/
|
|
68
68
|
reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
|
|
69
69
|
}
|
|
70
70
|
|
package/lib/index.esm.js
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import "easymde/dist/easymde.min.css";
|
|
2
|
+
import { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from "./_legacy/plugin.esm.js";
|
|
3
|
+
export {
|
|
4
|
+
MarkdownInput,
|
|
5
|
+
defaultMdeTools,
|
|
6
|
+
markdownSchema,
|
|
7
|
+
markdownSchemaType
|
|
8
|
+
};
|
|
3
9
|
//# sourceMappingURL=index.esm.js.map
|
package/lib/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
package/lib/index.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
});
|
|
6
|
-
require('easymde/dist/easymde.min.css');
|
|
7
|
-
var plugin = require('./_chunks/plugin-fb6e236d.js');
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
|
+
require("easymde/dist/easymde.min.css");
|
|
4
|
+
var plugin = require("./_chunks-cjs/plugin.js");
|
|
8
5
|
exports.MarkdownInput = plugin.MarkdownInput;
|
|
9
6
|
exports.defaultMdeTools = plugin.defaultMdeTools;
|
|
10
7
|
exports.markdownSchema = plugin.markdownSchema;
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
package/lib/index.mjs
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import "easymde/dist/easymde.min.css";
|
|
2
|
+
import { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from "./_chunks-es/plugin.mjs";
|
|
3
|
+
export {
|
|
4
|
+
MarkdownInput,
|
|
5
|
+
defaultMdeTools,
|
|
6
|
+
markdownSchema,
|
|
7
|
+
markdownSchemaType
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import {JSX as JSX_2} from 'react'
|
|
2
|
+
import {Options} from 'easymde'
|
|
3
|
+
import {Plugin as Plugin_2} from 'sanity'
|
|
4
|
+
import {ReactElement} from 'react'
|
|
5
|
+
import {SanityImageAssetDocument} from '@sanity/client'
|
|
6
|
+
import type {SimpleMDEReactProps} from 'react-simplemde-editor'
|
|
7
|
+
import {StringDefinition} from 'sanity'
|
|
8
|
+
import {StringInputProps} from 'sanity'
|
|
9
|
+
|
|
10
|
+
export declare const defaultMdeTools: Options['toolbar']
|
|
11
|
+
|
|
12
|
+
export declare interface MarkdownConfig {
|
|
13
|
+
/**
|
|
14
|
+
* When provided, will replace the default input component.
|
|
15
|
+
*
|
|
16
|
+
* Use this to customize MarkdownInput by wrapping it in a custom component,
|
|
17
|
+
* and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
|
|
18
|
+
* via the `reactMdeProps` prop.
|
|
19
|
+
*
|
|
20
|
+
* ### Example
|
|
21
|
+
*
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // CustomMarkdownInput.tsx
|
|
24
|
+
* import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
|
|
25
|
+
*
|
|
26
|
+
* export function CustomMarkdownInput(props) {
|
|
27
|
+
* const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
|
|
28
|
+
* useMemo(() => {
|
|
29
|
+
* return {
|
|
30
|
+
* options: {
|
|
31
|
+
* toolbar: ['bold', 'italic'],
|
|
32
|
+
* // more options available, see:
|
|
33
|
+
* // https://github.com/Ionaru/easy-markdown-editor#options-list
|
|
34
|
+
* },
|
|
35
|
+
* // more props available, see:
|
|
36
|
+
* // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
|
|
37
|
+
* }
|
|
38
|
+
* }, [])
|
|
39
|
+
*
|
|
40
|
+
* return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
|
|
41
|
+
* }
|
|
42
|
+
*
|
|
43
|
+
* // studio.config.ts
|
|
44
|
+
* markdownSchema({input: CustomMarkdownInput})
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
input?: (props: StringInputProps) => ReactElement
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* @public
|
|
52
|
+
*/
|
|
53
|
+
export declare interface MarkdownDefinition
|
|
54
|
+
extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
|
|
55
|
+
type: typeof markdownTypeName
|
|
56
|
+
options?: MarkdownOptions
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export declare function MarkdownInput(props: MarkdownInputProps): JSX_2.Element
|
|
60
|
+
|
|
61
|
+
export declare interface MarkdownInputProps extends StringInputProps {
|
|
62
|
+
/**
|
|
63
|
+
* These are passed along directly to
|
|
64
|
+
*
|
|
65
|
+
* Note: MarkdownInput sets certain reactMdeProps.options by default.
|
|
66
|
+
* These will be merged with any custom options.
|
|
67
|
+
*/
|
|
68
|
+
reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
declare interface MarkdownOptions {
|
|
72
|
+
/**
|
|
73
|
+
* Used to create image url for any uploaded image.
|
|
74
|
+
* The function will be invoked whenever an image is pasted or dragged into the
|
|
75
|
+
* markdown editor, after upload completes.
|
|
76
|
+
*
|
|
77
|
+
* The default implementation uses
|
|
78
|
+
* ```js
|
|
79
|
+
* imageAsset => `${imageAsset.url}?w=450`
|
|
80
|
+
* ```
|
|
81
|
+
* ## Example
|
|
82
|
+
* ```js
|
|
83
|
+
* {
|
|
84
|
+
* imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
|
|
85
|
+
* }
|
|
86
|
+
* ```
|
|
87
|
+
* @param imageAsset
|
|
88
|
+
*/
|
|
89
|
+
imageUrl?: (imageAsset: SanityImageAssetDocument) => string
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export declare const markdownSchema: Plugin_2<void | MarkdownConfig>
|
|
93
|
+
|
|
94
|
+
export declare const markdownSchemaType: {
|
|
95
|
+
type: 'string'
|
|
96
|
+
name: 'markdown'
|
|
97
|
+
} & Omit<StringDefinition, 'preview'>
|
|
98
|
+
|
|
99
|
+
declare const markdownTypeName: 'markdown'
|
|
100
|
+
|
|
101
|
+
export {}
|
|
102
|
+
|
|
103
|
+
declare module '@sanity/types' {
|
|
104
|
+
interface IntrinsicDefinitions {
|
|
105
|
+
markdown: MarkdownDefinition
|
|
106
|
+
}
|
|
107
|
+
}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import {JSX as JSX_2} from 'react'
|
|
2
|
+
import {Options} from 'easymde'
|
|
3
|
+
import {Plugin as Plugin_2} from 'sanity'
|
|
4
|
+
import {ReactElement} from 'react'
|
|
5
|
+
import {SanityImageAssetDocument} from '@sanity/client'
|
|
6
|
+
import type {SimpleMDEReactProps} from 'react-simplemde-editor'
|
|
7
|
+
import {StringDefinition} from 'sanity'
|
|
8
|
+
import {StringInputProps} from 'sanity'
|
|
9
|
+
|
|
10
|
+
export declare const defaultMdeTools: Options['toolbar']
|
|
11
|
+
|
|
12
|
+
export declare interface MarkdownConfig {
|
|
13
|
+
/**
|
|
14
|
+
* When provided, will replace the default input component.
|
|
15
|
+
*
|
|
16
|
+
* Use this to customize MarkdownInput by wrapping it in a custom component,
|
|
17
|
+
* and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
|
|
18
|
+
* via the `reactMdeProps` prop.
|
|
19
|
+
*
|
|
20
|
+
* ### Example
|
|
21
|
+
*
|
|
22
|
+
* ```tsx
|
|
23
|
+
* // CustomMarkdownInput.tsx
|
|
24
|
+
* import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'
|
|
25
|
+
*
|
|
26
|
+
* export function CustomMarkdownInput(props) {
|
|
27
|
+
* const reactMdeProps: MarkdownInputProps['reactMdeProps'] =
|
|
28
|
+
* useMemo(() => {
|
|
29
|
+
* return {
|
|
30
|
+
* options: {
|
|
31
|
+
* toolbar: ['bold', 'italic'],
|
|
32
|
+
* // more options available, see:
|
|
33
|
+
* // https://github.com/Ionaru/easy-markdown-editor#options-list
|
|
34
|
+
* },
|
|
35
|
+
* // more props available, see:
|
|
36
|
+
* // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor
|
|
37
|
+
* }
|
|
38
|
+
* }, [])
|
|
39
|
+
*
|
|
40
|
+
* return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />
|
|
41
|
+
* }
|
|
42
|
+
*
|
|
43
|
+
* // studio.config.ts
|
|
44
|
+
* markdownSchema({input: CustomMarkdownInput})
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
input?: (props: StringInputProps) => ReactElement
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* @public
|
|
52
|
+
*/
|
|
53
|
+
export declare interface MarkdownDefinition
|
|
54
|
+
extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {
|
|
55
|
+
type: typeof markdownTypeName
|
|
56
|
+
options?: MarkdownOptions
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
export declare function MarkdownInput(props: MarkdownInputProps): JSX_2.Element
|
|
60
|
+
|
|
61
|
+
export declare interface MarkdownInputProps extends StringInputProps {
|
|
62
|
+
/**
|
|
63
|
+
* These are passed along directly to
|
|
64
|
+
*
|
|
65
|
+
* Note: MarkdownInput sets certain reactMdeProps.options by default.
|
|
66
|
+
* These will be merged with any custom options.
|
|
67
|
+
*/
|
|
68
|
+
reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
declare interface MarkdownOptions {
|
|
72
|
+
/**
|
|
73
|
+
* Used to create image url for any uploaded image.
|
|
74
|
+
* The function will be invoked whenever an image is pasted or dragged into the
|
|
75
|
+
* markdown editor, after upload completes.
|
|
76
|
+
*
|
|
77
|
+
* The default implementation uses
|
|
78
|
+
* ```js
|
|
79
|
+
* imageAsset => `${imageAsset.url}?w=450`
|
|
80
|
+
* ```
|
|
81
|
+
* ## Example
|
|
82
|
+
* ```js
|
|
83
|
+
* {
|
|
84
|
+
* imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`
|
|
85
|
+
* }
|
|
86
|
+
* ```
|
|
87
|
+
* @param imageAsset
|
|
88
|
+
*/
|
|
89
|
+
imageUrl?: (imageAsset: SanityImageAssetDocument) => string
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export declare const markdownSchema: Plugin_2<void | MarkdownConfig>
|
|
93
|
+
|
|
94
|
+
export declare const markdownSchemaType: {
|
|
95
|
+
type: 'string'
|
|
96
|
+
name: 'markdown'
|
|
97
|
+
} & Omit<StringDefinition, 'preview'>
|
|
98
|
+
|
|
99
|
+
declare const markdownTypeName: 'markdown'
|
|
100
|
+
|
|
101
|
+
export {}
|
|
102
|
+
|
|
103
|
+
declare module '@sanity/types' {
|
|
104
|
+
interface IntrinsicDefinitions {
|
|
105
|
+
markdown: MarkdownDefinition
|
|
106
|
+
}
|
|
107
|
+
}
|
package/lib/indexNext.esm.js
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
import { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from "./_legacy/plugin.esm.js";
|
|
2
|
+
export {
|
|
3
|
+
MarkdownInput,
|
|
4
|
+
defaultMdeTools,
|
|
5
|
+
markdownSchema,
|
|
6
|
+
markdownSchemaType
|
|
7
|
+
};
|
|
2
8
|
//# sourceMappingURL=indexNext.esm.js.map
|
package/lib/indexNext.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"indexNext.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"indexNext.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/lib/indexNext.js
CHANGED
|
@@ -1,9 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
var plugin = require('./_chunks/plugin-fb6e236d.js');
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
|
+
var plugin = require("./_chunks-cjs/plugin.js");
|
|
7
4
|
exports.MarkdownInput = plugin.MarkdownInput;
|
|
8
5
|
exports.defaultMdeTools = plugin.defaultMdeTools;
|
|
9
6
|
exports.markdownSchema = plugin.markdownSchema;
|
package/lib/indexNext.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"indexNext.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"indexNext.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indexNext.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|