From db28ca899a8ad9506a555516de93b6065a0ee879 Mon Sep 17 00:00:00 2001 From: shanejonas Date: Tue, 2 Jul 2019 21:47:40 -0700 Subject: [PATCH] fix: add back replace meta schema plugin for monaco --- src/App.tsx | 3 ++ src/hooks/useMonacoModel.tsx | 8 +++- src/hooks/useMonacoReplaceMetaSchema.tsx | 48 ++++++++++++++++++++++++ 3 files changed, 57 insertions(+), 2 deletions(-) create mode 100644 src/hooks/useMonacoReplaceMetaSchema.tsx diff --git a/src/App.tsx b/src/App.tsx index 25be0c2d..f88a8a92 100755 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,6 +20,7 @@ import useUISchema from "./hooks/useUISchema"; import useDefaultEditorValue from "./hooks/useDefaultEditorValue"; import useSearchBar from "./hooks/useSearchBar"; import useMonacoVimMode from "./hooks/useMonacoVimMode"; +import useMonacoReplaceMetaSchema from "./hooks/useMonacoReplaceMetaSchema"; import useQueryParams from "./hooks/useQueryParams"; const App: React.FC = () => { @@ -88,9 +89,11 @@ const App: React.FC = () => { _.debounce(handleMonacoEditorOnChange, 500), [UISchema], ); + const [metaSchema] = useMonacoReplaceMetaSchema(editor); const [model, setPosition] = useMonacoModel( parsedSchema ? JSON.stringify(parsedSchema, null, 2) : defaultValue, editor, + metaSchema, ); const [vimMode] = useMonacoVimMode(editor); diff --git a/src/hooks/useMonacoModel.tsx b/src/hooks/useMonacoModel.tsx index 1e6dc87a..a814d395 100644 --- a/src/hooks/useMonacoModel.tsx +++ b/src/hooks/useMonacoModel.tsx @@ -1,15 +1,19 @@ import { useState, useEffect } from "react"; import * as monaco from "monaco-editor"; -import schema from "@open-rpc/meta-schema"; const useMonacoModel = ( defaultValue: string | undefined | null, editor: monaco.editor.IStandaloneCodeEditor, + schema: any, ) => { const [model, setModel] = useState(); const [position, setPosition] = useState([4, 13, 4, 13]); useEffect(() => { if (editor) { + const existingModel = monaco.editor.getModels()[0]; + if (existingModel) { + existingModel.dispose(); + } const modelUri = monaco.Uri.parse(`inmemory:/${Math.random()}/model/userSpec.json`); const m = monaco.editor.createModel(defaultValue || "", "json", modelUri); monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ @@ -38,7 +42,7 @@ const useMonacoModel = ( model.dispose(); } }; - }, [editor]); + }, [editor, schema]); return [model, setPosition]; }; diff --git a/src/hooks/useMonacoReplaceMetaSchema.tsx b/src/hooks/useMonacoReplaceMetaSchema.tsx new file mode 100644 index 00000000..9a4e8a82 --- /dev/null +++ b/src/hooks/useMonacoReplaceMetaSchema.tsx @@ -0,0 +1,48 @@ +import React, { useState, useEffect } from "react"; +import * as monaco from "monaco-editor"; +const { initVimMode } = require("monaco-vim"); //tslint:disable-line +import schema from "@open-rpc/meta-schema"; + +// Vim Mode: +// Press Chord Ctrl-K, Ctrl-V => the action will run if it is enabled +const useMonacoReplaceMetaSchema = (editor: monaco.editor.IStandaloneCodeEditor) => { + const [metaSchema, setMetaSchema] = useState(schema); + + useEffect(() => { + if (!editor) { return; } + + // reset editor to empty schema + + /* tslint:disable */ + // replace schema: + // Press Chord Ctrl-K, Ctrl-R => the action will run if it is enabled + + editor.addAction({ + // An unique identifier of the contributed action. + id: "replace-meta-schema", + + // A label of the action that will be presented to the user. + label: "Replace Meta Schema", + + // An optional array of keybindings for the action. + keybindings: [ + monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_K, monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_R), + ], + contextMenuGroupId: "navigation", + contextMenuOrder: 1.5, + // Method that will be executed when the action is triggered. + // @param editor The editor instance is passed in as a convinience + run: (ed) => { + const result = window.prompt("Paste schema to replace current meta schema", "{}"); + if (result) { + const metaSchema = JSON.parse(result); + setMetaSchema(metaSchema); + } + }, + }); + }, [editor]); + + return [metaSchema]; +}; + +export default useMonacoReplaceMetaSchema;