From e4c8607566e30d21acf674c19da7fb076dd5b61c Mon Sep 17 00:00:00 2001 From: harry Date: Mon, 16 Mar 2020 12:49:09 +0800 Subject: [PATCH] add mini-pagination --- public/react/src/app-test.jsx | 9 + .../src/components/mini-pagination/index.jsx | 32 ++ .../src/components/mini-pagination/index.less | 60 +++ .../monaco-editor/TPIMonacoConfig.js | 117 +++++ .../src/components/monaco-editor/index.css | 438 ++++++++++++++++++ .../src/components/monaco-editor/index.jsx | 190 ++++++++ 6 files changed, 846 insertions(+) create mode 100644 public/react/src/app-test.jsx create mode 100644 public/react/src/components/mini-pagination/index.jsx create mode 100644 public/react/src/components/mini-pagination/index.less create mode 100644 public/react/src/components/monaco-editor/TPIMonacoConfig.js create mode 100644 public/react/src/components/monaco-editor/index.css create mode 100644 public/react/src/components/monaco-editor/index.jsx diff --git a/public/react/src/app-test.jsx b/public/react/src/app-test.jsx new file mode 100644 index 000000000..1bdba5f30 --- /dev/null +++ b/public/react/src/app-test.jsx @@ -0,0 +1,9 @@ +import React from 'react' +import MiniPagination from './components/mini-pagination' + +export default () => { + function onPageChange(page) { + console.log(page, '-----------') + } + return +} \ No newline at end of file diff --git a/public/react/src/components/mini-pagination/index.jsx b/public/react/src/components/mini-pagination/index.jsx new file mode 100644 index 000000000..5a940ad68 --- /dev/null +++ b/public/react/src/components/mini-pagination/index.jsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react' +import './index.less' +function noop() { } + +export default ({ current, defaultCurrent, total, pageSize, onChange = noop }) => { + const maxPage = Math.ceil(total / pageSize) + const [page, setPage] = useState(current || defaultCurrent) + + function next() { + if (page < maxPage) { + let value = page + 1 + setPage(value) + onChange(value) + } + } + + function prev() { + if (page > 1) { + let value = page - 1 + setPage(value) + onChange(value) + } + } + + return ( +
+ 上一页 + 下一页 +
+ ) + +} \ No newline at end of file diff --git a/public/react/src/components/mini-pagination/index.less b/public/react/src/components/mini-pagination/index.less new file mode 100644 index 000000000..a1e9f053d --- /dev/null +++ b/public/react/src/components/mini-pagination/index.less @@ -0,0 +1,60 @@ +.mini-pagination { + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; + + a { + display: block; + padding: 0 10px 0 22px; + border-width: 1px; + border-radius: 3px; + margin-right: 4px; + font-size: 12px; + line-height: 30px; + cursor: pointer; + border-style: solid; + outline: none; + border-color: #c4c6cf; + background: #fff; + color: #333; + + position: relative; + + &:hover { + background-color: #f2f3f7; + border-color: #a0a2ad; + text-decoration: none; + } + + &:before { + position: absolute; + content: ' '; + width: 8px; + top: 10px; + left: 10px; + height: 8px; + transform: rotate(-45deg); + border-top: 1px solid #333; + border-left: 1px solid #333; + } + + &:last-child { + padding: 0 22px 0 10px; + margin: 0 0 0 4px; + + &:before { + left: auto; + right: 10px; + transform: rotate(135deg); + } + } + + &.disabled { + cursor: not-allowed; + background-color: #f7f8fa; + border-color: #e6e7eb; + color: #e0e0e0; + } + } +} \ No newline at end of file diff --git a/public/react/src/components/monaco-editor/TPIMonacoConfig.js b/public/react/src/components/monaco-editor/TPIMonacoConfig.js new file mode 100644 index 000000000..2c5452fc5 --- /dev/null +++ b/public/react/src/components/monaco-editor/TPIMonacoConfig.js @@ -0,0 +1,117 @@ +import * as monaco from 'monaco-editor' +import { union } from 'lodash' +const ifelse = { + label: 'ifelse', + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: [ + 'if (${1:condition}) {', + '\t$0', + '} else {', + '\t', + '}' + ].join('\n'), + insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'If-Else Statement' +} + + +function getWordsInString(string) { + return string.match(/[A-z]+/g) +} + +const cArray = ['auto', 'break', 'case', 'char', 'const', 'continue', 'default', 'do', 'double', 'else', 'enum', 'extern', + 'float', 'for', 'goto', 'if', 'int', 'long', 'register', 'return', 'short', 'signed', 'sizeof', 'static', 'struct', + 'switch', 'typedef', 'union', 'unsigned', 'void', 'volatile', 'while', 'inline', 'restrict', '_Bool', '_Complex', + '_Imaginary', '_Alignas', '_Alignof', '_Atomic', '_Static_assert', '_Noreturn', '_Thread_local', '_Generic'] + +monaco.languages.registerCompletionItemProvider('cpp', { + provideCompletionItems: (model) => { + const currentFileWords = getWordsInString(model.getValue()); + const all = union(cArray, currentFileWords) + var suggestions = all.map((item) => { + return { + label: item, + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: item, + insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet + } + }); + suggestions.push(ifelse) + + return { suggestions: suggestions }; + } +}); + +// https://www.programiz.com/python-programming/keyword-list +const pythonArray = ['False', 'None', 'True', 'and', 'as', 'assert', 'break', 'class', 'continue', 'def', 'del', 'elif', + 'else', 'except', 'finally', 'for', 'from', 'global', 'if', 'import', 'in', 'is', 'lambda', 'nonlocal', 'not', 'or', + 'pass', 'raise', 'return', 'try', 'while', 'with', 'yield'] + +monaco.languages.registerCompletionItemProvider('python', { + provideCompletionItems: (model) => { + const currentFileWords = getWordsInString(model.getValue()); + const all = union(pythonArray, currentFileWords) + var suggestions = all.map((item) => { + return { + label: item, + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: item, + insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet + } + }); + suggestions.push({ + label: 'print', + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: [ + 'print($0)', + ].join('\n'), + insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'print' + }) + return { suggestions: suggestions }; + } +}); + +const javaArray = ['abstract', 'assert', 'boolean', 'break', 'byte', 'case', 'catch', 'char', 'class', 'const', + 'continue', 'default', 'do', 'double', 'else', 'enum', 'extends', 'final', 'finally', 'float', 'for', 'goto', 'if', + 'implements', 'import', 'instance of', 'int', 'interface', 'long', 'native', + 'new', 'package', 'private', 'protected', 'public', 'return', 'strictfp', 'short', 'static', 'super', 'switch', + 'synchronized', 'this', 'throw', 'throws', 'transient', 'try', 'void', 'volatile', 'while'] + +monaco.languages.registerCompletionItemProvider('java', { + provideCompletionItems: (model) => { + const currentFileWords = getWordsInString(model.getValue()); + const all = _.union(javaArray, currentFileWords) + + var suggestions = all.map((item) => { + return { + label: item, + kind: monaco.languages.CompletionItemKind.Keyword, + insertText: item, + insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet + } + }); + suggestions.push(ifelse) + suggestions.push({ + label: 'main', + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: [ + 'public static void main(String[] args) {', + '\t$0', + '}', + ].join('\n'), + insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'main function' + }) + suggestions.push({ + label: 'System.out.print', + kind: monaco.languages.CompletionItemKind.Snippet, + insertText: [ + 'System.out.print($0)', + ].join('\n'), + insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, + documentation: 'system print' + }) + return { suggestions: suggestions }; + } +}); \ No newline at end of file diff --git a/public/react/src/components/monaco-editor/index.css b/public/react/src/components/monaco-editor/index.css new file mode 100644 index 000000000..51522c42f --- /dev/null +++ b/public/react/src/components/monaco-editor/index.css @@ -0,0 +1,438 @@ +.monaco-editor .minimap-slider, +.monaco-editor .minimap-slider .minimap-slider-horizontal { + background: rgba(121, 121, 121, 0.2); +} + +.monaco-editor .minimap-slider:hover, +.monaco-editor .minimap-slider:hover .minimap-slider-horizontal { + background: rgba(100, 100, 100, 0.35); +} + +.monaco-editor .minimap-slider.active, +.monaco-editor .minimap-slider.active .minimap-slider-horizontal { + background: rgba(191, 191, 191, 0.2); +} + +.monaco-editor .minimap-shadow-visible { + box-shadow: #000000 -6px 0 6px -6px inset; +} + +.monaco-editor .scroll-decoration { + box-shadow: #000000 0 6px 6px -6px inset; +} + +.monaco-editor .focused .selected-text { + background-color: #264f78; +} + +.monaco-editor .selected-text { + background-color: #3a3d41; +} + +.monaco-editor, +.monaco-editor-background, +.monaco-editor .inputarea.ime-input { + background-color: #1e1e1e; +} + +.monaco-editor, +.monaco-editor .inputarea.ime-input { + color: #d4d4d4; +} + +.monaco-editor .margin { + background-color: #1e1e1e; +} + +.monaco-editor .rangeHighlight { + background-color: rgba(255, 255, 255, 0.04); +} + +.vs-whitespace { + color: rgba(227, 228, 226, 0.16) !important; +} + +.monaco-editor .view-overlays .current-line { + border: 2px solid #282828; +} + +.monaco-editor .margin-view-overlays .current-line-margin { + border: 2px solid #282828; +} + +.monaco-editor .lines-content .cigr { + box-shadow: 1px 0 0 0 #404040 inset; +} + +.monaco-editor .lines-content .cigra { + box-shadow: 1px 0 0 0 #707070 inset; +} + +.monaco-editor .line-numbers { + color: #858585; +} + +.monaco-editor .current-line~.line-numbers { + color: #c6c6c6; +} + +.monaco-editor .view-ruler { + box-shadow: 1px 0 0 0 #5a5a5a inset; +} + +.monaco-editor .cursor { + background-color: #aeafad; + border-color: #aeafad; + color: #515052; +} + +.monaco-editor .squiggly-error { + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23ea4646'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left; +} + +.monaco-editor .squiggly-warning { + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%234d9e4d'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left; +} + +.monaco-editor .squiggly-info { + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23008000'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left; +} + +.monaco-editor .squiggly-hint { + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%223%22%20width%3D%2212%22%3E%3Cg%20fill%3D%22rgba(238%2C%20238%2C%20238%2C%200.7)%22%3E%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat bottom left; +} + +.showUnused .monaco-editor .squiggly-inline-unnecessary { + opacity: 0.667; +} + +.monaco-diff-editor .diff-review-line-number { + color: #858585; +} + +.monaco-diff-editor .diff-review-shadow { + box-shadow: #000000 0 -6px 6px -6px inset; +} + +.monaco-editor .line-insert, +.monaco-editor .char-insert { + background-color: rgba(155, 185, 85, 0.2); +} + +.monaco-diff-editor .line-insert, +.monaco-diff-editor .char-insert { + background-color: rgba(155, 185, 85, 0.2); +} + +.monaco-editor .inline-added-margin-view-zone { + background-color: rgba(155, 185, 85, 0.2); +} + +.monaco-editor .line-delete, +.monaco-editor .char-delete { + background-color: rgba(255, 0, 0, 0.2); +} + +.monaco-diff-editor .line-delete, +.monaco-diff-editor .char-delete { + background-color: rgba(255, 0, 0, 0.2); +} + +.monaco-editor .inline-deleted-margin-view-zone { + background-color: rgba(255, 0, 0, 0.2); +} + +.monaco-diff-editor.side-by-side .editor.modified { + box-shadow: -6px 0 5px -5px #000000; +} + +.monaco-editor .bracket-match { + background-color: rgba(0, 100, 0, 0.1); +} + +.monaco-editor .bracket-match { + border: 1px solid #888888; +} + +.monaco-editor .codelens-decoration { + color: #999999; +} + +.monaco-editor .codelens-decoration>a:hover { + color: #4e94ce !important; +} + +.monaco-editor .findOptionsWidget { + background-color: #252526; +} + +.monaco-editor .findOptionsWidget { + box-shadow: 0 2px 8px #000000; +} + +.monaco-editor .findMatch { + background-color: rgba(234, 92, 0, 0.33); +} + +.monaco-editor .currentFindMatch { + background-color: #515c6a; +} + +.monaco-editor .findScope { + background-color: rgba(58, 61, 65, 0.4); +} + +.monaco-editor .find-widget { + background-color: #252526; +} + +.monaco-editor .find-widget { + box-shadow: 0 2px 8px #000000; +} + +.monaco-editor .find-widget.no-results .matchesCount { + color: #f48771; +} + +.monaco-editor .find-widget .monaco-sash { + background-color: #454545; + width: 3px !important; + margin-left: -4px; +} + +.monaco-editor .find-widget .monaco-checkbox .checkbox:checked+.label { + border: 1px solid #007acc; +} + +.monaco-editor.vs .valueSetReplacement { + outline: solid 2px #888888; +} + +.monaco-editor .detected-link-active { + color: #4e94ce !important; +} + +.monaco-editor .monaco-editor-overlaymessage .anchor { + border-top-color: #007acc; +} + +.monaco-editor .monaco-editor-overlaymessage .message { + border: 1px solid #007acc; +} + +.monaco-editor .monaco-editor-overlaymessage .message { + background-color: #063b49; +} + +.monaco-editor .parameter-hints-widget { + border: 1px solid #454545; +} + +.monaco-editor .parameter-hints-widget.multiple .body { + border-left: 1px solid rgba(69, 69, 69, 0.5); +} + +.monaco-editor .parameter-hints-widget .signature.has-docs { + border-bottom: 1px solid rgba(69, 69, 69, 0.5); +} + +.monaco-editor .parameter-hints-widget { + background-color: #252526; +} + +.monaco-editor .parameter-hints-widget a { + color: #3794ff; +} + +.monaco-editor .parameter-hints-widget code { + background-color: rgba(10, 10, 10, 0.4); +} + +.monaco-editor .snippet-placeholder { + background-color: rgba(124, 124, 124, 0.3); + outline-color: transparent; +} + +.monaco-editor .finish-snippet-placeholder { + background-color: transparent; + outline-color: #525252; +} + +.monaco-editor .suggest-widget .monaco-list .monaco-list-row .monaco-highlighted-label .highlight { + color: #0097fb; +} + +.monaco-editor .suggest-widget { + color: #d4d4d4; +} + +.monaco-editor .suggest-widget a { + color: #3794ff; +} + +.monaco-editor .suggest-widget code { + background-color: rgba(10, 10, 10, 0.4); +} + +.monaco-editor .focused .selectionHighlight { + background-color: rgba(173, 214, 255, 0.15); +} + +.monaco-editor .selectionHighlight { + background-color: rgba(173, 214, 255, 0.07); +} + +.monaco-editor .wordHighlight { + background-color: rgba(87, 87, 87, 0.72); +} + +.monaco-editor .wordHighlightStrong { + background-color: rgba(0, 73, 114, 0.72); +} + +.monaco-editor .accessibilityHelpWidget { + background-color: #252526; +} + +.monaco-editor .accessibilityHelpWidget { + box-shadow: 0 2px 8px #000000; +} + +.monaco-editor .tokens-inspect-widget { + border: 1px solid #454545; +} + +.monaco-editor .tokens-inspect-widget .tokens-inspect-separator { + background-color: #454545; +} + +.monaco-editor .tokens-inspect-widget { + background-color: #252526; +} + +.monaco-editor .reference-zone-widget .ref-tree .referenceMatch { + background-color: rgba(234, 92, 0, 0.3); +} + +.monaco-editor .reference-zone-widget .preview .reference-decoration { + background-color: rgba(255, 143, 0, 0.6); +} + +.monaco-editor .reference-zone-widget .ref-tree { + background-color: #252526; +} + +.monaco-editor .reference-zone-widget .ref-tree { + color: #bbbbbb; +} + +.monaco-editor .reference-zone-widget .ref-tree .reference-file { + color: #ffffff; +} + +.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows>.monaco-list-row.selected:not(.highlighted) { + background-color: rgba(51, 153, 255, 0.2); +} + +.monaco-editor .reference-zone-widget .ref-tree .monaco-list:focus .monaco-list-rows>.monaco-list-row.selected:not(.highlighted) { + color: #ffffff !important; +} + +.monaco-editor .reference-zone-widget .preview .monaco-editor .monaco-editor-background, +.monaco-editor .reference-zone-widget .preview .monaco-editor .inputarea.ime-input { + background-color: #001f33; +} + +.monaco-editor .reference-zone-widget .preview .monaco-editor .margin { + background-color: #001f33; +} + +.monaco-editor .marker-widget a { + color: #3794ff; +} + +.monaco-editor .hoverHighlight { + background-color: rgba(38, 79, 120, 0.25); +} + +.monaco-editor .monaco-editor-hover { + background-color: #252526; +} + +.monaco-editor .monaco-editor-hover { + border: 1px solid #454545; +} + +.monaco-editor .monaco-editor-hover .hover-row:not(:first-child):not(:empty) { + border-top: 1px solid rgba(69, 69, 69, 0.5); +} + +.monaco-editor .monaco-editor-hover hr { + border-top: 1px solid rgba(69, 69, 69, 0.5); +} + +.monaco-editor .monaco-editor-hover hr { + border-bottom: 0px solid rgba(69, 69, 69, 0.5); +} + +.monaco-editor .monaco-editor-hover a { + color: #3794ff; +} + +.monaco-editor .monaco-editor-hover .hover-row .actions { + background-color: #2c2c2d; +} + +.monaco-editor .monaco-editor-hover code { + background-color: rgba(10, 10, 10, 0.4); +} + +.monaco-editor .goto-definition-link { + color: #4e94ce !important; +} + +.mtki { + font-style: italic; +} + +.mtkb { + font-weight: bold; +} + +.mtku { + text-decoration: underline; + text-underline-position: under; +} + + + + +#extend-challenge-file-edit { + height: 100%; +} + +/* context menu会有样式问题，先给隐藏掉 */ +.context-view { + display: none !important; +} + +/* 去掉灰色边框 */ +#extend-challenge-file-edit { + border: none !important; +} + +/* 覆盖tpi样式 */ +.monaco-tree .monaco-tree-rows>.monaco-tree-row>.content { + min-width: auto; +} + +/* 选中行边框 */ +.monaco-editor .view-overlays .current-line { + border-width: 1px !important; +} + +#extend-challenge-file-edit { + width: '100%'; + height: '100%'; + border: '1px solid grey'; +} \ No newline at end of file diff --git a/public/react/src/components/monaco-editor/index.jsx b/public/react/src/components/monaco-editor/index.jsx new file mode 100644 index 000000000..e2cb11db0 --- /dev/null +++ b/public/react/src/components/monaco-editor/index.jsx @@ -0,0 +1,190 @@ +import React, { useEffect, useRef, useState } from 'react' +import * as monaco from 'monaco-editor' +import './TPIMonacoConfig' +import './index.css' + +function processSize(size) { + return !/^\d+$/.test(size) ? size : `${size}px` +} +function noop() { } +let __prevent_trigger_change_event = false + +function debounce(func, wait, immediate) { + var timeout + return function () { + var context = this, args = arguments + var later = function () { + timeout = null + if (!immediate) func.apply(context, args) + }; + var callNow = immediate && !timeout + clearTimeout(timeout) + timeout = setTimeout(later, wait) + if (callNow) func.apply(context, args) + } +} + + + +const mirror2LanguageMap = { + 'JFinal': 'java', + 'Java': 'java', + 'JavaWeb': 'java', + 'Kotlin': 'java', + + 'Html': 'html', + 'Css': 'css', + 'Javascript': 'javascript', + 'JavaScript': 'javascript', + + 'C/C++': 'cpp', + 'MachineLearning': 'python', + 'Python2.7': 'python', + 'Python3.6': 'python', + + 'C#': 'csharp', + 'R': 'r' + +} +function getLanguageByMirrorName(mirror_name) { + let lang = 'javascript' + if (mirror_name && mirror_name.length) { + // 需要倒着遍历， html、css的实训，主评测语言环境是python，小类别是html或css + for (let i = mirror_name.length - 1; i >= 0; i--) { + let languageVal = mirror2LanguageMap[mirror_name[i]] + if (languageVal) { + lang = languageVal + break + } + } + } + return lang +} + + +export default ({ + width = '100%', + height = '100%', + value, + language = 'javascript', + options = {}, + overrideServices = {}, + theme = 'vs-dark', + onChange = noop, + editorDidMount = noop +}) => { + const editorEl = useRef() + const editor = useRef({}) + const [init, setInit] = useState(false) + + function onLayout() { + if (window.ResizeObserver) { + const ro = new window.ResizeObserver(entries => { + for (let entry of entries) { + if (entry.target.offsetHeight > 0) { + editor.current.instance.layout() + } + } + }) + ro.observe(editorEl.current.parentElement) + } else { + setTimeout(() => { + editor.current.instance.layout() + }, 100); + } + } + + useEffect(() => { + editor.current.instance = monaco.editor.create( + editorEl.current, { + value, + language: getLanguageByMirrorName(language), + theme, + ...options + }, + overrideServices + ) + editorDidMount(editor.current.instance, monaco) + editor.current.subscription = editor.current.instance.onDidChangeModelContent(event => { + if (!__prevent_trigger_change_event) { + onChange(editor.current.instance.getValue(), event); + } + }) + setInit(true) + + const resizeHandler = debounce(() => { editor.current.instance.layout() }, 100) + window.addEventListener('resize', resizeHandler) + onLayout() + return () => { + const el = editor.current.instance + el.dispose() + const model = el.getModel() + if (model) { + model.dispose() + } + if (editor.current.subscription) { + editor.current.subscription.dispose() + } + window.removeEventListener('resize', resizeHandler) + } + }, [editorEl.current]) + + useEffect(() => { + let instance = editor.current.instance + if (instance && init) { + __prevent_trigger_change_event = true + const model = instance.getModel() + instance.pushUndoStop() + model.pushEditOperations( + [], + [ + { + range: model.getFullModelRange(), + text: value + } + ] + ) + instance.pushUndoStop(); + __prevent_trigger_change_event = false; + } + }, [value, init]) + + useEffect(() => { + let instance = editor.current.instance + if (instance && init) { + monaco.editor.setModelLanguage(instance.getModel(), getLanguageByMirrorName(language)) + } + }, [language, init]) + + useEffect(() => { + let instance = editor.current.instance + if (instance && init) { + monaco.editor.setTheme(theme) + } + }, [theme, init]) + + useEffect(() => { + let instance = editor.current.instance + if (instance && init) { + instance.updateOptions(options) + } + }, [options, init]) + + useEffect(() => { + let instance = editor.current.instance + if (instance && init) { + instance.layout() + } + }, [width, height, init]) + + const fixedWidth = processSize(width) + const fixedHeight = processSize(height) + const style = { + width: fixedWidth, + height: fixedHeight + } + + return ( +
+ ) +} \ No newline at end of file