From 7d3d35f2b847c4d105714ed4953c1dbd0798ad83 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Sun, 30 Jul 2023 05:07:01 +0800 Subject: [PATCH] refactor: refactor code project folder & refactor the website. --- .lintstagedrc | 5 + .prettierignore | 12 ++ .prettierrc | 27 ++++ README.md | 183 +--------------------- core/README.md | 182 +++++++++++++++++++++ core/package.json | 36 +++++ {src => core/src}/font.d.ts | 0 {src => core/src}/index.tsx | 61 ++++---- core/tsconfig.json | 8 + example/app/App.module.less | 94 ----------- example/app/Select/index.module.less | 10 -- example/app/logo.svg | 7 - example/index.tsx | 6 - lerna.json | 7 + package.json | 94 +++-------- renovate.json | 5 +- src/tsconfig.json | 6 - tsconfig.json | 6 +- .kktrc.ts => www/.kktrc.ts | 3 + www/package.json | 47 ++++++ {public => www/public}/favicon.ico | Bin {public => www/public}/index.html | 0 {example => www/src}/app/App.tsx | 105 ++++++++----- {example => www/src}/app/Select/index.tsx | 16 +- www/src/index.tsx | 30 ++++ {example => www/src}/react-app-env.d.ts | 8 +- {example => www}/tsconfig.json | 4 +- 27 files changed, 502 insertions(+), 460 deletions(-) create mode 100644 .lintstagedrc create mode 100644 .prettierignore create mode 100644 .prettierrc mode change 100644 => 120000 README.md create mode 100644 core/README.md create mode 100644 core/package.json rename {src => core/src}/font.d.ts (100%) rename {src => core/src}/index.tsx (68%) create mode 100644 core/tsconfig.json delete mode 100644 example/app/App.module.less delete mode 100644 example/app/Select/index.module.less delete mode 100644 example/app/logo.svg delete mode 100644 example/index.tsx create mode 100644 lerna.json delete mode 100644 src/tsconfig.json rename .kktrc.ts => www/.kktrc.ts (95%) create mode 100644 www/package.json rename {public => www/public}/favicon.ico (100%) rename {public => www/public}/index.html (100%) rename {example => www/src}/app/App.tsx (71%) rename {example => www/src}/app/Select/index.tsx (69%) create mode 100644 www/src/index.tsx rename {example => www/src}/react-app-env.d.ts (53%) rename {example => www}/tsconfig.json (68%) diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 00000000..a3e5f8b0 --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,5 @@ +{ + "*.{js,jsx,tsx,ts,less,md,json}": [ + "prettier --write" + ] +} \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..74583c14 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,12 @@ +**/*.md +**/*.svg +**/*.ejs +**/*.yml +package.json +node_modules +dist +build +lib +cjs +esm +test diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..1aa68354 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,27 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 120, + "overrides": [ + { + "files": ".prettierrc", + "options": { "parser": "json" } + }, + { + "files": "*.{js,jsx}", + "options": { "parser": "babel" } + }, + { + "files": "*.{ts,tsx}", + "options": { "parser": "babel-ts" } + }, + { + "files": "*.{ts,tsx}", + "options": { "parser": "typescript" } + }, + { + "files": "*.{less,css}", + "options": { "parser": "css" } + } + ] +} diff --git a/README.md b/README.md deleted file mode 100644 index 1624c2f0..00000000 --- a/README.md +++ /dev/null @@ -1,182 +0,0 @@ -react-monacoeditor -=== - -[![CI](https://github.com/jaywcjlove/react-monacoeditor/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/react-monacoeditor/actions/workflows/ci.yml) -[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/react-monacoeditor/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/react-monacoeditor) -[![Downloads](https://img.shields.io/npm/dm/@uiw/react-monacoeditor.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-monacoeditor) -[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-monacoeditor/file/README.md) -[![npm version](https://img.shields.io/npm/v/@uiw/react-monacoeditor.svg)](https://www.npmjs.com/package/@uiw/react-monacoeditor) - -[Monaco Editor](https://github.com/Microsoft/monaco-editor) component for React. demo @[jaywcjlove.github.io/react-monacoeditor/](https://jaywcjlove.github.io/react-monacoeditor/) - - - - - -## Installation - -```bash -npm install @uiw/react-monacoeditor --save -``` - -## Using - -[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-monacoeditor-example-hgqfj?fontsize=14&hidenavigation=1&theme=dark) - -```js -import React from 'react'; -import MonacoEditor from '@uiw/react-monacoeditor'; - - -``` - -## Using with Webpack - -```javascript -import React from 'react'; -import { render } from 'react-dom'; -import MonacoEditor from '@uiw/react-monacoeditor'; - -const code = `import React, { PureComponent } from 'react'; -import MonacoEditor from '@uiw/react-monacoeditor'; - -export default class App extends PureComponent { - render() { - return ( - - ); - } -} -`; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - code: '// type your code...', - } - } - editorDidMount(editor, monaco) { - console.log('editorDidMount', editor, monaco); - editor.focus(); - } - onChange(newValue, e) { - console.log('onChange', newValue, e); - } - render() { - const options = { - selectOnLineNumbers: true, - roundedSelection: false, - readOnly: false, - cursorStyle: 'line', - automaticLayout: false, - theme: 'vs-dark', - scrollbar: { - // Subtle shadows to the left & top. Defaults to true. - useShadows: false, - // Render vertical arrows. Defaults to false. - verticalHasArrows: true, - // Render horizontal arrows. Defaults to false. - horizontalHasArrows: true, - // Render vertical scrollbar. - // Accepted values: 'auto', 'visible', 'hidden'. - // Defaults to 'auto' - vertical: 'visible', - // Render horizontal scrollbar. - // Accepted values: 'auto', 'visible', 'hidden'. - // Defaults to 'auto' - horizontal: 'visible', - verticalScrollbarSize: 17, - horizontalScrollbarSize: 17, - arrowSize: 30, - }, - }; - return ( - - ); - } -} - -render( - , - document.getElementById('root') -); -``` - -Add the [Monaco Editor Webpack Loader Plugin](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`: - -```js -const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); -module.exports = { - plugins: [ - new MonacoWebpackPlugin() - ] -}; -``` - -## Properties - -If you specify `value` property, the component behaves in controlled mode. -Otherwise, it behaves in uncontrolled mode. - -- `width` width of editor. Defaults to `100%`. -- `height` height of editor. Defaults to `100%`. -- `value` value of the auto created model in the editor. -- `defaultValue` the initial value of the auto created model in the editor. -- `language` the initial language of the auto created model in the editor. -- `theme` the theme of the editor `vs`, `vs-dark`, `hc-black` -- `options` refer to [Monaco interface IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html). -- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React). -- `onChange(newValue, event)` an event emitted when the content of the current model has changed. -- `autoComplete?: (model: monaco.editor.ITextModel, position: monaco.Position) => languages.CompletionItem[];` User provided extension function provider for auto-complete. [#47](https://github.com/jaywcjlove/react-monacoeditor/pull/47) - -## Events & Methods - -Refer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditor.html). - -### Related - -- [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting. -- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror -- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React. -- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript. -- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript. -- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser. -- [Nginx Editor](https://github.com/jaywcjlove/nginx-editor) Nginx language for Monaco Editor. - -## Contributors - -As always, thanks to our amazing contributors! - - - - - -Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). - -## License - -Licensed under the MIT License. diff --git a/README.md b/README.md new file mode 120000 index 00000000..a79a2132 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +./core/README.md \ No newline at end of file diff --git a/core/README.md b/core/README.md new file mode 100644 index 00000000..1624c2f0 --- /dev/null +++ b/core/README.md @@ -0,0 +1,182 @@ +react-monacoeditor +=== + +[![CI](https://github.com/jaywcjlove/react-monacoeditor/actions/workflows/ci.yml/badge.svg)](https://github.com/jaywcjlove/react-monacoeditor/actions/workflows/ci.yml) +[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/react-monacoeditor/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/react-monacoeditor) +[![Downloads](https://img.shields.io/npm/dm/@uiw/react-monacoeditor.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-monacoeditor) +[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-monacoeditor/file/README.md) +[![npm version](https://img.shields.io/npm/v/@uiw/react-monacoeditor.svg)](https://www.npmjs.com/package/@uiw/react-monacoeditor) + +[Monaco Editor](https://github.com/Microsoft/monaco-editor) component for React. demo @[jaywcjlove.github.io/react-monacoeditor/](https://jaywcjlove.github.io/react-monacoeditor/) + + + + + +## Installation + +```bash +npm install @uiw/react-monacoeditor --save +``` + +## Using + +[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-monacoeditor-example-hgqfj?fontsize=14&hidenavigation=1&theme=dark) + +```js +import React from 'react'; +import MonacoEditor from '@uiw/react-monacoeditor'; + + +``` + +## Using with Webpack + +```javascript +import React from 'react'; +import { render } from 'react-dom'; +import MonacoEditor from '@uiw/react-monacoeditor'; + +const code = `import React, { PureComponent } from 'react'; +import MonacoEditor from '@uiw/react-monacoeditor'; + +export default class App extends PureComponent { + render() { + return ( + + ); + } +} +`; + +class App extends React.Component { + constructor(props) { + super(props); + this.state = { + code: '// type your code...', + } + } + editorDidMount(editor, monaco) { + console.log('editorDidMount', editor, monaco); + editor.focus(); + } + onChange(newValue, e) { + console.log('onChange', newValue, e); + } + render() { + const options = { + selectOnLineNumbers: true, + roundedSelection: false, + readOnly: false, + cursorStyle: 'line', + automaticLayout: false, + theme: 'vs-dark', + scrollbar: { + // Subtle shadows to the left & top. Defaults to true. + useShadows: false, + // Render vertical arrows. Defaults to false. + verticalHasArrows: true, + // Render horizontal arrows. Defaults to false. + horizontalHasArrows: true, + // Render vertical scrollbar. + // Accepted values: 'auto', 'visible', 'hidden'. + // Defaults to 'auto' + vertical: 'visible', + // Render horizontal scrollbar. + // Accepted values: 'auto', 'visible', 'hidden'. + // Defaults to 'auto' + horizontal: 'visible', + verticalScrollbarSize: 17, + horizontalScrollbarSize: 17, + arrowSize: 30, + }, + }; + return ( + + ); + } +} + +render( + , + document.getElementById('root') +); +``` + +Add the [Monaco Editor Webpack Loader Plugin](https://github.com/microsoft/monaco-editor/tree/main/webpack-plugin) `monaco-editor-webpack-plugin` to your `webpack.config.js`: + +```js +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); +module.exports = { + plugins: [ + new MonacoWebpackPlugin() + ] +}; +``` + +## Properties + +If you specify `value` property, the component behaves in controlled mode. +Otherwise, it behaves in uncontrolled mode. + +- `width` width of editor. Defaults to `100%`. +- `height` height of editor. Defaults to `100%`. +- `value` value of the auto created model in the editor. +- `defaultValue` the initial value of the auto created model in the editor. +- `language` the initial language of the auto created model in the editor. +- `theme` the theme of the editor `vs`, `vs-dark`, `hc-black` +- `options` refer to [Monaco interface IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html). +- `editorDidMount(editor, monaco)` an event emitted when the editor has been mounted (similar to `componentDidMount` of React). +- `onChange(newValue, event)` an event emitted when the content of the current model has changed. +- `autoComplete?: (model: monaco.editor.ITextModel, position: monaco.Position) => languages.CompletionItem[];` User provided extension function provider for auto-complete. [#47](https://github.com/jaywcjlove/react-monacoeditor/pull/47) + +## Events & Methods + +Refer to [Monaco interface IEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditor.html). + +### Related + +- [@uiw/react-textarea-code-editor](https://github.com/uiwjs/react-textarea-code-editor): A simple code editor with syntax highlighting. +- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror +- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React. +- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript. +- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript. +- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser. +- [Nginx Editor](https://github.com/jaywcjlove/nginx-editor) Nginx language for Monaco Editor. + +## Contributors + +As always, thanks to our amazing contributors! + + + + + +Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors). + +## License + +Licensed under the MIT License. diff --git a/core/package.json b/core/package.json new file mode 100644 index 00000000..1d8fe2f3 --- /dev/null +++ b/core/package.json @@ -0,0 +1,36 @@ +{ + "name": "@uiw/react-monacoeditor", + "version": "3.5.8", + "description": "Monaco Editor component for React.", + "homepage": "https://jaywcjlove.github.io/react-monacoeditor/", + "main": "lib/index.js", + "module": "esm/index.js", + "repository": { + "type": "git", + "url": "https://github.com/jaywcjlove/react-monacoeditor.git" + }, + "keywords": [ + "react-monacoeditor", + "monacoeditor", + "monaco-editor", + "monaco", + "editor", + "react", + "vscode" + ], + "files": [ + "lib", + "esm", + "src" + ], + "author": "kenny wong ", + "license": "MIT", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + }, + "dependencies": { + "@babel/runtime": "^7.16.7", + "monaco-editor": "^0.39.0" + } +} diff --git a/src/font.d.ts b/core/src/font.d.ts similarity index 100% rename from src/font.d.ts rename to core/src/font.d.ts diff --git a/src/index.tsx b/core/src/index.tsx similarity index 68% rename from src/index.tsx rename to core/src/index.tsx index d00581e3..8597c2a9 100644 --- a/src/index.tsx +++ b/core/src/index.tsx @@ -2,6 +2,7 @@ import React, { useImperativeHandle, useEffect, useRef, useState } from 'react'; import * as monaco from 'monaco-editor'; import { editor, languages } from 'monaco-editor'; +import type { Position, IDisposable } from 'monaco-editor'; // @ts-ignore import codicon from 'monaco-editor/min/vs/base/browser/ui/codicons/codicon/codicon.ttf'; @@ -31,30 +32,30 @@ export interface MonacoEditorProps extends Omit languages.CompletionItem[]; + autoComplete?: (model: editor.ITextModel, position: Position) => languages.CompletionItem[]; /** * Initial theme to be used for rendering. * The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black'. * You can create custom themes via `monaco.editor.defineTheme`. * To switch a theme, use `monaco.editor.setTheme` */ - theme?: monaco.editor.IStandaloneEditorConstructionOptions['theme']; + theme?: editor.IStandaloneEditorConstructionOptions['theme']; /** * The options to create an editor. */ - options?: monaco.editor.IStandaloneEditorConstructionOptions; + options?: editor.IStandaloneEditorConstructionOptions; /** * an event emitted when the editor has been mounted (similar to `componentDidMount` of React) */ - editorDidMount?: (editor: monaco.editor.IStandaloneCodeEditor, monaco: IMonacoEditor) => void; + editorDidMount?: (editor: editor.IStandaloneCodeEditor, monaco: IMonacoEditor) => void; /** * an event emitted when the content of the current model has changed. */ - onChange?: (value: string, event: monaco.editor.IModelContentChangedEvent) => void; + onChange?: (value: string, event: editor.IModelContentChangedEvent) => void; } export async function loadFont(fontFamily: string, url: string): Promise { @@ -67,38 +68,38 @@ export async function loadFont(fontFamily: string, url: string): Promise { export interface RefEditorInstance { container: HTMLDivElement | null; - editor?: monaco.editor.IStandaloneCodeEditor; + editor?: editor.IStandaloneCodeEditor; monaco: IMonacoEditor; } -function MonacoEditor(props: MonacoEditorProps, ref: ((instance: RefEditorInstance) => void) | React.RefObject | null | undefined) { +function MonacoEditor(props: MonacoEditorProps, ref: React.ForwardedRef) { const { width = '100%', height = '100%', value = '', theme = '', language = 'javascript', autoComplete, options = {}, editorDidMount = noop, onChange = noop, defaultValue = '', ...other } = props; options.language = language || options.language; options.theme = theme || options.theme; const [val, setVal] = useState(defaultValue); const container = useRef(null); - const editor = useRef(); - useImperativeHandle(ref, () => ({ container: container.current, editor: editor.current, monaco })); + const $editor = useRef(); + useImperativeHandle(ref, () => ({ container: container.current, editor: $editor.current, monaco })); useEffect(() => setVal(value), [value]) useEffect(() => { - if (editor.current) { - editor.current.setValue(val); + if ($editor.current) { + $editor.current.setValue(val); } }, [val]) useEffect(() => { if (container.current) { - editor.current = monaco.editor.create(container.current, { + $editor.current = editor.create(container.current, { value: val, language, ...options, }); if (options.theme) { - monaco.editor.setTheme(options.theme); + editor.setTheme(options.theme); } // After initializing monaco editor - editorDidMount!(editor.current, monaco); - editor.current.onDidChangeModelContent((event) => { - const valueCurrent = editor.current!.getValue(); + editorDidMount!($editor.current, monaco); + $editor.current.onDidChangeModelContent((event) => { + const valueCurrent = $editor.current!.getValue(); // Always refer to the latest value onChange!(valueCurrent, event); }); @@ -110,23 +111,23 @@ function MonacoEditor(props: MonacoEditorProps, ref: ((instance: RefEditorInstan }); return () => { - if(editor.current) { - editor.current.dispose() + if($editor.current) { + $editor.current.dispose() } } }, []); useEffect(() => { if (options.theme) { - monaco.editor.setTheme(options.theme); + editor.setTheme(options.theme); } }, [options.theme]) useEffect(() => { - let CPDisposable: monaco.IDisposable; - if (editor.current && autoComplete) { - if (editor?.current?.getModel() && editor?.current?.getPosition()) { - CPDisposable = monaco.languages.registerCompletionItemProvider(language, { + let CPDisposable: IDisposable; + if ($editor.current && autoComplete) { + if ($editor.current.getModel() && $editor.current.getPosition()) { + CPDisposable = languages.registerCompletionItemProvider(language, { provideCompletionItems: (model, position) => { return { suggestions: autoComplete(model, position) @@ -141,21 +142,21 @@ function MonacoEditor(props: MonacoEditorProps, ref: ((instance: RefEditorInstan }, [language, autoComplete]); useEffect(() => { - if (editor.current) { - const model = editor.current.getModel(); + if ($editor.current) { + const model = $editor.current.getModel(); if (model) { - monaco.editor.setModelLanguage(model, props.language || ''); + editor.setModelLanguage(model, props.language || ''); } } }, [language]); useEffect(() => { - if (editor.current) { - const optionsRaw = editor.current.getRawOptions(); + if ($editor.current) { + const optionsRaw = $editor.current.getRawOptions(); (Object.keys(optionsRaw) as (keyof editor.IEditorOptions)[]).forEach((keyname) => { const propsOpt = options[keyname]; if (optionsRaw[keyname] !== propsOpt && propsOpt !== undefined) { - editor.current!.updateOptions({ [keyname]: propsOpt }); + $editor.current!.updateOptions({ [keyname]: propsOpt }); } }); } diff --git a/core/tsconfig.json b/core/tsconfig.json new file mode 100644 index 00000000..f8fdae23 --- /dev/null +++ b/core/tsconfig.json @@ -0,0 +1,8 @@ +{ + "$schema": "http://json.schemastore.org/tsconfig", + "extends": "../tsconfig", + "include": ["src/*"], + "compilerOptions": { + "noEmit": false + } +} \ No newline at end of file diff --git a/example/app/App.module.less b/example/app/App.module.less deleted file mode 100644 index 9109575e..00000000 --- a/example/app/App.module.less +++ /dev/null @@ -1,94 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; -} - -.markdown { - padding: 30px 0 36px 0; - max-width: 995px; - margin: 0 auto; -} - -.App { - .editor { - min-height: 500px; - max-width: 995px; - border-radius: 5px; - margin: -18px auto 0 auto; - background-color: #1e1e1e; - position: relative; - z-index: 999; - box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.1); - } - .options { - max-width: 995px; - margin: 10px auto 0 auto; - } - :global { - .monaco-editor .overflow-guard, .monaco-editor { - border-radius: 5px; - } - } -} - -.AppLogo { - animation: App-logo-spin infinite 20s linear; - height: 80px; -} - -.AppHeader { - background-color: var(--color-theme-bg); - box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.1); - padding: 120px 20px 40px 20px; - position: relative; - z-index: 9; - text-align: center; - .content { - font-size: 18px; - color: #a5a5a5; - font-weight: 200; - } - .button { - a { - color: #333; - outline: none; - min-width: 88px; - min-height: 30px; - margin: 6px 5px; - padding: 0 10px; - font-size: 14px; - display: inline-block; - position: relative; - overflow: hidden; - user-select: none; - border-radius: 3px; - cursor: pointer; - color: var(--color-theme-text); - background-color: var(--color-neutral-muted); - line-height: 30px; - text-transform: uppercase; - text-decoration: none; - transition: background-color .25s linear,color .05s linear,opacity .25s linear,filter .25s linear,visibility .25s linear,transform .25s linear; - &:hover { - background-color: var(--color-fg-default); - color: var(--color-canvas-default); - } - } - } -} - -.AppTitle { - font-size: 30px; - sup { - background-color: var(--color-neutral-muted); - padding: 1px 5px; - font-size: 12px; - border-radius: 3px; - } -} - -@keyframes App-logo-spin { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} diff --git a/example/app/Select/index.module.less b/example/app/Select/index.module.less deleted file mode 100644 index 84923886..00000000 --- a/example/app/Select/index.module.less +++ /dev/null @@ -1,10 +0,0 @@ - -.select + .select { - margin-left: 10px; -} -.select{ - outline: none; - height: 26px; - line-height: 26px; - padding-left: 15px; -} \ No newline at end of file diff --git a/example/app/logo.svg b/example/app/logo.svg deleted file mode 100644 index 6b60c104..00000000 --- a/example/app/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/example/index.tsx b/example/index.tsx deleted file mode 100644 index f2ea4acf..00000000 --- a/example/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { createRoot } from 'react-dom/client'; -import App from './app/App'; - -const container = document.getElementById('root'); -const root = createRoot(container!); -root.render(); diff --git a/lerna.json b/lerna.json new file mode 100644 index 00000000..74f2b847 --- /dev/null +++ b/lerna.json @@ -0,0 +1,7 @@ +{ + "version": "3.5.8", + "packages": [ + "core", + "www" + ] +} diff --git a/package.json b/package.json index 3de74f21..a8995f58 100644 --- a/package.json +++ b/package.json @@ -1,79 +1,35 @@ { - "name": "@uiw/react-monacoeditor", - "version": "3.5.8", - "description": "Monaco Editor component for React.", - "homepage": "https://jaywcjlove.github.io/react-monacoeditor/", - "main": "lib/index.js", - "module": "esm/index.js", + "private": true, "scripts": { - "prepare": "npm run build", - "doc": "kkt build --app-src ./example", - "start": "kkt start --app-src ./example", - "build": "tsbb build src/*.tsx --use-babel --bail", - "watch": "tsbb watch src/*.tsx --use-babel", - "map": "source-map-explorer build/static/js/*.js --html build/website-result.html" + "watch": "lerna exec --scope @uiw/react-monacoeditor -- tsbb watch \"src/*.{ts,tsx}\" --use-babel", + "build": "lerna exec --scope @uiw/react-monacoeditor -- tsbb build \"src/*.{ts,tsx}\" --use-babel", + "start": "lerna exec --scope website -- npm run start", + "doc": "lerna exec --scope website -- npm run build", + "test": "lerna exec --scope @uiw/react-monacoeditor -- tsbb test --env=jsdom", + "coverage": "lerna exec --scope @uiw/react-monacoeditor -- tsbb test --env=jsdom --coverage --bail", + "prepare": "husky install", + "publish": "lerna publish from-package --yes --no-verify-access", + "version": "lerna version --exact --force-publish --no-push --no-git-tag-version", + "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", + "remove": "npm run clean && lerna exec \"rm -rf package-lock.json\" --scope @uiw/react-monacoeditor --scope website", + "clean": "lerna clean --yes" }, - "repository": { - "type": "git", - "url": "https://github.com/jaywcjlove/react-monacoeditor.git" - }, - "keywords": [ - "react-monacoeditor", - "monacoeditor", - "monaco-editor", - "monaco", - "editor", - "react", - "vscode" - ], - "files": [ - "lib", - "esm", - "src" - ], - "author": "kenny wong ", "license": "MIT", - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "peerDependencies": { - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "workspaces": [ + "core", + "www" + ], + "engines": { + "node": ">=16.0.0" }, - "dependencies": { - "@babel/runtime": "^7.16.7", - "monaco-editor": "^0.39.0" + "overrides": { + "typescript": "^5.1.3" }, "devDependencies": { - "@types/react": "^18.0.17", - "@types/react-dom": "^18.0.6", - "@kkt/less-modules": "^7.2.0", - "@kkt/raw-modules": "^7.2.0", - "@kkt/scope-plugin-options": "^7.2.0", - "@uiw/react-markdown-preview": "^4.0.24", - "@uiw/react-github-corners": "^1.5.14", - "@wcj/dark-mode": "^1.0.15", - "code-example": "^3.3.6", - "kkt": "^7.2.0", - "monaco-editor-webpack-plugin": "~7.0.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "source-map-explorer": "~2.5.2", + "husky": "^8.0.3", + "lint-staged": "^13.2.0", + "lerna": "^7.0.1", + "prettier": "^3.0.0", "tsbb": "^4.1.0" - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] } } diff --git a/renovate.json b/renovate.json index 568dd0bd..89c98f00 100644 --- a/renovate.json +++ b/renovate.json @@ -1,8 +1,5 @@ { - "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": [ - "config:base" - ], + "extends": ["config:base"], "packageRules": [ { "matchPackagePatterns": ["*"], diff --git a/src/tsconfig.json b/src/tsconfig.json deleted file mode 100644 index cc70e12d..00000000 --- a/src/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../tsconfig", - "compilerOptions": { - "noEmit": true - } -} diff --git a/tsconfig.json b/tsconfig.json index 083f851d..63885630 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,12 +13,8 @@ "resolveJsonModule": true, "isolatedModules": true, "declaration": true, - "baseUrl": "example", "jsx": "react-jsx", "noFallthroughCasesInSwitch": true, "noEmit": true - }, - "include": [ - "src" - ] + } } diff --git a/.kktrc.ts b/www/.kktrc.ts similarity index 95% rename from .kktrc.ts rename to www/.kktrc.ts index 1bd96cf6..a9fe98f2 100644 --- a/.kktrc.ts +++ b/www/.kktrc.ts @@ -5,11 +5,13 @@ import lessModules from '@kkt/less-modules'; import rawModules from '@kkt/raw-modules'; import scopePluginOptions from '@kkt/scope-plugin-options'; import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin'; +import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader'; import pkg from './package.json'; export default (conf: Configuration, env: 'production' | 'development', options: LoaderConfOptions) => { conf = lessModules(conf, env, options); conf = rawModules(conf, env, { ...options, test: /\.(md|txt)$/i }); + conf = mdCodeModulesLoader(conf); conf = scopePluginOptions(conf, env, { ...options, allowedFiles: [ @@ -26,6 +28,7 @@ export default (conf: Configuration, env: 'production' | 'development', options: conf.plugins!.push(new webpack.DefinePlugin({ VERSION: JSON.stringify(pkg.version), })); + conf.module!.exprContextCritical = false; if (env === 'production') { conf.output = { ...conf.output, publicPath: './' }; conf.optimization = { diff --git a/www/package.json b/www/package.json new file mode 100644 index 00000000..f99aa7b5 --- /dev/null +++ b/www/package.json @@ -0,0 +1,47 @@ +{ + "name": "website", + "version": "3.5.8", + "preview": true, + "scripts": { + "build": "kkt build", + "start": "kkt start", + "map": "source-map-explorer build/static/js/*.js --html build/website-result.html" + }, + "dependencies": { + "@uiw/react-markdown-preview-example": "^1.5.6", + "@uiw/react-monacoeditor": "3.5.8", + "code-example": "^3.3.6", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@kkt/raw-modules": "^7.5.1", + "@kkt/less-modules": "^7.5.1", + "@kkt/scope-plugin-options": "^7.5.1", + "@types/react": "^18.0.31", + "@types/react-dom": "^18.0.11", + "kkt": "^7.5.1", + "monaco-editor-webpack-plugin": "~7.0.1", + "markdown-react-code-preview-loader": "^2.1.2", + "source-map-explorer": "^2.5.3" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/favicon.ico b/www/public/favicon.ico similarity index 100% rename from public/favicon.ico rename to www/public/favicon.ico diff --git a/public/index.html b/www/public/index.html similarity index 100% rename from public/index.html rename to www/public/index.html diff --git a/example/app/App.tsx b/www/src/app/App.tsx similarity index 71% rename from example/app/App.tsx rename to www/src/app/App.tsx index 240c1c86..795f48b4 100644 --- a/example/app/App.tsx +++ b/www/src/app/App.tsx @@ -1,13 +1,58 @@ import React, { useEffect, useRef, useState } from 'react'; import { editor } from 'monaco-editor'; -import Markdown from '@uiw/react-markdown-preview'; -import GitHubCorners from '@uiw/react-github-corners'; -import '@wcj/dark-mode'; -import MonacoEditor, { RefEditorInstance } from '../../'; +import MonacoEditor, { RefEditorInstance } from '@uiw/react-monacoeditor'; +import styled from 'styled-components'; import Select from './Select'; -import logo from './logo.svg'; -import styles from './App.module.less'; -import DocumentStr from '../../README.md'; + +const Wrapper = styled.div` + header { + background-color: var(--color-theme-bg); + padding: 0 20px 40px 20px; + position: relative; + z-index: 9; + text-align: center; + a { + color: #333; + outline: none; + min-width: 88px; + min-height: 30px; + margin: 6px 5px; + padding: 0 10px; + font-size: 14px; + display: inline-block; + position: relative; + overflow: hidden; + user-select: none; + border-radius: 3px; + cursor: pointer; + color: var(--color-theme-text); + background-color: var(--color-neutral-muted); + line-height: 30px; + text-transform: uppercase; + text-decoration: none; + transition: background-color .25s linear,color .05s linear,opacity .25s linear,filter .25s linear,visibility .25s linear,transform .25s linear; + &:hover { + background-color: var(--color-fg-default); + color: var(--color-canvas-default); + } + } + } +`; + +const Editor = styled.div` + min-height: 500px; + max-width: 995px; + margin: 0 auto 0 auto; + position: relative; + z-index: 999; + .monaco-editor, .monaco-editor .overflow-guard { + border-radius: 5px; + } +`; + +const Options = styled.div` + margin: 10px auto 0 auto; +`; export const languageData = [ 'abap', 'aes', 'apex', 'azcli', 'bat', 'c', 'cameligo', 'clojure', 'coffeescript', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lex', 'lua', 'markdown', 'mips', 'msdax', 'mysql', 'objective', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'plaintext', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'sol', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'verilog', 'xml', 'yaml' @@ -34,8 +79,6 @@ export default function Example() { }, ]); const editorRef = useRef(null); - // @ts-ignore - const version = VERSION; // eslint-disable-line const options: editor.IStandaloneEditorConstructionOptions & editor.IEditorScrollbarOptions = { selectOnLineNumbers: true, roundedSelection: false, @@ -60,8 +103,8 @@ export default function Example() { // horizontalScrollbarSize: 17, // arrowSize: 30, }; - let DocumentStrSource = DocumentStr; - if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)/, ''); + // let DocumentStrSource = DocumentStr; + // if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)/, ''); function editorDidMount(editor: editor.IStandaloneCodeEditor) { // console.log('editorDidMount', editor, monaco); // eslint-disable-line @@ -108,28 +151,15 @@ export default function Example() { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( -
- - -
- logo -

React Monaco Editor v{version}

-

MonacoEditor component for React.

-
- {hyperlink.map((item, idx) => { - return ( - {item.label} - ); - })} -
+ +
+ {hyperlink.map((item, idx) => { + return ( + {item.label} + ); + })}
-
+ -
-
+ + -
-
- -
-
+ + ) } diff --git a/example/app/Select/index.tsx b/www/src/app/Select/index.tsx similarity index 69% rename from example/app/Select/index.tsx rename to www/src/app/Select/index.tsx index 22892e5c..e7a82267 100644 --- a/example/app/Select/index.tsx +++ b/www/src/app/Select/index.tsx @@ -1,7 +1,17 @@ import React from 'react'; -import styles from './index.module.less'; +import styled from 'styled-components'; import { languageData } from '../App'; +const SelectWrapper = styled.select` + outline: none; + height: 26px; + line-height: 26px; + padding-left: 15px; + & + & { + margin-left: 10px; + } +`; + export type SelectProps = { options: typeof languageData; value: string; @@ -10,7 +20,7 @@ export type SelectProps = { const Select = ({ value, options, onChange }: SelectProps) => { return ( - + ); }; diff --git a/www/src/index.tsx b/www/src/index.tsx new file mode 100644 index 00000000..ab956bf0 --- /dev/null +++ b/www/src/index.tsx @@ -0,0 +1,30 @@ +import { createRoot } from 'react-dom/client'; +import MarkdownPreviewExample from '@uiw/react-markdown-preview-example'; +import data from '@uiw/react-monacoeditor/README.md'; +import App from './app/App'; + +const Github = MarkdownPreviewExample.Github; +const Example = MarkdownPreviewExample.Example; +const container = document.getElementById('root'); +const root = createRoot(container!); +root.render( + + + + + + +); + diff --git a/example/react-app-env.d.ts b/www/src/react-app-env.d.ts similarity index 53% rename from example/react-app-env.d.ts rename to www/src/react-app-env.d.ts index 8642661e..f88d663b 100644 --- a/example/react-app-env.d.ts +++ b/www/src/react-app-env.d.ts @@ -5,7 +5,11 @@ declare module '*.less' { export default classes; } +declare var VERSION: string; + declare module '*.md' { - const file: string; - export default file; + import { CodeBlockData } from 'markdown-react-code-preview-loader'; + const src: CodeBlockData; + export default src; } + diff --git a/example/tsconfig.json b/www/tsconfig.json similarity index 68% rename from example/tsconfig.json rename to www/tsconfig.json index 10d8f6db..81e0a442 100644 --- a/example/tsconfig.json +++ b/www/tsconfig.json @@ -1,8 +1,6 @@ { "extends": "../tsconfig", - "include": [ - "./" - ], + "include": ["src/*", ".kktrc.ts"], "compilerOptions": { "noEmit": false }