From c77b8c1dd6a0ab4df18f8a85335f986f40cc0096 Mon Sep 17 00:00:00 2001 From: Kodai Aoyama Date: Mon, 16 May 2022 01:23:38 +0900 Subject: [PATCH] change editor to monaco --- README.ja.md | 9 +- README.md | 45 +++-- ui/package-lock.json | 154 ++++++++---------- ui/package.json | 4 +- ui/src/rete.jsx | 20 --- .../rete/controls/EditableHtmlComponent.jsx | 45 ++--- .../rete/controls/EditableJsonComponent.jsx | 40 +---- ui/src/rete/controls/EditableSqlComponent.jsx | 37 ++--- ui/src/rete/controls/EditableUrlComponent.jsx | 34 ++-- ui/src/rete/controls/JsonManagerControl.jsx | 10 +- .../template/EditableHandlebarsComponent.jsx | 70 +++----- .../template/EditablePugComponent.jsx | 64 +++----- ui/src/styles.css | 23 +-- 13 files changed, 215 insertions(+), 340 deletions(-) diff --git a/README.ja.md b/README.ja.md index 739ac74..07921a9 100644 --- a/README.ja.md +++ b/README.ja.md @@ -195,16 +195,14 @@ TUNA-Mayonnaise（ツナマヨ）は、多くのOSSによって成り立って | ライブラリ | ライセンス | | :------------- | :------------- | + | [@monaco-editor/react](https://www.npmjs.com/package/@monaco-editor/react) | MIT License | | [file-saver](https://www.npmjs.com/package/file-saver) | MIT License | | [handlebars](https://www.npmjs.com/package/handlebars) | MIT License | | [js-sql-parser](https://github.com/JavaScriptor/js-sql-parser) | MIT License | - | [jsonlint-mod](https://github.com/circlecell/jsonlint-mod) | MIT License | - | [prismjs](https://www.npmjs.com/package/prismjs) | MIT License | | [pug](https://www.npmjs.com/package/pug) | MIT License | | [react](https://www.npmjs.com/package/react) | MIT License | | [react-dom](https://www.npmjs.com/package/react-dom) | MIT License | | [react-modal](https://www.npmjs.com/package/react-modal) | MIT License | - | [react-simple-code-editor](https://www.npmjs.com/package/react-simple-code-editor) | MIT License | | [react-hot-toast](https://www.npmjs.com/package/react-hot-toast) | MIT License | | [regenerator-runtime](https://www.npmjs.com/package/regenerator-runtime) | MIT License | | [rete](https://www.npmjs.com/package/rete) | MIT License | @@ -223,6 +221,10 @@ TUNA-Mayonnaise（ツナマヨ）は、多くのOSSによって成り立って | ライブラリ | ライセンス | | :------------- | :------------- | + | [@types/pug](https://www.npmjs.com/package/@types/pug) | MIT License | + | [@types/react](https://www.npmjs.com/package/@types/react) | MIT License | + | [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) | MIT License | + | [@types/react-modal](https://www.npmjs.com/package/@types/react-modal) | MIT License | | [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react) | MIT License | | [eslint](https://www.npmjs.com/package/eslint) | MIT License | | [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) | MIT License | @@ -240,5 +242,6 @@ TUNA-Mayonnaise（ツナマヨ）は、多くのOSSによって成り立って | [stylelint-config-recommended](https://www.npmjs.com/package/stylelint-config-recommended) | MIT License | | [stylelint-order](https://www.npmjs.com/package/stylelint-order) | MIT License | | [stylelint-prettier](https://www.npmjs.com/package/stylelint-prettier) | MIT License | + | [typescript](https://www.npmjs.com/package/typescript) | Apache License 2.0 | | [vite](https://www.npmjs.com/package/vite) | MIT License | | [vite-plugin-externals](https://www.npmjs.com/package/vite-plugin-externals) | MIT License | diff --git a/README.md b/README.md index 42c63df..74897c8 100644 --- a/README.md +++ b/README.md @@ -18,20 +18,28 @@ TUNA-Mayonnaise is a CommandLineTool to generate and serve JSON/HTML on the node
CLICK -- [Why](#why) -- [Get Started](#get-started) - - [Install](#install) - - [Usage](#usage) -- [Tool Features](#tool-features) - - [Template Engine](#template-engine) - - [API](#api) - - [Database](#database) -- [API Features](#api-features) - - [Monitoring](#monitoring) -- [Dependencies](#dependencies) - - [BACKEND Dependencies](#backend-dependencies) - - [FRONTEND Dependencies](#frontend-dependencies) - - [FRONTEND DEV Dependencies](#frontend-dev-dependencies) +- [!tuna-mayonnaise](#) + - [Table of Contents](#table-of-contents) + - [Why](#why) + - [Get Started](#get-started) + - [Install](#install) + - [For MacOS (Homebrew)](#for-macos-homebrew) + - [For Others (Binary Releases)](#for-others-binary-releases) + - [Usage](#usage) + - [1. Launch a tool on your browser](#1-launch-a-tool-on-your-browser) + - [2. Serve your JSON/HTML](#2-serve-your-jsonhtml) + - [Tool Features](#tool-features) + - [Template Engine](#template-engine) + - [API](#api) + - [Database](#database) + - [Connection Options](#connection-options) + - [TLS / SSL](#tls--ssl) + - [API Features](#api-features) + - [Monitoring](#monitoring) + - [Dependencies](#dependencies) + - [BACKEND Dependencies](#backend-dependencies) + - [FRONTEND Dependencies](#frontend-dependencies) + - [FRONTEND DEV Dependencies](#frontend-dev-dependencies)
@@ -198,16 +206,14 @@ TUNA-Mayonnaise stands on the shoulder of many great open source libraries, in l | Dependency | License | | :------------- | :------------- | + | [@monaco-editor/react](https://www.npmjs.com/package/@monaco-editor/react) | MIT License | | [file-saver](https://www.npmjs.com/package/file-saver) | MIT License | | [handlebars](https://www.npmjs.com/package/handlebars) | MIT License | | [js-sql-parser](https://github.com/JavaScriptor/js-sql-parser) | MIT License | - | [jsonlint-mod](https://github.com/circlecell/jsonlint-mod) | MIT License | - | [prismjs](https://www.npmjs.com/package/prismjs) | MIT License | | [pug](https://www.npmjs.com/package/pug) | MIT License | | [react](https://www.npmjs.com/package/react) | MIT License | | [react-dom](https://www.npmjs.com/package/react-dom) | MIT License | | [react-modal](https://www.npmjs.com/package/react-modal) | MIT License | - | [react-simple-code-editor](https://www.npmjs.com/package/react-simple-code-editor) | MIT License | | [react-hot-toast](https://www.npmjs.com/package/react-hot-toast) | MIT License | | [regenerator-runtime](https://www.npmjs.com/package/regenerator-runtime) | MIT License | | [rete](https://www.npmjs.com/package/rete) | MIT License | @@ -226,6 +232,10 @@ TUNA-Mayonnaise stands on the shoulder of many great open source libraries, in l | Dependency | License | | :------------- | :------------- | + | [@types/pug](https://www.npmjs.com/package/@types/pug) | MIT License | + | [@types/react](https://www.npmjs.com/package/@types/react) | MIT License | + | [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) | MIT License | + | [@types/react-modal](https://www.npmjs.com/package/@types/react-modal) | MIT License | | [@vitejs/plugin-react](https://www.npmjs.com/package/@vitejs/plugin-react) | MIT License | | [eslint](https://www.npmjs.com/package/eslint) | MIT License | | [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) | MIT License | @@ -243,5 +253,6 @@ TUNA-Mayonnaise stands on the shoulder of many great open source libraries, in l | [stylelint-config-recommended](https://www.npmjs.com/package/stylelint-config-recommended) | MIT License | | [stylelint-order](https://www.npmjs.com/package/stylelint-order) | MIT License | | [stylelint-prettier](https://www.npmjs.com/package/stylelint-prettier) | MIT License | + | [typescript](https://www.npmjs.com/package/typescript) | Apache License 2.0 | | [vite](https://www.npmjs.com/package/vite) | MIT License | | [vite-plugin-externals](https://www.npmjs.com/package/vite-plugin-externals) | MIT License | diff --git a/ui/package-lock.json b/ui/package-lock.json index d99f4b1..776bc9e 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -9,16 +9,14 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@monaco-editor/react": "4.4.5", "file-saver": "^2.0.5", "handlebars": "^4.7.7", "js-sql-parser": "1.4.1", - "jsonlint-mod": "1.7.6", - "prismjs": "1.28.0", "react": "18.1.0", "react-dom": "18.1.0", "react-hot-toast": "2.2.0", "react-modal": "3.15.1", - "react-simple-code-editor": "0.11.0", "regenerator-runtime": "0.13.9", "rete": "1.4.7", "rete-area-plugin": "0.2.1", @@ -596,6 +594,31 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz", + "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==", + "dependencies": { + "state-local": "^1.0.6" + }, + "peerDependencies": { + "monaco-editor": ">= 0.21.0 < 1" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.5.tgz", + "integrity": "sha512-IImtzU7sRc66OOaQVCG+5PFHkSWnnhrUWGBuH6zNmH2h0YgmAhcjHZQc/6MY9JWEbUtVF1WPBMJ9u1XuFbRrVA==", + "dependencies": { + "@monaco-editor/loader": "^1.3.2", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -812,6 +835,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -1066,6 +1090,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -1168,6 +1193,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "dependencies": { "color-name": "1.1.3" } @@ -1175,7 +1201,8 @@ "node_modules/color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "node_modules/colord": { "version": "2.9.2", @@ -1870,6 +1897,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true, "engines": { "node": ">=0.8.0" } @@ -2851,6 +2879,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true, "engines": { "node": ">=4" } @@ -3390,30 +3419,6 @@ "graceful-fs": "^4.1.6" } }, - "node_modules/jsonlint-mod": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/jsonlint-mod/-/jsonlint-mod-1.7.6.tgz", - "integrity": "sha512-oGuk6E1ehmIpw0w9ttgb2KsDQQgGXBzZczREW8OfxEm9eCQYL9/LCexSnh++0z3AiYGcXpBgqDSx9AAgzl/Bvg==", - "dependencies": { - "chalk": "^2.4.2", - "JSV": "^4.0.2", - "underscore": "^1.9.1" - }, - "bin": { - "jsonlint": "lib/cli.js" - }, - "engines": { - "node": ">= 0.6" - } - }, - "node_modules/JSV": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz", - "integrity": "sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c=", - "engines": { - "node": "*" - } - }, "node_modules/jsx-ast-utils": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz", @@ -4478,14 +4483,6 @@ "node": ">=6.0.0" } }, - "node_modules/prismjs": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", - "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==", - "engines": { - "node": ">=6" - } - }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -4609,15 +4606,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-simple-code-editor": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==", - "peerDependencies": { - "react": "^16.0.0", - "react-dom": "^16.0.0" - } - }, "node_modules/read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -5216,6 +5204,11 @@ "specificity": "bin/specificity" } }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "node_modules/string-argv": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", @@ -5535,6 +5528,7 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -5847,11 +5841,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/underscore": { - "version": "1.13.3", - "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.3.tgz", - "integrity": "sha512-QvjkYpiD+dJJraRA8+dGAU4i7aBbb2s0S3jA45TFOvg2VgqvdCDd/3N6CqA8gluk1W91GLoXg5enMUx560QzuA==" - }, "node_modules/universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", @@ -6596,6 +6585,23 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@monaco-editor/loader": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz", + "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==", + "requires": { + "state-local": "^1.0.6" + } + }, + "@monaco-editor/react": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.4.5.tgz", + "integrity": "sha512-IImtzU7sRc66OOaQVCG+5PFHkSWnnhrUWGBuH6zNmH2h0YgmAhcjHZQc/6MY9JWEbUtVF1WPBMJ9u1XuFbRrVA==", + "requires": { + "@monaco-editor/loader": "^1.3.2", + "prop-types": "^15.7.2" + } + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -6772,6 +6778,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "dev": true, "requires": { "color-convert": "^1.9.0" } @@ -6946,6 +6953,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -7026,6 +7034,7 @@ "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "dev": true, "requires": { "color-name": "1.1.3" } @@ -7033,7 +7042,8 @@ "color-name": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", + "dev": true }, "colord": { "version": "2.9.2", @@ -7472,7 +7482,8 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true }, "eslint": { "version": "8.15.0", @@ -8212,7 +8223,8 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", + "dev": true }, "has-property-descriptors": { "version": "1.0.0", @@ -8573,21 +8585,6 @@ "universalify": "^2.0.0" } }, - "jsonlint-mod": { - "version": "1.7.6", - "resolved": "https://registry.npmjs.org/jsonlint-mod/-/jsonlint-mod-1.7.6.tgz", - "integrity": "sha512-oGuk6E1ehmIpw0w9ttgb2KsDQQgGXBzZczREW8OfxEm9eCQYL9/LCexSnh++0z3AiYGcXpBgqDSx9AAgzl/Bvg==", - "requires": { - "chalk": "^2.4.2", - "JSV": "^4.0.2", - "underscore": "^1.9.1" - } - }, - "JSV": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/JSV/-/JSV-4.0.2.tgz", - "integrity": "sha1-0Hf2glVx+CEy+d/67Vh7QCn+/1c=" - }, "jsx-ast-utils": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz", @@ -9360,11 +9357,6 @@ "fast-diff": "^1.1.2" } }, - "prismjs": { - "version": "1.28.0", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", - "integrity": "sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==" - }, "prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -9445,11 +9437,6 @@ "integrity": "sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==", "dev": true }, - "react-simple-code-editor": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/react-simple-code-editor/-/react-simple-code-editor-0.11.0.tgz", - "integrity": "sha512-xGfX7wAzspl113ocfKQAR8lWPhavGWHL3xSzNLeseDRHysT+jzRBi/ExdUqevSMos+7ZtdfeuBOXtgk9HTwsrw==" - }, "read-pkg": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", @@ -9903,6 +9890,11 @@ "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==", "dev": true }, + "state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==" + }, "string-argv": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", @@ -10136,6 +10128,7 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -10371,11 +10364,6 @@ "which-boxed-primitive": "^1.0.2" } }, - "underscore": { - "version": "1.13.3", - "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.3.tgz", - "integrity": "sha512-QvjkYpiD+dJJraRA8+dGAU4i7aBbb2s0S3jA45TFOvg2VgqvdCDd/3N6CqA8gluk1W91GLoXg5enMUx560QzuA==" - }, "universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", diff --git a/ui/package.json b/ui/package.json index c38e19d..755fabd 100644 --- a/ui/package.json +++ b/ui/package.json @@ -10,16 +10,14 @@ "npm": ">=8.3" }, "dependencies": { + "@monaco-editor/react": "4.4.5", "file-saver": "^2.0.5", "handlebars": "^4.7.7", "js-sql-parser": "1.4.1", - "jsonlint-mod": "1.7.6", - "prismjs": "1.28.0", "react": "18.1.0", "react-dom": "18.1.0", "react-hot-toast": "2.2.0", "react-modal": "3.15.1", - "react-simple-code-editor": "0.11.0", "regenerator-runtime": "0.13.9", "rete": "1.4.7", "rete-area-plugin": "0.2.1", diff --git a/ui/src/rete.jsx b/ui/src/rete.jsx index 92576c6..8f46d09 100644 --- a/ui/src/rete.jsx +++ b/ui/src/rete.jsx @@ -255,26 +255,6 @@ export async function createEditor(container) { return true; }); - editor.on( - "process nodecreated noderemoved connectioncreated connectionremoved", - async () => { - // テキスト入力欄のスクロールを有効化 - document.querySelectorAll(".editorTextarea").forEach((area) => { - area.addEventListener("wheel", (e) => { - if ( - isInputFocused() && - area.parentElement !== null && - area.parentElement.parentElement !== null - ) { - area.parentElement.parentElement.scrollTop += e.deltaY; - } - }); - }); - await engine.abort(); - await engine.process(editor.toJSON()); - } - ); - editor.view.resize(); editor.trigger("process"); AreaPlugin.zoomAt(editor, editor.nodes); diff --git a/ui/src/rete/controls/EditableHtmlComponent.jsx b/ui/src/rete/controls/EditableHtmlComponent.jsx index 775e551..883cd24 100644 --- a/ui/src/rete/controls/EditableHtmlComponent.jsx +++ b/ui/src/rete/controls/EditableHtmlComponent.jsx @@ -1,42 +1,19 @@ import React, { useState } from "react"; -import Editor from "react-simple-code-editor"; -import { highlight, languages } from "prismjs/components/prism-core"; -import "prismjs/components/prism-markup"; -import "prismjs/themes/prism.css"; +import Editor from "@monaco-editor/react"; export const EditableHtmlComponent = ({ value, onChange }) => { const [code, setCode] = useState(value); return ( -
- { - setCode(c); - onChange(c); - }} - highlight={(c) => - highlight(c, languages.xml) - .split("\n") - .map( - (line) => - `${line}` - ) - .join("\n") - } - padding={10} - style={{ - fontFamily: '"Fira code", "Fira Mono", monospace', - fontSize: 12, - background: "#FFF", - maxWidth: "800px", - }} - /> -
+ { + setCode(c); + onChange(c); + }} + /> ); }; diff --git a/ui/src/rete/controls/EditableJsonComponent.jsx b/ui/src/rete/controls/EditableJsonComponent.jsx index 5124dea..5713276 100644 --- a/ui/src/rete/controls/EditableJsonComponent.jsx +++ b/ui/src/rete/controls/EditableJsonComponent.jsx @@ -1,45 +1,23 @@ import React, { useState } from "react"; -import Editor from "react-simple-code-editor"; -import { highlight, languages } from "prismjs/components/prism-core"; -import "prismjs/components/prism-json"; -import "prismjs/themes/prism.css"; -import * as jsonlint from "jsonlint-mod"; -import useInterval from "use-interval"; +import Editor from "@monaco-editor/react"; export const EditableJsonComponent = ({ value, onChange }) => { const [code, setCode] = useState(value); - const [warn, setWarn] = useState(false); - const [stack, setStack] = useState(null); - useInterval(() => { - if (stack !== null) { - import("react-hot-toast").then((_) => _.toast.error(stack)); - setStack(null); - } - }, 10000); + const options = { + minimap: { enabled: false }, + }; return ( { - try { - jsonlint.parse(c); - setWarn(false); - setStack(null); - } catch (e) { - setStack(e.message); - setWarn(true); - } + options={options} + onChange={(c) => { setCode(c); onChange(c); }} - highlight={(c) => highlight(c, languages.json)} - padding={10} - style={{ - fontFamily: '"Fira code", "Fira Mono", monospace', - fontSize: 12, - background: warn ? "rgba(255, 0, 80, 0.7)" : "#FFF", - maxWidth: "300px", - }} /> ); }; diff --git a/ui/src/rete/controls/EditableSqlComponent.jsx b/ui/src/rete/controls/EditableSqlComponent.jsx index 80a69ee..9cdd986 100644 --- a/ui/src/rete/controls/EditableSqlComponent.jsx +++ b/ui/src/rete/controls/EditableSqlComponent.jsx @@ -1,31 +1,38 @@ import React, { useState } from "react"; -import Editor from "react-simple-code-editor"; -import { highlight, languages } from "prismjs/components/prism-core"; -import "prismjs/components/prism-sql"; -import "prismjs/themes/prism.css"; +import Editor from "@monaco-editor/react"; import * as parser from "js-sql-parser"; import useInterval from "use-interval"; export const EditableSqlComponent = ({ value, onChange }) => { const [code, setCode] = useState(value); const [warn, setWarn] = useState(false); - const [stack, setStack] = useState(null); + const [stack, setStack] = useState(""); useInterval(() => { - if (stack !== null) { + if (stack !== "") { import("react-hot-toast").then((_) => _.toast.error(stack)); - setStack(null); + setStack(""); } - }, 10000); + }, 8000); + const options = { + minimap: { enabled: false }, + }; return ( { + options={options} + onChange={(c) => { try { - const replacedForPlaceHolder = c.replaceAll(/\$\{.*?\}/g, "dummy"); + const replacedForPlaceHolder = c + ? c.replaceAll(/\$\{.*?\}/g, "dummy") + : c; parser.parse(replacedForPlaceHolder); setWarn(false); - setStack(null); + setStack(""); } catch (e) { setStack(e.message); setWarn(true); @@ -33,14 +40,6 @@ export const EditableSqlComponent = ({ value, onChange }) => { setCode(c); onChange(c); }} - highlight={(c) => highlight(c, languages.sql)} - padding={10} - style={{ - fontFamily: '"Fira code", "Fira Mono", monospace', - fontSize: 12, - background: warn ? "rgba(255, 0, 80, 0.7)" : "#FFF", - maxWidth: "300px", - }} /> ); }; diff --git a/ui/src/rete/controls/EditableUrlComponent.jsx b/ui/src/rete/controls/EditableUrlComponent.jsx index 68fd068..3cba2c3 100644 --- a/ui/src/rete/controls/EditableUrlComponent.jsx +++ b/ui/src/rete/controls/EditableUrlComponent.jsx @@ -1,8 +1,6 @@ import React, { useState } from "react"; -import Editor from "react-simple-code-editor"; -import { highlight, languages } from "prismjs/components/prism-core"; -import "prismjs/components/prism-uri"; -import "prismjs/themes/prism.css"; +import Editor from "@monaco-editor/react"; + import useInterval from "use-interval"; export const EditableUrlComponent = ({ value, onChange }) => { @@ -14,13 +12,25 @@ export const EditableUrlComponent = ({ value, onChange }) => { import("react-hot-toast").then((_) => _.toast.error(stack)); setStack(""); } - }, 10000); - + }, 8000); + const options = { + minimap: { enabled: false }, + scrollbar: { + vertical: "hidden", + horizontal: "hidden", + useShadows: false, + }, + }; return ( { - if (c.startsWith("https://") || c.startsWith("http://")) { + options={options} + onChange={(c) => { + if (c && (c.startsWith("https://") || c.startsWith("http://"))) { setWarn(false); setStack(""); } else { @@ -30,14 +40,6 @@ export const EditableUrlComponent = ({ value, onChange }) => { setCode(c); onChange(c); }} - highlight={(c) => highlight(c, languages.uri)} - padding={10} - style={{ - fontFamily: '"Fira code", "Fira Mono", monospace', - fontSize: 12, - background: warn ? "rgba(255, 0, 80, 0.7)" : "#FFF", - maxWidth: "450px", - }} /> ); }; diff --git a/ui/src/rete/controls/JsonManagerControl.jsx b/ui/src/rete/controls/JsonManagerControl.jsx index dd2bc20..a978a7c 100644 --- a/ui/src/rete/controls/JsonManagerControl.jsx +++ b/ui/src/rete/controls/JsonManagerControl.jsx @@ -36,7 +36,7 @@ export class JsonManagerControl extends Rete.Control {

setModalOpen(false)} /> @@ -60,7 +60,7 @@ export class JsonManagerControl extends Rete.Control {
@@ -72,7 +72,7 @@ export class JsonManagerControl extends Rete.Control { {v.func} setModalOpen(true)} /> @@ -251,7 +251,7 @@ export class JsonManagerControl extends Rete.Control { {v.name} { @@ -16,48 +11,29 @@ export const EditableHandlebarsComponent = ({ value, onChange }) => { import("react-hot-toast").then((_) => _.toast.error(stack)); setStack(null); } - }, 10000); + }, 8000); return ( -
- { - import("handlebars") - .then((h) => { - h.precompile(c); - setWarn(false); - setStack(null); - }) - .catch((e) => { - setStack(e.message); - setWarn(true); - }); - setCode(c); - onChange(c); - }} - highlight={(c) => - highlight(c, languages.handlebars) - .split("\n") - .map( - (line) => - `${line}` - ) - .join("\n") - } - padding={10} - style={{ - fontFamily: '"Fira code", "Fira Mono", monospace', - fontSize: 12, - background: warn ? "rgba(255, 0, 80, 0.7)" : "#FFF", - maxWidth: "800px", - }} - /> -
+ { + import("handlebars") + .then((h) => { + h.precompile(c); + setWarn(false); + setStack(null); + }) + .catch((e) => { + setStack(e.message); + setWarn(true); + }); + setCode(c); + onChange(c); + }} + /> ); }; diff --git a/ui/src/rete/controls/template/EditablePugComponent.jsx b/ui/src/rete/controls/template/EditablePugComponent.jsx index d94277a..f749e5f 100644 --- a/ui/src/rete/controls/template/EditablePugComponent.jsx +++ b/ui/src/rete/controls/template/EditablePugComponent.jsx @@ -1,12 +1,7 @@ import React, { useState } from "react"; -import Editor from "react-simple-code-editor"; -import { highlight, languages } from "prismjs/components/prism-core"; -import "prismjs/components/prism-markup"; -import "prismjs/components/prism-markup-templating"; -import "prismjs/components/prism-pug"; -import "prismjs/themes/prism.css"; /* eslint import/no-unresolved: 0 */ import pug from "pug"; +import Editor from "@monaco-editor/react"; import useInterval from "use-interval"; export const EditablePugComponent = ({ value, onChange }) => { @@ -18,46 +13,27 @@ export const EditablePugComponent = ({ value, onChange }) => { import("react-hot-toast").then((_) => _.toast.error(stack)); setStack(null); } - }, 10000); + }, 8000); return ( -
- { - try { - pug.compile(c); - setWarn(false); - setStack(null); - } catch (e) { - setStack(e.message); - setWarn(true); - } - setCode(c); - onChange(c); - }} - highlight={(c) => - highlight(c, languages.pug) - .split("\n") - .map( - (line) => - `${line}` - ) - .join("\n") + { + try { + if (c) pug.compile(c); + setWarn(false); + setStack(null); + } catch (e) { + setStack(e.message); + setWarn(true); } - padding={10} - style={{ - fontFamily: '"Fira code", "Fira Mono", monospace', - fontSize: 12, - background: warn ? "rgba(255, 0, 80, 0.7)" : "#FFF", - maxWidth: "800px", - }} - /> -
+ setCode(c); + onChange(c); + }} + /> ); }; diff --git a/ui/src/styles.css b/ui/src/styles.css index b03cc96..dcb1cfa 100644 --- a/ui/src/styles.css +++ b/ui/src/styles.css @@ -87,24 +87,11 @@ body { border-radius: 4px; box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); } - -/* 行番号を表示 */ -.line-numbers { - counter-reset: line; -} -.container_editor_line_number:before { - color: var(--vip-grey-60); - content: counter(line); - counter-increment: line; - left: 0; - letter-spacing: -1px; - opacity: 0.2; - pointer-events: none; - position: absolute; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.warningCode .minimap-decorations-layer { + background: rgba(255, 0, 80); +} +.warningCode .monaco-editor div > div > div { + background: rgba(255, 0, 80); } /* checkboxのスタイル変更 */