EDITOR: Follow-up of #1470 (Editor outline) (#1498)

This commit is contained in:
catloversg 2024-07-18 05:18:10 +07:00 committed by GitHub
parent abe7a43eec
commit cea0afe1f4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 5 deletions

@ -41,11 +41,6 @@ export function Editor({ onMount, onChange, onUnmount }: EditorProps) {
onChange(editorRef.current?.getValue()); onChange(editorRef.current?.getValue());
}); });
// This is the workaround for a bug in monaco-editor: https://github.com/microsoft/monaco-editor/issues/4455
if (containerDiv.current.firstElementChild) {
(containerDiv.current.firstElementChild as HTMLElement).style.outline = "none";
}
// Unmounting // Unmounting
return () => { return () => {
onUnmount(); onUnmount();

@ -47,6 +47,20 @@ function Root(props: IProps): React.ReactElement {
const rerender = useRerender(); const rerender = useRerender();
const editorRef = useRef<IStandaloneCodeEditor | null>(null); const editorRef = useRef<IStandaloneCodeEditor | null>(null);
// This is the workaround for a bug in monaco-editor: https://github.com/microsoft/monaco-editor/issues/4455
const removeOutlineOfEditor = useCallback(() => {
if (!editorRef.current) {
return;
}
const containerDomNode = editorRef.current.getContainerDomNode();
const elements = containerDomNode.getElementsByClassName("monaco-editor");
if (elements.length === 0) {
return;
}
const editorElement = elements[0];
(editorElement as HTMLElement).style.outline = "none";
}, [editorRef]);
const { showRAMError, updateRAM, startUpdatingRAM, finishUpdatingRAM } = useScriptEditorContext(); const { showRAMError, updateRAM, startUpdatingRAM, finishUpdatingRAM } = useScriptEditorContext();
let decorations: monaco.editor.IEditorDecorationsCollection | undefined; let decorations: monaco.editor.IEditorDecorationsCollection | undefined;
@ -278,6 +292,7 @@ function Root(props: IProps): React.ReactElement {
parseCode(currentScript.code); parseCode(currentScript.code);
editorRef.current.focus(); editorRef.current.focus();
} }
removeOutlineOfEditor();
} }
function onTabClose(index: number): void { function onTabClose(index: number): void {
@ -324,6 +339,7 @@ function Root(props: IProps): React.ReactElement {
} }
} }
rerender(); rerender();
removeOutlineOfEditor();
} }
function onTabUpdate(index: number): void { function onTabUpdate(index: number): void {