added zoomin and zoomout to context menu of editor

pull/5370/head
lianahus 2 years ago committed by Aniket
parent 48a6ba634e
commit 0756bb94fd
  1. 29
      libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@ -245,7 +245,6 @@ export const EditorUI = (props: EditorUIProps) => {
defineAndSetTheme(monacoRef.current) defineAndSetTheme(monacoRef.current)
}) })
useEffect(() => { useEffect(() => {
if (!editorRef.current || !props.currentFile) return if (!editorRef.current || !props.currentFile) return
currentFileRef.current = props.currentFile currentFileRef.current = props.currentFile
@ -410,6 +409,8 @@ export const EditorUI = (props: EditorUIProps) => {
(window as any).addRemixBreakpoint(e.target.position) (window as any).addRemixBreakpoint(e.target.position)
} }
}) })
// zoomin zoomout
editor.addCommand(monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.US_EQUAL, () => { editor.addCommand(monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.US_EQUAL, () => {
editor.updateOptions({ fontSize: editor.getOption(43).fontSize + 1 }) editor.updateOptions({ fontSize: editor.getOption(43).fontSize + 1 })
}) })
@ -417,6 +418,32 @@ export const EditorUI = (props: EditorUIProps) => {
editor.updateOptions({ fontSize: editor.getOption(43).fontSize - 1 }) editor.updateOptions({ fontSize: editor.getOption(43).fontSize - 1 })
}) })
// add context menu items
const zoominAction = {
id: "zoomIn",
label: "Zoom In",
contextMenuOrder: 0, // choose the order
contextMenuGroupId: "zooming", // create a new grouping
keybindings: [
// eslint-disable-next-line no-bitwise
monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.Equal,
],
run: () => { editor.updateOptions({ fontSize: editor.getOption(43).fontSize + 1 }) },
}
const zoomOutAction = {
id: "zoomOut",
label: "Zoom Out",
contextMenuOrder: 0, // choose the order
contextMenuGroupId: "zooming", // create a new grouping
keybindings: [
// eslint-disable-next-line no-bitwise
monacoRef.current.KeyMod.CtrlCmd | monacoRef.current.KeyCode.Minus,
],
run: () => { editor.updateOptions({ fontSize: editor.getOption(43).fontSize - 1 }) },
}
editor.addAction(zoomOutAction)
editor.addAction(zoominAction)
const editorService = editor._codeEditorService; const editorService = editor._codeEditorService;
const openEditorBase = editorService.openCodeEditor.bind(editorService); const openEditorBase = editorService.openCodeEditor.bind(editorService);
editorService.openCodeEditor = async (input, source) => { editorService.openCodeEditor = async (input, source) => {

Loading…
Cancel
Save