Feat(CodeEditor): Support jsx highlight

This commit is contained in:
2024-10-28 17:48:23 +08:00
parent 735928d53e
commit 635cda3821
10 changed files with 524 additions and 65 deletions

502
package-lock.json generated
View File

@@ -23,6 +23,7 @@
"@eslint/js": "^9.12.0", "@eslint/js": "^9.12.0",
"@marsidev/react-turnstile": "^1.0.2", "@marsidev/react-turnstile": "^1.0.2",
"@monaco-editor/react": "^4.6.0", "@monaco-editor/react": "^4.6.0",
"@shikijs/monaco": "^1.22.0",
"@svgr/core": "^8.1.0", "@svgr/core": "^8.1.0",
"@svgr/plugin-jsx": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0",
"@types/jsdom": "^21.1.7", "@types/jsdom": "^21.1.7",
@@ -57,13 +58,13 @@
"match-sorter": "^6.3.4", "match-sorter": "^6.3.4",
"moment": "^2.30.1", "moment": "^2.30.1",
"monaco-editor": "^0.52.0", "monaco-editor": "^0.52.0",
"monaco-jsx-syntax-highlight": "^1.2.0",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-draggable": "^4.4.6", "react-draggable": "^4.4.6",
"react-router": "^6.27.0", "react-router": "^6.27.0",
"react-router-dom": "^6.27.0", "react-router-dom": "^6.27.0",
"shiki": "^1.22.0",
"size-sensor": "^1.0.2", "size-sensor": "^1.0.2",
"typescript": "^5.6.3", "typescript": "^5.6.3",
"typescript-eslint": "^8.9.0", "typescript-eslint": "^8.9.0",
@@ -2822,6 +2823,68 @@
"win32" "win32"
] ]
}, },
"node_modules/@shikijs/core": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.1.tgz",
"integrity": "sha512-bqAhT/Ri5ixV4oYsvJNH8UJjpjbINWlWyXY6tBTsP4OmD6XnFv43nRJ+lTdxd2rmG5pgam/x+zGR6kLRXrpEKA==",
"dev": true,
"dependencies": {
"@shikijs/engine-javascript": "1.22.1",
"@shikijs/engine-oniguruma": "1.22.1",
"@shikijs/types": "1.22.1",
"@shikijs/vscode-textmate": "^9.3.0",
"@types/hast": "^3.0.4",
"hast-util-to-html": "^9.0.3"
}
},
"node_modules/@shikijs/engine-javascript": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.1.tgz",
"integrity": "sha512-540pyoy0LWe4jj2BVbgELwOFu1uFvRI7lg4hdsExrSXA9x7gqfzZ/Nnh4RfX86aDAgJ647gx4TCmRwACbnQSvw==",
"dev": true,
"dependencies": {
"@shikijs/types": "1.22.1",
"@shikijs/vscode-textmate": "^9.3.0",
"oniguruma-to-js": "0.4.3"
}
},
"node_modules/@shikijs/engine-oniguruma": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.1.tgz",
"integrity": "sha512-L+1Vmd+a2kk8HtogUFymQS6BjUfJnzcWoUp1BUgxoDiklbKSMvrsMuLZGevTOP1m0rEjgnC5MsDmsr8lX1lC+Q==",
"dev": true,
"dependencies": {
"@shikijs/types": "1.22.1",
"@shikijs/vscode-textmate": "^9.3.0"
}
},
"node_modules/@shikijs/monaco": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/@shikijs/monaco/-/monaco-1.22.1.tgz",
"integrity": "sha512-Ai8A/4KjFPlGzkYJq41cqjcFXJutVjtY8CA61oySf2uiBMRqzbOSoJXietVO3nzTFRv7Ml4rz69ClK0LY9J/MQ==",
"dev": true,
"dependencies": {
"@shikijs/core": "1.22.1",
"@shikijs/types": "1.22.1",
"@shikijs/vscode-textmate": "^9.3.0"
}
},
"node_modules/@shikijs/types": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.1.tgz",
"integrity": "sha512-+45f8mu/Hxqs6Kyhfm98Nld5n7Q7lwhjU8UtdQwrOPs7BnM4VAb929O3IQ2ce+4D7SlNFlZGd8CnKRSnwbQreQ==",
"dev": true,
"dependencies": {
"@shikijs/vscode-textmate": "^9.3.0",
"@types/hast": "^3.0.4"
}
},
"node_modules/@shikijs/vscode-textmate": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
"integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
"dev": true
},
"node_modules/@sindresorhus/is": { "node_modules/@sindresorhus/is": {
"version": "4.6.0", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz", "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
@@ -3165,6 +3228,15 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"node_modules/@types/hast": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
"dev": true,
"dependencies": {
"@types/unist": "*"
}
},
"node_modules/@types/http-cache-semantics": { "node_modules/@types/http-cache-semantics": {
"version": "4.0.4", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
@@ -3206,6 +3278,15 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/mdast": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
"dev": true,
"dependencies": {
"@types/unist": "*"
}
},
"node_modules/@types/ms": { "node_modules/@types/ms": {
"version": "0.7.34", "version": "0.7.34",
"resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz", "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
@@ -3284,6 +3365,12 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/unist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
"dev": true
},
"node_modules/@types/verror": { "node_modules/@types/verror": {
"version": "1.10.10", "version": "1.10.10",
"resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz", "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.10.tgz",
@@ -3544,6 +3631,12 @@
"typescript": ">=4.4.4" "typescript": ">=4.4.4"
} }
}, },
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
"dev": true
},
"node_modules/@vitejs/plugin-react": { "node_modules/@vitejs/plugin-react": {
"version": "4.3.3", "version": "4.3.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
@@ -4430,6 +4523,16 @@
], ],
"license": "CC-BY-4.0" "license": "CC-BY-4.0"
}, },
"node_modules/ccount": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/chalk": { "node_modules/chalk": {
"version": "4.1.2", "version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -4447,6 +4550,26 @@
"url": "https://github.com/chalk/chalk?sponsor=1" "url": "https://github.com/chalk/chalk?sponsor=1"
} }
}, },
"node_modules/character-entities-html4": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/character-entities-legacy": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/chokidar": { "node_modules/chokidar": {
"version": "4.0.1", "version": "4.0.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
@@ -4593,6 +4716,16 @@
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/comma-separated-tokens": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/commander": { "node_modules/commander": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
@@ -5073,6 +5206,15 @@
"node": ">=0.4.0" "node": ">=0.4.0"
} }
}, },
"node_modules/dequal": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/detect-libc": { "node_modules/detect-libc": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -5095,6 +5237,19 @@
"license": "MIT", "license": "MIT",
"optional": true "optional": true
}, },
"node_modules/devlop": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
"dev": true,
"dependencies": {
"dequal": "^2.0.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/dir-compare": { "node_modules/dir-compare": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-3.3.0.tgz", "resolved": "https://registry.npmjs.org/dir-compare/-/dir-compare-3.3.0.tgz",
@@ -6672,6 +6827,42 @@
"node": ">= 0.4" "node": ">= 0.4"
} }
}, },
"node_modules/hast-util-to-html": {
"version": "9.0.3",
"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
"integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
"dev": true,
"dependencies": {
"@types/hast": "^3.0.0",
"@types/unist": "^3.0.0",
"ccount": "^2.0.0",
"comma-separated-tokens": "^2.0.0",
"hast-util-whitespace": "^3.0.0",
"html-void-elements": "^3.0.0",
"mdast-util-to-hast": "^13.0.0",
"property-information": "^6.0.0",
"space-separated-tokens": "^2.0.0",
"stringify-entities": "^4.0.0",
"zwitch": "^2.0.4"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-whitespace": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
"dev": true,
"dependencies": {
"@types/hast": "^3.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hoist-non-react-statics": { "node_modules/hoist-non-react-statics": {
"version": "3.3.2", "version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -6733,6 +6924,16 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/html-void-elements": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/http-cache-semantics": { "node_modules/http-cache-semantics": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz", "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -7649,6 +7850,27 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/mdast-util-to-hast": {
"version": "13.2.0",
"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
"integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
"dev": true,
"dependencies": {
"@types/hast": "^3.0.0",
"@types/mdast": "^4.0.0",
"@ungap/structured-clone": "^1.0.0",
"devlop": "^1.0.0",
"micromark-util-sanitize-uri": "^2.0.0",
"trim-lines": "^3.0.0",
"unist-util-position": "^5.0.0",
"unist-util-visit": "^5.0.0",
"vfile": "^6.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/merge2": { "node_modules/merge2": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -7659,6 +7881,95 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/micromark-util-character": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
"integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
"dev": true,
"funding": [
{
"type": "GitHub Sponsors",
"url": "https://github.com/sponsors/unifiedjs"
},
{
"type": "OpenCollective",
"url": "https://opencollective.com/unified"
}
],
"dependencies": {
"micromark-util-symbol": "^2.0.0",
"micromark-util-types": "^2.0.0"
}
},
"node_modules/micromark-util-encode": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
"dev": true,
"funding": [
{
"type": "GitHub Sponsors",
"url": "https://github.com/sponsors/unifiedjs"
},
{
"type": "OpenCollective",
"url": "https://opencollective.com/unified"
}
]
},
"node_modules/micromark-util-sanitize-uri": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
"dev": true,
"funding": [
{
"type": "GitHub Sponsors",
"url": "https://github.com/sponsors/unifiedjs"
},
{
"type": "OpenCollective",
"url": "https://opencollective.com/unified"
}
],
"dependencies": {
"micromark-util-character": "^2.0.0",
"micromark-util-encode": "^2.0.0",
"micromark-util-symbol": "^2.0.0"
}
},
"node_modules/micromark-util-symbol": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
"dev": true,
"funding": [
{
"type": "GitHub Sponsors",
"url": "https://github.com/sponsors/unifiedjs"
},
{
"type": "OpenCollective",
"url": "https://opencollective.com/unified"
}
]
},
"node_modules/micromark-util-types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
"dev": true,
"funding": [
{
"type": "GitHub Sponsors",
"url": "https://github.com/sponsors/unifiedjs"
},
{
"type": "OpenCollective",
"url": "https://opencollective.com/unified"
}
]
},
"node_modules/micromatch": { "node_modules/micromatch": {
"version": "4.0.8", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -7840,13 +8151,6 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/monaco-jsx-syntax-highlight": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/monaco-jsx-syntax-highlight/-/monaco-jsx-syntax-highlight-1.2.0.tgz",
"integrity": "sha512-sKzfmNMxLp3Dcwndz0F/EdP3rqe+Z6FbDPazj+/ByNbqoXWkzgb/ocat8h3vpiTwPPiDtSHidT0BFMvLkMtG8A==",
"dev": true,
"license": "MIT"
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.3", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -7982,6 +8286,18 @@
"wrappy": "1" "wrappy": "1"
} }
}, },
"node_modules/oniguruma-to-js": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz",
"integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==",
"dev": true,
"dependencies": {
"regex": "^4.3.2"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/optionator": { "node_modules/optionator": {
"version": "0.9.4", "version": "0.9.4",
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -8369,6 +8685,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/property-information": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
"integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/proxy-from-env": { "node_modules/proxy-from-env": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -9252,6 +9578,12 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/regex": {
"version": "4.3.3",
"resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz",
"integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==",
"dev": true
},
"node_modules/remove-accents": { "node_modules/remove-accents": {
"version": "0.5.0", "version": "0.5.0",
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
@@ -9619,6 +9951,20 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/shiki": {
"version": "1.22.1",
"resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.1.tgz",
"integrity": "sha512-PbJ6XxrWLMwB2rm3qdjIHNm3zq4SfFnOx0B3rEoi4AN8AUngsdyZ1tRe5slMPtn6jQkbUURLNZPpLR7Do3k78g==",
"dev": true,
"dependencies": {
"@shikijs/core": "1.22.1",
"@shikijs/engine-javascript": "1.22.1",
"@shikijs/engine-oniguruma": "1.22.1",
"@shikijs/types": "1.22.1",
"@shikijs/vscode-textmate": "^9.3.0",
"@types/hast": "^3.0.4"
}
},
"node_modules/signal-exit": { "node_modules/signal-exit": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -9735,6 +10081,16 @@
"source-map": "^0.6.0" "source-map": "^0.6.0"
} }
}, },
"node_modules/space-separated-tokens": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/sprintf-js": { "node_modules/sprintf-js": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
@@ -9808,6 +10164,20 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/stringify-entities": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
"integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
"dev": true,
"dependencies": {
"character-entities-html4": "^2.0.0",
"character-entities-legacy": "^3.0.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/strip-ansi": { "node_modules/strip-ansi": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -10149,6 +10519,16 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/trim-lines": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
},
"node_modules/truncate-utf8-bytes": { "node_modules/truncate-utf8-bytes": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz", "resolved": "https://registry.npmjs.org/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz",
@@ -10312,6 +10692,74 @@
"@types/estree": "^1.0.0" "@types/estree": "^1.0.0"
} }
}, },
"node_modules/unist-util-is": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
"dev": true,
"dependencies": {
"@types/unist": "^3.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-position": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
"dev": true,
"dependencies": {
"@types/unist": "^3.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-stringify-position": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
"dev": true,
"dependencies": {
"@types/unist": "^3.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-visit": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
"dev": true,
"dependencies": {
"@types/unist": "^3.0.0",
"unist-util-is": "^6.0.0",
"unist-util-visit-parents": "^6.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/unist-util-visit-parents": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
"dev": true,
"dependencies": {
"@types/unist": "^3.0.0",
"unist-util-is": "^6.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/universalify": { "node_modules/universalify": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -10536,6 +10984,34 @@
"node": ">=0.6.0" "node": ">=0.6.0"
} }
}, },
"node_modules/vfile": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
"integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
"dev": true,
"dependencies": {
"@types/unist": "^3.0.0",
"vfile-message": "^4.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/vfile-message": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
"dev": true,
"dependencies": {
"@types/unist": "^3.0.0",
"unist-util-stringify-position": "^4.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/vite": { "node_modules/vite": {
"version": "5.4.6", "version": "5.4.6",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.6.tgz",
@@ -10919,6 +11395,16 @@
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"dev": true, "dev": true,
"license": "0BSD" "license": "0BSD"
},
"node_modules/zwitch": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
"dev": true,
"funding": {
"type": "github",
"url": "https://github.com/sponsors/wooorm"
}
} }
} }
} }

