@eccenca/gui-elements 23.4.1 → 23.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/cjs/extensions/codemirror/CodeMirror.js +9 -2
- package/dist/cjs/extensions/codemirror/CodeMirror.js.map +1 -1
- package/dist/esm/extensions/codemirror/CodeMirror.js +9 -2
- package/dist/esm/extensions/codemirror/CodeMirror.js.map +1 -1
- package/dist/types/extensions/codemirror/CodeMirror.d.ts +14 -1
- package/package.json +1 -1
- package/src/components/Depiction/depiction.scss +27 -13
- package/src/components/Depiction/stories/Depiction.stories.tsx +31 -17
- package/src/components/Depiction/stories/test-dimensionless.svg +41 -0
- package/src/components/Depiction/stories/test-dimensionless.tobase64.svg +41 -0
- package/src/extensions/codemirror/CodeMirror.tsx +27 -1
- package/src/extensions/codemirror/_codemirror.scss +15 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,19 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
6
6
|
|
|
7
7
|
## [Unreleased]
|
|
8
8
|
|
|
9
|
+
## [23.5.0] - 2024-02-15
|
|
10
|
+
|
|
11
|
+
### Added
|
|
12
|
+
|
|
13
|
+
- `<CodeEditor />`
|
|
14
|
+
- visualize the usage of tabulator chars by background color and arrow symbol
|
|
15
|
+
- new `tabIntentSize`, `tabIntentStyle`, `tabForceSpaceForModes` properties to give better control over tabulator usage
|
|
16
|
+
|
|
17
|
+
### Fixed
|
|
18
|
+
|
|
19
|
+
- `<Depiction />`
|
|
20
|
+
- images representing SVG without `width` property on their root element are displayed with a minimal forced dimension to prevent that they are hidden in some browsers
|
|
21
|
+
|
|
9
22
|
## [23.4.1] - 2024-02-08
|
|
10
23
|
|
|
11
24
|
### Fixed
|
|
@@ -50,16 +50,23 @@ exports.supportedCodeEditorModes = [
|
|
|
50
50
|
/**
|
|
51
51
|
* Includes a code editor, currently we use CodeMirror library as base.
|
|
52
52
|
*/
|
|
53
|
-
const CodeEditor = ({ onChange, name, id, mode = "undefined", preventLineNumbers = false, defaultValue, readOnly = false, height, wrapLines = false, outerDivAttributes, }) => {
|
|
53
|
+
const CodeEditor = ({ onChange, name, id, mode = "undefined", preventLineNumbers = false, defaultValue, readOnly = false, height, wrapLines = false, outerDivAttributes, tabIntentSize = 2, tabIntentStyle = "tab", tabForceSpaceForModes = ["python", "yaml"], }) => {
|
|
54
54
|
const domRef = (0, react_1.useRef)(null);
|
|
55
55
|
(0, react_1.useEffect)(() => {
|
|
56
56
|
const editorInstance = codemirror_1.default.fromTextArea(domRef.current, {
|
|
57
57
|
mode: convertMode(mode),
|
|
58
58
|
lineWrapping: wrapLines,
|
|
59
59
|
lineNumbers: !preventLineNumbers,
|
|
60
|
-
tabSize:
|
|
60
|
+
tabSize: tabIntentSize,
|
|
61
|
+
indentUnit: tabIntentSize,
|
|
62
|
+
indentWithTabs: tabIntentStyle === "tab" && !(tabForceSpaceForModes !== null && tabForceSpaceForModes !== void 0 ? tabForceSpaceForModes : []).includes(mode),
|
|
61
63
|
theme: "xq-light",
|
|
62
64
|
readOnly: readOnly,
|
|
65
|
+
extraKeys: {
|
|
66
|
+
Tab: function (cm) {
|
|
67
|
+
cm.execCommand(cm.getOption("indentWithTabs") ? "insertTab" : "insertSoftTab");
|
|
68
|
+
},
|
|
69
|
+
},
|
|
63
70
|
});
|
|
64
71
|
editorInstance.on("change", (api) => {
|
|
65
72
|
onChange(api.getValue());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAyE;AACzE,4DAAmE;AAEnE,gDAA8C;AAC9C,4CAA0C;AAC1C,4CAA0C;AAC1C,sCAAoC;AACpC,4CAA0C;AAC1C,sCAAoC;AACpC,4CAA0C;AAC1C,wCAAsC;AACtC,oDAAkD;AAElD,6DAAsE;AAEzD,QAAA,wBAAwB,GAAG;IACpC,UAAU;IACV,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,MAAM;IACN,MAAM;IACN,WAAW;CACL,CAAC;
|
|
1
|
+
{"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":"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"}
|
|
@@ -37,16 +37,23 @@ export var supportedCodeEditorModes = [
|
|
|
37
37
|
* Includes a code editor, currently we use CodeMirror library as base.
|
|
38
38
|
*/
|
|
39
39
|
export var CodeEditor = function (_a) {
|
|
40
|
-
var onChange = _a.onChange, name = _a.name, id = _a.id, _b = _a.mode, mode = _b === void 0 ? "undefined" : _b, _c = _a.preventLineNumbers, preventLineNumbers = _c === void 0 ? false : _c, defaultValue = _a.defaultValue, _d = _a.readOnly, readOnly = _d === void 0 ? false : _d, height = _a.height, _e = _a.wrapLines, wrapLines = _e === void 0 ? false : _e, outerDivAttributes = _a.outerDivAttributes;
|
|
40
|
+
var onChange = _a.onChange, name = _a.name, id = _a.id, _b = _a.mode, mode = _b === void 0 ? "undefined" : _b, _c = _a.preventLineNumbers, preventLineNumbers = _c === void 0 ? false : _c, defaultValue = _a.defaultValue, _d = _a.readOnly, readOnly = _d === void 0 ? false : _d, height = _a.height, _e = _a.wrapLines, wrapLines = _e === void 0 ? false : _e, outerDivAttributes = _a.outerDivAttributes, _f = _a.tabIntentSize, tabIntentSize = _f === void 0 ? 2 : _f, _g = _a.tabIntentStyle, tabIntentStyle = _g === void 0 ? "tab" : _g, _h = _a.tabForceSpaceForModes, tabForceSpaceForModes = _h === void 0 ? ["python", "yaml"] : _h;
|
|
41
41
|
var domRef = useRef(null);
|
|
42
42
|
useEffect(function () {
|
|
43
43
|
var editorInstance = CodeMirror.fromTextArea(domRef.current, {
|
|
44
44
|
mode: convertMode(mode),
|
|
45
45
|
lineWrapping: wrapLines,
|
|
46
46
|
lineNumbers: !preventLineNumbers,
|
|
47
|
-
tabSize:
|
|
47
|
+
tabSize: tabIntentSize,
|
|
48
|
+
indentUnit: tabIntentSize,
|
|
49
|
+
indentWithTabs: tabIntentStyle === "tab" && !(tabForceSpaceForModes !== null && tabForceSpaceForModes !== void 0 ? tabForceSpaceForModes : []).includes(mode),
|
|
48
50
|
theme: "xq-light",
|
|
49
51
|
readOnly: readOnly,
|
|
52
|
+
extraKeys: {
|
|
53
|
+
Tab: function (cm) {
|
|
54
|
+
cm.execCommand(cm.getOption("indentWithTabs") ? "insertTab" : "insertSoftTab");
|
|
55
|
+
},
|
|
56
|
+
},
|
|
50
57
|
});
|
|
51
58
|
editorInstance.on("change", function (api) {
|
|
52
59
|
onChange(api.getValue());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAA0B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,UAAyC,MAAM,YAAY,CAAC;AAEnE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,8BAA8B,CAAC;AACtC,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEtE,MAAM,CAAC,IAAM,wBAAwB,GAAG;IACpC,UAAU;IACV,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,KAAK;IACL,QAAQ;IACR,MAAM;IACN,MAAM;IACN,WAAW;CACL,CAAC;
|
|
1
|
+
{"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":"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"}
|
|
@@ -45,9 +45,22 @@ export interface CodeEditorProps {
|
|
|
45
45
|
/** Long lines are wrapped and displayed on multiple lines */
|
|
46
46
|
wrapLines?: boolean;
|
|
47
47
|
outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
|
|
48
|
+
/**
|
|
49
|
+
* Size in spaces that is used for a tabulator key.
|
|
50
|
+
*/
|
|
51
|
+
tabIntentSize?: number;
|
|
52
|
+
/**
|
|
53
|
+
* Set the char type that is used for the tabulator key.
|
|
54
|
+
* If set to `space` the a number of `tabIntentSize` spaces is used instead of a tab.
|
|
55
|
+
*/
|
|
56
|
+
tabIntentStyle?: "tab" | "space";
|
|
57
|
+
/**
|
|
58
|
+
* For some modes an indent style with `space` can be forced, even if `tabIntentStyle="tab"` is set.
|
|
59
|
+
*/
|
|
60
|
+
tabForceSpaceForModes?: SupportedCodeEditorModes[];
|
|
48
61
|
}
|
|
49
62
|
/**
|
|
50
63
|
* Includes a code editor, currently we use CodeMirror library as base.
|
|
51
64
|
*/
|
|
52
|
-
export declare const CodeEditor: ({ onChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, height, wrapLines, outerDivAttributes, }: CodeEditorProps) => React.JSX.Element;
|
|
65
|
+
export declare const CodeEditor: ({ onChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, height, wrapLines, outerDivAttributes, tabIntentSize, tabIntentStyle, tabForceSpaceForModes, }: CodeEditorProps) => React.JSX.Element;
|
|
53
66
|
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eccenca/gui-elements",
|
|
3
3
|
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
|
|
4
|
-
"version": "23.
|
|
4
|
+
"version": "23.5.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/eccenca/gui-elements",
|
|
7
7
|
"bugs": "https://github.com/eccenca/gui-elements/issues",
|
|
@@ -3,16 +3,14 @@ $eccgui-size-depiction-height-small: mini-units(6) !default;
|
|
|
3
3
|
$eccgui-size-depiction-height-medium: mini-units(12) !default;
|
|
4
4
|
$eccgui-size-depiction-height-large: mini-units(24) !default;
|
|
5
5
|
$eccgui-size-depiction-height-xlarge: mini-units(48) !default;
|
|
6
|
-
|
|
7
6
|
$eccgui-color-depiction-background: $eccgui-color-workspace-text !default;
|
|
8
7
|
$eccgui-color-depiction-text: $eccgui-color-workspace-background !default;
|
|
9
8
|
$eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
10
9
|
|
|
11
|
-
|
|
12
10
|
.#{$eccgui}-depiction {
|
|
13
|
-
max-width: 100%;
|
|
14
|
-
display: inline-flex;
|
|
15
11
|
position: relative;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
max-width: 100%;
|
|
16
14
|
|
|
17
15
|
.#{$eccgui}-overviewitem__item > & {
|
|
18
16
|
flex-grow: 0;
|
|
@@ -26,12 +24,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
26
24
|
}
|
|
27
25
|
|
|
28
26
|
.#{$eccgui}-depiction__image {
|
|
29
|
-
overflow: hidden;
|
|
30
27
|
max-width: 100%;
|
|
31
28
|
max-height: 100%;
|
|
29
|
+
overflow: hidden;
|
|
32
30
|
border-radius: $eccgui-size-depiction-border-radius;
|
|
33
31
|
|
|
34
|
-
img,
|
|
32
|
+
img,
|
|
33
|
+
svg {
|
|
35
34
|
width: 100%;
|
|
36
35
|
height: 100%;
|
|
37
36
|
}
|
|
@@ -57,10 +56,22 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
57
56
|
.#{$eccgui}-depiction__image--ratio-source {
|
|
58
57
|
aspect-ratio: auto;
|
|
59
58
|
|
|
60
|
-
img,
|
|
59
|
+
img,
|
|
60
|
+
svg {
|
|
61
61
|
max-width: 100%;
|
|
62
62
|
max-height: 100%;
|
|
63
63
|
}
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* SVG images without width property on their SVG root are not (specific: using a width of 0px) displayed by some browsers (e.g. Firefox or Brave).
|
|
67
|
+
* This might be technically correct but to the user it looks like a bug and is not expected by them.
|
|
68
|
+
* We workaround this "problem" by adding minimal dimensions to images with an SVG source.
|
|
69
|
+
*/
|
|
70
|
+
img[src^="data:image/svg"],
|
|
71
|
+
img[src*=".svg"] {
|
|
72
|
+
min-width: $eccgui-size-depiction-height-tiny;
|
|
73
|
+
min-height: $eccgui-size-depiction-height-tiny;
|
|
74
|
+
}
|
|
64
75
|
}
|
|
65
76
|
|
|
66
77
|
.#{$eccgui}-depiction__image--ratio-1to1 {
|
|
@@ -68,19 +79,22 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
68
79
|
}
|
|
69
80
|
|
|
70
81
|
.#{$eccgui}-depiction__image--contain-sizing {
|
|
71
|
-
img,
|
|
82
|
+
img,
|
|
83
|
+
svg {
|
|
72
84
|
object-fit: contain;
|
|
73
85
|
}
|
|
74
86
|
}
|
|
75
87
|
|
|
76
88
|
.#{$eccgui}-depiction__image--cover-sizing {
|
|
77
|
-
img,
|
|
89
|
+
img,
|
|
90
|
+
svg {
|
|
78
91
|
object-fit: cover;
|
|
79
92
|
}
|
|
80
93
|
}
|
|
81
94
|
|
|
82
95
|
.#{$eccgui}-depiction__image--stretch-sizing {
|
|
83
|
-
img,
|
|
96
|
+
img,
|
|
97
|
+
svg {
|
|
84
98
|
object-fit: fill;
|
|
85
99
|
}
|
|
86
100
|
}
|
|
@@ -153,8 +167,8 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
153
167
|
--#{$eccgui}-depiction-color: #{$eccgui-color-depiction-background};
|
|
154
168
|
}
|
|
155
169
|
.#{$eccgui}-depiction__image--color-config {
|
|
156
|
-
background: var(--#{$eccgui}-depiction-background);
|
|
157
170
|
color: var(--#{$eccgui}-depiction-color);
|
|
171
|
+
background: var(--#{$eccgui}-depiction-background);
|
|
158
172
|
|
|
159
173
|
/*
|
|
160
174
|
Lead to more problems, even with our Carbon icons, that it "heals" unknown SVGs
|
|
@@ -166,11 +180,11 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
166
180
|
}
|
|
167
181
|
|
|
168
182
|
.#{$eccgui}-depiction__image--hasborder {
|
|
169
|
-
border: 1px solid
|
|
183
|
+
border: 1px solid currentcolor;
|
|
170
184
|
}
|
|
171
185
|
|
|
172
186
|
.#{$eccgui}-depiction__caption--none,
|
|
173
|
-
|
|
187
|
+
.#{$eccgui}-depiction__caption--tooltip {
|
|
174
188
|
position: fixed;
|
|
175
189
|
left: -5000rem;
|
|
176
190
|
}
|
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { ComponentStory, ComponentMeta } from "@storybook/react";
|
|
3
2
|
import { LogoReact } from "@carbon/icons-react";
|
|
3
|
+
import { Meta, StoryFn } from "@storybook/react";
|
|
4
|
+
|
|
4
5
|
import { Badge, Depiction, Icon, TestIcon } from "../../../index";
|
|
6
|
+
|
|
5
7
|
import canonicalIcons from "./../../Icon/canonicalIconNames";
|
|
6
|
-
import
|
|
8
|
+
import { Svg9to16 } from "./test-9to16";
|
|
7
9
|
import png9to16 from "./test-9to16.png";
|
|
8
|
-
import svg16to9 from "./test-16to9.svg";
|
|
9
10
|
import svg9to16 from "./test-9to16.svg";
|
|
10
|
-
import svg16to9base64 from "./test-16to9.tobase64.svg";
|
|
11
11
|
import svg9to16base64 from "./test-9to16.tobase64.svg";
|
|
12
12
|
import { Svg16to9 } from "./test-16to9";
|
|
13
|
-
import
|
|
13
|
+
import png16to9 from "./test-16to9.png";
|
|
14
|
+
import svg16to9 from "./test-16to9.svg";
|
|
15
|
+
import svg16to9base64 from "./test-16to9.tobase64.svg";
|
|
16
|
+
import svgDimensionless from "./test-dimensionless.svg";
|
|
17
|
+
import svgDimensionlessBase64 from "./test-dimensionless.tobase64.svg";
|
|
14
18
|
|
|
15
19
|
const allIcons = new Map([
|
|
16
|
-
...Object.keys(canonicalIcons).map((keyId) => {
|
|
20
|
+
...Object.keys(canonicalIcons).map((keyId) => {
|
|
21
|
+
return [`Icon: ${keyId}`, <Icon name={keyId} />];
|
|
22
|
+
}),
|
|
17
23
|
]);
|
|
18
24
|
|
|
19
25
|
const exampleImages = {
|
|
@@ -25,18 +31,28 @@ const exampleImages = {
|
|
|
25
31
|
"SVG 9:16 as Base64": <img src={svg9to16base64} />,
|
|
26
32
|
"SVG 16:9 as React element": <Svg16to9 />,
|
|
27
33
|
"SVG 9:16 as React element": <Svg9to16 />,
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
"SVG without known width/height dimensions": <img src={svgDimensionless} />,
|
|
35
|
+
"SVG without known width/height as Base64": <img src={svgDimensionlessBase64} />,
|
|
30
36
|
"Test icon": <TestIcon tryout={LogoReact} />,
|
|
31
37
|
...Object.fromEntries(allIcons),
|
|
32
38
|
};
|
|
33
39
|
|
|
34
40
|
const exampleBadges = {
|
|
35
41
|
"No badge": undefined,
|
|
36
|
-
"Text badge (small, danger, bottom-right)":
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
42
|
+
"Text badge (small, danger, bottom-right)": (
|
|
43
|
+
<Badge maxLength={5} intent="danger" position="bottom-right" size="small">
|
|
44
|
+
Problem occured!
|
|
45
|
+
</Badge>
|
|
46
|
+
),
|
|
47
|
+
"Icon badge (accent, inline, bottom-right)": (
|
|
48
|
+
<Badge intent="info" position="bottom-right">
|
|
49
|
+
<Icon name="application-useraccount" />
|
|
50
|
+
</Badge>
|
|
51
|
+
),
|
|
52
|
+
"Number badge (large, info, top-right)": (
|
|
53
|
+
<Badge maxLength={2} intent="info" position="top-right" size="large" children={123} />
|
|
54
|
+
),
|
|
55
|
+
};
|
|
40
56
|
|
|
41
57
|
export default {
|
|
42
58
|
title: "Components/Depiction",
|
|
@@ -56,14 +72,12 @@ export default {
|
|
|
56
72
|
mapping: exampleBadges,
|
|
57
73
|
},
|
|
58
74
|
},
|
|
59
|
-
} as
|
|
75
|
+
} as Meta<typeof Depiction>;
|
|
60
76
|
|
|
61
|
-
const TemplateFull:
|
|
62
|
-
<Depiction {...args} />
|
|
63
|
-
);
|
|
77
|
+
const TemplateFull: StoryFn<typeof Depiction> = (args) => <Depiction {...args} />;
|
|
64
78
|
|
|
65
79
|
export const FullExample = TemplateFull.bind({});
|
|
66
80
|
FullExample.args = {
|
|
67
81
|
image: <img src={png16to9} />,
|
|
68
|
-
caption: "This is a test description for the image."
|
|
82
|
+
caption: "This is a test description for the image.",
|
|
69
83
|
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
3
|
+
|
|
4
|
+
<svg
|
|
5
|
+
viewBox="0 0 1920 1080"
|
|
6
|
+
version="1.1"
|
|
7
|
+
id="svg3"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
10
|
+
<defs
|
|
11
|
+
id="defs3" />
|
|
12
|
+
<g
|
|
13
|
+
id="g3">
|
|
14
|
+
<path
|
|
15
|
+
id="rect1"
|
|
16
|
+
style="fill:#001155;stroke-width:10.8677;stroke-linecap:square"
|
|
17
|
+
d="M 0,0 H 1920 V 1080 H 0 Z" />
|
|
18
|
+
<path
|
|
19
|
+
id="rect2"
|
|
20
|
+
style="fill:#00092a;stroke:#0033ff;stroke-width:10;stroke-linecap:square"
|
|
21
|
+
d="m 55,55 h 1810 v 970 H 55 Z" />
|
|
22
|
+
<path
|
|
23
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
24
|
+
d="m 55,55 1810,970"
|
|
25
|
+
id="path2" />
|
|
26
|
+
<path
|
|
27
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
28
|
+
d="M 55,1025 1865,55"
|
|
29
|
+
id="path3" />
|
|
30
|
+
<text
|
|
31
|
+
xml:space="preserve"
|
|
32
|
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#ffffff"
|
|
33
|
+
x="530.28101"
|
|
34
|
+
y="589.34882"
|
|
35
|
+
id="text3"><tspan
|
|
36
|
+
x="530.28101"
|
|
37
|
+
y="589.34882"
|
|
38
|
+
id="tspan3"
|
|
39
|
+
style="fill:#ffffff">dimensionless</tspan></text>
|
|
40
|
+
</g>
|
|
41
|
+
</svg>
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
3
|
+
|
|
4
|
+
<svg
|
|
5
|
+
viewBox="0 0 1920 1080"
|
|
6
|
+
version="1.1"
|
|
7
|
+
id="svg3"
|
|
8
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
9
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
10
|
+
<defs
|
|
11
|
+
id="defs3" />
|
|
12
|
+
<g
|
|
13
|
+
id="g3">
|
|
14
|
+
<path
|
|
15
|
+
id="rect1"
|
|
16
|
+
style="fill:#001155;stroke-width:10.8677;stroke-linecap:square"
|
|
17
|
+
d="M 0,0 H 1920 V 1080 H 0 Z" />
|
|
18
|
+
<path
|
|
19
|
+
id="rect2"
|
|
20
|
+
style="fill:#00092a;stroke:#0033ff;stroke-width:10;stroke-linecap:square"
|
|
21
|
+
d="m 55,55 h 1810 v 970 H 55 Z" />
|
|
22
|
+
<path
|
|
23
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
24
|
+
d="m 55,55 1810,970"
|
|
25
|
+
id="path2" />
|
|
26
|
+
<path
|
|
27
|
+
style="fill:none;stroke:#0033ff;stroke-width:10;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-dasharray:none"
|
|
28
|
+
d="M 55,1025 1865,55"
|
|
29
|
+
id="path3" />
|
|
30
|
+
<text
|
|
31
|
+
xml:space="preserve"
|
|
32
|
+
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:133.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:Roboto;fill:#ffffff"
|
|
33
|
+
x="530.28101"
|
|
34
|
+
y="589.34882"
|
|
35
|
+
id="text3"><tspan
|
|
36
|
+
x="530.28101"
|
|
37
|
+
y="589.34882"
|
|
38
|
+
id="tspan3"
|
|
39
|
+
style="fill:#ffffff">dimensionless</tspan></text>
|
|
40
|
+
</g>
|
|
41
|
+
</svg>
|
|
@@ -66,6 +66,22 @@ export interface CodeEditorProps {
|
|
|
66
66
|
wrapLines?: boolean;
|
|
67
67
|
|
|
68
68
|
outerDivAttributes?: Partial<TextareaHTMLAttributes<HTMLDivElement>>;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Size in spaces that is used for a tabulator key.
|
|
72
|
+
*/
|
|
73
|
+
tabIntentSize?: number;
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Set the char type that is used for the tabulator key.
|
|
77
|
+
* If set to `space` the a number of `tabIntentSize` spaces is used instead of a tab.
|
|
78
|
+
*/
|
|
79
|
+
tabIntentStyle?: "tab" | "space";
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* For some modes an indent style with `space` can be forced, even if `tabIntentStyle="tab"` is set.
|
|
83
|
+
*/
|
|
84
|
+
tabForceSpaceForModes?: SupportedCodeEditorModes[];
|
|
69
85
|
}
|
|
70
86
|
|
|
71
87
|
/**
|
|
@@ -82,6 +98,9 @@ export const CodeEditor = ({
|
|
|
82
98
|
height,
|
|
83
99
|
wrapLines = false,
|
|
84
100
|
outerDivAttributes,
|
|
101
|
+
tabIntentSize = 2,
|
|
102
|
+
tabIntentStyle = "tab",
|
|
103
|
+
tabForceSpaceForModes = ["python", "yaml"],
|
|
85
104
|
}: CodeEditorProps) => {
|
|
86
105
|
const domRef = useRef<HTMLTextAreaElement>(null);
|
|
87
106
|
|
|
@@ -90,9 +109,16 @@ export const CodeEditor = ({
|
|
|
90
109
|
mode: convertMode(mode),
|
|
91
110
|
lineWrapping: wrapLines,
|
|
92
111
|
lineNumbers: !preventLineNumbers,
|
|
93
|
-
tabSize:
|
|
112
|
+
tabSize: tabIntentSize,
|
|
113
|
+
indentUnit: tabIntentSize,
|
|
114
|
+
indentWithTabs: tabIntentStyle === "tab" && !(tabForceSpaceForModes ?? []).includes(mode),
|
|
94
115
|
theme: "xq-light",
|
|
95
116
|
readOnly: readOnly,
|
|
117
|
+
extraKeys: {
|
|
118
|
+
Tab: function (cm) {
|
|
119
|
+
cm.execCommand(cm.getOption("indentWithTabs") ? "insertTab" : "insertSoftTab");
|
|
120
|
+
},
|
|
121
|
+
},
|
|
96
122
|
});
|
|
97
123
|
|
|
98
124
|
editorInstance.on("change", (api) => {
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
max-width: 100%;
|
|
8
8
|
|
|
9
9
|
.CodeMirror {
|
|
10
|
+
height: 290px;
|
|
10
11
|
clip-path: unset !important; // we may check later why they set inset(0) now
|
|
11
12
|
border-radius: $pt-border-radius;
|
|
12
|
-
height: 290px;
|
|
13
13
|
|
|
14
14
|
// get them a "border" like input boxes from blueprintjs
|
|
15
15
|
box-shadow: input-transition-shadow($input-shadow-color-focus), $pt-input-box-shadow;
|
|
@@ -54,6 +54,20 @@
|
|
|
54
54
|
.CodeMirror-sizer {
|
|
55
55
|
border-right-width: $eccgui-size-inline-whitespace !important;
|
|
56
56
|
}
|
|
57
|
+
|
|
58
|
+
.cm-tab {
|
|
59
|
+
position: relative;
|
|
60
|
+
|
|
61
|
+
// mark tabulator chars
|
|
62
|
+
background-color: $eccgui-color-info-background;
|
|
63
|
+
|
|
64
|
+
&::after {
|
|
65
|
+
position: absolute;
|
|
66
|
+
left: 10%;
|
|
67
|
+
color: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
|
|
68
|
+
content: "⇥";
|
|
69
|
+
}
|
|
70
|
+
}
|
|
57
71
|
}
|
|
58
72
|
}
|
|
59
73
|
|