sanity-plugin-markdown 5.1.3 → 7.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 +0 -17
- package/dist/_chunks-dts/commonExports.d.ts +162 -0
- package/dist/_chunks-dts/commonExports.d.ts.map +1 -0
- package/dist/index.d.ts +2 -0
- package/{lib/index.mjs → dist/index.js} +2 -2
- package/{lib → dist}/index.js.map +1 -1
- package/dist/indexNext.d.ts +2 -0
- package/dist/indexNext.js +180 -0
- package/dist/indexNext.js.map +1 -0
- package/package.json +32 -75
- package/lib/_chunks-cjs/plugin.js +0 -176
- package/lib/_chunks-cjs/plugin.js.map +0 -1
- package/lib/_chunks-es/plugin.mjs +0 -162
- package/lib/_chunks-es/plugin.mjs.map +0 -1
- package/lib/_legacy/plugin.esm.js +0 -162
- package/lib/_legacy/plugin.esm.js.map +0 -1
- package/lib/index.d.mts +0 -107
- package/lib/index.d.ts +0 -107
- package/lib/index.esm.js +0 -9
- package/lib/index.esm.js.map +0 -1
- package/lib/index.js +0 -9
- package/lib/index.mjs.map +0 -1
- package/lib/indexNext.d.mts +0 -107
- package/lib/indexNext.d.ts +0 -107
- package/lib/indexNext.esm.js +0 -8
- package/lib/indexNext.esm.js.map +0 -1
- package/lib/indexNext.js +0 -8
- package/lib/indexNext.js.map +0 -1
- package/lib/indexNext.mjs +0 -8
- package/lib/indexNext.mjs.map +0 -1
- package/sanity.json +0 -8
- package/src/commonExports.ts +0 -4
- package/src/components/MarkdownInput.tsx +0 -142
- package/src/components/MarkdownInputStyles.tsx +0 -61
- package/src/components/sanity-ui.d.ts +0 -6
- package/src/index.ts +0 -3
- package/src/indexNext.ts +0 -1
- package/src/plugin.tsx +0 -54
- package/src/schema.ts +0 -48
- package/v2-incompatible.js +0 -11
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
import { useClient, PatchEvent, set, unset, defineType, definePlugin } from "sanity";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { lazy, useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect, 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: elementRef },
|
|
84
|
-
reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
|
|
85
|
-
schemaType,
|
|
86
|
-
focused
|
|
87
|
-
} = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, [shouldAutoFocus, setShouldAutoFocus] = useState(!1), ref = useRef(null);
|
|
88
|
-
useImperativeHandle(elementRef, () => ref.current);
|
|
89
|
-
const imageUpload = useCallback(
|
|
90
|
-
(file, onSuccess, onError) => {
|
|
91
|
-
client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
|
|
92
|
-
console.error(e), onError(e.message);
|
|
93
|
-
});
|
|
94
|
-
},
|
|
95
|
-
[client, imageUrl]
|
|
96
|
-
), mdeOptions = useMemo(() => ({
|
|
97
|
-
spellChecker: !1,
|
|
98
|
-
sideBySideFullscreen: !1,
|
|
99
|
-
uploadImage: !0,
|
|
100
|
-
imageUploadFunction: imageUpload,
|
|
101
|
-
toolbar: defaultMdeTools,
|
|
102
|
-
status: !1,
|
|
103
|
-
...mdeCustomOptions,
|
|
104
|
-
autofocus: shouldAutoFocus
|
|
105
|
-
}), [imageUpload, mdeCustomOptions, shouldAutoFocus]);
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
const node = ref.current;
|
|
108
|
-
if (node) {
|
|
109
|
-
if (focused && !shouldAutoFocus) {
|
|
110
|
-
const raf = requestAnimationFrame(
|
|
111
|
-
() => setShouldAutoFocus(!node.contains(document.activeElement))
|
|
112
|
-
);
|
|
113
|
-
return () => cancelAnimationFrame(raf);
|
|
114
|
-
}
|
|
115
|
-
if (!focused && shouldAutoFocus) {
|
|
116
|
-
const raf = requestAnimationFrame(
|
|
117
|
-
() => setShouldAutoFocus(node.contains(document.activeElement))
|
|
118
|
-
);
|
|
119
|
-
return () => cancelAnimationFrame(raf);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
}, [focused, shouldAutoFocus]);
|
|
123
|
-
const handleChange = useCallback(
|
|
124
|
-
(newValue) => {
|
|
125
|
-
onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
|
|
126
|
-
},
|
|
127
|
-
[onChange]
|
|
128
|
-
);
|
|
129
|
-
return /* @__PURE__ */ jsx(MarkdownInputStyles, { children: /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(
|
|
130
|
-
SimpleMdeReact,
|
|
131
|
-
{
|
|
132
|
-
...reactMdeProps,
|
|
133
|
-
ref,
|
|
134
|
-
value,
|
|
135
|
-
onChange: handleChange,
|
|
136
|
-
onBlur,
|
|
137
|
-
onFocus,
|
|
138
|
-
options: mdeOptions,
|
|
139
|
-
spellCheck: !1
|
|
140
|
-
}
|
|
141
|
-
) }) });
|
|
142
|
-
}
|
|
143
|
-
const fallback = /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Text, { children: "Loading editor..." }) }), markdownTypeName = "markdown", markdownSchemaType = defineType({
|
|
144
|
-
type: "string",
|
|
145
|
-
name: markdownTypeName,
|
|
146
|
-
title: "Markdown",
|
|
147
|
-
components: { input: MarkdownInput }
|
|
148
|
-
}), markdownSchema = definePlugin((config) => ({
|
|
149
|
-
name: "markdown-editor",
|
|
150
|
-
schema: {
|
|
151
|
-
types: [
|
|
152
|
-
config && config.input ? { ...markdownSchemaType, components: { input: config.input } } : markdownSchemaType
|
|
153
|
-
]
|
|
154
|
-
}
|
|
155
|
-
}));
|
|
156
|
-
export {
|
|
157
|
-
MarkdownInput,
|
|
158
|
-
defaultMdeTools,
|
|
159
|
-
markdownSchema,
|
|
160
|
-
markdownSchemaType
|
|
161
|
-
};
|
|
162
|
-
//# sourceMappingURL=plugin.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.mjs","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 {\n lazy,\n Suspense,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} 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: elementRef},\n reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n schemaType,\n focused,\n } = props\n const client = useClient({apiVersion: '2022-01-01'})\n const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n const [shouldAutoFocus, setShouldAutoFocus] = useState(false)\n const ref = useRef<HTMLDivElement>(null)\n\n // Forward ref to parent form state\n useImperativeHandle(elementRef, () => ref.current)\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 spellChecker: false,\n sideBySideFullscreen: false,\n uploadImage: true,\n imageUploadFunction: imageUpload,\n toolbar: defaultMdeTools,\n status: false,\n ...mdeCustomOptions,\n autofocus: shouldAutoFocus,\n }\n }, [imageUpload, mdeCustomOptions, shouldAutoFocus])\n\n // eslint-disable-next-line consistent-return\n useEffect(() => {\n const node = ref.current\n if (!node) return undefined\n\n if (focused && !shouldAutoFocus) {\n // Do not set autofocus if the field already has focus\n const raf = requestAnimationFrame(() =>\n setShouldAutoFocus(!node.contains(document.activeElement)),\n )\n return () => cancelAnimationFrame(raf)\n }\n\n if (!focused && shouldAutoFocus) {\n // If `focused` is false, and the current active focus is no longer within the editor, reset autofocus state\n const raf = requestAnimationFrame(() =>\n setShouldAutoFocus(node.contains(document.activeElement)),\n )\n return () => cancelAnimationFrame(raf)\n }\n }, [focused, shouldAutoFocus])\n\n const handleChange = useCallback(\n (newValue: string) => {\n onChange(PatchEvent.from(newValue ? set(newValue) : unset()))\n },\n [onChange],\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\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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"}
|
|
@@ -1,162 +0,0 @@
|
|
|
1
|
-
import { useClient, PatchEvent, set, unset, defineType, definePlugin } from "sanity";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import { lazy, useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect, 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: elementRef },
|
|
84
|
-
reactMdeProps: { options: mdeCustomOptions, ...reactMdeProps } = {},
|
|
85
|
-
schemaType,
|
|
86
|
-
focused
|
|
87
|
-
} = props, client = useClient({ apiVersion: "2022-01-01" }), { imageUrl } = schemaType.options ?? {}, [shouldAutoFocus, setShouldAutoFocus] = useState(!1), ref = useRef(null);
|
|
88
|
-
useImperativeHandle(elementRef, () => ref.current);
|
|
89
|
-
const imageUpload = useCallback(
|
|
90
|
-
(file, onSuccess, onError) => {
|
|
91
|
-
client.assets.upload("image", file).then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`)).catch((e) => {
|
|
92
|
-
console.error(e), onError(e.message);
|
|
93
|
-
});
|
|
94
|
-
},
|
|
95
|
-
[client, imageUrl]
|
|
96
|
-
), mdeOptions = useMemo(() => ({
|
|
97
|
-
spellChecker: !1,
|
|
98
|
-
sideBySideFullscreen: !1,
|
|
99
|
-
uploadImage: !0,
|
|
100
|
-
imageUploadFunction: imageUpload,
|
|
101
|
-
toolbar: defaultMdeTools,
|
|
102
|
-
status: !1,
|
|
103
|
-
...mdeCustomOptions,
|
|
104
|
-
autofocus: shouldAutoFocus
|
|
105
|
-
}), [imageUpload, mdeCustomOptions, shouldAutoFocus]);
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
const node = ref.current;
|
|
108
|
-
if (node) {
|
|
109
|
-
if (focused && !shouldAutoFocus) {
|
|
110
|
-
const raf = requestAnimationFrame(
|
|
111
|
-
() => setShouldAutoFocus(!node.contains(document.activeElement))
|
|
112
|
-
);
|
|
113
|
-
return () => cancelAnimationFrame(raf);
|
|
114
|
-
}
|
|
115
|
-
if (!focused && shouldAutoFocus) {
|
|
116
|
-
const raf = requestAnimationFrame(
|
|
117
|
-
() => setShouldAutoFocus(node.contains(document.activeElement))
|
|
118
|
-
);
|
|
119
|
-
return () => cancelAnimationFrame(raf);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
}, [focused, shouldAutoFocus]);
|
|
123
|
-
const handleChange = useCallback(
|
|
124
|
-
(newValue) => {
|
|
125
|
-
onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
|
|
126
|
-
},
|
|
127
|
-
[onChange]
|
|
128
|
-
);
|
|
129
|
-
return /* @__PURE__ */ jsx(MarkdownInputStyles, { children: /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(
|
|
130
|
-
SimpleMdeReact,
|
|
131
|
-
{
|
|
132
|
-
...reactMdeProps,
|
|
133
|
-
ref,
|
|
134
|
-
value,
|
|
135
|
-
onChange: handleChange,
|
|
136
|
-
onBlur,
|
|
137
|
-
onFocus,
|
|
138
|
-
options: mdeOptions,
|
|
139
|
-
spellCheck: !1
|
|
140
|
-
}
|
|
141
|
-
) }) });
|
|
142
|
-
}
|
|
143
|
-
const fallback = /* @__PURE__ */ jsx(Box, { padding: 3, children: /* @__PURE__ */ jsx(Text, { children: "Loading editor..." }) }), markdownTypeName = "markdown", markdownSchemaType = defineType({
|
|
144
|
-
type: "string",
|
|
145
|
-
name: markdownTypeName,
|
|
146
|
-
title: "Markdown",
|
|
147
|
-
components: { input: MarkdownInput }
|
|
148
|
-
}), markdownSchema = definePlugin((config) => ({
|
|
149
|
-
name: "markdown-editor",
|
|
150
|
-
schema: {
|
|
151
|
-
types: [
|
|
152
|
-
config && config.input ? { ...markdownSchemaType, components: { input: config.input } } : markdownSchemaType
|
|
153
|
-
]
|
|
154
|
-
}
|
|
155
|
-
}));
|
|
156
|
-
export {
|
|
157
|
-
MarkdownInput,
|
|
158
|
-
defaultMdeTools,
|
|
159
|
-
markdownSchema,
|
|
160
|
-
markdownSchemaType
|
|
161
|
-
};
|
|
162
|
-
//# sourceMappingURL=plugin.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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 {\n lazy,\n Suspense,\n useCallback,\n useEffect,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} 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: elementRef},\n reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n schemaType,\n focused,\n } = props\n const client = useClient({apiVersion: '2022-01-01'})\n const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n const [shouldAutoFocus, setShouldAutoFocus] = useState(false)\n const ref = useRef<HTMLDivElement>(null)\n\n // Forward ref to parent form state\n useImperativeHandle(elementRef, () => ref.current)\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 spellChecker: false,\n sideBySideFullscreen: false,\n uploadImage: true,\n imageUploadFunction: imageUpload,\n toolbar: defaultMdeTools,\n status: false,\n ...mdeCustomOptions,\n autofocus: shouldAutoFocus,\n }\n }, [imageUpload, mdeCustomOptions, shouldAutoFocus])\n\n // eslint-disable-next-line consistent-return\n useEffect(() => {\n const node = ref.current\n if (!node) return undefined\n\n if (focused && !shouldAutoFocus) {\n // Do not set autofocus if the field already has focus\n const raf = requestAnimationFrame(() =>\n setShouldAutoFocus(!node.contains(document.activeElement)),\n )\n return () => cancelAnimationFrame(raf)\n }\n\n if (!focused && shouldAutoFocus) {\n // If `focused` is false, and the current active focus is no longer within the editor, reset autofocus state\n const raf = requestAnimationFrame(() =>\n setShouldAutoFocus(node.contains(document.activeElement)),\n )\n return () => cancelAnimationFrame(raf)\n }\n }, [focused, shouldAutoFocus])\n\n const handleChange = useCallback(\n (newValue: string) => {\n onChange(PatchEvent.from(newValue ? set(newValue) : unset()))\n },\n [onChange],\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\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
DELETED
|
@@ -1,107 +0,0 @@
|
|
|
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
DELETED
|
@@ -1,107 +0,0 @@
|
|
|
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.esm.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
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
|
-
};
|
|
9
|
-
//# sourceMappingURL=index.esm.js.map
|
package/lib/index.esm.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
package/lib/index.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
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");
|
|
5
|
-
exports.MarkdownInput = plugin.MarkdownInput;
|
|
6
|
-
exports.defaultMdeTools = plugin.defaultMdeTools;
|
|
7
|
-
exports.markdownSchema = plugin.markdownSchema;
|
|
8
|
-
exports.markdownSchemaType = plugin.markdownSchemaType;
|
|
9
|
-
//# sourceMappingURL=index.js.map
|
package/lib/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|