@eccenca/gui-elements 23.4.2-rc.0 → 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.
Files changed (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/extensions/codemirror/CodeMirror.js +9 -2
  3. package/dist/cjs/extensions/codemirror/CodeMirror.js.map +1 -1
  4. package/dist/esm/extensions/codemirror/CodeMirror.js +9 -2
  5. package/dist/esm/extensions/codemirror/CodeMirror.js.map +1 -1
  6. package/dist/types/extensions/codemirror/CodeMirror.d.ts +14 -1
  7. package/package.json +1 -1
  8. package/src/extensions/codemirror/CodeMirror.tsx +27 -1
  9. package/src/extensions/codemirror/_codemirror.scss +15 -1
package/CHANGELOG.md CHANGED
@@ -6,6 +6,14 @@ 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
+
9
17
  ### Fixed
10
18
 
11
19
  - `<Depiction />`
package/dist/cjs/extensions/codemirror/CodeMirror.js CHANGED
@@ -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: 2,
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());
package/dist/cjs/extensions/codemirror/CodeMirror.js.map CHANGED
@@ -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;AA4CX;;GAEG;AACI,MAAM,UAAU,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,IAAI,GAAG,WAAW,EAClB,kBAAkB,GAAG,KAAK,EAC1B,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,SAAS,GAAG,KAAK,EACjB,kBAAkB,GACJ,EAAE,EAAE;IAClB,MAAM,MAAM,GAAG,IAAA,cAAM,EAAsB,IAAI,CAAC,CAAC;IAEjD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,cAAc,GAAG,oBAAU,CAAC,YAAY,CAAC,MAAM,CAAC,OAAQ,EAAE;YAC5D,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;YACvB,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,CAAC,kBAAkB;YAChC,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE;YAChC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,EAAE;YACR,cAAc,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;SACxC;QAED,OAAO,SAAS,OAAO;YACnB,cAAc,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEzC,OAAO,CACH,uDAAS,kBAAkB,IAAE,SAAS,EAAE,GAAG,uBAAM,aAAa;QAC1D,4CACI,GAAG,EAAE,MAAM,kBAME,oBAAoB,EACjC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,EAClC,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,GAC5B,CACA,CACT,CAAC;AACN,CAAC,CAAC;AArDW,QAAA,UAAU,cAqDrB;AAEF,MAAM,WAAW,GAAG,CAAC,IAA0C,EAAkD,EAAE;IAC/G,QAAQ,IAAI,EAAE;QACV,KAAK,WAAW;YACZ,OAAO,SAAS,CAAC;QACrB,KAAK,MAAM;YACP,OAAO;gBACH,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,IAAI;aACb,CAAC;QACN;YACI,OAAO,IAAI,CAAC;KACnB;AACL,CAAC,CAAC"}
1
+ {"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":"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"}
package/dist/esm/extensions/codemirror/CodeMirror.js CHANGED
@@ -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: 2,
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());
package/dist/esm/extensions/codemirror/CodeMirror.js.map CHANGED
@@ -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;AA4CX;;GAEG;AACH,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,EAWT;QAVd,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,YAAkB,EAAlB,IAAI,mBAAG,WAAW,KAAA,EAClB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EAC1B,YAAY,kBAAA,EACZ,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,MAAM,YAAA,EACN,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,kBAAkB,wBAAA;IAElB,IAAM,MAAM,GAAG,MAAM,CAAsB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC;QACN,IAAM,cAAc,GAAG,UAAU,CAAC,YAAY,CAAC,MAAM,CAAC,OAAQ,EAAE;YAC5D,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;YACvB,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,CAAC,kBAAkB;YAChC,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAC,GAAG;YAC5B,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,EAAE;YACR,cAAc,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;SACxC;QAED,OAAO,SAAS,OAAO;YACnB,cAAc,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEzC,OAAO,CACH,wCAAS,kBAAkB,IAAE,SAAS,EAAK,MAAM,gBAAa;QAC1D,kCACI,GAAG,EAAE,MAAM,kBAME,oBAAoB,EACjC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAc,IAAM,EAClC,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,GAC5B,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAAC,IAA0C;IAC3D,QAAQ,IAAI,EAAE;QACV,KAAK,WAAW;YACZ,OAAO,SAAS,CAAC;QACrB,KAAK,MAAM;YACP,OAAO;gBACH,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE,IAAI;aACb,CAAC;QACN;YACI,OAAO,IAAI,CAAC;KACnB;AACL,CAAC,CAAC"}
1
+ {"version":3,"file":"CodeMirror.js","sourceRoot":"","sources":["../../../../src/extensions/codemirror/CodeMirror.tsx"],"names":[],"mappings":"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"}
package/dist/types/extensions/codemirror/CodeMirror.d.ts CHANGED
@@ -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.2-rc.0",
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",
package/src/extensions/codemirror/CodeMirror.tsx CHANGED
@@ -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: 2,
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) => {
package/src/extensions/codemirror/_codemirror.scss CHANGED
@@ -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