View File

@@ -44,6 +44,7 @@
"@eslint/js": "^9.12.0", "@eslint/js": "^9.12.0",
"@marsidev/react-turnstile": "^1.0.2", "@marsidev/react-turnstile": "^1.0.2",
"@monaco-editor/react": "^4.6.0", "@monaco-editor/react": "^4.6.0",
"@shikijs/monaco": "^1.22.0",
"@svgr/core": "^8.1.0", "@svgr/core": "^8.1.0",
"@svgr/plugin-jsx": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0",
"@types/jsdom": "^21.1.7", "@types/jsdom": "^21.1.7",
@@ -78,13 +79,13 @@
"match-sorter": "^6.3.4", "match-sorter": "^6.3.4",
"moment": "^2.30.1", "moment": "^2.30.1",
"monaco-editor": "^0.52.0", "monaco-editor": "^0.52.0",
"monaco-jsx-syntax-highlight": "^1.2.0",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-draggable": "^4.4.6", "react-draggable": "^4.4.6",
"react-router": "^6.27.0", "react-router": "^6.27.0",
"react-router-dom": "^6.27.0", "react-router-dom": "^6.27.0",
"shiki": "^1.22.0",
"size-sensor": "^1.0.2", "size-sensor": "^1.0.2",
"typescript": "^5.6.3", "typescript": "^5.6.3",
"typescript-eslint": "^8.9.0", "typescript-eslint": "^8.9.0",

