sanity-plugin-markdown 4.0.0 → 4.1.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 +14 -0
- package/lib/_chunks/plugin-b7a179e6.js +162 -0
- package/lib/_chunks/plugin-b7a179e6.js.map +1 -0
- package/lib/_chunks/plugin-ca10aa4c.js +151 -0
- package/lib/_chunks/plugin-ca10aa4c.js.map +1 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.esm.js +1 -139
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +5 -149
- package/lib/index.js.map +1 -1
- package/lib/indexNext.esm.js +2 -0
- package/lib/indexNext.esm.js.map +1 -0
- package/lib/indexNext.js +11 -0
- package/lib/indexNext.js.map +1 -0
- package/package.json +18 -4
- package/src/commonExports.ts +4 -0
- package/src/components/MarkdownInput.tsx +27 -13
- package/src/components/useSimpleMdeReact.tsx +12 -0
- package/src/index.ts +2 -3
- package/src/indexNext.ts +1 -0
package/README.md
CHANGED
|
@@ -53,6 +53,20 @@ const myDocument = {
|
|
|
53
53
|
]
|
|
54
54
|
}
|
|
55
55
|
```
|
|
56
|
+
### Next.js compatability
|
|
57
|
+
Next.js *without* Next 13 app directory does not support css imports from `node_modules`.
|
|
58
|
+
|
|
59
|
+
To use this plugin in this context (`pages` directory), use the `sanity-plugin-markdown/next` import instead of `sanity-plugin-markdown`:
|
|
60
|
+
```js
|
|
61
|
+
import { markdownSchema } from "sanity-plugin-markdown/next";
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Then, make sure to add
|
|
65
|
+
```js
|
|
66
|
+
import 'easymde/dist/easymde.min.css'
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
to the top of `pages/_app.tsx`.
|
|
56
70
|
|
|
57
71
|
### Customizing the default markdown input editor
|
|
58
72
|
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _templateObject;
|
|
4
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
5
|
+
var sanity = require('sanity');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
|
+
var react = require('react');
|
|
8
|
+
var styled = require('styled-components');
|
|
9
|
+
var ui = require('@sanity/ui');
|
|
10
|
+
function _interopDefaultCompat(e) {
|
|
11
|
+
return e && typeof e === 'object' && 'default' in e ? e : {
|
|
12
|
+
default: e
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
16
|
+
const MarkdownInputStyles = styled__default.default(ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n & .CodeMirror.CodeMirror {\n color: ", ";\n border-color: ", ";\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ", ";\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ", ";\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .editor-toolbar > * {\n color: ", ";\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ", ";\n }\n\n & .editor-preview {\n background-color: ", ";\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n"])), _ref => {
|
|
17
|
+
let {
|
|
18
|
+
theme
|
|
19
|
+
} = _ref;
|
|
20
|
+
return theme.sanity.color.card.enabled.fg;
|
|
21
|
+
}, _ref2 => {
|
|
22
|
+
let {
|
|
23
|
+
theme
|
|
24
|
+
} = _ref2;
|
|
25
|
+
return theme.sanity.color.card.enabled.border;
|
|
26
|
+
}, _ref3 => {
|
|
27
|
+
let {
|
|
28
|
+
theme
|
|
29
|
+
} = _ref3;
|
|
30
|
+
return theme.sanity.color.card.enabled.fg;
|
|
31
|
+
}, _ref4 => {
|
|
32
|
+
let {
|
|
33
|
+
theme
|
|
34
|
+
} = _ref4;
|
|
35
|
+
return theme.sanity.color.card.enabled.border;
|
|
36
|
+
}, _ref5 => {
|
|
37
|
+
let {
|
|
38
|
+
theme
|
|
39
|
+
} = _ref5;
|
|
40
|
+
return theme.sanity.color.selectable.primary.hovered.bg;
|
|
41
|
+
}, _ref6 => {
|
|
42
|
+
let {
|
|
43
|
+
theme
|
|
44
|
+
} = _ref6;
|
|
45
|
+
return theme.sanity.color.card.enabled.bg;
|
|
46
|
+
}, _ref7 => {
|
|
47
|
+
let {
|
|
48
|
+
theme
|
|
49
|
+
} = _ref7;
|
|
50
|
+
return theme.sanity.color.card.enabled.fg;
|
|
51
|
+
}, _ref8 => {
|
|
52
|
+
let {
|
|
53
|
+
theme
|
|
54
|
+
} = _ref8;
|
|
55
|
+
return theme.sanity.color.card.enabled.bg;
|
|
56
|
+
}, _ref9 => {
|
|
57
|
+
let {
|
|
58
|
+
theme
|
|
59
|
+
} = _ref9;
|
|
60
|
+
return theme.sanity.color.card.enabled.bg;
|
|
61
|
+
});
|
|
62
|
+
const SimpleMdeReact = react.lazy(() => import('react-simplemde-editor'));
|
|
63
|
+
function useSimpleMdeReact() {
|
|
64
|
+
const [mounted, setMounted] = react.useState(false);
|
|
65
|
+
react.useEffect(() => {
|
|
66
|
+
requestAnimationFrame(() => setMounted(true));
|
|
67
|
+
}, []);
|
|
68
|
+
return mounted ? SimpleMdeReact : null;
|
|
69
|
+
}
|
|
70
|
+
const defaultMdeTools = ["heading", "bold", "italic", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side"];
|
|
71
|
+
function MarkdownInput(props) {
|
|
72
|
+
var _a;
|
|
73
|
+
const {
|
|
74
|
+
value = "",
|
|
75
|
+
onChange,
|
|
76
|
+
elementProps: {
|
|
77
|
+
onBlur,
|
|
78
|
+
onFocus,
|
|
79
|
+
ref
|
|
80
|
+
},
|
|
81
|
+
reactMdeProps: {
|
|
82
|
+
options: mdeCustomOptions,
|
|
83
|
+
...reactMdeProps
|
|
84
|
+
} = {},
|
|
85
|
+
schemaType
|
|
86
|
+
} = props;
|
|
87
|
+
const client = sanity.useClient({
|
|
88
|
+
apiVersion: "2022-01-01"
|
|
89
|
+
});
|
|
90
|
+
const {
|
|
91
|
+
imageUrl
|
|
92
|
+
} = (_a = schemaType.options) != null ? _a : {};
|
|
93
|
+
const imageUpload = react.useCallback((file, onSuccess, onError) => {
|
|
94
|
+
client.assets.upload("image", file).then(doc => onSuccess(imageUrl ? imageUrl(doc) : "".concat(doc.url, "?w=450"))).catch(e => {
|
|
95
|
+
console.error(e);
|
|
96
|
+
onError(e.message);
|
|
97
|
+
});
|
|
98
|
+
}, [client, imageUrl]);
|
|
99
|
+
const mdeOptions = react.useMemo(() => {
|
|
100
|
+
return {
|
|
101
|
+
autofocus: false,
|
|
102
|
+
spellChecker: false,
|
|
103
|
+
sideBySideFullscreen: false,
|
|
104
|
+
uploadImage: true,
|
|
105
|
+
imageUploadFunction: imageUpload,
|
|
106
|
+
toolbar: defaultMdeTools,
|
|
107
|
+
status: false,
|
|
108
|
+
...mdeCustomOptions
|
|
109
|
+
};
|
|
110
|
+
}, [imageUpload, mdeCustomOptions]);
|
|
111
|
+
const handleChange = react.useCallback(newValue => {
|
|
112
|
+
onChange(sanity.PatchEvent.from(newValue ? sanity.set(newValue) : sanity.unset()));
|
|
113
|
+
}, [onChange]);
|
|
114
|
+
const SimpleMdeReact = useSimpleMdeReact();
|
|
115
|
+
return /* @__PURE__ */jsxRuntime.jsx(MarkdownInputStyles, {
|
|
116
|
+
children: SimpleMdeReact && /* @__PURE__ */jsxRuntime.jsx(react.Suspense, {
|
|
117
|
+
fallback: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
|
|
118
|
+
padding: 3,
|
|
119
|
+
children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
|
|
120
|
+
children: "Loading editor..."
|
|
121
|
+
})
|
|
122
|
+
}),
|
|
123
|
+
children: /* @__PURE__ */jsxRuntime.jsx(SimpleMdeReact, {
|
|
124
|
+
...reactMdeProps,
|
|
125
|
+
ref,
|
|
126
|
+
value,
|
|
127
|
+
onChange: handleChange,
|
|
128
|
+
onBlur,
|
|
129
|
+
onFocus,
|
|
130
|
+
options: mdeOptions,
|
|
131
|
+
spellCheck: false
|
|
132
|
+
})
|
|
133
|
+
})
|
|
134
|
+
});
|
|
135
|
+
}
|
|
136
|
+
const markdownTypeName = "markdown";
|
|
137
|
+
const markdownSchemaType = sanity.defineType({
|
|
138
|
+
type: "string",
|
|
139
|
+
name: markdownTypeName,
|
|
140
|
+
title: "Markdown",
|
|
141
|
+
components: {
|
|
142
|
+
input: MarkdownInput
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
const markdownSchema = sanity.definePlugin(config => {
|
|
146
|
+
return {
|
|
147
|
+
name: "markdown-editor",
|
|
148
|
+
schema: {
|
|
149
|
+
types: [config && config.input ? {
|
|
150
|
+
...markdownSchemaType,
|
|
151
|
+
components: {
|
|
152
|
+
input: config.input
|
|
153
|
+
}
|
|
154
|
+
} : markdownSchemaType]
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
});
|
|
158
|
+
exports.MarkdownInput = MarkdownInput;
|
|
159
|
+
exports.defaultMdeTools = defaultMdeTools;
|
|
160
|
+
exports.markdownSchema = markdownSchema;
|
|
161
|
+
exports.markdownSchemaType = markdownSchemaType;
|
|
162
|
+
//# sourceMappingURL=plugin-b7a179e6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin-b7a179e6.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/useSimpleMdeReact.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport {Box} from '@sanity/ui'\n\nexport const MarkdownInputStyles = styled(Box)`\n & .CodeMirror.CodeMirror {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.selectable.primary.hovered.bg};\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-toolbar > * {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-preview {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n`\n","import {lazy, useEffect, useState} from 'react'\n\nexport const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport function useSimpleMdeReact() {\n const [mounted, setMounted] = useState(false)\n useEffect(() => {\n requestAnimationFrame(() => setMounted(true))\n }, [])\n\n return mounted ? SimpleMdeReact : null\n}\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport React, {Suspense, useCallback, useMemo} from 'react'\n// dont import non-types here, it will break SSR on next\nimport type {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\nimport {useSimpleMdeReact} from './useSimpleMdeReact'\nimport {Box, Text} from '@sanity/ui'\n\nexport interface MarkdownInputProps extends StringInputProps {\n /**\n * These are passed along directly to\n *\n * Note: MarkdownInput sets certain reactMdeProps.options by default.\n * These will be merged with any custom options.\n * */\n reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>\n}\n\nexport const defaultMdeTools: EasyMdeOptions['toolbar'] = [\n 'heading',\n 'bold',\n 'italic',\n '|',\n 'quote',\n 'unordered-list',\n 'ordered-list',\n '|',\n 'link',\n 'image',\n 'code',\n '|',\n 'preview',\n 'side-by-side',\n]\n\nexport function MarkdownInput(props: MarkdownInputProps) {\n const {\n value = '',\n onChange,\n elementProps: {onBlur, onFocus, ref},\n reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n schemaType,\n } = props\n const client = useClient({apiVersion: '2022-01-01'})\n const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n\n const imageUpload = useCallback(\n (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {\n client.assets\n .upload('image', file)\n .then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`))\n .catch((e) => {\n console.error(e)\n onError(e.message)\n })\n },\n [client, imageUrl]\n )\n\n const mdeOptions: EasyMdeOptions = useMemo(() => {\n return {\n autofocus: false,\n spellChecker: false,\n sideBySideFullscreen: false,\n uploadImage: true,\n imageUploadFunction: imageUpload,\n toolbar: defaultMdeTools,\n status: false,\n ...mdeCustomOptions,\n }\n }, [imageUpload, mdeCustomOptions])\n\n const handleChange = useCallback(\n (newValue: string) => {\n onChange(PatchEvent.from(newValue ? set(newValue) : unset()))\n },\n [onChange]\n )\n\n const SimpleMdeReact = useSimpleMdeReact()\n\n return (\n <MarkdownInputStyles>\n {SimpleMdeReact && (\n <Suspense\n fallback={\n <Box padding={3}>\n <Text>Loading editor...</Text>\n </Box>\n }\n >\n <SimpleMdeReact\n {...reactMdeProps}\n ref={ref}\n value={value}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={onFocus}\n options={mdeOptions}\n spellCheck={false}\n />\n </Suspense>\n )}\n </MarkdownInputStyles>\n )\n}\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n /**\n * Used to create image url for any uploaded image.\n * The function will be invoked whenever an image is pasted or dragged into the\n * markdown editor, after upload completes.\n *\n * The default implementation uses\n * ```js\n * imageAsset => `${imageAsset.url}?w=450`\n * ```\n * ## Example\n * ```js\n * {\n * imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n * }\n * ```\n * @param imageAsset\n */\n imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n type: typeof markdownTypeName\n options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n markdown: MarkdownDefinition\n }\n}\n\nexport const markdownSchemaType = defineType({\n type: 'string',\n name: markdownTypeName,\n title: 'Markdown',\n components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n /**\n * When provided, will replace the default input component.\n *\n * Use this to customize MarkdownInput by wrapping it in a custom component,\n * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * via the `reactMdeProps` prop.\n *\n * ### Example\n *\n * ```tsx\n * // CustomMarkdownInput.tsx\n * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n *\n * export function CustomMarkdownInput(props) {\n * const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n * useMemo(() => {\n * return {\n * options: {\n * toolbar: ['bold', 'italic'],\n * // more options available, see:\n * // https://github.com/Ionaru/easy-markdown-editor#options-list\n * },\n * // more props available, see:\n * // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * }\n * }, [])\n *\n * return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n * }\n *\n * // studio.config.ts\n * markdownSchema({input: CustomMarkdownInput})\n * ```\n */\n input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n return {\n name: 'markdown-editor',\n schema: {\n types: [\n config && config.input\n ? {...markdownSchemaType, components: {input: config.input}}\n : markdownSchemaType,\n ],\n },\n }\n})\n"],"names":["MarkdownInputStyles","styled","Box","_templateObject","_taggedTemplateLiteral","_ref","theme","sanity","color","card","enabled","fg","_ref2","border","_ref3","_ref4","_ref5","selectable","primary","hovered","bg","_ref6","_ref7","_ref8","_ref9","SimpleMdeReact","lazy","useSimpleMdeReact","mounted","setMounted","useState","useEffect","requestAnimationFrame","defaultMdeTools","MarkdownInput","props","_a","value","onChange","elementProps","onBlur","onFocus","ref","reactMdeProps","options","mdeCustomOptions","schemaType","client","useClient","apiVersion","imageUrl","imageUpload","useCallback","file","onSuccess","onError","assets","upload","then","doc","concat","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","Suspense","fallback","padding","Text","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":"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"}
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
var _templateObject;
|
|
2
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
import { useClient, PatchEvent, set, unset, defineType, definePlugin } from 'sanity';
|
|
4
|
+
import { jsx } from 'react/jsx-runtime';
|
|
5
|
+
import { lazy, useState, useEffect, useCallback, useMemo, Suspense } from 'react';
|
|
6
|
+
import styled from 'styled-components';
|
|
7
|
+
import { Box, Text } from '@sanity/ui';
|
|
8
|
+
const MarkdownInputStyles = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n & .CodeMirror.CodeMirror {\n color: ", ";\n border-color: ", ";\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ", ";\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ", ";\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .editor-toolbar > * {\n color: ", ";\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ", ";\n }\n\n & .editor-preview {\n background-color: ", ";\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n"])), _ref => {
|
|
9
|
+
let {
|
|
10
|
+
theme
|
|
11
|
+
} = _ref;
|
|
12
|
+
return theme.sanity.color.card.enabled.fg;
|
|
13
|
+
}, _ref2 => {
|
|
14
|
+
let {
|
|
15
|
+
theme
|
|
16
|
+
} = _ref2;
|
|
17
|
+
return theme.sanity.color.card.enabled.border;
|
|
18
|
+
}, _ref3 => {
|
|
19
|
+
let {
|
|
20
|
+
theme
|
|
21
|
+
} = _ref3;
|
|
22
|
+
return theme.sanity.color.card.enabled.fg;
|
|
23
|
+
}, _ref4 => {
|
|
24
|
+
let {
|
|
25
|
+
theme
|
|
26
|
+
} = _ref4;
|
|
27
|
+
return theme.sanity.color.card.enabled.border;
|
|
28
|
+
}, _ref5 => {
|
|
29
|
+
let {
|
|
30
|
+
theme
|
|
31
|
+
} = _ref5;
|
|
32
|
+
return theme.sanity.color.selectable.primary.hovered.bg;
|
|
33
|
+
}, _ref6 => {
|
|
34
|
+
let {
|
|
35
|
+
theme
|
|
36
|
+
} = _ref6;
|
|
37
|
+
return theme.sanity.color.card.enabled.bg;
|
|
38
|
+
}, _ref7 => {
|
|
39
|
+
let {
|
|
40
|
+
theme
|
|
41
|
+
} = _ref7;
|
|
42
|
+
return theme.sanity.color.card.enabled.fg;
|
|
43
|
+
}, _ref8 => {
|
|
44
|
+
let {
|
|
45
|
+
theme
|
|
46
|
+
} = _ref8;
|
|
47
|
+
return theme.sanity.color.card.enabled.bg;
|
|
48
|
+
}, _ref9 => {
|
|
49
|
+
let {
|
|
50
|
+
theme
|
|
51
|
+
} = _ref9;
|
|
52
|
+
return theme.sanity.color.card.enabled.bg;
|
|
53
|
+
});
|
|
54
|
+
const SimpleMdeReact = lazy(() => import('react-simplemde-editor'));
|
|
55
|
+
function useSimpleMdeReact() {
|
|
56
|
+
const [mounted, setMounted] = useState(false);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
requestAnimationFrame(() => setMounted(true));
|
|
59
|
+
}, []);
|
|
60
|
+
return mounted ? SimpleMdeReact : null;
|
|
61
|
+
}
|
|
62
|
+
const defaultMdeTools = ["heading", "bold", "italic", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side"];
|
|
63
|
+
function MarkdownInput(props) {
|
|
64
|
+
var _a;
|
|
65
|
+
const {
|
|
66
|
+
value = "",
|
|
67
|
+
onChange,
|
|
68
|
+
elementProps: {
|
|
69
|
+
onBlur,
|
|
70
|
+
onFocus,
|
|
71
|
+
ref
|
|
72
|
+
},
|
|
73
|
+
reactMdeProps: {
|
|
74
|
+
options: mdeCustomOptions,
|
|
75
|
+
...reactMdeProps
|
|
76
|
+
} = {},
|
|
77
|
+
schemaType
|
|
78
|
+
} = props;
|
|
79
|
+
const client = useClient({
|
|
80
|
+
apiVersion: "2022-01-01"
|
|
81
|
+
});
|
|
82
|
+
const {
|
|
83
|
+
imageUrl
|
|
84
|
+
} = (_a = schemaType.options) != null ? _a : {};
|
|
85
|
+
const imageUpload = useCallback((file, onSuccess, onError) => {
|
|
86
|
+
client.assets.upload("image", file).then(doc => onSuccess(imageUrl ? imageUrl(doc) : "".concat(doc.url, "?w=450"))).catch(e => {
|
|
87
|
+
console.error(e);
|
|
88
|
+
onError(e.message);
|
|
89
|
+
});
|
|
90
|
+
}, [client, imageUrl]);
|
|
91
|
+
const mdeOptions = useMemo(() => {
|
|
92
|
+
return {
|
|
93
|
+
autofocus: false,
|
|
94
|
+
spellChecker: false,
|
|
95
|
+
sideBySideFullscreen: false,
|
|
96
|
+
uploadImage: true,
|
|
97
|
+
imageUploadFunction: imageUpload,
|
|
98
|
+
toolbar: defaultMdeTools,
|
|
99
|
+
status: false,
|
|
100
|
+
...mdeCustomOptions
|
|
101
|
+
};
|
|
102
|
+
}, [imageUpload, mdeCustomOptions]);
|
|
103
|
+
const handleChange = useCallback(newValue => {
|
|
104
|
+
onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
|
|
105
|
+
}, [onChange]);
|
|
106
|
+
const SimpleMdeReact = useSimpleMdeReact();
|
|
107
|
+
return /* @__PURE__ */jsx(MarkdownInputStyles, {
|
|
108
|
+
children: SimpleMdeReact && /* @__PURE__ */jsx(Suspense, {
|
|
109
|
+
fallback: /* @__PURE__ */jsx(Box, {
|
|
110
|
+
padding: 3,
|
|
111
|
+
children: /* @__PURE__ */jsx(Text, {
|
|
112
|
+
children: "Loading editor..."
|
|
113
|
+
})
|
|
114
|
+
}),
|
|
115
|
+
children: /* @__PURE__ */jsx(SimpleMdeReact, {
|
|
116
|
+
...reactMdeProps,
|
|
117
|
+
ref,
|
|
118
|
+
value,
|
|
119
|
+
onChange: handleChange,
|
|
120
|
+
onBlur,
|
|
121
|
+
onFocus,
|
|
122
|
+
options: mdeOptions,
|
|
123
|
+
spellCheck: false
|
|
124
|
+
})
|
|
125
|
+
})
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
const markdownTypeName = "markdown";
|
|
129
|
+
const markdownSchemaType = defineType({
|
|
130
|
+
type: "string",
|
|
131
|
+
name: markdownTypeName,
|
|
132
|
+
title: "Markdown",
|
|
133
|
+
components: {
|
|
134
|
+
input: MarkdownInput
|
|
135
|
+
}
|
|
136
|
+
});
|
|
137
|
+
const markdownSchema = definePlugin(config => {
|
|
138
|
+
return {
|
|
139
|
+
name: "markdown-editor",
|
|
140
|
+
schema: {
|
|
141
|
+
types: [config && config.input ? {
|
|
142
|
+
...markdownSchemaType,
|
|
143
|
+
components: {
|
|
144
|
+
input: config.input
|
|
145
|
+
}
|
|
146
|
+
} : markdownSchemaType]
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
});
|
|
150
|
+
export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType };
|
|
151
|
+
//# sourceMappingURL=plugin-ca10aa4c.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plugin-ca10aa4c.js","sources":["../../src/components/MarkdownInputStyles.tsx","../../src/components/useSimpleMdeReact.tsx","../../src/components/MarkdownInput.tsx","../../src/schema.ts","../../src/plugin.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport {Box} from '@sanity/ui'\n\nexport const MarkdownInputStyles = styled(Box)`\n & .CodeMirror.CodeMirror {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.selectable.primary.hovered.bg};\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-toolbar > * {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-preview {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n`\n","import {lazy, useEffect, useState} from 'react'\n\nexport const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))\n\nexport function useSimpleMdeReact() {\n const [mounted, setMounted] = useState(false)\n useEffect(() => {\n requestAnimationFrame(() => setMounted(true))\n }, [])\n\n return mounted ? SimpleMdeReact : null\n}\n","import {type Options as EasyMdeOptions} from 'easymde'\nimport React, {Suspense, useCallback, useMemo} from 'react'\n// dont import non-types here, it will break SSR on next\nimport type {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\nimport {useSimpleMdeReact} from './useSimpleMdeReact'\nimport {Box, Text} from '@sanity/ui'\n\nexport interface MarkdownInputProps extends StringInputProps {\n /**\n * These are passed along directly to\n *\n * Note: MarkdownInput sets certain reactMdeProps.options by default.\n * These will be merged with any custom options.\n * */\n reactMdeProps?: Omit<SimpleMDEReactProps, 'value' | 'onChange'>\n}\n\nexport const defaultMdeTools: EasyMdeOptions['toolbar'] = [\n 'heading',\n 'bold',\n 'italic',\n '|',\n 'quote',\n 'unordered-list',\n 'ordered-list',\n '|',\n 'link',\n 'image',\n 'code',\n '|',\n 'preview',\n 'side-by-side',\n]\n\nexport function MarkdownInput(props: MarkdownInputProps) {\n const {\n value = '',\n onChange,\n elementProps: {onBlur, onFocus, ref},\n reactMdeProps: {options: mdeCustomOptions, ...reactMdeProps} = {},\n schemaType,\n } = props\n const client = useClient({apiVersion: '2022-01-01'})\n const {imageUrl} = (schemaType.options as MarkdownOptions | undefined) ?? {}\n\n const imageUpload = useCallback(\n (file: File, onSuccess: (url: string) => void, onError: (error: string) => void) => {\n client.assets\n .upload('image', file)\n .then((doc) => onSuccess(imageUrl ? imageUrl(doc) : `${doc.url}?w=450`))\n .catch((e) => {\n console.error(e)\n onError(e.message)\n })\n },\n [client, imageUrl]\n )\n\n const mdeOptions: EasyMdeOptions = useMemo(() => {\n return {\n autofocus: false,\n spellChecker: false,\n sideBySideFullscreen: false,\n uploadImage: true,\n imageUploadFunction: imageUpload,\n toolbar: defaultMdeTools,\n status: false,\n ...mdeCustomOptions,\n }\n }, [imageUpload, mdeCustomOptions])\n\n const handleChange = useCallback(\n (newValue: string) => {\n onChange(PatchEvent.from(newValue ? set(newValue) : unset()))\n },\n [onChange]\n )\n\n const SimpleMdeReact = useSimpleMdeReact()\n\n return (\n <MarkdownInputStyles>\n {SimpleMdeReact && (\n <Suspense\n fallback={\n <Box padding={3}>\n <Text>Loading editor...</Text>\n </Box>\n }\n >\n <SimpleMdeReact\n {...reactMdeProps}\n ref={ref}\n value={value}\n onChange={handleChange}\n onBlur={onBlur}\n onFocus={onFocus}\n options={mdeOptions}\n spellCheck={false}\n />\n </Suspense>\n )}\n </MarkdownInputStyles>\n )\n}\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n /**\n * Used to create image url for any uploaded image.\n * The function will be invoked whenever an image is pasted or dragged into the\n * markdown editor, after upload completes.\n *\n * The default implementation uses\n * ```js\n * imageAsset => `${imageAsset.url}?w=450`\n * ```\n * ## Example\n * ```js\n * {\n * imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n * }\n * ```\n * @param imageAsset\n */\n imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n type: typeof markdownTypeName\n options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n markdown: MarkdownDefinition\n }\n}\n\nexport const markdownSchemaType = defineType({\n type: 'string',\n name: markdownTypeName,\n title: 'Markdown',\n components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n /**\n * When provided, will replace the default input component.\n *\n * Use this to customize MarkdownInput by wrapping it in a custom component,\n * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * via the `reactMdeProps` prop.\n *\n * ### Example\n *\n * ```tsx\n * // CustomMarkdownInput.tsx\n * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n *\n * export function CustomMarkdownInput(props) {\n * const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n * useMemo(() => {\n * return {\n * options: {\n * toolbar: ['bold', 'italic'],\n * // more options available, see:\n * // https://github.com/Ionaru/easy-markdown-editor#options-list\n * },\n * // more props available, see:\n * // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * }\n * }, [])\n *\n * return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n * }\n *\n * // studio.config.ts\n * markdownSchema({input: CustomMarkdownInput})\n * ```\n */\n input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n return {\n name: 'markdown-editor',\n schema: {\n types: [\n config && config.input\n ? {...markdownSchemaType, components: {input: config.input}}\n : markdownSchemaType,\n ],\n },\n }\n})\n"],"names":["MarkdownInputStyles","styled","Box","_templateObject","_taggedTemplateLiteral","_ref","theme","sanity","color","card","enabled","fg","_ref2","border","_ref3","_ref4","_ref5","selectable","primary","hovered","bg","_ref6","_ref7","_ref8","_ref9","SimpleMdeReact","lazy","useSimpleMdeReact","mounted","setMounted","useState","useEffect","requestAnimationFrame","defaultMdeTools","MarkdownInput","props","_a","value","onChange","elementProps","onBlur","onFocus","ref","reactMdeProps","options","mdeCustomOptions","schemaType","client","useClient","apiVersion","imageUrl","imageUpload","useCallback","file","onSuccess","onError","assets","upload","then","doc","concat","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","Suspense","fallback","padding","Text","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":"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"}
|
package/lib/index.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import {Options} from 'easymde'
|
|
|
4
4
|
import {Plugin as Plugin_2} from 'sanity'
|
|
5
5
|
import {ReactElement} from 'react'
|
|
6
6
|
import {SanityImageAssetDocument} from '@sanity/client'
|
|
7
|
-
import {SimpleMDEReactProps} from 'react-simplemde-editor'
|
|
7
|
+
import type {SimpleMDEReactProps} from 'react-simplemde-editor'
|
|
8
8
|
import {StringDefinition} from 'sanity'
|
|
9
9
|
import {StringInputProps} from 'sanity'
|
|
10
10
|
|
package/lib/index.esm.js
CHANGED
|
@@ -1,141 +1,3 @@
|
|
|
1
|
-
const _excluded = ["options"];
|
|
2
|
-
var _templateObject;
|
|
3
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
5
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
7
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
8
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
9
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
10
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
-
import { useClient, PatchEvent, set, unset, defineType, definePlugin } from 'sanity';
|
|
12
|
-
import { jsx } from 'react/jsx-runtime';
|
|
13
1
|
import 'easymde/dist/easymde.min.css';
|
|
14
|
-
|
|
15
|
-
import SimpleMdeReact from 'react-simplemde-editor';
|
|
16
|
-
import styled from 'styled-components';
|
|
17
|
-
import { Box } from '@sanity/ui';
|
|
18
|
-
const MarkdownInputStyles = styled(Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n & .CodeMirror.CodeMirror {\n color: ", ";\n border-color: ", ";\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ", ";\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ", ";\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .editor-toolbar > * {\n color: ", ";\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ", ";\n }\n\n & .editor-preview {\n background-color: ", ";\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n"])), _ref => {
|
|
19
|
-
let {
|
|
20
|
-
theme
|
|
21
|
-
} = _ref;
|
|
22
|
-
return theme.sanity.color.card.enabled.fg;
|
|
23
|
-
}, _ref2 => {
|
|
24
|
-
let {
|
|
25
|
-
theme
|
|
26
|
-
} = _ref2;
|
|
27
|
-
return theme.sanity.color.card.enabled.border;
|
|
28
|
-
}, _ref3 => {
|
|
29
|
-
let {
|
|
30
|
-
theme
|
|
31
|
-
} = _ref3;
|
|
32
|
-
return theme.sanity.color.card.enabled.fg;
|
|
33
|
-
}, _ref4 => {
|
|
34
|
-
let {
|
|
35
|
-
theme
|
|
36
|
-
} = _ref4;
|
|
37
|
-
return theme.sanity.color.card.enabled.border;
|
|
38
|
-
}, _ref5 => {
|
|
39
|
-
let {
|
|
40
|
-
theme
|
|
41
|
-
} = _ref5;
|
|
42
|
-
return theme.sanity.color.selectable.primary.hovered.bg;
|
|
43
|
-
}, _ref6 => {
|
|
44
|
-
let {
|
|
45
|
-
theme
|
|
46
|
-
} = _ref6;
|
|
47
|
-
return theme.sanity.color.card.enabled.bg;
|
|
48
|
-
}, _ref7 => {
|
|
49
|
-
let {
|
|
50
|
-
theme
|
|
51
|
-
} = _ref7;
|
|
52
|
-
return theme.sanity.color.card.enabled.fg;
|
|
53
|
-
}, _ref8 => {
|
|
54
|
-
let {
|
|
55
|
-
theme
|
|
56
|
-
} = _ref8;
|
|
57
|
-
return theme.sanity.color.card.enabled.bg;
|
|
58
|
-
}, _ref9 => {
|
|
59
|
-
let {
|
|
60
|
-
theme
|
|
61
|
-
} = _ref9;
|
|
62
|
-
return theme.sanity.color.card.enabled.bg;
|
|
63
|
-
});
|
|
64
|
-
const defaultMdeTools = ["heading", "bold", "italic", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side"];
|
|
65
|
-
function MarkdownInput(props) {
|
|
66
|
-
var _a;
|
|
67
|
-
const {
|
|
68
|
-
value = "",
|
|
69
|
-
onChange,
|
|
70
|
-
elementProps: {
|
|
71
|
-
onBlur,
|
|
72
|
-
onFocus,
|
|
73
|
-
ref
|
|
74
|
-
},
|
|
75
|
-
reactMdeProps: {
|
|
76
|
-
options: mdeCustomOptions
|
|
77
|
-
} = {},
|
|
78
|
-
schemaType
|
|
79
|
-
} = props,
|
|
80
|
-
reactMdeProps = _objectWithoutProperties(props.reactMdeProps, _excluded);
|
|
81
|
-
const client = useClient({
|
|
82
|
-
apiVersion: "2022-01-01"
|
|
83
|
-
});
|
|
84
|
-
const {
|
|
85
|
-
imageUrl
|
|
86
|
-
} = (_a = schemaType.options) != null ? _a : {};
|
|
87
|
-
const imageUpload = useCallback((file, onSuccess, onError) => {
|
|
88
|
-
client.assets.upload("image", file).then(doc => onSuccess(imageUrl ? imageUrl(doc) : "".concat(doc.url, "?w=450"))).catch(e => {
|
|
89
|
-
console.error(e);
|
|
90
|
-
onError(e.message);
|
|
91
|
-
});
|
|
92
|
-
}, [client, imageUrl]);
|
|
93
|
-
const mdeOptions = useMemo(() => {
|
|
94
|
-
return _objectSpread({
|
|
95
|
-
autofocus: false,
|
|
96
|
-
spellChecker: false,
|
|
97
|
-
sideBySideFullscreen: false,
|
|
98
|
-
uploadImage: true,
|
|
99
|
-
imageUploadFunction: imageUpload,
|
|
100
|
-
toolbar: defaultMdeTools,
|
|
101
|
-
status: false
|
|
102
|
-
}, mdeCustomOptions);
|
|
103
|
-
}, [imageUpload, mdeCustomOptions]);
|
|
104
|
-
const handleChange = useCallback(newValue => {
|
|
105
|
-
onChange(PatchEvent.from(newValue ? set(newValue) : unset()));
|
|
106
|
-
}, [onChange]);
|
|
107
|
-
return /* @__PURE__ */jsx(MarkdownInputStyles, {
|
|
108
|
-
children: /* @__PURE__ */jsx(SimpleMdeReact, _objectSpread(_objectSpread({}, reactMdeProps), {}, {
|
|
109
|
-
ref,
|
|
110
|
-
value,
|
|
111
|
-
onChange: handleChange,
|
|
112
|
-
onBlur,
|
|
113
|
-
onFocus,
|
|
114
|
-
options: mdeOptions,
|
|
115
|
-
spellCheck: false
|
|
116
|
-
}))
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
const markdownTypeName = "markdown";
|
|
120
|
-
const markdownSchemaType = defineType({
|
|
121
|
-
type: "string",
|
|
122
|
-
name: markdownTypeName,
|
|
123
|
-
title: "Markdown",
|
|
124
|
-
components: {
|
|
125
|
-
input: MarkdownInput
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
const markdownSchema = definePlugin(config => {
|
|
129
|
-
return {
|
|
130
|
-
name: "markdown-editor",
|
|
131
|
-
schema: {
|
|
132
|
-
types: [config && config.input ? _objectSpread(_objectSpread({}, markdownSchemaType), {}, {
|
|
133
|
-
components: {
|
|
134
|
-
input: config.input
|
|
135
|
-
}
|
|
136
|
-
}) : markdownSchemaType]
|
|
137
|
-
}
|
|
138
|
-
};
|
|
139
|
-
});
|
|
140
|
-
export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType };
|
|
2
|
+
export { MarkdownInput, defaultMdeTools, markdownSchema, markdownSchemaType } from './_chunks/plugin-ca10aa4c.js';
|
|
141
3
|
//# sourceMappingURL=index.esm.js.map
|
package/lib/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../src/components/MarkdownInputStyles.tsx","../src/components/MarkdownInput.tsx","../src/schema.ts","../src/plugin.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport {Box} from '@sanity/ui'\n\nexport const MarkdownInputStyles = styled(Box)`\n & .CodeMirror.CodeMirror {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.selectable.primary.hovered.bg};\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-toolbar > * {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-preview {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n`\n","import 'easymde/dist/easymde.min.css'\nimport {type Options as EasyMdeOptions} from 'easymde'\nimport React, {useCallback, useMemo} from 'react'\nimport SimpleMdeReact, {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\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 return (\n <MarkdownInputStyles>\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 </MarkdownInputStyles>\n )\n}\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n /**\n * Used to create image url for any uploaded image.\n * The function will be invoked whenever an image is pasted or dragged into the\n * markdown editor, after upload completes.\n *\n * The default implementation uses\n * ```js\n * imageAsset => `${imageAsset.url}?w=450`\n * ```\n * ## Example\n * ```js\n * {\n * imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n * }\n * ```\n * @param imageAsset\n */\n imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n type: typeof markdownTypeName\n options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n markdown: MarkdownDefinition\n }\n}\n\nexport const markdownSchemaType = defineType({\n type: 'string',\n name: markdownTypeName,\n title: 'Markdown',\n components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n /**\n * When provided, will replace the default input component.\n *\n * Use this to customize MarkdownInput by wrapping it in a custom component,\n * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * via the `reactMdeProps` prop.\n *\n * ### Example\n *\n * ```tsx\n * // CustomMarkdownInput.tsx\n * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n *\n * export function CustomMarkdownInput(props) {\n * const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n * useMemo(() => {\n * return {\n * options: {\n * toolbar: ['bold', 'italic'],\n * // more options available, see:\n * // https://github.com/Ionaru/easy-markdown-editor#options-list\n * },\n * // more props available, see:\n * // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * }\n * }, [])\n *\n * return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n * }\n *\n * // studio.config.ts\n * markdownSchema({input: CustomMarkdownInput})\n * ```\n */\n input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n return {\n name: 'markdown-editor',\n schema: {\n types: [\n config && config.input\n ? {...markdownSchemaType, components: {input: config.input}}\n : markdownSchemaType,\n ],\n },\n }\n})\n"],"names":["MarkdownInputStyles","styled","Box","theme","sanity","color","card","enabled","fg","border","selectable","primary","hovered","bg","defaultMdeTools","MarkdownInput","props","_a","value","onChange","elementProps","onBlur","onFocus","ref","reactMdeProps","options","mdeCustomOptions","schemaType","client","useClient","apiVersion","imageUrl","imageUpload","useCallback","file","onSuccess","onError","assets","upload","then","doc","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","SimpleMdeReact","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/lib/index.js
CHANGED
|
@@ -1,156 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const _excluded = ["options"];
|
|
4
|
-
var _templateObject;
|
|
5
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
8
|
-
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
|
|
9
|
-
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
10
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
11
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
13
3
|
Object.defineProperty(exports, '__esModule', {
|
|
14
4
|
value: true
|
|
15
5
|
});
|
|
16
|
-
var sanity = require('sanity');
|
|
17
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
18
6
|
require('easymde/dist/easymde.min.css');
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return e && typeof e === 'object' && 'default' in e ? e : {
|
|
25
|
-
default: e
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
var SimpleMdeReact__default = /*#__PURE__*/_interopDefaultCompat(SimpleMdeReact);
|
|
29
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
30
|
-
const MarkdownInputStyles = styled__default.default(ui.Box)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n & .CodeMirror.CodeMirror {\n color: ", ";\n border-color: ", ";\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ", ";\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ", ";\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ", ";\n }\n\n & .editor-toolbar > * {\n color: ", ";\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ", ";\n }\n\n & .editor-preview {\n background-color: ", ";\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n"])), _ref => {
|
|
31
|
-
let {
|
|
32
|
-
theme
|
|
33
|
-
} = _ref;
|
|
34
|
-
return theme.sanity.color.card.enabled.fg;
|
|
35
|
-
}, _ref2 => {
|
|
36
|
-
let {
|
|
37
|
-
theme
|
|
38
|
-
} = _ref2;
|
|
39
|
-
return theme.sanity.color.card.enabled.border;
|
|
40
|
-
}, _ref3 => {
|
|
41
|
-
let {
|
|
42
|
-
theme
|
|
43
|
-
} = _ref3;
|
|
44
|
-
return theme.sanity.color.card.enabled.fg;
|
|
45
|
-
}, _ref4 => {
|
|
46
|
-
let {
|
|
47
|
-
theme
|
|
48
|
-
} = _ref4;
|
|
49
|
-
return theme.sanity.color.card.enabled.border;
|
|
50
|
-
}, _ref5 => {
|
|
51
|
-
let {
|
|
52
|
-
theme
|
|
53
|
-
} = _ref5;
|
|
54
|
-
return theme.sanity.color.selectable.primary.hovered.bg;
|
|
55
|
-
}, _ref6 => {
|
|
56
|
-
let {
|
|
57
|
-
theme
|
|
58
|
-
} = _ref6;
|
|
59
|
-
return theme.sanity.color.card.enabled.bg;
|
|
60
|
-
}, _ref7 => {
|
|
61
|
-
let {
|
|
62
|
-
theme
|
|
63
|
-
} = _ref7;
|
|
64
|
-
return theme.sanity.color.card.enabled.fg;
|
|
65
|
-
}, _ref8 => {
|
|
66
|
-
let {
|
|
67
|
-
theme
|
|
68
|
-
} = _ref8;
|
|
69
|
-
return theme.sanity.color.card.enabled.bg;
|
|
70
|
-
}, _ref9 => {
|
|
71
|
-
let {
|
|
72
|
-
theme
|
|
73
|
-
} = _ref9;
|
|
74
|
-
return theme.sanity.color.card.enabled.bg;
|
|
75
|
-
});
|
|
76
|
-
const defaultMdeTools = ["heading", "bold", "italic", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "code", "|", "preview", "side-by-side"];
|
|
77
|
-
function MarkdownInput(props) {
|
|
78
|
-
var _a;
|
|
79
|
-
const {
|
|
80
|
-
value = "",
|
|
81
|
-
onChange,
|
|
82
|
-
elementProps: {
|
|
83
|
-
onBlur,
|
|
84
|
-
onFocus,
|
|
85
|
-
ref
|
|
86
|
-
},
|
|
87
|
-
reactMdeProps: {
|
|
88
|
-
options: mdeCustomOptions
|
|
89
|
-
} = {},
|
|
90
|
-
schemaType
|
|
91
|
-
} = props,
|
|
92
|
-
reactMdeProps = _objectWithoutProperties(props.reactMdeProps, _excluded);
|
|
93
|
-
const client = sanity.useClient({
|
|
94
|
-
apiVersion: "2022-01-01"
|
|
95
|
-
});
|
|
96
|
-
const {
|
|
97
|
-
imageUrl
|
|
98
|
-
} = (_a = schemaType.options) != null ? _a : {};
|
|
99
|
-
const imageUpload = react.useCallback((file, onSuccess, onError) => {
|
|
100
|
-
client.assets.upload("image", file).then(doc => onSuccess(imageUrl ? imageUrl(doc) : "".concat(doc.url, "?w=450"))).catch(e => {
|
|
101
|
-
console.error(e);
|
|
102
|
-
onError(e.message);
|
|
103
|
-
});
|
|
104
|
-
}, [client, imageUrl]);
|
|
105
|
-
const mdeOptions = react.useMemo(() => {
|
|
106
|
-
return _objectSpread({
|
|
107
|
-
autofocus: false,
|
|
108
|
-
spellChecker: false,
|
|
109
|
-
sideBySideFullscreen: false,
|
|
110
|
-
uploadImage: true,
|
|
111
|
-
imageUploadFunction: imageUpload,
|
|
112
|
-
toolbar: defaultMdeTools,
|
|
113
|
-
status: false
|
|
114
|
-
}, mdeCustomOptions);
|
|
115
|
-
}, [imageUpload, mdeCustomOptions]);
|
|
116
|
-
const handleChange = react.useCallback(newValue => {
|
|
117
|
-
onChange(sanity.PatchEvent.from(newValue ? sanity.set(newValue) : sanity.unset()));
|
|
118
|
-
}, [onChange]);
|
|
119
|
-
return /* @__PURE__ */jsxRuntime.jsx(MarkdownInputStyles, {
|
|
120
|
-
children: /* @__PURE__ */jsxRuntime.jsx(SimpleMdeReact__default.default, _objectSpread(_objectSpread({}, reactMdeProps), {}, {
|
|
121
|
-
ref,
|
|
122
|
-
value,
|
|
123
|
-
onChange: handleChange,
|
|
124
|
-
onBlur,
|
|
125
|
-
onFocus,
|
|
126
|
-
options: mdeOptions,
|
|
127
|
-
spellCheck: false
|
|
128
|
-
}))
|
|
129
|
-
});
|
|
130
|
-
}
|
|
131
|
-
const markdownTypeName = "markdown";
|
|
132
|
-
const markdownSchemaType = sanity.defineType({
|
|
133
|
-
type: "string",
|
|
134
|
-
name: markdownTypeName,
|
|
135
|
-
title: "Markdown",
|
|
136
|
-
components: {
|
|
137
|
-
input: MarkdownInput
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
|
-
const markdownSchema = sanity.definePlugin(config => {
|
|
141
|
-
return {
|
|
142
|
-
name: "markdown-editor",
|
|
143
|
-
schema: {
|
|
144
|
-
types: [config && config.input ? _objectSpread(_objectSpread({}, markdownSchemaType), {}, {
|
|
145
|
-
components: {
|
|
146
|
-
input: config.input
|
|
147
|
-
}
|
|
148
|
-
}) : markdownSchemaType]
|
|
149
|
-
}
|
|
150
|
-
};
|
|
151
|
-
});
|
|
152
|
-
exports.MarkdownInput = MarkdownInput;
|
|
153
|
-
exports.defaultMdeTools = defaultMdeTools;
|
|
154
|
-
exports.markdownSchema = markdownSchema;
|
|
155
|
-
exports.markdownSchemaType = markdownSchemaType;
|
|
7
|
+
var plugin = require('./_chunks/plugin-b7a179e6.js');
|
|
8
|
+
exports.MarkdownInput = plugin.MarkdownInput;
|
|
9
|
+
exports.defaultMdeTools = plugin.defaultMdeTools;
|
|
10
|
+
exports.markdownSchema = plugin.markdownSchema;
|
|
11
|
+
exports.markdownSchemaType = plugin.markdownSchemaType;
|
|
156
12
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/components/MarkdownInputStyles.tsx","../src/components/MarkdownInput.tsx","../src/schema.ts","../src/plugin.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport {Box} from '@sanity/ui'\n\nexport const MarkdownInputStyles = styled(Box)`\n & .CodeMirror.CodeMirror {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n background-color: inherit;\n }\n\n & .cm-s-easymde .CodeMirror-cursor {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar,\n .editor-preview-side {\n border-color: ${({theme}) => theme.sanity.color.card.enabled.border};\n }\n\n & .CodeMirror-focused .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.selectable.primary.hovered.bg};\n }\n\n & .CodeMirror-selected.CodeMirror-selected.CodeMirror-selected {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-toolbar > * {\n color: ${({theme}) => theme.sanity.color.card.enabled.fg};\n }\n\n & .editor-toolbar > .active,\n .editor-toolbar > button:hover,\n .editor-preview pre,\n .cm-s-easymde .cm-comment {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n }\n\n & .editor-preview {\n background-color: ${({theme}) => theme.sanity.color.card.enabled.bg};\n\n & h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: revert;\n }\n\n & ul,\n li {\n list-style: revert;\n padding: revert;\n }\n\n & a {\n text-decoration: revert;\n }\n }\n`\n","import 'easymde/dist/easymde.min.css'\nimport {type Options as EasyMdeOptions} from 'easymde'\nimport React, {useCallback, useMemo} from 'react'\nimport SimpleMdeReact, {SimpleMDEReactProps} from 'react-simplemde-editor'\nimport {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'\nimport {MarkdownOptions} from '../schema'\nimport {MarkdownInputStyles} from './MarkdownInputStyles'\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 return (\n <MarkdownInputStyles>\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 </MarkdownInputStyles>\n )\n}\n","import {defineType, StringDefinition} from 'sanity'\nimport {MarkdownInput} from './components/MarkdownInput'\nimport {SanityImageAssetDocument} from '@sanity/client'\n\nexport const markdownTypeName = 'markdown' as const\n\nexport interface MarkdownOptions {\n /**\n * Used to create image url for any uploaded image.\n * The function will be invoked whenever an image is pasted or dragged into the\n * markdown editor, after upload completes.\n *\n * The default implementation uses\n * ```js\n * imageAsset => `${imageAsset.url}?w=450`\n * ```\n * ## Example\n * ```js\n * {\n * imageUrl: imageAsset => `${imageAsset.url}?w=400&h=400`\n * }\n * ```\n * @param imageAsset\n */\n imageUrl?: (imageAsset: SanityImageAssetDocument) => string\n}\n\n/**\n * @public\n */\nexport interface MarkdownDefinition extends Omit<StringDefinition, 'type' | 'fields' | 'options'> {\n type: typeof markdownTypeName\n options?: MarkdownOptions\n}\n\ndeclare module '@sanity/types' {\n // makes type: 'markdown' narrow correctly when using defineType/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n markdown: MarkdownDefinition\n }\n}\n\nexport const markdownSchemaType = defineType({\n type: 'string',\n name: markdownTypeName,\n title: 'Markdown',\n components: {input: MarkdownInput},\n})\n","import {definePlugin, StringInputProps} from 'sanity'\nimport {markdownSchemaType} from './schema'\nimport {ReactElement} from 'react'\n\nexport interface MarkdownConfig {\n /**\n * When provided, will replace the default input component.\n *\n * Use this to customize MarkdownInput by wrapping it in a custom component,\n * and provide any custom props for https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * via the `reactMdeProps` prop.\n *\n * ### Example\n *\n * ```tsx\n * // CustomMarkdownInput.tsx\n * import { MarkdownInput, MarkdownInputProps } from 'sanity-plugin-markdown'\n *\n * export function CustomMarkdownInput(props) {\n * const reactMdeProps: MarkdownInputProps['reactMdeProps'] =\n * useMemo(() => {\n * return {\n * options: {\n * toolbar: ['bold', 'italic'],\n * // more options available, see:\n * // https://github.com/Ionaru/easy-markdown-editor#options-list\n * },\n * // more props available, see:\n * // https://github.com/RIP21/react-simplemde-editor#react-simplemde-easymde-markdown-editor\n * }\n * }, [])\n *\n * return <MarkdownInput {...props} reactMdeProps={reactMdeProps} />\n * }\n *\n * // studio.config.ts\n * markdownSchema({input: CustomMarkdownInput})\n * ```\n */\n input?: (props: StringInputProps) => ReactElement\n}\n\nexport const markdownSchema = definePlugin((config: MarkdownConfig | void) => {\n return {\n name: 'markdown-editor',\n schema: {\n types: [\n config && config.input\n ? {...markdownSchemaType, components: {input: config.input}}\n : markdownSchemaType,\n ],\n },\n }\n})\n"],"names":["MarkdownInputStyles","styled","Box","theme","sanity","color","card","enabled","fg","border","selectable","primary","hovered","bg","defaultMdeTools","MarkdownInput","props","_a","value","onChange","elementProps","onBlur","onFocus","ref","reactMdeProps","options","mdeCustomOptions","schemaType","client","useClient","apiVersion","imageUrl","imageUpload","useCallback","file","onSuccess","onError","assets","upload","then","doc","url","catch","e","console","error","message","mdeOptions","useMemo","autofocus","spellChecker","sideBySideFullscreen","uploadImage","imageUploadFunction","toolbar","status","handleChange","newValue","PatchEvent","from","set","unset","jsx","children","SimpleMdeReact","spellCheck","markdownTypeName","markdownSchemaType","defineType","type","name","title","components","input","markdownSchema","definePlugin","config","schema","types"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indexNext.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/indexNext.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var plugin = require('./_chunks/plugin-b7a179e6.js');
|
|
7
|
+
exports.MarkdownInput = plugin.MarkdownInput;
|
|
8
|
+
exports.defaultMdeTools = plugin.defaultMdeTools;
|
|
9
|
+
exports.markdownSchema = plugin.markdownSchema;
|
|
10
|
+
exports.markdownSchemaType = plugin.markdownSchemaType;
|
|
11
|
+
//# sourceMappingURL=indexNext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indexNext.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sanity-plugin-markdown",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "Markdown fields in Sanity Studio. Supports Github flavored Markdown and image uploads.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sanity",
|
|
@@ -23,16 +23,30 @@
|
|
|
23
23
|
".": {
|
|
24
24
|
"types": "./lib/index.d.ts",
|
|
25
25
|
"source": "./src/index.ts",
|
|
26
|
-
"import": "./lib/index.esm.js",
|
|
27
26
|
"require": "./lib/index.js",
|
|
27
|
+
"import": "./lib/index.esm.js",
|
|
28
28
|
"default": "./lib/index.esm.js"
|
|
29
29
|
},
|
|
30
|
+
"./next": {
|
|
31
|
+
"types": "./lib/index.d.ts",
|
|
32
|
+
"source": "./src/indexNext.ts",
|
|
33
|
+
"require": "./lib/indexNext.js",
|
|
34
|
+
"import": "./lib/indexNext.esm.js",
|
|
35
|
+
"default": "./lib/indexNext.esm.js"
|
|
36
|
+
},
|
|
30
37
|
"./package.json": "./package.json"
|
|
31
38
|
},
|
|
32
39
|
"main": "./lib/index.js",
|
|
33
40
|
"module": "./lib/index.esm.js",
|
|
34
41
|
"source": "./src/index.ts",
|
|
35
42
|
"types": "./lib/index.d.ts",
|
|
43
|
+
"typesVersions": {
|
|
44
|
+
"*": {
|
|
45
|
+
"next": [
|
|
46
|
+
"./lib/index.d.ts"
|
|
47
|
+
]
|
|
48
|
+
}
|
|
49
|
+
},
|
|
36
50
|
"files": [
|
|
37
51
|
"lib",
|
|
38
52
|
"sanity.json",
|
|
@@ -59,8 +73,8 @@
|
|
|
59
73
|
"devDependencies": {
|
|
60
74
|
"@commitlint/cli": "^17.2.0",
|
|
61
75
|
"@commitlint/config-conventional": "^17.2.0",
|
|
62
|
-
"@sanity/pkg-utils": "^2.
|
|
63
|
-
"@sanity/plugin-kit": "^3.1.
|
|
76
|
+
"@sanity/pkg-utils": "^2.2.6",
|
|
77
|
+
"@sanity/plugin-kit": "^3.1.7",
|
|
64
78
|
"@sanity/semantic-release-preset": "^2.0.2",
|
|
65
79
|
"@types/react": "^18.0.26",
|
|
66
80
|
"@types/styled-components": "^5.1.26",
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import 'easymde/dist/easymde.min.css'
|
|
2
1
|
import {type Options as EasyMdeOptions} from 'easymde'
|
|
3
|
-
import React, {useCallback, useMemo} from 'react'
|
|
4
|
-
import
|
|
2
|
+
import React, {Suspense, useCallback, useMemo} from 'react'
|
|
3
|
+
// dont import non-types here, it will break SSR on next
|
|
4
|
+
import type {SimpleMDEReactProps} from 'react-simplemde-editor'
|
|
5
5
|
import {PatchEvent, set, StringInputProps, unset, useClient} from 'sanity'
|
|
6
6
|
import {MarkdownOptions} from '../schema'
|
|
7
7
|
import {MarkdownInputStyles} from './MarkdownInputStyles'
|
|
8
|
+
import {useSimpleMdeReact} from './useSimpleMdeReact'
|
|
9
|
+
import {Box, Text} from '@sanity/ui'
|
|
8
10
|
|
|
9
11
|
export interface MarkdownInputProps extends StringInputProps {
|
|
10
12
|
/**
|
|
@@ -77,18 +79,30 @@ export function MarkdownInput(props: MarkdownInputProps) {
|
|
|
77
79
|
[onChange]
|
|
78
80
|
)
|
|
79
81
|
|
|
82
|
+
const SimpleMdeReact = useSimpleMdeReact()
|
|
83
|
+
|
|
80
84
|
return (
|
|
81
85
|
<MarkdownInputStyles>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
86
|
+
{SimpleMdeReact && (
|
|
87
|
+
<Suspense
|
|
88
|
+
fallback={
|
|
89
|
+
<Box padding={3}>
|
|
90
|
+
<Text>Loading editor...</Text>
|
|
91
|
+
</Box>
|
|
92
|
+
}
|
|
93
|
+
>
|
|
94
|
+
<SimpleMdeReact
|
|
95
|
+
{...reactMdeProps}
|
|
96
|
+
ref={ref}
|
|
97
|
+
value={value}
|
|
98
|
+
onChange={handleChange}
|
|
99
|
+
onBlur={onBlur}
|
|
100
|
+
onFocus={onFocus}
|
|
101
|
+
options={mdeOptions}
|
|
102
|
+
spellCheck={false}
|
|
103
|
+
/>
|
|
104
|
+
</Suspense>
|
|
105
|
+
)}
|
|
92
106
|
</MarkdownInputStyles>
|
|
93
107
|
)
|
|
94
108
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {lazy, useEffect, useState} from 'react'
|
|
2
|
+
|
|
3
|
+
export const SimpleMdeReact = lazy(() => import('react-simplemde-editor'))
|
|
4
|
+
|
|
5
|
+
export function useSimpleMdeReact() {
|
|
6
|
+
const [mounted, setMounted] = useState(false)
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
requestAnimationFrame(() => setMounted(true))
|
|
9
|
+
}, [])
|
|
10
|
+
|
|
11
|
+
return mounted ? SimpleMdeReact : null
|
|
12
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
export {MarkdownInput, defaultMdeTools, type MarkdownInputProps} from './components/MarkdownInput'
|
|
1
|
+
import 'easymde/dist/easymde.min.css'
|
|
3
2
|
|
|
4
|
-
export
|
|
3
|
+
export * from './commonExports'
|
package/src/indexNext.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './commonExports'
|