@valkyrianlabs/payload-markdown 1.3.1 → 1.3.3
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 +4 -4
- package/package.json +10 -9
- package/dist/blocks/MarkdownBlock/types.d.js +0 -3
- package/dist/blocks/MarkdownBlock/types.d.js.map +0 -1
- package/dist/components/MarkdownRenderer/index.module.css +0 -45
- package/dist/components/MarkdownRenderer/index.module.scss +0 -43
- package/dist/components/MarkdownRenderer/types.d.js +0 -5
- package/dist/components/MarkdownRenderer/types.d.js.map +0 -1
- package/dist/core/plugins/remarkLayoutSentinels.d.ts +0 -3
- package/dist/core/plugins/remarkLayoutSentinels.js +0 -184
- package/dist/core/plugins/remarkLayoutSentinels.js.map +0 -1
- package/dist/core/plugins/remarkNormalizeLayoutSyntax.d.ts +0 -3
- package/dist/core/types.d.js +0 -7
- package/dist/core/types.d.js.map +0 -1
- package/dist/core/types.d.ts +0 -238
- package/dist/core/types.js +0 -5
- package/dist/core/types.js.map +0 -1
- package/dist/editor/MarkdownCodeMirror.d.ts +0 -8
- package/dist/editor/MarkdownCodeMirror.js +0 -74
- package/dist/editor/MarkdownCodeMirror.js.map +0 -1
- package/dist/field/BlocksParams/config.d.ts +0 -7
- package/dist/field/BlocksParams/config.js +0 -149
- package/dist/field/BlocksParams/config.js.map +0 -1
- package/dist/field/CodeBlock/config.d.ts +0 -7
- package/dist/field/CodeBlock/config.js +0 -321
- package/dist/field/CodeBlock/config.js.map +0 -1
- package/dist/field/CodeBlockParams/config.d.ts +0 -7
- package/dist/field/CodeBlockParams/config.js +0 -321
- package/dist/field/CodeBlockParams/config.js.map +0 -1
- package/dist/field/TailwindField/config.d.ts +0 -9
- package/dist/field/TailwindField/config.js +0 -13
- package/dist/field/TailwindField/config.js.map +0 -1
- package/dist/types.d.js +0 -3
- package/dist/types.d.js.map +0 -1
package/dist/core/types.d.ts
DELETED
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @import {} from 'mdast-util-directive'
|
|
3
|
-
*/
|
|
4
|
-
import type { JSX, ReactNode } from 'react';
|
|
5
|
-
import 'mdast-util-directive';
|
|
6
|
-
declare module 'mdast-util-directive' {
|
|
7
|
-
interface ContainerDirectiveData {
|
|
8
|
-
vlCellHeadingDepth?: number;
|
|
9
|
-
vlParentHeadingDepth?: number;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
export type MarkdownRendererScope = 'blocks' | 'field';
|
|
13
|
-
/**
|
|
14
|
-
* Options that control how fenced code blocks are rendered inside markdown content.
|
|
15
|
-
*
|
|
16
|
-
* By default, code blocks use the plugin's enhanced rendering mode:
|
|
17
|
-
* - `enhancedCodeBlocks` defaults to `true`
|
|
18
|
-
* - `lineNumbers` defaults to `true`
|
|
19
|
-
* - `theme` defaults to `'github-dark'`
|
|
20
|
-
*
|
|
21
|
-
* When enhanced rendering is enabled, the plugin applies its normalized code block
|
|
22
|
-
* pipeline on top of Shiki output. This includes layout cleanup, background
|
|
23
|
-
* normalization, and support for features like line numbers.
|
|
24
|
-
*
|
|
25
|
-
* When enhanced rendering is disabled, code blocks are rendered closer to raw
|
|
26
|
-
* Shiki output and plugin-specific enhancements are bypassed.
|
|
27
|
-
*
|
|
28
|
-
* These options are passed through the markdown rendering pipeline and primarily
|
|
29
|
-
* affect Shiki-rendered code fences.
|
|
30
|
-
*/
|
|
31
|
-
export type RenderMarkdownOptions = {
|
|
32
|
-
/**
|
|
33
|
-
* Whether to apply the plugin's enhanced code block rendering pipeline.
|
|
34
|
-
*
|
|
35
|
-
* Defaults to `true`.
|
|
36
|
-
*
|
|
37
|
-
* When enabled, the renderer performs structural and visual normalization on
|
|
38
|
-
* Shiki output to produce a consistent, content-focused appearance.
|
|
39
|
-
*
|
|
40
|
-
* When disabled, code blocks are rendered closer to raw Shiki output.
|
|
41
|
-
*/
|
|
42
|
-
enhancedCodeBlocks?: boolean;
|
|
43
|
-
/**
|
|
44
|
-
* An optional list of language identifiers to load for Shiki syntax highlighting.
|
|
45
|
-
*
|
|
46
|
-
* By default, the plugin loads a core set of popular languages. You can replace
|
|
47
|
-
* that set entirely or extend it using spread syntax:
|
|
48
|
-
*
|
|
49
|
-
* ```ts
|
|
50
|
-
* options: {
|
|
51
|
-
* langs: [...DEFAULT_CODE_LANGS, 'latex']
|
|
52
|
-
* }
|
|
53
|
-
* ```
|
|
54
|
-
*/
|
|
55
|
-
langs?: string[];
|
|
56
|
-
/**
|
|
57
|
-
* Whether to show line numbers for fenced code blocks.
|
|
58
|
-
*
|
|
59
|
-
* Defaults to `true` when `enhancedCodeBlocks` is enabled.
|
|
60
|
-
*
|
|
61
|
-
* Line numbers require the enhanced rendering pipeline and are automatically
|
|
62
|
-
* disabled when `enhancedCodeBlocks` is set to `false`.
|
|
63
|
-
*/
|
|
64
|
-
lineNumbers?: boolean;
|
|
65
|
-
/**
|
|
66
|
-
* The Shiki theme to use for syntax highlighting.
|
|
67
|
-
*
|
|
68
|
-
* Defaults to `'github-dark'`.
|
|
69
|
-
*
|
|
70
|
-
* The plugin's enhanced renderer is tuned around its default theme. When using a
|
|
71
|
-
* non-default theme:
|
|
72
|
-
*
|
|
73
|
-
* - `enhancedCodeBlocks: true` opts into the plugin's normalized rendering pipeline
|
|
74
|
-
* - `enhancedCodeBlocks: false` preserves the theme's native appearance more closely
|
|
75
|
-
*
|
|
76
|
-
* This allows you to choose between a more controlled presentation and a more
|
|
77
|
-
* theme-faithful rendering mode.
|
|
78
|
-
*/
|
|
79
|
-
theme?: string;
|
|
80
|
-
};
|
|
81
|
-
/**
|
|
82
|
-
* The result of compiling markdown into sanitized HTML.
|
|
83
|
-
*/
|
|
84
|
-
export type RenderMarkdownResult = {
|
|
85
|
-
/**
|
|
86
|
-
* The rendered HTML output.
|
|
87
|
-
*/
|
|
88
|
-
html: string;
|
|
89
|
-
/**
|
|
90
|
-
* Non-fatal warnings produced during rendering.
|
|
91
|
-
*/
|
|
92
|
-
warnings: string[];
|
|
93
|
-
};
|
|
94
|
-
/**
|
|
95
|
-
* Preset visual styles for rendered markdown content.
|
|
96
|
-
*/
|
|
97
|
-
export type MarkdownVariant = 'blog' | 'compact' | 'docs' | 'unstyled';
|
|
98
|
-
/**
|
|
99
|
-
* Preset typography sizes for rendered markdown content.
|
|
100
|
-
*/
|
|
101
|
-
export type MarkdownSize = 'lg' | 'md' | 'sm';
|
|
102
|
-
/**
|
|
103
|
-
* Core markdown presentation configuration.
|
|
104
|
-
*
|
|
105
|
-
* This type represents the configurable styling and behavior layer that can be
|
|
106
|
-
* sourced from plugin defaults, globals, collection defaults, or block-level
|
|
107
|
-
* overrides. It intentionally excludes runtime-only renderer props such as
|
|
108
|
-
* `markdown`, `as`, and fallback nodes.
|
|
109
|
-
*/
|
|
110
|
-
export type MarkdownConfig = {
|
|
111
|
-
/**
|
|
112
|
-
* Additional classes applied to the rendered markdown element itself.
|
|
113
|
-
*/
|
|
114
|
-
className?: string;
|
|
115
|
-
/**
|
|
116
|
-
* Additional classes applied to column elements within the rendered markdown, if applicable.
|
|
117
|
-
*/
|
|
118
|
-
columnClassName?: string;
|
|
119
|
-
/**
|
|
120
|
-
* Whether to apply horizontal gutter padding to the outer wrapper.
|
|
121
|
-
*
|
|
122
|
-
* Defaults to `false`.
|
|
123
|
-
*/
|
|
124
|
-
enableGutter?: boolean;
|
|
125
|
-
/**
|
|
126
|
-
* Whether fenced code blocks should extend beyond the normal content width
|
|
127
|
-
* on larger screens.
|
|
128
|
-
*
|
|
129
|
-
* Defaults to `false`.
|
|
130
|
-
*/
|
|
131
|
-
fullBleedCode?: boolean;
|
|
132
|
-
/**
|
|
133
|
-
* Optional content rendered above the markdown body.
|
|
134
|
-
*/
|
|
135
|
-
lead?: ReactNode;
|
|
136
|
-
/**
|
|
137
|
-
* Whether heading colors should be slightly muted.
|
|
138
|
-
*
|
|
139
|
-
* Defaults to `false`.
|
|
140
|
-
*/
|
|
141
|
-
mutedHeadings?: boolean;
|
|
142
|
-
/**
|
|
143
|
-
* Options that control fenced code block rendering.
|
|
144
|
-
*/
|
|
145
|
-
options?: RenderMarkdownOptions;
|
|
146
|
-
/**
|
|
147
|
-
* Additional classes applied to section elements within the rendered markdown, if applicable.
|
|
148
|
-
*/
|
|
149
|
-
sectionClassName?: string;
|
|
150
|
-
/**
|
|
151
|
-
* Typography size preset for the rendered markdown.
|
|
152
|
-
*
|
|
153
|
-
* Defaults to `'lg'`.
|
|
154
|
-
*/
|
|
155
|
-
size?: MarkdownSize;
|
|
156
|
-
/**
|
|
157
|
-
* Visual style preset for the rendered markdown.
|
|
158
|
-
*
|
|
159
|
-
* Defaults to `'blog'`.
|
|
160
|
-
*/
|
|
161
|
-
variant?: MarkdownVariant;
|
|
162
|
-
/**
|
|
163
|
-
* Additional classes applied to the outer wrapper element.
|
|
164
|
-
*/
|
|
165
|
-
wrapperClassName?: string;
|
|
166
|
-
};
|
|
167
|
-
/**
|
|
168
|
-
* Runtime-only props shared by markdown renderer components.
|
|
169
|
-
*/
|
|
170
|
-
export type BaseMarkdownRendererProps = {
|
|
171
|
-
/**
|
|
172
|
-
* The HTML tag used for the rendered markdown container.
|
|
173
|
-
*
|
|
174
|
-
* Defaults to `'article'`.
|
|
175
|
-
*/
|
|
176
|
-
as?: keyof JSX.IntrinsicElements;
|
|
177
|
-
/**
|
|
178
|
-
* Content rendered when the markdown input is empty or missing.
|
|
179
|
-
*/
|
|
180
|
-
emptyFallback?: ReactNode;
|
|
181
|
-
/**
|
|
182
|
-
* Content rendered when markdown compilation fails and a fallback is desired.
|
|
183
|
-
*/
|
|
184
|
-
errorFallback?: ReactNode;
|
|
185
|
-
/**
|
|
186
|
-
* The markdown source string to render.
|
|
187
|
-
*/
|
|
188
|
-
markdown?: null | string;
|
|
189
|
-
};
|
|
190
|
-
/**
|
|
191
|
-
* Props for the main markdown renderer component.
|
|
192
|
-
*
|
|
193
|
-
* This merges persisted/configurable markdown presentation settings with the
|
|
194
|
-
* runtime-only rendering props required by the component itself.
|
|
195
|
-
*/
|
|
196
|
-
export type MarkdownRendererProps = {
|
|
197
|
-
collectionSlug?: string;
|
|
198
|
-
scope?: MarkdownRendererScope;
|
|
199
|
-
} & BaseMarkdownRendererProps & MarkdownConfig;
|
|
200
|
-
/**
|
|
201
|
-
* Options available while rendering an individual fenced code block.
|
|
202
|
-
*/
|
|
203
|
-
export interface CodeBlockOptions extends RenderMarkdownOptions {
|
|
204
|
-
/**
|
|
205
|
-
* The parsed language identifier for the fenced code block, if present.
|
|
206
|
-
*/
|
|
207
|
-
lang?: string;
|
|
208
|
-
}
|
|
209
|
-
/**
|
|
210
|
-
* Stored Payload block data for a markdown block instance.
|
|
211
|
-
*/
|
|
212
|
-
export interface MarkdownBlockData {
|
|
213
|
-
/**
|
|
214
|
-
* Optional block display name assigned by Payload.
|
|
215
|
-
*/
|
|
216
|
-
blockName?: null | string;
|
|
217
|
-
/**
|
|
218
|
-
* The Payload block slug.
|
|
219
|
-
*/
|
|
220
|
-
blockType: 'vlMdBlock';
|
|
221
|
-
/**
|
|
222
|
-
* Markdown source content for this block.
|
|
223
|
-
*/
|
|
224
|
-
content: string;
|
|
225
|
-
/**
|
|
226
|
-
* Optional Payload-generated block identifier.
|
|
227
|
-
*/
|
|
228
|
-
id?: null | string;
|
|
229
|
-
}
|
|
230
|
-
/**
|
|
231
|
-
* Props for the markdown block component wrapper.
|
|
232
|
-
*/
|
|
233
|
-
export interface MarkdownBlockProps extends MarkdownBlockData {
|
|
234
|
-
/**
|
|
235
|
-
* The slug of the collection this block is rendered within, if applicable.
|
|
236
|
-
*/
|
|
237
|
-
collectionSlug?: string;
|
|
238
|
-
}
|
package/dist/core/types.js
DELETED
package/dist/core/types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/types.ts"],"sourcesContent":["/**\n * @import {} from 'mdast-util-directive'\n */\n\nimport type { JSX, ReactNode } from 'react'\n\nimport 'mdast-util-directive'\n\ndeclare module 'mdast-util-directive' {\n interface ContainerDirectiveData {\n vlCellHeadingDepth?: number\n vlParentHeadingDepth?: number\n }\n}\n\nexport type MarkdownRendererScope = 'blocks' | 'field'\n\n/**\n * Options that control how fenced code blocks are rendered inside markdown content.\n *\n * By default, code blocks use the plugin's enhanced rendering mode:\n * - `enhancedCodeBlocks` defaults to `true`\n * - `lineNumbers` defaults to `true`\n * - `theme` defaults to `'github-dark'`\n *\n * When enhanced rendering is enabled, the plugin applies its normalized code block\n * pipeline on top of Shiki output. This includes layout cleanup, background\n * normalization, and support for features like line numbers.\n *\n * When enhanced rendering is disabled, code blocks are rendered closer to raw\n * Shiki output and plugin-specific enhancements are bypassed.\n *\n * These options are passed through the markdown rendering pipeline and primarily\n * affect Shiki-rendered code fences.\n */\nexport type RenderMarkdownOptions = {\n /**\n * Whether to apply the plugin's enhanced code block rendering pipeline.\n *\n * Defaults to `true`.\n *\n * When enabled, the renderer performs structural and visual normalization on\n * Shiki output to produce a consistent, content-focused appearance.\n *\n * When disabled, code blocks are rendered closer to raw Shiki output.\n */\n enhancedCodeBlocks?: boolean\n\n /**\n * An optional list of language identifiers to load for Shiki syntax highlighting.\n *\n * By default, the plugin loads a core set of popular languages. You can replace\n * that set entirely or extend it using spread syntax:\n *\n * ```ts\n * options: {\n * langs: [...DEFAULT_CODE_LANGS, 'latex']\n * }\n * ```\n */\n langs?: string[]\n\n /**\n * Whether to show line numbers for fenced code blocks.\n *\n * Defaults to `true` when `enhancedCodeBlocks` is enabled.\n *\n * Line numbers require the enhanced rendering pipeline and are automatically\n * disabled when `enhancedCodeBlocks` is set to `false`.\n */\n lineNumbers?: boolean\n\n /**\n * The Shiki theme to use for syntax highlighting.\n *\n * Defaults to `'github-dark'`.\n *\n * The plugin's enhanced renderer is tuned around its default theme. When using a\n * non-default theme:\n *\n * - `enhancedCodeBlocks: true` opts into the plugin's normalized rendering pipeline\n * - `enhancedCodeBlocks: false` preserves the theme's native appearance more closely\n *\n * This allows you to choose between a more controlled presentation and a more\n * theme-faithful rendering mode.\n */\n theme?: string\n}\n\n/**\n * The result of compiling markdown into sanitized HTML.\n */\nexport type RenderMarkdownResult = {\n /**\n * The rendered HTML output.\n */\n html: string\n\n /**\n * Non-fatal warnings produced during rendering.\n */\n warnings: string[]\n}\n\n/**\n * Preset visual styles for rendered markdown content.\n */\nexport type MarkdownVariant = 'blog' | 'compact' | 'docs' | 'unstyled'\n\n/**\n * Preset typography sizes for rendered markdown content.\n */\nexport type MarkdownSize = 'lg' | 'md' | 'sm'\n\n/**\n * Core markdown presentation configuration.\n *\n * This type represents the configurable styling and behavior layer that can be\n * sourced from plugin defaults, globals, collection defaults, or block-level\n * overrides. It intentionally excludes runtime-only renderer props such as\n * `markdown`, `as`, and fallback nodes.\n */\nexport type MarkdownConfig = {\n /**\n * Additional classes applied to the rendered markdown element itself.\n */\n className?: string\n\n /**\n * Additional classes applied to column elements within the rendered markdown, if applicable.\n */\n columnClassName?: string\n\n /**\n * Whether to apply horizontal gutter padding to the outer wrapper.\n *\n * Defaults to `false`.\n */\n enableGutter?: boolean\n\n /**\n * Whether fenced code blocks should extend beyond the normal content width\n * on larger screens.\n *\n * Defaults to `false`.\n */\n fullBleedCode?: boolean\n\n /**\n * Optional content rendered above the markdown body.\n */\n lead?: ReactNode\n\n /**\n * Whether heading colors should be slightly muted.\n *\n * Defaults to `false`.\n */\n mutedHeadings?: boolean\n\n /**\n * Options that control fenced code block rendering.\n */\n options?: RenderMarkdownOptions\n\n /**\n * Additional classes applied to section elements within the rendered markdown, if applicable.\n */\n sectionClassName?: string\n\n /**\n * Typography size preset for the rendered markdown.\n *\n * Defaults to `'lg'`.\n */\n size?: MarkdownSize\n\n /**\n * Visual style preset for the rendered markdown.\n *\n * Defaults to `'blog'`.\n */\n variant?: MarkdownVariant\n\n /**\n * Additional classes applied to the outer wrapper element.\n */\n wrapperClassName?: string\n}\n\n/**\n * Runtime-only props shared by markdown renderer components.\n */\nexport type BaseMarkdownRendererProps = {\n /**\n * The HTML tag used for the rendered markdown container.\n *\n * Defaults to `'article'`.\n */\n as?: keyof JSX.IntrinsicElements\n\n /**\n * Content rendered when the markdown input is empty or missing.\n */\n emptyFallback?: ReactNode\n\n /**\n * Content rendered when markdown compilation fails and a fallback is desired.\n */\n errorFallback?: ReactNode\n\n /**\n * The markdown source string to render.\n */\n markdown?: null | string\n}\n\n/**\n * Props for the main markdown renderer component.\n *\n * This merges persisted/configurable markdown presentation settings with the\n * runtime-only rendering props required by the component itself.\n */\nexport type MarkdownRendererProps = {\n collectionSlug?: string\n scope?: MarkdownRendererScope\n } & BaseMarkdownRendererProps & MarkdownConfig\n\n/**\n * Options available while rendering an individual fenced code block.\n */\nexport interface CodeBlockOptions extends RenderMarkdownOptions {\n /**\n * The parsed language identifier for the fenced code block, if present.\n */\n lang?: string\n}\n\n/**\n * Stored Payload block data for a markdown block instance.\n */\nexport interface MarkdownBlockData {\n /**\n * Optional block display name assigned by Payload.\n */\n blockName?: null | string\n\n /**\n * The Payload block slug.\n */\n blockType: 'vlMdBlock'\n\n /**\n * Markdown source content for this block.\n */\n content: string\n\n /**\n * Optional Payload-generated block identifier.\n */\n id?: null | string\n}\n\n/**\n * Props for the markdown block component wrapper.\n */\nexport interface MarkdownBlockProps extends MarkdownBlockData {\n /**\n * The slug of the collection this block is rendered within, if applicable.\n */\n collectionSlug?: string\n}\n"],"names":[],"mappings":"AAAA;;CAEC,GAID,OAAO,uBAAsB"}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
|
|
4
|
-
import { EditorState } from '@codemirror/state';
|
|
5
|
-
import { placeholder as cmPlaceholder, EditorView, keymap } from '@codemirror/view';
|
|
6
|
-
import React, { useEffect, useRef } from 'react';
|
|
7
|
-
import { payloadMarkdownTheme } from './themes/payload.js';
|
|
8
|
-
export const MarkdownCodeMirror = ({ onChangeAction, placeholder = 'Write markdown...', value = '' })=>{
|
|
9
|
-
const containerRef = useRef(null);
|
|
10
|
-
const viewRef = useRef(null);
|
|
11
|
-
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
12
|
-
useEffect(()=>{
|
|
13
|
-
if (!containerRef.current || viewRef.current) return;
|
|
14
|
-
const state = EditorState.create({
|
|
15
|
-
doc: value,
|
|
16
|
-
extensions: [
|
|
17
|
-
history(),
|
|
18
|
-
keymap.of([
|
|
19
|
-
...defaultKeymap,
|
|
20
|
-
...historyKeymap
|
|
21
|
-
]),
|
|
22
|
-
EditorView.lineWrapping,
|
|
23
|
-
cmPlaceholder(placeholder),
|
|
24
|
-
payloadMarkdownTheme,
|
|
25
|
-
EditorView.updateListener.of((update)=>{
|
|
26
|
-
if (!update.docChanged) return;
|
|
27
|
-
onChangeAction(update.state.doc.toString());
|
|
28
|
-
})
|
|
29
|
-
]
|
|
30
|
-
});
|
|
31
|
-
viewRef.current = new EditorView({
|
|
32
|
-
parent: containerRef.current,
|
|
33
|
-
state
|
|
34
|
-
});
|
|
35
|
-
return ()=>{
|
|
36
|
-
viewRef.current?.destroy();
|
|
37
|
-
viewRef.current = null;
|
|
38
|
-
};
|
|
39
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
40
|
-
}, [
|
|
41
|
-
onChangeAction,
|
|
42
|
-
placeholder
|
|
43
|
-
]);
|
|
44
|
-
useEffect(()=>{
|
|
45
|
-
const view = viewRef.current;
|
|
46
|
-
if (!view) return;
|
|
47
|
-
const current = view.state.doc.toString();
|
|
48
|
-
if (current === value) return;
|
|
49
|
-
view.dispatch({
|
|
50
|
-
changes: {
|
|
51
|
-
from: 0,
|
|
52
|
-
insert: value,
|
|
53
|
-
to: current.length
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
}, [
|
|
57
|
-
value
|
|
58
|
-
]);
|
|
59
|
-
return /*#__PURE__*/ _jsx("div", {
|
|
60
|
-
style: {
|
|
61
|
-
border: isDarkMode ? '1px solid rgba(120, 120, 120, .4)' : '1px solid rgba(120, 120, 120, .8)',
|
|
62
|
-
borderRadius: '5px',
|
|
63
|
-
maxHeight: '80vh',
|
|
64
|
-
minHeight: '125px',
|
|
65
|
-
overflowX: 'hidden',
|
|
66
|
-
overflowY: 'scroll'
|
|
67
|
-
},
|
|
68
|
-
children: /*#__PURE__*/ _jsx("div", {
|
|
69
|
-
ref: containerRef
|
|
70
|
-
})
|
|
71
|
-
});
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
//# sourceMappingURL=MarkdownCodeMirror.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/editor/MarkdownCodeMirror.tsx"],"sourcesContent":["'use client'\n\nimport { defaultKeymap, history, historyKeymap } from '@codemirror/commands'\nimport { EditorState } from '@codemirror/state'\nimport { placeholder as cmPlaceholder, EditorView, keymap } from '@codemirror/view'\nimport React, { useEffect, useRef } from 'react'\n\nimport { payloadMarkdownTheme } from './themes/payload.js'\n\ntype MarkdownCodeMirrorProps = {\n onChangeAction: (value: string) => void\n placeholder?: string\n value?: string\n}\n\nexport const MarkdownCodeMirror: React.FC<MarkdownCodeMirrorProps> = ({\n onChangeAction,\n placeholder = 'Write markdown...',\n value = '',\n}) => {\n const containerRef = useRef<HTMLDivElement | null>(null)\n const viewRef = useRef<EditorView | null>(null)\n const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches\n\n useEffect(() => {\n if (!containerRef.current || viewRef.current) return\n\n const state = EditorState.create({\n doc: value,\n extensions: [\n history(),\n keymap.of([...defaultKeymap, ...historyKeymap]),\n EditorView.lineWrapping,\n cmPlaceholder(placeholder),\n payloadMarkdownTheme,\n EditorView.updateListener.of((update) => {\n if (!update.docChanged) return\n onChangeAction(update.state.doc.toString())\n }),\n ],\n })\n\n viewRef.current = new EditorView({\n parent: containerRef.current,\n state,\n })\n\n return () => {\n viewRef.current?.destroy()\n viewRef.current = null\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [onChangeAction, placeholder])\n\n useEffect(() => {\n const view = viewRef.current\n if (!view) return\n\n const current = view.state.doc.toString()\n if (current === value) return\n\n view.dispatch({\n changes: {\n from: 0,\n insert: value,\n to: current.length,\n },\n })\n }, [value])\n\n return (\n <div\n style={{\n border: isDarkMode ? '1px solid rgba(120, 120, 120, .4)' : '1px solid rgba(120, 120, 120, .8)',\n borderRadius: '5px',\n maxHeight: '80vh',\n minHeight: '125px',\n overflowX: 'hidden',\n overflowY: 'scroll',\n }}>\n <div ref={containerRef} />\n </div>\n )\n}\n"],"names":["defaultKeymap","history","historyKeymap","EditorState","placeholder","cmPlaceholder","EditorView","keymap","React","useEffect","useRef","payloadMarkdownTheme","MarkdownCodeMirror","onChangeAction","value","containerRef","viewRef","isDarkMode","window","matchMedia","matches","current","state","create","doc","extensions","of","lineWrapping","updateListener","update","docChanged","toString","parent","destroy","view","dispatch","changes","from","insert","to","length","div","style","border","borderRadius","maxHeight","minHeight","overflowX","overflowY","ref"],"mappings":"AAAA;;AAEA,SAASA,aAAa,EAAEC,OAAO,EAAEC,aAAa,QAAQ,uBAAsB;AAC5E,SAASC,WAAW,QAAQ,oBAAmB;AAC/C,SAASC,eAAeC,aAAa,EAAEC,UAAU,EAAEC,MAAM,QAAQ,mBAAkB;AACnF,OAAOC,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAEhD,SAASC,oBAAoB,QAAQ,sBAAqB;AAQ1D,OAAO,MAAMC,qBAAwD,CAAC,EACpEC,cAAc,EACdT,cAAc,mBAAmB,EACjCU,QAAQ,EAAE,EACX;IACC,MAAMC,eAAeL,OAA8B;IACnD,MAAMM,UAAUN,OAA0B;IAC1C,MAAMO,aAAaC,OAAOC,UAAU,IAAID,OAAOC,UAAU,CAAC,gCAAgCC,OAAO;IAEjGX,UAAU;QACR,IAAI,CAACM,aAAaM,OAAO,IAAIL,QAAQK,OAAO,EAAE;QAE9C,MAAMC,QAAQnB,YAAYoB,MAAM,CAAC;YAC/BC,KAAKV;YACLW,YAAY;gBACVxB;gBACAM,OAAOmB,EAAE,CAAC;uBAAI1B;uBAAkBE;iBAAc;gBAC9CI,WAAWqB,YAAY;gBACvBtB,cAAcD;gBACdO;gBACAL,WAAWsB,cAAc,CAACF,EAAE,CAAC,CAACG;oBAC5B,IAAI,CAACA,OAAOC,UAAU,EAAE;oBACxBjB,eAAegB,OAAOP,KAAK,CAACE,GAAG,CAACO,QAAQ;gBAC1C;aACD;QACH;QAEAf,QAAQK,OAAO,GAAG,IAAIf,WAAW;YAC/B0B,QAAQjB,aAAaM,OAAO;YAC5BC;QACF;QAEA,OAAO;YACLN,QAAQK,OAAO,EAAEY;YACjBjB,QAAQK,OAAO,GAAG;QACpB;IACA,uDAAuD;IACzD,GAAG;QAACR;QAAgBT;KAAY;IAEhCK,UAAU;QACR,MAAMyB,OAAOlB,QAAQK,OAAO;QAC5B,IAAI,CAACa,MAAM;QAEX,MAAMb,UAAUa,KAAKZ,KAAK,CAACE,GAAG,CAACO,QAAQ;QACvC,IAAIV,YAAYP,OAAO;QAEvBoB,KAAKC,QAAQ,CAAC;YACZC,SAAS;gBACPC,MAAM;gBACNC,QAAQxB;gBACRyB,IAAIlB,QAAQmB,MAAM;YACpB;QACF;IACF,GAAG;QAAC1B;KAAM;IAEV,qBACE,KAAC2B;QACCC,OAAO;YACLC,QAAQ1B,aAAa,sCAAsC;YAC3D2B,cAAc;YACdC,WAAW;YACXC,WAAW;YACXC,WAAW;YACXC,WAAW;QACb;kBACA,cAAA,KAACP;YAAIQ,KAAKlC;;;AAGhB,EAAC"}
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
import { codeBlockParams } from '../CodeBlockParams/config.js';
|
|
2
|
-
import { tailwindField } from '../TailwindField/config.js';
|
|
3
|
-
export function blocksParams(options = {}) {
|
|
4
|
-
const { name = 'md-params', admin, label = 'Markdown Blocks Params' } = options;
|
|
5
|
-
return {
|
|
6
|
-
name,
|
|
7
|
-
type: 'group',
|
|
8
|
-
admin,
|
|
9
|
-
fields: [
|
|
10
|
-
{
|
|
11
|
-
name: 'enable',
|
|
12
|
-
type: 'checkbox',
|
|
13
|
-
admin: {
|
|
14
|
-
description: 'Whether to enable custom parameters for markdown blocks. ' + 'This is required to use any of the other block parameter fields, but can be left disabled ' + 'if you only need the default styles and behavior.'
|
|
15
|
-
},
|
|
16
|
-
label: 'Enable Blocks Params'
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
name: 'config',
|
|
20
|
-
type: 'group',
|
|
21
|
-
admin: {
|
|
22
|
-
condition: (_, siblingData)=>!!siblingData?.enable
|
|
23
|
-
},
|
|
24
|
-
fields: [
|
|
25
|
-
tailwindField({
|
|
26
|
-
name: 'wrapperClassName',
|
|
27
|
-
admin: {
|
|
28
|
-
description: 'Additional Tailwind classes to apply to the block wrapper element.'
|
|
29
|
-
},
|
|
30
|
-
label: 'Tailwind Wrapper Classes'
|
|
31
|
-
}),
|
|
32
|
-
tailwindField({
|
|
33
|
-
name: 'className',
|
|
34
|
-
admin: {
|
|
35
|
-
description: 'Additional Tailwind classes to apply to the block element itself.'
|
|
36
|
-
},
|
|
37
|
-
label: 'Tailwind Markdown Element Classes'
|
|
38
|
-
}),
|
|
39
|
-
tailwindField({
|
|
40
|
-
name: 'sectionClassName',
|
|
41
|
-
admin: {
|
|
42
|
-
description: 'Additional Tailwind classes to apply to the block section element.'
|
|
43
|
-
},
|
|
44
|
-
label: 'Tailwind Markdown Section Classes'
|
|
45
|
-
}),
|
|
46
|
-
tailwindField({
|
|
47
|
-
name: 'columnClassName',
|
|
48
|
-
admin: {
|
|
49
|
-
description: 'Additional Tailwind classes to apply to the block column element.'
|
|
50
|
-
},
|
|
51
|
-
label: 'Tailwind Markdown Column Classes'
|
|
52
|
-
}),
|
|
53
|
-
{
|
|
54
|
-
type: 'row',
|
|
55
|
-
fields: [
|
|
56
|
-
{
|
|
57
|
-
name: 'variant',
|
|
58
|
-
type: 'select',
|
|
59
|
-
admin: {
|
|
60
|
-
description: 'The visual style variant to apply to the block.'
|
|
61
|
-
},
|
|
62
|
-
dbName: 'vl_md_variant',
|
|
63
|
-
defaultValue: 'blog',
|
|
64
|
-
label: 'Variant',
|
|
65
|
-
options: [
|
|
66
|
-
{
|
|
67
|
-
label: 'Blog',
|
|
68
|
-
value: 'blog'
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
label: 'Compact',
|
|
72
|
-
value: 'compact'
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
label: 'Docs',
|
|
76
|
-
value: 'docs'
|
|
77
|
-
},
|
|
78
|
-
{
|
|
79
|
-
label: 'Unstyled',
|
|
80
|
-
value: 'unstyled'
|
|
81
|
-
}
|
|
82
|
-
]
|
|
83
|
-
},
|
|
84
|
-
{
|
|
85
|
-
name: 'size',
|
|
86
|
-
type: 'select',
|
|
87
|
-
admin: {
|
|
88
|
-
description: 'The typography size to apply to the block.'
|
|
89
|
-
},
|
|
90
|
-
dbName: 'vl_md_size',
|
|
91
|
-
defaultValue: 'md',
|
|
92
|
-
label: 'Size',
|
|
93
|
-
options: [
|
|
94
|
-
{
|
|
95
|
-
label: 'Large',
|
|
96
|
-
value: 'lg'
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
label: 'Medium',
|
|
100
|
-
value: 'md'
|
|
101
|
-
},
|
|
102
|
-
{
|
|
103
|
-
label: 'Small',
|
|
104
|
-
value: 'sm'
|
|
105
|
-
}
|
|
106
|
-
]
|
|
107
|
-
}
|
|
108
|
-
]
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
type: 'row',
|
|
112
|
-
fields: [
|
|
113
|
-
{
|
|
114
|
-
name: 'enableGutter',
|
|
115
|
-
type: 'checkbox',
|
|
116
|
-
admin: {
|
|
117
|
-
description: 'Whether to apply horizontal gutter padding to the block wrapper.'
|
|
118
|
-
},
|
|
119
|
-
label: 'Enable Gutter'
|
|
120
|
-
},
|
|
121
|
-
{
|
|
122
|
-
name: 'fullBleedCode',
|
|
123
|
-
type: 'checkbox',
|
|
124
|
-
admin: {
|
|
125
|
-
description: 'Whether fenced code blocks should extend beyond the normal content width on larger screens.'
|
|
126
|
-
},
|
|
127
|
-
label: 'Full Bleed Code'
|
|
128
|
-
},
|
|
129
|
-
{
|
|
130
|
-
name: 'mutedHeadings',
|
|
131
|
-
type: 'checkbox',
|
|
132
|
-
admin: {
|
|
133
|
-
description: 'Whether heading colors should be slightly muted.'
|
|
134
|
-
},
|
|
135
|
-
label: 'Muted Headings'
|
|
136
|
-
}
|
|
137
|
-
]
|
|
138
|
-
},
|
|
139
|
-
codeBlockParams({
|
|
140
|
-
name: 'options'
|
|
141
|
-
})
|
|
142
|
-
]
|
|
143
|
-
}
|
|
144
|
-
],
|
|
145
|
-
label
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
//# sourceMappingURL=config.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/field/BlocksParams/config.ts"],"sourcesContent":["import type { Field, GroupField } from 'payload'\n\nimport { codeBlockParams } from '../CodeBlockParams/config.js'\nimport { tailwindField } from '../TailwindField/config.js'\n\nexport type BlocksParamsOptions = {\n admin?: Partial<GroupField['admin']>\n label?: string\n name?: string\n}\n\nexport function blocksParams(options: BlocksParamsOptions = {}): Field {\n const { name = 'md-params', admin, label = 'Markdown Blocks Params' } = options\n\n return {\n name,\n type: 'group',\n admin,\n fields: [\n {\n name: 'enable',\n type: 'checkbox',\n admin: {\n description:\n 'Whether to enable custom parameters for markdown blocks. ' +\n 'This is required to use any of the other block parameter fields, but can be left disabled ' +\n 'if you only need the default styles and behavior.',\n },\n label: 'Enable Blocks Params',\n },\n {\n name: 'config',\n type: 'group',\n admin: {\n condition: (_, siblingData) => !!siblingData?.enable,\n },\n fields: [\n tailwindField({\n name: 'wrapperClassName',\n admin: {\n description: 'Additional Tailwind classes to apply to the block wrapper element.',\n },\n label: 'Tailwind Wrapper Classes',\n }),\n tailwindField({\n name: 'className',\n admin: {\n description: 'Additional Tailwind classes to apply to the block element itself.',\n },\n label: 'Tailwind Markdown Element Classes',\n }),\n tailwindField({\n name: 'sectionClassName',\n admin: {\n description: 'Additional Tailwind classes to apply to the block section element.',\n },\n label: 'Tailwind Markdown Section Classes',\n }),\n tailwindField({\n name: 'columnClassName',\n admin: {\n description: 'Additional Tailwind classes to apply to the block column element.',\n },\n label: 'Tailwind Markdown Column Classes',\n }),\n {\n type: 'row',\n fields: [\n {\n name: 'variant',\n type: 'select',\n admin: {\n description: 'The visual style variant to apply to the block.',\n },\n dbName: 'vl_md_variant',\n defaultValue: 'blog',\n label: 'Variant',\n options: [\n { label: 'Blog', value: 'blog' },\n { label: 'Compact', value: 'compact' },\n { label: 'Docs', value: 'docs' },\n { label: 'Unstyled', value: 'unstyled' },\n ],\n },\n {\n name: 'size',\n type: 'select',\n admin: {\n description: 'The typography size to apply to the block.',\n },\n dbName: 'vl_md_size',\n defaultValue: 'md',\n label: 'Size',\n options: [\n { label: 'Large', value: 'lg' },\n { label: 'Medium', value: 'md' },\n { label: 'Small', value: 'sm' },\n ],\n },\n ],\n },\n {\n type: 'row',\n fields: [\n {\n name: 'enableGutter',\n type: 'checkbox',\n admin: {\n description: 'Whether to apply horizontal gutter padding to the block wrapper.',\n },\n label: 'Enable Gutter',\n },\n {\n name: 'fullBleedCode',\n type: 'checkbox',\n admin: {\n description:\n 'Whether fenced code blocks should extend beyond the normal content width on larger screens.',\n },\n label: 'Full Bleed Code',\n },\n {\n name: 'mutedHeadings',\n type: 'checkbox',\n admin: {\n description: 'Whether heading colors should be slightly muted.',\n },\n label: 'Muted Headings',\n },\n ],\n },\n codeBlockParams({ name: 'options' }),\n ],\n },\n ],\n label,\n }\n}\n"],"names":["codeBlockParams","tailwindField","blocksParams","options","name","admin","label","type","fields","description","condition","_","siblingData","enable","dbName","defaultValue","value"],"mappings":"AAEA,SAASA,eAAe,QAAQ,+BAA8B;AAC9D,SAASC,aAAa,QAAQ,6BAA4B;AAQ1D,OAAO,SAASC,aAAaC,UAA+B,CAAC,CAAC;IAC5D,MAAM,EAAEC,OAAO,WAAW,EAAEC,KAAK,EAAEC,QAAQ,wBAAwB,EAAE,GAAGH;IAExE,OAAO;QACLC;QACAG,MAAM;QACNF;QACAG,QAAQ;YACN;gBACEJ,MAAM;gBACNG,MAAM;gBACNF,OAAO;oBACLI,aACE,8DACA,+FACA;gBACJ;gBACAH,OAAO;YACT;YACA;gBACEF,MAAM;gBACNG,MAAM;gBACNF,OAAO;oBACLK,WAAW,CAACC,GAAGC,cAAgB,CAAC,CAACA,aAAaC;gBAChD;gBACAL,QAAQ;oBACNP,cAAc;wBACZG,MAAM;wBACNC,OAAO;4BACLI,aAAa;wBACf;wBACAH,OAAO;oBACT;oBACAL,cAAc;wBACZG,MAAM;wBACNC,OAAO;4BACLI,aAAa;wBACf;wBACAH,OAAO;oBACT;oBACAL,cAAc;wBACZG,MAAM;wBACNC,OAAO;4BACLI,aAAa;wBACf;wBACAH,OAAO;oBACT;oBACAL,cAAc;wBACZG,MAAM;wBACNC,OAAO;4BACLI,aAAa;wBACf;wBACAH,OAAO;oBACT;oBACA;wBACEC,MAAM;wBACNC,QAAQ;4BACN;gCACEJ,MAAM;gCACNG,MAAM;gCACNF,OAAO;oCACLI,aAAa;gCACf;gCACAK,QAAQ;gCACRC,cAAc;gCACdT,OAAO;gCACPH,SAAS;oCACP;wCAAEG,OAAO;wCAAQU,OAAO;oCAAO;oCAC/B;wCAAEV,OAAO;wCAAWU,OAAO;oCAAU;oCACrC;wCAAEV,OAAO;wCAAQU,OAAO;oCAAO;oCAC/B;wCAAEV,OAAO;wCAAYU,OAAO;oCAAW;iCACxC;4BACH;4BACA;gCACEZ,MAAM;gCACNG,MAAM;gCACNF,OAAO;oCACLI,aAAa;gCACf;gCACAK,QAAQ;gCACRC,cAAc;gCACdT,OAAO;gCACPH,SAAS;oCACP;wCAAEG,OAAO;wCAASU,OAAO;oCAAK;oCAC9B;wCAAEV,OAAO;wCAAUU,OAAO;oCAAK;oCAC/B;wCAAEV,OAAO;wCAASU,OAAO;oCAAK;iCAC/B;4BACH;yBACD;oBACH;oBACA;wBACET,MAAM;wBACNC,QAAQ;4BACN;gCACEJ,MAAM;gCACNG,MAAM;gCACNF,OAAO;oCACLI,aAAa;gCACf;gCACAH,OAAO;4BACT;4BACA;gCACEF,MAAM;gCACNG,MAAM;gCACNF,OAAO;oCACLI,aACE;gCACJ;gCACAH,OAAO;4BACT;4BACA;gCACEF,MAAM;gCACNG,MAAM;gCACNF,OAAO;oCACLI,aAAa;gCACf;gCACAH,OAAO;4BACT;yBACD;oBACH;oBACAN,gBAAgB;wBAAEI,MAAM;oBAAU;iBACnC;YACH;SACD;QACDE;IACF;AACF"}
|