From 7bac914601e65296e588458e4504da14399e5a88 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Fri, 22 Jul 2022 15:44:28 +0200 Subject: [PATCH 1/4] Fix overflow widgets for monaco --- .../src/components/MonacoEditor.tsx | 22 +++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/toolpad-app/src/components/MonacoEditor.tsx b/packages/toolpad-app/src/components/MonacoEditor.tsx index ba0bdb81e9b..34c3b28d2a6 100644 --- a/packages/toolpad-app/src/components/MonacoEditor.tsx +++ b/packages/toolpad-app/src/components/MonacoEditor.tsx @@ -5,7 +5,7 @@ import '../utils/browserOnly'; import * as React from 'react'; import * as monaco from 'monaco-editor'; -import { styled, SxProps } from '@mui/material'; +import { styled, SxProps, useTheme } from '@mui/material'; import clsx from 'clsx'; import cuid from 'cuid'; import monacoEditorTheme from '../monacoEditorTheme'; @@ -142,8 +142,12 @@ export default React.forwardRef(function ref, ) { const rootRef = React.useRef(null); + const overflowWidgetsDomNodeRef = React.useRef(null); const instanceRef = React.useRef(null); + const theme = useTheme(); + const overflowWidgetsDomNodeZindex = theme.zIndex.tooltip + 1; + React.useEffect(() => { if (!rootRef.current) { return; @@ -183,6 +187,15 @@ export default React.forwardRef(function const pathUri = monaco.Uri.parse(`./scripts/${cuid()}${getExtension(language)}`); const model = monaco.editor.createModel(value || '', language, pathUri); + if (!overflowWidgetsDomNodeRef.current) { + const overflowWidgetsDomNode = document.createElement('div'); + // See https://github.com/microsoft/monaco-editor/issues/2233#issuecomment-913170212 + overflowWidgetsDomNode.classList.add('monaco-editor'); + overflowWidgetsDomNode.style.zIndex = String(overflowWidgetsDomNodeZindex); + document.body.append(overflowWidgetsDomNode); + overflowWidgetsDomNodeRef.current = overflowWidgetsDomNode; + } + instanceRef.current = monaco.editor.create(rootRef.current, { model, language, @@ -191,6 +204,9 @@ export default React.forwardRef(function tabSize: 2, automaticLayout: true, theme: monacoEditorTheme, + fixedOverflowWidgets: true, + // See https://github.com/microsoft/monaco-editor/issues/181 + overflowWidgetsDomNode: overflowWidgetsDomNodeRef.current, ...extraOptions, }); @@ -198,7 +214,7 @@ export default React.forwardRef(function instanceRef.current.focus(); } } - }, [language, value, options, disabled, autoFocus]); + }, [language, value, options, disabled, autoFocus, overflowWidgetsDomNodeZindex]); React.useEffect(() => { const editor = instanceRef.current; @@ -238,6 +254,8 @@ export default React.forwardRef(function instanceRef.current?.getModel()?.dispose(); instanceRef.current?.dispose(); instanceRef.current = null; + overflowWidgetsDomNodeRef.current?.remove(); + overflowWidgetsDomNodeRef.current = null; }; }, []); From 98493b2580259339deda59b62639e4976d9c3cc2 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 25 Jul 2022 11:09:47 +0200 Subject: [PATCH 2/4] nightly --- packages/toolpad-app/package.json | 1 + yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index fbb79126e40..b44cdb878d8 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -65,6 +65,7 @@ "json-to-ts": "^1.7.0", "json5": "^2.2.1", "lodash-es": "^4.17.21", + "monaco-editor": "0.34.0-dev.20220725", "next": "12.2.0", "node-fetch": "^3.2.6", "node-fetch-har": "^1.0.1", diff --git a/yarn.lock b/yarn.lock index 0f90d3dd466..de10b40350e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8942,10 +8942,10 @@ modify-values@^1.0.0: resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022" integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw== -monaco-editor@^0.33.0: - version "0.33.0" - resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.33.0.tgz#842e244f3750a2482f8a29c676b5684e75ff34af" - integrity sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw== +monaco-editor@0.34.0-dev.20220725: + version "0.34.0-dev.20220725" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.0-dev.20220725.tgz#79e6bdef9dd3e1e5a66ebbbef549604064695b22" + integrity sha512-MiuJINwVQyqEEieWQ2NEcapjmi2MiAibthhpK2Tj2pd5tMHtZMO2PpoAKQla1cwxfhTlkb7e+cv0a+CN7Cl67A== mrmime@^1.0.0: version "1.0.1" From 4147edd5bf66563d2d10f3fc8974b41fa9e0fd8a Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 25 Jul 2022 12:45:02 +0200 Subject: [PATCH 3/4] dwf --- packages/toolpad-app/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/toolpad-app/package.json b/packages/toolpad-app/package.json index b1c7ffdbb60..e0604e286b4 100644 --- a/packages/toolpad-app/package.json +++ b/packages/toolpad-app/package.json @@ -111,7 +111,6 @@ "eslint-config-prettier": "^8.3.0", "eslint-plugin-import": "^2.25.3", "glob": "^8.0.3", - "monaco-editor": "^0.34.0-dev.20220722", "webpack": "^5.73.0" }, "typings": "./index.d.ts", From 8ac635889f352a816b1a26b5a0801fdecf2128b9 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Mon, 25 Jul 2022 13:13:35 +0200 Subject: [PATCH 4/4] us global dom node --- .../src/components/MonacoEditor.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/toolpad-app/src/components/MonacoEditor.tsx b/packages/toolpad-app/src/components/MonacoEditor.tsx index b4214054c95..a6a05ea8f4d 100644 --- a/packages/toolpad-app/src/components/MonacoEditor.tsx +++ b/packages/toolpad-app/src/components/MonacoEditor.tsx @@ -5,11 +5,12 @@ import '../utils/browserOnly'; import * as React from 'react'; import * as monaco from 'monaco-editor'; -import { styled, SxProps, useTheme } from '@mui/material'; +import { styled, SxProps } from '@mui/material'; import clsx from 'clsx'; import cuid from 'cuid'; import invariant from 'invariant'; import monacoEditorTheme from '../monacoEditorTheme'; +import muiTheme from '../theme'; function getExtension(language: string): string { switch (language) { @@ -107,6 +108,19 @@ const EditorRoot = styled('div')(({ theme }) => ({ }, })); +let overflowWidgetsDomNode: HTMLDivElement | null = null; +function getOverflowWidgetsDomNode(): HTMLDivElement { + if (!overflowWidgetsDomNode) { + overflowWidgetsDomNode = document.createElement('div'); + // See https://github.com/microsoft/monaco-editor/issues/2233#issuecomment-913170212 + overflowWidgetsDomNode.classList.add('monaco-editor'); + overflowWidgetsDomNode.style.zIndex = String(muiTheme.zIndex.tooltip + 1); + document.body.append(overflowWidgetsDomNode); + } + + return overflowWidgetsDomNode; +} + export interface MonacoEditorHandle { editor: monaco.editor.IStandaloneCodeEditor; monaco: typeof monaco; @@ -143,12 +157,8 @@ export default React.forwardRef(function ref, ) { const rootRef = React.useRef(null); - const overflowWidgetsDomNodeRef = React.useRef(null); const instanceRef = React.useRef(null); - const theme = useTheme(); - const overflowWidgetsDomNodeZindex = theme.zIndex.tooltip + 1; - React.useEffect(() => { invariant(rootRef.current, 'Ref not attached'); @@ -186,15 +196,6 @@ export default React.forwardRef(function const pathUri = monaco.Uri.parse(`./scripts/${cuid()}${getExtension(language)}`); const model = monaco.editor.createModel(value || '', language, pathUri); - if (!overflowWidgetsDomNodeRef.current) { - const overflowWidgetsDomNode = document.createElement('div'); - // See https://github.com/microsoft/monaco-editor/issues/2233#issuecomment-913170212 - overflowWidgetsDomNode.classList.add('monaco-editor'); - overflowWidgetsDomNode.style.zIndex = String(overflowWidgetsDomNodeZindex); - document.body.append(overflowWidgetsDomNode); - overflowWidgetsDomNodeRef.current = overflowWidgetsDomNode; - } - instanceRef.current = monaco.editor.create(rootRef.current, { model, language, @@ -205,7 +206,7 @@ export default React.forwardRef(function theme: monacoEditorTheme, fixedOverflowWidgets: true, // See https://github.com/microsoft/monaco-editor/issues/181 - overflowWidgetsDomNode: overflowWidgetsDomNodeRef.current, + overflowWidgetsDomNode: getOverflowWidgetsDomNode(), ...extraOptions, }); @@ -213,7 +214,7 @@ export default React.forwardRef(function instanceRef.current.focus(); } } - }, [language, value, options, disabled, autoFocus, overflowWidgetsDomNodeZindex]); + }, [language, value, options, disabled, autoFocus]); React.useEffect(() => { const editor = instanceRef.current; @@ -253,8 +254,6 @@ export default React.forwardRef(function instanceRef.current?.getModel()?.dispose(); instanceRef.current?.dispose(); instanceRef.current = null; - overflowWidgetsDomNodeRef.current?.remove(); - overflowWidgetsDomNodeRef.current = null; }; }, []);