This web components embed a WarpScript editor dedicated to Warp 10.
$ npm install @senx/discovery-code
<script nomodule src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.esm.js"></script><html lang="en">
<head>
<title>Test</title>
</head>
<body>
<div style="width: 100%; min-height: calc(100vh - 280px);overflow: hidden;">
<discovery-code-editor url="https://sandbox.senx.io/api/v0/exec"
debug="true" show-dataviz="false"
id="editor"
show-execute="true" debug
show-result="true" config='{}'
display-messages="true" initial-size="400">
NEWGTS 'v' STORE
0 10 <%
'ts' STORE
$v NOW $ts STU * - NaN NaN NaN RAND ADDVALUE DROP
%> FOR
$v
</discovery-code-editor>
</div>
<script nomodule src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@senx/discovery-code/dist/discovery-code/discovery-code.esm.js"></script>
</body>
</html>| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
code |
code |
string |
'' |
|
config |
config |
Config | string |
new Config() |
|
debug |
debug |
boolean |
false |
|
displayMessages |
display-messages |
boolean |
false |
|
existingComments |
existing-comments |
ReviewCommentEvent[] | string |
[] |
|
heightLine |
height-line |
number |
undefined |
|
heightPx |
height-px |
number |
undefined |
|
imageTab |
image-tab |
boolean |
false |
|
initialSize |
-- | { w?: number; h?: number; name?: string; p?: number; } |
undefined |
|
language |
language |
"flows" | "warpscript" |
'warpscript' |
|
showDataviz |
show-dataviz |
boolean |
false |
|
showExecute |
show-execute |
boolean |
false |
|
showResult |
show-result |
boolean |
false |
|
theme |
theme |
"dark" | "light" |
'light' |
|
url |
url |
string |
undefined |
|
widthPx |
width-px |
number |
undefined |
| Event | Description | Type |
|---|---|---|
discoveryCodeBreakPoint |
CustomEvent<any> |
|
discoveryCodeChanged |
CustomEvent<any> |
|
discoveryCodeDataviz |
CustomEvent<any> |
|
discoveryCodeError |
CustomEvent<any> |
|
discoveryCodeLoaded |
CustomEvent<any> |
|
discoveryCodeRef |
CustomEvent<any> |
|
discoveryCodeResult |
CustomEvent<any> |
|
discoveryCodeReview |
CustomEvent<any> |
|
discoveryCodeSize |
CustomEvent<any> |
|
discoveryCodeStatus |
CustomEvent<any> |
Type: Promise<void>
Type: Promise<void>
Type: Promise<void>
Type: Promise<void>
{
"buttons" : {
"class": ""
},
"execButton" : {
"class": "",
"label": "Execute"
},
"datavizButton" : {
"class": "",
"label": "Visualize"
},
"hover" : true,
"readOnly" : false,
"messageClass" : "",
"errorClass" : "",
"editor": {
"quickSuggestionsDelay": 10,
"quickSuggestions": true,
"tabSize": 2,
"minLineNumber": 10,
"enableDebug": false
}
}| Name | Default value |
|---|---|
--warp-view-button-font-size |
1rem |
--warp-view-button-border-color |
#004eff |
--warp-view-button-padding |
.375rem .75rem |
--warp-view-button-label-color |
#ffffff |
--warp-view-button-bg-color |
#004eff |
--warp-view-button-bg-color |
#004eff |
--warp-view-button-width |
auto |
--warp-view-button-border-radius |
0.25rem |
--warp-view-spinner-color |
#004eff |
| Name | Default value |
|---|---|
--discovery-code-status-bar-font-color |
#404040 |
--discovery-code-status-bar-background |
#c0c0c0 |
--discovery-code-breakpoint-color |
#dc3545 |
--discovery-code-selected-line-color |
#00abc066 |