@coral-viz/viz 0.2.3 → 0.2.5
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 +25 -4
- package/dist/compatibility/CompatibilityEdge.d.ts +16 -11
- package/dist/compatibility/CompatibilityEdge.d.ts.map +1 -1
- package/dist/compatibility/CompatibilityEdge.js +144 -28
- package/dist/compatibility/CompatibilityEdge.js.map +1 -1
- package/dist/components/DiagramFontFaces.d.ts +8 -0
- package/dist/components/DiagramFontFaces.d.ts.map +1 -0
- package/dist/components/DiagramFontFaces.js +18 -0
- package/dist/components/DiagramFontFaces.js.map +1 -0
- package/dist/components/SymbolNode.d.ts.map +1 -1
- package/dist/components/SymbolNode.js +59 -11
- package/dist/components/SymbolNode.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/editor/CoralEditor.js +1 -1
- package/dist/editor/CoralEditor.js.map +1 -1
- package/dist/editor/converter.d.ts +1 -1
- package/dist/editor/converter.d.ts.map +1 -1
- package/dist/editor/converter.js +41 -21
- package/dist/editor/converter.js.map +1 -1
- package/dist/editor/dimensions.d.ts +7 -0
- package/dist/editor/dimensions.d.ts.map +1 -0
- package/dist/editor/dimensions.js +26 -0
- package/dist/editor/dimensions.js.map +1 -0
- package/dist/file/deserialize.d.ts.map +1 -1
- package/dist/file/deserialize.js +9 -14
- package/dist/file/deserialize.js.map +1 -1
- package/dist/file/index.d.ts +2 -1
- package/dist/file/index.d.ts.map +1 -1
- package/dist/file/index.js +2 -1
- package/dist/file/index.js.map +1 -1
- package/dist/file/layoutProfile.d.ts +11 -0
- package/dist/file/layoutProfile.d.ts.map +1 -0
- package/dist/file/layoutProfile.js +89 -0
- package/dist/file/layoutProfile.js.map +1 -0
- package/dist/file/migrate.d.ts.map +1 -1
- package/dist/file/migrate.js +15 -3
- package/dist/file/migrate.js.map +1 -1
- package/dist/file/schema.d.ts +27 -0
- package/dist/file/schema.d.ts.map +1 -1
- package/dist/file/schema.js +70 -0
- package/dist/file/schema.js.map +1 -1
- package/dist/file/serialize.d.ts.map +1 -1
- package/dist/file/serialize.js +61 -16
- package/dist/file/serialize.js.map +1 -1
- package/dist/index.d.ts +6 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -3
- package/dist/index.js.map +1 -1
- package/dist/layout/elk.d.ts +2 -51
- package/dist/layout/elk.d.ts.map +1 -1
- package/dist/layout/elk.js +107 -337
- package/dist/layout/elk.js.map +1 -1
- package/dist/layout/nodeSizing.d.ts +4 -61
- package/dist/layout/nodeSizing.d.ts.map +1 -1
- package/dist/layout/nodeSizing.js +4 -315
- package/dist/layout/nodeSizing.js.map +1 -1
- package/dist/layout/positionStability.d.ts +2 -1
- package/dist/layout/positionStability.d.ts.map +1 -1
- package/dist/layout/positionStability.js +40 -29
- package/dist/layout/positionStability.js.map +1 -1
- package/dist/layout/useAxisConstrain.d.ts.map +1 -1
- package/dist/layout/useAxisConstrain.js +20 -20
- package/dist/layout/useAxisConstrain.js.map +1 -1
- package/dist/layout/useDiagramState.d.ts +2 -1
- package/dist/layout/useDiagramState.d.ts.map +1 -1
- package/dist/layout/useLayoutHistory.d.ts +8 -0
- package/dist/layout/useLayoutHistory.d.ts.map +1 -1
- package/dist/layout/useLayoutHistory.js +78 -100
- package/dist/layout/useLayoutHistory.js.map +1 -1
- package/dist/properties/NodePropertiesPanel.d.ts +5 -1
- package/dist/properties/NodePropertiesPanel.d.ts.map +1 -1
- package/dist/properties/NodePropertiesPanel.js +95 -28
- package/dist/properties/NodePropertiesPanel.js.map +1 -1
- package/dist/settings/FontSettingsForm.d.ts.map +1 -1
- package/dist/settings/FontSettingsForm.js +9 -4
- package/dist/settings/FontSettingsForm.js.map +1 -1
- package/dist/settings/LayoutSettingsForm.d.ts +3 -1
- package/dist/settings/LayoutSettingsForm.d.ts.map +1 -1
- package/dist/settings/LayoutSettingsForm.js +43 -20
- package/dist/settings/LayoutSettingsForm.js.map +1 -1
- package/dist/settings/SettingsPanel.d.ts +10 -2
- package/dist/settings/SettingsPanel.d.ts.map +1 -1
- package/dist/settings/SettingsPanel.js +45 -3
- package/dist/settings/SettingsPanel.js.map +1 -1
- package/dist/settings/useSettings.d.ts +8 -2
- package/dist/settings/useSettings.d.ts.map +1 -1
- package/dist/settings/useSettings.js +29 -7
- package/dist/settings/useSettings.js.map +1 -1
- package/dist/text-editor/SplitEditor.d.ts +5 -1
- package/dist/text-editor/SplitEditor.d.ts.map +1 -1
- package/dist/text-editor/SplitEditor.js +5 -12
- package/dist/text-editor/SplitEditor.js.map +1 -1
- package/dist/text-editor/TextEditor.d.ts +45 -33
- package/dist/text-editor/TextEditor.d.ts.map +1 -1
- package/dist/text-editor/TextEditor.js +178 -168
- package/dist/text-editor/TextEditor.js.map +1 -1
- package/dist/text-editor/hooks/useBidirectionalSync.d.ts +15 -0
- package/dist/text-editor/hooks/useBidirectionalSync.d.ts.map +1 -1
- package/dist/text-editor/hooks/useBidirectionalSync.js +9 -22
- package/dist/text-editor/hooks/useBidirectionalSync.js.map +1 -1
- package/dist/text-editor/index.d.ts +2 -2
- package/dist/text-editor/index.d.ts.map +1 -1
- package/dist/text-editor/index.js +1 -1
- package/dist/text-editor/index.js.map +1 -1
- package/dist/types.d.ts +24 -3
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js +4 -1
- package/dist/types.js.map +1 -1
- package/dist/viewMetadata.d.ts +4 -0
- package/dist/viewMetadata.d.ts.map +1 -0
- package/dist/viewMetadata.js +63 -0
- package/dist/viewMetadata.js.map +1 -0
- package/dist/waypoints/useWaypointManager.d.ts.map +1 -1
- package/dist/waypoints/useWaypointManager.js +60 -84
- package/dist/waypoints/useWaypointManager.js.map +1 -1
- package/package.json +10 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSettings.js","sourceRoot":"","sources":["../../src/settings/useSettings.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"useSettings.js","sourceRoot":"","sources":["../../src/settings/useSettings.ts"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import React from 'react';
|
|
8
8
|
import { type SyntaxLanguage } from './TextEditor.js';
|
|
9
|
-
import { type ParseFunction, type PrintFunction, type ParseError } from './hooks/useBidirectionalSync.js';
|
|
9
|
+
import { type ParseFunction, type PrintFunction, type DiagnosticPrintFunction, type SyncPrintDiagnostic, type ParseError } from './hooks/useBidirectionalSync.js';
|
|
10
10
|
import type { GraphIR, EditorConfig } from '../types.js';
|
|
11
11
|
/**
|
|
12
12
|
* Layout orientation for the split view
|
|
@@ -28,6 +28,8 @@ export interface SplitEditorProps {
|
|
|
28
28
|
parse: ParseFunction;
|
|
29
29
|
/** Printer function (Graph-IR → text) */
|
|
30
30
|
print: PrintFunction;
|
|
31
|
+
/** Optional loss-reporting printer used for visual → text synchronization. */
|
|
32
|
+
printWithDiagnostics?: DiagnosticPrintFunction;
|
|
31
33
|
/** Syntax language for text editor */
|
|
32
34
|
language?: SyntaxLanguage;
|
|
33
35
|
/** Layout orientation */
|
|
@@ -48,6 +50,8 @@ export interface SplitEditorProps {
|
|
|
48
50
|
onTextChange?: (text: string) => void;
|
|
49
51
|
/** Callback when errors change */
|
|
50
52
|
onErrorsChange?: (errors: ParseError[]) => void;
|
|
53
|
+
/** Callback when visual → text printing reports losses. */
|
|
54
|
+
onPrintDiagnosticsChange?: (diagnostics: SyncPrintDiagnostic[]) => void;
|
|
51
55
|
/** CSS class name */
|
|
52
56
|
className?: string;
|
|
53
57
|
/** Inline styles */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitEditor.d.ts","sourceRoot":"","sources":["../../src/text-editor/SplitEditor.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,UAAU,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"SplitEditor.d.ts","sourceRoot":"","sources":["../../src/text-editor/SplitEditor.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,EACxB,KAAK,UAAU,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,OAAO,EAAa,YAAY,EAAmB,MAAM,aAAa,CAAC;AAGrF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wCAAwC;IACxC,KAAK,EAAE,aAAa,CAAC;IACrB,yCAAyC;IACzC,KAAK,EAAE,aAAa,CAAC;IACrB,8EAA8E;IAC9E,oBAAoB,CAAC,EAAE,uBAAuB,CAAC;IAC/C,sCAAsC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,yBAAyB;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kCAAkC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,2DAA2D;IAC3D,wBAAwB,CAAC,EAAE,CAAC,WAAW,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAC;IACxE,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+MlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -9,6 +9,7 @@ import React, { useCallback, useMemo, useState } from 'react';
|
|
|
9
9
|
import { CoralEditor } from '../editor/CoralEditor.js';
|
|
10
10
|
import { TextEditor } from './TextEditor.js';
|
|
11
11
|
import { useBidirectionalSync, } from './hooks/useBidirectionalSync.js';
|
|
12
|
+
import { convertFlowToGraphNodes } from '../editor/converter.js';
|
|
12
13
|
/**
|
|
13
14
|
* Container styles for split layout
|
|
14
15
|
*/
|
|
@@ -48,7 +49,7 @@ const resizeHandleStyles = {
|
|
|
48
49
|
* - Resizable panes
|
|
49
50
|
* - Parse error display
|
|
50
51
|
*/
|
|
51
|
-
export const SplitEditor = ({ initialText = '', initialGraph, parse, print, language = 'coral', layout = 'horizontal', primaryPane = 'text', splitRatio: initialSplitRatio = 0.5, resizable = true, editorConfig, debounceMs = 100, onGraphChange, onTextChange, onErrorsChange, className, style, minPaneSize = 200, }) => {
|
|
52
|
+
export const SplitEditor = ({ initialText = '', initialGraph, parse, print, printWithDiagnostics, language = 'coral', layout = 'horizontal', primaryPane = 'text', splitRatio: initialSplitRatio = 0.5, resizable = true, editorConfig, debounceMs = 100, onGraphChange, onTextChange, onErrorsChange, onPrintDiagnosticsChange, className, style, minPaneSize = 200, }) => {
|
|
52
53
|
// Split ratio state for resizing
|
|
53
54
|
const [splitRatio, setSplitRatio] = useState(initialSplitRatio);
|
|
54
55
|
const [isResizing, setIsResizing] = useState(false);
|
|
@@ -58,10 +59,12 @@ export const SplitEditor = ({ initialText = '', initialGraph, parse, print, lang
|
|
|
58
59
|
initialGraph,
|
|
59
60
|
parse,
|
|
60
61
|
print,
|
|
62
|
+
printWithDiagnostics,
|
|
61
63
|
debounceMs,
|
|
62
64
|
onGraphChange,
|
|
63
65
|
onTextChange,
|
|
64
66
|
onErrorsChange,
|
|
67
|
+
onPrintDiagnosticsChange,
|
|
65
68
|
});
|
|
66
69
|
// Handle text editor changes
|
|
67
70
|
const handleTextChange = useCallback((newText) => {
|
|
@@ -74,17 +77,7 @@ export const SplitEditor = ({ initialText = '', initialGraph, parse, print, lang
|
|
|
74
77
|
// For now, just update nodes - full implementation would track edges too
|
|
75
78
|
const updatedGraph = {
|
|
76
79
|
...syncState.graph,
|
|
77
|
-
nodes: nodes.
|
|
78
|
-
id: node.id,
|
|
79
|
-
type: node.data.nodeType,
|
|
80
|
-
label: node.data.label,
|
|
81
|
-
description: node.data.description,
|
|
82
|
-
properties: node.data.properties,
|
|
83
|
-
position: node.position,
|
|
84
|
-
dimensions: node.measured
|
|
85
|
-
? { width: node.measured.width ?? 0, height: node.measured.height ?? 0 }
|
|
86
|
-
: undefined,
|
|
87
|
-
})),
|
|
80
|
+
nodes: convertFlowToGraphNodes(nodes, syncState.graph.nodes),
|
|
88
81
|
};
|
|
89
82
|
syncActions.setGraph(updatedGraph);
|
|
90
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitEditor.js","sourceRoot":"","sources":["../../src/text-editor/SplitEditor.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAuB,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACL,oBAAoB,
|
|
1
|
+
{"version":3,"file":"SplitEditor.js","sourceRoot":"","sources":["../../src/text-editor/SplitEditor.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,53 +1,65 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* TextEditor - DSL text editor component
|
|
3
|
-
*
|
|
4
|
-
* A code editor for Coral DSL, Mermaid, and DOT syntax with
|
|
5
|
-
* inline error display and syntax highlighting.
|
|
6
|
-
*/
|
|
7
1
|
import React from 'react';
|
|
8
2
|
import type { ParseError } from './hooks/useBidirectionalSync.js';
|
|
9
|
-
/**
|
|
10
|
-
* Supported syntax languages
|
|
11
|
-
*/
|
|
12
3
|
export type SyntaxLanguage = 'coral' | 'mermaid' | 'dot' | 'plain';
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
export type EditorTheme = 'light' | 'dark';
|
|
5
|
+
export interface EditorSourcePosition {
|
|
6
|
+
line: number;
|
|
7
|
+
column: number;
|
|
8
|
+
offset: number;
|
|
9
|
+
}
|
|
10
|
+
export interface EditorSourceRange {
|
|
11
|
+
start: EditorSourcePosition;
|
|
12
|
+
end: EditorSourcePosition;
|
|
13
|
+
}
|
|
14
|
+
export interface EditorDiagnostic {
|
|
15
|
+
message: string;
|
|
16
|
+
code?: string;
|
|
17
|
+
severity?: 'error' | 'warning' | 'info';
|
|
18
|
+
/** One-based logical line when no exact position is available. */
|
|
19
|
+
line?: number;
|
|
20
|
+
position?: EditorSourcePosition;
|
|
21
|
+
range?: EditorSourceRange;
|
|
22
|
+
}
|
|
23
|
+
export interface EditorDecoration {
|
|
24
|
+
start: number;
|
|
25
|
+
end: number;
|
|
26
|
+
entityId: string;
|
|
27
|
+
}
|
|
28
|
+
export interface EditorAnalysisOwner {
|
|
29
|
+
source: string;
|
|
30
|
+
language: SyntaxLanguage;
|
|
31
|
+
entityHighlighting?: boolean;
|
|
32
|
+
}
|
|
16
33
|
export interface TextEditorProps {
|
|
17
|
-
/** Current text content */
|
|
18
34
|
value: string;
|
|
19
|
-
/** Callback when text changes */
|
|
20
35
|
onChange: (value: string) => void;
|
|
21
|
-
|
|
36
|
+
onSelectionChange?: (start: number, end: number) => void;
|
|
22
37
|
language?: SyntaxLanguage;
|
|
23
|
-
/**
|
|
38
|
+
/** Legacy locations use one-based columns. */
|
|
24
39
|
errors?: ParseError[];
|
|
25
|
-
|
|
40
|
+
diagnostics?: EditorDiagnostic[];
|
|
41
|
+
decorations?: EditorDecoration[];
|
|
42
|
+
analysisOwner?: EditorAnalysisOwner;
|
|
43
|
+
/** Current preference; explicit decorations remain enabled by default for public callers. */
|
|
44
|
+
entityHighlightingEnabled?: boolean;
|
|
45
|
+
editorTheme?: EditorTheme;
|
|
46
|
+
wrap?: 'soft' | 'off';
|
|
26
47
|
placeholder?: string;
|
|
27
|
-
/** Read-only mode */
|
|
28
48
|
readOnly?: boolean;
|
|
29
|
-
/** CSS class name */
|
|
30
49
|
className?: string;
|
|
31
|
-
/** Inline styles */
|
|
32
50
|
style?: React.CSSProperties;
|
|
33
|
-
/** Line numbers */
|
|
34
51
|
showLineNumbers?: boolean;
|
|
35
|
-
/** Auto-focus on mount */
|
|
36
52
|
autoFocus?: boolean;
|
|
37
|
-
/** Tab size */
|
|
38
53
|
tabSize?: number;
|
|
39
|
-
/** Minimum height */
|
|
40
54
|
minHeight?: string;
|
|
55
|
+
'aria-label'?: string;
|
|
41
56
|
}
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
* - Optional line numbers
|
|
49
|
-
* - Keyboard shortcuts (Tab indentation)
|
|
50
|
-
*/
|
|
57
|
+
export declare function getEntityColor(entityId: string, theme: EditorTheme): {
|
|
58
|
+
slot: number;
|
|
59
|
+
background: "#38bdf8" | "#a78bfa" | "#fb7185" | "#eab308" | "#4ade80" | "#164e63" | "#4c1d95" | "#881337" | "#713f12" | "#14532d";
|
|
60
|
+
edge: "#38bdf8" | "#a78bfa" | "#fb7185" | "#4ade80" | "#0369a1" | "#6d28d9" | "#be123c" | "#a16207" | "#15803d" | "#facc15";
|
|
61
|
+
};
|
|
62
|
+
export declare function getDiagnosticColor(theme: EditorTheme): "#ff8a80" | "#7f1d1d";
|
|
51
63
|
export declare const TextEditor: React.FC<TextEditorProps>;
|
|
52
64
|
export default TextEditor;
|
|
53
65
|
//# sourceMappingURL=TextEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../src/text-editor/TextEditor.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../src/text-editor/TextEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAElE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,oBAAoB;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;AACtF,MAAM,WAAW,iBAAiB;IAAG,KAAK,EAAE,oBAAoB,CAAC;IAAC,GAAG,EAAE,oBAAoB,CAAA;CAAE;AAC7F,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACxC,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AACD,MAAM,WAAW,gBAAgB;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE;AAClF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,cAAc,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,6FAA6F;IAC7F,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAQD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW;;;;EAYlE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,yBAEpD;AAwHD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8HhD,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,181 +1,191 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
import { Component, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
3
|
+
const font = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace';
|
|
4
|
+
const LIGHT_FILLS = ['#38bdf8', '#a78bfa', '#fb7185', '#eab308', '#4ade80'];
|
|
5
|
+
const LIGHT_EDGES = ['#0369a1', '#6d28d9', '#be123c', '#a16207', '#15803d'];
|
|
6
|
+
const DARK_FILLS = ['#164e63', '#4c1d95', '#881337', '#713f12', '#14532d'];
|
|
7
|
+
const DARK_EDGES = ['#38bdf8', '#a78bfa', '#fb7185', '#facc15', '#4ade80'];
|
|
8
|
+
export function getEntityColor(entityId, theme) {
|
|
9
|
+
let hash = 2166136261;
|
|
10
|
+
for (let i = 0; i < entityId.length; i++) {
|
|
11
|
+
hash ^= entityId.charCodeAt(i);
|
|
12
|
+
hash = Math.imul(hash, 16777619);
|
|
13
|
+
}
|
|
14
|
+
const slot = (hash >>> 0) % LIGHT_FILLS.length;
|
|
14
15
|
return {
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
slot,
|
|
17
|
+
background: theme === 'dark' ? DARK_FILLS[slot] : LIGHT_FILLS[slot],
|
|
18
|
+
edge: theme === 'dark' ? DARK_EDGES[slot] : LIGHT_EDGES[slot],
|
|
17
19
|
};
|
|
18
20
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
function
|
|
21
|
+
export function getDiagnosticColor(theme) {
|
|
22
|
+
return theme === 'dark' ? '#ff8a80' : '#7f1d1d';
|
|
23
|
+
}
|
|
24
|
+
function offsetFromLegacy(text, line, column) {
|
|
23
25
|
const lines = text.split('\n');
|
|
26
|
+
const safeLine = Math.min(Math.max(1, line || 1), lines.length);
|
|
24
27
|
let offset = 0;
|
|
25
|
-
for (let i = 0; i <
|
|
26
|
-
offset += lines[i].length + 1;
|
|
28
|
+
for (let i = 0; i < safeLine - 1; i++)
|
|
29
|
+
offset += lines[i].length + 1;
|
|
30
|
+
return offset + Math.min(Math.max(0, (column || 1) - 1), lines[safeLine - 1].length);
|
|
31
|
+
}
|
|
32
|
+
function validRange(start, end, length) {
|
|
33
|
+
return Number.isInteger(start) && Number.isInteger(end) && start >= 0 && end > start && end <= length;
|
|
34
|
+
}
|
|
35
|
+
function normalizeDiagnostics(value, errors, diagnostics) {
|
|
36
|
+
const legacy = errors.map((error) => {
|
|
37
|
+
const start = offsetFromLegacy(value, error.line, error.column);
|
|
38
|
+
return {
|
|
39
|
+
message: error.message,
|
|
40
|
+
severity: 'error',
|
|
41
|
+
line: error.line,
|
|
42
|
+
offset: start,
|
|
43
|
+
position: { line: error.line, column: Math.max(0, (error.column || 1) - 1), offset: start },
|
|
44
|
+
start,
|
|
45
|
+
end: Math.min(value.length, start + 1),
|
|
46
|
+
};
|
|
47
|
+
});
|
|
48
|
+
return [...legacy, ...diagnostics.map((item) => {
|
|
49
|
+
const start = item.range?.start.offset;
|
|
50
|
+
const end = item.range?.end.offset;
|
|
51
|
+
return {
|
|
52
|
+
...item,
|
|
53
|
+
line: item.position?.line ?? item.line,
|
|
54
|
+
offset: item.position?.offset,
|
|
55
|
+
...(start !== undefined && end !== undefined && validRange(start, end, value.length)
|
|
56
|
+
? { start, end } : {}),
|
|
57
|
+
};
|
|
58
|
+
})];
|
|
59
|
+
}
|
|
60
|
+
class DecorationBoundary extends Component {
|
|
61
|
+
state = { failed: false };
|
|
62
|
+
static getDerivedStateFromError() { return { failed: true }; }
|
|
63
|
+
componentDidCatch(_error, _info) { }
|
|
64
|
+
render() { return this.state.failed ? null : this.props.children; }
|
|
65
|
+
}
|
|
66
|
+
function DecorationLayer({ value, diagnostics, decorations, theme, textStyle, overlayRef, }) {
|
|
67
|
+
const safeDecorations = decorations.filter((item) => validRange(item.start, item.end, value.length));
|
|
68
|
+
const boundaries = new Set([0, value.length]);
|
|
69
|
+
for (const item of safeDecorations) {
|
|
70
|
+
boundaries.add(item.start);
|
|
71
|
+
boundaries.add(item.end);
|
|
72
|
+
}
|
|
73
|
+
for (const item of diagnostics) {
|
|
74
|
+
if (item.start !== undefined && item.end !== undefined) {
|
|
75
|
+
boundaries.add(item.start);
|
|
76
|
+
boundaries.add(item.end);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
const points = [...boundaries].sort((a, b) => a - b);
|
|
80
|
+
const pointIndex = new Map(points.map((point, index) => [point, index]));
|
|
81
|
+
const diagnosticDepth = Array(points.length).fill(0);
|
|
82
|
+
for (const item of diagnostics) {
|
|
83
|
+
if (item.start === undefined || item.end === undefined)
|
|
84
|
+
continue;
|
|
85
|
+
diagnosticDepth[pointIndex.get(item.start)] += 1;
|
|
86
|
+
diagnosticDepth[pointIndex.get(item.end)] -= 1;
|
|
27
87
|
}
|
|
28
|
-
|
|
88
|
+
for (let index = 1; index < diagnosticDepth.length; index++) {
|
|
89
|
+
diagnosticDepth[index] += diagnosticDepth[index - 1];
|
|
90
|
+
}
|
|
91
|
+
const sortedDecorations = [...safeDecorations].sort((a, b) => a.start - b.start || a.end - b.end);
|
|
92
|
+
let decorationIndex = 0;
|
|
93
|
+
const segmentEntities = points.slice(0, -1).map((start, index) => {
|
|
94
|
+
const end = points[index + 1];
|
|
95
|
+
while (sortedDecorations[decorationIndex]?.end <= start)
|
|
96
|
+
decorationIndex++;
|
|
97
|
+
const candidate = sortedDecorations[decorationIndex];
|
|
98
|
+
return candidate?.start <= start && candidate.end >= end ? candidate : undefined;
|
|
99
|
+
});
|
|
100
|
+
return (_jsx("pre", { ref: overlayRef, "data-testid": "text-editor-overlay", "aria-hidden": "true", style: {
|
|
101
|
+
background: theme === 'dark' ? '#1e1e1e' : '#fafafa',
|
|
102
|
+
...textStyle,
|
|
103
|
+
position: 'absolute', inset: 0, margin: 0, overflow: 'hidden', pointerEvents: 'none', zIndex: 1,
|
|
104
|
+
color: 'transparent', border: 'none', resize: 'none',
|
|
105
|
+
}, children: points.slice(0, -1).map((start, index) => {
|
|
106
|
+
const end = points[index + 1];
|
|
107
|
+
const entity = segmentEntities[index];
|
|
108
|
+
const diagnostic = diagnosticDepth[index] > 0;
|
|
109
|
+
const color = entity ? getEntityColor(entity.entityId, theme) : undefined;
|
|
110
|
+
return _jsx("span", { ...(entity ? { 'data-entity-id': entity.entityId } : {}), ...(diagnostic ? { 'data-diagnostic': 'true' } : {}), style: {
|
|
111
|
+
...(color ? { backgroundColor: color.background, boxShadow: `inset 0 -2px ${color.edge}` } : {}),
|
|
112
|
+
...(diagnostic ? { textDecoration: `underline wavy ${getDiagnosticColor(theme)} 2px`, textUnderlineOffset: '2px' } : {}),
|
|
113
|
+
}, children: value.slice(start, end) }, `${start}:${end}`);
|
|
114
|
+
}) }));
|
|
29
115
|
}
|
|
30
|
-
|
|
31
|
-
* Default styles for the editor
|
|
32
|
-
*/
|
|
33
|
-
const defaultStyles = {
|
|
34
|
-
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
|
|
35
|
-
fontSize: '14px',
|
|
36
|
-
lineHeight: '1.5',
|
|
37
|
-
padding: '12px',
|
|
38
|
-
border: '1px solid #e0e0e0',
|
|
39
|
-
borderRadius: '4px',
|
|
40
|
-
outline: 'none',
|
|
41
|
-
resize: 'vertical',
|
|
42
|
-
width: '100%',
|
|
43
|
-
boxSizing: 'border-box',
|
|
44
|
-
backgroundColor: '#fafafa',
|
|
45
|
-
};
|
|
46
|
-
/**
|
|
47
|
-
* Error marker styles
|
|
48
|
-
*/
|
|
49
|
-
const errorMarkerStyles = {
|
|
50
|
-
position: 'absolute',
|
|
51
|
-
backgroundColor: 'rgba(255, 0, 0, 0.1)',
|
|
52
|
-
borderBottom: '2px wavy red',
|
|
53
|
-
pointerEvents: 'none',
|
|
54
|
-
};
|
|
55
|
-
/**
|
|
56
|
-
* Error tooltip styles
|
|
57
|
-
*/
|
|
58
|
-
const errorTooltipStyles = {
|
|
59
|
-
position: 'absolute',
|
|
60
|
-
backgroundColor: '#ffebee',
|
|
61
|
-
color: '#c62828',
|
|
62
|
-
padding: '4px 8px',
|
|
63
|
-
borderRadius: '4px',
|
|
64
|
-
fontSize: '12px',
|
|
65
|
-
boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
|
|
66
|
-
zIndex: 1000,
|
|
67
|
-
maxWidth: '300px',
|
|
68
|
-
whiteSpace: 'pre-wrap',
|
|
69
|
-
};
|
|
70
|
-
/**
|
|
71
|
-
* Line number gutter styles
|
|
72
|
-
*/
|
|
73
|
-
const lineNumberStyles = {
|
|
74
|
-
position: 'absolute',
|
|
75
|
-
left: 0,
|
|
76
|
-
top: 0,
|
|
77
|
-
width: '40px',
|
|
78
|
-
backgroundColor: '#f5f5f5',
|
|
79
|
-
borderRight: '1px solid #e0e0e0',
|
|
80
|
-
textAlign: 'right',
|
|
81
|
-
paddingRight: '8px',
|
|
82
|
-
paddingTop: '12px',
|
|
83
|
-
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
|
|
84
|
-
fontSize: '12px',
|
|
85
|
-
color: '#999',
|
|
86
|
-
userSelect: 'none',
|
|
87
|
-
lineHeight: '1.5',
|
|
88
|
-
};
|
|
89
|
-
/**
|
|
90
|
-
* TextEditor component
|
|
91
|
-
*
|
|
92
|
-
* Provides a code editing experience for diagram DSLs with:
|
|
93
|
-
* - Syntax-aware editing
|
|
94
|
-
* - Inline error display
|
|
95
|
-
* - Optional line numbers
|
|
96
|
-
* - Keyboard shortcuts (Tab indentation)
|
|
97
|
-
*/
|
|
98
|
-
export const TextEditor = ({ value, onChange, language = 'coral', errors = [], placeholder = 'Enter diagram code...', readOnly = false, className, style, showLineNumbers = true, autoFocus = false, tabSize = 2, minHeight = '200px', }) => {
|
|
116
|
+
export const TextEditor = ({ value, onChange, onSelectionChange, language = 'coral', errors = [], diagnostics = [], decorations = [], analysisOwner, entityHighlightingEnabled = true, editorTheme = 'light', wrap = 'soft', placeholder = 'Enter diagram code...', readOnly = false, className, style, showLineNumbers = true, autoFocus = false, tabSize = 2, minHeight = '200px', 'aria-label': ariaLabel, }) => {
|
|
99
117
|
const textareaRef = useRef(null);
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
const
|
|
103
|
-
const
|
|
104
|
-
|
|
105
|
-
const
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
const
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
118
|
+
const overlayRef = useRef(null);
|
|
119
|
+
const gutterRef = useRef(null);
|
|
120
|
+
const [activeMarker, setActiveMarker] = useState(null);
|
|
121
|
+
const owned = analysisOwner === undefined
|
|
122
|
+
|| (analysisOwner.source === value && analysisOwner.language === language);
|
|
123
|
+
const currentDiagnostics = useMemo(() => normalizeDiagnostics(value, errors, owned ? diagnostics : []), [value, errors, diagnostics, owned]);
|
|
124
|
+
const entityOwned = owned && entityHighlightingEnabled
|
|
125
|
+
&& (analysisOwner?.entityHighlighting === undefined || analysisOwner.entityHighlighting === true);
|
|
126
|
+
const currentDecorations = entityOwned ? decorations : [];
|
|
127
|
+
const lineCount = value.split('\n').length;
|
|
128
|
+
const markerLanes = [];
|
|
129
|
+
const markersPerLine = new Map();
|
|
130
|
+
let maxMarkerLanes = 1;
|
|
131
|
+
for (const item of currentDiagnostics) {
|
|
132
|
+
const line = item.line !== undefined && Number.isFinite(item.line)
|
|
133
|
+
? Math.min(Math.max(1, item.line), lineCount)
|
|
134
|
+
: undefined;
|
|
135
|
+
const lane = wrap === 'off' && line !== undefined ? (markersPerLine.get(line) ?? 0) : 0;
|
|
136
|
+
markerLanes.push(lane);
|
|
137
|
+
if (line !== undefined)
|
|
138
|
+
markersPerLine.set(line, lane + 1);
|
|
139
|
+
maxMarkerLanes = Math.max(maxMarkerLanes, lane + 1);
|
|
140
|
+
}
|
|
141
|
+
const gutterWidth = showLineNumbers ? Math.max(40, 28 + maxMarkerLanes * 12) : Math.max(16, 4 + maxMarkerLanes * 12);
|
|
142
|
+
const paddingLeft = showLineNumbers ? `${gutterWidth + 12}px` : '12px';
|
|
143
|
+
const textStyle = {
|
|
144
|
+
width: '100%', minHeight, padding: `12px 12px 12px ${paddingLeft}`,
|
|
145
|
+
boxSizing: 'border-box', fontFamily: font, fontSize: 14, lineHeight: 1.5,
|
|
146
|
+
whiteSpace: wrap === 'off' ? 'pre' : 'pre-wrap',
|
|
147
|
+
overflowWrap: wrap === 'off' ? 'normal' : 'break-word', tabSize, ...style,
|
|
148
|
+
};
|
|
149
|
+
const fontSizePx = typeof textStyle.fontSize === 'number' ? textStyle.fontSize : Number.parseFloat(String(textStyle.fontSize)) || 14;
|
|
150
|
+
const lineHeightPx = typeof textStyle.lineHeight === 'number'
|
|
151
|
+
? textStyle.lineHeight * fontSizePx : Number.parseFloat(String(textStyle.lineHeight)) || fontSizePx * 1.5;
|
|
152
|
+
const handleKeyDown = useCallback((event) => {
|
|
153
|
+
if (event.key !== 'Tab')
|
|
154
|
+
return;
|
|
155
|
+
event.preventDefault();
|
|
156
|
+
const target = event.currentTarget;
|
|
157
|
+
const start = target.selectionStart;
|
|
158
|
+
const next = `${value.slice(0, start)}${' '.repeat(tabSize)}${value.slice(target.selectionEnd)}`;
|
|
159
|
+
onChange(next);
|
|
160
|
+
requestAnimationFrame(() => { target.selectionStart = target.selectionEnd = start + tabSize; });
|
|
161
|
+
}, [onChange, tabSize, value]);
|
|
162
|
+
const handleScroll = useCallback((event) => {
|
|
163
|
+
if (overlayRef.current) {
|
|
164
|
+
overlayRef.current.scrollTop = event.currentTarget.scrollTop;
|
|
165
|
+
overlayRef.current.scrollLeft = event.currentTarget.scrollLeft;
|
|
147
166
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
backgroundColor: '#ffebee',
|
|
171
|
-
borderRadius: '4px',
|
|
172
|
-
fontSize: '13px',
|
|
173
|
-
}, children: [_jsxs("div", { style: { color: '#c62828', fontWeight: 500, marginBottom: '4px' }, children: [displayErrors.length, " error", displayErrors.length !== 1 ? 's' : ''] }), displayErrors.slice(0, 5).map((error, i) => (_jsxs("div", { style: {
|
|
174
|
-
color: '#b71c1c',
|
|
175
|
-
marginTop: '4px',
|
|
176
|
-
fontFamily: 'monospace',
|
|
177
|
-
fontSize: '12px',
|
|
178
|
-
}, children: ["Line ", error.line, ", Col ", error.column, ": ", error.message] }, i))), displayErrors.length > 5 && (_jsxs("div", { style: { color: '#999', marginTop: '4px', fontSize: '12px' }, children: ["...and ", displayErrors.length - 5, " more"] }))] }))] }));
|
|
167
|
+
if (gutterRef.current)
|
|
168
|
+
gutterRef.current.scrollTop = event.currentTarget.scrollTop;
|
|
169
|
+
}, []);
|
|
170
|
+
useEffect(() => { if (autoFocus)
|
|
171
|
+
textareaRef.current?.focus(); }, [autoFocus]);
|
|
172
|
+
const textColor = editorTheme === 'dark' ? '#f5f5f5' : '#111827';
|
|
173
|
+
return (_jsxs("div", { className: `coral-text-editor ${className || ''}`, style: {
|
|
174
|
+
position: 'relative', width: '100%', minHeight,
|
|
175
|
+
...(style?.height !== undefined ? { height: style.height } : {}),
|
|
176
|
+
background: (style?.backgroundColor ?? style?.background ?? (editorTheme === 'dark' ? '#1e1e1e' : '#fafafa')),
|
|
177
|
+
}, children: [_jsxs(DecorationBoundary, { children: [_jsx(DecorationLayer, { value: value, diagnostics: currentDiagnostics, decorations: currentDecorations, theme: editorTheme, textStyle: textStyle, overlayRef: overlayRef }), _jsxs("div", { ref: gutterRef, "data-testid": "text-editor-marker-gutter", style: { position: 'absolute', inset: '0 auto 0 0', width: gutterWidth, overflow: 'hidden', zIndex: 3 }, children: [_jsx("span", { "aria-hidden": "true", style: { display: 'block', height: 12 + lineCount * lineHeightPx } }), showLineNumbers && Array.from({ length: lineCount }, (_, index) => _jsx("span", { "aria-hidden": "true", style: { position: 'absolute', right: 10, top: 12 + index * lineHeightPx, color: '#777', font: `12px/${lineHeightPx}px ${font}` }, children: index + 1 }, index)), currentDiagnostics.map((item, index) => {
|
|
178
|
+
const knownLine = item.line !== undefined && Number.isFinite(item.line);
|
|
179
|
+
const line = knownLine ? Math.min(Math.max(1, item.line), lineCount) : undefined;
|
|
180
|
+
const detail = item.code ? `[${item.code}] ${item.message}` : item.message;
|
|
181
|
+
const label = `${item.severity === 'warning' ? 'Warning' : item.severity === 'info' ? 'Info' : 'Error'}: ${detail}`;
|
|
182
|
+
return _jsx("button", { type: "button", "aria-label": label, title: detail, "data-offset": item.offset, onFocus: () => setActiveMarker(index), onBlur: () => setActiveMarker(null), onMouseEnter: () => setActiveMarker(index), onMouseLeave: () => setActiveMarker(null), style: { position: 'absolute', left: 2 + markerLanes[index] * 12, top: line === undefined || wrap === 'soft' ? 2 + index * 16 : 14 + (line - 1) * lineHeightPx, width: 10, height: 10, padding: 0, border: 0, borderRadius: '50%', background: '#dc2626', cursor: 'help' } }, index);
|
|
183
|
+
})] }), activeMarker !== null && currentDiagnostics[activeMarker] && _jsxs("div", { role: "tooltip", style: { position: 'absolute', left: 16, top: 2, zIndex: 4, maxWidth: 320, padding: '4px 8px', background: editorTheme === 'dark' ? '#5c2626' : '#ffebee', color: editorTheme === 'dark' ? '#fff' : '#7f1d1d' }, children: [currentDiagnostics[activeMarker].code ? `[${currentDiagnostics[activeMarker].code}] ` : '', currentDiagnostics[activeMarker].message] })] }), _jsx("textarea", { ref: textareaRef, value: value, onChange: (event) => onChange(event.target.value), onSelect: (event) => onSelectionChange?.(event.currentTarget.selectionStart, event.currentTarget.selectionEnd), onKeyDown: handleKeyDown, onScroll: handleScroll, placeholder: placeholder, readOnly: readOnly, spellCheck: false, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", "data-language": language, "aria-label": ariaLabel, wrap: wrap, style: {
|
|
184
|
+
border: '1px solid #e0e0e0', borderRadius: 4, outline: 'none', resize: 'vertical', boxSizing: 'border-box',
|
|
185
|
+
...textStyle,
|
|
186
|
+
position: 'relative', zIndex: 2,
|
|
187
|
+
background: 'transparent', color: textStyle.color ?? textColor, caretColor: textStyle.color ?? textColor,
|
|
188
|
+
} }), currentDiagnostics.length > 0 && _jsxs("div", { className: "coral-text-editor-errors", style: { marginTop: 8, padding: '8px 12px', background: editorTheme === 'dark' ? '#5c2626' : '#ffebee', color: editorTheme === 'dark' ? '#fff' : '#7f1d1d', fontSize: 13 }, children: [_jsxs("div", { children: [currentDiagnostics.length, " error", currentDiagnostics.length === 1 ? '' : 's'] }), currentDiagnostics.slice(0, 5).map((item, index) => _jsxs("div", { style: { marginTop: 4, fontFamily: font, fontSize: 12 }, children: [item.line ? `Line ${item.line}${item.position ? `, Col ${item.position.column + 1}` : ''}: ` : '', item.code ? `[${item.code}] ` : '', item.message] }, index)), currentDiagnostics.length > 5 && _jsxs("div", { style: { marginTop: 4 }, children: ["...and ", currentDiagnostics.length - 5, " more"] })] })] }));
|
|
179
189
|
};
|
|
180
190
|
export default TextEditor;
|
|
181
191
|
//# sourceMappingURL=TextEditor.js.map
|