-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
43227c3
commit d3f3037
Showing
9 changed files
with
12,571 additions
and
11,326 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| # Storybook static | ||
| storybook-static | ||
|
|
||
| # Logs | ||
| logs | ||
| *.log | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,32 @@ | ||
| // const path = require("path"); | ||
| const path = require('path'); | ||
| const { merge } = require('webpack-merge'); | ||
| const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); | ||
|
|
||
| module.exports = { | ||
| stories: ["../src/stories/**/*.stories.[tj]s"], | ||
| stories: ['../src/stories/**/*.stories.[tj]s'], | ||
| // addons: ["@storybook/addon-knobs/register"], | ||
| // webpackFinal: async (config, { configType }) => { | ||
| // config.module.rules.push({ | ||
| // test: /\.css$/, | ||
| // use: ["style-loader", "css-loader", "sass-loader"], | ||
| // include: path.resolve(__dirname, "../src"), | ||
| // }); | ||
|
|
||
| // return config; | ||
| // }, | ||
| webpackFinal: async (config) => { | ||
| const finalConfig = merge(config, { | ||
| resolve: { | ||
| alias: { | ||
| vscode: require.resolve( | ||
| '@codingame/monaco-languageclient/lib/vscode-compatibility' | ||
| ), | ||
| }, | ||
| extensions: ['.js', '.json', '.ttf'], | ||
| }, | ||
| }); | ||
|
|
||
| finalConfig.entry = { | ||
| main: finalConfig.entry, | ||
| 'editor.worker': 'monaco-editor-core/esm/vs/editor/editor.worker.js', | ||
| }; | ||
|
|
||
| finalConfig.output.filename = '[name].bundle.js'; | ||
|
|
||
| return finalConfig; | ||
| }, | ||
| core: { | ||
| builder: 'webpack5', | ||
| }, | ||
| }; |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react'; | ||
| import * as monaco from 'monaco-editor'; | ||
|
|
||
| const useMonacoEditor = () => { | ||
| /** | ||
| * Create editor | ||
| * @param {{element: HTMLElement, value: string, language: string, theme: string, options: object, disableMinimap: boolean}} props | ||
| * Props to be used to compose editor | ||
| * @returns Monaco Editor object | ||
| */ | ||
| const createEditor = (props) => { | ||
| const { element, value, language, theme, options, disableMinimap } = props; | ||
|
|
||
| return monaco.editor.create(element, { | ||
| value: value, | ||
| language: language, | ||
| theme: theme, | ||
| 'semanticHighlighting.enabled': true, | ||
| selectOnLineNumbers: true, | ||
| autoIndent: 'full', | ||
| lineNumbers: disableMinimap ? 'off' : 'on', | ||
| overviewRulerBorder: !disableMinimap, | ||
| overviewRulerLanes: disableMinimap ? 0 : 3, | ||
| minimap: { | ||
| enabled: !disableMinimap, | ||
| }, | ||
| ...options, | ||
| }); | ||
| }; | ||
|
|
||
| return { createEditor }; | ||
| }; | ||
|
|
||
| export default useMonacoEditor; |
121 changes: 121 additions & 0 deletions
121
src/components/MonacoCodeEditor/hooks/useMonacoEditorCore.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| import React, { useCallback, useEffect } from 'react'; | ||
| import { listen } from '@codingame/monaco-jsonrpc'; | ||
| import * as monaco from 'monaco-editor'; | ||
| import { | ||
| MonacoLanguageClient, | ||
| CloseAction, | ||
| ErrorAction, | ||
| MonacoServices, | ||
| createConnection, | ||
| } from '@codingame/monaco-languageclient'; | ||
| import normalizeUrl from 'normalize-url'; | ||
| import ReconnectingWebSocket from 'reconnecting-websocket'; | ||
|
|
||
| const SERVER_URL = '/sampleServer'; | ||
|
|
||
| self.MonacoEnvironment = { | ||
| getWorkerUrl: function (moduleId, label) { | ||
| if (label === 'json') { | ||
| return './json.worker.bundle.js'; | ||
| } | ||
| if (label === 'css' || label === 'scss' || label === 'less') { | ||
| return './css.worker.bundle.js'; | ||
| } | ||
| if (label === 'html' || label === 'handlebars' || label === 'razor') { | ||
| return './html.worker.bundle.js'; | ||
| } | ||
| if (label === 'typescript' || label === 'javascript') { | ||
| return './ts.worker.bundle.js'; | ||
| } | ||
| return './editor.worker.bundle.js'; | ||
| }, | ||
| }; | ||
|
|
||
| const createUrl = (path) => { | ||
| const protocol = location.protocol === 'https:' ? 'wss' : 'ws'; | ||
| return normalizeUrl(`ws://localhost:3000/sampleServer`); | ||
| // return normalizeUrl( | ||
| // `${protocol}://${location.host}${location.pathname}${path}` | ||
| // ); | ||
| }; | ||
|
|
||
| const createWebSocket = (url) => { | ||
| const socketOptions = { | ||
| maxReconnectionDelay: 10000, | ||
| minReconnectionDelay: 1000, | ||
| reconnectionDelayGrowFactor: 1.3, | ||
| connectionTimeout: 10000, | ||
| maxRetries: Infinity, | ||
| debug: false, | ||
| }; | ||
| return new ReconnectingWebSocket(url, [], socketOptions); | ||
| }; | ||
|
|
||
| const useMonacoEditor = () => { | ||
| const createLanguageClient = useCallback((connection) => { | ||
| return new MonacoLanguageClient({ | ||
| name: 'Sample Language Client', | ||
| clientOptions: { | ||
| // use a language id as a document selector | ||
| documentSelector: ['python'], | ||
| // disable the default error handler | ||
| errorHandler: { | ||
| error: () => ErrorAction.Continue, | ||
| closed: () => CloseAction.DoNotRestart, | ||
| }, | ||
| }, | ||
| // create a language client connection from the JSON RPC connection on demand | ||
| connectionProvider: { | ||
| get: (errorHandler, closeHandler) => { | ||
| return Promise.resolve( | ||
| createConnection(connection, errorHandler, closeHandler) | ||
| ); | ||
| }, | ||
| }, | ||
| }); | ||
| }, []); | ||
|
|
||
| /** | ||
| * Create editor | ||
| * @param {{element: HTMLElement, value: string, language: string, theme: string, options: object, disableMinimap: boolean}} props | ||
| * Props to be used to compose editor | ||
| * @returns Monaco Editor object | ||
| */ | ||
| const createEditor = useCallback((props) => { | ||
| const { element, value, language, theme, options, disableMinimap } = props; | ||
|
|
||
| MonacoServices.install(monaco); | ||
| const webSocket = createWebSocket(createUrl(SERVER_URL)); | ||
|
|
||
| // listen when the web socket is opened | ||
| listen({ | ||
| webSocket, | ||
| onConnection: (connection) => { | ||
| // create and start the language client | ||
| const languageClient = createLanguageClient(connection); | ||
| const disposable = languageClient.start(); | ||
| connection.onClose(() => disposable.dispose()); | ||
| }, | ||
| }); | ||
|
|
||
| return monaco.editor.create(element, { | ||
| value: value, | ||
| language: language, | ||
| theme: theme, | ||
| 'semanticHighlighting.enabled': true, | ||
| selectOnLineNumbers: true, | ||
| autoIndent: 'full', | ||
| lineNumbers: disableMinimap ? 'off' : 'on', | ||
| overviewRulerBorder: !disableMinimap, | ||
| overviewRulerLanes: disableMinimap ? 0 : 3, | ||
| minimap: { | ||
| enabled: !disableMinimap, | ||
| }, | ||
| ...options, | ||
| }); | ||
| }, []); | ||
|
|
||
| return { createEditor }; | ||
| }; | ||
|
|
||
| export default useMonacoEditor; |
Oops, something went wrong.