From 3b9295e104aa1ec6cc451a7caeea795eec25e5b3 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 12 Sep 2024 03:14:54 -0400 Subject: [PATCH 1/7] Add custom themes and language support to Monaco editor. --- .../Editor/MonacoInstance/index.tsx | 15 +++++-- .../Editor/MonacoInstance/language.ts | 36 +++++++++++++++ .../components/Editor/MonacoInstance/theme.ts | 45 +++++++++++++++++++ .../Editor/MonacoInstance/typings.ts | 12 +++++ .../components/Editor/MonacoInstance/utils.ts | 9 ++++ .../src/components/Editor/index.tsx | 9 ++++ 6 files changed, 123 insertions(+), 3 deletions(-) create mode 100644 new-log-viewer/src/components/Editor/MonacoInstance/language.ts create mode 100644 new-log-viewer/src/components/Editor/MonacoInstance/theme.ts diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx b/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx index 70441b44..2df8d4ac 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx +++ b/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx @@ -23,9 +23,11 @@ import "./index.css"; interface MonacoEditorProps { + actions: ActionType[], lineNum: number, text: string, - actions: ActionType[], + themeName: string, + beforeMount?: BeforeMountCallback, beforeTextUpdate?: BeforeTextUpdateCallback, onCursorExplicitPosChange: CursorExplicitPosChangeCallback, @@ -40,9 +42,10 @@ interface MonacoEditorProps { * the editor. * * @param props + * @param props.actions * @param props.lineNum * @param props.text - * @param props.actions + * @param props.themeName * @param props.beforeMount * @param props.beforeTextUpdate * @param props.onCursorExplicitPosChange @@ -52,9 +55,10 @@ interface MonacoEditorProps { * @return */ const MonacoInstance = ({ + actions, lineNum, text, - actions, + themeName, beforeMount, beforeTextUpdate, onMount, @@ -98,6 +102,11 @@ const MonacoInstance = ({ onMount, ]); + // On `themeName` update, set theme in the editor. + useEffect(() => { + monaco.editor.setTheme(themeName); + }, [themeName]); + // On `text` update, set the text and position cursor in the editor. useEffect(() => { if (null === editorRef.current) { diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/language.ts b/new-log-viewer/src/components/Editor/MonacoInstance/language.ts new file mode 100644 index 00000000..4439e60d --- /dev/null +++ b/new-log-viewer/src/components/Editor/MonacoInstance/language.ts @@ -0,0 +1,36 @@ +import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; + +import {TOKEN_NAMES} from "./typings"; + + +const LOG_LANGUAGE_NAME = "logLanguage"; + + +/** + * Registers a custom log language in the Monaco editor. + */ +const setupCustomLogLanguage = () => { + monaco.languages.register({ + id: LOG_LANGUAGE_NAME, + }); + monaco.languages.setMonarchTokensProvider(LOG_LANGUAGE_NAME, { + tokenizer: { + root: [ + /* eslint-disable @stylistic/js/array-element-newline */ + ["INFO", TOKEN_NAMES.CUSTOM_INFO], + ["WARN", TOKEN_NAMES.CUSTOM_WARN], + ["ERROR", TOKEN_NAMES.CUSTOM_ERROR], + ["FATAL", TOKEN_NAMES.CUSTOM_FATAL], + [/(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3})Z/, TOKEN_NAMES.CUSTOM_DATE], + [/^[\t ]*at.*$/, TOKEN_NAMES.CUSTOM_EXCEPTION], + [/(\d+(?:\.\d+)?([eE])([+-])[0-9](\.[0-9])?|\d+(?:\.\d+)?)/, TOKEN_NAMES.CUSTOM_NUMBER], + /* eslint-enable @stylistic/js/array-element-newline */ + ], + }, + }); +}; + +export { + LOG_LANGUAGE_NAME, + setupCustomLogLanguage, +}; diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/theme.ts b/new-log-viewer/src/components/Editor/MonacoInstance/theme.ts new file mode 100644 index 00000000..9f5e4c66 --- /dev/null +++ b/new-log-viewer/src/components/Editor/MonacoInstance/theme.ts @@ -0,0 +1,45 @@ +import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; + +import {THEME_NAME} from "../../../typings/config"; +import {TOKEN_NAMES} from "./typings"; + + +/** + * Sets up custom themes for the Monaco editor. + */ +const setupThemes = () => { + monaco.editor.defineTheme(THEME_NAME.DARK, { + base: "vs-dark", + inherit: true, + rules: [ + {token: TOKEN_NAMES.CUSTOM_INFO, foreground: "#098658"}, + {token: TOKEN_NAMES.CUSTOM_WARN, foreground: "#ce9178"}, + {token: TOKEN_NAMES.CUSTOM_ERROR, foreground: "#ce9178", fontStyle: "bold"}, + {token: TOKEN_NAMES.CUSTOM_FATAL, foreground: "#ce9178", fontStyle: "bold"}, + {token: TOKEN_NAMES.CUSTOM_DATE, foreground: "#529955"}, + {token: TOKEN_NAMES.CUSTOM_EXCEPTION, foreground: "#ce723b", fontStyle: "italic"}, + {token: TOKEN_NAMES.CUSTOM_NUMBER, foreground: "#3f9ccb"}, + {token: TOKEN_NAMES.COMMENT, foreground: "#008000"}, + ], + colors: { + "editor.lineHighlightBackground": "#3c3c3c", + }, + }); + monaco.editor.defineTheme(THEME_NAME.LIGHT, { + base: "vs", + inherit: true, + rules: [ + {token: TOKEN_NAMES.CUSTOM_INFO, foreground: "#098658"}, + {token: TOKEN_NAMES.CUSTOM_WARN, foreground: "#b81560"}, + {token: TOKEN_NAMES.CUSTOM_ERROR, foreground: "#ac1515", fontStyle: "bold"}, + {token: TOKEN_NAMES.CUSTOM_FATAL, foreground: "#ac1515", fontStyle: "bold"}, + {token: TOKEN_NAMES.CUSTOM_DATE, foreground: "#008000"}, + {token: TOKEN_NAMES.CUSTOM_EXCEPTION, foreground: "#ce723b", fontStyle: "italic"}, + {token: TOKEN_NAMES.CUSTOM_NUMBER, foreground: "#3f9ccb"}, + ], + colors: {}, + }); +}; + + +export {setupThemes}; diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts b/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts index e305bd2d..dd98d3dd 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts +++ b/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts @@ -7,6 +7,17 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; import {ACTION_NAME} from "../../../utils/actions"; +enum TOKEN_NAMES { + CUSTOM_INFO = "customInfo", + CUSTOM_WARN = "customEarn", + CUSTOM_ERROR = "customError", + CUSTOM_FATAL = "customFatal", + CUSTOM_DATE = "customDate", + CUSTOM_EXCEPTION = "customException", + CUSTOM_NUMBER = "customNumber", + COMMENT = "comment", +} + /** * Gets called when the cursor position is explicitly changed in the editor. * @@ -55,6 +66,7 @@ interface CustomMonacoEditorHandlers { onCustomAction?: CustomActionCallback, } +export {TOKEN_NAMES}; export type { BeforeMountCallback, BeforeTextUpdateCallback, diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/utils.ts b/new-log-viewer/src/components/Editor/MonacoInstance/utils.ts index 16b8e42c..9ab6af59 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/utils.ts +++ b/new-log-viewer/src/components/Editor/MonacoInstance/utils.ts @@ -7,6 +7,11 @@ import { setupFocusOnBacktickDown, setupMobileZoom, } from "./actions"; +import { + LOG_LANGUAGE_NAME, + setupCustomLogLanguage, +} from "./language"; +import {setupThemes} from "./theme"; import {CustomMonacoEditorHandlers} from "./typings"; @@ -38,12 +43,16 @@ const createMonacoEditor = ( actions: ActionType[], handlers: CustomMonacoEditorHandlers ): monaco.editor.IStandaloneCodeEditor => { + setupCustomLogLanguage(); + setupThemes(); + const editor = monaco.editor.create( editorContainer, { // eslint-disable-next-line no-warning-comments // TODO: Add custom observer to debounce automatic layout automaticLayout: true, + language: LOG_LANGUAGE_NAME, maxTokenizationLineLength: 30_000, mouseWheelZoom: true, readOnly: true, diff --git a/new-log-viewer/src/components/Editor/index.tsx b/new-log-viewer/src/components/Editor/index.tsx index f09810c0..7962f632 100644 --- a/new-log-viewer/src/components/Editor/index.tsx +++ b/new-log-viewer/src/components/Editor/index.tsx @@ -8,6 +8,8 @@ import { import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; +import {useColorScheme} from "@mui/joy"; + import {StateContext} from "../../contexts/StateContextProvider"; import { updateWindowUrlHashParams, @@ -42,6 +44,8 @@ import "./index.css"; * @return */ const Editor = () => { + const {mode, systemMode} = useColorScheme(); + const {beginLineNumToLogEventNum, logData, numEvents} = useContext(StateContext); const {logEventNum} = useContext(UrlContext); @@ -185,6 +189,10 @@ const Editor = () => { beginLineNumToLogEventNum, ]); + const themeName = (("system" === mode) ? + systemMode : + mode) ?? "dark"; + return (
{ beforeTextUpdate={resetCachedPageSize} lineNum={lineNum} text={logData} + themeName={themeName} onCursorExplicitPosChange={handleCursorExplicitPosChange} onCustomAction={handleEditorCustomAction} onMount={handleMount} From f5228aefee6950865be5bfce19c8e45d69da33e3 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 12 Sep 2024 03:22:48 -0400 Subject: [PATCH 2/7] Update docs. --- new-log-viewer/src/components/Editor/MonacoInstance/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx b/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx index 2df8d4ac..94d6089a 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx +++ b/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx @@ -102,7 +102,7 @@ const MonacoInstance = ({ onMount, ]); - // On `themeName` update, set theme in the editor. + // On `themeName` update, set the theme in the editor. useEffect(() => { monaco.editor.setTheme(themeName); }, [themeName]); From 1d3898053505e3104d2ebdeae6cf14411faa5cec Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 12 Sep 2024 03:29:24 -0400 Subject: [PATCH 3/7] Type `themeName` explicitly in MonacoInstance. --- .../src/components/Editor/MonacoInstance/index.tsx | 2 +- new-log-viewer/src/components/Editor/index.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx b/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx index 94d6089a..0d0af05d 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx +++ b/new-log-viewer/src/components/Editor/MonacoInstance/index.tsx @@ -26,7 +26,7 @@ interface MonacoEditorProps { actions: ActionType[], lineNum: number, text: string, - themeName: string, + themeName: "dark" | "light", beforeMount?: BeforeMountCallback, beforeTextUpdate?: BeforeTextUpdateCallback, diff --git a/new-log-viewer/src/components/Editor/index.tsx b/new-log-viewer/src/components/Editor/index.tsx index 7962f632..3d72daf0 100644 --- a/new-log-viewer/src/components/Editor/index.tsx +++ b/new-log-viewer/src/components/Editor/index.tsx @@ -16,7 +16,10 @@ import { UrlContext, } from "../../contexts/UrlContextProvider"; import {Nullable} from "../../typings/common"; -import {CONFIG_KEY} from "../../typings/config"; +import { + CONFIG_KEY, + THEME_NAME, +} from "../../typings/config"; import {BeginLineNumToLogEventNumMap} from "../../typings/worker"; import { ACTION_NAME, @@ -191,7 +194,7 @@ const Editor = () => { const themeName = (("system" === mode) ? systemMode : - mode) ?? "dark"; + mode) ?? THEME_NAME.DARK; return (
From 4d4638742a47a3def8afbbffc750592dd71d207a Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Thu, 12 Sep 2024 03:38:35 -0400 Subject: [PATCH 4/7] Move the resetCachedPageSize function outside . --- .../src/components/Editor/index.tsx | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/new-log-viewer/src/components/Editor/index.tsx b/new-log-viewer/src/components/Editor/index.tsx index 3d72daf0..88d0c46d 100644 --- a/new-log-viewer/src/components/Editor/index.tsx +++ b/new-log-viewer/src/components/Editor/index.tsx @@ -41,6 +41,20 @@ import {goToPositionAndCenter} from "./MonacoInstance/utils"; import "./index.css"; +/** + * Resets the cached page size in case it causes a client OOM. If it doesn't, the saved value + * will be restored when {@link restoreCachedPageSize} is called. + */ +const resetCachedPageSize = () => { + const error = setConfig( + {key: CONFIG_KEY.PAGE_SIZE, value: CONFIG_DEFAULT[CONFIG_KEY.PAGE_SIZE]} + ); + + if (null !== error) { + console.error(`Unexpected error returned by setConfig(): ${error}`); + } +}; + /** * Renders a read-only editor for viewing logs. * @@ -107,20 +121,6 @@ const Editor = () => { }); }, []); - /** - * Resets the cached page size in case it causes a client OOM. If it doesn't, the saved value - * will be restored when {@link restoreCachedPageSize} is called. - */ - const resetCachedPageSize = useCallback(() => { - const error = setConfig( - {key: CONFIG_KEY.PAGE_SIZE, value: CONFIG_DEFAULT[CONFIG_KEY.PAGE_SIZE]} - ); - - if (null !== error) { - console.error(`Unexpected error returned by setConfig(): ${error}`); - } - }, []); - /** * Restores the cached page size that was unset in {@link resetCachedPageSize}; */ @@ -192,10 +192,6 @@ const Editor = () => { beginLineNumToLogEventNum, ]); - const themeName = (("system" === mode) ? - systemMode : - mode) ?? THEME_NAME.DARK; - return (
{ beforeTextUpdate={resetCachedPageSize} lineNum={lineNum} text={logData} - themeName={themeName} + themeName={(("system" === mode) ? + systemMode : + mode) ?? THEME_NAME.DARK} onCursorExplicitPosChange={handleCursorExplicitPosChange} onCustomAction={handleEditorCustomAction} onMount={handleMount} From 3fa73aab48cc5569b79df3143c8229cdc90a64d8 Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Mon, 16 Sep 2024 15:41:07 -0400 Subject: [PATCH 5/7] Typo fix - Apply suggestions from code review Co-authored-by: kirkrodrigues <2454684+kirkrodrigues@users.noreply.github.com> --- new-log-viewer/src/components/Editor/MonacoInstance/typings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts b/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts index dd98d3dd..a0323a2c 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts +++ b/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts @@ -9,7 +9,7 @@ import {ACTION_NAME} from "../../../utils/actions"; enum TOKEN_NAMES { CUSTOM_INFO = "customInfo", - CUSTOM_WARN = "customEarn", + CUSTOM_WARN = "customWarn", CUSTOM_ERROR = "customError", CUSTOM_FATAL = "customFatal", CUSTOM_DATE = "customDate", From 4dc8fb4134ce9a7eb1055323b1864dff7de77eae Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Mon, 16 Sep 2024 15:41:36 -0400 Subject: [PATCH 6/7] Rename TOKEN_NAMES -> TOKEN_NAME. --- .../Editor/MonacoInstance/language.ts | 16 +++++----- .../components/Editor/MonacoInstance/theme.ts | 32 +++++++++---------- .../Editor/MonacoInstance/typings.ts | 4 +-- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/language.ts b/new-log-viewer/src/components/Editor/MonacoInstance/language.ts index 4439e60d..d86fd714 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/language.ts +++ b/new-log-viewer/src/components/Editor/MonacoInstance/language.ts @@ -1,6 +1,6 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; -import {TOKEN_NAMES} from "./typings"; +import {TOKEN_NAME} from "./typings"; const LOG_LANGUAGE_NAME = "logLanguage"; @@ -17,13 +17,13 @@ const setupCustomLogLanguage = () => { tokenizer: { root: [ /* eslint-disable @stylistic/js/array-element-newline */ - ["INFO", TOKEN_NAMES.CUSTOM_INFO], - ["WARN", TOKEN_NAMES.CUSTOM_WARN], - ["ERROR", TOKEN_NAMES.CUSTOM_ERROR], - ["FATAL", TOKEN_NAMES.CUSTOM_FATAL], - [/(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3})Z/, TOKEN_NAMES.CUSTOM_DATE], - [/^[\t ]*at.*$/, TOKEN_NAMES.CUSTOM_EXCEPTION], - [/(\d+(?:\.\d+)?([eE])([+-])[0-9](\.[0-9])?|\d+(?:\.\d+)?)/, TOKEN_NAMES.CUSTOM_NUMBER], + ["INFO", TOKEN_NAME.CUSTOM_INFO], + ["WARN", TOKEN_NAME.CUSTOM_WARN], + ["ERROR", TOKEN_NAME.CUSTOM_ERROR], + ["FATAL", TOKEN_NAME.CUSTOM_FATAL], + [/(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3})Z/, TOKEN_NAME.CUSTOM_DATE], + [/^[\t ]*at.*$/, TOKEN_NAME.CUSTOM_EXCEPTION], + [/(\d+(?:\.\d+)?([eE])([+-])[0-9](\.[0-9])?|\d+(?:\.\d+)?)/, TOKEN_NAME.CUSTOM_NUMBER], /* eslint-enable @stylistic/js/array-element-newline */ ], }, diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/theme.ts b/new-log-viewer/src/components/Editor/MonacoInstance/theme.ts index 9f5e4c66..b622ec0b 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/theme.ts +++ b/new-log-viewer/src/components/Editor/MonacoInstance/theme.ts @@ -1,7 +1,7 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; import {THEME_NAME} from "../../../typings/config"; -import {TOKEN_NAMES} from "./typings"; +import {TOKEN_NAME} from "./typings"; /** @@ -12,14 +12,14 @@ const setupThemes = () => { base: "vs-dark", inherit: true, rules: [ - {token: TOKEN_NAMES.CUSTOM_INFO, foreground: "#098658"}, - {token: TOKEN_NAMES.CUSTOM_WARN, foreground: "#ce9178"}, - {token: TOKEN_NAMES.CUSTOM_ERROR, foreground: "#ce9178", fontStyle: "bold"}, - {token: TOKEN_NAMES.CUSTOM_FATAL, foreground: "#ce9178", fontStyle: "bold"}, - {token: TOKEN_NAMES.CUSTOM_DATE, foreground: "#529955"}, - {token: TOKEN_NAMES.CUSTOM_EXCEPTION, foreground: "#ce723b", fontStyle: "italic"}, - {token: TOKEN_NAMES.CUSTOM_NUMBER, foreground: "#3f9ccb"}, - {token: TOKEN_NAMES.COMMENT, foreground: "#008000"}, + {token: TOKEN_NAME.CUSTOM_INFO, foreground: "#098658"}, + {token: TOKEN_NAME.CUSTOM_WARN, foreground: "#ce9178"}, + {token: TOKEN_NAME.CUSTOM_ERROR, foreground: "#ce9178", fontStyle: "bold"}, + {token: TOKEN_NAME.CUSTOM_FATAL, foreground: "#ce9178", fontStyle: "bold"}, + {token: TOKEN_NAME.CUSTOM_DATE, foreground: "#529955"}, + {token: TOKEN_NAME.CUSTOM_EXCEPTION, foreground: "#ce723b", fontStyle: "italic"}, + {token: TOKEN_NAME.CUSTOM_NUMBER, foreground: "#3f9ccb"}, + {token: TOKEN_NAME.COMMENT, foreground: "#008000"}, ], colors: { "editor.lineHighlightBackground": "#3c3c3c", @@ -29,13 +29,13 @@ const setupThemes = () => { base: "vs", inherit: true, rules: [ - {token: TOKEN_NAMES.CUSTOM_INFO, foreground: "#098658"}, - {token: TOKEN_NAMES.CUSTOM_WARN, foreground: "#b81560"}, - {token: TOKEN_NAMES.CUSTOM_ERROR, foreground: "#ac1515", fontStyle: "bold"}, - {token: TOKEN_NAMES.CUSTOM_FATAL, foreground: "#ac1515", fontStyle: "bold"}, - {token: TOKEN_NAMES.CUSTOM_DATE, foreground: "#008000"}, - {token: TOKEN_NAMES.CUSTOM_EXCEPTION, foreground: "#ce723b", fontStyle: "italic"}, - {token: TOKEN_NAMES.CUSTOM_NUMBER, foreground: "#3f9ccb"}, + {token: TOKEN_NAME.CUSTOM_INFO, foreground: "#098658"}, + {token: TOKEN_NAME.CUSTOM_WARN, foreground: "#b81560"}, + {token: TOKEN_NAME.CUSTOM_ERROR, foreground: "#ac1515", fontStyle: "bold"}, + {token: TOKEN_NAME.CUSTOM_FATAL, foreground: "#ac1515", fontStyle: "bold"}, + {token: TOKEN_NAME.CUSTOM_DATE, foreground: "#008000"}, + {token: TOKEN_NAME.CUSTOM_EXCEPTION, foreground: "#ce723b", fontStyle: "italic"}, + {token: TOKEN_NAME.CUSTOM_NUMBER, foreground: "#3f9ccb"}, ], colors: {}, }); diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts b/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts index a0323a2c..3a2acf7d 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts +++ b/new-log-viewer/src/components/Editor/MonacoInstance/typings.ts @@ -7,7 +7,7 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; import {ACTION_NAME} from "../../../utils/actions"; -enum TOKEN_NAMES { +enum TOKEN_NAME { CUSTOM_INFO = "customInfo", CUSTOM_WARN = "customWarn", CUSTOM_ERROR = "customError", @@ -66,7 +66,7 @@ interface CustomMonacoEditorHandlers { onCustomAction?: CustomActionCallback, } -export {TOKEN_NAMES}; +export {TOKEN_NAME}; export type { BeforeMountCallback, BeforeTextUpdateCallback, From e378adc8fb93e4ce15ef05df8ef97bf0eaefcd0a Mon Sep 17 00:00:00 2001 From: Junhao Liao Date: Mon, 16 Sep 2024 15:52:59 -0400 Subject: [PATCH 7/7] Reformat MonarchTokens array elements. --- .../Editor/MonacoInstance/language.ts | 37 ++++++++++++++----- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/new-log-viewer/src/components/Editor/MonacoInstance/language.ts b/new-log-viewer/src/components/Editor/MonacoInstance/language.ts index d86fd714..e518fd43 100644 --- a/new-log-viewer/src/components/Editor/MonacoInstance/language.ts +++ b/new-log-viewer/src/components/Editor/MonacoInstance/language.ts @@ -16,15 +16,34 @@ const setupCustomLogLanguage = () => { monaco.languages.setMonarchTokensProvider(LOG_LANGUAGE_NAME, { tokenizer: { root: [ - /* eslint-disable @stylistic/js/array-element-newline */ - ["INFO", TOKEN_NAME.CUSTOM_INFO], - ["WARN", TOKEN_NAME.CUSTOM_WARN], - ["ERROR", TOKEN_NAME.CUSTOM_ERROR], - ["FATAL", TOKEN_NAME.CUSTOM_FATAL], - [/(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3})Z/, TOKEN_NAME.CUSTOM_DATE], - [/^[\t ]*at.*$/, TOKEN_NAME.CUSTOM_EXCEPTION], - [/(\d+(?:\.\d+)?([eE])([+-])[0-9](\.[0-9])?|\d+(?:\.\d+)?)/, TOKEN_NAME.CUSTOM_NUMBER], - /* eslint-enable @stylistic/js/array-element-newline */ + [ + "INFO", + TOKEN_NAME.CUSTOM_INFO, + ], + [ + "WARN", + TOKEN_NAME.CUSTOM_WARN, + ], + [ + "ERROR", + TOKEN_NAME.CUSTOM_ERROR, + ], + [ + "FATAL", + TOKEN_NAME.CUSTOM_FATAL, + ], + [ + /(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3})Z/, + TOKEN_NAME.CUSTOM_DATE, + ], + [ + /^[\t ]*at.*$/, + TOKEN_NAME.CUSTOM_EXCEPTION, + ], + [ + /(\d+(?:\.\d+)?([eE])([+-])[0-9](\.[0-9])?|\d+(?:\.\d+)?)/, + TOKEN_NAME.CUSTOM_NUMBER, + ], ], }, });