View File

@@ -1,7 +1,6 @@
import { editor, IPosition, Selection } from 'monaco-editor' import { editor, IPosition, Selection } from 'monaco-editor'
import ScrollType = editor.ScrollType import ScrollType = editor.ScrollType
import { Monaco } from '@monaco-editor/react' import { Monaco } from '@monaco-editor/react'
import { getWorker, MonacoJsxSyntaxHighlight } from 'monaco-jsx-syntax-highlight'
import { createATA, TypeHelper } from '@/components/Playground/CodeEditor/Editor/ata' import { createATA, TypeHelper } from '@/components/Playground/CodeEditor/Editor/ata'
export const useEditor = () => { export const useEditor = () => {
@@ -28,18 +27,6 @@ export const useEditor = () => {
} }
} }
const loadJsxSyntaxHighlight = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => {
const monacoJsxSyntaxHighlight = new MonacoJsxSyntaxHighlight(getWorker(), monaco)
const { highlighter, dispose } = monacoJsxSyntaxHighlight.highlighterBuilder({ editor })
editor.onDidChangeModelContent(() => {
highlighter()
})
highlighter()
return { highlighter, dispose }
}
const autoLoadExtraLib = async ( const autoLoadExtraLib = async (
editor: editor.IStandaloneCodeEditor, editor: editor.IStandaloneCodeEditor,
monaco: Monaco, monaco: Monaco,
@@ -68,7 +55,6 @@ export const useEditor = () => {
return { return {
doOpenEditor, doOpenEditor,
loadJsxSyntaxHighlight,
autoLoadExtraLib autoLoadExtraLib
} }
} }

View File

@@ -13,27 +13,7 @@ const rotate = keyframes`
export default createStyles(() => ({ export default createStyles(() => ({
root: { root: {
position: 'relative', position: 'relative',
height: 0, height: 0
'.monaco-editor-light': {
height: '100%',
overflow: 'hidden',
backgroundColor: 'var(--border)',
'.jsx-tag-angle-bracket': { color: '#800000' },
'.jsx-text': { color: '#000' },
'.jsx-tag-name': { color: '#800000' },
'.jsx-tag-attribute-key': { color: '#f00' }
},
'.monaco-editor-dark': {
height: '100%',
overflow: 'hidden',
backgroundColor: 'var(--border)',
'.jsx-tag-angle-bracket': { color: '#808080' },
'.jsx-text': { color: '#d4d4d4' },
'.jsx-tag-name': { color: '#569cd6' },
'.jsx-tag-attribute-key': { color: '#9cdcfe' }
}
}, },
loading: { loading: {

View File

@@ -1,5 +1,7 @@
import { editor, Selection } from 'monaco-editor' import { editor, Selection } from 'monaco-editor'
import MonacoEditor, { Monaco } from '@monaco-editor/react' import MonacoEditor, { Monaco } from '@monaco-editor/react'
import { shikiToMonaco } from '@shikijs/monaco'
import { createHighlighter } from 'shiki'
import useStyles from '@/components/Playground/CodeEditor/Editor/index.style' import useStyles from '@/components/Playground/CodeEditor/Editor/index.style'
import '@/components/Playground/CodeEditor/Editor/loader' import '@/components/Playground/CodeEditor/Editor/loader'
import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared' import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
@@ -38,18 +40,19 @@ const Editor = ({
const { styles } = useStyles() const { styles } = useStyles()
const editorRef = useRef<editor.IStandaloneCodeEditor>() const editorRef = useRef<editor.IStandaloneCodeEditor>()
const monacoRef = useRef<Monaco>() const monacoRef = useRef<Monaco>()
const { doOpenEditor, loadJsxSyntaxHighlight, autoLoadExtraLib } = useEditor() const { doOpenEditor, autoLoadExtraLib } = useEditor()
const jsxSyntaxHighlightRef = useRef<{
highlighter: (code?: string | undefined) => void
dispose: () => void
}>({
highlighter: () => undefined,
dispose: () => undefined
})
const { total, finished, onWatch } = useTypesProgress() const { total, finished, onWatch } = useTypesProgress()
const file = files[selectedFileName] || { name: 'Untitled' } const file = files[selectedFileName] || { name: 'Untitled' }
const handleOnEditorWillMount = (monaco: Monaco) => { const handleOnEditorWillMount = (monaco: Monaco) => {
createHighlighter({
themes: ['vitesse-light', 'vitesse-dark'],
langs: ['javascript', 'jsx', 'typescript', 'tsx', 'css', 'json', 'xml']
}).then((highlighter) => {
shikiToMonaco(highlighter, monaco)
monaco.editor.setTheme(isDarkMode ? 'vitesse-dark' : 'vitesse-light')
})
monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions) monaco.languages.json.jsonDefaults.setDiagnosticsOptions(tsconfigJsonDiagnosticsOptions)
tsconfig && tsconfig &&
monaco.languages.typescript.typescriptDefaults.setCompilerOptions( monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
@@ -78,8 +81,6 @@ const Editor = ({
monacoRef.current = monaco monacoRef.current = monaco
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
editor['_codeEditorService'].doOpenEditor = function ( editor['_codeEditorService'].doOpenEditor = function (
editor: editor.IStandaloneCodeEditor, editor: editor.IStandaloneCodeEditor,
input: { options: { selection: Selection }; resource: { path: string } } input: { options: { selection: Selection }; resource: { path: string } }
@@ -91,7 +92,6 @@ const Editor = ({
} }
} }
jsxSyntaxHighlightRef.current = loadJsxSyntaxHighlight(editor, monaco)
extraLibs.forEach((item) => extraLibs.forEach((item) =>
monaco.languages.typescript.typescriptDefaults.addExtraLib(item.content, item.path) monaco.languages.typescript.typescriptDefaults.addExtraLib(item.content, item.path)
) )
@@ -99,9 +99,12 @@ const Editor = ({
void autoLoadExtraLib(editor, monaco, file.value, onWatch) void autoLoadExtraLib(editor, monaco, file.value, onWatch)
} }
useEffect(() => {
monacoRef.current?.editor.setTheme(isDarkMode ? 'vitesse-dark' : 'vitesse-light')
}, [isDarkMode])
useEffect(() => { useEffect(() => {
editorRef.current?.focus() editorRef.current?.focus()
jsxSyntaxHighlightRef?.current?.highlighter?.()
}, [file.name]) }, [file.name])
useEffect(() => { useEffect(() => {
@@ -115,9 +118,8 @@ const Editor = ({
<> <>
<div className={styles.root}> <div className={styles.root}>
<MonacoEditor <MonacoEditor
theme={isDarkMode ? 'vs-dark' : 'light'} theme={isDarkMode ? 'vitesse-dark' : 'vitesse-light'}
path={file.name} path={file.name}
className={`monaco-editor-${isDarkMode ? 'dark' : 'light'}`}
language={file.language} language={file.language}
value={file.value} value={file.value}
onChange={onChange} onChange={onChange}

View File

@@ -1,17 +1,17 @@
import MonacoEditor from '@monaco-editor/react' import MonacoEditor from '@monaco-editor/react'
import { Loader } from 'esbuild-wasm' import { Loader } from 'esbuild-wasm'
import useStyles from '@/components/Playground/Output/Transform/index.style' import useStyles from '@/components/Playground/Output/Transform/index.style'
import { IFile, ITheme } from '@/components/Playground/shared' import { IFile } from '@/components/Playground/shared'
import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files' import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
import Compiler from '@/components/Playground/compiler' import Compiler from '@/components/Playground/compiler'
import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig' import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
interface OutputProps { interface OutputProps {
isDarkMode?: boolean
file: IFile file: IFile
theme?: ITheme
} }
const Transform = ({ file, theme }: OutputProps) => { const Transform = ({ isDarkMode, file }: OutputProps) => {
const { styles } = useStyles() const { styles } = useStyles()
const [compiledCode, setCompiledCode] = useState('') const [compiledCode, setCompiledCode] = useState('')
const [errorMsg, setErrorMsg] = useState('') const [errorMsg, setErrorMsg] = useState('')
@@ -60,7 +60,7 @@ const Transform = ({ file, theme }: OutputProps) => {
return ( return (
<div className={styles.root}> <div className={styles.root}>
<MonacoEditor <MonacoEditor
theme={theme} theme={isDarkMode ? 'vitesse-dark' : 'vitesse-light'}
language={'javascript'} language={'javascript'}
value={compiledCode} value={compiledCode}
options={{ ...MonacoEditorConfig, readOnly: true }} options={{ ...MonacoEditorConfig, readOnly: true }}

View File

@@ -5,6 +5,7 @@ import Transform from '@/components/Playground/Output/Transform'
import Preview from '@/components/Playground/Output/Preview' import Preview from '@/components/Playground/Output/Preview'
interface OutputProps { interface OutputProps {
isDarkMode?: boolean
files: IFiles files: IFiles
selectedFileName: string selectedFileName: string
importMap: IImportMap importMap: IImportMap
@@ -15,6 +16,7 @@ interface OutputProps {
} }
const Output = ({ const Output = ({
isDarkMode,
files, files,
selectedFileName, selectedFileName,
importMap, importMap,
@@ -47,7 +49,9 @@ const Output = ({
mobileMode={mobileMode} mobileMode={mobileMode}
/> />
)} )}
{selectedTab === 'Transform' && <Transform file={files[selectedFileName]} />} {selectedTab === 'Transform' && (
<Transform isDarkMode={isDarkMode} file={files[selectedFileName]} />
)}
</FlexBox> </FlexBox>
) )
} }

View File

@@ -105,6 +105,7 @@ const Playground = ({
onSelectedFileChange={setSelectedFileName} onSelectedFileChange={setSelectedFileName}
/> />
<Output <Output
isDarkMode={isDarkMode}
files={files} files={files}
selectedFileName={selectedFileName} selectedFileName={selectedFileName}
importMap={importMap!} importMap={importMap!}

View File

@@ -20,6 +20,4 @@ export interface ITsconfig {
compilerOptions: CompilerOptions compilerOptions: CompilerOptions
} }
export type ITheme = 'light' | 'vs-dark'
export type IEditorOptions = editor.IStandaloneEditorConstructionOptions export type IEditorOptions = editor.IStandaloneEditorConstructionOptions

View File

@@ -459,6 +459,7 @@ const Edit = () => {
extraLibs={editorExtraLibs} extraLibs={editorExtraLibs}
/> />
<Playground.Output <Playground.Output
isDarkMode={isDarkMode}
files={files} files={files}
selectedFileName={selectedFileName} selectedFileName={selectedFileName}
importMap={importMap!} importMap={importMap!}