Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Minor changes to make code editor safer

Browse Source
This commit is contained in:
Nilay Majorwar 2021-12-17 15:37:35 +05:30
parent febe31a3d8
commit 50e15aaf57
2 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/code-editor/index.tsx
View File

@ -1,8 +1,12 @@
import React from "react"; import React from "react";
import Editor, { useMonaco } from "@monaco-editor/react"; import Editor from "@monaco-editor/react";
import { useEditorLanguageConfig } from "./use-editor-lang-config"; import { useEditorLanguageConfig } from "./use-editor-lang-config";
import { DocumentRange, MonacoTokensProvider } from "../../engines/types"; import { DocumentRange, MonacoTokensProvider } from "../../engines/types";
import { createHighlightRange, EditorInstance } from "./monaco-utils"; import {
createHighlightRange,
EditorInstance,
MonacoInstance,
} from "./monaco-utils";
import { useEditorBreakpoints } from "./use-editor-breakpoints"; import { useEditorBreakpoints } from "./use-editor-breakpoints";
// Interface for interacting with the editor // Interface for interacting with the editor
@ -30,13 +34,13 @@ type Props = {
*/ */
const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => { const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
const editorRef = React.useRef<EditorInstance | null>(null); const editorRef = React.useRef<EditorInstance | null>(null);
const monacoRef = React.useRef<MonacoInstance | null>(null);
const highlightRange = React.useRef<string[]>([]); const highlightRange = React.useRef<string[]>([]);
const monacoInstance = useMonaco();
// Breakpoints // Breakpoints
useEditorBreakpoints({ useEditorBreakpoints({
editor: editorRef.current, editor: editorRef.current,
monaco: monacoInstance, monaco: monacoRef.current,
onUpdateBreakpoints: props.onUpdateBreakpoints, onUpdateBreakpoints: props.onUpdateBreakpoints,
}); });
@ -47,20 +51,17 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
}); });
/** Update code highlights */ /** Update code highlights */
const updateHighlights = React.useCallback( const updateHighlights = React.useCallback((hl: DocumentRange | null) => {
(hl: DocumentRange | null) => { // Remove previous highlights
// Remove previous highlights const prevRange = highlightRange.current;
const prevRange = highlightRange.current; editorRef.current!.deltaDecorations(prevRange, []);
editorRef.current!.deltaDecorations(prevRange, []);
// Add new highlights // Add new highlights
if (!hl) return; if (!hl) return;
const newRange = createHighlightRange(monacoInstance!, hl); const newRange = createHighlightRange(monacoRef.current!, hl);
const rangeStr = editorRef.current!.deltaDecorations([], [newRange]); const rangeStr = editorRef.current!.deltaDecorations([], [newRange]);
highlightRange.current = rangeStr; highlightRange.current = rangeStr;
}, }, []);
[monacoInstance]
);
// Provide handle to parent for accessing editor contents // Provide handle to parent for accessing editor contents
React.useImperativeHandle( React.useImperativeHandle(
@ -77,7 +78,11 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
theme="vs-dark" theme="vs-dark"
defaultLanguage="brainfuck" defaultLanguage="brainfuck"
defaultValue={props.defaultValue} defaultValue={props.defaultValue}
onMount={(editor) => (editorRef.current = editor)} onMount={(editor, monaco) => {
if (!editor || !monaco) throw new Error("Error in initializing editor");
editorRef.current = editor;
monacoRef.current = monaco;
}}
options={{ minimap: { enabled: false }, glyphMargin: true }} options={{ minimap: { enabled: false }, glyphMargin: true }}
/> />
); );

2
ui/code-editor/use-editor-breakpoints.ts
View File

@ -103,7 +103,7 @@ export const useEditorBreakpoints = ({
// Mouse leaves editor -> remove hover breakpoint hint // Mouse leaves editor -> remove hover breakpoint hint
React.useEffect(() => { React.useEffect(() => {
if (!editor) return; if (!editor) return;
const disposer = editor.onMouseLeave((e: MonacoMouseLeaveEvent) => { const disposer = editor.onMouseLeave((_: MonacoMouseLeaveEvent) => {
if (!hoverBreakpoint.current) return; if (!hoverBreakpoint.current) return;
editor.deltaDecorations(hoverBreakpoint.current.decorRanges, []); editor.deltaDecorations(hoverBreakpoint.current.decorRanges, []);
hoverBreakpoint.current = null; hoverBreakpoint.current = null;