Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Cleanup and fix bug in code editor

Browse Source
This commit is contained in:
Nilay Majorwar 2022-01-22 21:29:28 +05:30
parent 694d3133fc
commit ffc9c03452
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,8 +42,6 @@ type Props = {
const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => { const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
const [editor, setEditor] = React.useState<EditorInstance | null>(null); const [editor, setEditor] = React.useState<EditorInstance | null>(null);
const [monaco, setMonaco] = React.useState<MonacoInstance | null>(null); const [monaco, setMonaco] = React.useState<MonacoInstance | 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 { isDark } = useDarkMode(); const { isDark } = useDarkMode();
@ -68,17 +66,22 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
}); });
/** Update code highlights */ /** Update code highlights */
const updateHighlights = React.useCallback((hl: DocumentRange | null) => { const updateHighlights = React.useCallback(
// Remove previous highlights (hl: DocumentRange | null) => {
const prevRange = highlightRange.current; if (!editor) return;
editor!.deltaDecorations(prevRange, []);
// Add new highlights // Remove previous highlights
if (!hl) return; const prevRange = highlightRange.current;
const newRange = createHighlightRange(monaco!, hl); editor.deltaDecorations(prevRange, []);
const rangeStr = editor!.deltaDecorations([], [newRange]);
highlightRange.current = rangeStr; // Add new highlights
}, []); if (!hl) return;
const newRange = createHighlightRange(monaco!, hl);
const rangeStr = editor.deltaDecorations([], [newRange]);
highlightRange.current = rangeStr;
},
[editor]
);
// Provide handle to parent for accessing editor contents // Provide handle to parent for accessing editor contents
React.useImperativeHandle( React.useImperativeHandle(