sanity-plugin-markdown 6.0.0 → 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.
@@ -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
@@ -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":";;"}