@djangocfg/ui-tools 2.1.239 → 2.1.240
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 +49 -3
- package/dist/index.cjs +731 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +233 -1
- package/dist/index.d.ts +233 -1
- package/dist/index.mjs +726 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -7
- package/src/tools/CodeEditor/CodeEditor.story.tsx +202 -0
- package/src/tools/CodeEditor/README.md +189 -0
- package/src/tools/CodeEditor/components/DiffEditor.tsx +123 -0
- package/src/tools/CodeEditor/components/Editor.tsx +222 -0
- package/src/tools/CodeEditor/components/index.ts +2 -0
- package/src/tools/CodeEditor/context/EditorProvider.tsx +194 -0
- package/src/tools/CodeEditor/context/index.ts +1 -0
- package/src/tools/CodeEditor/hooks/index.ts +4 -0
- package/src/tools/CodeEditor/hooks/useEditor.ts +36 -0
- package/src/tools/CodeEditor/hooks/useEditorTheme.ts +158 -0
- package/src/tools/CodeEditor/hooks/useLanguage.ts +29 -0
- package/src/tools/CodeEditor/hooks/useMonaco.ts +64 -0
- package/src/tools/CodeEditor/index.ts +16 -0
- package/src/tools/CodeEditor/lib/index.ts +2 -0
- package/src/tools/CodeEditor/lib/languages.ts +227 -0
- package/src/tools/CodeEditor/lib/themes.ts +78 -0
- package/src/tools/CodeEditor/types/index.ts +130 -0
- package/src/tools/CodeEditor/workers/index.ts +1 -0
- package/src/tools/CodeEditor/workers/setup.ts +58 -0
- package/src/tools/index.ts +25 -0
package/dist/index.d.cts
CHANGED
|
@@ -9,6 +9,7 @@ import { FormProps, IChangeEvent } from '@rjsf/core';
|
|
|
9
9
|
import * as zustand from 'zustand';
|
|
10
10
|
import { CommonExternalProps } from 'react-json-tree';
|
|
11
11
|
import { MediaPlayerInstance } from '@vidstack/react';
|
|
12
|
+
import * as monaco from 'monaco-editor';
|
|
12
13
|
import * as zustand_middleware from 'zustand/middleware';
|
|
13
14
|
|
|
14
15
|
interface LoadingFallbackProps {
|
|
@@ -2155,6 +2156,237 @@ declare function SchedulePreview({ showCronExpression, allowCopy, showInitialVal
|
|
|
2155
2156
|
*/
|
|
2156
2157
|
declare function CronScheduler(props: CronSchedulerProps): react_jsx_runtime.JSX.Element;
|
|
2157
2158
|
|
|
2159
|
+
interface EditorFile {
|
|
2160
|
+
/** Unique file path */
|
|
2161
|
+
path: string;
|
|
2162
|
+
/** File content */
|
|
2163
|
+
content: string;
|
|
2164
|
+
/** Detected or specified language */
|
|
2165
|
+
language: string;
|
|
2166
|
+
/** Whether file has unsaved changes */
|
|
2167
|
+
isDirty: boolean;
|
|
2168
|
+
/** Monaco model reference */
|
|
2169
|
+
model?: monaco.editor.ITextModel;
|
|
2170
|
+
}
|
|
2171
|
+
interface EditorOptions {
|
|
2172
|
+
/** Editor theme: 'vs' | 'vs-dark' | 'hc-black' | custom */
|
|
2173
|
+
theme?: string;
|
|
2174
|
+
/** Font size in pixels */
|
|
2175
|
+
fontSize?: number;
|
|
2176
|
+
/** Font family */
|
|
2177
|
+
fontFamily?: string;
|
|
2178
|
+
/** Tab size */
|
|
2179
|
+
tabSize?: number;
|
|
2180
|
+
/** Insert spaces instead of tabs */
|
|
2181
|
+
insertSpaces?: boolean;
|
|
2182
|
+
/** Word wrap mode */
|
|
2183
|
+
wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
|
|
2184
|
+
/** Show minimap */
|
|
2185
|
+
minimap?: boolean;
|
|
2186
|
+
/** Show line numbers */
|
|
2187
|
+
lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
|
|
2188
|
+
/** Read-only mode */
|
|
2189
|
+
readOnly?: boolean;
|
|
2190
|
+
}
|
|
2191
|
+
interface EditorProps {
|
|
2192
|
+
/** File content */
|
|
2193
|
+
value?: string;
|
|
2194
|
+
/** Programming language for syntax highlighting */
|
|
2195
|
+
language?: string;
|
|
2196
|
+
/** Called when content changes */
|
|
2197
|
+
onChange?: (value: string) => void;
|
|
2198
|
+
/** Called when editor is mounted */
|
|
2199
|
+
onMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
|
|
2200
|
+
/** Editor options */
|
|
2201
|
+
options?: EditorOptions;
|
|
2202
|
+
/** CSS class name */
|
|
2203
|
+
className?: string;
|
|
2204
|
+
/** Height — fixed px, CSS string, or '100%' (default: '100%'). Ignored when autoHeight=true */
|
|
2205
|
+
height?: string | number;
|
|
2206
|
+
/** Width (default: '100%') */
|
|
2207
|
+
width?: string | number;
|
|
2208
|
+
/** Auto-resize height to fit content. Editor grows/shrinks with content lines */
|
|
2209
|
+
autoHeight?: boolean;
|
|
2210
|
+
/** Min height in px when autoHeight is enabled (default: 100) */
|
|
2211
|
+
minHeight?: number;
|
|
2212
|
+
/** Max height in px when autoHeight is enabled (default: 600) */
|
|
2213
|
+
maxHeight?: number;
|
|
2214
|
+
}
|
|
2215
|
+
interface DiffEditorProps {
|
|
2216
|
+
/** Original content (left side) */
|
|
2217
|
+
original: string;
|
|
2218
|
+
/** Modified content (right side) */
|
|
2219
|
+
modified: string;
|
|
2220
|
+
/** Programming language */
|
|
2221
|
+
language?: string;
|
|
2222
|
+
/** Editor options */
|
|
2223
|
+
options?: EditorOptions;
|
|
2224
|
+
/** CSS class name */
|
|
2225
|
+
className?: string;
|
|
2226
|
+
/** Height (default: '100%') */
|
|
2227
|
+
height?: string | number;
|
|
2228
|
+
}
|
|
2229
|
+
interface EditorContextValue {
|
|
2230
|
+
/** Currently open files */
|
|
2231
|
+
openFiles: EditorFile[];
|
|
2232
|
+
/** Currently active file */
|
|
2233
|
+
activeFile: EditorFile | null;
|
|
2234
|
+
/** Monaco instance (null during SSR) */
|
|
2235
|
+
monaco: typeof monaco | null;
|
|
2236
|
+
/** Editor instance */
|
|
2237
|
+
editor: monaco.editor.IStandaloneCodeEditor | null;
|
|
2238
|
+
/** Whether editor is ready */
|
|
2239
|
+
isReady: boolean;
|
|
2240
|
+
openFile: (path: string, content: string, language?: string) => void;
|
|
2241
|
+
closeFile: (path: string) => void;
|
|
2242
|
+
setActiveFile: (path: string) => void;
|
|
2243
|
+
updateContent: (path: string, content: string) => void;
|
|
2244
|
+
saveFile: (path: string) => Promise<void>;
|
|
2245
|
+
isDirty: (path: string) => boolean;
|
|
2246
|
+
getContent: (path: string) => string | null;
|
|
2247
|
+
getFile: (path: string) => EditorFile | null;
|
|
2248
|
+
}
|
|
2249
|
+
interface UseEditorReturn {
|
|
2250
|
+
/** Editor instance */
|
|
2251
|
+
editor: monaco.editor.IStandaloneCodeEditor | null;
|
|
2252
|
+
/** Whether editor is mounted and ready */
|
|
2253
|
+
isReady: boolean;
|
|
2254
|
+
/** Set editor reference */
|
|
2255
|
+
setEditor: (editor: monaco.editor.IStandaloneCodeEditor | null) => void;
|
|
2256
|
+
}
|
|
2257
|
+
interface UseMonacoReturn {
|
|
2258
|
+
/** Monaco namespace */
|
|
2259
|
+
monaco: typeof monaco | null;
|
|
2260
|
+
/** Whether Monaco is loaded */
|
|
2261
|
+
isLoading: boolean;
|
|
2262
|
+
/** Loading error if any */
|
|
2263
|
+
error: Error | null;
|
|
2264
|
+
}
|
|
2265
|
+
|
|
2266
|
+
interface EditorRef {
|
|
2267
|
+
/** Get editor instance */
|
|
2268
|
+
getEditor: () => monaco.editor.IStandaloneCodeEditor | null;
|
|
2269
|
+
/** Get current value */
|
|
2270
|
+
getValue: () => string;
|
|
2271
|
+
/** Set value */
|
|
2272
|
+
setValue: (value: string) => void;
|
|
2273
|
+
/** Focus editor */
|
|
2274
|
+
focus: () => void;
|
|
2275
|
+
}
|
|
2276
|
+
/**
|
|
2277
|
+
* Monaco Editor Component
|
|
2278
|
+
*
|
|
2279
|
+
* A React wrapper around Monaco Editor with full TypeScript support.
|
|
2280
|
+
*
|
|
2281
|
+
* @example
|
|
2282
|
+
* ```tsx
|
|
2283
|
+
* <Editor
|
|
2284
|
+
* value={code}
|
|
2285
|
+
* language="typescript"
|
|
2286
|
+
* onChange={(value) => setCode(value)}
|
|
2287
|
+
* options={{ fontSize: 14, minimap: false }}
|
|
2288
|
+
* />
|
|
2289
|
+
* ```
|
|
2290
|
+
*/
|
|
2291
|
+
declare const Editor: React$1.ForwardRefExoticComponent<EditorProps & React$1.RefAttributes<EditorRef>>;
|
|
2292
|
+
|
|
2293
|
+
/**
|
|
2294
|
+
* Monaco Diff Editor Component
|
|
2295
|
+
*
|
|
2296
|
+
* Side-by-side or inline diff view for comparing two versions of content.
|
|
2297
|
+
*
|
|
2298
|
+
* @example
|
|
2299
|
+
* ```tsx
|
|
2300
|
+
* <DiffEditor
|
|
2301
|
+
* original={originalCode}
|
|
2302
|
+
* modified={modifiedCode}
|
|
2303
|
+
* language="typescript"
|
|
2304
|
+
* />
|
|
2305
|
+
* ```
|
|
2306
|
+
*/
|
|
2307
|
+
declare function DiffEditor({ original, modified, language, options, className, height, }: DiffEditorProps): react_jsx_runtime.JSX.Element;
|
|
2308
|
+
|
|
2309
|
+
/**
|
|
2310
|
+
* Hook to access editor context
|
|
2311
|
+
* Must be used within EditorProvider
|
|
2312
|
+
*/
|
|
2313
|
+
declare function useEditorContext(): EditorContextValue;
|
|
2314
|
+
interface EditorProviderProps {
|
|
2315
|
+
children: React.ReactNode;
|
|
2316
|
+
/** Callback when file save is requested */
|
|
2317
|
+
onSave?: (path: string, content: string) => Promise<void>;
|
|
2318
|
+
}
|
|
2319
|
+
/**
|
|
2320
|
+
* Editor Context Provider
|
|
2321
|
+
*
|
|
2322
|
+
* Manages multiple open files, active file state, and editor instance.
|
|
2323
|
+
*
|
|
2324
|
+
* @example
|
|
2325
|
+
* ```tsx
|
|
2326
|
+
* <EditorProvider onSave={handleSave}>
|
|
2327
|
+
* <EditorTabs />
|
|
2328
|
+
* <Editor />
|
|
2329
|
+
* </EditorProvider>
|
|
2330
|
+
* ```
|
|
2331
|
+
*/
|
|
2332
|
+
declare function EditorProvider({ children, onSave }: EditorProviderProps): react_jsx_runtime.JSX.Element;
|
|
2333
|
+
|
|
2334
|
+
/**
|
|
2335
|
+
* Hook to load and access Monaco Editor instance
|
|
2336
|
+
*
|
|
2337
|
+
* Handles:
|
|
2338
|
+
* - Dynamic import of Monaco (client-side only)
|
|
2339
|
+
* - Web worker configuration
|
|
2340
|
+
* - Loading state management
|
|
2341
|
+
*
|
|
2342
|
+
* @example
|
|
2343
|
+
* ```tsx
|
|
2344
|
+
* const { monaco, isLoading, error } = useMonaco();
|
|
2345
|
+
*
|
|
2346
|
+
* if (isLoading) return <Spinner />;
|
|
2347
|
+
* if (error) return <Error message={error.message} />;
|
|
2348
|
+
*
|
|
2349
|
+
* // Use monaco API
|
|
2350
|
+
* monaco.editor.create(...)
|
|
2351
|
+
* ```
|
|
2352
|
+
*/
|
|
2353
|
+
declare function useMonaco(): UseMonacoReturn;
|
|
2354
|
+
|
|
2355
|
+
/**
|
|
2356
|
+
* Hook to manage editor instance reference
|
|
2357
|
+
*
|
|
2358
|
+
* @example
|
|
2359
|
+
* ```tsx
|
|
2360
|
+
* const { editor, isReady, setEditor } = useEditor();
|
|
2361
|
+
*
|
|
2362
|
+
* // Pass setEditor to Editor component's onMount
|
|
2363
|
+
* <Editor onMount={setEditor} />
|
|
2364
|
+
*
|
|
2365
|
+
* // Use editor when ready
|
|
2366
|
+
* if (isReady) {
|
|
2367
|
+
* editor.getModel()?.getValue();
|
|
2368
|
+
* }
|
|
2369
|
+
* ```
|
|
2370
|
+
*/
|
|
2371
|
+
declare function useEditor(): UseEditorReturn;
|
|
2372
|
+
|
|
2373
|
+
/**
|
|
2374
|
+
* Hook to detect language from filename
|
|
2375
|
+
*
|
|
2376
|
+
* @param filename - File name or path
|
|
2377
|
+
* @returns Monaco language ID
|
|
2378
|
+
*
|
|
2379
|
+
* @example
|
|
2380
|
+
* ```tsx
|
|
2381
|
+
* const language = useLanguage('app.tsx');
|
|
2382
|
+
* // Returns: 'typescript'
|
|
2383
|
+
*
|
|
2384
|
+
* const language2 = useLanguage('/path/to/Dockerfile');
|
|
2385
|
+
* // Returns: 'dockerfile'
|
|
2386
|
+
* ```
|
|
2387
|
+
*/
|
|
2388
|
+
declare function useLanguage(filename: string | undefined): string;
|
|
2389
|
+
|
|
2158
2390
|
interface BlobUrlEntry {
|
|
2159
2391
|
url: string;
|
|
2160
2392
|
refCount: number;
|
|
@@ -2333,4 +2565,4 @@ declare function useBlobUrlCleanup(key: string | null): void;
|
|
|
2333
2565
|
*/
|
|
2334
2566
|
declare function generateContentKey(content: ArrayBuffer): string;
|
|
2335
2567
|
|
|
2336
|
-
export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownMessage, type MarkdownMessageProps, type MarkerData, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
|
|
2568
|
+
export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, DiffEditor, type DiffEditorProps, EFFECT_ANIMATIONS, Editor, type EditorContextValue, type EditorFile, type EditorOptions, type EditorProps, EditorProvider, type EditorRef, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownMessage, type MarkdownMessageProps, type MarkerData, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseEditorReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseMonacoReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useEditor, useEditorContext, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLanguage, useLottie, useMediaCacheStore, useMonaco, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
|
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import { FormProps, IChangeEvent } from '@rjsf/core';
|
|
|
9
9
|
import * as zustand from 'zustand';
|
|
10
10
|
import { CommonExternalProps } from 'react-json-tree';
|
|
11
11
|
import { MediaPlayerInstance } from '@vidstack/react';
|
|
12
|
+
import * as monaco from 'monaco-editor';
|
|
12
13
|
import * as zustand_middleware from 'zustand/middleware';
|
|
13
14
|
|
|
14
15
|
interface LoadingFallbackProps {
|
|
@@ -2155,6 +2156,237 @@ declare function SchedulePreview({ showCronExpression, allowCopy, showInitialVal
|
|
|
2155
2156
|
*/
|
|
2156
2157
|
declare function CronScheduler(props: CronSchedulerProps): react_jsx_runtime.JSX.Element;
|
|
2157
2158
|
|
|
2159
|
+
interface EditorFile {
|
|
2160
|
+
/** Unique file path */
|
|
2161
|
+
path: string;
|
|
2162
|
+
/** File content */
|
|
2163
|
+
content: string;
|
|
2164
|
+
/** Detected or specified language */
|
|
2165
|
+
language: string;
|
|
2166
|
+
/** Whether file has unsaved changes */
|
|
2167
|
+
isDirty: boolean;
|
|
2168
|
+
/** Monaco model reference */
|
|
2169
|
+
model?: monaco.editor.ITextModel;
|
|
2170
|
+
}
|
|
2171
|
+
interface EditorOptions {
|
|
2172
|
+
/** Editor theme: 'vs' | 'vs-dark' | 'hc-black' | custom */
|
|
2173
|
+
theme?: string;
|
|
2174
|
+
/** Font size in pixels */
|
|
2175
|
+
fontSize?: number;
|
|
2176
|
+
/** Font family */
|
|
2177
|
+
fontFamily?: string;
|
|
2178
|
+
/** Tab size */
|
|
2179
|
+
tabSize?: number;
|
|
2180
|
+
/** Insert spaces instead of tabs */
|
|
2181
|
+
insertSpaces?: boolean;
|
|
2182
|
+
/** Word wrap mode */
|
|
2183
|
+
wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
|
|
2184
|
+
/** Show minimap */
|
|
2185
|
+
minimap?: boolean;
|
|
2186
|
+
/** Show line numbers */
|
|
2187
|
+
lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
|
|
2188
|
+
/** Read-only mode */
|
|
2189
|
+
readOnly?: boolean;
|
|
2190
|
+
}
|
|
2191
|
+
interface EditorProps {
|
|
2192
|
+
/** File content */
|
|
2193
|
+
value?: string;
|
|
2194
|
+
/** Programming language for syntax highlighting */
|
|
2195
|
+
language?: string;
|
|
2196
|
+
/** Called when content changes */
|
|
2197
|
+
onChange?: (value: string) => void;
|
|
2198
|
+
/** Called when editor is mounted */
|
|
2199
|
+
onMount?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
|
|
2200
|
+
/** Editor options */
|
|
2201
|
+
options?: EditorOptions;
|
|
2202
|
+
/** CSS class name */
|
|
2203
|
+
className?: string;
|
|
2204
|
+
/** Height — fixed px, CSS string, or '100%' (default: '100%'). Ignored when autoHeight=true */
|
|
2205
|
+
height?: string | number;
|
|
2206
|
+
/** Width (default: '100%') */
|
|
2207
|
+
width?: string | number;
|
|
2208
|
+
/** Auto-resize height to fit content. Editor grows/shrinks with content lines */
|
|
2209
|
+
autoHeight?: boolean;
|
|
2210
|
+
/** Min height in px when autoHeight is enabled (default: 100) */
|
|
2211
|
+
minHeight?: number;
|
|
2212
|
+
/** Max height in px when autoHeight is enabled (default: 600) */
|
|
2213
|
+
maxHeight?: number;
|
|
2214
|
+
}
|
|
2215
|
+
interface DiffEditorProps {
|
|
2216
|
+
/** Original content (left side) */
|
|
2217
|
+
original: string;
|
|
2218
|
+
/** Modified content (right side) */
|
|
2219
|
+
modified: string;
|
|
2220
|
+
/** Programming language */
|
|
2221
|
+
language?: string;
|
|
2222
|
+
/** Editor options */
|
|
2223
|
+
options?: EditorOptions;
|
|
2224
|
+
/** CSS class name */
|
|
2225
|
+
className?: string;
|
|
2226
|
+
/** Height (default: '100%') */
|
|
2227
|
+
height?: string | number;
|
|
2228
|
+
}
|
|
2229
|
+
interface EditorContextValue {
|
|
2230
|
+
/** Currently open files */
|
|
2231
|
+
openFiles: EditorFile[];
|
|
2232
|
+
/** Currently active file */
|
|
2233
|
+
activeFile: EditorFile | null;
|
|
2234
|
+
/** Monaco instance (null during SSR) */
|
|
2235
|
+
monaco: typeof monaco | null;
|
|
2236
|
+
/** Editor instance */
|
|
2237
|
+
editor: monaco.editor.IStandaloneCodeEditor | null;
|
|
2238
|
+
/** Whether editor is ready */
|
|
2239
|
+
isReady: boolean;
|
|
2240
|
+
openFile: (path: string, content: string, language?: string) => void;
|
|
2241
|
+
closeFile: (path: string) => void;
|
|
2242
|
+
setActiveFile: (path: string) => void;
|
|
2243
|
+
updateContent: (path: string, content: string) => void;
|
|
2244
|
+
saveFile: (path: string) => Promise<void>;
|
|
2245
|
+
isDirty: (path: string) => boolean;
|
|
2246
|
+
getContent: (path: string) => string | null;
|
|
2247
|
+
getFile: (path: string) => EditorFile | null;
|
|
2248
|
+
}
|
|
2249
|
+
interface UseEditorReturn {
|
|
2250
|
+
/** Editor instance */
|
|
2251
|
+
editor: monaco.editor.IStandaloneCodeEditor | null;
|
|
2252
|
+
/** Whether editor is mounted and ready */
|
|
2253
|
+
isReady: boolean;
|
|
2254
|
+
/** Set editor reference */
|
|
2255
|
+
setEditor: (editor: monaco.editor.IStandaloneCodeEditor | null) => void;
|
|
2256
|
+
}
|
|
2257
|
+
interface UseMonacoReturn {
|
|
2258
|
+
/** Monaco namespace */
|
|
2259
|
+
monaco: typeof monaco | null;
|
|
2260
|
+
/** Whether Monaco is loaded */
|
|
2261
|
+
isLoading: boolean;
|
|
2262
|
+
/** Loading error if any */
|
|
2263
|
+
error: Error | null;
|
|
2264
|
+
}
|
|
2265
|
+
|
|
2266
|
+
interface EditorRef {
|
|
2267
|
+
/** Get editor instance */
|
|
2268
|
+
getEditor: () => monaco.editor.IStandaloneCodeEditor | null;
|
|
2269
|
+
/** Get current value */
|
|
2270
|
+
getValue: () => string;
|
|
2271
|
+
/** Set value */
|
|
2272
|
+
setValue: (value: string) => void;
|
|
2273
|
+
/** Focus editor */
|
|
2274
|
+
focus: () => void;
|
|
2275
|
+
}
|
|
2276
|
+
/**
|
|
2277
|
+
* Monaco Editor Component
|
|
2278
|
+
*
|
|
2279
|
+
* A React wrapper around Monaco Editor with full TypeScript support.
|
|
2280
|
+
*
|
|
2281
|
+
* @example
|
|
2282
|
+
* ```tsx
|
|
2283
|
+
* <Editor
|
|
2284
|
+
* value={code}
|
|
2285
|
+
* language="typescript"
|
|
2286
|
+
* onChange={(value) => setCode(value)}
|
|
2287
|
+
* options={{ fontSize: 14, minimap: false }}
|
|
2288
|
+
* />
|
|
2289
|
+
* ```
|
|
2290
|
+
*/
|
|
2291
|
+
declare const Editor: React$1.ForwardRefExoticComponent<EditorProps & React$1.RefAttributes<EditorRef>>;
|
|
2292
|
+
|
|
2293
|
+
/**
|
|
2294
|
+
* Monaco Diff Editor Component
|
|
2295
|
+
*
|
|
2296
|
+
* Side-by-side or inline diff view for comparing two versions of content.
|
|
2297
|
+
*
|
|
2298
|
+
* @example
|
|
2299
|
+
* ```tsx
|
|
2300
|
+
* <DiffEditor
|
|
2301
|
+
* original={originalCode}
|
|
2302
|
+
* modified={modifiedCode}
|
|
2303
|
+
* language="typescript"
|
|
2304
|
+
* />
|
|
2305
|
+
* ```
|
|
2306
|
+
*/
|
|
2307
|
+
declare function DiffEditor({ original, modified, language, options, className, height, }: DiffEditorProps): react_jsx_runtime.JSX.Element;
|
|
2308
|
+
|
|
2309
|
+
/**
|
|
2310
|
+
* Hook to access editor context
|
|
2311
|
+
* Must be used within EditorProvider
|
|
2312
|
+
*/
|
|
2313
|
+
declare function useEditorContext(): EditorContextValue;
|
|
2314
|
+
interface EditorProviderProps {
|
|
2315
|
+
children: React.ReactNode;
|
|
2316
|
+
/** Callback when file save is requested */
|
|
2317
|
+
onSave?: (path: string, content: string) => Promise<void>;
|
|
2318
|
+
}
|
|
2319
|
+
/**
|
|
2320
|
+
* Editor Context Provider
|
|
2321
|
+
*
|
|
2322
|
+
* Manages multiple open files, active file state, and editor instance.
|
|
2323
|
+
*
|
|
2324
|
+
* @example
|
|
2325
|
+
* ```tsx
|
|
2326
|
+
* <EditorProvider onSave={handleSave}>
|
|
2327
|
+
* <EditorTabs />
|
|
2328
|
+
* <Editor />
|
|
2329
|
+
* </EditorProvider>
|
|
2330
|
+
* ```
|
|
2331
|
+
*/
|
|
2332
|
+
declare function EditorProvider({ children, onSave }: EditorProviderProps): react_jsx_runtime.JSX.Element;
|
|
2333
|
+
|
|
2334
|
+
/**
|
|
2335
|
+
* Hook to load and access Monaco Editor instance
|
|
2336
|
+
*
|
|
2337
|
+
* Handles:
|
|
2338
|
+
* - Dynamic import of Monaco (client-side only)
|
|
2339
|
+
* - Web worker configuration
|
|
2340
|
+
* - Loading state management
|
|
2341
|
+
*
|
|
2342
|
+
* @example
|
|
2343
|
+
* ```tsx
|
|
2344
|
+
* const { monaco, isLoading, error } = useMonaco();
|
|
2345
|
+
*
|
|
2346
|
+
* if (isLoading) return <Spinner />;
|
|
2347
|
+
* if (error) return <Error message={error.message} />;
|
|
2348
|
+
*
|
|
2349
|
+
* // Use monaco API
|
|
2350
|
+
* monaco.editor.create(...)
|
|
2351
|
+
* ```
|
|
2352
|
+
*/
|
|
2353
|
+
declare function useMonaco(): UseMonacoReturn;
|
|
2354
|
+
|
|
2355
|
+
/**
|
|
2356
|
+
* Hook to manage editor instance reference
|
|
2357
|
+
*
|
|
2358
|
+
* @example
|
|
2359
|
+
* ```tsx
|
|
2360
|
+
* const { editor, isReady, setEditor } = useEditor();
|
|
2361
|
+
*
|
|
2362
|
+
* // Pass setEditor to Editor component's onMount
|
|
2363
|
+
* <Editor onMount={setEditor} />
|
|
2364
|
+
*
|
|
2365
|
+
* // Use editor when ready
|
|
2366
|
+
* if (isReady) {
|
|
2367
|
+
* editor.getModel()?.getValue();
|
|
2368
|
+
* }
|
|
2369
|
+
* ```
|
|
2370
|
+
*/
|
|
2371
|
+
declare function useEditor(): UseEditorReturn;
|
|
2372
|
+
|
|
2373
|
+
/**
|
|
2374
|
+
* Hook to detect language from filename
|
|
2375
|
+
*
|
|
2376
|
+
* @param filename - File name or path
|
|
2377
|
+
* @returns Monaco language ID
|
|
2378
|
+
*
|
|
2379
|
+
* @example
|
|
2380
|
+
* ```tsx
|
|
2381
|
+
* const language = useLanguage('app.tsx');
|
|
2382
|
+
* // Returns: 'typescript'
|
|
2383
|
+
*
|
|
2384
|
+
* const language2 = useLanguage('/path/to/Dockerfile');
|
|
2385
|
+
* // Returns: 'dockerfile'
|
|
2386
|
+
* ```
|
|
2387
|
+
*/
|
|
2388
|
+
declare function useLanguage(filename: string | undefined): string;
|
|
2389
|
+
|
|
2158
2390
|
interface BlobUrlEntry {
|
|
2159
2391
|
url: string;
|
|
2160
2392
|
refCount: number;
|
|
@@ -2333,4 +2565,4 @@ declare function useBlobUrlCleanup(key: string | null): void;
|
|
|
2333
2565
|
*/
|
|
2334
2566
|
declare function generateContentKey(content: ArrayBuffer): string;
|
|
2335
2567
|
|
|
2336
|
-
export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, EFFECT_ANIMATIONS, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownMessage, type MarkdownMessageProps, type MarkerData, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLottie, useMediaCacheStore, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
|
|
2568
|
+
export { ArrayFieldItemTemplate, ArrayFieldTemplate, type AspectRatioValue, type AudioLevels, AudioReactiveCover, type AudioReactiveCoverProps, BaseInputTemplate, type BlobSource, COLOR_SCHEMES, COLOR_SCHEME_INFO, CardLoadingFallback, CheckboxWidget, ColorWidget, type CreateLazyComponentOptions, type CreateVideoErrorFallbackOptions, CronScheduler, type CronSchedulerContextValue, type CronSchedulerProps, CronSchedulerProvider, type CronSchedulerState, CustomInput, type DASHSource, type DataUrlSource, DayChips, DiffEditor, type DiffEditorProps, EFFECT_ANIMATIONS, Editor, type EditorContextValue, type EditorFile, type EditorOptions, type EditorProps, EditorProvider, type EditorRef, type EffectColorScheme, type EffectColors, type EffectConfig$1 as EffectConfig, type EffectIntensity, type EffectLayer, type EffectVariant, type EqualizerOptions, type ErrorFallbackProps, ErrorListTemplate, FieldTemplate, GlowEffect, type GlowEffectData, type HLSSource, type HybridAudioContextValue, type HybridAudioControls, HybridAudioPlayer, type HybridAudioPlayerProps, HybridAudioProvider, type HybridAudioProviderProps, type HybridAudioState, type HybridCompactPlayerProps, HybridSimplePlayer, type HybridSimplePlayerProps, HybridWaveform, type HybridWaveformProps, type HybridWebAudioAPI, INTENSITY_CONFIG, INTENSITY_INFO, type ImageFile, ImageViewer, type ImageViewerProps, JsonSchemaForm, type JsonSchemaFormProps, JsonTreeComponent as JsonTree, type JsonTreeConfig, type JsonTreeProps, LazyCronScheduler, LazyHybridAudioPlayer, LazyHybridCompactPlayer, LazyHybridSimplePlayer, LazyImageViewer, LazyJsonSchemaForm, LazyJsonTree, LazyLottiePlayer, LazyMapContainer, LazyMapView, LazyMermaid, LazyOpenapiViewer, LazyPrettyCode, LazyVideoPlayer, LazyWrapper, type LazyWrapperProps, LoadingFallback, type LoadingFallbackProps, type LottieDirection, LottiePlayer, type LottiePlayerProps, type LottieSize, type LottieSpeed, type MapContainerProps, MapLoadingFallback, type MapStyleKey, type MapViewport, MarkdownMessage, type MarkdownMessageProps, type MarkerData, Mermaid, type MermaidProps, MeshEffect, type MonthDay, MonthDayGrid, NativeProvider, NumberWidget, ObjectFieldTemplate, Playground as OpenapiViewer, OrbsEffect, type PlayerMode, type PlaygroundConfig, type PlaygroundProps$1 as PlaygroundProps, PrettyCode, type PrettyCodeProps$1 as PrettyCodeProps, type ResolveFileSourceOptions, SchedulePreview, type ScheduleType, ScheduleTypeSelector, type SchemaSource, SelectWidget, type SimpleStreamSource, SliderWidget, Spinner, SpotlightEffect, StreamProvider, type StreamSource, SwitchWidget, TextWidget, TimeSelector, type UrlSource, type UseAudioBusReturn, type UseAudioVisualizationReturn, type UseCollapsibleContentOptions, type UseCollapsibleContentResult, type UseEditorReturn, type UseHybridAudioOptions, type UseHybridAudioReturn, type UseLottieOptions, type UseLottieReturn, type UseMonacoReturn, type UseVisualizationReturn, VARIANT_INFO, VideoControls, VideoErrorFallback, type VideoErrorFallbackProps, VideoPlayer, type VideoPlayerContextValue, type VideoPlayerProps, VideoPlayerProvider, type VideoPlayerProviderProps, type VideoPlayerRef, type VideoSourceUnion, VidstackProvider, type VimeoSource, type VisualizationColorScheme, type VisualizationIntensity, VisualizationProvider, type VisualizationProviderProps, type VisualizationSettings, type VisualizationVariant, type WeekDay, type YouTubeSource, buildCron, calculateGlowLayers, calculateMeshGradients, calculateOrbs, calculateSpotlight, createLazyComponent, createVideoErrorFallback, formatTime, generateContentKey, getColors, getEffectConfig, getRequiredFields, hasRequiredFields, humanizeCron, isSimpleStreamSource, isValidCron, mergeDefaults, normalizeFormData, parseCron, prepareEffectColors, resolveFileSource, resolvePlayerMode, resolveStreamSource, safeJsonParse, safeJsonStringify, useAudioBus, useAudioBusStore, useAudioCache, useAudioVisualization, useBlobUrlCleanup, useCollapsibleContent, useCronCustom, useCronMonthDays, useCronPreview, useCronScheduler, useCronSchedulerContext, useCronTime, useCronType, useCronWeekDays, useEditor, useEditorContext, useHybridAudio, useHybridAudioAnalysis, useHybridAudioContext, useHybridAudioControls, useHybridAudioLevels, useHybridAudioState, useHybridWebAudio, useImageCache, useLanguage, useLottie, useMediaCacheStore, useMonaco, useVideoCache, useVideoPlayerContext, useVideoPlayerSettings, useVisualization, validateRequiredFields, validateSchema };
|