ui: scratchpad: allow reuse existing models

packages/ui-default/components/monaco/loader.ts

@@ -66,7 +66,7 @@ export async function load(features = ['markdown']) {
   }
   await res.loadThemePromise;
   resolve();
-  return { monaco: res.default, registerAction: res.registerAction };
+  return { monaco: res.default, registerAction: res.registerAction, customOptions: {} };
 }
 
 export default load;

packages/ui-default/components/scratchpad/ScratchpadEditorContainer.tsx

@@ -1,25 +1,36 @@
+import type * as monaco from 'monaco-editor';
 import React from 'react';
 import { connect } from 'react-redux';
 import { load } from 'vj/components/monaco/loader';
 
-const mapStateToProps = (state) => ({
+interface ScratchpadOptions {
+  value?: string;
+  language?: string;
+  handleUpdateCode?: (str: string, event: monaco.editor.IModelContentChangedEvent) => void;
+  mainSize?: number;
+  recordSize?: number;
+  pretestSize?: number;
+}
+
+export default connect((state: any) => ({
   value: state.editor.code,
   language: window.LANGS[state.editor.lang]?.monaco,
   mainSize: state.ui.main.size,
   pretestSize: state.ui.pretest.size,
   recordSize: state.ui.records.size,
-});
+}), (dispatch) => ({
-const mapDispatchToProps = (dispatch) => ({
+  handleUpdateCode: (code: string) => {
-  handleUpdateCode: (code) => {
     dispatch({
       type: 'SCRATCHPAD_EDITOR_UPDATE_CODE',
       payload: code,
     });
   },
-});
+}))(class MonacoEditor extends React.PureComponent<ScratchpadOptions> {
-
-export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor extends React.PureComponent {
   disposable = [];
+  __prevent_trigger_change_event = false;
+  model: monaco.editor.ITextModel;
+  editor: monaco.editor.IStandaloneCodeEditor;
+  containerElement: HTMLElement;
 
   async componentDidMount() {
     const value = this.props.value || '';
@@ -28,12 +39,11 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
     const uri = monaco.Uri.parse(`hydro://${UiContext.pdoc.pid || UiContext.pdoc.docId}.${language}`);
     this.model = monaco.editor.createModel(value, language, uri);
     if (this.containerElement) {
-      /** @type {monaco.editor.IStandaloneEditorConstructionOptions} */
+      const config: monaco.editor.IStandaloneEditorConstructionOptions = {
-      const config = {
         theme: 'vs-light',
         ...customOptions,
         fontFamily: UserContext.codeFontFamily,
-        lineNumbers: true,
+        lineNumbers: 'on',
         glyphMargin: true,
         lightbulb: { enabled: true },
         model: this.model,
@@ -43,12 +53,12 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
       this.disposable.push(
         this.editor.onDidChangeModelContent((event) => {
           if (!this.__prevent_trigger_change_event) {
-            this.props.handleUpdateCode(this.editor.getValue({ lineEnding: '\n', preserveBOM: false }), event);
+            this.props.handleUpdateCode?.(this.editor.getValue({ lineEnding: '\n', preserveBOM: false }), event);
           }
         }),
       );
-      window.editor = this.editor;
+      (window as any).editor = this.editor;
-      window.monaco = monaco;
+      (window as any).monaco = monaco;
       window.Hydro.bus.emit('scratchpadEditorCreate', this.editor, monaco);
     }
   }
@@ -71,6 +81,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
             text: value,
           },
         ],
+        () => null,
       );
       editor.pushUndoStop();
       this.__prevent_trigger_change_event = false;
@@ -79,7 +90,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
       const val = model.getValue(LF, false);
       model.dispose();
       const uri = monaco.Uri.parse(`hydro://${UiContext.pdoc.pid || UiContext.pdoc.docId}.${language}`);
-      this.model = monaco.editor.createModel(val, language, uri);
+      this.model = monaco.editor.getModel(uri) || monaco.editor.createModel(val, language, uri);
       editor.setModel(this.model);
     }
     if (editor) {

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.40.9",
+  "version": "4.40.10",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/types.ts

@@ -1,6 +1,12 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
+declare global {
-declare let UserContext: any;
+  interface Window {
-declare let UiContext: any;
+    node_modules: any;
-// eslint-disable-next-line
+    LANGS: Record<string, any>;
-declare let node_modules: any;
+
-declare let LANGS: Record<string, any>;
+  }
+
+  let UserContext: Record<string, any>;
+  let UiContext: Record<string, any>;
+}
+
+export { };