Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 09:36:27 +00:00
Code Issues Releases Activity

editor: drop use of react-monaco-editor

Browse Source 
The upstream package is currently broken and doesn't actually save us
any work.
This commit is contained in:
David Lechner
2022-12-01 17:08:19 -06:00
committed by David Lechner
parent 5924ded76a
commit 35cef50e44
15 changed files with 59 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2 -2
View File
@@ -95,7 +95,6 @@
"react-dom": "^16.13.1",
"react-dropzone": "^14.2.3",
"react-joyride": "^2.5.3",
"react-monaco-editor": "^0.50.1",
"react-popper": "^2.3.0",
"react-redux": "^8.0.5",
"react-refresh": "^0.14.0",
@@ -198,11 +197,12 @@
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.mjs"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\](?!(monaco-editor|react-monaco-editor|nanoevents)[/\\\\]).+\\.(js|jsx|mjs|cjs|ts|tsx)$",
"[/\\\\]node_modules[/\\\\](?!(monaco-editor|nanoevents)[/\\\\]).+\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [],
"moduleNameMapper": {
"^monaco-editor$": "monaco-editor/esm/vs/editor/editor.api",
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
src/editor/Editor.test.tsx
+1 -1
View File
@@ -3,8 +3,8 @@
import { Classes } from '@blueprintjs/core';
import { cleanup, fireEvent, waitFor } from '@testing-library/react';
import * as monaco from 'monaco-editor';
import React from 'react';
import { monaco } from 'react-monaco-editor';
import { testRender, uuid } from '../../test';
import { FileMetadata } from '../fileStorage';
import { useFileStorageMetadata, useFileStoragePath } from '../fileStorage/hooks';
src/editor/Editor.tsx
+34 -36
View File
@@ -16,17 +16,13 @@ import {
Text,
} from '@blueprintjs/core';
import { ContextMenu2, ResizeSensor2 } from '@blueprintjs/popover2';
import * as monaco from 'monaco-editor';
import tomorrowNightEightiesTheme from 'monaco-themes/themes/Tomorrow-Night-Eighties.json';
import xcodeTheme from 'monaco-themes/themes/Xcode_default.json';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useId } from 'react-aria';
import MonacoEditor, {
EditorDidMount,
EditorWillUnmount,
monaco,
} from 'react-monaco-editor';
import { useDispatch } from 'react-redux';
import { useTernaryDarkMode } from 'usehooks-ts';
import { useEffectOnce, useTernaryDarkMode } from 'usehooks-ts';
import { UUID } from '../fileStorage';
import { useFileStoragePath } from '../fileStorage/hooks';
import { compile } from '../mpy/actions';
@@ -364,18 +360,9 @@ const Editor: React.VFC = () => {
const i18n = useI18n();
const options = useMemo<monaco.editor.IStandaloneEditorConstructionOptions>(
() => ({
model: null,
fontSize: 18,
minimap: { enabled: false },
contextmenu: false,
rulers: [80],
lineNumbersMinChars: 4,
wordBasedSuggestions: false,
}),
[],
);
useEffect(() => {
monaco.editor.setTheme(isDarkMode ? tomorrowNightEightiesId : xcodeId);
}, [isDarkMode]);
useEditor(
editor,
@@ -429,18 +416,6 @@ const Editor: React.VFC = () => {
[],
);
const handleEditorDidMount = useCallback<EditorDidMount>(
(editor) => {
editor.focus();
setEditor(editor);
},
[setEditor],
);
const handleEditorWillUnmount = useCallback<EditorWillUnmount>(() => {
setEditor(undefined);
}, [setEditor]);
const popoverProps = useMemo<IOverlayLifecycleProps>(
() => ({
onOpened: (e) => {
@@ -462,6 +437,34 @@ const Editor: React.VFC = () => {
[editor],
);
const editorRef = useRef<HTMLDivElement>(null);
useEffectOnce(() => {
// istanbul ignore if: should never happen
if (!editorRef.current) {
console.error('no editorRef!');
return;
}
const monacoEditor = monaco.editor.create(editorRef.current, {
model: null,
fontSize: 18,
minimap: { enabled: false },
contextmenu: false,
rulers: [80],
lineNumbersMinChars: 4,
wordBasedSuggestions: false,
});
monacoEditor.focus();
setEditor(monacoEditor);
return () => {
setEditor(undefined);
monacoEditor.dispose();
};
});
return (
<div className="pb-editor">
<EditorTabs onChange={() => editor?.focus()} />
@@ -475,12 +478,7 @@ const Editor: React.VFC = () => {
content={() => <EditorContextMenu editor={editor} />}
popoverProps={popoverProps}
>
<MonacoEditor
theme={isDarkMode ? tomorrowNightEightiesId : xcodeId}
options={options}
editorDidMount={handleEditorDidMount}
editorWillUnmount={handleEditorWillUnmount}
/>
<div className="pb-editor-monaco" ref={editorRef} />
</ContextMenu2>
</ResizeSensor2>
</div>
src/editor/editor.scss
+6
View File
@@ -26,6 +26,7 @@
justify-content: flex-start;
&-tablist {
flex: none;
padding: bp.$pt-grid-size * 0.3;
overflow-x: auto;
@include pb.background-contrast(6%);
@@ -63,6 +64,11 @@
flex: 1 1 auto;
}
&-monaco {
width: 100%;
height: 100%;
}
&-placeholder {
pointer-events: none;
width: max-content;
src/editor/lib.test.ts
+1 -1
View File
@@ -2,7 +2,7 @@
// Copyright (c) 2022 The Pybricks Authors
import { mock } from 'jest-mock-extended';
import type { monaco } from 'react-monaco-editor';
import type * as monaco from 'monaco-editor';
import { uuid } from '../../test';
import { ActiveFileHistoryManager, OpenFileInfo, OpenFileManager } from './lib';
src/editor/lib.ts
+1 -1
View File
@@ -2,7 +2,7 @@
// Copyright (c) 2022 The Pybricks Authors
import dexieObservable from 'dexie-observable';
import type { monaco } from 'react-monaco-editor';
import type * as monaco from 'monaco-editor';
import { UUID } from '../fileStorage';
// HACK: Using window.name to detect page reloads vs. tab duplication.
src/editor/pybricksMicroPython.ts
+1 -1
View File
@@ -5,7 +5,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import type { monaco } from 'react-monaco-editor';
import type * as monaco from 'monaco-editor';
/** The Pybricks MicroPython language identifier. */
export const pybricksMicroPythonId = 'pybricks-micropython';
src/editor/sagas.test.ts
+1 -1
View File
@@ -2,7 +2,7 @@
// Copyright (c) 2022 The Pybricks Authors
import { mock } from 'jest-mock-extended';
import { monaco } from 'react-monaco-editor';
import * as monaco from 'monaco-editor';
import { AsyncSaga, uuid } from '../../test';
import {
fileStorageDidFailToLoadTextFile,
src/editor/sagas.ts
+1 -1
View File
@@ -2,7 +2,7 @@
// Copyright (c) 2022 The Pybricks Authors
import type { DatabaseChangeType, IDatabaseChange } from 'dexie-observable/api';
import { monaco } from 'react-monaco-editor';
import * as monaco from 'monaco-editor';
import { EventChannel, buffers, eventChannel } from 'redux-saga';
import {
call,
src/editor/untitledHint.ts
+1 -1
View File
@@ -4,7 +4,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import type { monaco } from 'react-monaco-editor';
import type * as monaco from 'monaco-editor';
export class UntitledHintContribution implements monaco.editor.IEditorContribution {
public static readonly ID = 'editor.contrib.untitledHint';
src/fileStorage/actions.ts
+1 -1
View File
@@ -1,7 +1,7 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
import type { monaco } from 'react-monaco-editor';
import type * as monaco from 'monaco-editor';
import { createAction } from '../actions';
import { FileMetadata, UUID } from '.';
src/fileStorage/index.ts
+1 -1
View File
@@ -3,7 +3,7 @@
import 'dexie-observable';
import Dexie, { Table } from 'dexie';
import type { monaco } from 'react-monaco-editor';
import type * as monaco from 'monaco-editor';
/** Type to avoid mixing UUID with regular string. */
export type UUID = string & { _uuidBrand: undefined };
src/hub/sagas.test.ts
-2
View File
@@ -22,8 +22,6 @@ import {
} from './actions';
import hub from './sagas';
jest.mock('react-monaco-editor');
describe('downloadAndRun', () => {
test('no errors', async () => {
const saga = new AsyncSaga(hub, {
src/monaco-extension.d.ts
Vendored
+8 -10
View File
@@ -3,17 +3,15 @@
// exposes some monaco editor internal functions
import {} from 'react-monaco-editor';
import {} from 'monaco-editor';
declare module 'react-monaco-editor' {
export namespace monaco {
export namespace editor {
export interface ITextModel {
// https://github.com/microsoft/vscode/blob/d54c705f6567958a732ac88b1c3ec4d2303fb026/src/vs/editor/common/model.ts#L1135
canUndo: () => boolean;
// https://github.com/microsoft/vscode/blob/d54c705f6567958a732ac88b1c3ec4d2303fb026/src/vs/editor/common/model.ts#L1148
canRedo: () => boolean;
}
declare module 'monaco-editor' {
export namespace editor {
export interface ITextModel {
// https://github.com/microsoft/vscode/blob/d54c705f6567958a732ac88b1c3ec4d2303fb026/src/vs/editor/common/model.ts#L1135
canUndo: () => boolean;
// https://github.com/microsoft/vscode/blob/d54c705f6567958a732ac88b1c3ec4d2303fb026/src/vs/editor/common/model.ts#L1148
canRedo: () => boolean;
}
}
}
yarn.lock
-14
View File
@@ -2507,7 +2507,6 @@ __metadata:
react-dom: ^16.13.1
react-dropzone: ^14.2.3
react-joyride: ^2.5.3
react-monaco-editor: ^0.50.1
react-popper: ^2.3.0
react-redux: ^8.0.5
react-refresh: ^0.14.0
@@ -13028,19 +13027,6 @@ __metadata:
languageName: node
linkType: hard
"react-monaco-editor@npm:^0.50.1":
version: 0.50.1
resolution: "react-monaco-editor@npm:0.50.1"
dependencies:
prop-types: ^15.8.1
peerDependencies:
"@types/react": ">=17 <= 18"
monaco-editor: ^0.34.0
react: ">=17 <= 18"
checksum: 509a9675bc878adb515d93c4cbfac1b1818f5cf54505aa50a40d9e848e9c243a75257c1ab13b505a9d8cbdbb2b09f90117bcf618e2d1ec1ffe2bf22fd16a3a03
languageName: node
linkType: hard
"react-popper@npm:^1.3.11":
version: 1.3.11
resolution: "react-popper@npm:1.3.11"