You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kie.apache.org by fa...@apache.org on 2025/05/01 22:38:54 UTC
(incubator-kie-tools) 01/01: Creation of MonacoTextField
This is an automated email from the ASF dual-hosted git repository.
fantonangeli pushed a commit to branch kie-tools-issues#3097-SonataFlow-Dev-UI-does-not-render-object-input
in repository https://gitbox.apache.org/repos/asf/incubator-kie-tools.git
commit 5ee8e1d1eb9a463ef38672b9d8655fa8bedc3634
Author: fantonangeli <fa...@gmail.com>
AuthorDate: Fri May 2 00:37:56 2025 +0200
Creation of MonacoTextField
---
examples/uniforms-patternfly/package.json | 2 +
.../uniforms-patternfly/src/schemas/json-schema.ts | 4 +
examples/uniforms-patternfly/webpack.config.js | 4 +
packages/uniforms-patternfly/package.json | 1 +
packages/uniforms-patternfly/src/AutoField.tsx | 3 +-
.../uniforms-patternfly/src/MonacoTextField.tsx | 74 ++++++++++++++
packages/uniforms-patternfly/src/index.ts | 1 +
pnpm-lock.yaml | 113 +++++----------------
8 files changed, 115 insertions(+), 87 deletions(-)
diff --git a/examples/uniforms-patternfly/package.json b/examples/uniforms-patternfly/package.json
index 5ce2c91659a..571f8ad2701 100644
--- a/examples/uniforms-patternfly/package.json
+++ b/examples/uniforms-patternfly/package.json
@@ -17,6 +17,8 @@
"ajv": "^8.17.1",
"ajv-draft-04": "^1.0.0",
"ajv-formats": "^3.0.1",
+ "monaco-editor": "^0.39.0",
+ "monaco-editor-webpack-plugin": "^7.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"simpl-schema": "^1.12.0",
diff --git a/examples/uniforms-patternfly/src/schemas/json-schema.ts b/examples/uniforms-patternfly/src/schemas/json-schema.ts
index ca8a30c0506..b4097583195 100644
--- a/examples/uniforms-patternfly/src/schemas/json-schema.ts
+++ b/examples/uniforms-patternfly/src/schemas/json-schema.ts
@@ -60,6 +60,10 @@ const schema = {
max: "2000-04-04T10:30:00.000Z",
description: "this is the date and time field",
},
+ customData: {
+ type: "string",
+ format: "json",
+ },
},
disabled: false,
},
diff --git a/examples/uniforms-patternfly/webpack.config.js b/examples/uniforms-patternfly/webpack.config.js
index d9b22fcd1aa..43be40fe183 100644
--- a/examples/uniforms-patternfly/webpack.config.js
+++ b/examples/uniforms-patternfly/webpack.config.js
@@ -19,6 +19,7 @@
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
+const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const patternflyBase = require("@kie-tools-core/patternfly-base");
const common = require("@kie-tools-core/webpack-base/webpack.common.config");
const { merge } = require("webpack-merge");
@@ -36,6 +37,9 @@ module.exports = (webpackEnv) => [
rules: [...patternflyBase.webpackModuleRules],
},
plugins: [
+ new MonacoWebpackPlugin({
+ languages: ["json"],
+ }),
new CopyPlugin({
patterns: [{ from: "./static", to: "." }],
}),
diff --git a/packages/uniforms-patternfly/package.json b/packages/uniforms-patternfly/package.json
index 52cfc581836..7e989ba490f 100644
--- a/packages/uniforms-patternfly/package.json
+++ b/packages/uniforms-patternfly/package.json
@@ -31,6 +31,7 @@
"@types/invariant": "^2.2.35",
"invariant": "^2.2.4",
"lodash": "^4.17.21",
+ "monaco-editor": "^0.39.0",
"uniforms": "^3.10.2"
},
"devDependencies": {
diff --git a/packages/uniforms-patternfly/src/AutoField.tsx b/packages/uniforms-patternfly/src/AutoField.tsx
index 366aced122d..5d43b62c713 100644
--- a/packages/uniforms-patternfly/src/AutoField.tsx
+++ b/packages/uniforms-patternfly/src/AutoField.tsx
@@ -27,6 +27,7 @@ import NumField from "./NumField";
import RadioField from "./RadioField";
import SelectField from "./SelectField";
import TextField from "./TextField";
+import MonacoTextField from "./MonacoTextField";
export type AutoFieldProps = Parameters<typeof AutoField>[0];
@@ -47,7 +48,7 @@ const AutoField = createAutoField((props) => {
case Object:
return NestField;
case String:
- return TextField;
+ return props.field.format === "json" ? MonacoTextField : TextField;
}
return invariant(false, "Unsupported field type: %s", props.fieldType);
diff --git a/packages/uniforms-patternfly/src/MonacoTextField.tsx b/packages/uniforms-patternfly/src/MonacoTextField.tsx
new file mode 100644
index 00000000000..5ce9ed78f23
--- /dev/null
+++ b/packages/uniforms-patternfly/src/MonacoTextField.tsx
@@ -0,0 +1,74 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import * as React from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { TextArea } from "@patternfly/react-core/dist/js/components/TextArea";
+// import * as Monaco from "@kie-tools-core/monaco-editor";
+import * as Monaco from "monaco-editor";
+import { connectField, filterDOMProps, HTMLFieldProps } from "uniforms";
+
+export type MonacoTextFieldProps = HTMLFieldProps<
+ string,
+ HTMLDivElement,
+ {
+ inputRef?: React.RefObject<HTMLTextAreaElement>;
+ onChange: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+ value?: string;
+ prefix?: string;
+ }
+>;
+
+function MonacoTextField({
+ disabled,
+ id,
+ inputRef,
+ label,
+ name,
+ onChange,
+ placeholder,
+ value,
+ ...props
+}: MonacoTextFieldProps) {
+ const container = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ const editor = Monaco.editor.create(container.current!, {
+ value: `{"name":"John", "age":30, "car":null}`,
+ language: "json",
+ });
+ editor.onDidChangeModelContent(() => {
+ const newValue = editor.getValue();
+ onChange?.(newValue, {} as React.ChangeEvent<HTMLTextAreaElement>);
+ });
+ }, []);
+
+ return (
+ <div data-testid={"monaco-field"} {...filterDOMProps(props)}>
+ {label && (
+ <label>
+ <b>{label}</b>
+ </label>
+ )}
+ <div id={id} aria-label={name} style={{ height: "250px" }} ref={container} />
+ </div>
+ );
+}
+
+export default connectField(MonacoTextField);
diff --git a/packages/uniforms-patternfly/src/index.ts b/packages/uniforms-patternfly/src/index.ts
index c94d2c8d1e4..44bae5733a7 100644
--- a/packages/uniforms-patternfly/src/index.ts
+++ b/packages/uniforms-patternfly/src/index.ts
@@ -31,6 +31,7 @@ export { default as ListDelField } from "./ListDelField";
export { default as ListField } from "./ListField";
export { default as ListItemField } from "./ListItemField";
export { default as LongTextField } from "./LongTextField";
+export { default as MonacoTextField } from "./MonacoTextField";
export { default as NestField } from "./NestField";
export { default as NumField } from "./NumField";
export { default as QuickForm } from "./QuickForm";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e784da24432..2d4e7435647 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1644,6 +1644,12 @@ importers:
ajv-formats:
specifier: ^3.0.1
version: 3.0.1(ajv@8.17.1)
+ monaco-editor:
+ specifier: ^0.39.0
+ version: 0.39.0
+ monaco-editor-webpack-plugin:
+ specifier: ^7.0.1
+ version: 7.0.1(monaco-editor@0.39.0)(monaco-yaml@4.0.4(monaco-editor@0.39.0))(webpack@5.94.0(webpack-cli@4.10.0))
react:
specifier: ^17.0.2
version: 17.0.2
@@ -13067,6 +13073,9 @@ importers:
lodash:
specifier: ^4.17.21
version: 4.17.21
+ monaco-editor:
+ specifier: ^0.39.0
+ version: 0.39.0
react:
specifier: '>=17.0.2 <19.0.0'
version: 17.0.2
@@ -22845,17 +22854,6 @@ packages:
cross-fetch@3.1.5:
resolution: {integrity: sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==}
- cross-spawn@5.1.0:
- resolution: {integrity: sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==}
-
- cross-spawn@6.0.5:
- resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
- engines: {node: '>=4.8'}
-
- cross-spawn@7.0.3:
- resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
- engines: {node: '>= 8'}
-
cross-spawn@7.0.6:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'}
@@ -26573,9 +26571,6 @@ packages:
resolution: {integrity: sha512-CgeuL5uom6j/ZVrg7G/+1IXqRY8JXX4Hghfy5YE0EhoYQWvndP1kufu58cmZLNIDKnRhZrXfdS9urVWx98AipQ==}
engines: {node: 20 || >=22}
- lru-cache@4.1.5:
- resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
-
lru-cache@5.1.1:
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
@@ -27117,9 +27112,6 @@ packages:
resolution: {integrity: sha512-px/KnJAJZf5RuBGcfD+Sp2pAKq0ytz8j+1NehvgIGFkvtvFrDM3T8E4x/JJODXK9WZow8RRGrbA9QQ3hs+pDhA==}
os: ['!win32']
- nice-try@1.0.5:
- resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
-
no-case@3.0.4:
resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -28312,9 +28304,6 @@ packages:
engines: {node: '>= 0.10'}
hasBin: true
- pseudomap@1.0.2:
- resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==}
-
psl@1.8.0:
resolution: {integrity: sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==}
@@ -29443,18 +29432,10 @@ packages:
resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
engines: {node: '>=8'}
- shebang-command@1.2.0:
- resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==}
- engines: {node: '>=0.10.0'}
-
shebang-command@2.0.0:
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'}
- shebang-regex@1.0.0:
- resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
- engines: {node: '>=0.10.0'}
-
shebang-regex@3.0.0:
resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
engines: {node: '>=8'}
@@ -31464,9 +31445,6 @@ packages:
resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
engines: {node: '>=10'}
- yallist@2.1.2:
- resolution: {integrity: sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==}
-
yallist@3.1.1:
resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
@@ -42115,7 +42093,7 @@ snapshots:
'@yarnpkg/libzip': 2.3.0
chalk: 4.1.2
commander: 6.2.1
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
detect-indent: 6.1.0
envinfo: 7.8.1
execa: 5.1.1
@@ -42164,7 +42142,7 @@ snapshots:
'@yarnpkg/libzip': 2.3.0
chalk: 4.1.2
commander: 6.2.1
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
detect-indent: 6.1.0
envinfo: 7.8.1
execa: 5.1.1
@@ -42213,7 +42191,7 @@ snapshots:
'@yarnpkg/libzip': 2.3.0
chalk: 4.1.2
commander: 6.2.1
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
detect-indent: 6.1.0
envinfo: 7.8.1
execa: 5.1.1
@@ -42265,7 +42243,7 @@ snapshots:
'@storybook/node-logger': 7.4.6
'@storybook/types': 7.4.6
'@types/cross-spawn': 6.0.3
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
globby: 11.1.0
jscodeshift: 0.14.0(@babel/preset-env@7.24.7(@babel/core@7.24.9))
lodash: 4.17.21
@@ -42284,7 +42262,7 @@ snapshots:
'@storybook/node-logger': 7.6.13
'@storybook/types': 7.6.13
'@types/cross-spawn': 6.0.3
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
globby: 11.1.0
jscodeshift: 0.15.1(@babel/preset-env@7.24.7(@babel/core@7.24.9))
lodash: 4.17.21
@@ -47598,7 +47576,7 @@ snapshots:
cross-env@7.0.3:
dependencies:
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
cross-fetch@3.1.5(encoding@0.1.13):
dependencies:
@@ -47606,26 +47584,6 @@ snapshots:
transitivePeerDependencies:
- encoding
- cross-spawn@5.1.0:
- dependencies:
- lru-cache: 4.1.5
- shebang-command: 1.2.0
- which: 1.3.1
-
- cross-spawn@6.0.5:
- dependencies:
- nice-try: 1.0.5
- path-key: 2.0.1
- semver: 5.7.1
- shebang-command: 1.2.0
- which: 1.3.1
-
- cross-spawn@7.0.3:
- dependencies:
- path-key: 3.1.1
- shebang-command: 2.0.0
- which: 2.0.2
-
cross-spawn@7.0.6:
dependencies:
path-key: 3.1.1
@@ -49229,7 +49187,7 @@ snapshots:
'@ungap/structured-clone': 1.2.0
ajv: 6.12.6
chalk: 4.1.2
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
debug: 4.3.4
doctrine: 3.0.0
escape-string-regexp: 4.0.0
@@ -49321,7 +49279,7 @@ snapshots:
execa@0.7.0:
dependencies:
- cross-spawn: 5.1.0
+ cross-spawn: 7.0.6
get-stream: 3.0.0
is-stream: 1.1.0
npm-run-path: 2.0.2
@@ -49331,7 +49289,7 @@ snapshots:
execa@1.0.0:
dependencies:
- cross-spawn: 6.0.5
+ cross-spawn: 7.0.6
get-stream: 4.1.0
is-stream: 1.1.0
npm-run-path: 2.0.2
@@ -49341,7 +49299,7 @@ snapshots:
execa@4.1.0:
dependencies:
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
get-stream: 5.2.0
human-signals: 1.1.1
is-stream: 2.0.1
@@ -49365,7 +49323,7 @@ snapshots:
execa@8.0.1:
dependencies:
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
get-stream: 8.0.1
human-signals: 5.0.0
is-stream: 3.0.0
@@ -49864,12 +49822,12 @@ snapshots:
foreground-child@2.0.0:
dependencies:
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
signal-exit: 3.0.7
foreground-child@3.1.1:
dependencies:
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
signal-exit: 4.1.0
forever-agent@0.6.1: {}
@@ -52886,11 +52844,6 @@ snapshots:
lru-cache@11.0.1: {}
- lru-cache@4.1.5:
- dependencies:
- pseudomap: 1.0.2
- yallist: 2.1.2
-
lru-cache@5.1.1:
dependencies:
yallist: 3.1.1
@@ -53380,7 +53333,7 @@ snapshots:
prettier: 2.8.8
vscode-languageserver-textdocument: 1.0.7
vscode-languageserver-types: 3.17.2
- vscode-uri: 3.0.7
+ vscode-uri: 3.1.0
yaml: 2.3.2
mongo-object@0.1.4: {}
@@ -53497,8 +53450,6 @@ snapshots:
node-gyp-build: 4.3.0
optional: true
- nice-try@1.0.5: {}
-
no-case@3.0.4:
dependencies:
lower-case: 2.0.2
@@ -54809,8 +54760,6 @@ snapshots:
dependencies:
event-stream: 3.3.4
- pseudomap@1.0.2: {}
-
psl@1.8.0: {}
pstree.remy@1.1.8: {}
@@ -56283,16 +56232,10 @@ snapshots:
dependencies:
kind-of: 6.0.3
- shebang-command@1.2.0:
- dependencies:
- shebang-regex: 1.0.0
-
shebang-command@2.0.0:
dependencies:
shebang-regex: 3.0.0
- shebang-regex@1.0.0: {}
-
shebang-regex@3.0.0: {}
shell-quote@1.8.1: {}
@@ -57764,7 +57707,7 @@ snapshots:
'@tsconfig/node14': 1.0.3
'@tsconfig/node16': 1.0.3
'@types/node': 22.13.10
- acorn: 8.12.1
+ acorn: 8.10.0
acorn-walk: 8.2.0
arg: 4.1.0
create-require: 1.1.1
@@ -58694,7 +58637,7 @@ snapshots:
'@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack-bundle-analyzer@4.10.2)(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack-dev-server@4.15.1(webpack-cli@4.10.0)(webpack@5.94.0))
colorette: 2.0.16
commander: 7.2.0
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
fastest-levenshtein: 1.0.12
import-local: 3.0.2
interpret: 2.2.0
@@ -58713,7 +58656,7 @@ snapshots:
'@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.94.0))(webpack-dev-server@4.15.1(webpack-cli@4.10.0)(webpack@5.94.0))
colorette: 2.0.16
commander: 7.2.0
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
fastest-levenshtein: 1.0.12
import-local: 3.0.2
interpret: 2.2.0
@@ -58731,7 +58674,7 @@ snapshots:
'@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack@5.94.0))
colorette: 2.0.16
commander: 7.2.0
- cross-spawn: 7.0.3
+ cross-spawn: 7.0.6
fastest-levenshtein: 1.0.12
import-local: 3.0.2
interpret: 2.2.0
@@ -59442,8 +59385,6 @@ snapshots:
y18n@5.0.8: {}
- yallist@2.1.2: {}
-
yallist@3.1.1: {}
yallist@4.0.0: {}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@kie.apache.org
For additional commands, e-mail: commits-help@kie.apache.org